braid-design-system 34.1.0 → 34.3.0

package/dist/lib/components/private/Modal/ModalContent.mjs

@@ -3,14 +3,18 @@ import { Box } from "../../Box/Box.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
 import { useFallbackId } from "../../../hooks/useFallbackId.mjs";
 import { IconClear } from "../../icons/IconClear/IconClear.mjs";
+import { Column } from "../../Column/Column.mjs";
+import { Columns } from "../../Columns/Columns.mjs";
 import { Bleed } from "../../Bleed/Bleed.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
 import { normalizeKey } from "../normalizeKey.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
 import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
-import { closeIconOffset, headingRoot, maxSize, pointerEventsAll } from "./Modal.css.mjs";
-import { Fragment, forwardRef, useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollContainer } from "../ScrollContainer/ScrollContainer.mjs";
+import { closeIconOffset, coverImage, coverImageHeightLimit, coverImageVar, headingRoot, hideOverflowAboveMobile, maxSize, pointerEventsAll } from "./Modal.css.mjs";
+import { forwardRef, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { RemoveScroll } from "react-remove-scroll";
 
 //#region src/lib/components/private/Modal/ModalContent.tsx
@@ -18,48 +22,130 @@ const modalPadding = {
 	mobile: "gutter",
 	tablet: "large"
 };
-const ModalContentHeader = forwardRef(({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(Stack, {
-	space: headingLevel === "2" ? {
-		mobile: "small",
-		tablet: "medium"
-	} : "small",
-	children: [/* @__PURE__ */ jsx(Heading, {
-		level: headingLevel,
-		align: center ? "center" : void 0,
+const ModalContentHeader = forwardRef(({ title, headingLevel, description, descriptionId, illustration, reserveCloseArea }, ref) => {
+	const header = /* @__PURE__ */ jsxs(Stack, {
+		space: headingLevel === "2" ? {
+			mobile: "small",
+			tablet: "medium"
+		} : "small",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			align: illustration ? "center" : void 0,
+			children: /* @__PURE__ */ jsx(Box, {
+				ref,
+				tabIndex: -1,
+				component: "span",
+				position: "relative",
+				outline: "focus",
+				borderRadius: "small",
+				className: headingRoot,
+				children: title
+			})
+		}), description ? /* @__PURE__ */ jsx(Box, {
+			id: descriptionId,
+			children: description
+		}) : null]
+	});
+	const resolvedLayout = illustration ? /* @__PURE__ */ jsxs(Stack, {
+		space: "medium",
+		align: "center",
+		children: [/* @__PURE__ */ jsx(Box, {
+			paddingX: "gutter",
+			children: illustration
+		}), header]
+	}) : header;
+	return reserveCloseArea && !illustration ? /* @__PURE__ */ jsxs(Box, {
+		display: "flex",
+		children: [/* @__PURE__ */ jsx(Box, {
+			width: "full",
+			minWidth: 0,
+			children: resolvedLayout
+		}), /* @__PURE__ */ jsx(Box, {
+			width: "touchable",
+			flexShrink: 0,
+			flexGrow: 0
+		})]
+	}) : resolvedLayout;
+});
+const ModalContentScrollLayout = ({ children, applyCoverImageHeightLimit, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight }) => /* @__PURE__ */ jsxs(ScrollContainer, {
+	direction: "vertical",
+	children: [coverImageEnabled && /* @__PURE__ */ jsx("span", { ref: contentStartRef }), /* @__PURE__ */ jsx(Box, {
+		className: applyCoverImageHeightLimit ? coverImageHeightLimit : void 0,
+		height: applyFullHeight ? "full" : void 0,
 		children: /* @__PURE__ */ jsx(Box, {
-			ref,
-			tabIndex: -1,
-			component: "span",
-			position: "relative",
-			outline: "focus",
-			borderRadius: "small",
-			className: headingRoot,
-			children: title
+			display: "flex",
+			gap: "large",
+			flexDirection: "column",
+			height: applyFullHeight ? "full" : void 0,
+			paddingY: modalPadding,
+			paddingX: applyPageBlockGutters ? pageBlockGutters : modalPadding,
+			children
+		})
+	})]
+});
+const ModalCoverImageLayout = ({ width, image, children }) => {
+	const forceStack = width === "xsmall";
+	const coverImage$1 = /* @__PURE__ */ jsx(Box, {
+		position: "relative",
+		height: "full",
+		children: /* @__PURE__ */ jsx(Box, {
+			position: { tablet: forceStack ? void 0 : "absolute" },
+			inset: 0,
+			className: coverImage,
+			width: "full",
+			height: "full",
+			style: assignInlineVars({ [coverImageVar]: `url(${image})` })
 		})
-	}), description ? /* @__PURE__ */ jsx(Box, {
-		id: descriptionId,
-		children: description
-	}) : null]
-}));
-const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, ...restProps }) => {
+	});
+	return forceStack ? /* @__PURE__ */ jsxs(Stack, {
+		space: "none",
+		children: [coverImage$1, /* @__PURE__ */ jsx(Fragment$1, { children })]
+	}) : /* @__PURE__ */ jsxs(Columns, {
+		space: "none",
+		collapseBelow: "tablet",
+		reverse: true,
+		children: [/* @__PURE__ */ jsx(Column, { children: coverImage$1 }), /* @__PURE__ */ jsx(Column, { children })]
+	});
+};
+const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, ...restProps }) => {
 	const resolvedId = useFallbackId(id);
 	const descriptionId = useId();
 	const defaultModalRef = useRef(null);
 	const modalRef = modalRefProp || defaultModalRef;
 	const defaultHeadingRef = useRef(null);
 	const headingRef = headingRefProp || defaultHeadingRef;
+	const contentStartRef = useRef(null);
 	const handleEscape = (event) => {
 		if (normalizeKey(event) === "Escape") {
 			event.stopPropagation();
 			onClose();
 		}
 	};
+	const isDrawer = position === "left" || position === "right";
+	const coverImageEnabled = Boolean(coverImage) && !isDrawer;
+	const allowColumnLayout = coverImageEnabled && width !== "xsmall";
 	const justifyContent = {
 		left: "flexStart",
 		center: "center",
 		right: "flexEnd"
 	}[position];
-	const modalRadius = position === "center" ? "xlarge" : void 0;
+	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	const modalLayout = /* @__PURE__ */ jsxs(ModalContentScrollLayout, {
+		applyCoverImageHeightLimit: allowColumnLayout,
+		applyPageBlockGutters: isDrawer,
+		applyFullHeight: isDrawer,
+		contentStartRef,
+		coverImageEnabled,
+		children: [/* @__PURE__ */ jsx(ModalContentHeader, {
+			title,
+			headingLevel,
+			description,
+			descriptionId,
+			illustration: illustration && !coverImageEnabled ? illustration : void 0,
+			ref: headingRef,
+			reserveCloseArea: true
+		}), children]
+	});
 	return /* @__PURE__ */ jsx(Box, {
 		role: "dialog",
 		"aria-label": title,
@@ -69,7 +155,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		onKeyDown: handleEscape,
 		position: "relative",
 		width: "full",
-		height: "full",
+		height: isDrawer ? "full" : void 0,
 		display: "flex",
 		alignItems: "center",
 		textAlign: "left",
@@ -80,8 +166,8 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			display: "flex",
 			alignItems: "center",
 			justifyContent,
-			height: position === "right" || position === "left" ? "full" : void 0,
-			overflow: position !== "center" ? "hidden" : void 0,
+			height: isDrawer ? "full" : void 0,
+			overflow: "hidden",
 			boxShadow: "large",
 			borderRadius: modalRadius,
 			width: width !== "content" ? "full" : void 0,
@@ -90,7 +176,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				noRelative: true,
 				forwardProps: true,
 				enabled: scrollLock,
-				children: /* @__PURE__ */ jsxs(Box, {
+				children: /* @__PURE__ */ jsx(Box, {
 					display: "flex",
 					gap: "large",
 					flexDirection: "column",
@@ -99,47 +185,25 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 					overflow: "auto",
 					position: "relative",
 					width: width !== "content" ? "full" : void 0,
-					height: position === "right" || position === "left" ? "full" : void 0,
-					paddingY: modalPadding,
-					paddingX: position !== "center" ? pageBlockGutters : modalPadding,
-					className: [pointerEventsAll, position === "center" && maxSize[position]],
+					height: isDrawer ? "full" : void 0,
+					className: {
+						[pointerEventsAll]: true,
+						[maxSize[position]]: !isDrawer,
+						[hideOverflowAboveMobile]: allowColumnLayout
+					},
 					...buildDataAttributes_default({
 						data,
 						validateRestProps: restProps
 					}),
-					children: [illustration ? /* @__PURE__ */ jsxs(Stack, {
-						space: "medium",
-						align: "center",
-						children: [/* @__PURE__ */ jsx(Box, {
-							paddingX: "gutter",
-							children: illustration
-						}), /* @__PURE__ */ jsx(ModalContentHeader, {
-							title,
-							headingLevel,
-							description,
-							descriptionId,
-							center: Boolean(illustration),
-							ref: headingRef
-						})]
-					}) : /* @__PURE__ */ jsxs(Box, {
-						display: "flex",
-						children: [/* @__PURE__ */ jsx(Box, {
-							width: "full",
-							minWidth: 0,
-							children: /* @__PURE__ */ jsx(ModalContentHeader, {
-								title,
-								headingLevel,
-								description,
-								descriptionId,
-								center: Boolean(illustration),
-								ref: headingRef
-							})
-						}), /* @__PURE__ */ jsx(Box, {
-							width: "touchable",
-							flexShrink: 0,
-							flexGrow: 0
-						})]
-					}), /* @__PURE__ */ jsx(Fragment, { children })]
+					children: /* @__PURE__ */ jsx(ScrollContainer, {
+						direction: "vertical",
+						startRef: contentStartRef,
+						children: coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ModalCoverImageLayout, {
+							width,
+							image: coverImage,
+							children: modalLayout
+						}) : modalLayout
+					})
 				})
 			}), /* @__PURE__ */ jsx(Box, {
 				position: "absolute",
@@ -150,10 +214,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				display: "flex",
 				justifyContent: "flexEnd",
 				paddingTop: modalPadding,
-				paddingRight: position !== "center" ? pageBlockGutters : modalPadding,
-				className: position === "center" && maxSize[position],
+				paddingRight: isDrawer ? pageBlockGutters : modalPadding,
+				className: !isDrawer && maxSize[position],
 				children: /* @__PURE__ */ jsx(Bleed, {
 					space: "xsmall",
+					horizontal: "xxsmall",
 					children: /* @__PURE__ */ jsx(Box, {
 						position: "relative",
 						background: "surface",
@@ -164,7 +229,6 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 							label: closeLabel,
 							icon: /* @__PURE__ */ jsx(IconClear, { tone: "secondary" }),
 							variant: "transparent",
-							size: "large",
 							onClick: onClose
 						})
 					})

package/dist/lib/components/private/ScrollContainer/ScrollContainer.cjs

@@ -3,36 +3,55 @@ const require_buildDataAttributes = require('../buildDataAttributes.cjs');
 const require_Box = require('../../Box/Box.cjs');
 const require_useIsomorphicLayoutEffect = require('../../../hooks/useIsomorphicLayoutEffect.cjs');
 const require_ScrollContainer_css = require('./ScrollContainer.css.cjs');
+const require_scrollbars_css = require('../scrollbars.css.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let throttle_debounce = require("throttle-debounce");
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.tsx
 const scrollOffset = 2;
-const maskOverflow = (element, direction) => setTimeout(() => {
+const maskOverflow = ({ element, direction, gateStart }) => setTimeout(() => {
 	const atTop = element.scrollTop <= 0;
 	const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
 	const atLeft = element.scrollLeft <= 0;
 	const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
 	if (direction === "vertical" || direction === "all") {
-		element.classList[atTop ? "remove" : "add"](require_ScrollContainer_css.maskTop);
+		element.classList[atTop || gateStart ? "remove" : "add"](require_ScrollContainer_css.maskTop);
 		element.classList[atBottom ? "remove" : "add"](require_ScrollContainer_css.maskBottom);
 	}
 	if (direction === "horizontal" || direction === "all") {
-		element.classList[atLeft ? "remove" : "add"](require_ScrollContainer_css.maskLeft);
+		element.classList[atLeft || gateStart ? "remove" : "add"](require_ScrollContainer_css.maskLeft);
 		element.classList[atRight ? "remove" : "add"](require_ScrollContainer_css.maskRight);
 	}
 });
-const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, data, ...restProps }) => {
+const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, startRef, data, ...restProps }) => {
 	const containerRef = (0, react.useRef)(null);
+	const gateStartRef = (0, react.useRef)(Boolean(startRef?.current));
 	const updateMask = (0, throttle_debounce.throttle)(100, (0, react.useCallback)(() => {
-		if (containerRef.current) maskOverflow(containerRef.current, direction$1);
+		if (containerRef.current) maskOverflow({
+			element: containerRef.current,
+			direction: direction$1,
+			gateStart: gateStartRef.current
+		});
 	}, [containerRef, direction$1]));
 	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
 		if (containerRef.current) updateMask();
 		window.addEventListener("resize", updateMask);
 		return () => window.removeEventListener("resize", updateMask);
 	}, [updateMask]);
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		if (!startRef?.current || !containerRef.current) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry.rootBounds) return;
+			gateStartRef.current = !(direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top);
+			updateMask();
+		}, {
+			root: containerRef.current,
+			threshold: [0, 1]
+		});
+		observer.observe(startRef.current);
+		return () => observer.disconnect();
+	}, [startRef, updateMask]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		ref: containerRef,
 		onScroll: updateMask,
