braid-design-system 32.1.0 → 32.2.0

package/dist/Toggle.chunk.cjs

@@ -12,20 +12,19 @@ const styles_lib_components_private_hideFocusRings_hideFocusRings_css_cjs = requ
 const styles_lib_css_textAlignedToIcon_css_cjs = require("./styles/lib/css/textAlignedToIcon.css.cjs");
 const styles_lib_components_Alert_Alert_css_cjs = require("./styles/lib/components/Alert/Alert.css.cjs");
 const dedent = require("dedent");
-const parseHighlights = require("autosuggest-highlight/parse");
+const parseHighlights = require("autosuggest-highlight/parse/index.js");
 const styles_lib_components_HiddenVisually_HiddenVisually_css_cjs = require("./styles/lib/components/HiddenVisually/HiddenVisually.css.cjs");
 const reactDom = require("react-dom");
 const styles_lib_css_atoms_atoms_cjs = require("./styles/lib/css/atoms/atoms.cjs");
 const styles_lib_css_typography_css_cjs = require("./styles/lib/css/typography.css.cjs");
 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");
-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 matchHighlights = require("autosuggest-highlight/match/index.js");
 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],
@@ -5664,7 +5654,7 @@ const getYears = (min, max, ascending) => [...new Array(max - min + 1)].map((_v,
   const yearStr = String(ascending ? i + min : max - i);
   return /* @__PURE__ */ jsxRuntime.jsx("option", { value: yearStr, children: yearStr }, yearStr);
 });
-const currYear = new Date().getFullYear();
+const currYear = (/* @__PURE__ */ new Date()).getFullYear();
 const renderNativeInput = isMobile.isMobile({ tablet: true });
 const customValueToString = ({ month, year }) => month && year ? `${year}-${month < 10 ? "0" : ""}${month}` : void 0;
 const stringToCustomValue = (value) => {
@@ -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
                         }
                       )
                     ]