braid-design-system 32.2.0 → 32.3.0

package/dist/ToastContext.chunk.mjs

@@ -26,9 +26,8 @@ import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFoc
 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, 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, width as width$1, 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,
@@ -630,13 +630,13 @@ 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],
+    tone[tone$1],
     (baseline ? textSizeTrimmed : textSizeUntrimmed)[size2]
   ];
 }
@@ -881,7 +881,7 @@ const Columns = ({
 const Column = ({
   children,
   data,
-  width: width$12,
+  width: width$1,
   ...restProps
 }) => {
   const {
@@ -901,11 +901,11 @@ const Column = ({
       component,
       display: component === "span" ? "block" : void 0,
       minWidth: 0,
-      width: width$12 !== "content" ? "full" : void 0,
-      flexShrink: width$12 === "content" ? 0 : void 0,
+      width: width$1 !== "content" ? "full" : void 0,
+      flexShrink: width$1 === "content" ? 0 : void 0,
       className: [
         column,
-        width$12 !== "content" ? width[width$12] : null
+        width$1 !== "content" ? width[width$1] : null
       ],
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: /* @__PURE__ */ jsx(
@@ -1027,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(
@@ -1146,7 +1146,7 @@ function virtualTouchable({ xAxis } = { xAxis: true }) {
 const Overlay = ({
   component,
   zIndex,
-  background: background2,
+  background,
   borderRadius: borderRadius2,
   boxShadow,
   transition,
@@ -1161,7 +1161,7 @@ const Overlay = ({
     position: "absolute",
     zIndex,
     pointerEvents: "none",
-    background: background2,
+    background,
     borderRadius: borderRadius2,
     boxShadow,
     transition,
@@ -1175,36 +1175,6 @@ 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",
-          className: [
-            width$1,
-            tone$1[tone2],
-            lightMode[backgroundLightness.lightMode],
-            darkMode[backgroundLightness.darkMode]
-          ]
-        }
-      )
-    }
-  );
-};
 const boxShadowForVariant = {
   default: "borderField",
   disabled: "borderNeutralLight",
@@ -1381,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"
     }
   }
 };
@@ -1697,10 +1667,10 @@ const TooltipContent = ({
       Box,
       {
         boxShadow: "large",
-        background: "customDark",
+        background: "neutral",
         borderRadius: borderRadius$1,
         padding: "small",
-        className: [background, maxWidth, translateZ0],
+        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
             }
           )
         ] })
@@ -2147,7 +2118,17 @@ const Action = ({ label, onClick, removeToast }) => {
     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" } : {}
+                    }
+                  )
+                }
+              ) })
+            ] })
           }
         ) }) })
       }
@@ -2541,7 +2514,6 @@ export {
   IconPositive,
   IconRenderer,
   Inline,
-  Keyline,
   Overlay,
   PublicBox,
   Stack,

package/dist/Toggle.chunk.cjs

@@ -21,6 +21,7 @@ const reactRemoveScroll = require("react-remove-scroll");
 const styles_lib_components_Autosuggest_Autosuggest_css_cjs = require("./styles/lib/components/Autosuggest/Autosuggest.css.cjs");
 const matchHighlights = require("autosuggest-highlight/match/index.js");
 const clsx = require("clsx");
+const styles_lib_components_private_Keyline_Keyline_css_cjs = require("./styles/lib/components/private/Keyline/Keyline.css.cjs");
 const FocusLock = require("react-focus-lock");
 const styles_lib_components_private_Modal_ModalExternalGutter_cjs = require("./styles/lib/components/private/Modal/ModalExternalGutter.cjs");
 const styles_lib_components_private_Modal_Modal_css_cjs = require("./styles/lib/components/private/Modal/Modal.css.cjs");
@@ -2268,7 +2269,8 @@ const Alert = ({
     {
       id,
       background: backgroundForTone[tone],
-      padding: "medium",
+      paddingY: "medium",
+      paddingX: "gutter",
       borderRadius: borderRadius$3,
       position: "relative",
       overflow: "hidden",
@@ -2342,8 +2344,7 @@ const Alert = ({
             boxShadow: { lightMode: borderForTone[tone] },
             visible: true
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Keyline, { tone, borderRadius: borderRadius$3 })
+        )
       ]
     }
   );
@@ -2456,10 +2457,11 @@ const FieldLabel = ({
     description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
   ] });
 };
