braid-design-system 32.6.0 → 32.8.0

package/dist/ToastContext.chunk.cjs

@@ -1775,6 +1775,12 @@ const TooltipRenderer = ({
             offset: [0, space.small * grid]
           }
         },
+        {
+          name: "arrow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
         ...isStatic ? [
           {
             name: "flip",

package/dist/ToastContext.chunk.mjs

@@ -1768,6 +1768,12 @@ const TooltipRenderer = ({
             offset: [0, space.small * grid]
           }
         },
+        {
+          name: "arrow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
         ...isStatic ? [
           {
             name: "flip",

package/dist/{Toggle.chunk.cjs → index.chunk.cjs}

@@ -1,42 +1,42 @@
 "use strict";
-const ToastContext = require("./ToastContext.chunk.cjs");
 const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("./side-effects/lib/components/BraidProvider/BraidProvider.cjs");
+const ToastContext = require("./ToastContext.chunk.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const assert = require("assert");
 const React = require("react");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const styles_lib_components_icons_IconArrow_IconArrow_css_cjs = require("./styles/lib/components/icons/IconArrow/IconArrow.css.cjs");
-const styles_lib_components_icons_IconThumb_IconThumb_css_cjs = require("./styles/lib/components/icons/IconThumb/IconThumb.css.cjs");
 const styles_lib_components_Accordion_AccordionItem_css_cjs = require("./styles/lib/components/Accordion/AccordionItem.css.cjs");
+const styles_lib_components_icons_IconChevron_IconChevron_css_cjs = require("./styles/lib/components/icons/IconChevron/IconChevron.css.cjs");
 const styles_lib_components_private_hideFocusRings_hideFocusRings_css_cjs = require("./styles/lib/components/private/hideFocusRings/hideFocusRings.css.cjs");
 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/index.js");
+const styles_lib_css_typography_css_cjs = require("./styles/lib/css/typography.css.cjs");
 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 clsx = require("clsx");
+const styles_lib_components_private_Field_Field_css_cjs = require("./styles/lib/components/private/Field/Field.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/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 styles_lib_components_private_InlineField_InlineField_css_cjs = require("./styles/lib/components/private/InlineField/InlineField.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_components_Dropdown_Dropdown_css_cjs = require("./styles/lib/components/Dropdown/Dropdown.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_MenuItem_useMenuItem_css_cjs = require("./styles/lib/components/MenuItem/useMenuItem.css.cjs");
+const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.cjs");
 const styles_lib_components_OverflowMenu_OverflowMenu_css_cjs = require("./styles/lib/components/OverflowMenu/OverflowMenu.css.cjs");
 const isMobile = require("is-mobile");
-const styles_lib_components_Dropdown_Dropdown_css_cjs = require("./styles/lib/components/Dropdown/Dropdown.css.cjs");
 const styles_lib_components_MonthPicker_MonthPicker_css_cjs = require("./styles/lib/components/MonthPicker/MonthPicker.css.cjs");
 const styles_lib_components_Pagination_Pagination_css_cjs = require("./styles/lib/components/Pagination/Pagination.css.cjs");
-const styles_lib_components_private_InlineField_InlineField_css_cjs = require("./styles/lib/components/private/InlineField/InlineField.css.cjs");
 const styles_lib_components_Rating_Rating_css_cjs = require("./styles/lib/components/Rating/Rating.css.cjs");
 const styles_lib_components_Stepper_Stepper_css_cjs = require("./styles/lib/components/Stepper/Stepper.css.cjs");
 const styles_lib_components_Tabs_Tabs_css_cjs = require("./styles/lib/components/Tabs/Tabs.css.cjs");
@@ -45,16 +45,16 @@ const styles_lib_components_Tag_Tag_css_cjs = require("./styles/lib/components/T
 const styles_lib_components_Textarea_Highlight_Highlight_css_cjs = require("./styles/lib/components/Textarea/Highlight/Highlight.css.cjs");
 const styles_lib_components_Textarea_Textarea_css_cjs = require("./styles/lib/components/Textarea/Textarea.css.cjs");
 const styles_lib_components_TextDropdown_TextDropdown_css_cjs = require("./styles/lib/components/TextDropdown/TextDropdown.css.cjs");
-const styles_lib_components_icons_IconChevron_IconChevron_css_cjs = require("./styles/lib/components/icons/IconChevron/IconChevron.css.cjs");
-const styles_lib_components_private_Field_Field_css_cjs = require("./styles/lib/components/private/Field/Field.css.cjs");
 const styles_lib_components_Tiles_Tiles_css_cjs = require("./styles/lib/components/Tiles/Tiles.css.cjs");
 const styles_lib_components_Toggle_Toggle_css_cjs = require("./styles/lib/components/Toggle/Toggle.css.cjs");
+const styles_lib_components_icons_IconArrow_IconArrow_css_cjs = require("./styles/lib/components/icons/IconArrow/IconArrow.css.cjs");
+const styles_lib_components_icons_IconThumb_IconThumb_css_cjs = require("./styles/lib/components/icons/IconThumb/IconThumb.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const parseHighlights__default = /* @__PURE__ */ _interopDefaultCompat(parseHighlights);
-const matchHighlights__default = /* @__PURE__ */ _interopDefaultCompat(matchHighlights);
 const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const matchHighlights__default = /* @__PURE__ */ _interopDefaultCompat(matchHighlights);
 const FocusLock__default = /* @__PURE__ */ _interopDefaultCompat(FocusLock);
 const ThemeNameConsumer = ({ children }) => children(ToastContext.useThemeName());
 const useColor = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().color;
@@ -578,6 +578,54 @@ const IconEducation = (props) => {
   const iconProps = ToastContext.useIcon(props);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: IconEducationSvg, ...iconProps });
 };
+const IconEnlargeSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    focusable: "false",
+    fill: "currentColor",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.923 4.618A.999.999 0 0 0 19 4h-4a1 1 0 1 0 0 2h1.586l-3.293 3.293a1 1 0 1 0 1.414 1.414L18 7.414V9a1 1 0 1 0 2 0V5c0-.13-.026-.26-.077-.382Zm-10.63 8.675L6 16.586V15a1 1 0 1 0-2 0v4a1 1 0 0 0 .618.923A1 1 0 0 0 5 20h4a1 1 0 1 0 0-2H7.414l3.293-3.293a1 1 0 1 0-1.414-1.414Z" })
+    ]
+  }
+);
+const IconEnlargeActiveSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    focusable: "false",
+    fill: "currentColor",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.382 13.077A1 1 0 0 0 10 13H6a1 1 0 1 0 0 2h1.586l-3.293 3.293a1 1 0 1 0 1.414 1.414L9 16.414V18a1 1 0 1 0 2 0v-4a.999.999 0 0 0-.618-.923Zm9.325-8.784a1 1 0 0 0-1.414 0L15 7.586V6a1 1 0 1 0-2 0v4a1 1 0 0 0 .618.923A1 1 0 0 0 14 11h4a1 1 0 1 0 0-2h-1.586l3.293-3.293a1 1 0 0 0 0-1.414Z" })
+    ]
+  }
+);
+const IconEnlarge = ({ active = false, ...props }) => {
+  const iconProps = ToastContext.useIcon(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToastContext.Box,
+    {
+      component: active ? IconEnlargeActiveSvg : IconEnlargeSvg,
+      ...iconProps
+    }
+  );
+};
 const IconFilterSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -4301,35 +4349,68 @@ const Heading = ({
     ]
   }
 ) });
