braid-design-system 32.1.1 → 32.3.0

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, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, Bleed, 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";
@@ -19,16 +19,16 @@ import { fontWeight, tone, touchableText, fontFamily, headingWeight, heading } f
 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 { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
-import { constants, bleedY } from "./styles/lib/components/Badge/Badge.css.mjs";
 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 { 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";
@@ -36,11 +36,11 @@ import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css
 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 { 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$5, 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";
@@ -2261,7 +2261,8 @@ const Alert = ({
     {
       id,
       background: backgroundForTone[tone2],
-      padding: "medium",
+      paddingY: "medium",
+      paddingX: "gutter",
       borderRadius: borderRadius$3,
       position: "relative",
       overflow: "hidden",
@@ -2335,8 +2336,7 @@ const Alert = ({
             boxShadow: { lightMode: borderForTone[tone2] },
             visible: true
           }
-        ),
-        /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: borderRadius$3 })
+        )
       ]
     }
   );
@@ -2449,10 +2449,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,
@@ -2549,7 +2550,7 @@ const Field = ({
       }
     ),
     /* @__PURE__ */ jsx(FieldOverlay, { variant: "focus", className: focusOverlay }),
-    /* @__PURE__ */ jsx(FieldOverlay, { variant: "hover", className: hoverOverlay })
+    /* @__PURE__ */ jsx(FieldOverlay, { variant: "formAccent", className: hoverOverlay })
   ] });
   const fieldPadding = "small";
   return /* @__PURE__ */ jsxs(Stack, { space: "xsmall", children: [
@@ -3026,7 +3027,6 @@ function GroupHeading({ children: children2 }) {
     Box,
     {
       paddingX: "small",
-      borderRadius: "standard",
       className: [
         groupHeading,
         touchableText.xsmall,
@@ -3590,11 +3590,12 @@ const lightModeBackgroundForTone = {
   neutral: "neutralLight",
   caution: "cautionLight"
 };
+const verticalPadding = "xxsmall";
 const Badge = forwardRef(
   ({
     tone: tone2 = "info",
     weight = "regular",
-    bleedY: bleedY$1 = false,
+    bleedY = false,
     title,
     children: children2,
     id,
@@ -3613,16 +3614,12 @@ const Badge = forwardRef(
       ),
       "Badge may only contain strings or numbers"
     );
-    return /* @__PURE__ */ jsx(
+    const content = /* @__PURE__ */ jsx(
       Box,
       {
         component: "span",
         display: "flex",
         cursor: "default",
-        className: [
-          lineHeightContainer[constants.textSize],
-          bleedY$1 ? bleedY : null
-        ],
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: /* @__PURE__ */ jsx(
           Box,
@@ -3634,23 +3631,16 @@ const Badge = forwardRef(
             "aria-describedby": ariaDescribedBy,
             title: title ?? (!ariaDescribedBy ? children2 : void 0),
             background: weight === "strong" ? tone2 : lightModeBackgroundForTone[tone2],
+            paddingY: verticalPadding,
             paddingX: "xsmall",
-            borderRadius: "large",
+            borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: constants.textSize,
-                weight: "medium",
-                truncate: true,
-                baseline: false,
-                children: children2
-              }
-            )
+            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "medium", truncate: true, children: children2 })
           }
         )
       }
     );
+    return bleedY ? /* @__PURE__ */ jsx(Bleed, { component: "span", vertical: verticalPadding, children: content }) : content;
   }
 );
 Badge.displayName = "Badge";
@@ -3693,7 +3683,7 @@ const ButtonLink = forwardRef(
     size: size2,
     tone: tone2,
     variant,
-    bleedY: bleedY2,
+    bleedY,
     bleed,
     icon: icon2,
     iconPosition,
@@ -3703,7 +3693,7 @@ const ButtonLink = forwardRef(
   }, ref) => {
     const LinkComponent = useLinkComponent(ref);
     if (process.env.NODE_ENV !== "production") {
-      if (typeof bleedY2 !== "undefined") {
+      if (typeof bleedY !== "undefined") {
         console.warn(
           dedent`
             The "bleedY" prop has been deprecated and will be removed in a future version. Use "bleed" instead.
@@ -3729,7 +3719,7 @@ const ButtonLink = forwardRef(
           variant,
           tone: tone2,
           size: size2,
-          bleed: bleed || bleedY2,
+          bleed: bleed || bleedY,
           loading
         }),
         children: [
@@ -3753,6 +3743,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",
@@ -3761,7 +3781,7 @@ const validCardComponents = [
   "main",
   "section"
 ];
-const borderRadius$2 = "xlarge";
+const borderRadius$2 = "large";
 const Card = ({
   children: children2,
   component = "div",
@@ -3889,6 +3909,7 @@ const StyledInput = forwardRef(
     const accentBackground = disabled ? "neutralLight" : "formAccent";
     const isMixed$1 = isCheckbox && checked === "mixed";
     const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
+    const defaultBorder = checked ? "formAccent" : "default";
     useEffect(() => {
       if (ref && typeof ref === "object" && ref.current && isCheckbox) {
         ref.current.indeterminate = isMixed$1;
@@ -3945,7 +3966,7 @@ const StyledInput = forwardRef(
             /* @__PURE__ */ jsx(
               FieldOverlay,
               {
-                variant: disabled ? "disabled" : "default",
+                variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
                 visible: tone2 !== "critical" || disabled
               }
@@ -3979,7 +4000,7 @@ const StyledInput = forwardRef(
             /* @__PURE__ */ jsx(
               FieldOverlay,
               {
-                variant: "hover",
+                variant: "formAccent",
                 borderRadius: fieldBorderRadius,
                 className: hoverOverlay$1,
                 children: /* @__PURE__ */ jsx(Indicator, { type, hover: true, checked: true })
@@ -4220,7 +4241,7 @@ const Heading = ({
 ) });
 const modalPadding = ["gutter", "large"];
 const ModalContentHeader = forwardRef(
-  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(Stack, { space: "medium", children: [
+  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(Stack, { space: "small", children: [
     /* @__PURE__ */ jsx(Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxs(
       Box,
       {
@@ -5183,7 +5204,7 @@ const borderRadius$1 = "large";
 function Menu({
   offsetSpace,
   align,
-  width: width$1,
+  width: width2,
   placement,
   children: children2,
   open,
@@ -5208,9 +5229,10 @@ function Menu({
       transition: "fast",
       right: align === "right" ? 0 : void 0,
       opacity: !open ? 0 : void 0,
+      overflow: "hidden",
       className: [
         !open && menuIsClosed,
-        width$1 !== "content" && width[width$1],
+        width2 !== "content" && width$1[width2],
         placement === "top" && placementBottom
       ],
       children: [
@@ -5840,7 +5862,7 @@ const paginate = ({
   }
   return Array.from(Array(pageCount).keys()).map((p) => p + minPage);
 };
-const borderRadius = "large";
+const borderRadius = "standard";
 const PageNav = ({
   label: label2,
   direction
@@ -6608,7 +6630,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);
@@ -7510,17 +7532,9 @@ const Tag = ({
     }
   );
 };
-const Highlight = ({ children: children2 }) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    component: "mark",
-    borderRadius: "standard",
-    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$5, 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 }) => {
@@ -7547,7 +7561,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;
     }, []);
@@ -7594,6 +7610,8 @@ const Textarea = forwardRef(
     lines = 3,
     lineLimit,
     grow = true,
+    tone: tone2,
+    spellCheck,
     ...restProps
   }, ref) => {
     const [rows, setRows] = useState(lines);
@@ -7607,13 +7625,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,
@@ -7644,7 +7664,7 @@ const Textarea = forwardRef(
                   left: 0,
                   className: [highlights, className],
                   ...fieldProps,
-                  children: formatRanges(String(value), highlightRanges)
+                  children: formatRanges(String(value), highlightRanges, highlightTone)
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -7671,6 +7691,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
@@ -7997,7 +8018,7 @@ const Toggle = forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: "borderField",
+                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8017,9 +8038,9 @@ const Toggle = forwardRef(
                       /* @__PURE__ */ jsx(
                         FieldOverlay,
                         {
-                          variant: "hover",
+                          variant: "formAccent",
                           borderRadius: "full",
-                          className: hoverOverlay$2
+                          className: !on ? hoverOverlay$2 : void 0
                         }
                       )
                     ]