braid-design-system 32.1.1 → 32.3.0

package/dist/ToastContext.chunk.mjs

@@ -8,12 +8,12 @@ import dedent from "dedent";
 import { base } from "./styles/lib/css/reset/reset.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/atoms.mjs";
 import { mapColorModeValue, sprinkles, mapResponsiveValue, normalizeResponsiveValue } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { lightModeTone, darkModeTone, lightModeNeutralOverride, darkModeNeutralOverride, fontFamily, fontWeight, tone, styles as styles$1, textSizeUntrimmed, touchableText } from "./styles/lib/css/typography.css.mjs";
+import { lightModeTone, darkModeTone, lightModeNeutralOverride, darkModeNeutralOverride, fontFamily, fontWeight, tone, textSizeTrimmed, textSizeUntrimmed } from "./styles/lib/css/typography.css.mjs";
 import assert from "assert";
 import { isFragment } from "react-is";
 import { base as base$1, strong, regular, lightModeWeight, darkModeWeight } from "./styles/lib/components/Divider/Divider.css.mjs";
 import { hiddenOnPrint } from "./styles/lib/components/Hidden/Hidden.css.mjs";
-import { preventCollapsePseudo, styles } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
+import { preventCollapsePseudo, top, right, bottom, left } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
 import { column, width, columnContent } from "./styles/lib/components/Column/Column.css.mjs";
 import { marginAuto } from "./styles/lib/components/ContentBlock/ContentBlock.css.mjs";
 import { truncate } from "./styles/lib/components/private/Truncate/Truncate.css.mjs";
@@ -23,12 +23,11 @@ import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$2, vi
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { size, inlineCrop, inline, alignY, cropToTextSize, blockWidths } from "./styles/lib/hooks/useIcon/icon.css.mjs";
 import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs";
-import { focusOverlay, hoverOverlay, invertedBackgroundsLightMode, invertedBackgroundsDarkMode, forceActive, activeOverlay, constants, root, standard, small, bleedVerticallyToCapHeight, loadingDot } from "./styles/lib/components/Button/Button.css.mjs";
+import { focusOverlay, hoverOverlay, invertedBackgroundsLightMode, invertedBackgroundsDarkMode, forceActive, activeOverlay, padToMinHeight, root, standard, small, bleedVerticallyToCapHeight, loadingDot } from "./styles/lib/components/Button/Button.css.mjs";
 import { usePopperTooltip } from "react-popper-tooltip";
 import isMobile from "is-mobile";
-import { verticalOffsetBeforeEntrance, translateZ0, background, maxWidth, padding as padding$1, arrow } from "./styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs";
+import { verticalOffsetBeforeEntrance, translateZ0, maxWidth, arrow } from "./styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs";
 import { button } from "./styles/lib/components/ButtonIcon/ButtonIcon.css.mjs";
