braid-design-system 32.1.1 → 32.2.0

package/dist/ToastContext.chunk.mjs

@@ -8,12 +8,12 @@ import dedent from "dedent";
 import { base } from "./styles/lib/css/reset/reset.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/atoms.mjs";
 import { mapColorModeValue, sprinkles, mapResponsiveValue, normalizeResponsiveValue } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { lightModeTone, darkModeTone, lightModeNeutralOverride, darkModeNeutralOverride, fontFamily, fontWeight, tone, styles as styles$1, textSizeUntrimmed, touchableText } from "./styles/lib/css/typography.css.mjs";
+import { lightModeTone, darkModeTone, lightModeNeutralOverride, darkModeNeutralOverride, fontFamily, fontWeight, tone, textSizeTrimmed, textSizeUntrimmed } from "./styles/lib/css/typography.css.mjs";
 import assert from "assert";
 import { isFragment } from "react-is";
 import { base as base$1, strong, regular, lightModeWeight, darkModeWeight } from "./styles/lib/components/Divider/Divider.css.mjs";
 import { hiddenOnPrint } from "./styles/lib/components/Hidden/Hidden.css.mjs";
-import { preventCollapsePseudo, styles } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
+import { preventCollapsePseudo, top, right, bottom, left } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
 import { column, width, columnContent } from "./styles/lib/components/Column/Column.css.mjs";
 import { marginAuto } from "./styles/lib/components/ContentBlock/ContentBlock.css.mjs";
 import { truncate } from "./styles/lib/components/private/Truncate/Truncate.css.mjs";
@@ -23,12 +23,12 @@ import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$2, vi
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { size, inlineCrop, inline, alignY, cropToTextSize, blockWidths } from "./styles/lib/hooks/useIcon/icon.css.mjs";
 import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs";
-import { focusOverlay, hoverOverlay, invertedBackgroundsLightMode, invertedBackgroundsDarkMode, forceActive, activeOverlay, constants, root, standard, small, bleedVerticallyToCapHeight, loadingDot } from "./styles/lib/components/Button/Button.css.mjs";
+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, padding as padding$1, arrow } from "./styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs";
+import { verticalOffsetBeforeEntrance, translateZ0, background, maxWidth, arrow } from "./styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs";
 import { button } from "./styles/lib/components/ButtonIcon/ButtonIcon.css.mjs";
-import { noRadiusOnRight, largestWidth, tone as tone$1, lightMode, darkMode } from "./styles/lib/components/private/Keyline/Keyline.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 }) => {
@@ -455,14 +455,20 @@ const resolveResponsiveProp = (value, mobileAtoms, tabletAtoms, desktopAtoms, wi
   const wideAtom = wideAtoms[wide];
   return clsx(mobileAtom, tabletAtom, desktopAtom, wideAtom);
 };