-const modalPadding = ["gutter", "large"];
+const validPageBlockComponents = [
+  "div",
+  "article",
+  "aside",
+  "main",
+  "section",
+  "nav"
+];
+const gutters = { mobile: "xsmall", tablet: "gutter" };
+const PageBlock = ({
+  children,
+  width = "large",
+  component: componentProp,
+  data,
+  ...restProps
+}) => {
+  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToastContext.Box,
+    {
+      component,
+      paddingX: gutters,
+      ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.ContentBlock, { width, children })
+    }
+  );
+};
+const modalPadding = { mobile: "gutter", tablet: "large" };
 const ModalContentHeader = React.forwardRef(
-  ({ 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,
-      {
-        ref,
-        component: "span",
-        tabIndex: -1,
-        outline: "none",
-        position: "relative",
-        className: styles_lib_components_private_Modal_Modal_css_cjs.headingRoot,
-        children: [
-          title,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ToastContext.Overlay,
-            {
-              boxShadow: "outlineFocus",
-              borderRadius: "standard",
-              transition: "fast",
-              className: styles_lib_components_private_Modal_Modal_css_cjs.headingFocus,
-              onlyVisibleForKeyboardNavigation: true
-            }
-          )
-        ]
-      }
-    ) }),
-    description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { id: descriptionId, children: description }) : null
-  ] })
+  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ToastContext.Stack,
+    {
+      space: headingLevel === "2" ? { mobile: "small", tablet: "medium" } : "small",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ToastContext.Box,
+          {
+            ref,
+            component: "span",
+            tabIndex: -1,
+            outline: "none",
+            position: "relative",
+            className: styles_lib_components_private_Modal_Modal_css_cjs.headingRoot,
+            children: [
+              title,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToastContext.Overlay,
+                {
+                  boxShadow: "outlineFocus",
+                  borderRadius: "standard",
+                  transition: "fast",
+                  className: styles_lib_components_private_Modal_Modal_css_cjs.headingFocus,
+                  onlyVisibleForKeyboardNavigation: true
+                }
+              )
+            ]
+          }
+        ) }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { id: descriptionId, children: description }) : null
+      ]
+    }
+  )
 );
 const ModalContent = ({
   id,
@@ -4397,7 +4478,8 @@ const ModalContent = ({
                 boxShadow: "large",
                 width: width !== "content" ? "full" : void 0,
                 height: position === "right" || position === "left" ? "full" : void 0,
-                padding: modalPadding,
+                paddingY: modalPadding,
+                paddingX: position !== "center" ? gutters : modalPadding,
                 className: [
                   styles_lib_components_private_Modal_Modal_css_cjs.pointerEventsAll,
                   position === "center" && styles_lib_components_private_Modal_Modal_css_cjs.maxSize[position]
@@ -4446,15 +4528,14 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: modalPadding,
+                paddingRight: position !== "center" ? gutters : modalPadding,
                 className: position === "center" && styles_lib_components_private_Modal_Modal_css_cjs.maxSize[position],
-                children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Bleed, { space: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(
                   ToastContext.Box,
                   {
                     position: "relative",
                     background: "surface",
                     borderRadius: "full",
-                    padding: "xsmall",
                     className: [styles_lib_components_private_Modal_Modal_css_cjs.closeIconOffset, styles_lib_components_private_Modal_Modal_css_cjs.pointerEventsAll],
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       ToastContext.ButtonIcon,
@@ -4469,7 +4550,7 @@ const ModalContent = ({
                       }
                     )
                   }
-                ) })
+                )
               }
             )
           ]
