braid-design-system 34.3.0 → 34.5.0

package/dist/lib/components/private/InlineField/InlineField.d.cts

@@ -3,7 +3,6 @@ import { FieldLabelProps } from "../../FieldLabel/FieldLabel.cjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.cjs";
 import { StyledInputProps } from "./StyledInput.cjs";
 import { ReactElement, ReactNode } from "react";
-
 //#region src/lib/components/private/InlineField/InlineField.d.ts
 interface InlineFieldBaseProps {
   label: NonNullable<FieldLabelProps['label']>;

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

@@ -3,7 +3,6 @@ import { FieldLabelProps } from "../../FieldLabel/FieldLabel.mjs";
 import { FieldMessageProps } from "../../FieldMessage/FieldMessage.mjs";
 import { StyledInputProps } from "./StyledInput.mjs";
 import { ReactElement, ReactNode } from "react";
-
 //#region src/lib/components/private/InlineField/InlineField.d.ts
 interface InlineFieldBaseProps {
   label: NonNullable<FieldLabelProps['label']>;

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

@@ -9,7 +9,6 @@ import { children, labelOffset, sizeVars } from "./InlineField.css.mjs";
 import { StyledInput } from "./StyledInput.mjs";
 import { cloneElement, forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/lib/components/private/InlineField/InlineField.tsx
 const InlineField = forwardRef(({ id, name, value, checked, data, onChange, label, type, children: children$1, description, badge, message, reserveMessageSpace = false, tone = "neutral", disabled = false, required, inList = false, tabIndex, size = "standard", "aria-describedby": ariaDescribedBy, ...restProps }, forwardedRef) => {
 	const resolvedId = useFallbackId(id);
@@ -96,6 +95,5 @@ const InlineField = forwardRef(({ id, name, value, checked, data, onChange, labe
 		}) : null]
 	});
 });
-
 //#endregion
-export { InlineField };
+export { InlineField };

package/dist/lib/components/private/InlineField/StyledInput.cjs

@@ -1,15 +1,13 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_BackgroundContext = require('../../Box/BackgroundContext.cjs');
-const require_buildDataAttributes = require('../buildDataAttributes.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_IconMinus = require('../../icons/IconMinus/IconMinus.cjs');
-const require_IconTick = require('../../icons/IconTick/IconTick.cjs');
-const require_FieldOverlay = require('../FieldOverlay/FieldOverlay.cjs');
-const require_validateTabIndex = require('../validateTabIndex.cjs');
-const require_InlineField_css = require('./InlineField.css.cjs');
+const require_BackgroundContext = require("../../Box/BackgroundContext.cjs");
+const require_buildDataAttributes = require("../buildDataAttributes.cjs");
+const require_Box = require("../../Box/Box.cjs");
+const require_IconMinus = require("../../icons/IconMinus/IconMinus.cjs");
+const require_IconTick = require("../../icons/IconTick/IconTick.cjs");
+const require_FieldOverlay = require("../FieldOverlay/FieldOverlay.cjs");
+const require_validateTabIndex = require("../validateTabIndex.cjs");
+const require_InlineField_css = require("./InlineField.css.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/private/InlineField/StyledInput.tsx
 const tones = ["neutral", "critical"];
 const Indicator = ({ type, checked, hover = false, disabled = false }) => {
@@ -149,6 +147,5 @@ const StyledInput = (0, react.forwardRef)(({ id, name, value, checked, data, onC
 		]
 	})] });
 });
-
 //#endregion
-exports.StyledInput = StyledInput;
+exports.StyledInput = StyledInput;

package/dist/lib/components/private/InlineField/StyledInput.d.cts

@@ -1,7 +1,6 @@
 import { DataAttributeMap } from "../buildDataAttributes.cjs";
 import { Size } from "./InlineField.css.cjs";
 import { AllHTMLAttributes } from "react";
-
 //#region src/lib/components/private/InlineField/StyledInput.d.ts
 declare const tones: readonly ["neutral", "critical"];
 type InlineFieldTone = (typeof tones)[number];
@@ -23,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, StyledInputProps };
+export { CheckboxChecked, InlineFieldTone, StyledInputProps };

package/dist/lib/components/private/InlineField/StyledInput.d.mts

