braid-design-system 32.6.0 → 32.7.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;
@@ -4301,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,
@@ -4397,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]
@@ -4446,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,
@@ -4469,7 +4502,7 @@ const ModalContent = ({
                       }
                     )
                   }
-                ) })
+                )
               }
             )
           ]
@@ -4562,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) {
@@ -4646,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]
             ],
@@ -5907,33 +5944,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,

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

@@ -1,41 +1,41 @@
-import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, useBackgroundLightness, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, ContentBlock, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
 import { useBraidTheme, useLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
+import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, useBackgroundLightness, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, ContentBlock, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import assert from "assert";
 import { createContext, useMemo, useState, useContext, cloneElement, useEffect, Fragment, forwardRef, useCallback, useRef, useReducer, Children, createRef } from "react";
 import { normalizeResponsiveValue, mapResponsiveValue } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { root, rotate, flip, mirror } from "./styles/lib/components/icons/IconArrow/IconArrow.css.mjs";
-import { root as root$2, down } from "./styles/lib/components/icons/IconThumb/IconThumb.css.mjs";
 import { button, focusRing } from "./styles/lib/components/Accordion/AccordionItem.css.mjs";
+import { root as root$1, up, left, right } from "./styles/lib/components/icons/IconChevron/IconChevron.css.mjs";
 import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs";
 import { textAlignedToIcon } from "./styles/lib/css/textAlignedToIcon.css.mjs";
 import { closeButton, closeButtonFocus, closeButtonHover } from "./styles/lib/components/Alert/Alert.css.mjs";
 import dedent from "dedent";
 import parseHighlights from "autosuggest-highlight/parse/index.js";
+import { fontWeight, tone, touchableText, fontFamily, headingWeight, heading } from "./styles/lib/css/typography.css.mjs";
 import { root as root$3 } from "./styles/lib/components/HiddenVisually/HiddenVisually.css.mjs";
 import { createPortal } from "react-dom";
 import { atoms } from "./styles/lib/css/atoms/atoms.mjs";
-import { fontWeight, tone, touchableText, fontFamily, headingWeight, heading } from "./styles/lib/css/typography.css.mjs";
+import clsx from "clsx";
+import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 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 clsx from "clsx";
 import { noRadiusOnRight, largestWidth, width, tone as tone$1, lightMode, darkMode } from "./styles/lib/components/private/Keyline/Keyline.css.mjs";
+import { realField, sizeVars, isMixed, fakeField, hideBorderOnDarkBackgroundInLightMode as hideBorderOnDarkBackgroundInLightMode$1, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.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 { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.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 { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.mjs";
-import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.css.mjs";
 import { backdrop as backdrop$2, menuIsClosed, width as width$1, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
+import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.css.mjs";
+import { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.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";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
-import { realField, sizeVars, isMixed, fakeField, hideBorderOnDarkBackgroundInLightMode as hideBorderOnDarkBackgroundInLightMode$1, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, 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$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";
@@ -44,10 +44,10 @@ import { clearGutter } from "./styles/lib/components/Tag/Tag.css.mjs";
 import { root as root$4, 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";
-import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./styles/lib/components/Tiles/Tiles.css.mjs";
 import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, hideBorderOnDarkBackgroundInLightMode as hideBorderOnDarkBackgroundInLightMode$2, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
+import { root, rotate, flip, mirror } from "./styles/lib/components/icons/IconArrow/IconArrow.css.mjs";
+import { root as root$2, down } from "./styles/lib/components/icons/IconThumb/IconThumb.css.mjs";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -4293,35 +4293,68 @@ const Heading = ({
     ]
   }
 ) });
-const modalPadding = ["gutter", "large"];
+const validPageBlockComponents = [
+  "div",
+  "article",
+  "aside",
+  "main",
+  "section",
+  "nav"
+];
+const gutters = { mobile: "xsmall", tablet: "gutter" };
+const PageBlock = ({
+  children: children2,
+  width: width2 = "large",
+  component: componentProp,
+  data,
+  ...restProps
+}) => {
+  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component,
+      paddingX: gutters,
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsx(ContentBlock, { width: width2, children: children2 })
+    }
+  );
+};
+const modalPadding = { mobile: "gutter", tablet: "large" };
 const ModalContentHeader = forwardRef(
-  ({ 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,
-      {
-        ref,
-        component: "span",
-        tabIndex: -1,
-        outline: "none",
-        position: "relative",
-        className: headingRoot,
-        children: [
-          title,
-          /* @__PURE__ */ jsx(
-            Overlay,
-            {
-              boxShadow: "outlineFocus",
-              borderRadius: "standard",
-              transition: "fast",
-              className: headingFocus,
-              onlyVisibleForKeyboardNavigation: true
-            }
-          )
-        ]
-      }
-    ) }),
-    description ? /* @__PURE__ */ jsx(Box, { id: descriptionId, children: description }) : null
-  ] })
+  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      space: headingLevel === "2" ? { mobile: "small", tablet: "medium" } : "small",
+      children: [
+        /* @__PURE__ */ jsx(Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            ref,
+            component: "span",
+            tabIndex: -1,
+            outline: "none",
+            position: "relative",
+            className: headingRoot,
+            children: [
+              title,
+              /* @__PURE__ */ jsx(
+                Overlay,
+                {
+                  boxShadow: "outlineFocus",
+                  borderRadius: "standard",
+                  transition: "fast",
+                  className: headingFocus,
+                  onlyVisibleForKeyboardNavigation: true
+                }
+              )
+            ]
+          }
+        ) }),
+        description ? /* @__PURE__ */ jsx(Box, { id: descriptionId, children: description }) : null
+      ]
+    }
+  )
 );
 const ModalContent = ({
   id,
@@ -4389,7 +4422,8 @@ const ModalContent = ({
                 boxShadow: "large",
                 width: width2 !== "content" ? "full" : void 0,
                 height: position === "right" || position === "left" ? "full" : void 0,
-                padding: modalPadding,
+                paddingY: modalPadding,
+                paddingX: position !== "center" ? gutters : modalPadding,
                 className: [
                   pointerEventsAll,
                   position === "center" && maxSize[position]
@@ -4438,15 +4472,14 @@ const ModalContent = ({
                 display: "flex",
                 justifyContent: "flexEnd",
                 paddingTop: modalPadding,
-                paddingRight: modalPadding,
+                paddingRight: position !== "center" ? gutters : modalPadding,
                 className: position === "center" && maxSize[position],
-                children: /* @__PURE__ */ jsx(Bleed, { space: "xsmall", children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(
                   Box,
                   {
                     position: "relative",
                     background: "surface",
                     borderRadius: "full",
-                    padding: "xsmall",
                     className: [closeIconOffset, pointerEventsAll],
                     children: /* @__PURE__ */ jsx(
                       ButtonIcon,
@@ -4461,7 +4494,7 @@ const ModalContent = ({
                       }
                     )
                   }
-                ) })
+                )
               }
             )
           ]
@@ -4554,24 +4587,28 @@ const Modal = ({
   const closeHandlerRef = 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);
+      }
     }
   };
   useEffect(() => {
     openRef.current = open;
     dispatch(open ? OPEN_MODAL : CLOSE_MODAL);
   }, [open]);
+  const closing = state === CLOSING;
   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;
   useEffect(() => {
     if (shouldAriaHideOthers && modalRef.current) {
@@ -4638,7 +4675,7 @@ const Modal = ({
             padding: position === "center" ? externalGutter : void 0,
             className: [
               modalContainer,
-              position === "left" || position === "right" && horiztontalTransition,
+              (position === "left" || position === "right") && horiztontalTransition,
               state === OPENING && entrance[position],
               state === CLOSING && position in exit && exit[position]
             ],
@@ -5899,33 +5936,6 @@ const Notice = ({
     }
   );
 };
-const validPageBlockComponents = [
-  "div",
-  "article",
-  "aside",
-  "main",
-  "section",
-  "nav"
-];
-const gutters = { mobile: "xsmall", tablet: "gutter" };
-const PageBlock = ({
-  children: children2,
-  width: width2 = "large",
-  component: componentProp,
-  data,
-  ...restProps
-}) => {
-  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component,
-      paddingX: gutters,
-      ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsx(ContentBlock, { width: width2, children: children2 })
-    }
-  );
-};
 const paginate = ({
   page,
   total,