braid-design-system 32.2.0 → 32.3.1

package/dist/Toggle.chunk.cjs

@@ -21,12 +21,14 @@ 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");
 const styles_lib_css_lineHeightContainer_css_cjs = require("./styles/lib/css/lineHeightContainer.css.cjs");
 const styles_lib_components_List_List_css_cjs = require("./styles/lib/components/List/List.css.cjs");
 const styles_lib_components_Loader_Loader_css_cjs = require("./styles/lib/components/Loader/Loader.css.cjs");
+const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.cjs");
 const styles_lib_components_MenuItem_useMenuItem_css_cjs = require("./styles/lib/components/MenuItem/useMenuItem.css.cjs");
 const styles_lib_components_MenuRenderer_MenuRenderer_css_cjs = require("./styles/lib/components/MenuRenderer/MenuRenderer.css.cjs");
 const styles_lib_components_OverflowMenu_OverflowMenu_css_cjs = require("./styles/lib/components/OverflowMenu/OverflowMenu.css.cjs");
@@ -2268,7 +2270,8 @@ const Alert = ({
     {
       id,
       background: backgroundForTone[tone],
-      padding: "medium",
+      paddingY: "medium",
+      paddingX: "gutter",
       borderRadius: borderRadius$3,
       position: "relative",
       overflow: "hidden",
@@ -2342,8 +2345,7 @@ const Alert = ({
             boxShadow: { lightMode: borderForTone[tone] },
             visible: true
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Keyline, { tone, borderRadius: borderRadius$3 })
+        )
       ]
     }
   );
@@ -2456,10 +2458,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 +3752,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 +3824,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
       ]
     }
@@ -3914,7 +3947,7 @@ const StyledInput = React.forwardRef(
           zIndex: 1,
           className: [
             styles_lib_components_private_InlineField_InlineField_css_cjs.realField,
-            styles_lib_components_private_InlineField_InlineField_css_cjs.realFieldPosition[size],
+            styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size],
             isMixed ? styles_lib_components_private_InlineField_InlineField_css_cjs.isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3935,7 +3968,7 @@ const StyledInput = React.forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.fakeFieldSize[size]],
+          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4015,7 +4048,14 @@ const InlineField = React.forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", zIndex: 0, className: styles_lib_components_private_InlineField_InlineField_css_cjs.root, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { display: "flex", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           StyledInput,
@@ -4042,7 +4082,7 @@ const InlineField = React.forwardRef(
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: [styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size], styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset], children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -4051,7 +4091,7 @@ const InlineField = React.forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset[size], ToastContext.virtualTouchable()],
+                className: ToastContext.virtualTouchable(),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ToastContext.Text,
                   {
@@ -4063,12 +4103,13 @@ const InlineField = React.forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: styles_lib_components_private_InlineField_InlineField_css_cjs.badgeOffset[size], children: badge }) : null
-          ] }),
+            badge ? React.cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingTop: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", size, id: descriptionId, children: description }) }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx(
             ToastContext.Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: styles_lib_components_private_InlineField_InlineField_css_cjs.children,