@@ -41,7 +60,7 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		className: [
 			require_ScrollContainer_css.container,
 			require_ScrollContainer_css.mask,
-			hideScrollbar$1 ? require_ScrollContainer_css.hideScrollbar : null,
+			hideScrollbar$1 ? require_ScrollContainer_css.hideScrollbar : require_scrollbars_css.scrollbars,
 			require_ScrollContainer_css.fadeSize[fadeSize$1],
 			require_ScrollContainer_css.direction[direction$1]
 		],

package/dist/lib/components/private/ScrollContainer/ScrollContainer.css.cjs

@@ -39,12 +39,20 @@ const left = (0, _vanilla_extract_css.createVar)("left");
 const right = (0, _vanilla_extract_css.createVar)("right");
 const top = (0, _vanilla_extract_css.createVar)("top");
 const bottom = (0, _vanilla_extract_css.createVar)("bottom");
-const mask = (0, _vanilla_extract_css.style)({ maskImage: [
-	`linear-gradient(to bottom, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(top, "0")})`,
-	`linear-gradient(to right, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(left, "0")})`,
-	`linear-gradient(to left, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(right, "0")})`,
-	`linear-gradient(to top, transparent 0, black ${(0, _vanilla_extract_css.fallbackVar)(bottom, "0")})`
-].join(",") }, "mask");
+const mask = (0, _vanilla_extract_css.style)({
+	vars: {
+		[left]: "0",
+		[right]: "0",
+		[top]: "0",
+		[bottom]: "0"
+	},
+	maskImage: [
+		`linear-gradient(to bottom, transparent 0, black ${top})`,
+		`linear-gradient(to right, transparent 0, black ${left})`,
+		`linear-gradient(to left, transparent 0, black ${right})`,
+		`linear-gradient(to top, transparent 0, black ${bottom})`
+	].join(",")
+}, "mask");
 const maskLeft = (0, _vanilla_extract_css.style)({ vars: { [left]: scrollOverlaySize } }, "maskLeft");
 const maskRight = (0, _vanilla_extract_css.style)({ vars: { [right]: scrollOverlaySize } }, "maskRight");
 const maskTop = (0, _vanilla_extract_css.style)({ vars: { [top]: scrollOverlaySize } }, "maskTop");