+const directionStyles = {
+  top,
+  right,
+  bottom,
+  left
+};
 const negativeMargin = (direction, space) => space ? clsx([
   direction === "top" || direction === "bottom" ? preventCollapsePseudo[direction] : void 0,
   resolveResponsiveProp(
     space,
-    styles[direction].mobile,
-    styles[direction].tablet,
-    styles[direction].desktop,
-    styles[direction].wide
+    directionStyles[direction].mobile,
+    directionStyles[direction].tablet,
+    directionStyles[direction].desktop,
+    directionStyles[direction].wide
   )
 ]) : null;
 const alignToDisplay = {
@@ -631,7 +637,7 @@ function textStyles({
     fontFamily,
     fontWeight[weight],
     tone[tone$12],
-    styles$1[baseline ? "textSizeTrimmed" : "textSizeUntrimmed"][size2]
+    (baseline ? textSizeTrimmed : textSizeUntrimmed)[size2]
   ];
 }
 const Truncate = ({ children }) => /* @__PURE__ */ jsx(Box, { component: "span", className: truncate, children });
@@ -875,7 +881,7 @@ const Columns = ({
 const Column = ({
   children,
   data,
-  width: width$1,
+  width: width$12,
   ...restProps
 }) => {
   const {
@@ -895,11 +901,11 @@ const Column = ({
       component,
       display: component === "span" ? "block" : void 0,
       minWidth: 0,
-      width: width$1 !== "content" ? "full" : void 0,
-      flexShrink: width$1 === "content" ? 0 : void 0,
+      width: width$12 !== "content" ? "full" : void 0,
+      flexShrink: width$12 === "content" ? 0 : void 0,
       className: [
         column,
-        width$1 !== "content" ? width[width$1] : null
+        width$12 !== "content" ? width[width$12] : null
       ],
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: /* @__PURE__ */ jsx(
@@ -1188,8 +1194,8 @@ const Keyline = ({ tone: tone2, borderRadius: borderRadius2 }) => {
           component: "span",
           height: "full",
           display: "inlineBlock",
-          paddingLeft: "xxsmall",
           className: [
+            width$1,
             tone$1[tone2],
             lightMode[backgroundLightness.lightMode],
             darkMode[backgroundLightness.darkMode]
@@ -1203,7 +1209,7 @@ const boxShadowForVariant = {
   default: "borderField",
   disabled: "borderNeutralLight",
   focus: "outlineFocus",
-  hover: "borderFormAccent",
+  formAccent: "borderFormAccent",
   critical: "borderCritical"
 };
 const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsx(
@@ -1241,10 +1247,10 @@ const Bleed = ({
   space,
   horizontal,
   vertical,
-  top,
-  bottom,
-  left,
-  right,
+  top: top2,
+  bottom: bottom2,
+  left: left2,
+  right: right2,
   children,
   component = "div",
   data,
@@ -1255,10 +1261,10 @@ const Bleed = ({
     component,
     display: component === "span" ? "block" : void 0,
     className: [
-      negativeMargin("top", top || vertical || space),
-      negativeMargin("bottom", bottom || vertical || space),
-      negativeMargin("left", left || horizontal || space),
-      negativeMargin("right", right || horizontal || space)
+      negativeMargin("top", top2 || vertical || space),
+      negativeMargin("bottom", bottom2 || vertical || space),
+      negativeMargin("left", left2 || horizontal || space),
+      negativeMargin("right", right2 || horizontal || space)
     ],
     ...buildDataAttributes({ data, validateRestProps: restProps }),
     children: /* @__PURE__ */ jsx(
@@ -1406,7 +1412,7 @@ const ButtonLoader = () => /* @__PURE__ */ jsxs(Box, { "aria-hidden": true, comp
   /* @__PURE__ */ jsx(Box, { component: "span", className: loadingDot, children: "." })
 ] });
 const transparentPaddingX = "small";
-const buttonRadius = "large";
+const buttonRadius = "standard";
 const ButtonOverlays = ({
   variant = "solid",
   tone: tone2,
@@ -1473,7 +1479,6 @@ const ButtonText = ({
   iconPosition = "leading",
   variant = "solid",
   tone: tone2,
-  labelSpacing = true,
   bleed
 }) => {
   const lightness = useBackgroundLightness();
@@ -1496,9 +1501,8 @@ const ButtonText = ({
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",
-      paddingX: labelSpacing ? labelPaddingX : void 0,
-      paddingY: labelSpacing && size2 === "small" ? constants.smallButtonPaddingSize : void 0,
-      className: labelSpacing && size2 === "standard" ? touchableText.standard : void 0,
+      paddingX: labelPaddingX,
+      className: padToMinHeight,
       background: tone2 === "neutral" && variant !== "solid" ? {
         lightMode: lightness.lightMode === "light" ? "customLight" : "customDark",
         darkMode: lightness.darkMode === "light" ? "customLight" : "customDark"
@@ -1508,8 +1512,8 @@ const ButtonText = ({
         {
           tone: stylesForVariant.textTone,
           weight: "medium",
+          align: "center",
           size: size2,
-          baseline: false,
           children: [
             icon && iconPosition === "leading" ? /* @__PURE__ */ jsx(
               AvoidWidowIcon,
@@ -1676,7 +1680,7 @@ const TooltipTextDefaultsProvider = ({
     }
   );
 };
-const borderRadius$1 = "xlarge";
+const borderRadius$1 = "large";
 const TooltipContent = ({
   children,
   opacity,
@@ -1695,12 +1699,8 @@ const TooltipContent = ({
         boxShadow: "large",
         background: "customDark",
         borderRadius: borderRadius$1,
-        className: [
-          background,
-          maxWidth,
-          translateZ0,
-          padding$1
-        ],
+        padding: "small",
+        className: [background, maxWidth, translateZ0],
         children: /* @__PURE__ */ jsxs(TooltipTextDefaultsProvider, { children: [
           /* @__PURE__ */ jsx(Box, { position: "relative", zIndex: 1, children }),
           /* @__PURE__ */ jsx(
@@ -2141,7 +2141,7 @@ const toneToIcon = {
   positive: IconPositive
 };
 const toastDuration = 1e4;
-const borderRadius = "xlarge";
+const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
   const handleClick = useCallback(() => {
     removeToast();
@@ -2300,15 +2300,15 @@ const useFlipList = () => {
     Array.from(refs.entries()).forEach(([id, element]) => {
       if (element) {
         const prevTop = positions.get(id);
-        const { top, height } = element.getBoundingClientRect();
-        if (typeof prevTop === "number" && prevTop !== top) {
+        const { top: top2, height } = element.getBoundingClientRect();
+        if (typeof prevTop === "number" && prevTop !== top2) {
           animations.push({
             element,
             transition: entranceTransition,
             transforms: [
               {
                 property: "transform",
-                from: `translateY(${prevTop - top}px)`
+                from: `translateY(${prevTop - top2}px)`
               }
             ]
           });

package/dist/Toggle.chunk.cjs

@@ -20,12 +20,11 @@ const styles_lib_css_typography_css_cjs = require("./styles/lib/css/typography.c
 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 styles_lib_css_lineHeightContainer_css_cjs = require("./styles/lib/css/lineHeightContainer.css.cjs");
-const styles_lib_components_Badge_Badge_css_cjs = require("./styles/lib/components/Badge/Badge.css.cjs");
 const clsx = require("clsx");
 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_MenuItem_useMenuItem_css_cjs = require("./styles/lib/components/MenuItem/useMenuItem.css.cjs");
@@ -2557,7 +2556,7 @@ const Field = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(ToastContext.FieldOverlay, { variant: "focus", className: styles_lib_components_private_Field_Field_css_cjs.focusOverlay }),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastContext.FieldOverlay, { variant: "hover", className: styles_lib_components_private_Field_Field_css_cjs.hoverOverlay })
+    /* @__PURE__ */ jsxRuntime.jsx(ToastContext.FieldOverlay, { variant: "formAccent", className: styles_lib_components_private_Field_Field_css_cjs.hoverOverlay })
   ] });
   const fieldPadding = "small";
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space: "xsmall", children: [
@@ -3034,7 +3033,6 @@ function GroupHeading({ children }) {
     ToastContext.Box,
     {
       paddingX: "small",
-      borderRadius: "standard",
       className: [
         styles_lib_components_Autosuggest_Autosuggest_css_cjs.groupHeading,
         styles_lib_css_typography_css_cjs.touchableText.xsmall,
@@ -3598,6 +3596,7 @@ const lightModeBackgroundForTone = {
   neutral: "neutralLight",
   caution: "cautionLight"
 };
+const verticalPadding = "xxsmall";
 const Badge = React.forwardRef(
   ({
     tone = "info",
@@ -3621,16 +3620,12 @@ const Badge = React.forwardRef(
       ),
       "Badge may only contain strings or numbers"
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
       ToastContext.Box,
       {
         component: "span",
         display: "flex",
         cursor: "default",
-        className: [
-          styles_lib_css_lineHeightContainer_css_cjs.lineHeightContainer[styles_lib_components_Badge_Badge_css_cjs.constants.textSize],
-          bleedY ? styles_lib_components_Badge_Badge_css_cjs.bleedY : null
-        ],
         ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ToastContext.Box,
@@ -3642,23 +3637,16 @@ const Badge = React.forwardRef(
             "aria-describedby": ariaDescribedBy,
             title: title ?? (!ariaDescribedBy ? children : void 0),
             background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
+            paddingY: verticalPadding,
             paddingX: "xsmall",
-            borderRadius: "large",
+            borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              ToastContext.Text,
-              {
-                size: styles_lib_components_Badge_Badge_css_cjs.constants.textSize,
-                weight: "medium",
-                truncate: true,
-                baseline: false,
-                children
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { size: "xsmall", weight: "medium", truncate: true, children })
           }
         )
       }
     );
+    return bleedY ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Bleed, { component: "span", vertical: verticalPadding, children: content }) : content;
   }
 );
 Badge.displayName = "Badge";
@@ -3769,7 +3757,7 @@ const validCardComponents = [
   "main",
   "section"
 ];
-const borderRadius$2 = "xlarge";
+const borderRadius$2 = "large";
 const Card = ({
   children,
   component = "div",
@@ -3897,6 +3885,7 @@ const StyledInput = React.forwardRef(
     const accentBackground = disabled ? "neutralLight" : "formAccent";
     const isMixed = isCheckbox && checked === "mixed";
     const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
+    const defaultBorder = checked ? "formAccent" : "default";
     React.useEffect(() => {
       if (ref && typeof ref === "object" && ref.current && isCheckbox) {
         ref.current.indeterminate = isMixed;
@@ -3953,7 +3942,7 @@ const StyledInput = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.FieldOverlay,
               {
-                variant: disabled ? "disabled" : "default",
+                variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
                 visible: tone !== "critical" || disabled
               }
@@ -3987,7 +3976,7 @@ const StyledInput = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.FieldOverlay,
               {
-                variant: "hover",
+                variant: "formAccent",
                 borderRadius: fieldBorderRadius,
                 className: styles_lib_components_private_InlineField_InlineField_css_cjs.hoverOverlay,
                 children: /* @__PURE__ */ jsxRuntime.jsx(Indicator, { type, hover: true, checked: true })
@@ -4228,7 +4217,7 @@ const Heading = ({
 ) });
 const modalPadding = ["gutter", "large"];
 const ModalContentHeader = React.forwardRef(
-  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space: "medium", children: [
+  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space: "small", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
       ToastContext.Box,
       {
@@ -5216,6 +5205,7 @@ function Menu({
       transition: "fast",
       right: align === "right" ? 0 : void 0,
       opacity: !open ? 0 : void 0,
+      overflow: "hidden",
       className: [
         !open && styles_lib_components_MenuRenderer_MenuRenderer_css_cjs.menuIsClosed,
         width !== "content" && styles_lib_components_MenuRenderer_MenuRenderer_css_cjs.width[width],
@@ -5848,7 +5838,7 @@ const paginate = ({
   }
   return Array.from(Array(pageCount).keys()).map((p) => p + minPage);
 };
-const borderRadius = "large";
+const borderRadius = "standard";
 const PageNav = ({
   label,
   direction
@@ -7522,7 +7512,7 @@ const Highlight = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastContext.Box,
   {
     component: "mark",
-    borderRadius: "standard",
+    borderRadius: "small",
     background: { lightMode: "criticalLight", darkMode: "critical" },
     className: styles_lib_components_Textarea_Highlight_Highlight_css_cjs.root,
     children
@@ -8005,7 +7995,7 @@ const Toggle = React.forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: "borderField",
+                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8025,9 +8015,9 @@ const Toggle = React.forwardRef(
                       /* @__PURE__ */ jsxRuntime.jsx(
                         ToastContext.FieldOverlay,
                         {
-                          variant: "hover",
+                          variant: "formAccent",
                           borderRadius: "full",
-                          className: styles_lib_components_Toggle_Toggle_css_cjs.hoverOverlay
+                          className: !on ? styles_lib_components_Toggle_Toggle_css_cjs.hoverOverlay : void 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, 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 { 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,12 +19,11 @@ 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 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";
@@ -2549,7 +2548,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 +3025,6 @@ function GroupHeading({ children: children2 }) {
     Box,
     {
       paddingX: "small",
-      borderRadius: "standard",
       className: [
         groupHeading,
         touchableText.xsmall,
@@ -3590,11 +3588,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 +3612,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 +3629,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 +3681,7 @@ const ButtonLink = forwardRef(
     size: size2,
     tone: tone2,
     variant,
-    bleedY: bleedY2,
+    bleedY,
     bleed,
     icon: icon2,
     iconPosition,
@@ -3703,7 +3691,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 +3717,7 @@ const ButtonLink = forwardRef(
           variant,
           tone: tone2,
           size: size2,
-          bleed: bleed || bleedY2,
+          bleed: bleed || bleedY,
           loading
         }),
         children: [
@@ -3761,7 +3749,7 @@ const validCardComponents = [
   "main",
   "section"
 ];
-const borderRadius$2 = "xlarge";
+const borderRadius$2 = "large";
 const Card = ({
   children: children2,
   component = "div",
@@ -3889,6 +3877,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 +3934,7 @@ const StyledInput = forwardRef(
             /* @__PURE__ */ jsx(
               FieldOverlay,
               {
-                variant: disabled ? "disabled" : "default",
+                variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
                 visible: tone2 !== "critical" || disabled
               }
@@ -3979,7 +3968,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 +4209,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,
       {
@@ -5208,6 +5197,7 @@ 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],
@@ -5840,7 +5830,7 @@ const paginate = ({
   }
   return Array.from(Array(pageCount).keys()).map((p) => p + minPage);
 };
-const borderRadius = "large";
+const borderRadius = "standard";
 const PageNav = ({
   label: label2,
   direction
@@ -7514,7 +7504,7 @@ const Highlight = ({ children: children2 }) => /* @__PURE__ */ jsx(
   Box,
   {
     component: "mark",
-    borderRadius: "standard",
+    borderRadius: "small",
     background: { lightMode: "criticalLight", darkMode: "critical" },
     className: root$5,
     children: children2
@@ -7997,7 +7987,7 @@ const Toggle = forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: "borderField",
+                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8017,9 +8007,9 @@ const Toggle = forwardRef(
                       /* @__PURE__ */ jsx(
                         FieldOverlay,
                         {
-                          variant: "hover",
+                          variant: "formAccent",
                           borderRadius: "full",
-                          className: hoverOverlay$2
+                          className: !on ? hoverOverlay$2 : void 0
                         }
                       )
                     ]