braid-design-system 34.4.0 → 34.6.0

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

@@ -1,3 +1,4 @@
+import { useResponsiveValue } from "../../useResponsiveValue/useResponsiveValue.mjs";
 import buildDataAttributes_default from "../buildDataAttributes.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
@@ -13,10 +14,9 @@ import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
 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 { 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
 const modalPadding = {
 	mobile: "gutter",
@@ -67,23 +67,34 @@ const ModalContentHeader = forwardRef(({ title, headingLevel, description, descr
 		})]
 	}) : resolvedLayout;
 });
-const ModalContentScrollLayout = ({ children, applyCoverImageHeightLimit, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight }) => /* @__PURE__ */ jsxs(ScrollContainer, {
+const ModalFooter = ({ applyPageBlockGutters, children }) => /* @__PURE__ */ jsx(Box, {
+	background: "surface",
+	width: "full",
+	flexShrink: 0,
+	paddingY: "medium",
+	paddingX: applyPageBlockGutters ? pageBlockGutters : modalPadding,
+	children
+});
+const ModalContentScrollLayout = ({ children, contentStartRef, coverImageEnabled, applyPageBlockGutters, applyFullHeight, hasFooter }) => /* @__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, {
 			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 ? pageBlockGutters : modalPadding,
 			children
 		})
 	})]
 });
-const ModalCoverImageLayout = ({ width, image, children }) => {
+const ModalCoverImageLayout = ({ width, image, children, footer, applyHeightLimit }) => {
 	const forceStack = width === "xsmall";
 	const coverImage$1 = /* @__PURE__ */ jsx(Box, {
 		position: "relative",
@@ -97,17 +108,33 @@ const ModalCoverImageLayout = ({ width, image, children }) => {
 			style: assignInlineVars({ [coverImageVar]: `url(${image})` })
 		})
 	});
+	const content = /* @__PURE__ */ jsxs(Box, {
+		/**
+		* Separation of maxHeight and padding to avoid ScrollContainer clipping
+		* padding at the end of the content.
+		*/
+		className: applyHeightLimit ? coverImageHeightLimit : void 0,
+		display: "flex",
+		flexDirection: "column",
+		height: "full",
+		style: { minHeight: 0 },
+		children: [/* @__PURE__ */ jsx(Box, {
+			flexGrow: 1,
+			style: { minHeight: 0 },
+			children
+		}), footer]
+	});
 	return forceStack ? /* @__PURE__ */ jsxs(Stack, {
 		space: "none",
-		children: [coverImage$1, /* @__PURE__ */ jsx(Fragment$1, { children })]
+		children: [coverImage$1, content]
 	}) : /* @__PURE__ */ jsxs(Columns, {
 		space: "none",
 		collapseBelow: "tablet",
 		reverse: true,
-		children: [/* @__PURE__ */ jsx(Column, { children: coverImage$1 }), /* @__PURE__ */ jsx(Column, { children })]
+		children: [/* @__PURE__ */ jsx(Column, { children: coverImage$1 }), /* @__PURE__ */ jsx(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 = useFallbackId(id);
 	const descriptionId = useId();
 	const defaultModalRef = useRef(null);
@@ -121,6 +148,10 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			onClose();
 		}
 	};
+	const isMobile = useResponsiveValue()({
+		mobile: true,
+		tablet: false
+	});
 	const isDrawer = position === "left" || position === "right";
 	const coverImageEnabled = Boolean(coverImage) && !isDrawer;
 	const allowColumnLayout = coverImageEnabled && width !== "xsmall";
@@ -131,11 +162,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
 	const modalLayout = /* @__PURE__ */ jsxs(ModalContentScrollLayout, {
-		applyCoverImageHeightLimit: allowColumnLayout,
 		applyPageBlockGutters: isDrawer,
-		applyFullHeight: isDrawer,
+		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
 		contentStartRef,
 		coverImageEnabled,
+		hasFooter: Boolean(footer),
 		children: [/* @__PURE__ */ jsx(ModalContentHeader, {
 			title,
 			headingLevel,
@@ -146,6 +177,10 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			reserveCloseArea: true
 		}), children]
 	});
+	const modalFooter = footer ? /* @__PURE__ */ jsx(ModalFooter, {
+		applyPageBlockGutters: isDrawer,
+		children: footer
+	}) : null;
 	return /* @__PURE__ */ jsx(Box, {
 		role: "dialog",
 		"aria-label": title,
@@ -176,9 +211,8 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				noRelative: true,
 				forwardProps: true,
 				enabled: scrollLock,
-				children: /* @__PURE__ */ jsx(Box, {
+				children: /* @__PURE__ */ jsxs(Box, {
 					display: "flex",
-					gap: "large",
 					flexDirection: "column",
 					background: "surface",
 					borderRadius: modalRadius,
@@ -195,15 +229,17 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 						data,
 						validateRestProps: restProps
 					}),
-					children: /* @__PURE__ */ jsx(ScrollContainer, {
+					children: [coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ScrollContainer, {
 						direction: "vertical",
 						startRef: contentStartRef,
-						children: coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ModalCoverImageLayout, {
+						children: /* @__PURE__ */ jsx(ModalCoverImageLayout, {
 							width,
 							image: coverImage,
+							footer: !isMobile ? modalFooter : null,
+							applyHeightLimit: allowColumnLayout,
 							children: modalLayout
-						}) : modalLayout
-					})
+						})
+					}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
 				})
 			}), /* @__PURE__ */ jsx(Box, {
 				position: "absolute",
@@ -237,6 +273,5 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		})
 	});
 };
