braid-design-system 34.1.0 → 34.2.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # braid-design-system
 
+## 34.2.0
+
+### Minor Changes
+
+- **Dialog:** Add `coverImage` support ([#2052](https://github.com/seek-oss/braid-design-system/pull/2052))
+
+  Add support for providing a URL for a cover image to display at the top of the Dialog via the `coverImage` prop.
+  The provided image must be compatible with the [CSS background-image “url” function].
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Dialog
+    title="Cover Image"
+    coverImage="https://placehold.co/1600x900/051A49/FFFFFF/png?text=​++++++16:9++++++​"
+    open={true}
+    onClose={() => {}}
+  >
+    <Placeholder height={100} width="100%" label="Dialog Content" />
+  </Dialog>
+  ```
+
+  [CSS background-image “url” function]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image
+
+- **vars:** Exposed `vars.transition`. Transition CSS variables are available in stylesheets and runtime styles. ([#2034](https://github.com/seek-oss/braid-design-system/pull/2034))
+
+  **EXAMPLE USAGE:**
+
+  ```ts
+  import { vars } from 'braid-design-system/css':
+
+  export const myStyle = style({
+    transition: vars.transition.fast,
+  });
+  ```
+
+- **Badge:** Added aria-hidden and aria-label props. ([#2034](https://github.com/seek-oss/braid-design-system/pull/2034))
+
+  `aria-hidden` allows a badge to be hidden from assistive technology
+
+  `aria-label` allows visible badge text to be overridden with a more descriptive label for screen readers
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Badge aria-hidden>Deprecated</Badge>
+  ```
+
+  ```jsx
+  <Badge aria-label="You have 2 notifications">2</Badge>
+  ```
+
+### Patch Changes
+
+- **seekJobs, seekBusiness:** Update webfont url ([#2044](https://github.com/seek-oss/braid-design-system/pull/2044))
+
+  Point to the `www.seek.com` domain instead of `www.seek.com.au`.
+
 ## 34.1.0
 
 ### Minor 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/css.cjs

@@ -8,7 +8,7 @@ const require_atoms = require('./lib/css/atoms/atoms.cjs');
 const require_globalTypographyStyles = require('./lib/css/globalTypographyStyles.cjs');
 
 //#region src/css.ts
-const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow } = require_vars_css.vars;
+const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = require_vars_css.vars;
 const vars = {
 	grid,
 	space,
@@ -20,7 +20,8 @@ const vars = {
 	borderColor,
 	borderRadius,
 	borderWidth,
-	shadow
+	shadow,
+	transition
 };
 function atoms(props) {
 	if (process.env.NODE_ENV !== "production") {

package/dist/css.d.cts

@@ -131,6 +131,10 @@ declare const vars: {
     medium: `var(--${string})`;
     large: `var(--${string})`;
   };
+  transition: {
+    fast: `var(--${string})`;
+    touchable: `var(--${string})`;
+  };
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 //#endregion

package/dist/css.d.mts

@@ -131,6 +131,10 @@ declare const vars: {
     medium: `var(--${string})`;
     large: `var(--${string})`;
   };
+  transition: {
+    fast: `var(--${string})`;
+    touchable: `var(--${string})`;
+  };
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 //#endregion

package/dist/css.mjs

@@ -7,7 +7,7 @@ import { atoms as atoms$1 } from "./lib/css/atoms/atoms.mjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
 
 //#region src/css.ts
-const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow } = vars$1;
+const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = vars$1;
 const vars = {
 	grid,
 	space,
@@ -19,7 +19,8 @@ const vars = {
 	borderColor,
 	borderRadius,
 	borderWidth,
-	shadow
+	shadow,
+	transition
 };
 function atoms(props) {
 	if (process.env.NODE_ENV !== "production") {

package/dist/lib/components/Badge/Badge.cjs

@@ -35,7 +35,7 @@ const stringifyChildren = (children) => {
 	if (typeof children === "number") return children.toString();
 	return children.join("");
 };
-const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, ...restProps }, ref) => {
+const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...restProps }, ref) => {
 	(0, assert.default)(validBadgeTones.indexOf(tone) >= 0, `Badge tone of "${tone}" is not valid.`);
 	(0, assert.default)(react.Children.toArray(children).every((child) => ["string", "number"].includes(typeof child)), "Badge may only contain strings or numbers");
 	const textContext = (0, react.useContext)(require_TextContext.TextContext);
@@ -53,6 +53,8 @@ const Badge = (0, react.forwardRef)(({ tone = "info", weight = "regular", bleedY
 				ref,
 				tabIndex,
 				"aria-describedby": ariaDescribedBy,
+				"aria-hidden": ariaHidden,
+				"aria-label": ariaLabel,
 				title: title ?? (!ariaDescribedBy ? stringifyChildren(children) : void 0),
 				background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
 				paddingY: require_Badge_css.verticalPadding,

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

@@ -18,6 +18,8 @@ interface BadgeProps {
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
   'aria-describedby'?: string;
+  'aria-hidden'?: boolean;
+  'aria-label'?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 //#endregion

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

@@ -18,6 +18,8 @@ interface BadgeProps {
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
   'aria-describedby'?: string;
+  'aria-hidden'?: boolean;
+  'aria-label'?: string;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/lib/components/Badge/Badge.mjs

@@ -33,7 +33,7 @@ const stringifyChildren = (children) => {
 	if (typeof children === "number") return children.toString();
 	return children.join("");
 };
-const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, ...restProps }, ref) => {
+const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYProp, title, children, id, data, tabIndex, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...restProps }, ref) => {
 	assert(validBadgeTones.indexOf(tone) >= 0, `Badge tone of "${tone}" is not valid.`);
 	assert(Children.toArray(children).every((child) => ["string", "number"].includes(typeof child)), "Badge may only contain strings or numbers");
 	const textContext = useContext(TextContext);
@@ -51,6 +51,8 @@ const Badge = forwardRef(({ tone = "info", weight = "regular", bleedY: bleedYPro
 				ref,
 				tabIndex,
 				"aria-describedby": ariaDescribedBy,
+				"aria-hidden": ariaHidden,
+				"aria-label": ariaLabel,
 				title: title ?? (!ariaDescribedBy ? stringifyChildren(children) : void 0),
 				background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
 				paddingY: verticalPadding,

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

@@ -8,7 +8,7 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position'> {
+interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
 }

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

@@ -7,7 +7,7 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position'> {
+interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
 }

package/dist/lib/components/MenuRenderer/MenuRenderer.cjs

@@ -7,9 +7,9 @@ const require_Overlay = require('../private/Overlay/Overlay.cjs');
 const require_Popover = require('../private/Popover/Popover.cjs');
 const require_getNextIndex = require('../private/getNextIndex.cjs');
 const require_normalizeKey = require('../private/normalizeKey.cjs');
+const require_ScrollContainer = require('../private/ScrollContainer/ScrollContainer.cjs');
 const require_MenuRendererContext = require('./MenuRendererContext.cjs');
 const require_MenuItemDivider = require('../MenuItemDivider/MenuItemDivider.cjs');
-const require_ScrollContainer = require('../private/ScrollContainer/ScrollContainer.cjs');
 const require_MenuRenderer_actions = require('./MenuRenderer.actions.cjs');
 const require_MenuRendererItemContext = require('./MenuRendererItemContext.cjs');
 const require_MenuRenderer_css = require('./MenuRenderer.css.cjs');

package/dist/lib/components/MenuRenderer/MenuRenderer.mjs

@@ -6,9 +6,9 @@ import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { Popover } from "../private/Popover/Popover.mjs";
 import { getNextIndex } from "../private/getNextIndex.mjs";
 import { normalizeKey } from "../private/normalizeKey.mjs";
+import { ScrollContainer } from "../private/ScrollContainer/ScrollContainer.mjs";
 import { MenuRendererContext } from "./MenuRendererContext.mjs";
 import { MenuItemDivider } from "../MenuItemDivider/MenuItemDivider.mjs";
-import { ScrollContainer } from "../private/ScrollContainer/ScrollContainer.mjs";
 import { actionTypes } from "./MenuRenderer.actions.mjs";
 import { MenuRendererItemContext } from "./MenuRendererItemContext.mjs";
 import { menuHeightLimit, menuYPadding, width } from "./MenuRenderer.css.mjs";

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
 						})
 					})