braid-design-system 34.1.0 → 34.3.0

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

@@ -1,5 +1,5 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/TextDropdown/TextDropdown.d.ts
 interface TextDropdownOption<Value> {
@@ -27,6 +27,6 @@ declare function TextDropdown<Value>({
   data,
   tabIndex,
   ...restProps
-}: TextDropdownProps<Value>): react_jsx_runtime0.JSX.Element;
+}: TextDropdownProps<Value>): react.JSX.Element;
 //#endregion
 export { TextDropdown, TextDropdownProps };

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

@@ -1,5 +1,5 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/lib/components/TextDropdown/TextDropdown.d.ts
 interface TextDropdownOption<Value> {
@@ -27,6 +27,6 @@ declare function TextDropdown<Value>({
   data,
   tabIndex,
   ...restProps
-}: TextDropdownProps<Value>): react_jsx_runtime0.JSX.Element;
+}: TextDropdownProps<Value>): react.JSX.Element;
 //#endregion
 export { TextDropdown, TextDropdownProps };

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

@@ -3,6 +3,7 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import * as react from "react";
 import { ReactElement } from "react";
+
 //#region src/lib/components/TextLink/TextLink.d.ts
 interface TextLinkStyles {
   weight?: 'regular' | 'weak';

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

@@ -52,6 +52,7 @@ const Textarea = (0, react.forwardRef)(({ value, onChange, onBlur, onFocus, onPa
 			zIndex: 0,
 			background,
 			borderRadius,
+			className: require_Textarea_css.focusRing,
 			children: [
 				hasHighlights ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 					ref: highlightsRef,

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

@@ -1,5 +1,6 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_vars_css = require('../../themes/vars.css.cjs');
+const require_outlineStyle = require('../../css/outlineStyle.cjs');
 const require_fieldPaddingX = require('../private/Field/fieldPaddingX.cjs');
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
@@ -9,8 +10,10 @@ let _vanilla_extract_css = require("@vanilla-extract/css");
 const field = (0, _vanilla_extract_css.style)({
 	resize: "vertical",
 	background: "transparent",
-	minHeight: require_vars_css.vars.touchableSize
+	minHeight: require_vars_css.vars.touchableSize,
+	outline: "none"
 }, "field");
+const focusRing = (0, _vanilla_extract_css.style)(require_outlineStyle.outlineStyle("&:focus-within"), "focusRing");
 const highlights = (0, _vanilla_extract_css.style)({
 	color: "transparent !important",
 	wordBreak: "break-word",
@@ -33,5 +36,6 @@ const scrollbarBorderOffset = (0, _vanilla_extract_css.style)({ borderRight: `${
 //#endregion
 exports.clipScrollBar = clipScrollBar;
 exports.field = field;
+exports.focusRing = focusRing;
 exports.highlights = highlights;
 exports.scrollbarBorderOffset = scrollbarBorderOffset;

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

@@ -1,4 +1,5 @@
 import { vars } from "../../themes/vars.css.mjs";
+import { outlineStyle } from "../../css/outlineStyle.mjs";
 import { fieldPaddingX } from "../private/Field/fieldPaddingX.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
@@ -8,8 +9,10 @@ setFileScope("src/lib/components/Textarea/Textarea.css.ts", "braid-design-system
 const field = style({
 	resize: "vertical",
 	background: "transparent",
-	minHeight: vars.touchableSize
+	minHeight: vars.touchableSize,
+	outline: "none"
 }, "field");
+const focusRing = style(outlineStyle("&:focus-within"), "focusRing");
 const highlights = style({
 	color: "transparent !important",
 	wordBreak: "break-word",
@@ -30,4 +33,4 @@ const scrollbarBorderOffset = style({ borderRight: `${vars.borderWidth.standard}
 endFileScope();
 
 //#endregion
-export { clipScrollBar, field, highlights, scrollbarBorderOffset };
+export { clipScrollBar, field, focusRing, highlights, scrollbarBorderOffset };

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

@@ -2,7 +2,7 @@ import { Box } from "../Box/Box.mjs";
 import { Field } from "../private/Field/Field.mjs";
 import { getCharacterLimitStatus } from "../private/Field/getCharacterLimitStatus.mjs";
 import { formatRanges } from "./formatRanges.mjs";
-import { clipScrollBar, field, highlights, scrollbarBorderOffset } from "./Textarea.css.mjs";
+import { clipScrollBar, field, focusRing, highlights, scrollbarBorderOffset } from "./Textarea.css.mjs";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -51,6 +51,7 @@ const Textarea = forwardRef(({ value, onChange, onBlur, onFocus, onPaste, placeh
 			zIndex: 0,
 			background,
 			borderRadius,
+			className: focusRing,
 			children: [
 				hasHighlights ? /* @__PURE__ */ jsx(Box, {
 					ref: highlightsRef,

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

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

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

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

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

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

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

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

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

@@ -69,9 +69,10 @@ const gutterSizeVar = (0, _vanilla_extract_css.createVar)("gutterSizeVar");
 const fullHeightVar = (0, _vanilla_extract_css.createVar)("fullHeightVar");
 const fullWidthVar = (0, _vanilla_extract_css.createVar)("fullWidthVar");
 const viewportHeight = (0, _vanilla_extract_css.style)({ maxHeight: fullHeightVar }, "viewportHeight");
+const overrideMaxHeightForScreenshot = (0, _vanilla_extract_css.createVar)("overrideMaxHeightForScreenshot");
 const maxSize = {
 	center: (0, _vanilla_extract_css.style)([{
-		maxHeight: _vanilla_extract_css_utils.calc.subtract(fullHeightVar, _vanilla_extract_css_utils.calc.multiply(gutterSizeVar, 2)),
+		maxHeight: (0, _vanilla_extract_css.fallbackVar)(overrideMaxHeightForScreenshot, _vanilla_extract_css_utils.calc.subtract(fullHeightVar, _vanilla_extract_css_utils.calc.multiply(gutterSizeVar, 2))),
 		maxWidth: _vanilla_extract_css_utils.calc.subtract(fullWidthVar, _vanilla_extract_css_utils.calc.multiply(gutterSizeVar, 2))
 	}, require_responsiveStyle.responsiveStyle({
 		mobile: { vars: { [gutterSizeVar]: require_vars_css.vars.space[require_ModalExternalGutter.externalGutter.mobile] } },
@@ -90,23 +91,39 @@ const modalContainer = (0, _vanilla_extract_css.style)({
 		[fullHeightVar]: "100dvh",
 		[fullWidthVar]: "100dvw"
 	} } },
+	display: "flex",
+	alignItems: "center",
 	maxHeight: fullHeightVar,
 	maxWidth: fullWidthVar
 }, "modalContainer");
 const headingRoot = (0, _vanilla_extract_css.style)({ overflowWrap: "break-word" }, "headingRoot");
 const closeIconOffset = (0, _vanilla_extract_css.style)({
-	top: "-5px",
-	right: "-5px"
+	top: "-2px",
+	right: "-2px"
 }, "closeIconOffset");
+const hideOverflowAboveMobile = (0, _vanilla_extract_css.style)(require_responsiveStyle.responsiveStyle({ tablet: { overflow: "hidden" } }), "hideOverflowAboveMobile");
+const maximumHeightForCoverImage = "60vh";
+const coverImageHeightLimit = (0, _vanilla_extract_css.style)(require_responsiveStyle.responsiveStyle({ tablet: { maxHeight: (0, _vanilla_extract_css.fallbackVar)(overrideMaxHeightForScreenshot, maximumHeightForCoverImage) } }), "coverImageHeightLimit");
+const coverImageVar = (0, _vanilla_extract_css.createVar)("coverImageVar");
+const coverImage = (0, _vanilla_extract_css.style)([require_responsiveStyle.responsiveStyle({ mobile: { aspectRatio: "16 / 9" } }), {
+	backgroundSize: "cover",
+	backgroundPosition: "center",
+	backgroundRepeat: "no-repeat",
+	backgroundImage: coverImageVar
+}], "coverImage");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
 
 //#endregion
 exports.backdrop = backdrop;
 exports.closeIconOffset = closeIconOffset;
+exports.coverImage = coverImage;
+exports.coverImageHeightLimit = coverImageHeightLimit;
+exports.coverImageVar = coverImageVar;
 exports.entrance = entrance;
 exports.exit = exit;
 exports.fixedStackingContext = fixedStackingContext;
 exports.headingRoot = headingRoot;
+exports.hideOverflowAboveMobile = hideOverflowAboveMobile;
 exports.maxSize = maxSize;
 exports.modalContainer = modalContainer;
 exports.pointerEventsAll = pointerEventsAll;

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

@@ -4,7 +4,7 @@ import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
 import { atoms } from "../../../css/atoms/atoms.mjs";
 import { externalGutter } from "./ModalExternalGutter.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, style } from "@vanilla-extract/css";
+import { createVar, fallbackVar, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 
 //#region src/lib/components/private/Modal/Modal.css.ts
@@ -68,9 +68,10 @@ const gutterSizeVar = createVar("gutterSizeVar");
 const fullHeightVar = createVar("fullHeightVar");
 const fullWidthVar = createVar("fullWidthVar");
 const viewportHeight = style({ maxHeight: fullHeightVar }, "viewportHeight");
+const overrideMaxHeightForScreenshot = createVar("overrideMaxHeightForScreenshot");
 const maxSize = {
 	center: style([{
-		maxHeight: calc.subtract(fullHeightVar, calc.multiply(gutterSizeVar, 2)),
+		maxHeight: fallbackVar(overrideMaxHeightForScreenshot, calc.subtract(fullHeightVar, calc.multiply(gutterSizeVar, 2))),
 		maxWidth: calc.subtract(fullWidthVar, calc.multiply(gutterSizeVar, 2))
 	}, responsiveStyle({
 		mobile: { vars: { [gutterSizeVar]: vars.space[externalGutter.mobile] } },
@@ -89,15 +90,27 @@ const modalContainer = style({
 		[fullHeightVar]: "100dvh",
 		[fullWidthVar]: "100dvw"
 	} } },
+	display: "flex",
+	alignItems: "center",
 	maxHeight: fullHeightVar,
 	maxWidth: fullWidthVar
 }, "modalContainer");
 const headingRoot = style({ overflowWrap: "break-word" }, "headingRoot");
 const closeIconOffset = style({
-	top: "-5px",
-	right: "-5px"
+	top: "-2px",
+	right: "-2px"
 }, "closeIconOffset");
+const hideOverflowAboveMobile = style(responsiveStyle({ tablet: { overflow: "hidden" } }), "hideOverflowAboveMobile");
+const maximumHeightForCoverImage = "60vh";
+const coverImageHeightLimit = style(responsiveStyle({ tablet: { maxHeight: fallbackVar(overrideMaxHeightForScreenshot, maximumHeightForCoverImage) } }), "coverImageHeightLimit");
+const coverImageVar = createVar("coverImageVar");
+const coverImage = style([responsiveStyle({ mobile: { aspectRatio: "16 / 9" } }), {
+	backgroundSize: "cover",
+	backgroundPosition: "center",
+	backgroundRepeat: "no-repeat",
+	backgroundImage: coverImageVar
+}], "coverImage");
 endFileScope();
 
 //#endregion
-export { backdrop, closeIconOffset, entrance, exit, fixedStackingContext, headingRoot, maxSize, modalContainer, pointerEventsAll, resetStackingContext, transition };
+export { backdrop, closeIconOffset, coverImage, coverImageHeightLimit, coverImageVar, entrance, exit, fixedStackingContext, headingRoot, hideOverflowAboveMobile, maxSize, modalContainer, pointerEventsAll, resetStackingContext, transition };

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

@@ -4,14 +4,18 @@ const require_Box = require('../../Box/Box.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 const require_useFallbackId = require('../../../hooks/useFallbackId.cjs');
 const require_IconClear = require('../../icons/IconClear/IconClear.cjs');
+const require_Column = require('../../Column/Column.cjs');
+const require_Columns = require('../../Columns/Columns.cjs');
 const require_Bleed = require('../../Bleed/Bleed.cjs');
 const require_ButtonIcon = require('../../ButtonIcon/ButtonIcon.cjs');
 const require_normalizeKey = require('../normalizeKey.cjs');
 const require_Heading = require('../../Heading/Heading.cjs');
 const require_pageBlockGutters = require('../../PageBlock/pageBlockGutters.cjs');
+const require_ScrollContainer = require('../ScrollContainer/ScrollContainer.cjs');
 const require_Modal_css = require('./Modal.css.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_remove_scroll = require("react-remove-scroll");
 
 //#region src/lib/components/private/Modal/ModalContent.tsx
@@ -19,48 +23,130 @@ const modalPadding = {
 	mobile: "gutter",
 	tablet: "large"
 };
-const ModalContentHeader = (0, react.forwardRef)(({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-	space: headingLevel === "2" ? {
-		mobile: "small",
-		tablet: "medium"
-	} : "small",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Heading.Heading, {
-		level: headingLevel,
-		align: center ? "center" : void 0,
+const ModalContentHeader = (0, react.forwardRef)(({ title, headingLevel, description, descriptionId, illustration, reserveCloseArea }, ref) => {
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		space: headingLevel === "2" ? {
+			mobile: "small",
+			tablet: "medium"
+		} : "small",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Heading.Heading, {
+			level: headingLevel,
+			align: illustration ? "center" : void 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+				ref,
+				tabIndex: -1,
+				component: "span",
+				position: "relative",
+				outline: "focus",
+				borderRadius: "small",
+				className: require_Modal_css.headingRoot,
+				children: title
+			})
+		}), description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			id: descriptionId,
+			children: description
+		}) : null]
+	});
+	const resolvedLayout = illustration ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		space: "medium",
+		align: "center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			paddingX: "gutter",
+			children: illustration
+		}), header]
+	}) : header;
+	return reserveCloseArea && !illustration ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+		display: "flex",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			width: "full",
+			minWidth: 0,
+			children: resolvedLayout
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			width: "touchable",
+			flexShrink: 0,
+			flexGrow: 0
+		})]
+	}) : resolvedLayout;
+});
+const ModalContentScrollLayout = ({ children, applyCoverImageHeightLimit, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScrollContainer.ScrollContainer, {
+	direction: "vertical",
+	children: [coverImageEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { ref: contentStartRef }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		className: applyCoverImageHeightLimit ? require_Modal_css.coverImageHeightLimit : void 0,
+		height: applyFullHeight ? "full" : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			ref,
-			tabIndex: -1,
-			component: "span",
-			position: "relative",
-			outline: "focus",
-			borderRadius: "small",
-			className: require_Modal_css.headingRoot,
-			children: title
+			display: "flex",
+			gap: "large",
+			flexDirection: "column",
+			height: applyFullHeight ? "full" : void 0,
+			paddingY: modalPadding,
+			paddingX: applyPageBlockGutters ? require_pageBlockGutters.pageBlockGutters : modalPadding,
+			children
+		})
+	})]
+});
+const ModalCoverImageLayout = ({ width, image, children }) => {
+	const forceStack = width === "xsmall";
+	const coverImage$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		position: "relative",
+		height: "full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			position: { tablet: forceStack ? void 0 : "absolute" },
+			inset: 0,
+			className: require_Modal_css.coverImage,
+			width: "full",
+			height: "full",
+			style: (0, _vanilla_extract_dynamic.assignInlineVars)({ [require_Modal_css.coverImageVar]: `url(${image})` })
 		})
-	}), description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		space: "none",
+		children: [coverImage$1, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children })]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Columns.Columns, {
+		space: "none",
+		collapseBelow: "tablet",
+		reverse: true,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.Column, { children: coverImage$1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.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 = require_useFallbackId.useFallbackId(id);
 	const descriptionId = (0, react.useId)();
 	const defaultModalRef = (0, react.useRef)(null);
 	const modalRef = modalRefProp || defaultModalRef;
 	const defaultHeadingRef = (0, react.useRef)(null);
 	const headingRef = headingRefProp || defaultHeadingRef;
+	const contentStartRef = (0, react.useRef)(null);
 	const handleEscape = (event) => {
 		if (require_normalizeKey.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__ */ (0, react_jsx_runtime.jsxs)(ModalContentScrollLayout, {
+		applyCoverImageHeightLimit: allowColumnLayout,
+		applyPageBlockGutters: isDrawer,
+		applyFullHeight: isDrawer,
+		contentStartRef,
+		coverImageEnabled,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
+			title,
+			headingLevel,
+			description,
+			descriptionId,
+			illustration: illustration && !coverImageEnabled ? illustration : void 0,
+			ref: headingRef,
+			reserveCloseArea: true
+		}), children]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		role: "dialog",
 		"aria-label": title,
@@ -70,7 +156,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",
@@ -81,8 +167,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,
@@ -91,7 +177,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				noRelative: true,
 				forwardProps: true,
 				enabled: scrollLock,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 					display: "flex",
 					gap: "large",
 					flexDirection: "column",
@@ -100,47 +186,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" ? require_pageBlockGutters.pageBlockGutters : modalPadding,
-					className: [require_Modal_css.pointerEventsAll, position === "center" && require_Modal_css.maxSize[position]],
+					height: isDrawer ? "full" : void 0,
+					className: {
+						[require_Modal_css.pointerEventsAll]: true,
+						[require_Modal_css.maxSize[position]]: !isDrawer,
+						[require_Modal_css.hideOverflowAboveMobile]: allowColumnLayout
+					},
 					...require_buildDataAttributes.default({
 						data,
 						validateRestProps: restProps
 					}),
-					children: [illustration ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-						space: "medium",
-						align: "center",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-							paddingX: "gutter",
-							children: illustration
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
-							title,
-							headingLevel,
-							description,
-							descriptionId,
-							center: Boolean(illustration),
-							ref: headingRef
-						})]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
-						display: "flex",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-							width: "full",
-							minWidth: 0,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
-								title,
-								headingLevel,
-								description,
-								descriptionId,
-								center: Boolean(illustration),
-								ref: headingRef
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-							width: "touchable",
-							flexShrink: 0,
-							flexGrow: 0
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children })]
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollContainer.ScrollContainer, {
+						direction: "vertical",
+						startRef: contentStartRef,
+						children: coverImageEnabled && coverImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCoverImageLayout, {
+							width,
+							image: coverImage,
+							children: modalLayout
+						}) : modalLayout
+					})
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 				position: "absolute",
@@ -151,10 +215,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				display: "flex",
 				justifyContent: "flexEnd",
 				paddingTop: modalPadding,