-import { noRadiusOnRight, largestWidth, tone as tone$1, lightMode, darkMode } from "./styles/lib/components/private/Keyline/Keyline.css.mjs";
 import { toast } from "./styles/lib/components/useToast/Toast.css.mjs";
 const TextContext = createContext(null);
 const BraidPortal = ({ children, container }) => {
@@ -117,7 +116,7 @@ const BackgroundProvider = backgroundContext.Provider;
 const useBackground = () => useContext(backgroundContext);
 const useBackgroundLightness = (backgroundOverride) => {
   const backgroundFromContext = useBackground();
-  const background2 = backgroundOverride || backgroundFromContext;
+  const background = backgroundOverride || backgroundFromContext;
   const { backgroundLightness } = useBraidTheme();
   const lightnessMap = {
     ...backgroundLightness,
@@ -125,16 +124,16 @@ const useBackgroundLightness = (backgroundOverride) => {
     customLight: "light"
   };
   return {
-    lightMode: lightnessMap[background2.lightMode],
-    darkMode: lightnessMap[background2.darkMode]
+    lightMode: lightnessMap[background.lightMode],
+    darkMode: lightnessMap[background.darkMode]
   };
 };
 const useColorContrast = () => {
-  const background2 = useBackground();
+  const background = useBackground();
   const backgroundLightness = useBackgroundLightness();
   return (map) => mapColorModeValue(
     backgroundLightness,
-    (lightness, mode) => typeof map === "function" ? map(lightness, background2[mode]) : map[lightness]
+    (lightness, mode) => typeof map === "function" ? map(lightness, background[mode]) : map[lightness]
   );
 };
 const adaptiveBackgrounds = {
@@ -152,6 +151,7 @@ const adaptiveBackgrounds = {
   formAccentSoftHover: "neutralHover"
 };
 const adaptiveBoxShadow = {
+  borderBrandAccent: "borderBrandAccentLight",
   borderBrandAccentLarge: "borderBrandAccentLightLarge",
   borderCaution: "borderCautionLight",
   borderCritical: "borderCriticalLight",
@@ -165,16 +165,16 @@ const adaptiveBoxShadow = {
   borderPositive: "borderPositiveLight",
   borderPromote: "borderPromoteLight"
 };
-const normaliseBackground = (background2) => ({
-  lightMode: typeof background2 === "object" ? background2.lightMode : background2,
-  darkMode: typeof background2 === "object" ? background2.darkMode : adaptiveBackgrounds[background2] || background2
+const normaliseBackground = (background) => ({
+  lightMode: typeof background === "object" ? background.lightMode : background,
+  darkMode: typeof background === "object" ? background.darkMode : adaptiveBackgrounds[background] || background
 });
 const normalisedBoxShadow = (boxShadow) => ({
   lightMode: typeof boxShadow === "object" ? boxShadow.lightMode : boxShadow,
   darkMode: typeof boxShadow === "object" ? boxShadow.darkMode : boxShadow
 });
 const useColoredBoxClasses = ({
-  background: background2,
+  background,
   boxShadow
 }) => {
   const parentLightness = useBackgroundLightness();
@@ -198,12 +198,12 @@ const useColoredBoxClasses = ({
       })
     );
   }
-  if (background2) {
-    const { lightMode: lightMode2, darkMode: darkMode2 } = normaliseBackground(background2);
-    classList.push(lightModeTone[lightnessMap[lightMode2]]);
-    classList.push(darkModeTone[lightnessMap[darkMode2]]);
-    const lightModeTone$1 = lightMode2 === "neutral" ? darkMode2 : lightMode2;
-    const darkModeTone$1 = darkMode2 === "neutral" ? lightMode2 : darkMode2;
+  if (background) {
+    const { lightMode, darkMode } = normaliseBackground(background);
+    classList.push(lightModeTone[lightnessMap[lightMode]]);
+    classList.push(darkModeTone[lightnessMap[darkMode]]);
+    const lightModeTone$1 = lightMode === "neutral" ? darkMode : lightMode;
+    const darkModeTone$1 = darkMode === "neutral" ? lightMode : darkMode;
     if (lightModeTone$1 && lightModeNeutralOverride[lightModeTone$1]) {
       classList.push(lightModeNeutralOverride[lightModeTone$1]);
     }
@@ -213,15 +213,15 @@ const useColoredBoxClasses = ({
     classList.push(
       atoms({
         background: {
-          lightMode: lightMode2 === "customDark" || lightMode2 === "customLight" ? void 0 : lightMode2,
-          darkMode: darkMode2 === "customDark" || darkMode2 === "customLight" ? void 0 : darkMode2
+          lightMode: lightMode === "customDark" || lightMode === "customLight" ? void 0 : lightMode,
+          darkMode: darkMode === "customDark" || darkMode === "customLight" ? void 0 : darkMode
         }
       })
     );
     return {
       backgroundContext: {
-        lightMode: lightMode2 || currentBackgroundContext.lightMode,
-        darkMode: darkMode2 || currentBackgroundContext.darkMode
+        lightMode: lightMode || currentBackgroundContext.lightMode,
+        darkMode: darkMode || currentBackgroundContext.darkMode
       },
       classList: classList.join(" ")
     };
@@ -231,9 +231,9 @@ const useColoredBoxClasses = ({
   };
 };
 const ColoredBox = forwardRef(
-  ({ component, background: background2, boxShadow, className, ...props }, ref) => {
+  ({ component, background, boxShadow, className, ...props }, ref) => {
     const { backgroundContext: backgroundContext2, classList: colorClasses } = useColoredBoxClasses(
-      { background: background2, boxShadow }
+      { background, boxShadow }
     );
     const element = createElement(component, {
       className: `${className}${colorClasses ? ` ${colorClasses}` : ""}`,
@@ -245,7 +245,7 @@ const ColoredBox = forwardRef(
 );
 ColoredBox.displayName = "ColoredBox";
 const Box = forwardRef(
-  ({ component = "div", className, background: background2, boxShadow, data, ...restProps }, ref) => {
+  ({ component = "div", className, background, boxShadow, data, ...restProps }, ref) => {
     const atomProps = {};
     const nativeProps = {
       ...data ? (
@@ -282,11 +282,11 @@ const Box = forwardRef(
       ...atomProps
     });
     const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
-    return background2 || boxShadow ? /* @__PURE__ */ jsx(
+    return background || boxShadow ? /* @__PURE__ */ jsx(
       ColoredBox,
       {
         component,
-        background: background2,
+        background,
         boxShadow,
         className: combinedClasses,
         ref,
@@ -455,14 +455,20 @@ const resolveResponsiveProp = (value, mobileAtoms, tabletAtoms, desktopAtoms, wi
   const wideAtom = wideAtoms[wide];
   return clsx(mobileAtom, tabletAtom, desktopAtom, wideAtom);
 };
+const directionStyles = {
+  top,
+  right,
+  bottom,
+  left
+};
 const negativeMargin = (direction, space) => space ? clsx([
   direction === "top" || direction === "bottom" ? preventCollapsePseudo[direction] : void 0,
   resolveResponsiveProp(
     space,
-    styles[direction].mobile,
-    styles[direction].tablet,
-    styles[direction].desktop,
-    styles[direction].wide
+    directionStyles[direction].mobile,
+    directionStyles[direction].tablet,
+    directionStyles[direction].desktop,
+    directionStyles[direction].wide
   )
 ]) : null;
 const alignToDisplay = {
@@ -624,14 +630,14 @@ const useDefaultTextProps = ({
 function textStyles({
   weight = "regular",
   size: size2 = "standard",
-  tone: tone$12 = "neutral",
+  tone: tone$1 = "neutral",
   baseline
 }) {
   return [
     fontFamily,
     fontWeight[weight],
-    tone[tone$12],
-    styles$1[baseline ? "textSizeTrimmed" : "textSizeUntrimmed"][size2]
+    tone[tone$1],
+    (baseline ? textSizeTrimmed : textSizeUntrimmed)[size2]
   ];
 }
 const Truncate = ({ children }) => /* @__PURE__ */ jsx(Box, { component: "span", className: truncate, children });
@@ -1021,11 +1027,11 @@ const defaultVerticalCorrection = {
   uppercase: "none",
   lowercase: "none"
 };
-const useIcon = ({ size: size2, tone: tone$12, alignY: alignY2, data, title, titleId, ...restProps }, { verticalCorrection = defaultVerticalCorrection } = {}) => {
+const useIcon = ({ size: size2, tone: tone$1, alignY: alignY2, data, title, titleId, ...restProps }, { verticalCorrection = defaultVerticalCorrection } = {}) => {
   const textContext = useContext(TextContext);
   const headingContext = useContext(HeadingContext);
-  const resolvedTone = tone[tone$12 || (textContext == null ? void 0 : textContext.tone) || "neutral"];
-  const toneClass = tone$12 || !headingContext && !(textContext == null ? void 0 : textContext.tone) ? resolvedTone : void 0;
+  const resolvedTone = tone[tone$1 || (textContext == null ? void 0 : textContext.tone) || "neutral"];
+  const toneClass = tone$1 || !headingContext && !(textContext == null ? void 0 : textContext.tone) ? resolvedTone : void 0;
   const isInline = Boolean(textContext || headingContext);
   const a11yProps = title ? { title, titleId, role: "img" } : { "aria-hidden": true };
   assert(
@@ -1140,7 +1146,7 @@ function virtualTouchable({ xAxis } = { xAxis: true }) {
 const Overlay = ({
   component,
   zIndex,
-  background: background2,
+  background,
   borderRadius: borderRadius2,
   boxShadow,
   transition,
@@ -1155,7 +1161,7 @@ const Overlay = ({
     position: "absolute",
     zIndex,
     pointerEvents: "none",
-    background: background2,
+    background,
     borderRadius: borderRadius2,
     boxShadow,
     transition,
@@ -1169,41 +1175,11 @@ const Overlay = ({
   }
 );
 const ActionsContext = createContext(null);
-const Keyline = ({ tone: tone2, borderRadius: borderRadius2 }) => {
-  const backgroundLightness = useBackgroundLightness();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: "span",
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      overflow: "hidden",
-      borderRadius: borderRadius2,
-      className: [noRadiusOnRight, largestWidth],
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "span",
-          height: "full",
-          display: "inlineBlock",
-          paddingLeft: "xxsmall",
-          className: [
-            tone$1[tone2],
-            lightMode[backgroundLightness.lightMode],
-            darkMode[backgroundLightness.darkMode]
-          ]
-        }
-      )
-    }
-  );
-};
 const boxShadowForVariant = {
   default: "borderField",
   disabled: "borderNeutralLight",
   focus: "outlineFocus",
-  hover: "borderFormAccent",
+  formAccent: "borderFormAccent",
   critical: "borderCritical"
 };
 const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsx(
@@ -1241,10 +1217,10 @@ const Bleed = ({
   space,
   horizontal,
   vertical,
-  top,
-  bottom,
-  left,
-  right,
+  top: top2,
+  bottom: bottom2,
+  left: left2,
+  right: right2,
   children,
   component = "div",
   data,
@@ -1255,10 +1231,10 @@ const Bleed = ({
     component,
     display: component === "span" ? "block" : void 0,
     className: [
-      negativeMargin("top", top || vertical || space),
-      negativeMargin("bottom", bottom || vertical || space),
-      negativeMargin("left", left || horizontal || space),
-      negativeMargin("right", right || horizontal || space)
+      negativeMargin("top", top2 || vertical || space),
+      negativeMargin("bottom", bottom2 || vertical || space),
+      negativeMargin("left", left2 || horizontal || space),
+      negativeMargin("right", right2 || horizontal || space)
     ],
     ...buildDataAttributes({ data, validateRestProps: restProps }),
     children: /* @__PURE__ */ jsx(
@@ -1375,28 +1351,28 @@ const variants = {
       background: void 0,
       backgroundHover: "formAccentSoftHover",
       backgroundActive: "formAccentSoftActive",
-      boxShadow: "borderFormAccentLarge"
+      boxShadow: "borderFormAccent"
     },
     brandAccent: {
       textTone: "brandAccent",
       background: void 0,
       backgroundHover: "brandAccentSoftHover",
       backgroundActive: "brandAccentSoftActive",
-      boxShadow: "borderBrandAccentLarge"
+      boxShadow: "borderBrandAccent"
     },
     critical: {
       textTone: "critical",
       background: void 0,
       backgroundHover: "criticalSoftHover",
       backgroundActive: "criticalSoftActive",
-      boxShadow: "borderCriticalLarge"
+      boxShadow: "borderCritical"
     },
     neutral: {
       textTone: "neutral",
       background: void 0,
       backgroundHover: "neutralSoftHover",
       backgroundActive: "neutralSoftActive",
-      boxShadow: "borderNeutralLarge"
+      boxShadow: "borderNeutral"
     }
   }
 };
@@ -1406,7 +1382,7 @@ const ButtonLoader = () => /* @__PURE__ */ jsxs(Box, { "aria-hidden": true, comp
   /* @__PURE__ */ jsx(Box, { component: "span", className: loadingDot, children: "." })
 ] });
 const transparentPaddingX = "small";
-const buttonRadius = "large";
+const buttonRadius = "standard";
 const ButtonOverlays = ({
   variant = "solid",
   tone: tone2,
@@ -1473,7 +1449,6 @@ const ButtonText = ({
   iconPosition = "leading",
   variant = "solid",
   tone: tone2,
-  labelSpacing = true,
   bleed
 }) => {
   const lightness = useBackgroundLightness();
@@ -1496,9 +1471,8 @@ const ButtonText = ({
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",
-      paddingX: labelSpacing ? labelPaddingX : void 0,
-      paddingY: labelSpacing && size2 === "small" ? constants.smallButtonPaddingSize : void 0,
-      className: labelSpacing && size2 === "standard" ? touchableText.standard : void 0,
+      paddingX: labelPaddingX,
+      className: padToMinHeight,
       background: tone2 === "neutral" && variant !== "solid" ? {
         lightMode: lightness.lightMode === "light" ? "customLight" : "customDark",
         darkMode: lightness.darkMode === "light" ? "customLight" : "customDark"
@@ -1508,8 +1482,8 @@ const ButtonText = ({
         {
           tone: stylesForVariant.textTone,
           weight: "medium",
+          align: "center",
           size: size2,
-          baseline: false,
           children: [
             icon && iconPosition === "leading" ? /* @__PURE__ */ jsx(
               AvoidWidowIcon,
@@ -1676,7 +1650,7 @@ const TooltipTextDefaultsProvider = ({
     }
   );
 };
-const borderRadius$1 = "xlarge";
+const borderRadius$1 = "large";
 const TooltipContent = ({
   children,
   opacity,
@@ -1693,14 +1667,10 @@ const TooltipContent = ({
       Box,
       {
         boxShadow: "large",
-        background: "customDark",
+        background: "neutral",
         borderRadius: borderRadius$1,
-        className: [
-          background,
-          maxWidth,
-          translateZ0,
-          padding$1
-        ],
+        padding: "small",
+        className: [maxWidth, translateZ0],
         children: /* @__PURE__ */ jsxs(TooltipTextDefaultsProvider, { children: [
           /* @__PURE__ */ jsx(Box, { position: "relative", zIndex: 1, children }),
           /* @__PURE__ */ jsx(
@@ -1708,7 +1678,8 @@ const TooltipContent = ({
             {
               ...arrowProps,
               borderRadius: borderRadius$1,
-              className: [arrow, background]
+              background: "neutral",
+              className: arrow
             }
           )
         ] })
@@ -2141,13 +2112,23 @@ const toneToIcon = {
   positive: IconPositive
 };
 const toastDuration = 1e4;
-const borderRadius = "xlarge";
+const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
   const handleClick = useCallback(() => {
     removeToast();
     onClick();
   }, [removeToast, onClick]);
-  return /* @__PURE__ */ jsx(Text, { baseline: false, children: /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: "xsmall", "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
+  return /* @__PURE__ */ jsx(Text, { baseline: false, children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
+};
+const ToastIcon = ({ tone: tone2, icon }) => {
+  if (tone2 !== "neutral") {
+    const Icon = toneToIcon[tone2];
+    return /* @__PURE__ */ jsx(Icon, { tone: tone2 });
+  }
+  if (icon) {
+    return cloneElement(icon, { tone: tone2 });
+  }
+  return null;
 };
 const Toast = React.forwardRef(
   ({
@@ -2179,7 +2160,6 @@ const Toast = React.forwardRef(
         remove();
       }
     }, [shouldRemove, remove, stopTimeout]);
-    const Icon = tone2 !== "neutral" ? toneToIcon[tone2] : void 0;
     assert(
       !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"
@@ -2189,11 +2169,11 @@ const Toast = React.forwardRef(
       `Icons cannot be customised on a Toast component using '${tone2}' tone`
     );
     const content = description ? /* @__PURE__ */ jsxs(Stack, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsx(Text, { weight: "strong", baseline: false, children: message }),
+      /* @__PURE__ */ jsx(Text, { weight: "medium", tone: tone2, baseline: false, children: message }),
       description ? /* @__PURE__ */ jsx(Text, { baseline: false, tone: "secondary", children: description }) : null,
       action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
     ] }) : /* @__PURE__ */ jsxs(Inline, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsx(Text, { weight: "strong", baseline: false, children: message }) }),
+      /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsx(Text, { weight: "medium", tone: tone2, baseline: false, children: message }) }),
       action ? /* @__PURE__ */ jsx(Action, { removeToast: remove, ...action }, action.label) : null
     ] });
     return /* @__PURE__ */ jsx(
@@ -2207,50 +2187,43 @@ const Toast = React.forwardRef(
         onMouseLeave: startTimeout,
         className: vanillaTheme,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
-        children: /* @__PURE__ */ jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsx(
           Box,
           {
-            background: "surface",
+            background: { lightMode: "surfaceDark", darkMode: "surface" },
             position: "relative",
-            boxShadow: "borderNeutralLight",
             borderRadius,
             paddingY: "medium",
-            paddingLeft: "medium",
+            paddingX: "gutter",
             overflow: "hidden",
             className: toast,
-            children: [
-              /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
-                /* @__PURE__ */ jsxs(Column, { width: "content", children: [
-                  Icon ? /* @__PURE__ */ jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsx(Icon, { tone: tone2 }) }) : null,
-                  tone2 === "neutral" && icon ? /* @__PURE__ */ jsx(Box, { paddingRight: "small", children: cloneElement(icon, { tone: "secondary" }) }) : null
-                ] }),
-                /* @__PURE__ */ jsx(Column, { children: content }),
-                /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    width: "touchable",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    className: lineHeightContainer.standard,
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ jsx(
-                      ButtonIcon,
-                      {
-                        id: `${dedupeKey}-clear`,
-                        icon: /* @__PURE__ */ jsx(IconClear, {}),
-                        tone: "secondary",
-                        variant: "transparent",
-                        onClick: remove,
-                        label: closeLabel,
-                        data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
-                      }
-                    )
-                  }
-                ) })
-              ] }),
-              tone2 !== "neutral" ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius }) : null
-            ]
+            children: /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
+              tone2 !== "neutral" || tone2 === "neutral" && icon ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsx(ToastIcon, { tone: tone2, icon }) }) }) : null,
+              /* @__PURE__ */ jsx(Column, { children: content }),
+              /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  width: "touchable",
+                  display: "flex",
+                  justifyContent: "flexEnd",
+                  alignItems: "center",
+                  className: lineHeightContainer.standard,
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx(
+                    ButtonIcon,
+                    {
+                      id: `${dedupeKey}-clear`,
+                      icon: /* @__PURE__ */ jsx(IconClear, {}),
+                      tone: "secondary",
+                      variant: "transparent",
+                      onClick: remove,
+                      label: closeLabel,
+                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
+                    }
+                  )
+                }
+              ) })
+            ] })
           }
         ) }) })
       }
@@ -2300,15 +2273,15 @@ const useFlipList = () => {
     Array.from(refs.entries()).forEach(([id, element]) => {
       if (element) {
         const prevTop = positions.get(id);
-        const { top, height } = element.getBoundingClientRect();
-        if (typeof prevTop === "number" && prevTop !== top) {
+        const { top: top2, height } = element.getBoundingClientRect();
+        if (typeof prevTop === "number" && prevTop !== top2) {
           animations.push({
             element,
             transition: entranceTransition,
             transforms: [
               {
                 property: "transform",
-                from: `translateY(${prevTop - top}px)`
+                from: `translateY(${prevTop - top2}px)`
               }
             ]
           });
@@ -2541,7 +2514,6 @@ export {
   IconPositive,
   IconRenderer,
   Inline,
-  Keyline,
   Overlay,
   PublicBox,
   Stack,