@@ -5467,7 +5508,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: ToastContext.iconSize(),
+            className: styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -5758,7 +5799,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "small", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
       Dropdown,
       {
@@ -7508,17 +7549,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 +7578,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 +7627,8 @@ const Textarea = React.forwardRef(
     lines = 3,
     lineLimit,
     grow = true,
+    tone,
+    spellCheck,
     ...restProps
   }, ref) => {
     const [rows, setRows] = React.useState(lines);
@@ -7605,13 +7642,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 +7681,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 +7708,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

package/dist/Toggle.chunk.mjs

@@ -1,4 +1,4 @@
-import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, Keyline, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp, useBackgroundLightness } from "./ToastContext.chunk.mjs";
+import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, useBackgroundLightness, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
 import { useBraidTheme, useLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import assert from "assert";
@@ -20,32 +20,34 @@ import { RemoveScroll } from "react-remove-scroll";
 import { backdrop, backdropVisible, menu, groupHeading } from "./styles/lib/components/Autosuggest/Autosuggest.css.mjs";
 import matchHighlights from "autosuggest-highlight/match/index.js";
 import clsx from "clsx";
+import { noRadiusOnRight, largestWidth, width, tone as tone$1, lightMode, darkMode } from "./styles/lib/components/private/Keyline/Keyline.css.mjs";
 import FocusLock from "react-focus-lock";
 import { externalGutter } from "./styles/lib/components/private/Modal/ModalExternalGutter.mjs";
 import { headingRoot, headingFocus, pointerEventsAll, maxSize, closeIconOffset, resetStackingContext, backdrop as backdrop$1, horiztontalTransition, modalContainer, entrance, exit, fixedStackingContext } from "./styles/lib/components/private/Modal/Modal.css.mjs";
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { currentColor, size, minCharacterWidth, trimGutter } from "./styles/lib/components/List/List.css.mjs";
 import { rootSize, delay, size as size$1, currentColor as currentColor$1, circle } from "./styles/lib/components/Loader/Loader.css.mjs";
+import { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.mjs";
 import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.css.mjs";
-import { backdrop as backdrop$2, menuIsClosed, width, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
+import { backdrop as backdrop$2, menuIsClosed, width as width$1, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
 import { triggerOffset } from "./styles/lib/components/OverflowMenu/OverflowMenu.css.mjs";
 import { isMobile } from "is-mobile";
 import { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.css.mjs";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
-import { realField, realFieldPosition, isMixed, fakeField, fakeFieldSize, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, root as root$4, labelOffset, badgeOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
+import { realField, sizeVars, isMixed, fakeField, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
 import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./styles/lib/components/Rating/Rating.css.mjs";
-import { step, tone as tone$1, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
+import { step, tone as tone$2, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
 import { tab, cropToIconX, hoveredTab, tabFocusRing, scroll as scroll$1, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth, tabPanel, tabPanelFocusRing } from "./styles/lib/components/Tabs/Tabs.css.mjs";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { clearGutter } from "./styles/lib/components/Tag/Tag.css.mjs";
-import { root as root$5 } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
+import { root as root$4, caution, critical } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
 import { highlights, field as field$2 } from "./styles/lib/components/Textarea/Textarea.css.mjs";
 import { select, focusOverlay as focusOverlay$3 } from "./styles/lib/components/TextDropdown/TextDropdown.css.mjs";
 import { root as root$1, up, left, right } from "./styles/lib/components/icons/IconChevron/IconChevron.css.mjs";
 import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./styles/lib/components/Tiles/Tiles.css.mjs";
-import { root as root$6, realField as realField$1, realFieldPosition as realFieldPosition$1, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
+import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -2260,7 +2262,8 @@ const Alert = ({
     {
       id,
       background: backgroundForTone[tone2],
-      padding: "medium",
+      paddingY: "medium",
+      paddingX: "gutter",
       borderRadius: borderRadius$3,
       position: "relative",
       overflow: "hidden",
@@ -2334,8 +2337,7 @@ const Alert = ({
             boxShadow: { lightMode: borderForTone[tone2] },
             visible: true
           }
-        ),
-        /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: borderRadius$3 })
+        )
       ]
     }
   );
@@ -2448,10 +2450,11 @@ const FieldLabel = ({
     description ? /* @__PURE__ */ jsx(Box, { paddingTop: label2 ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsx(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__ */ jsx(IconCritical, { tone: "critical" }),
-  positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" })
+  positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" }),
+  caution: /* @__PURE__ */ jsx(IconCaution, { tone: "caution" })
 };
 const FieldMessage = ({
   id,
@@ -3741,6 +3744,36 @@ const ButtonLink = forwardRef(
   }
 );
 ButtonLink.displayName = "ButtonLink";
+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,
+            tone$1[tone2],
+            lightMode[backgroundLightness.lightMode],
+            darkMode[backgroundLightness.darkMode]
+          ]
+        }
+      )
+    }
+  );
+};
 const validCardComponents = [
   "div",
   "article",
@@ -3906,7 +3939,7 @@ const StyledInput = forwardRef(
           zIndex: 1,
           className: [
             realField,
-            realFieldPosition[size2],
+            sizeVars[size2],
             isMixed$1 ? isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3927,7 +3960,7 @@ const StyledInput = forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [fakeField, fakeFieldSize[size2]],
+          className: [fakeField, sizeVars[size2]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4007,7 +4040,14 @@ const InlineField = forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxs(Box, { position: "relative", zIndex: 0, className: root$4, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
         /* @__PURE__ */ jsx(
           StyledInput,
@@ -4034,7 +4074,7 @@ const InlineField = forwardRef(
           }
         ),
         /* @__PURE__ */ jsxs(Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxs(Inline, { space: "small", children: [
+          /* @__PURE__ */ jsx(Box, { className: [sizeVars[size2], labelOffset], children: /* @__PURE__ */ jsxs(Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsx(
               Box,
               {
@@ -4043,7 +4083,7 @@ const InlineField = forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [labelOffset[size2], virtualTouchable()],
+                className: virtualTouchable(),
                 children: /* @__PURE__ */ jsx(
                   Text,
                   {
@@ -4055,12 +4095,13 @@ const InlineField = forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsx(Box, { className: badgeOffset[size2], children: badge }) : null
-          ] }),
+            badge ? cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsx(Box, { paddingTop: "small", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", size: size2, id: descriptionId, children: description }) }) : null,
           children$1 ? /* @__PURE__ */ jsx(
             Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: children,
@@ -5172,7 +5213,7 @@ const borderRadius$1 = "large";
 function Menu({
   offsetSpace,
   align,
-  width: width$1,
+  width: width2,
   placement,
   children: children2,
   open,
@@ -5200,7 +5241,7 @@ function Menu({
       overflow: "hidden",
       className: [
         !open && menuIsClosed,
-        width$1 !== "content" && width[width$1],
+        width2 !== "content" && width$1[width2],
         placement === "top" && placementBottom
       ],
       children: [
@@ -5459,7 +5500,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: iconSize(),
+            className: checkboxSize,
             children: /* @__PURE__ */ jsx(
               Box,
               {
@@ -5750,7 +5791,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "small", children: [
     /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
       Dropdown,
       {
@@ -6598,7 +6639,7 @@ const Step = ({ complete: complete2 = false, id, children: children2 }) => {
       cursor: interactable ? "pointer" : void 0,
       pointerEvents: !interactable && !active2 ? "none" : void 0,
       "aria-current": active2 ? "step" : void 0,
-      className: [step, tone$1[tone2]],
+      className: [step, tone$2[tone2]],
       onClick: interactable ? () => {
         if (onClick) {
           onClick(stepNumber);
@@ -7500,17 +7541,9 @@ const Tag = ({
     }
   );
 };
-const Highlight = ({ children: children2 }) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    component: "mark",
-    borderRadius: "small",
-    background: { lightMode: "criticalLight", darkMode: "critical" },
-    className: root$5,
-    children: children2
-  }
-);
-const formatRanges = (value, highlightRanges) => {
+const styleForTone = { caution, critical };
+const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$4, styleForTone[tone2]], children: children2 });
+const formatRanges = (value, highlightRanges, tone2) => {
   if (highlightRanges && value) {
     let lastEnd = 0;
     const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
@@ -7537,7 +7570,9 @@ const formatRanges = (value, highlightRanges) => {
       ])
     ).reduce((acc, { text, highlight: highlight2 }, i) => {
       if (text) {
-        acc.push(highlight2 ? /* @__PURE__ */ jsx(Highlight, { children: text }, i) : text);
+        acc.push(
+          highlight2 ? /* @__PURE__ */ jsx(Highlight, { tone: tone2, children: text }, i) : text
+        );
       }
       return acc;
     }, []);
@@ -7584,6 +7619,8 @@ const Textarea = forwardRef(
     lines = 3,
     lineLimit,
     grow = true,
+    tone: tone2,
+    spellCheck,
     ...restProps
   }, ref) => {
     const [rows, setRows] = useState(lines);
@@ -7597,13 +7634,15 @@ const Textarea = 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 && (tone2 === "critical" || tone2 === "caution") ? tone2 : "critical";
+    const highlightRanges = hasExceededCharacterLimit ? [{ start: characterLimit }] : highlightRangesProp;
     const hasHighlights = highlightRanges.length > 0;
     return /* @__PURE__ */ jsx(
       Field,
       {
         ...restProps,
+        tone: tone2,
         value,
         icon: void 0,
         prefix: void 0,
@@ -7634,7 +7673,7 @@ const Textarea = forwardRef(
                   left: 0,
                   className: [highlights, className],
                   ...fieldProps,
-                  children: formatRanges(String(value), highlightRanges)
+                  children: formatRanges(String(value), highlightRanges, highlightTone)
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -7661,6 +7700,7 @@ const Textarea = forwardRef(
                   onPaste,
                   onScroll: hasHighlights ? (event) => updateScroll(event.currentTarget.scrollTop) : void 0,
                   placeholder: !restProps.disabled ? placeholder : void 0,
+                  spellCheck,
                   className: [field$2, className],
                   ...fieldProps,
                   ref
@@ -7920,7 +7960,7 @@ const Toggle = forwardRef(
         zIndex: 0,
         display: "flex",
         flexDirection: align === "left" ? void 0 : "rowReverse",
-        className: root$6,
+        className: root$5,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: [
           /* @__PURE__ */ jsx(
@@ -7937,7 +7977,7 @@ const Toggle = forwardRef(
               opacity: 0,
               className: [
                 realField$1,
-                realFieldPosition$1[size2],
+                realFieldPosition[size2],
                 fieldSize[size2]
               ],
               ref: forwardedRef

package/dist/reset.d.ts

@@ -754,6 +754,20 @@ declare const colorAtomicProperties: {
                         darkMode: string;
                     };
                 };
+                borderBrandAccent: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                borderBrandAccentLight: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
                 borderBrandAccentLarge: {
                     defaultClass: string;
                     conditions: {
@@ -2280,9 +2294,9 @@ declare const sprinkles: ((props: {
         lightMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
         darkMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
     }) | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
-        lightMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-        darkMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
+    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
+        lightMode?: "small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
+        darkMode?: "small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
     }) | undefined;
 }) => string) & {
     properties: Set<"background" | "borderRadius" | "transition" | "transform" | "alignItems" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "inset" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textAlign" | "top" | "userSelect" | "width" | "zIndex" | "margin" | "outline" | "overflow" | "padding" | "paddingY" | "paddingX" | "marginY" | "marginX">;
@@ -2626,6 +2640,8 @@ interface Atoms extends Sprinkles {
 }
 
 declare const boxShadow: {
+    borderBrandAccent: string;
+    borderBrandAccentLight: string;
     borderBrandAccentLarge: string;
     borderBrandAccentLightLarge: string;
     borderCaution: string;
@@ -2866,7 +2882,7 @@ interface FieldLabelProps {
 }
 declare const FieldLabel$1: ({ id, htmlFor, label, disabled, secondaryLabel, tertiaryLabel, description, descriptionId, data, }: FieldLabelProps) => JSX.Element | null;
 
-declare const tones$1: readonly ["neutral", "critical", "positive"];
+declare const tones$1: readonly ["neutral", "critical", "positive", "caution"];
 type FieldTone = (typeof tones$1)[number];
 interface FieldMessageProps {
     id: string;
@@ -3515,6 +3531,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
     onChange: (event: FormEvent<HTMLInputElement>) => void;
     name?: string;
     size?: InlineFieldProps['size'];
+    tone?: Extract<FieldGroupBaseProps['tone'], 'critical' | 'positive' | 'neutral'>;
 };
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
@@ -3658,6 +3675,7 @@ type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMe
     onFocus?: NativeTextareaProps['onFocus'];
     onPaste?: NativeTextareaProps['onPaste'];
     placeholder?: NativeTextareaProps['placeholder'];
+    spellCheck?: NativeTextareaProps['spellCheck'];
     highlightRanges?: Array<{
         start: number;
         end?: number;