@@ -1,7 +1,6 @@
 import { DataAttributeMap } from "../buildDataAttributes.mjs";
 import { Size } from "./InlineField.css.mjs";
 import { AllHTMLAttributes } from "react";
-
 //#region src/lib/components/private/InlineField/StyledInput.d.ts
 declare const tones: readonly ["neutral", "critical"];
 type InlineFieldTone = (typeof tones)[number];
@@ -23,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, StyledInputProps };
+export { CheckboxChecked, InlineFieldTone, StyledInputProps };

package/dist/lib/components/private/InlineField/StyledInput.mjs

@@ -8,7 +8,6 @@ import { validateTabIndex } from "../validateTabIndex.mjs";
 import { checkboxIndicator, disabledRadioIndicator, fakeField, hideBorderOnDarkBackgroundInLightMode, hoverOverlay, isMixed, radioIndicator, realField, selected, sizeVars } from "./InlineField.css.mjs";
 import { forwardRef, useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/lib/components/private/InlineField/StyledInput.tsx
 const tones = ["neutral", "critical"];
 const Indicator = ({ type, checked, hover = false, disabled = false }) => {
@@ -148,6 +147,5 @@ const StyledInput = forwardRef(({ id, name, value, checked, data, onChange, type
 		]
 	})] });
 });
-
 //#endregion
-export { StyledInput };
+export { StyledInput };

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

@@ -1,9 +1,7 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_BackgroundContext = require('../../Box/BackgroundContext.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_Keyline_css = require('./Keyline.css.cjs');
+const require_BackgroundContext = require("../../Box/BackgroundContext.cjs");
+const require_Box = require("../../Box/Box.cjs");
+const require_Keyline_css = require("./Keyline.css.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/private/Keyline/Keyline.tsx
 const Keyline = ({ tone: tone$1, borderRadius }) => {
 	const backgroundLightness = require_BackgroundContext.useBackgroundLightness();
@@ -29,6 +27,5 @@ const Keyline = ({ tone: tone$1, borderRadius }) => {
 		})
 	});
 };
-
 //#endregion
-exports.Keyline = Keyline;
+exports.Keyline = Keyline;

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

