braid-design-system 32.2.0 → 32.3.0

package/dist/ToastContext.chunk.cjs

@@ -29,7 +29,6 @@ const reactPopperTooltip = require("react-popper-tooltip");
 const isMobile = require("is-mobile");
 const styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs = require("./styles/lib/components/TooltipRenderer/TooltipRenderer.css.cjs");
 const styles_lib_components_ButtonIcon_ButtonIcon_css_cjs = require("./styles/lib/components/ButtonIcon/ButtonIcon.css.cjs");
-const styles_lib_components_private_Keyline_Keyline_css_cjs = require("./styles/lib/components/private/Keyline/Keyline.css.cjs");
 const styles_lib_components_useToast_Toast_css_cjs = require("./styles/lib/components/useToast/Toast.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefaultCompat(React);
@@ -159,6 +158,7 @@ const adaptiveBackgrounds = {
   formAccentSoftHover: "neutralHover"
 };
 const adaptiveBoxShadow = {
+  borderBrandAccent: "borderBrandAccentLight",
   borderBrandAccentLarge: "borderBrandAccentLightLarge",
   borderCaution: "borderCautionLight",
   borderCritical: "borderCriticalLight",
@@ -1182,36 +1182,6 @@ const Overlay = ({
   }
 );
 const ActionsContext = React.createContext(null);
-const Keyline = ({ tone, borderRadius: borderRadius2 }) => {
-  const backgroundLightness = useBackgroundLightness();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      component: "span",
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      overflow: "hidden",
-      borderRadius: borderRadius2,
-      className: [styles_lib_components_private_Keyline_Keyline_css_cjs.noRadiusOnRight, styles_lib_components_private_Keyline_Keyline_css_cjs.largestWidth],
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          component: "span",
-          height: "full",
-          display: "inlineBlock",
-          className: [
-            styles_lib_components_private_Keyline_Keyline_css_cjs.width,
-            styles_lib_components_private_Keyline_Keyline_css_cjs.tone[tone],
-            styles_lib_components_private_Keyline_Keyline_css_cjs.lightMode[backgroundLightness.lightMode],
-            styles_lib_components_private_Keyline_Keyline_css_cjs.darkMode[backgroundLightness.darkMode]
-          ]
-        }
-      )
-    }
-  );
-};
 const boxShadowForVariant = {
   default: "borderField",
   disabled: "borderNeutralLight",
@@ -1388,28 +1358,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"
     }
   }
 };
@@ -1704,10 +1674,10 @@ const TooltipContent = ({
       Box,
       {
         boxShadow: "large",
-        background: "customDark",
+        background: "neutral",
         borderRadius: borderRadius$1,
         padding: "small",
-        className: [styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.background, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
+        className: [styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
         children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "relative", zIndex: 1, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1715,7 +1685,8 @@ const TooltipContent = ({
             {
               ...arrowProps,
               borderRadius: borderRadius$1,
-              className: [styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.background]
+              background: "neutral",
+              className: styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow
             }
           )
         ] })
@@ -2154,7 +2125,17 @@ const Action = ({ label, onClick, removeToast }) => {
     removeToast();
     onClick();
   }, [removeToast, onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", paddingRight: "xsmall", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Text, { baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(TextLinkButton, { onClick: handleClick, hitArea: "large", children: label }) }) });
+};
+const ToastIcon = ({ tone, icon }) => {
+  if (tone !== "neutral") {
+    const Icon = toneToIcon[tone];
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone });
+  }
+  if (icon) {
+    return React.cloneElement(icon, { tone });
+  }
+  return null;
 };
 const Toast = React__default.default.forwardRef(
   ({
@@ -2186,7 +2167,6 @@ const Toast = React__default.default.forwardRef(
         remove();
       }
     }, [shouldRemove, remove, stopTimeout]);
-    const Icon = tone !== "neutral" ? toneToIcon[tone] : void 0;
     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"
@@ -2196,11 +2176,11 @@ const Toast = React__default.default.forwardRef(
       `Icons cannot be customised on a Toast component using '${tone}' tone`
     );
     const content = description ? /* @__PURE__ */ jsxRuntime.jsxs(Stack, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "strong", baseline: false, children: message }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "medium", tone, baseline: false, children: message }),
       description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { baseline: false, tone: "secondary", children: description }) : null,
       action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Inline, { space: "xxsmall", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "strong", baseline: false, children: message }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "medium", tone, baseline: false, children: message }) }),
       action ? /* @__PURE__ */ jsxRuntime.jsx(Action, { removeToast: remove, ...action }, action.label) : null
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2214,50 +2194,43 @@ const Toast = React__default.default.forwardRef(
         onMouseLeave: startTimeout,
         className: vanillaTheme,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { boxShadow: "large", borderRadius, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { width: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            background: "surface",
+            background: { lightMode: "surfaceDark", darkMode: "surface" },
             position: "relative",
-            boxShadow: "borderNeutralLight",
             borderRadius,
             paddingY: "medium",
-            paddingLeft: "medium",
+            paddingX: "gutter",
             overflow: "hidden",
             className: styles_lib_components_useToast_Toast_css_cjs.toast,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Columns, { space: "none", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Column, { width: "content", children: [
-                  Icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone }) }) : null,
-                  tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "small", children: React.cloneElement(icon, { tone: "secondary" }) }) : null
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(Column, { children: content }),
-                /* @__PURE__ */ jsxRuntime.jsx(Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Box,
-                  {
-                    width: "touchable",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    className: styles_lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ButtonIcon,
-                      {
-                        id: `${dedupeKey}-clear`,
-                        icon: /* @__PURE__ */ jsxRuntime.jsx(IconClear, {}),
-                        tone: "secondary",
-                        variant: "transparent",
-                        onClick: remove,
-                        label: closeLabel,
-                        data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
-                      }
-                    )
-                  }
-                ) })
-              ] }),
-              tone !== "neutral" ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius }) : null
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Columns, { space: "none", children: [
+              tone !== "neutral" || tone === "neutral" && icon ? /* @__PURE__ */ jsxRuntime.jsx(Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { tone, icon }) }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(Column, { children: content }),
+              /* @__PURE__ */ jsxRuntime.jsx(Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Box,
+                {
+                  width: "touchable",
+                  display: "flex",
+                  justifyContent: "flexEnd",
+                  alignItems: "center",
+                  className: styles_lib_css_lineHeightContainer_css_cjs.lineHeightContainer.standard,
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ButtonIcon,
+                    {
+                      id: `${dedupeKey}-clear`,
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(IconClear, {}),
+                      tone: "secondary",
+                      variant: "transparent",
+                      onClick: remove,
+                      label: closeLabel,
+                      data: process.env.NODE_ENV !== "production" ? { testid: "clearToast" } : {}
+                    }
+                  )
+                }
+              ) })
+            ] })
           }
         ) }) })
       }
@@ -2547,7 +2520,6 @@ exports.IconCritical = IconCritical;
 exports.IconPositive = IconPositive;
 exports.IconRenderer = IconRenderer;
 exports.Inline = Inline;
-exports.Keyline = Keyline;
 exports.Overlay = Overlay;
 exports.PublicBox = PublicBox;
 exports.Stack = Stack;