braid-design-system 33.10.1 → 33.11.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # braid-design-system
 
+## 33.11.0
+
+### Minor Changes
+
+- **useToast**: Improve layout of toasts when multiple toasts are shown ([#1782](https://github.com/seek-oss/braid-design-system/pull/1782))
+
+  When multiple toasts are shown simultaneously, they now visually stack in a collapsed format that expands on interaction.
+  This prevents toasts from obscuring page content while providing users with an easy way to manage and navigate through the recent toast history.
+
+### Patch Changes
+
+- **RadioGroup:** Ensure provided `id` is assigned to `fieldset` ([#1845](https://github.com/seek-oss/braid-design-system/pull/1845))
+
+  Fixes a bug where the provided `id` was not being passed through to the `fieldset` element.
+
+- **seekJobs, seekBusiness:** Update drop shadow palette ([#1847](https://github.com/seek-oss/braid-design-system/pull/1847))
+
+  Refine the drop shadow palette values of `small`, `medium`, and `large`.
+  The shadow values are now softer and more linear in their scale.
+
+- **TooltipRenderer:** Optimise performance by reducing unnecessary recalculations of the trigger position ([#1833](https://github.com/seek-oss/braid-design-system/pull/1833))
+
+- **seekJobs, seekBusiness:** Increase medium font weight ([#1843](https://github.com/seek-oss/braid-design-system/pull/1843))
+
+  The introduction of Traditional Chinese support means characters in this unicode range are rendered using the default `sans-serif` font.
+  The system fonts that handle these characters only cater for **regular** and **bold** weights, resulting in the `medium` weight of 500 falling back to 400 — resulting in loss of visual hierarchy.
+
+  By increasing the weight of `medium` to 600, it will now round up to 700 (`strong`) when the rendered font cannot satisfy `medium`.
+
+  This only affects `seekJobs` and `seekBusiness` themes rendering Traditional Chinese characters, all weights across other character sets remain unchanged.
+
+## 33.10.2
+
+### Patch Changes
+
+- Expand the peer dependency range to support React 19. ([#1822](https://github.com/seek-oss/braid-design-system/pull/1822))
+
 ## 33.10.1
 
 ### Patch Changes

package/README.md

@@ -60,7 +60,7 @@ If you're rendering within the context of another application, you may want to o
 If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links:
 
 ```tsx
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as ReactRouterLink } from 'react-router';
 import { BraidProvider, makeLinkComponent } from 'braid-design-system';
 import wireframe from 'braid-design-system/themes/wireframe';
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
+import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
 import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
@@ -324,7 +324,7 @@ declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
 }
-declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare const useThemeName: () => string;
 
@@ -2746,7 +2746,7 @@ type Sprinkles = Parameters<typeof sprinkles>[0];
 type Space = keyof typeof vars$1.space | 'none';
 type ResponsiveSpace = RequiredResponsiveValue<Space>;
 interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
+    reset?: keyof react__default.JSX.IntrinsicElements;
 }
 
 type BoxBackgroundVariant = Background | 'customDark' | 'customLight';
@@ -3371,7 +3371,7 @@ interface IconRendererProps {
         className: string;
     }) => ReactElement | null;
 }
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
 
 type LinkProps = Omit<LinkComponentProps, 'className'> & {
     className?: ClassValue;
@@ -3433,8 +3433,8 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
-    triggerRef: RefObject<HTMLElement>;
-    enterFocusRef?: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
+    enterFocusRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 
@@ -3666,7 +3666,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
 declare const RadioGroup$1: {
-    ({ id, children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
+    ({ children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
+import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
 import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
@@ -324,7 +324,7 @@ declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
 }
-declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare const useThemeName: () => string;
 
@@ -2746,7 +2746,7 @@ type Sprinkles = Parameters<typeof sprinkles>[0];
 type Space = keyof typeof vars$1.space | 'none';
 type ResponsiveSpace = RequiredResponsiveValue<Space>;
 interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
+    reset?: keyof react__default.JSX.IntrinsicElements;
 }
 
 type BoxBackgroundVariant = Background | 'customDark' | 'customLight';
@@ -3371,7 +3371,7 @@ interface IconRendererProps {
         className: string;
     }) => ReactElement | null;
 }
-declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+declare const IconRenderer: ({ children }: IconRendererProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
 
 type LinkProps = Omit<LinkComponentProps, 'className'> & {
     className?: ClassValue;
@@ -3433,8 +3433,8 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
-    triggerRef: RefObject<HTMLElement>;
-    enterFocusRef?: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
+    enterFocusRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 
@@ -3666,7 +3666,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
 declare const RadioGroup$1: {
-    ({ id, children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
+    ({ children, value, name, onChange, disabled, tone, size, ...props }: RadioGroupProps): react.JSX.Element;
     displayName: string;
 };
 

package/dist/lib/components/PageBlock/PageBlock.cjs

@@ -3,6 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_ContentBlock_ContentBlock_cjs = require("../ContentBlock/ContentBlock.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_PageBlock_pageBlockGutters_cjs = require("./pageBlockGutters.cjs");
 const validPageBlockComponents = [
   "div",
   "article",
@@ -11,7 +12,6 @@ const validPageBlockComponents = [
   "section",
   "nav"
 ];
-const gutters = { mobile: "small", tablet: "gutter" };
 const PageBlock = ({
   children,
   width = "large",
@@ -25,11 +25,10 @@ const PageBlock = ({
     {
       width: "full",
       component,
-      paddingX: gutters,
+      paddingX: lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters,
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
       children: width === "full" ? children : /* @__PURE__ */ jsxRuntime.jsx(lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width, children })
     }
   );
 };
 exports.PageBlock = PageBlock;
-exports.gutters = gutters;

package/dist/lib/components/PageBlock/PageBlock.mjs

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { ContentBlock } from "../ContentBlock/ContentBlock.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { pageBlockGutters } from "./pageBlockGutters.mjs";
 const validPageBlockComponents = [
   "div",
   "article",
@@ -10,7 +11,6 @@ const validPageBlockComponents = [
   "section",
   "nav"
 ];
-const gutters = { mobile: "small", tablet: "gutter" };
 const PageBlock = ({
   children,
   width = "large",
@@ -24,13 +24,12 @@ const PageBlock = ({
     {
       width: "full",
       component,
-      paddingX: gutters,
+      paddingX: pageBlockGutters,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: width === "full" ? children : /* @__PURE__ */ jsx(ContentBlock, { width, children })
     }
   );
 };
 export {
-  PageBlock,
-  gutters
+  PageBlock
 };

package/dist/lib/components/PageBlock/pageBlockGutters.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const pageBlockGutters = { mobile: "small", tablet: "gutter" };
+exports.pageBlockGutters = pageBlockGutters;

package/dist/lib/components/PageBlock/pageBlockGutters.mjs

@@ -0,0 +1,4 @@
+const pageBlockGutters = { mobile: "small", tablet: "gutter" };
+export {
+  pageBlockGutters
+};

package/dist/lib/components/RadioGroup/RadioGroup.cjs

@@ -14,7 +14,6 @@ const stackSpaceForSize = {
   standard: "small"
 };
 const RadioGroup = ({
-  id,
   children,
   value,
   name,

package/dist/lib/components/RadioGroup/RadioGroup.mjs

@@ -11,7 +11,6 @@ const stackSpaceForSize = {
   standard: "small"
 };
 const RadioGroup = ({
-  id,
   children,
   value,
   name,

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -80,6 +80,7 @@ const TooltipRenderer = ({
   const isStatic = react.useContext(StaticTooltipContext);
   const isMobileDevice = react.useRef(isMobile__default.default()).current;
   const onScreen = react.useRef(null);
+  const showTooltip = isStatic ? true : open;
   react.useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -135,18 +136,30 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+  const handleTooltipPosition = () => {
     const setPositions = () => {
-      var _a, _b;
-      setTooltipPosition((_a = tooltipRef.current) == null ? void 0 : _a.getBoundingClientRect());
-      setTriggerPosition((_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect());
+      if (tooltipRef.current) {
+        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
+      }
+      if (triggerRef.current) {
+        setTriggerPosition(triggerRef.current.getBoundingClientRect());
+      }
     };
-    const timeoutId = setTimeout(() => {
+    setTimeout(() => {
       const frameId = requestAnimationFrame(setPositions);
       return () => cancelAnimationFrame(frameId);
     }, lib_components_private_animationTimeout_cjs.animationTimeout / 2);
-    return () => clearTimeout(timeoutId);
-  });
+  };
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    handleTooltipPosition();
+    window.addEventListener("resize", handleTooltipPosition);
+    return () => {
+      window.removeEventListener("resize", handleTooltipPosition);
+    };
+  }, [showTooltip]);
   let inferredPlacement = placement;
   let arrowLeftOffset = 0;
   if (tooltipPosition && triggerPosition) {
@@ -177,7 +190,7 @@ const TooltipRenderer = ({
         lockPlacement: isStatic,
         delayVisibility: !isMobileDevice,
         modal: false,
-        open: isStatic ? true : open,
+        open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
         triggerRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -77,6 +77,7 @@ const TooltipRenderer = ({
   const isStatic = useContext(StaticTooltipContext);
   const isMobileDevice = useRef(isMobile()).current;
   const onScreen = useRef(null);
+  const showTooltip = isStatic ? true : open;
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -132,18 +133,30 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  useIsomorphicLayoutEffect(() => {
+  const handleTooltipPosition = () => {
     const setPositions = () => {
-      var _a, _b;
-      setTooltipPosition((_a = tooltipRef.current) == null ? void 0 : _a.getBoundingClientRect());
-      setTriggerPosition((_b = triggerRef.current) == null ? void 0 : _b.getBoundingClientRect());
+      if (tooltipRef.current) {
+        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
+      }
+      if (triggerRef.current) {
+        setTriggerPosition(triggerRef.current.getBoundingClientRect());
+      }
     };
-    const timeoutId = setTimeout(() => {
+    setTimeout(() => {
       const frameId = requestAnimationFrame(setPositions);
       return () => cancelAnimationFrame(frameId);
     }, animationTimeout / 2);
-    return () => clearTimeout(timeoutId);
-  });
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    handleTooltipPosition();
+    window.addEventListener("resize", handleTooltipPosition);
+    return () => {
+      window.removeEventListener("resize", handleTooltipPosition);
+    };
+  }, [showTooltip]);
   let inferredPlacement = placement;
   let arrowLeftOffset = 0;
   if (tooltipPosition && triggerPosition) {
@@ -174,7 +187,7 @@ const TooltipRenderer = ({
         lockPlacement: isStatic,
         delayVisibility: !isMobileDevice,
         modal: false,
-        open: isStatic ? true : open,
+        open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
         triggerRef,
         children: /* @__PURE__ */ jsx(

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

@@ -7,7 +7,7 @@ const lib_components_Bleed_Bleed_cjs = require("../../Bleed/Bleed.cjs");
 const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
 const lib_components_ButtonIcon_ButtonIcon_cjs = require("../../ButtonIcon/ButtonIcon.cjs");
 const lib_components_Heading_Heading_cjs = require("../../Heading/Heading.cjs");
-const lib_components_PageBlock_PageBlock_cjs = require("../../PageBlock/PageBlock.cjs");
+const lib_components_PageBlock_pageBlockGutters_cjs = require("../../PageBlock/pageBlockGutters.cjs");
 const lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
 const lib_components_private_normalizeKey_cjs = require("../normalizeKey.cjs");
@@ -120,7 +120,7 @@ const ModalContent = ({
                     width: width !== "content" ? "full" : void 0,
                     height: position === "right" || position === "left" ? "full" : void 0,
                     paddingY: modalPadding,
-                    paddingX: position !== "center" ? lib_components_PageBlock_PageBlock_cjs.gutters : modalPadding,
+                    paddingX: position !== "center" ? lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters : modalPadding,
                     className: [
                       lib_components_private_Modal_Modal_css_cjs.pointerEventsAll,
                       position === "center" && lib_components_private_Modal_Modal_css_cjs.maxSize[position]
@@ -171,7 +171,7 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: position !== "center" ? lib_components_PageBlock_PageBlock_cjs.gutters : modalPadding,
+                paddingRight: position !== "center" ? lib_components_PageBlock_pageBlockGutters_cjs.pageBlockGutters : modalPadding,
                 className: position === "center" && lib_components_private_Modal_Modal_css_cjs.maxSize[position],
                 children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Bleed_Bleed_cjs.Bleed, { space: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
                   lib_components_Box_Box_cjs.Box,

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

@@ -6,7 +6,7 @@ import { Bleed } from "../../Bleed/Bleed.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
-import { gutters } from "../../PageBlock/PageBlock.mjs";
+import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
 import { buildDataAttributes } from "../buildDataAttributes.mjs";
 import { normalizeKey } from "../normalizeKey.mjs";
@@ -119,7 +119,7 @@ const ModalContent = ({
                     width: width !== "content" ? "full" : void 0,
                     height: position === "right" || position === "left" ? "full" : void 0,
                     paddingY: modalPadding,
-                    paddingX: position !== "center" ? gutters : modalPadding,
+                    paddingX: position !== "center" ? pageBlockGutters : modalPadding,
                     className: [
                       pointerEventsAll,
                       position === "center" && maxSize[position]
@@ -170,7 +170,7 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: position !== "center" ? gutters : modalPadding,
+                paddingRight: position !== "center" ? pageBlockGutters : modalPadding,
                 className: position === "center" && maxSize[position],
                 children: /* @__PURE__ */ jsx(Bleed, { space: "xsmall", children: /* @__PURE__ */ jsx(
                   Box,

package/dist/lib/components/useToast/Toast.cjs

@@ -6,12 +6,13 @@ const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
 const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
 const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
-const lib_components_ContentBlock_ContentBlock_cjs = require("../ContentBlock/ContentBlock.cjs");
 const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
 const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
 const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
 const lib_components_TextLinkButton_TextLinkButton_cjs = require("../TextLinkButton/TextLinkButton.cjs");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_useToast_consts_cjs = require("./consts.cjs");
 const lib_components_useToast_useTimeout_cjs = require("./useTimeout.cjs");
 const lib_components_useToast_Toast_css_cjs = require("./Toast.css.cjs");
 const lib_css_lineHeightContainer_css_cjs = require("../../css/lineHeightContainer.css.cjs");
@@ -24,13 +25,17 @@ const toneToIcon = {
   critical: lib_components_icons_IconCritical_IconCritical_cjs.IconCritical,
   positive: lib_components_icons_IconPositive_IconPositive_cjs.IconPositive
 };
-const toastDuration = 1e4;
+const toastDuration = 10 * 1e3;
 const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
-  const handleClick = react.useCallback(() => {
-    removeToast();
-    onClick();
-  }, [removeToast, onClick]);
+  const handleClick = react.useCallback(
+    (event) => {
+      event.stopPropagation();
+      removeToast();
+      onClick();
+    },
+    [removeToast, onClick]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_TextLinkButton_TextLinkButton_cjs.TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
 };
 const ToastIcon = ({ tone, icon }) => {
@@ -56,6 +61,7 @@ const Toast = react.forwardRef(
     action,
     shouldRemove,
     data,
+    expanded = true,
     ...restProps
   }, ref) => {
     const remove = react.useCallback(
@@ -72,6 +78,10 @@ const Toast = react.forwardRef(
         remove();
       }
     }, [shouldRemove, remove, stopTimeout]);
+    react.useEffect(
+      () => expanded ? stopTimeout() : startTimeout(),
+      [expanded, startTimeout, stopTimeout]
+    );
     assert__default.default(
       !icon || icon.props.size === void 0 && icon.props.tone === void 0,
       "Icons cannot set the 'size' or 'tone' prop when passed to a Toast component"
@@ -88,56 +98,62 @@ const Toast = react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingRight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { weight: "medium", tone, baseline: false, children: message }) }),
       action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
     ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { position: "relative", width: "full", display: "flex", ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
       lib_components_Box_Box_cjs.Box,
       {
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "left",
         role: "alert",
-        ref,
-        onMouseEnter: stopTimeout,
-        onMouseLeave: startTimeout,
+        textAlign: "left",
+        background: { lightMode: "surfaceDark", darkMode: "surface" },
+        boxShadow: {
+          lightMode: "borderNeutral",
+          darkMode: "borderNeutralLight"
+        },
+        borderRadius,
+        paddingY: "medium",
+        paddingX: "gutter",
+        marginTop: lib_components_useToast_consts_cjs.toastGap,
+        width: "full",
+        position: "relative",
+        className: lib_components_useToast_Toast_css_cjs.toast,
+        tabIndex: 0,
+        outline: "focus",
+        onClick: (event) => {
+          event.stopPropagation();
+        },
         ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
-          lib_components_Box_Box_cjs.Box,
-          {
-            background: { lightMode: "surfaceDark", darkMode: "surface" },
-            position: "relative",
-            borderRadius,
-            paddingY: "medium",
-            paddingX: "gutter",
-            overflow: "hidden",
-            className: lib_components_useToast_Toast_css_cjs.toast,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
-              tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { tone, icon }) }) }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: content }),
-              /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-                lib_components_Box_Box_cjs.Box,
-                {
-                  width: "touchable",
-                  display: "flex",
-                  justifyContent: "flexEnd",
-                  alignItems: "center",
-                  className: lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
-                    {
-                      icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { tone: "secondary" }),
-                      variant: "transparent",
-                      onClick: remove,
-                      label: closeLabel,
-                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
-                    }
-                  )
-                }
-              ) })
-            ] })
-          }
-        ) }) })
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { transition: "fast", className: lib_components_useToast_Toast_css_cjs.collapsedToastContent, children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
+            tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { tone, icon }) }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: content }),
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Box_Box_cjs.Box,
+              {
+                width: "touchable",
+                display: "flex",
+                justifyContent: "flexEnd",
+                alignItems: "center",
+                className: lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { tone: "secondary" }),
+                    variant: "transparent",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      remove();
+                    },
+                    label: closeLabel,
+                    data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
+                  }
+                )
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_Overlay_Overlay_cjs.Overlay, { visible: true, borderRadius, boxShadow: "large" })
+        ]
       }
-    );
+    ) });
   }
 );
 exports.Toast = Toast;

package/dist/lib/components/useToast/Toast.css.cjs

@@ -5,5 +5,15 @@ fileScope.setFileScope("src/lib/components/useToast/Toast.css.ts", "braid-design
 const toast = css.style({
   pointerEvents: "all"
 }, "toast");
+const collapsed = css.style({}, "collapsed");
+const collapsedToastContent = css.style({
+  selectors: {
+    [`${collapsed} &`]: {
+      opacity: 0
+    }
+  }
+}, "collapsedToastContent");
 fileScope.endFileScope();
+exports.collapsed = collapsed;
+exports.collapsedToastContent = collapsedToastContent;
 exports.toast = toast;

package/dist/lib/components/useToast/Toast.css.mjs

@@ -4,7 +4,17 @@ setFileScope("src/lib/components/useToast/Toast.css.ts", "braid-design-system");
 const toast = style({
   pointerEvents: "all"
 }, "toast");
+const collapsed = style({}, "collapsed");
+const collapsedToastContent = style({
+  selectors: {
+    [`${collapsed} &`]: {
+      opacity: 0
+    }
+  }
+}, "collapsedToastContent");
 endFileScope();
 export {
+  collapsed,
+  collapsedToastContent,
   toast
 };