-				paddingRight: position !== "center" ? require_pageBlockGutters.pageBlockGutters : modalPadding,
-				className: position === "center" && require_Modal_css.maxSize[position],
+				paddingRight: isDrawer ? require_pageBlockGutters.pageBlockGutters : modalPadding,
+				className: !isDrawer && require_Modal_css.maxSize[position],
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Bleed.Bleed, {
 					space: "xsmall",
+					horizontal: "xxsmall",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 						position: "relative",
 						background: "surface",
@@ -165,7 +230,6 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 							label: closeLabel,
 							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconClear.IconClear, { tone: "secondary" }),
 							variant: "transparent",
-							size: "large",
 							onClick: onClose
 						})
 					})

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

@@ -4,7 +4,7 @@ import { BoxProps } from "../../Box/Box.cjs";
 import { ReactNode, Ref } from "react";
 
 //#region src/lib/components/private/Modal/ModalContent.d.ts
-interface ModalContentProps {
+type ModalContentCommonProps = {
   id?: string;
   title: string;
   children: ReactNode;
@@ -12,13 +12,19 @@ interface ModalContentProps {
   closeLabel?: string;
   width: BoxProps['maxWidth'] | 'content';
   description?: ReactNodeNoStrings;
-  illustration?: ReactNodeNoStrings;
   position: 'center' | 'right' | 'left';
   headingLevel: '2' | '3';
   scrollLock?: boolean;
   headingRef?: Ref<HTMLElement>;
   modalRef?: Ref<HTMLElement>;
   data?: DataAttributeMap;
-}
+};
+type ModalContentProps = ModalContentCommonProps & ({
+  coverImage?: never;
+  illustration?: ReactNodeNoStrings;
+} | {
+  coverImage?: string;
+  illustration?: never;
+});
 //#endregion
 export { ModalContentProps };

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

@@ -2,8 +2,9 @@ import { ReactNodeNoStrings } from "../ReactNodeNoStrings.mjs";
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { BoxProps } from "../../Box/Box.mjs";
 import { ReactNode, Ref } from "react";
+
 //#region src/lib/components/private/Modal/ModalContent.d.ts
-interface ModalContentProps {
+type ModalContentCommonProps = {
   id?: string;
   title: string;
   children: ReactNode;
@@ -11,13 +12,19 @@ interface ModalContentProps {
   closeLabel?: string;
   width: BoxProps['maxWidth'] | 'content';
   description?: ReactNodeNoStrings;
-  illustration?: ReactNodeNoStrings;
   position: 'center' | 'right' | 'left';
   headingLevel: '2' | '3';
   scrollLock?: boolean;
   headingRef?: Ref<HTMLElement>;
   modalRef?: Ref<HTMLElement>;
   data?: DataAttributeMap;
-}
+};
+type ModalContentProps = ModalContentCommonProps & ({
+  coverImage?: never;
+  illustration?: ReactNodeNoStrings;
+} | {
+  coverImage?: string;
+  illustration?: never;
+});
 //#endregion
 export { ModalContentProps };