package/dist/lib/components/private/ScrollContainer/ScrollContainer.css.mjs

@@ -1,5 +1,5 @@
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, fallbackVar, style, styleVariants } from "@vanilla-extract/css";
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.css.ts
 setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
@@ -38,12 +38,20 @@ const left = createVar("left");
 const right = createVar("right");
 const top = createVar("top");
 const bottom = createVar("bottom");
-const mask = style({ maskImage: [
-	`linear-gradient(to bottom, transparent 0, black ${fallbackVar(top, "0")})`,
-	`linear-gradient(to right, transparent 0, black ${fallbackVar(left, "0")})`,
-	`linear-gradient(to left, transparent 0, black ${fallbackVar(right, "0")})`,
-	`linear-gradient(to top, transparent 0, black ${fallbackVar(bottom, "0")})`
-].join(",") }, "mask");
+const mask = style({
+	vars: {
+		[left]: "0",
+		[right]: "0",
+		[top]: "0",
+		[bottom]: "0"
+	},
+	maskImage: [
+		`linear-gradient(to bottom, transparent 0, black ${top})`,
+		`linear-gradient(to right, transparent 0, black ${left})`,
+		`linear-gradient(to left, transparent 0, black ${right})`,
+		`linear-gradient(to top, transparent 0, black ${bottom})`
+	].join(",")
+}, "mask");
 const maskLeft = style({ vars: { [left]: scrollOverlaySize } }, "maskLeft");
 const maskRight = style({ vars: { [right]: scrollOverlaySize } }, "maskRight");
 const maskTop = style({ vars: { [top]: scrollOverlaySize } }, "maskTop");