-const tones$1 = ["neutral", "critical", "positive"];
+const tones$1 = ["neutral", "critical", "positive", "caution"];
 const icon = {
   critical: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.IconCritical, { tone: "critical" }),
-  positive: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.IconPositive, { tone: "positive" })
+  positive: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.IconPositive, { tone: "positive" }),
+  caution: /* @__PURE__ */ jsxRuntime.jsx(IconCaution, { tone: "caution" })
 };
 const FieldMessage = ({
   id,
@@ -3749,6 +3751,36 @@ const ButtonLink = React.forwardRef(
   }
 );
 ButtonLink.displayName = "ButtonLink";
+const Keyline = ({ tone, borderRadius: borderRadius2 }) => {
+  const backgroundLightness = ToastContext.useBackgroundLightness();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToastContext.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(
+        ToastContext.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 validCardComponents = [
   "div",
   "article",
@@ -3791,7 +3823,7 @@ const Card = ({
       borderRadius: resolvedRounding,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
-        tone ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Keyline, { tone, borderRadius: resolvedRounding }) : null,
+        tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: resolvedRounding }) : null,
         children
       ]
     }
@@ -7508,17 +7540,9 @@ const Tag = ({
     }
   );
 };
-const Highlight = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
-  ToastContext.Box,
-  {
-    component: "mark",
-    borderRadius: "small",
-    background: { lightMode: "criticalLight", darkMode: "critical" },
-    className: styles_lib_components_Textarea_Highlight_Highlight_css_cjs.root,
-    children
-  }
-);
-const formatRanges = (value, highlightRanges) => {
+const styleForTone = { caution: styles_lib_components_Textarea_Highlight_Highlight_css_cjs.caution, critical: styles_lib_components_Textarea_Highlight_Highlight_css_cjs.critical };
+const Highlight = ({ children, tone }) => /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: "mark", className: [styles_lib_components_Textarea_Highlight_Highlight_css_cjs.root, styleForTone[tone]], children });
+const formatRanges = (value, highlightRanges, tone) => {
   if (highlightRanges && value) {
     let lastEnd = 0;
     const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
@@ -7545,7 +7569,9 @@ const formatRanges = (value, highlightRanges) => {
       ])
     ).reduce((acc, { text, highlight }, i) => {
       if (text) {
-        acc.push(highlight ? /* @__PURE__ */ jsxRuntime.jsx(Highlight, { children: text }, i) : text);
+        acc.push(
+          highlight ? /* @__PURE__ */ jsxRuntime.jsx(Highlight, { tone, children: text }, i) : text
+        );
       }
       return acc;
     }, []);
@@ -7592,6 +7618,8 @@ const Textarea = React.forwardRef(
     lines = 3,
     lineLimit,
     grow = true,
+    tone,
+    spellCheck,
     ...restProps
   }, ref) => {
     const [rows, setRows] = React.useState(lines);
@@ -7605,13 +7633,15 @@ const Textarea = React.forwardRef(
       [highlightsRef]
     );
     const inputLength = String(value).length;
-    const excessCharactersRange = characterLimit && inputLength > characterLimit ? [{ start: characterLimit }] : [];
-    const highlightRanges = [...excessCharactersRange, ...highlightRangesProp];
+    const hasExceededCharacterLimit = characterLimit && inputLength > characterLimit;
+    const highlightTone = !hasExceededCharacterLimit && (tone === "critical" || tone === "caution") ? tone : "critical";
+    const highlightRanges = hasExceededCharacterLimit ? [{ start: characterLimit }] : highlightRangesProp;
     const hasHighlights = highlightRanges.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Field,
       {
         ...restProps,
+        tone,
         value,
         icon: void 0,
         prefix: void 0,
@@ -7642,7 +7672,7 @@ const Textarea = React.forwardRef(
                   left: 0,
                   className: [styles_lib_components_Textarea_Textarea_css_cjs.highlights, className],
                   ...fieldProps,
-                  children: formatRanges(String(value), highlightRanges)
+                  children: formatRanges(String(value), highlightRanges, highlightTone)
                 }
               ) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -7669,6 +7699,7 @@ const Textarea = React.forwardRef(
                   onPaste,
                   onScroll: hasHighlights ? (event) => updateScroll(event.currentTarget.scrollTop) : void 0,
                   placeholder: !restProps.disabled ? placeholder : void 0,
+                  spellCheck,
                   className: [styles_lib_components_Textarea_Textarea_css_cjs.field, className],
                   ...fieldProps,
                   ref