braid-design-system 32.5.0 → 32.7.0

package/dist/ToastContext.chunk.cjs

@@ -1612,6 +1612,7 @@ const Button = React.forwardRef(
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
     data,
     ...restProps
   }, ref) => {
@@ -1645,6 +1646,7 @@ const Button = React.forwardRef(
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,
         "aria-describedby": ariaDescribedBy,
+        "aria-label": ariaLabel,
         onClick,
         disabled: loading,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
@@ -1773,6 +1775,12 @@ const TooltipRenderer = ({
             offset: [0, space.small * grid]
           }
         },
+        {
+          name: "arrow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
         ...isStatic ? [
           {
             name: "flip",
@@ -2082,6 +2090,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2115,6 +2124,7 @@ const TextLinkButton = ({
       "aria-controls": ariaControls,
       "aria-expanded": ariaExpanded,
       "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel,
       id,
       className: classes,
       ...buildDataAttributes({ data, validateRestProps: restProps }),

package/dist/ToastContext.chunk.mjs

@@ -1605,6 +1605,7 @@ const Button = forwardRef(
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
     data,
     ...restProps
   }, ref) => {
@@ -1638,6 +1639,7 @@ const Button = forwardRef(
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,
         "aria-describedby": ariaDescribedBy,
+        "aria-label": ariaLabel,
         onClick,
         disabled: loading,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
@@ -1766,6 +1768,12 @@ const TooltipRenderer = ({
             offset: [0, space.small * grid]
           }
         },
+        {
+          name: "arrow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
         ...isStatic ? [
           {
             name: "flip",
@@ -2075,6 +2083,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2108,6 +2117,7 @@ const TextLinkButton = ({
       "aria-controls": ariaControls,
       "aria-expanded": ariaExpanded,
       "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel,
       id,
       className: classes,
       ...buildDataAttributes({ data, validateRestProps: restProps }),

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;
@@ -961,6 +961,37 @@ const IconMail = (props) => {
   const iconProps = ToastContext.useIcon(props);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: IconMailSvg, ...iconProps });
 };
+const IconMessageSvg = ({ 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: "M12 3a9 9 0 0 0-7.605 13.815L3 21l4.909-.982A9 9 0 1 0 12 3Z",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2
+        }
+      )
+    ]
+  }
+);
+const IconMessage = (props) => {
+  const iconProps = ToastContext.useIcon(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: IconMessageSvg, ...iconProps });
+};
 const IconMinusSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -4270,35 +4301,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,
@@ -4366,7 +4430,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]
@@ -4415,15 +4480,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,
@@ -4438,7 +4502,7 @@ const ModalContent = ({
                       }
                     )
                   }
-                ) })
+                )
               }
             )
           ]
@@ -4531,24 +4595,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) {
@@ -4615,7 +4683,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]
             ],
@@ -8163,6 +8231,7 @@ exports.IconLinkBroken = IconLinkBroken;
 exports.IconList = IconList;
 exports.IconLocation = IconLocation;
 exports.IconMail = IconMail;
+exports.IconMessage = IconMessage;
 exports.IconMinus = IconMinus;
 exports.IconMobile = IconMobile;
 exports.IconMoney = IconMoney;
@@ -8220,6 +8289,7 @@ exports.MenuRenderer = MenuRenderer;
 exports.MonthPicker = MonthPicker;
 exports.Notice = Notice;
 exports.OverflowMenu = OverflowMenu;
+exports.PageBlock = PageBlock;
 exports.Pagination = Pagination;
 exports.PasswordField = PasswordField;
 exports.Radio = Radio;