package/dist/lib/components/private/ScrollContainer/ScrollContainer.mjs

@@ -2,36 +2,55 @@ import buildDataAttributes_default from "../buildDataAttributes.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
 import { container, direction, fadeSize, hideScrollbar, mask, maskBottom, maskLeft, maskRight, maskTop } from "./ScrollContainer.css.mjs";
+import { scrollbars } from "../scrollbars.css.mjs";
 import { useCallback, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { throttle } from "throttle-debounce";
 
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.tsx
 const scrollOffset = 2;
-const maskOverflow = (element, direction) => setTimeout(() => {
+const maskOverflow = ({ element, direction, gateStart }) => setTimeout(() => {
 	const atTop = element.scrollTop <= 0;
 	const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
 	const atLeft = element.scrollLeft <= 0;
 	const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
 	if (direction === "vertical" || direction === "all") {
-		element.classList[atTop ? "remove" : "add"](maskTop);
+		element.classList[atTop || gateStart ? "remove" : "add"](maskTop);
 		element.classList[atBottom ? "remove" : "add"](maskBottom);
 	}
 	if (direction === "horizontal" || direction === "all") {
-		element.classList[atLeft ? "remove" : "add"](maskLeft);
+		element.classList[atLeft || gateStart ? "remove" : "add"](maskLeft);
 		element.classList[atRight ? "remove" : "add"](maskRight);
 	}
 });
-const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, data, ...restProps }) => {
+const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fadeSize: fadeSize$1 = "medium", hideScrollbar: hideScrollbar$1 = false, startRef, data, ...restProps }) => {
 	const containerRef = useRef(null);
+	const gateStartRef = useRef(Boolean(startRef?.current));
 	const updateMask = throttle(100, useCallback(() => {
-		if (containerRef.current) maskOverflow(containerRef.current, direction$1);
+		if (containerRef.current) maskOverflow({
+			element: containerRef.current,
+			direction: direction$1,
+			gateStart: gateStartRef.current
+		});
 	}, [containerRef, direction$1]));
 	useIsomorphicLayoutEffect(() => {
 		if (containerRef.current) updateMask();
 		window.addEventListener("resize", updateMask);
 		return () => window.removeEventListener("resize", updateMask);
 	}, [updateMask]);
+	useIsomorphicLayoutEffect(() => {
+		if (!startRef?.current || !containerRef.current) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry.rootBounds) return;
+			gateStartRef.current = !(direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top);
+			updateMask();
+		}, {
+			root: containerRef.current,
+			threshold: [0, 1]
+		});
+		observer.observe(startRef.current);
+		return () => observer.disconnect();
+	}, [startRef, updateMask]);
 	return /* @__PURE__ */ jsx(Box, {
 		ref: containerRef,
 		onScroll: updateMask,
@@ -40,7 +59,7 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		className: [
 			container,
 			mask,
-			hideScrollbar$1 ? hideScrollbar : null,
+			hideScrollbar$1 ? hideScrollbar : scrollbars,
 			fadeSize[fadeSize$1],
 			direction[direction$1]
 		],

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

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

package/dist/lib/components/private/scrollbars.css.cjs

@@ -0,0 +1,27 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_colorModeStyle = require('../../css/colorModeStyle.cjs');
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+
+//#region src/lib/components/private/scrollbars.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/scrollbars.css.ts", "braid-design-system");
+const thumbColor = (0, _vanilla_extract_css.createVar)("thumbColor");
+const trackColor = "transparent";
+const scrollbars = (0, _vanilla_extract_css.style)([require_colorModeStyle.colorModeStyle({
+	lightMode: { vars: { [thumbColor]: "rgba(0 0 0 / 0.4)" } },
+	darkMode: { vars: { [thumbColor]: "rgba(255 255 255 / 0.4)" } }
+}), {
+	scrollbarColor: `${thumbColor} ${trackColor}`,
+	"@supports": { "not (scrollbar-color: auto)": { selectors: {
+		"&::-webkit-scrollbar": {
+			background: trackColor,
+			width: 8,
+			height: 8
+		},
+		"&::-webkit-scrollbar-thumb": { background: thumbColor }
+	} } }
+}], "scrollbars");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+
+//#endregion
+exports.scrollbars = scrollbars;

package/dist/lib/components/private/scrollbars.css.mjs

@@ -0,0 +1,26 @@
+import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style } from "@vanilla-extract/css";
+
+//#region src/lib/components/private/scrollbars.css.ts
+setFileScope("src/lib/components/private/scrollbars.css.ts", "braid-design-system");
+const thumbColor = createVar("thumbColor");
+const trackColor = "transparent";
+const scrollbars = style([colorModeStyle({
+	lightMode: { vars: { [thumbColor]: "rgba(0 0 0 / 0.4)" } },
+	darkMode: { vars: { [thumbColor]: "rgba(255 255 255 / 0.4)" } }
+}), {
+	scrollbarColor: `${thumbColor} ${trackColor}`,
+	"@supports": { "not (scrollbar-color: auto)": { selectors: {
+		"&::-webkit-scrollbar": {
+			background: trackColor,
+			width: 8,
+			height: 8
+		},
+		"&::-webkit-scrollbar-thumb": { background: thumbColor }
+	} } }
+}], "scrollbars");
+endFileScope();
+
+//#endregion
+export { scrollbars };

package/dist/lib/playroom/FrameComponent.d.cts

@@ -1,6 +1,6 @@
 import { BraidTheme } from "../themes/makeBraidTheme.cjs";
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/FrameComponent.d.ts
 interface Props {
@@ -12,6 +12,6 @@ declare const _default: ({
   theme,
   children,
   frameSettings
-}: Props) => react_jsx_runtime0.JSX.Element;
+}: Props) => react.JSX.Element;
 //#endregion
 export { _default };