-
 //#endregion
-export { ModalContent };
+export { ModalContent };

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

@@ -1,10 +1,8 @@
-
 //#region src/lib/components/private/Modal/ModalExternalGutter.ts
 const externalGutter = {
 	mobile: "xsmall",
 	tablet: "gutter",
 	desktop: "xlarge"
 };
-
 //#endregion
-exports.externalGutter = externalGutter;
+exports.externalGutter = externalGutter;

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

@@ -4,6 +4,5 @@ const externalGutter = {
 	tablet: "gutter",
 	desktop: "xlarge"
 };
-
 //#endregion
-export { externalGutter };
+export { externalGutter };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/components/private/Modal/ariaHideOthers.ts
 const defaultParent = typeof document !== "undefined" ? document.body : null;
 let counterMap = /* @__PURE__ */ new WeakMap();
@@ -52,6 +51,5 @@ const ariaHideOthers = (originalTarget, { parentNode = defaultParent, markerName
 		}
 	};
 };
-
 //#endregion
-exports.ariaHideOthers = ariaHideOthers;
+exports.ariaHideOthers = ariaHideOthers;

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

@@ -51,6 +51,5 @@ const ariaHideOthers = (originalTarget, { parentNode = defaultParent, markerName
 		}
 	};
 };
-
 //#endregion
-export { ariaHideOthers };
+export { ariaHideOthers };

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

