braid-design-system 32.4.1 → 32.6.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # braid-design-system
 
+## 32.6.0
+
+### Minor Changes
+
+- **PageBlock:** Add new component ([#1307](https://github.com/seek-oss/braid-design-system/pull/1307))
+
+  Provides a top-level page container, constraining the content width (using `ContentBlock`) while establishing common screen gutters on smaller devices.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <PageBlock width="large">...</PageBlock>
+  ```
+
+- **Button, TextLinkButton:** Add `aria-label` support ([#1304](https://github.com/seek-oss/braid-design-system/pull/1304))
+
+  Provide support for `aria-label`, enabling additional context to be given to assistive technologies where context is typically visual.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Button aria-label="Save job">Save</Button>
+  ```
+
+- **IconMessage:** Add new component ([#1303](https://github.com/seek-oss/braid-design-system/pull/1303))
+
+  Add new `IconMessage` component.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconMessage />
+  ```
+
+## 32.5.0
+
+### Minor Changes
+
+- Hide field borders in dark containers ([#1294](https://github.com/seek-oss/braid-design-system/pull/1294))
+
+  Reduce visual noise when a form field is displayed in a dark container by hiding the default border.
+  As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.
+
+- Add `seekJobs` theme ([#1281](https://github.com/seek-oss/braid-design-system/pull/1281))
+
+  The `seekJobs` theme encapsulates the system changes necessary to apply and deliver the updated visual design language for SEEK Jobs.
+  Through the development of this theme, we have been able improve the fidelity of the various scales in our tokens, while also ensuring that the tokens themselves are consumed and applied more consistently throughout the system itself.
+
+  **EXAMPLE USAGE:**
+
+  ```tsx
+  import seekJobs from 'braid-design-system/themes/seekJobs';
+
+  <BraidProvider theme={seekJobs}>...</BraidProvider>;
+  ```
+
+  **MIGRATION**
+
+  Consumers of the `apac` theme are not recommended to migrate independently. The `seekJobs` theme represents an uplifted visual identity that is part of a wider visual uplift.
+  Instead, we’ll be guiding the initial teams through a staged migration in coordination with the centralised team process.
+  There are some differences in how certain concepts are applied, whether it's the space scale, or `Card` usage, etc., and we will be documenting these in due course.
+
+  If you would like to talk about migrating, please reach out to us in our **#braid-support** channel on slack.
+
 ## 32.4.1
 
 ### Patch Changes

package/dist/ToastContext.chunk.cjs

@@ -1491,10 +1491,12 @@ const ButtonText = ({
 }) => {
   const lightness = useBackgroundLightness();
   const actionsContext = React.useContext(ActionsContext);
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
   const stylesForVariant = variants[variant][tone ?? "default"];
   const shouldReducePaddingX = size === "small" || variant === "transparent";
-  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : "medium";
+  const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
+  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
   assert__default.default(
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Button component"
@@ -1610,6 +1612,7 @@ const Button = React.forwardRef(
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
     data,
     ...restProps
   }, ref) => {
@@ -1643,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 }),
@@ -2080,6 +2084,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2113,6 +2118,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

@@ -1484,10 +1484,12 @@ const ButtonText = ({
 }) => {
   const lightness = useBackgroundLightness();
   const actionsContext = useContext(ActionsContext);
+  const isLegacyTheme = useBraidTheme().legacy;
   const size2 = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
   const stylesForVariant = variants[variant][tone2 ?? "default"];
   const shouldReducePaddingX = size2 === "small" || variant === "transparent";
-  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : "medium";
+  const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
+  const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
   assert(
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Button component"
@@ -1603,6 +1605,7 @@ const Button = forwardRef(
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
     data,
     ...restProps
   }, ref) => {
@@ -1636,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 }),
@@ -2073,6 +2077,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2106,6 +2111,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

@@ -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",
   {
@@ -2263,6 +2294,7 @@ const Alert = ({
   onClose,
   ...restProps
 }) => {
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   const parentBackground = ToastContext.useBackground();
   const Icon = icons$1[tone];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2338,7 +2370,7 @@ const Alert = ({
             }
           ) }) : null
         ] }),
-        parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
+        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
           ToastContext.Overlay,
           {
             borderRadius: borderRadius$3,
@@ -2543,12 +2575,16 @@ const Field = ({
   const hasValue = typeof value === "string" ? value.length > 0 : value != null;
   const hasVisualLabelOrDescription = "label" in restProps || description;
   const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode } = ToastContext.useBackgroundLightness();
   const overlays = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToastContext.FieldOverlay,
       {
         variant: disabled ? "disabled" : "default",
-        visible: tone !== "critical" || disabled
+        visible: tone !== "critical" || disabled,
+        className: {
+          [styles_lib_components_private_Field_Field_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+        }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3803,6 +3839,7 @@ const Card = ({
     validCardComponents.includes(component),
     `Invalid Card component: '${component}'. Should be one of [${validCardComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   let resolvedRounding;
   if ("rounded" in restProps) {
     resolvedRounding = borderRadius$2;
@@ -3815,6 +3852,7 @@ const Card = ({
       roundedOnWide ? borderRadius$2 : "none"
     ]);
   }
+  const roundingForTheme = !isLegacyTheme ? borderRadius$2 : resolvedRounding;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToastContext.Box,
     {
@@ -3822,11 +3860,12 @@ const Card = ({
       position: "relative",
       background: "surface",
       padding: "gutter",
-      borderRadius: resolvedRounding,
+      borderRadius: roundingForTheme,
+      boxShadow: !isLegacyTheme ? "borderNeutralLight" : void 0,
       height: height === "full" ? height : void 0,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
-        tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: resolvedRounding }) : null,
+        tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: roundingForTheme }) : null,
         children
       ]
     }
@@ -3927,6 +3966,7 @@ const StyledInput = React.forwardRef(
         indeterminateRef.current = isMixed;
       }
     }, [ref, isMixed, isCheckbox]);
+    const { lightMode } = ToastContext.useBackgroundLightness();
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ToastContext.Box,
@@ -3979,7 +4019,10 @@ const StyledInput = React.forwardRef(
               {
                 variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
-                visible: tone !== "critical" || disabled
+                visible: tone !== "critical" || disabled,
+                className: {
+                  [styles_lib_components_private_InlineField_InlineField_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+                }
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -5864,6 +5907,33 @@ 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,
@@ -5931,6 +6001,7 @@ const PageNav = ({
 const tabletButtonSpacing = "xxsmall";
 const Page = ({ number, current }) => {
   const parentBackground = ToastContext.useBackground();
+  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToastContext.Box,
     {
@@ -5960,8 +6031,8 @@ const Page = ({ number, current }) => {
             borderRadius,
             boxShadow: "borderFormAccent",
             className: {
-              [styles_lib_components_Pagination_Pagination_css_cjs.lightModeCurrentKeyline]: parentBackground.lightMode !== "surface" && current,
-              [styles_lib_components_Pagination_Pagination_css_cjs.darkModeCurrentKeyline]: parentBackground.darkMode !== "surface" && current
+              [styles_lib_components_Pagination_Pagination_css_cjs.lightModeCurrentKeyline]: isLegacyTheme && parentBackground.lightMode !== "surface" && current,
+              [styles_lib_components_Pagination_Pagination_css_cjs.darkModeCurrentKeyline]: current
             }
           }
         ),
@@ -8037,7 +8108,6 @@ const Toggle = React.forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8045,6 +8115,17 @@ const Toggle = React.forwardRef(
                     borderRadius: "full",
                     className: styles_lib_components_Toggle_Toggle_css_cjs.slider[size],
                     children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ToastContext.FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [styles_lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(ToastContext.FieldOverlay, { className: styles_lib_components_Toggle_Toggle_css_cjs.icon, children: /* @__PURE__ */ jsxRuntime.jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         ToastContext.FieldOverlay,
@@ -8140,6 +8221,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;
@@ -8197,6 +8279,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;

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, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, useBackgroundLightness, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.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, 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 { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import assert from "assert";
@@ -35,7 +35,7 @@ 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, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, children } from "./styles/lib/components/private/InlineField/InlineField.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";
@@ -45,9 +45,9 @@ import { root as root$4, caution, critical } from "./styles/lib/components/Texta
 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, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.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, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.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";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -953,6 +953,37 @@ const IconMail = (props) => {
   const iconProps = useIcon(props);
   return /* @__PURE__ */ jsx(Box, { component: IconMailSvg, ...iconProps });
 };
+const IconMessageSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ 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__ */ jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ 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 = useIcon(props);
+  return /* @__PURE__ */ jsx(Box, { component: IconMessageSvg, ...iconProps });
+};
 const IconMinusSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -2255,6 +2286,7 @@ const Alert = ({
   onClose,
   ...restProps
 }) => {
+  const isLegacyTheme = useBraidTheme().legacy;
   const parentBackground = useBackground();
   const Icon = icons$1[tone2];
   return /* @__PURE__ */ jsxs(
@@ -2330,7 +2362,7 @@ const Alert = ({
             }
           ) }) : null
         ] }),
-        parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
+        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
           Overlay,
           {
             borderRadius: borderRadius$3,
@@ -2535,12 +2567,16 @@ const Field = ({
   const hasValue = typeof value === "string" ? value.length > 0 : value != null;
   const hasVisualLabelOrDescription = "label" in restProps || description;
   const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode: lightMode2 } = useBackgroundLightness();
   const overlays = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       FieldOverlay,
       {
         variant: disabled ? "disabled" : "default",
-        visible: tone2 !== "critical" || disabled
+        visible: tone2 !== "critical" || disabled,
+        className: {
+          [hideBorderOnDarkBackgroundInLightMode]: lightMode2 === "dark"
+        }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -3795,6 +3831,7 @@ const Card = ({
     validCardComponents.includes(component),
     `Invalid Card component: '${component}'. Should be one of [${validCardComponents.map((c) => `'${c}'`).join(", ")}]`
   );
+  const isLegacyTheme = useBraidTheme().legacy;
   let resolvedRounding;
   if ("rounded" in restProps) {
     resolvedRounding = borderRadius$2;
@@ -3807,6 +3844,7 @@ const Card = ({
       roundedOnWide ? borderRadius$2 : "none"
     ]);
   }
+  const roundingForTheme = !isLegacyTheme ? borderRadius$2 : resolvedRounding;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -3814,11 +3852,12 @@ const Card = ({
       position: "relative",
       background: "surface",
       padding: "gutter",
-      borderRadius: resolvedRounding,
+      borderRadius: roundingForTheme,
+      boxShadow: !isLegacyTheme ? "borderNeutralLight" : void 0,
       height: height === "full" ? height : void 0,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
-        tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: resolvedRounding }) : null,
+        tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: roundingForTheme }) : null,
         children2
       ]
     }
@@ -3919,6 +3958,7 @@ const StyledInput = forwardRef(
         indeterminateRef.current = isMixed$1;
       }
     }, [ref, isMixed$1, isCheckbox]);
+    const { lightMode: lightMode2 } = useBackgroundLightness();
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Box,
@@ -3971,7 +4011,10 @@ const StyledInput = forwardRef(
               {
                 variant: disabled ? "disabled" : defaultBorder,
                 borderRadius: fieldBorderRadius,
-                visible: tone2 !== "critical" || disabled
+                visible: tone2 !== "critical" || disabled,
+                className: {
+                  [hideBorderOnDarkBackgroundInLightMode$1]: lightMode2 === "dark"
+                }
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5856,6 +5899,33 @@ 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,
@@ -5923,6 +5993,7 @@ const PageNav = ({
 const tabletButtonSpacing = "xxsmall";
 const Page = ({ number, current: current$1 }) => {
   const parentBackground = useBackground();
+  const isLegacyTheme = useBraidTheme().legacy;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -5952,8 +6023,8 @@ const Page = ({ number, current: current$1 }) => {
             borderRadius,
             boxShadow: "borderFormAccent",
             className: {
-              [lightModeCurrentKeyline]: parentBackground.lightMode !== "surface" && current$1,
-              [darkModeCurrentKeyline]: parentBackground.darkMode !== "surface" && current$1
+              [lightModeCurrentKeyline]: isLegacyTheme && parentBackground.lightMode !== "surface" && current$1,
+              [darkModeCurrentKeyline]: current$1
             }
           }
         ),
@@ -8029,7 +8100,6 @@ const Toggle = forwardRef(
                   {
                     position: "absolute",
                     background: "surface",
-                    boxShadow: on ? "borderFormAccent" : "borderField",
                     transition: "fast",
                     display: "flex",
                     alignItems: "center",
@@ -8037,6 +8107,17 @@ const Toggle = forwardRef(
                     borderRadius: "full",
                     className: slider[size2],
                     children: [
+                      /* @__PURE__ */ jsx(
+                        FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [hideBorderOnDarkBackgroundInLightMode$2]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
                       /* @__PURE__ */ jsx(FieldOverlay, { className: icon$1, children: /* @__PURE__ */ jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
                       /* @__PURE__ */ jsx(
                         FieldOverlay,
@@ -8133,6 +8214,7 @@ export {
   IconList,
   IconLocation,
   IconMail,
+  IconMessage,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -8190,6 +8272,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  PageBlock,
   Pagination,
   PasswordField,
   Radio,

package/dist/index.cjs

@@ -82,6 +82,7 @@ exports.IconLinkBroken = Toggle.IconLinkBroken;
 exports.IconList = Toggle.IconList;
 exports.IconLocation = Toggle.IconLocation;
 exports.IconMail = Toggle.IconMail;
+exports.IconMessage = Toggle.IconMessage;
 exports.IconMinus = Toggle.IconMinus;
 exports.IconMobile = Toggle.IconMobile;
 exports.IconMoney = Toggle.IconMoney;
@@ -139,6 +140,7 @@ exports.MenuRenderer = Toggle.MenuRenderer;
 exports.MonthPicker = Toggle.MonthPicker;
 exports.Notice = Toggle.Notice;
 exports.OverflowMenu = Toggle.OverflowMenu;
+exports.PageBlock = Toggle.PageBlock;
 exports.Pagination = Toggle.Pagination;
 exports.PasswordField = Toggle.PasswordField;
 exports.Radio = Toggle.Radio;

package/dist/index.d.ts

@@ -1 +1 @@
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './reset.js';
+export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconRenderer, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './reset.js';