@@ -4562,24 +4643,28 @@ const Modal = ({
   const closeHandlerRef = React.useRef(onClose);
   const initiateClose = () => {
     if (allowClose) {
-      dispatch(CLOSE_MODAL);
+      const result = closeHandlerRef.current(false);
+      if (result === false) {
+        return result;
+      }
+      if (openRef.current) {
+        dispatch(CLOSE_MODAL);
+      }
     }
   };
   React.useEffect(() => {
     openRef.current = open;
     dispatch(open ? OPEN_MODAL : CLOSE_MODAL);
   }, [open]);
+  const closing = state === CLOSING;
   React.useEffect(() => {
-    if (state === CLOSING) {
+    if (closing) {
       const timer = setTimeout(() => {
         dispatch(ANIMATION_COMPLETE);
       }, ANIMATION_DURATION);
       return () => clearTimeout(timer);
     }
-    if (state === CLOSED && openRef.current) {
-      closeHandlerRef.current(false);
-    }
-  }, [state]);
+  }, [closing]);
   const shouldAriaHideOthers = state === OPEN || state === CLOSING;
   React.useEffect(() => {
     if (shouldAriaHideOthers && modalRef.current) {
@@ -4646,7 +4731,7 @@ const Modal = ({
             padding: position === "center" ? styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter : void 0,
             className: [
               styles_lib_components_private_Modal_Modal_css_cjs.modalContainer,
-              position === "left" || position === "right" && styles_lib_components_private_Modal_Modal_css_cjs.horiztontalTransition,
+              (position === "left" || position === "right") && styles_lib_components_private_Modal_Modal_css_cjs.horiztontalTransition,
               state === OPENING && styles_lib_components_private_Modal_Modal_css_cjs.entrance[position],
               state === CLOSING && position in styles_lib_components_private_Modal_Modal_css_cjs.exit && styles_lib_components_private_Modal_Modal_css_cjs.exit[position]
             ],
@@ -5907,33 +5992,6 @@ const Notice = ({
     }
   );
 };
-const validPageBlockComponents = [
-  "div",
-  "article",
-  "aside",
-  "main",
-  "section",
-  "nav"
-];
-const gutters = { mobile: "xsmall", tablet: "gutter" };
-const PageBlock = ({
-  children,
-  width = "large",
-  component: componentProp,
-  data,
-  ...restProps
-}) => {
-  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToastContext.Box,
-    {
-      component,
-      paddingX: gutters,
-      ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.ContentBlock, { width, children })
-    }
-  );
-};
 const paginate = ({
   page,
   total,
@@ -8205,6 +8263,7 @@ exports.IconDocumentBroken = IconDocumentBroken;
 exports.IconDownload = IconDownload;
 exports.IconEdit = IconEdit;
 exports.IconEducation = IconEducation;
+exports.IconEnlarge = IconEnlarge;
 exports.IconFilter = IconFilter;
 exports.IconFlag = IconFlag;
 exports.IconGrid = IconGrid;