@@ -1,7 +1,5 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_Box = require('../../Box/Box.cjs');
+const require_Box = require("../../Box/Box.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/private/Overlay/Overlay.tsx
 const Overlay = ({ component, zIndex, background, borderRadius, boxShadow, transition, visible = false, className, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 	component,
@@ -17,6 +15,5 @@ const Overlay = ({ component, zIndex, background, borderRadius, boxShadow, trans
 	className,
 	children
 });
-
 //#endregion
-exports.Overlay = Overlay;
+exports.Overlay = Overlay;

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

@@ -1,6 +1,5 @@
 import { Box } from "../../Box/Box.mjs";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/lib/components/private/Overlay/Overlay.tsx
 const Overlay = ({ component, zIndex, background, borderRadius, boxShadow, transition, visible = false, className, children }) => /* @__PURE__ */ jsx(Box, {
 	component,
@@ -16,6 +15,5 @@ const Overlay = ({ component, zIndex, background, borderRadius, boxShadow, trans
 	className,
 	children
 });
-
 //#endregion
-export { Overlay };
+export { Overlay };

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

@@ -1,17 +1,15 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_sprinkles_css = require('../../../css/atoms/sprinkles.css.cjs');
-const require_BraidPortal = require('../../BraidPortal/BraidPortal.cjs');
-const require_useSpace = require('../../useSpace/useSpace.cjs');
-const require_useResponsiveValue = require('../../useResponsiveValue/useResponsiveValue.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_animationTimeout = require('../animationTimeout.cjs');
-const require_Popover_css = require('./Popover.css.cjs');
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_sprinkles_css = require("../../../css/atoms/sprinkles.css.cjs");
+const require_BraidPortal = require("../../BraidPortal/BraidPortal.cjs");
+const require_useSpace = require("../../useSpace/useSpace.cjs");
+const require_useResponsiveValue = require("../../useResponsiveValue/useResponsiveValue.cjs");
+const require_Box = require("../../Box/Box.cjs");
+const require_Popover_css = require("./Popover.css.cjs");
 let dedent = require("dedent");
-dedent = require_runtime.__toESM(dedent);
+dedent = require_runtime.__toESM(dedent, 1);
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react_dom = require("@floating-ui/react-dom");
-
 //#region src/lib/components/private/Popover/Popover.tsx
 const positionMap = {
 	top: {
@@ -103,7 +101,7 @@ const PopoverContent = (0, react.forwardRef)(({ id, role, align = "start", width
                 Ensure it is being assigned to a child element of Popover, and is available on open.
                 `);
 			}
-		}, require_animationTimeout.animationTimeout);
+		}, 15);
 	}, [open, enterFocusRef]);
 	const resolvedPlacement = floatingUiEvaluatedPosition?.split("-")[0] ?? "bottom";
 	(0, react.useEffect)(() => {
@@ -169,6 +167,5 @@ const Popover = (0, react.forwardRef)((props, forwardedRef) => {
 		children
 	});
 });
-
 //#endregion
-exports.Popover = Popover;
+exports.Popover = Popover;

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

@@ -1,10 +1,7 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_vars_css = require('../../../themes/vars.css.cjs');
-const require_animationTimeout = require('../animationTimeout.cjs');
+const require_vars_css = require("../../../themes/vars.css.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/Popover/Popover.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/Popover/Popover.css.ts", "braid-design-system");
 const backdrop = (0, _vanilla_extract_css.style)({
@@ -23,13 +20,13 @@ const animation = (0, _vanilla_extract_css.style)({
 	animationFillMode: "both",
 	animationTimingFunction: "ease",
 	animationDuration: "0.125s",
-	animationDelay: `${require_animationTimeout.animationTimeout}ms`
+	animationDelay: `15ms`
 }, "animation");
 const delayVisibility = (0, _vanilla_extract_css.style)({ animationDelay: "250ms" }, "delayVisibility");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.animation = animation;
 exports.backdrop = backdrop;
 exports.delayVisibility = delayVisibility;
-exports.invertPlacement = invertPlacement;
+exports.invertPlacement = invertPlacement;
+exports.transitionThreshold = transitionThreshold;

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

@@ -1,9 +1,7 @@
 import { vars } from "../../../themes/vars.css.mjs";
-import { animationTimeout } from "../animationTimeout.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, fallbackVar, keyframes, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-
 //#region src/lib/components/private/Popover/Popover.css.ts
 setFileScope("src/lib/components/private/Popover/Popover.css.ts", "braid-design-system");
 const backdrop = style({
@@ -13,19 +11,17 @@ const backdrop = style({
 const placementModifier = createVar("placementModifier");
 const invertPlacement = style({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
 const transitionThreshold = "xxsmall";
-const popupAnimation = keyframes({ from: {
-	opacity: 0,
-	transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
-} }, "popupAnimation");
 const animation = style({
-	animationName: popupAnimation,
+	animationName: keyframes({ from: {
+		opacity: 0,
+		transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
+	} }, "popupAnimation"),
 	animationFillMode: "both",
 	animationTimingFunction: "ease",
 	animationDuration: "0.125s",
-	animationDelay: `${animationTimeout}ms`
+	animationDelay: `15ms`
 }, "animation");
 const delayVisibility = style({ animationDelay: "250ms" }, "delayVisibility");
 endFileScope();
-
 //#endregion
-export { animation, backdrop, delayVisibility, invertPlacement };
+export { animation, backdrop, delayVisibility, invertPlacement, transitionThreshold };

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

@@ -1,6 +1,5 @@
 import { ResponsiveSpace } from "../../../css/atoms/atoms.cjs";
 import { AllHTMLAttributes, ReactNode, RefObject } from "react";
-
 //#region src/lib/components/private/Popover/Popover.d.ts
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 interface PopoverPlacementData {
@@ -29,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverProps };
+export { PopoverPlacementData, PopoverProps };

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

@@ -1,6 +1,5 @@
 import { ResponsiveSpace } from "../../../css/atoms/atoms.mjs";
 import { AllHTMLAttributes, ReactNode, RefObject } from "react";
-
 //#region src/lib/components/private/Popover/Popover.d.ts
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 interface PopoverPlacementData {
@@ -29,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverProps };
+export { PopoverPlacementData, PopoverProps };

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

@@ -3,13 +3,11 @@ import { BraidPortal } from "../../BraidPortal/BraidPortal.mjs";
 import { useSpace } from "../../useSpace/useSpace.mjs";
 import { useResponsiveValue } from "../../useResponsiveValue/useResponsiveValue.mjs";
 import { Box } from "../../Box/Box.mjs";
-import { animationTimeout } from "../animationTimeout.mjs";
 import { animation, backdrop, delayVisibility, invertPlacement } from "./Popover.css.mjs";
 import dedent from "dedent";
-import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef } from "react";
+import { createContext, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react-dom";
-
 //#region src/lib/components/private/Popover/Popover.tsx
 const positionMap = {
 	top: {
@@ -101,7 +99,7 @@ const PopoverContent = forwardRef(({ id, role, align = "start", width = "content
                 Ensure it is being assigned to a child element of Popover, and is available on open.
                 `);
 			}
-		}, animationTimeout);
+		}, 15);
 	}, [open, enterFocusRef]);
 	const resolvedPlacement = floatingUiEvaluatedPosition?.split("-")[0] ?? "bottom";
 	useEffect(() => {
@@ -167,6 +165,5 @@ const Popover = forwardRef((props, forwardedRef) => {
 		children
 	});
 });
-
 //#endregion
-export { Popover };
+export { Popover };

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

@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-
 //#region src/lib/components/private/ReactNodeNoStrings.d.ts
 type ReactNodeArray = ReactNodeNoStrings[];
 type ReactNodeNoStrings = ReactElement | ReactNodeArray | boolean | null | undefined;

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

@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-
 //#region src/lib/components/private/ReactNodeNoStrings.d.ts
 type ReactNodeArray = ReactNodeNoStrings[];
 type ReactNodeNoStrings = ReactElement | ReactNodeArray | boolean | null | undefined;

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

@@ -1,13 +1,11 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-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');
+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, gateStart }) => setTimeout(() => {
@@ -43,7 +41,8 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		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);
+			const clippedByStartEdge = direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top;
+			gateStartRef.current = !clippedByStartEdge;
 			updateMask();
 		}, {
 			root: containerRef.current,
@@ -71,6 +70,5 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		children
 	});
 };
