braid-design-system 32.1.1 → 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",
@@ -462,14 +462,20 @@ const resolveResponsiveProp = (value, mobileAtoms, tabletAtoms, desktopAtoms, wi
   const wideAtom = wideAtoms[wide];
   return clsx__default.default(mobileAtom, tabletAtom, desktopAtom, wideAtom);
 };
+const directionStyles = {
+  top: styles_lib_css_negativeMargin_negativeMargin_css_cjs.top,
+  right: styles_lib_css_negativeMargin_negativeMargin_css_cjs.right,
+  bottom: styles_lib_css_negativeMargin_negativeMargin_css_cjs.bottom,
+  left: styles_lib_css_negativeMargin_negativeMargin_css_cjs.left
+};
 const negativeMargin = (direction, space) => space ? clsx__default.default([
   direction === "top" || direction === "bottom" ? styles_lib_css_negativeMargin_negativeMargin_css_cjs.preventCollapsePseudo[direction] : void 0,
   resolveResponsiveProp(
     space,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].mobile,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].tablet,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].desktop,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].wide
+    directionStyles[direction].mobile,
+    directionStyles[direction].tablet,
+    directionStyles[direction].desktop,
+    directionStyles[direction].wide
   )
 ]) : null;
 const alignToDisplay = {
@@ -638,7 +644,7 @@ function textStyles({
     styles_lib_css_typography_css_cjs.fontFamily,
     styles_lib_css_typography_css_cjs.fontWeight[weight],
     styles_lib_css_typography_css_cjs.tone[tone],
-    styles_lib_css_typography_css_cjs.styles[baseline ? "textSizeTrimmed" : "textSizeUntrimmed"][size]
+    (baseline ? styles_lib_css_typography_css_cjs.textSizeTrimmed : styles_lib_css_typography_css_cjs.textSizeUntrimmed)[size]
   ];
 }
 const Truncate = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_private_Truncate_Truncate_css_cjs.truncate, children });
@@ -1176,41 +1182,11 @@ 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",
-          paddingLeft: "xxsmall",
-          className: [
-            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",
   focus: "outlineFocus",
-  hover: "borderFormAccent",
+  formAccent: "borderFormAccent",
   critical: "borderCritical"
 };
 const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1382,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"
     }
   }
 };
@@ -1413,7 +1389,7 @@ const ButtonLoader = () => /* @__PURE__ */ jsxRuntime.jsxs(Box, { "aria-hidden":
   /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_Button_Button_css_cjs.loadingDot, children: "." })
 ] });
 const transparentPaddingX = "small";
-const buttonRadius = "large";
+const buttonRadius = "standard";
 const ButtonOverlays = ({
   variant = "solid",
   tone,
@@ -1480,7 +1456,6 @@ const ButtonText = ({
   iconPosition = "leading",
   variant = "solid",
   tone,
-  labelSpacing = true,
   bleed
 }) => {
   const lightness = useBackgroundLightness();
@@ -1503,9 +1478,8 @@ const ButtonText = ({
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",
-      paddingX: labelSpacing ? labelPaddingX : void 0,
-      paddingY: labelSpacing && size === "small" ? styles_lib_components_Button_Button_css_cjs.constants.smallButtonPaddingSize : void 0,
-      className: labelSpacing && size === "standard" ? styles_lib_css_typography_css_cjs.touchableText.standard : void 0,
+      paddingX: labelPaddingX,
+      className: styles_lib_components_Button_Button_css_cjs.padToMinHeight,
       background: tone === "neutral" && variant !== "solid" ? {
         lightMode: lightness.lightMode === "light" ? "customLight" : "customDark",
         darkMode: lightness.darkMode === "light" ? "customLight" : "customDark"
@@ -1515,8 +1489,8 @@ const ButtonText = ({
         {
           tone: stylesForVariant.textTone,
           weight: "medium",
+          align: "center",
           size,
-          baseline: false,
           children: [
             icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(
               AvoidWidowIcon,
@@ -1683,7 +1657,7 @@ const TooltipTextDefaultsProvider = ({
     }
   );
 };
-const borderRadius$1 = "xlarge";
+const borderRadius$1 = "large";
 const TooltipContent = ({
   children,
   opacity,
@@ -1700,14 +1674,10 @@ const TooltipContent = ({
       Box,
       {
         boxShadow: "large",
-        background: "customDark",
+        background: "neutral",
         borderRadius: borderRadius$1,
-        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,
-          styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.padding
-        ],
+        padding: "small",
+        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
             }
           )
         ] })
@@ -2148,13 +2119,23 @@ const toneToIcon = {
   positive: IconPositive
 };
 const toastDuration = 1e4;
-const borderRadius = "xlarge";
+const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
   const handleClick = React.useCallback(() => {
     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;