@@ -1,9 +1,7 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_vars_css = require('../../../themes/vars.css.cjs');
-const require_colorModeStyle = require('../../../css/colorModeStyle.cjs');
+const require_vars_css = require("../../../themes/vars.css.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/Keyline/Keyline.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/Keyline/Keyline.css.ts", "braid-design-system");
 const keylineVars = (0, _vanilla_extract_css.createThemeContract)({
@@ -46,11 +44,10 @@ const noRadiusOnRight = (0, _vanilla_extract_css.style)({
 const largestWidth = (0, _vanilla_extract_css.style)({ width: require_vars_css.vars.borderRadius.xlarge }, "largestWidth");
 const width = (0, _vanilla_extract_css.style)({ width: require_vars_css.vars.grid }, "width");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.darkMode = darkMode;
 exports.largestWidth = largestWidth;
 exports.lightMode = lightMode;
 exports.noRadiusOnRight = noRadiusOnRight;
 exports.tone = tone;
-exports.width = width;
+exports.width = width;

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

@@ -2,7 +2,6 @@ import { vars } from "../../../themes/vars.css.mjs";
 import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { assignVars, createThemeContract, style, styleVariants } from "@vanilla-extract/css";
-
 //#region src/lib/components/private/Keyline/Keyline.css.ts
 setFileScope("src/lib/components/private/Keyline/Keyline.css.ts", "braid-design-system");
 const keylineVars = createThemeContract({
@@ -45,6 +44,5 @@ const noRadiusOnRight = style({
 const largestWidth = style({ width: vars.borderRadius.xlarge }, "largestWidth");
 const width = style({ width: vars.grid }, "width");
 endFileScope();
-
 //#endregion
-export { darkMode, largestWidth, lightMode, noRadiusOnRight, tone, width };
+export { darkMode, largestWidth, lightMode, noRadiusOnRight, tone, width };

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

@@ -2,7 +2,6 @@ import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { darkMode, largestWidth, lightMode, noRadiusOnRight, tone, width } from "./Keyline.css.mjs";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/lib/components/private/Keyline/Keyline.tsx
 const Keyline = ({ tone: tone$1, borderRadius }) => {
 	const backgroundLightness = useBackgroundLightness();
@@ -28,6 +27,5 @@ const Keyline = ({ tone: tone$1, borderRadius }) => {
 		})
 	});
 };
-
 //#endregion
-export { Keyline };
+export { Keyline };

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

@@ -1,9 +1,7 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_MaxLines_css = require('./MaxLines.css.cjs');
+const require_Box = require("../../Box/Box.cjs");
+const require_MaxLines_css = require("./MaxLines.css.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
-
 //#region src/lib/components/private/MaxLines/MaxLines.tsx
 const MaxLines = ({ children, lines }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 	component: "span",
@@ -11,6 +9,5 @@ const MaxLines = ({ children, lines }) => /* @__PURE__ */ (0, react_jsx_runtime.
 	style: lines > 1 ? (0, _vanilla_extract_dynamic.assignInlineVars)({ [require_MaxLines_css.lineLimit]: String(lines) }) : void 0,
 	children
 });
-
 //#endregion
-exports.MaxLines = MaxLines;
+exports.MaxLines = MaxLines;

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

@@ -1,8 +1,6 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_css = require('../../../../css.cjs');
+const require_css = require("../../../../css.cjs");
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
-
 //#region src/lib/components/private/MaxLines/MaxLines.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/MaxLines/MaxLines.css.ts", "braid-design-system");
 const descenderCropFixOffset = "0.1em";
@@ -19,17 +17,15 @@ const base = (0, _vanilla_extract_css.style)([require_css.atoms({
 	selectors: { [`${descenderCropFixForWebkitBox} &`]: { paddingBottom: descenderCropFixOffset } }
 }], "base");
 const lineLimit = (0, _vanilla_extract_css.createVar)("lineLimit");
-const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
-const multiLine = (0, _vanilla_extract_css.style)({ "@supports": { [lineClampSupportsQuery]: {
+const multiLine = (0, _vanilla_extract_css.style)({ "@supports": { ["(display: -webkit-box) and (-webkit-line-clamp: 1)"]: {
 	whiteSpace: "initial",
 	display: "-webkit-box",
 	WebkitLineClamp: lineLimit,
 	WebkitBoxOrient: "vertical"
 } } }, "multiLine");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.base = base;
 exports.descenderCropFixForWebkitBox = descenderCropFixForWebkitBox;
 exports.lineLimit = lineLimit;
-exports.multiLine = multiLine;
+exports.multiLine = multiLine;

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

@@ -1,12 +1,10 @@
 import { atoms } from "../../../../css.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, style } from "@vanilla-extract/css";
-
 //#region src/lib/components/private/MaxLines/MaxLines.css.ts
 setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts", "braid-design-system");
 const descenderCropFixOffset = "0.1em";
-const negateDescenderCropFixOffset = `-${descenderCropFixOffset}`;
-const descenderCropFixForWebkitBox = style({ marginBottom: negateDescenderCropFixOffset }, "descenderCropFixForWebkitBox");
+const descenderCropFixForWebkitBox = style({ marginBottom: `-${descenderCropFixOffset}` }, "descenderCropFixForWebkitBox");
 const base = style([atoms({
 	display: "block",
 	overflow: "hidden",
@@ -18,14 +16,12 @@ const base = style([atoms({
 	selectors: { [`${descenderCropFixForWebkitBox} &`]: { paddingBottom: descenderCropFixOffset } }
 }], "base");
 const lineLimit = createVar("lineLimit");
-const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
-const multiLine = style({ "@supports": { [lineClampSupportsQuery]: {
+const multiLine = style({ "@supports": { ["(display: -webkit-box) and (-webkit-line-clamp: 1)"]: {
 	whiteSpace: "initial",
 	display: "-webkit-box",
 	WebkitLineClamp: lineLimit,
 	WebkitBoxOrient: "vertical"
 } } }, "multiLine");
 endFileScope();
-
 //#endregion
-export { base, descenderCropFixForWebkitBox, lineLimit, multiLine };
+export { base, descenderCropFixForWebkitBox, lineLimit, multiLine };

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

@@ -2,7 +2,6 @@ import { Box } from "../../Box/Box.mjs";
 import { base, lineLimit, multiLine } from "./MaxLines.css.mjs";
 import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-
 //#region src/lib/components/private/MaxLines/MaxLines.tsx
 const MaxLines = ({ children, lines }) => /* @__PURE__ */ jsx(Box, {
 	component: "span",
@@ -10,6 +9,5 @@ const MaxLines = ({ children, lines }) => /* @__PURE__ */ jsx(Box, {
 	style: lines > 1 ? assignInlineVars({ [lineLimit]: String(lines) }) : void 0,
 	children
 });
-
 //#endregion
-export { MaxLines };
+export { MaxLines };

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

@@ -1,15 +1,14 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_BraidPortal = require('../../BraidPortal/BraidPortal.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_ModalExternalGutter = require('./ModalExternalGutter.cjs');
-const require_Modal_css = require('./Modal.css.cjs');
-const require_ModalContent = require('./ModalContent.cjs');
-const require_ariaHideOthers = require('./ariaHideOthers.cjs');
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_BraidPortal = require("../../BraidPortal/BraidPortal.cjs");
+const require_Box = require("../../Box/Box.cjs");
+const require_ModalExternalGutter = require("./ModalExternalGutter.cjs");
+const require_Modal_css = require("./Modal.css.cjs");
+const require_ModalContent = require("./ModalContent.cjs");
+const require_ariaHideOthers = require("./ariaHideOthers.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_focus_lock = require("react-focus-lock");
-react_focus_lock = require_runtime.__toESM(react_focus_lock);
-
+react_focus_lock = require_runtime.__toESM(react_focus_lock, 1);
 //#region src/lib/components/private/Modal/Modal.tsx
 const AllowCloseContext = (0, react.createContext)(true);
 const ModalPortal = ({ children }) => {
@@ -158,7 +157,6 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 		})]
 	}) }) : null;
 };
-
 //#endregion
 exports.AllowCloseContext = AllowCloseContext;
-exports.Modal = Modal;
+exports.Modal = Modal;

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

@@ -1,13 +1,11 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_vars_css = require('../../../themes/vars.css.cjs');
-const require_colorModeStyle = require('../../../css/colorModeStyle.cjs');
-const require_responsiveStyle = require('../../../css/responsiveStyle.cjs');
-const require_atoms = require('../../../css/atoms/atoms.cjs');
-const require_ModalExternalGutter = require('./ModalExternalGutter.cjs');
+const require_vars_css = require("../../../themes/vars.css.cjs");
+const require_colorModeStyle = require("../../../css/colorModeStyle.cjs");
+const require_responsiveStyle = require("../../../css/responsiveStyle.cjs");
+const require_atoms = require("../../../css/atoms/atoms.cjs");
+const require_ModalExternalGutter = require("./ModalExternalGutter.cjs");
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
-
 //#region src/lib/components/private/Modal/Modal.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
 const fixedStackingContext = require_atoms.atoms({
@@ -102,7 +100,7 @@ const closeIconOffset = (0, _vanilla_extract_css.style)({
 	right: "-2px"
 }, "closeIconOffset");
 const hideOverflowAboveMobile = (0, _vanilla_extract_css.style)(require_responsiveStyle.responsiveStyle({ tablet: { overflow: "hidden" } }), "hideOverflowAboveMobile");
-const maximumHeightForCoverImage = "60vh";
+const maximumHeightForCoverImage = "70vh";
 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" } }), {
@@ -112,7 +110,6 @@ const coverImage = (0, _vanilla_extract_css.style)([require_responsiveStyle.resp
 	backgroundImage: coverImageVar
 }], "coverImage");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.backdrop = backdrop;
 exports.closeIconOffset = closeIconOffset;
@@ -125,7 +122,9 @@ exports.fixedStackingContext = fixedStackingContext;
 exports.headingRoot = headingRoot;
 exports.hideOverflowAboveMobile = hideOverflowAboveMobile;
 exports.maxSize = maxSize;
+exports.maximumHeightForCoverImage = maximumHeightForCoverImage;
 exports.modalContainer = modalContainer;
+exports.overrideMaxHeightForScreenshot = overrideMaxHeightForScreenshot;
 exports.pointerEventsAll = pointerEventsAll;
 exports.resetStackingContext = resetStackingContext;
-exports.transition = transition;
+exports.transition = transition;

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

@@ -6,7 +6,6 @@ import { externalGutter } from "./ModalExternalGutter.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, fallbackVar, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-
 //#region src/lib/components/private/Modal/Modal.css.ts
 setFileScope("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
 const fixedStackingContext = atoms({
@@ -101,7 +100,7 @@ const closeIconOffset = style({
 	right: "-2px"
 }, "closeIconOffset");
 const hideOverflowAboveMobile = style(responsiveStyle({ tablet: { overflow: "hidden" } }), "hideOverflowAboveMobile");
-const maximumHeightForCoverImage = "60vh";
+const maximumHeightForCoverImage = "70vh";
 const coverImageHeightLimit = style(responsiveStyle({ tablet: { maxHeight: fallbackVar(overrideMaxHeightForScreenshot, maximumHeightForCoverImage) } }), "coverImageHeightLimit");
 const coverImageVar = createVar("coverImageVar");
 const coverImage = style([responsiveStyle({ mobile: { aspectRatio: "16 / 9" } }), {
@@ -111,6 +110,5 @@ const coverImage = style([responsiveStyle({ mobile: { aspectRatio: "16 / 9" } })
 	backgroundImage: coverImageVar
 }], "coverImage");
 endFileScope();
-
 //#endregion
-export { backdrop, closeIconOffset, coverImage, coverImageHeightLimit, coverImageVar, entrance, exit, fixedStackingContext, headingRoot, hideOverflowAboveMobile, maxSize, modalContainer, pointerEventsAll, resetStackingContext, transition };
+export { backdrop, closeIconOffset, coverImage, coverImageHeightLimit, coverImageVar, entrance, exit, fixedStackingContext, headingRoot, hideOverflowAboveMobile, maxSize, maximumHeightForCoverImage, modalContainer, overrideMaxHeightForScreenshot, pointerEventsAll, resetStackingContext, transition };

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

@@ -1,5 +1,4 @@
 import { ModalContentProps } from "./ModalContent.cjs";
-
 //#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/Modal.mjs

@@ -7,7 +7,6 @@ import { ariaHideOthers } from "./ariaHideOthers.mjs";
 import { createContext, useContext, useEffect, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import FocusLock from "react-focus-lock";
-
 //#region src/lib/components/private/Modal/Modal.tsx
 const AllowCloseContext = createContext(true);
 const ModalPortal = ({ children }) => {
@@ -156,6 +155,5 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 		})]
 	}) }) : null;
 };
-
 //#endregion
-export { AllowCloseContext, Modal };
+export { AllowCloseContext, Modal };

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

@@ -1,23 +1,22 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_buildDataAttributes = require('../buildDataAttributes.cjs');
-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');
+const require_useResponsiveValue = require("../../useResponsiveValue/useResponsiveValue.cjs");
+const require_buildDataAttributes = require("../buildDataAttributes.cjs");
+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
 const modalPadding = {
 	mobile: "gutter",
@@ -68,23 +67,34 @@ const ModalContentHeader = (0, react.forwardRef)(({ title, headingLevel, descrip
 		})]
 	}) : resolvedLayout;
 });
-const ModalContentScrollLayout = ({ children, applyCoverImageHeightLimit, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScrollContainer.ScrollContainer, {
+const ModalFooter = ({ applyPageBlockGutters, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	background: "surface",
+	width: "full",
+	flexShrink: 0,
+	paddingY: "medium",
+	paddingX: applyPageBlockGutters ? require_pageBlockGutters.pageBlockGutters : modalPadding,
+	children
+});
+const ModalContentScrollLayout = ({ children, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight, hasFooter }) => /* @__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, {
 			display: "flex",
 			gap: "large",
 			flexDirection: "column",
-			height: applyFullHeight ? "full" : void 0,
+			height: !coverImageEnabled && hasFooter ? "full" : void 0,
 			paddingY: modalPadding,
+			paddingBottom: hasFooter ? {
+				mobile: "small",
+				tablet: "none"
+			} : void 0,
 			paddingX: applyPageBlockGutters ? require_pageBlockGutters.pageBlockGutters : modalPadding,
 			children
 		})
 	})]
 });
-const ModalCoverImageLayout = ({ width, image, children }) => {
+const ModalCoverImageLayout = ({ width, image, children, footer, applyHeightLimit }) => {
 	const forceStack = width === "xsmall";
 	const coverImage$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		position: "relative",
@@ -98,17 +108,33 @@ const ModalCoverImageLayout = ({ width, image, children }) => {
 			style: (0, _vanilla_extract_dynamic.assignInlineVars)({ [require_Modal_css.coverImageVar]: `url(${image})` })
 		})
 	});
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+		/**
+		* Separation of maxHeight and padding to avoid ScrollContainer clipping
+		* padding at the end of the content.
+		*/
+		className: applyHeightLimit ? require_Modal_css.coverImageHeightLimit : void 0,
+		display: "flex",
+		flexDirection: "column",
+		height: "full",
+		style: { minHeight: 0 },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+			flexGrow: 1,
+			style: { minHeight: 0 },
+			children
+		}), footer]
+	});
 	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 })]
+		children: [coverImage$1, content]
 	}) : /* @__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 })]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.Column, { children: coverImage$1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.Column, { children: content })]
 	});
 };
-const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, ...restProps }) => {
+const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, footer, ...restProps }) => {
 	const resolvedId = require_useFallbackId.useFallbackId(id);
 	const descriptionId = (0, react.useId)();
 	const defaultModalRef = (0, react.useRef)(null);
@@ -122,6 +148,10 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			onClose();
 		}
 	};
+	const isMobile = require_useResponsiveValue.useResponsiveValue()({
+		mobile: true,
+		tablet: false
+	});
 	const isDrawer = position === "left" || position === "right";
 	const coverImageEnabled = Boolean(coverImage) && !isDrawer;
 	const allowColumnLayout = coverImageEnabled && width !== "xsmall";
@@ -132,11 +162,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
 	const modalLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalContentScrollLayout, {
-		applyCoverImageHeightLimit: allowColumnLayout,
 		applyPageBlockGutters: isDrawer,
-		applyFullHeight: isDrawer,
+		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
 		contentStartRef,
 		coverImageEnabled,
+		hasFooter: Boolean(footer),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
 			title,
 			headingLevel,
@@ -147,6 +177,10 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			reserveCloseArea: true
 		}), children]
 	});
+	const modalFooter = footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalFooter, {
+		applyPageBlockGutters: isDrawer,
+		children: footer
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		role: "dialog",
 		"aria-label": title,
@@ -177,9 +211,8 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				noRelative: true,
 				forwardProps: true,
 				enabled: scrollLock,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 					display: "flex",
-					gap: "large",
 					flexDirection: "column",
 					background: "surface",
 					borderRadius: modalRadius,
@@ -196,15 +229,17 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 						data,
 						validateRestProps: restProps
 					}),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollContainer.ScrollContainer, {
+					children: [coverImageEnabled && coverImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollContainer.ScrollContainer, {
 						direction: "vertical",
 						startRef: contentStartRef,
-						children: coverImageEnabled && coverImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCoverImageLayout, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCoverImageLayout, {
 							width,
 							image: coverImage,
+							footer: !isMobile ? modalFooter : null,
+							applyHeightLimit: allowColumnLayout,
 							children: modalLayout
-						}) : modalLayout
-					})
+						})
+					}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 				position: "absolute",
@@ -238,6 +273,5 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		})
 	});
 };
-
 //#endregion
-exports.ModalContent = ModalContent;
+exports.ModalContent = ModalContent;

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

@@ -2,7 +2,6 @@ import { ReactNodeNoStrings } from "../ReactNodeNoStrings.cjs";
 import { DataAttributeMap } from "../buildDataAttributes.cjs";
 import { BoxProps } from "../../Box/Box.cjs";
 import { ReactNode, Ref } from "react";
-
 //#region src/lib/components/private/Modal/ModalContent.d.ts
 type ModalContentCommonProps = {
   id?: string;
@@ -18,6 +17,7 @@ type ModalContentCommonProps = {
   headingRef?: Ref<HTMLElement>;
   modalRef?: Ref<HTMLElement>;
   data?: DataAttributeMap;
+  footer?: ReactNode;
 };
 type ModalContentProps = ModalContentCommonProps & ({
   coverImage?: never;