braid-design-system 34.0.2 → 34.0.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # braid-design-system
 
+## 34.0.4
+
+### Patch Changes
+
+- playroom: Add "layout" and "block" recipes to snippets ([#2009](https://github.com/seek-oss/braid-design-system/pull/2009))
+
+- playroom: Add support for frameSettings ([#2006](https://github.com/seek-oss/braid-design-system/pull/2006))
+
+  Introduce new `frameSettings` for Playroom to configure frame options for specific frames.
+
+  Settings added:
+  - **Stack Debug**: Show highlight overlays of stack spacing to help review spacing and layout.
+  - **Dark Mode**: Switch the colour mode to dark mode (only used by pages embedded in native apps currently).
+
+## 34.0.3
+
+### Patch Changes
+
+- **Textarea:** Add support for automatic shrinking height with the `grow` prop (`true` by default). ([#2000](https://github.com/seek-oss/braid-design-system/pull/2000))
+
+  Automatically shrink and grow height with content when using the `grow` prop.
+
 ## 34.0.2
 
 ### Patch Changes

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/lib/components/Accordion/AccordionContext.d.mts

@@ -1,6 +1,4 @@
 import { TextProps } from "../Text/Text.mjs";
-import "react";
-
 //#region src/lib/components/Accordion/AccordionContext.d.ts
 declare const validTones: readonly ["neutral", "secondary"];
 interface AccordionContextValue {

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

@@ -27,6 +27,7 @@ const Box = (0, react.forwardRef)((props, ref) => {
 	});
 });
 Box.displayName = "Box";
+Box.__isBox__ = true;
 
 //#endregion
 exports.Box = Box;

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

@@ -26,6 +26,7 @@ const Box = forwardRef((props, ref) => {
 	});
 });
 Box.displayName = "Box";
+Box.__isBox__ = true;
 
 //#endregion
 export { Box };

package/dist/lib/components/Button/Button.d.mts

@@ -1,11 +1,8 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
-import "../Box/Box.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import { buttonTones } from "./buttonTones.mjs";
 import * as react from "react";
 import { AllHTMLAttributes, ReactElement, ReactNode } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/Button/Button.d.ts
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
 declare const buttonSizes: readonly ["standard", "small"];

package/dist/lib/components/Columns/ColumnsContext.d.mts

@@ -1,8 +1,3 @@
-import "../../css/atoms/sprinkles.css.mjs";
-import "../../css/atoms/atoms.mjs";
-import "../../utils/align.mjs";
-import "react";
-
 //#region src/lib/components/Columns/ColumnsContext.d.ts
 declare const validColumnsComponents: readonly ["div", "span", "p", "article", "section", "main", "nav", "aside", "ul", "ol", "li"];
 //#endregion

package/dist/lib/components/Dialog/Dialog.d.mts

@@ -1,8 +1,5 @@
-import "../private/Modal/ModalContent.mjs";
 import { ModalProps } from "../private/Modal/Modal.mjs";
 import { FC } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/Dialog/Dialog.d.ts
 declare const modalStyle: {
   readonly position: "center";

package/dist/lib/components/Drawer/Drawer.d.mts

@@ -1,8 +1,5 @@
-import "../private/Modal/ModalContent.mjs";
 import { ModalProps } from "../private/Modal/Modal.mjs";
 import { FC } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/Drawer/Drawer.d.ts
 declare const validWidths: readonly ["small", "medium", "large"];
 declare const validPositions: readonly ["left", "right"];

package/dist/lib/components/Hidden/Hidden.d.cts

@@ -13,4 +13,4 @@ interface HiddenProps extends ResponsiveRangeProps {
 }
 declare const Hidden: FC<HiddenProps>;
 //#endregion
-export { Hidden };
+export { Hidden, HiddenProps };

package/dist/lib/components/Hidden/Hidden.d.mts

@@ -13,4 +13,4 @@ interface HiddenProps extends ResponsiveRangeProps {
 }
 declare const Hidden: FC<HiddenProps>;
 //#endregion
-export { Hidden };
+export { Hidden, HiddenProps };

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

@@ -0,0 +1,10 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_Hidden = require('./Hidden.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/lib/components/Hidden/Hidden.playroom.tsx
+const Hidden = ({ ...restProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Hidden.Hidden, { ...restProps });
+Hidden.__isHidden__ = true;
+
+//#endregion
+exports.Hidden = Hidden;

package/dist/lib/components/Hidden/Hidden.playroom.d.cts

@@ -0,0 +1,7 @@
+import { HiddenProps } from "./Hidden.cjs";
+import { FC } from "react";
+
+//#region src/lib/components/Hidden/Hidden.playroom.d.ts
+declare const Hidden: FC<HiddenProps>;
+//#endregion
+export { Hidden };

package/dist/lib/components/Hidden/Hidden.playroom.d.mts

@@ -0,0 +1,7 @@
+import { HiddenProps } from "./Hidden.mjs";
+import { FC } from "react";
+
+//#region src/lib/components/Hidden/Hidden.playroom.d.ts
+declare const Hidden: FC<HiddenProps>;
+//#endregion
+export { Hidden };

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

@@ -0,0 +1,9 @@
+import { Hidden as Hidden$1 } from "./Hidden.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/lib/components/Hidden/Hidden.playroom.tsx
+const Hidden = ({ ...restProps }) => /* @__PURE__ */ jsx(Hidden$1, { ...restProps });
+Hidden.__isHidden__ = true;
+
+//#endregion
+export { Hidden };

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

@@ -0,0 +1,10 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_HiddenVisually = require('./HiddenVisually.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/lib/components/HiddenVisually/HiddenVisually.playroom.tsx
+const HiddenVisually = ({ ...restProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HiddenVisually.HiddenVisually, { ...restProps });
+HiddenVisually.__isHiddenVisually__ = true;
+
+//#endregion
+exports.HiddenVisually = HiddenVisually;

package/dist/lib/components/HiddenVisually/HiddenVisually.playroom.d.cts

@@ -0,0 +1,7 @@
+import { HiddenVisually as HiddenVisually$1 } from "./HiddenVisually.cjs";
+import { ComponentProps, FC } from "react";
+
+//#region src/lib/components/HiddenVisually/HiddenVisually.playroom.d.ts
+declare const HiddenVisually: FC<ComponentProps<typeof HiddenVisually$1>>;
+//#endregion
+export { HiddenVisually };

package/dist/lib/components/HiddenVisually/HiddenVisually.playroom.d.mts

@@ -0,0 +1,7 @@
+import { HiddenVisually as HiddenVisually$1 } from "./HiddenVisually.mjs";
+import { ComponentProps, FC } from "react";
+
+//#region src/lib/components/HiddenVisually/HiddenVisually.playroom.d.ts
+declare const HiddenVisually: FC<ComponentProps<typeof HiddenVisually$1>>;
+//#endregion
+export { HiddenVisually };

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

@@ -0,0 +1,9 @@
+import { HiddenVisually as HiddenVisually$1 } from "./HiddenVisually.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/lib/components/HiddenVisually/HiddenVisually.playroom.tsx
+const HiddenVisually = ({ ...restProps }) => /* @__PURE__ */ jsx(HiddenVisually$1, { ...restProps });
+HiddenVisually.__isHiddenVisually__ = true;
+
+//#endregion
+export { HiddenVisually };

package/dist/lib/components/MenuItem/useMenuItem.d.mts

@@ -1,9 +1,6 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
-import "../Box/Box.mjs";
 import { BadgeProps } from "../Badge/Badge.mjs";
 import { ReactElement, ReactNode } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/MenuItem/useMenuItem.d.ts
 type MenuItemTone = 'critical' | undefined;
 interface UseMenuItemProps {

package/dist/lib/components/MenuRenderer/MenuRenderer.d.mts

@@ -3,8 +3,6 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { PopoverProps } from "../private/Popover/Popover.mjs";
 import { width as width$1 } from "./MenuRenderer.css.mjs";
 import { FC, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/MenuRenderer/MenuRenderer.d.ts
 interface TriggerProps {
   'aria-haspopup': boolean;

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

@@ -1,14 +1,61 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_BreakpointContext = require('../BraidProvider/BreakpointContext.cjs');
+const require_sprinkles_css = require('../../css/atoms/sprinkles.css.cjs');
+const require_flattenChildren = require('../../utils/flattenChildren.cjs');
 const require_Stack = require('./Stack.cjs');
+const require_resolveResponsiveRangeProps = require('../../utils/resolveResponsiveRangeProps.cjs');
 const require_cleanSpaceValue = require('../../playroom/cleanSpaceValue.cjs');
+const require_SpaceDebugContext = require('../../playroom/SpaceDebugContext.cjs');
+const require_DebugSpace = require('../../playroom/components/DebugSpace/DebugSpace.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/lib/components/Stack/Stack.playroom.tsx
-const Stack = ({ space, align, ...restProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-	space: require_cleanSpaceValue.cleanSpaceValue(space) || "none",
-	align: typeof align !== "boolean" ? align : void 0,
-	...restProps
-});
+const Stack = ({ space, align, children, ...restProps }) => {
+	const debug = (0, react.useContext)(require_SpaceDebugContext.default);
+	const breakpointName = (0, react.useContext)(require_BreakpointContext.breakpointContext) ?? "mobile";
+	const c = (0, react.useMemo)(() => debug ? react.Children.toArray(require_flattenChildren.default(children)).filter((child) => {
+		if (child && (0, react.isValidElement)(child)) {
+			if (child.type.__isBox__) {
+				const { display } = child.props;
+				if (!display) return true;
+				const { mobile, tablet = mobile, desktop = tablet, wide = desktop } = require_sprinkles_css.normalizeResponsiveValue(display);
+				return {
+					mobile: mobile !== "none",
+					tablet: tablet !== "none",
+					desktop: desktop !== "none",
+					wide: wide !== "none"
+				}[breakpointName];
+			}
+			if (child.type.__isHidden__) {
+				const { above, below } = child.props;
+				const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = require_resolveResponsiveRangeProps.resolveResponsiveRangeProps({
+					above,
+					below
+				});
+				return {
+					mobile: !hiddenOnMobile,
+					tablet: !hiddenOnTablet,
+					desktop: !hiddenOnDesktop,
+					wide: !hiddenOnWide
+				}[breakpointName];
+			}
+			if (child.type.__isHiddenVisually__) return false;
+			return true;
+		}
+	}).map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [debug && index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DebugSpace.DebugSpace, { space }) : null, child] }, index)) : children, [
+		debug,
+		children,
+		breakpointName,
+		space
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
+		space: debug ? "none" : require_cleanSpaceValue.cleanSpaceValue(space) || "none",
+		align: typeof align !== "boolean" ? align : void 0,
+		...restProps,
+		children: debug ? c : children
+	});
+};
 
 //#endregion
 exports.Stack = Stack;

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

@@ -1,13 +1,60 @@
+import { breakpointContext } from "../BraidProvider/BreakpointContext.mjs";
+import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
+import flattenChildren from "../../utils/flattenChildren.mjs";
 import { Stack as Stack$1 } from "./Stack.mjs";
+import { resolveResponsiveRangeProps } from "../../utils/resolveResponsiveRangeProps.mjs";
 import { cleanSpaceValue } from "../../playroom/cleanSpaceValue.mjs";
-import { jsx } from "react/jsx-runtime";
+import SpaceDebugContext_default from "../../playroom/SpaceDebugContext.mjs";
+import { DebugSpace } from "../../playroom/components/DebugSpace/DebugSpace.mjs";
+import { Children, Fragment, isValidElement, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/lib/components/Stack/Stack.playroom.tsx
-const Stack = ({ space, align, ...restProps }) => /* @__PURE__ */ jsx(Stack$1, {
-	space: cleanSpaceValue(space) || "none",
-	align: typeof align !== "boolean" ? align : void 0,
-	...restProps
-});
+const Stack = ({ space, align, children, ...restProps }) => {
+	const debug = useContext(SpaceDebugContext_default);
+	const breakpointName = useContext(breakpointContext) ?? "mobile";
+	const c = useMemo(() => debug ? Children.toArray(flattenChildren(children)).filter((child) => {
+		if (child && isValidElement(child)) {
+			if (child.type.__isBox__) {
+				const { display } = child.props;
+				if (!display) return true;
+				const { mobile, tablet = mobile, desktop = tablet, wide = desktop } = normalizeResponsiveValue(display);
+				return {
+					mobile: mobile !== "none",
+					tablet: tablet !== "none",
+					desktop: desktop !== "none",
+					wide: wide !== "none"
+				}[breakpointName];
+			}
+			if (child.type.__isHidden__) {
+				const { above, below } = child.props;
+				const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = resolveResponsiveRangeProps({
+					above,
+					below
+				});
+				return {
+					mobile: !hiddenOnMobile,
+					tablet: !hiddenOnTablet,
+					desktop: !hiddenOnDesktop,
+					wide: !hiddenOnWide
+				}[breakpointName];
+			}
+			if (child.type.__isHiddenVisually__) return false;
+			return true;
+		}
+	}).map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [debug && index > 0 ? /* @__PURE__ */ jsx(DebugSpace, { space }) : null, child] }, index)) : children, [
+		debug,
+		children,
+		breakpointName,
+		space
+	]);
+	return /* @__PURE__ */ jsx(Stack$1, {
+		space: debug ? "none" : cleanSpaceValue(space) || "none",
+		align: typeof align !== "boolean" ? align : void 0,
+		...restProps,
+		children: debug ? c : children
+	});
+};
 
 //#endregion
 export { Stack };

package/dist/lib/components/Stepper/StepperContext.d.mts

@@ -1,7 +1,5 @@
 import { tone as tone$1 } from "./Stepper.css.mjs";
 import { KeyboardEvent, ReactNode } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/Stepper/StepperContext.d.ts
 type StepperMode = 'linear' | 'non-linear';
 type StepperTone = Exclude<keyof typeof tone$1, 'formAccent'>;

package/dist/lib/components/Tabs/Tab.d.mts

@@ -1,8 +1,6 @@
-import "../../themes/tokenType.mjs";
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { TextProps } from "../Text/Text.mjs";
 import { BadgeProps } from "../Badge/Badge.mjs";
-import "./TabListContext.mjs";
 import { FC, ReactElement, ReactNode } from "react";
 
 //#region src/lib/components/Tabs/Tab.d.ts

package/dist/lib/components/Tabs/TabListContext.d.mts

@@ -1,6 +1,4 @@
 import { TextProps } from "../Text/Text.mjs";
-import "react";
-
 //#region src/lib/components/Tabs/TabListContext.d.ts
 type TabSize = Extract<TextProps['size'], 'standard' | 'small'>;
 //#endregion

package/dist/lib/components/TextLink/TextLink.d.mts

@@ -1,11 +1,8 @@
-import "../../css/atoms/atoms.mjs";
 import { LinkComponentProps } from "../BraidProvider/BraidProvider.mjs";
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import * as react from "react";
 import { ReactElement } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/TextLink/TextLink.d.ts
 interface TextLinkStyles {
   weight?: 'regular' | 'weak';

package/dist/lib/components/Textarea/Textarea.cjs

@@ -11,11 +11,17 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const pxToInt = (str) => typeof str === "string" ? parseInt(str.replace("px", ""), 10) : 0;
 const calculateLines = (target, lines, lineLimit) => {
 	const { paddingBottom, paddingTop, lineHeight } = window.getComputedStyle(target);
-	if (!lineHeight.endsWith("px")) return lines;
+	const lineHeightCannotBeAccuratelyCalculated = !lineHeight.endsWith("px");
+	const heightSetByUser = Boolean(target.style.height);
+	if (lineHeightCannotBeAccuratelyCalculated || heightSetByUser) return lines;
 	const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
-	const currentRows = Math.floor((target.scrollHeight - padding) / pxToInt(lineHeight));
+	target.style.height = "0";
+	const scrollHeight = target.scrollHeight;
+	target.style.height = "";
+	const currentRows = Math.floor((scrollHeight - padding) / pxToInt(lineHeight));
 	if (target && target.value === "") return lines;
-	return typeof lineLimit === "number" && currentRows > lineLimit ? lineLimit : currentRows;
+	const linesWithLimitApplied = typeof lineLimit === "number" ? Math.min(currentRows, lineLimit) : currentRows;
+	return Math.max(linesWithLimitApplied, lines);
 };
 const Textarea = (0, react.forwardRef)(({ value, onChange, onBlur, onFocus, onPaste, placeholder, characterLimit, highlightRanges: highlightRangesProp = [], lines = 3, lineLimit, grow = true, tone, spellCheck, ...restProps }, ref) => {
 	const [rows, setRows] = (0, react.useState)(lines);

package/dist/lib/components/Textarea/Textarea.mjs

@@ -10,11 +10,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const pxToInt = (str) => typeof str === "string" ? parseInt(str.replace("px", ""), 10) : 0;
 const calculateLines = (target, lines, lineLimit) => {
 	const { paddingBottom, paddingTop, lineHeight } = window.getComputedStyle(target);
-	if (!lineHeight.endsWith("px")) return lines;
+	const lineHeightCannotBeAccuratelyCalculated = !lineHeight.endsWith("px");
+	const heightSetByUser = Boolean(target.style.height);
+	if (lineHeightCannotBeAccuratelyCalculated || heightSetByUser) return lines;
 	const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
-	const currentRows = Math.floor((target.scrollHeight - padding) / pxToInt(lineHeight));
+	target.style.height = "0";
+	const scrollHeight = target.scrollHeight;
+	target.style.height = "";
+	const currentRows = Math.floor((scrollHeight - padding) / pxToInt(lineHeight));
 	if (target && target.value === "") return lines;
-	return typeof lineLimit === "number" && currentRows > lineLimit ? lineLimit : currentRows;
+	const linesWithLimitApplied = typeof lineLimit === "number" ? Math.min(currentRows, lineLimit) : currentRows;
+	return Math.max(linesWithLimitApplied, lines);
 };
 const Textarea = forwardRef(({ value, onChange, onBlur, onFocus, onPaste, placeholder, characterLimit, highlightRanges: highlightRangesProp = [], lines = 3, lineLimit, grow = true, tone, spellCheck, ...restProps }, ref) => {
 	const [rows, setRows] = useState(lines);

package/dist/lib/components/TooltipRenderer/TooltipRenderer.d.mts

@@ -1,8 +1,6 @@
 import { ReactNodeNoStrings } from "../private/ReactNodeNoStrings.mjs";
 import { PopoverProps } from "../private/Popover/Popover.mjs";
 import { FC, ReactNode, RefCallback } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/TooltipRenderer/TooltipRenderer.d.ts
 interface TriggerProps {
   ref: RefCallback<HTMLElement>;

package/dist/lib/components/icons/IconContainer.d.mts

@@ -1,8 +1,5 @@
-import "../Box/Box.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import { ReactElement } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/icons/IconContainer.d.ts
 type IconContainerProps = UseIconProps;
 //#endregion

package/dist/lib/components/icons/SVGTypes.d.mts

@@ -1,6 +1,4 @@
 import { AllOrNone } from "../private/AllOrNone.mjs";
-import "react";
-
 //#region src/lib/components/icons/SVGTypes.d.ts
 type OptionalTitle = AllOrNone<{
   title: string;

package/dist/lib/components/index.d.mts

@@ -192,8 +192,6 @@ import { IconVisibility } from "./icons/IconVisibility/IconVisibility.mjs";
 import { IconWorkExperience } from "./icons/IconWorkExperience/IconWorkExperience.mjs";
 import { IconZoomIn } from "./icons/IconZoomIn/IconZoomIn.mjs";
 import { IconZoomOut } from "./icons/IconZoomOut/IconZoomOut.mjs";
-import "./icons/index.mjs";
-
 //#region src/lib/components/index.d.ts
 type LinkComponent = LinkComponent$1;
 //#endregion

package/dist/lib/components/private/Field/Field.d.mts

@@ -1,10 +1,7 @@
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
-import "../../Box/Box.mjs";
 import { FieldLabelProps } from "../../FieldLabel/FieldLabel.mjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.mjs";
 import { AllHTMLAttributes, ReactNode } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/private/Field/Field.d.ts
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant = {

package/dist/lib/components/private/FieldGroup/FieldGroup.d.mts

@@ -1,11 +1,7 @@
-import "../ReactNodeNoStrings.mjs";
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { FieldLabelProps } from "../../FieldLabel/FieldLabel.mjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.mjs";
-import "../../Stack/Stack.mjs";
 import { AllHTMLAttributes } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/private/FieldGroup/FieldGroup.d.ts
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 type FieldLabelVariant = {

package/dist/lib/components/private/Modal/Modal.d.mts

@@ -1,7 +1,4 @@
 import { ModalContentProps } from "./ModalContent.mjs";
-import "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/private/Modal/Modal.d.ts
 interface ModalProps extends Omit<ModalContentProps, 'onClose' | 'scrollLock' | 'headingRef' | 'modalRef'> {
   open: boolean;

package/dist/lib/components/private/Modal/ModalContent.d.mts

@@ -2,8 +2,6 @@ import { ReactNodeNoStrings } from "../ReactNodeNoStrings.mjs";
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { ReactNode, Ref } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/private/Modal/ModalContent.d.ts
 interface ModalContentProps {
   id?: string;

package/dist/lib/components/private/Typography/Typography.d.mts

@@ -2,8 +2,6 @@ import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { UseIconProps } from "../../../hooks/useIcon/index.mjs";
 import { ReactElement, ReactNode } from "react";
-import "react/jsx-runtime";
-
 //#region src/lib/components/private/Typography/Typography.d.ts
 interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
   children?: ReactNode;

package/dist/lib/css/typography.css.d.mts

@@ -1,5 +1,3 @@
-import "../components/Box/Box.mjs";
-
 //#region src/lib/css/typography.css.d.ts
 declare const fontWeight: Record<"medium" | "regular" | "strong", string>;
 declare const textSizeUntrimmed: Record<"xsmall" | "small" | "large" | "standard", string>;

package/dist/lib/hooks/useIcon/index.d.mts

@@ -1,5 +1,4 @@
 import { DataAttributeMap } from "../../components/private/buildDataAttributes.mjs";
-import "../../components/Box/Box.mjs";
 import { textSizeUntrimmed, tone as tone$1 } from "../../css/typography.css.mjs";
 import { OptionalTitle } from "../../components/icons/SVGTypes.mjs";
 

package/dist/lib/playroom/FrameComponent.cjs

@@ -4,6 +4,7 @@ const require_BraidProvider = require('../components/BraidProvider/BraidProvider
 const require_useResponsiveValue = require('../components/useResponsiveValue/useResponsiveValue.cjs');
 const require_ToastContext = require('../components/useToast/ToastContext.cjs');
 const require_playroomState = require('./playroomState.cjs');
+const require_SpaceDebugContext = require('./SpaceDebugContext.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -20,34 +21,21 @@ const PlayroomLink = require_BraidProvider.makeLinkComponent(({ href, onClick, .
 const ResponsiveReady = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: require_useResponsiveValue.useResponsiveValue()({ mobile: true }) ?? false ? children : null });
 };
-var FrameComponent_default = ({ theme, children }) => {
+var FrameComponent_default = ({ theme, children, frameSettings }) => {
+	const stackDebug = (0, react.useMemo)(() => frameSettings.stackDebug, [frameSettings.stackDebug]);
+	const darkMode$1 = (0, react.useMemo)(() => frameSettings.darkMode, [frameSettings.darkMode]);
 	(0, react.useEffect)(() => {
-		let code = "";
-		const darkTrigger = "braiddark";
-		const lightTrigger = "braidlight";
-		const longestTrigger = Math.max(10, 9);
-		const colorModeToggle = (ev) => {
-			code += ev.key;
-			if (code.substr(code.length - 9) === darkTrigger) {
-				document.documentElement.classList.add(require_sprinkles_css.darkMode);
-				code = "";
-			}
-			if (code.substr(code.length - 10) === lightTrigger) {
-				document.documentElement.classList.remove(require_sprinkles_css.darkMode);
-				code = "";
-			}
-			if (code.length > longestTrigger) code = code.substr(code.length - longestTrigger);
-		};
-		window.addEventListener("keydown", colorModeToggle);
-		return () => {
-			window.removeEventListener("keydown", colorModeToggle);
-		};
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: theme.webFonts.map((font) => font.linkTag).join("") } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_playroomState.PlayroomStateProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BraidProvider.BraidProvider, {
-		theme,
-		linkComponent: PlayroomLink,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToastContext.ToastProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveReady, { children }) })
-	}) })] });
+		if (darkMode$1) document.documentElement.classList.add(require_sprinkles_css.darkMode);
+		else document.documentElement.classList.remove(require_sprinkles_css.darkMode);
+	}, [darkMode$1]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SpaceDebugContext.default.Provider, {
+		value: stackDebug,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: theme.webFonts.map((font) => font.linkTag).join("") } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_playroomState.PlayroomStateProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BraidProvider.BraidProvider, {
+			theme,
+			linkComponent: PlayroomLink,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToastContext.ToastProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveReady, { children }) })
+		}) })]
+	});
 };
 
 //#endregion