package/dist/lib/playroom/FrameComponent.d.mts

@@ -1,6 +1,6 @@
 import { BraidTheme } from "../themes/makeBraidTheme.mjs";
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/FrameComponent.d.ts
 interface Props {
@@ -12,6 +12,6 @@ declare const _default: ({
   theme,
   children,
   frameSettings
-}: Props) => react_jsx_runtime0.JSX.Element;
+}: Props) => react.JSX.Element;
 //#endregion
 export { _default };

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

@@ -1,5 +1,5 @@
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/Placeholder/Placeholder.d.ts
 interface PlaceholderProps {
@@ -17,6 +17,6 @@ declare const Placeholder: ({
   shape,
   image,
   imageSize
-}: PlaceholderProps) => react_jsx_runtime0.JSX.Element;
+}: PlaceholderProps) => react.JSX.Element;
 //#endregion
 export { Placeholder };

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

@@ -1,5 +1,5 @@
+import * as react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/Placeholder/Placeholder.d.ts
 interface PlaceholderProps {
@@ -17,6 +17,6 @@ declare const Placeholder: ({
   shape,
   image,
   imageSize
-}: PlaceholderProps) => react_jsx_runtime0.JSX.Element;
+}: PlaceholderProps) => react.JSX.Element;
 //#endregion
 export { Placeholder };

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

@@ -1,11 +1,11 @@
+import * as react from "react";
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.ts
 declare const logoForBrand: {
-  seek: react_jsx_runtime0.JSX.Element;
-  jobsdb: react_jsx_runtime0.JSX.Element;
-  jobstreet: react_jsx_runtime0.JSX.Element;
+  seek: react.JSX.Element;
+  jobsdb: react.JSX.Element;
+  jobstreet: react.JSX.Element;
 };
 interface PlaceholderHeaderProps {
   brand?: keyof typeof logoForBrand;

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

@@ -1,11 +1,11 @@
+import * as react from "react";
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/lib/playroom/components/PlaceholderHeader/PlaceholderHeader.d.ts
 declare const logoForBrand: {
-  seek: react_jsx_runtime0.JSX.Element;
-  jobsdb: react_jsx_runtime0.JSX.Element;
-  jobstreet: react_jsx_runtime0.JSX.Element;
+  seek: react.JSX.Element;
+  jobsdb: react.JSX.Element;
+  jobstreet: react.JSX.Element;
 };
 interface PlaceholderHeaderProps {
   brand?: keyof typeof logoForBrand;