-
 //#endregion
-exports.ScrollContainer = ScrollContainer;
+exports.ScrollContainer = ScrollContainer;

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

@@ -1,7 +1,5 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
-
 //#region src/lib/components/private/ScrollContainer/ScrollContainer.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
 const container = (0, _vanilla_extract_css.style)({
@@ -58,7 +56,6 @@ const maskRight = (0, _vanilla_extract_css.style)({ vars: { [right]: scrollOverl
 const maskTop = (0, _vanilla_extract_css.style)({ vars: { [top]: scrollOverlaySize } }, "maskTop");
 const maskBottom = (0, _vanilla_extract_css.style)({ vars: { [bottom]: scrollOverlaySize } }, "maskBottom");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.container = container;
 exports.direction = direction;
@@ -68,4 +65,4 @@ exports.mask = mask;
 exports.maskBottom = maskBottom;
 exports.maskLeft = maskLeft;
 exports.maskRight = maskRight;
-exports.maskTop = maskTop;
+exports.maskTop = maskTop;

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

@@ -1,6 +1,5 @@
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 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");
 const container = style({
@@ -57,6 +56,5 @@ const maskRight = style({ vars: { [right]: scrollOverlaySize } }, "maskRight");
 const maskTop = style({ vars: { [top]: scrollOverlaySize } }, "maskTop");
 const maskBottom = style({ vars: { [bottom]: scrollOverlaySize } }, "maskBottom");
 endFileScope();
-
 //#endregion
-export { container, direction, fadeSize, hideScrollbar, mask, maskBottom, maskLeft, maskRight, maskTop };
+export { container, direction, fadeSize, hideScrollbar, mask, maskBottom, maskLeft, maskRight, maskTop };

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

@@ -6,7 +6,6 @@ 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, gateStart }) => setTimeout(() => {
@@ -42,7 +41,8 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		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);
+			const clippedByStartEdge = direction$1 === "horizontal" || direction$1 === "all" ? entry.boundingClientRect.left < entry.rootBounds.left : entry.boundingClientRect.top < entry.rootBounds.top;
+			gateStartRef.current = !clippedByStartEdge;
 			updateMask();
 		}, {
 			root: containerRef.current,
@@ -70,6 +70,5 @@ const ScrollContainer = ({ children, direction: direction$1 = "horizontal", fade
 		children
 	});
 };
-
 //#endregion
-export { ScrollContainer };
+export { ScrollContainer };

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

@@ -1,12 +1,10 @@
-const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-const require_buildDataAttributes = require('../buildDataAttributes.cjs');
-const require_Box = require('../../Box/Box.cjs');
-const require_align = require('../../../utils/align.cjs');
-const require_MaxLines_css = require('../MaxLines/MaxLines.css.cjs');
-const require_MaxLines = require('../MaxLines/MaxLines.cjs');
-const require_iconSlotSpace = require('../iconSlotSpace.cjs');
+const require_buildDataAttributes = require("../buildDataAttributes.cjs");
+const require_Box = require("../../Box/Box.cjs");
+const require_align = require("../../../utils/align.cjs");
+const require_MaxLines_css = require("../MaxLines/MaxLines.css.cjs");
+const require_MaxLines = require("../MaxLines/MaxLines.cjs");
+const require_iconSlotSpace = require("../iconSlotSpace.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/private/Typography/Typography.tsx
 const Typography = ({ id, component = "span", className, align, maxLines, icon, data, children, ...restProps }) => {
 	const isTruncated = typeof maxLines === "number";
@@ -47,6 +45,5 @@ const Typography = ({ id, component = "span", className, align, maxLines, icon,
 		}) : contents
 	});
 };
-
 //#endregion
-exports.Typography = Typography;
+exports.Typography = Typography;

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

@@ -2,7 +2,6 @@ import { DataAttributeMap } from "../buildDataAttributes.cjs";
 import { BoxProps } from "../../Box/Box.cjs";
 import { UseIconProps } from "../../../hooks/useIcon/index.cjs";
 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/Typography/Typography.d.mts

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

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

@@ -5,7 +5,6 @@ import { descenderCropFixForWebkitBox } from "../MaxLines/MaxLines.css.mjs";
 import { MaxLines } from "../MaxLines/MaxLines.mjs";
 import { iconSlotSpace } from "../iconSlotSpace.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/lib/components/private/Typography/Typography.tsx
 const Typography = ({ id, component = "span", className, align, maxLines, icon, data, children, ...restProps }) => {
 	const isTruncated = typeof maxLines === "number";
@@ -46,6 +45,5 @@ const Typography = ({ id, component = "span", className, align, maxLines, icon,
 		}) : contents
 	});
 };
-
 //#endregion
-export { Typography };
+export { Typography };

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

@@ -1,6 +1,4 @@
-
 //#region src/lib/components/private/badgeSlotSpace.ts
 const badgeSlotSpace = "xsmall";
-
 //#endregion
-exports.badgeSlotSpace = badgeSlotSpace;
+exports.badgeSlotSpace = badgeSlotSpace;

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

@@ -1,5 +1,4 @@
 //#region src/lib/components/private/badgeSlotSpace.ts
 const badgeSlotSpace = "xsmall";
-
 //#endregion
-export { badgeSlotSpace };
+export { badgeSlotSpace };

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

@@ -1,7 +1,6 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 let dedent = require("dedent");
-dedent = require_runtime.__toESM(dedent);
-
+dedent = require_runtime.__toESM(dedent, 1);
 //#region src/lib/components/private/buildDataAttributes.ts
 var buildDataAttributes_default = ({ data, validateRestProps }) => {
 	if (process.env.NODE_ENV !== "production") {
@@ -34,6 +33,5 @@ var buildDataAttributes_default = ({ data, validateRestProps }) => {
 	for (const key of keys) dataAttributes[`data-${key}`] = data[key];
 	return dataAttributes;
 };
-
 //#endregion
-exports.default = buildDataAttributes_default;
+exports.default = buildDataAttributes_default;

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

@@ -1,5 +1,4 @@
 import dedent from "dedent";
-
 //#region src/lib/components/private/buildDataAttributes.ts
 var buildDataAttributes_default = ({ data, validateRestProps }) => {
 	if (process.env.NODE_ENV !== "production") {
@@ -32,6 +31,5 @@ var buildDataAttributes_default = ({ data, validateRestProps }) => {
 	for (const key of keys) dataAttributes[`data-${key}`] = data[key];
 	return dataAttributes;
 };
-
 //#endregion
-export { buildDataAttributes_default as default };
+export { buildDataAttributes_default as default };