braid-design-system 32.5.0 → 32.6.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # 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

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 }),
@@ -2082,6 +2084,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2115,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

@@ -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 }),
@@ -2075,6 +2077,7 @@ const TextLinkButton = ({
   "aria-controls": ariaControls,
   "aria-expanded": ariaExpanded,
   "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   tabIndex,
   icon,
   iconPosition,
@@ -2108,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",
   {
@@ -5876,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,
@@ -8163,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;
@@ -8220,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, useBackgroundLightness, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, 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";
@@ -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",
   {
@@ -5868,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,
@@ -8156,6 +8214,7 @@ export {
   IconList,
   IconLocation,
   IconMail,
+  IconMessage,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -8213,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';

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { BraidProvider, makeLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { Bleed, PublicBox, BraidPortal, Button, ButtonIcon, Column, Columns, ContentBlock, Divider, Hidden, IconClear, IconCritical, IconPositive, IconRenderer, Inline, Stack, Text, TextLink, TextLinkButton, ToastProvider, TooltipRenderer, useResponsiveValue, useSpace, useThemeName, useToast } from "./ToastContext.chunk.mjs";
-import { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, BoxRenderer, ButtonLink, Card, Checkbox, CheckboxStandalone, Dialog, Disclosure, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, 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, Link, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, TextDropdown, TextField, Textarea, ThemeNameConsumer, Tiles, Toggle, filterSuggestions, useBreakpoint, useColor } from "./Toggle.chunk.mjs";
+import { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, BoxRenderer, ButtonLink, Card, Checkbox, CheckboxStandalone, Dialog, Disclosure, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, 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, Link, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, TextDropdown, TextField, Textarea, ThemeNameConsumer, Tiles, Toggle, filterSuggestions, useBreakpoint, useColor } from "./Toggle.chunk.mjs";
 export {
   Accordion,
   AccordionItem,
@@ -67,6 +67,7 @@ export {
   IconList,
   IconLocation,
   IconMail,
+  IconMessage,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -127,6 +128,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  PageBlock,
   Pagination,
   PasswordField,
   Radio,

package/dist/playroom/components.cjs

@@ -14,6 +14,7 @@ const React = require("react");
 const uuid = require("uuid");
 const ToastContext = require("../ToastContext.chunk.cjs");
 const styles_lib_css_atoms_atoms_cjs = require("../styles/lib/css/atoms/atoms.cjs");
+const styles_lib_css_breakpoints_cjs = require("../styles/lib/css/breakpoints.cjs");
 const styles_lib_css_atoms_atomicProperties_cjs = require("../styles/lib/css/atoms/atomicProperties.cjs");
 const styles_lib_components_private_Placeholder_Placeholder_css_cjs = require("../styles/lib/components/private/Placeholder/Placeholder.css.cjs");
 const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
@@ -261,7 +262,13 @@ const CheckboxStandalone = ({
   );
 };
 const validSpaceValues = Object.keys(styles_lib_css_atoms_atomicProperties_cjs.space);
-const cleanSpaceValue = (space) => typeof space === "undefined" || typeof space === "boolean" || typeof space === "string" && !validSpaceValues.includes(space) ? "none" : space;
+const cleanSpaceValue = (space) => {
+  const validResponsiveObject = typeof space === "object" && Object.keys(space).some(
+    (bp) => styles_lib_css_breakpoints_cjs.breakpointNames.includes(bp) && validSpaceValues.includes(space[bp])
+  );
+  const validSpace = typeof space === "string" && validSpaceValues.includes(space);
+  return validSpace || validResponsiveObject ? space : void 0;
+};
 const Columns = ({
   space,
   align,
@@ -271,7 +278,7 @@ const Columns = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastContext.Columns,
   {
-    space: cleanSpaceValue(space),
+    space: cleanSpaceValue(space) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && ToastContext.validColumnsComponents.indexOf(component) > -1 ? component : void 0,
@@ -431,7 +438,7 @@ const Inline = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastContext.Inline,
   {
-    space: cleanSpaceValue(space),
+    space: cleanSpaceValue(space) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && ToastContext.validInlineComponents.indexOf(component) > -1 ? component : void 0,
@@ -647,7 +654,7 @@ const Stack = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastContext.Stack,
   {
-    space: cleanSpaceValue(space),
+    space: cleanSpaceValue(space) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     component: component && ToastContext.validStackComponents.indexOf(component) > -1 ? component : void 0,
     ...restProps
@@ -784,7 +791,7 @@ const TextField = ({
 const Tiles = ({ space, columns, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
   Toggle$1.Tiles,
   {
-    space: cleanSpaceValue(space),
+    space: cleanSpaceValue(space) || "none",
     columns: typeof columns === "boolean" || !columns ? 1 : columns,
     ...restProps
   }
@@ -929,6 +936,7 @@ exports.IconLinkBroken = Toggle$1.IconLinkBroken;
 exports.IconList = Toggle$1.IconList;
 exports.IconLocation = Toggle$1.IconLocation;
 exports.IconMail = Toggle$1.IconMail;
+exports.IconMessage = Toggle$1.IconMessage;
 exports.IconMinus = Toggle$1.IconMinus;
 exports.IconMobile = Toggle$1.IconMobile;
 exports.IconMoney = Toggle$1.IconMoney;
@@ -978,6 +986,7 @@ exports.IconZoomOut = Toggle$1.IconZoomOut;
 exports.Loader = Toggle$1.Loader;
 exports.MenuItemDivider = Toggle$1.MenuItemDivider;
 exports.MenuRenderer = Toggle$1.MenuRenderer;
+exports.PageBlock = Toggle$1.PageBlock;
 exports.RadioItem = Toggle$1.RadioItem;
 exports.Secondary = Toggle$1.Secondary;
 exports.Step = Toggle$1.Step;

package/dist/playroom/components.d.ts

@@ -1 +1 @@
-export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as 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$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu$1 as OverflowMenu, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Tabs$1 as Tabs, TabsProvider$1 as TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer$1 as TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../reset.js';
+export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as 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$1 as Inline, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu$1 as OverflowMenu, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Tabs$1 as Tabs, TabsProvider$1 as TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer$1 as TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../reset.js';

package/dist/playroom/components.mjs

@@ -7,13 +7,14 @@ import "../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
 import { wireframe } from "../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
 import "../styles/lib/themes/docs/docsTheme.css.mjs";
 import { Accordion as Accordion$1, validSpaceValues as validSpaceValues$1, AccordionItem as AccordionItem$1, Alert as Alert$1, Autosuggest as Autosuggest$1, Badge as Badge$1, ButtonLink as ButtonLink$1, Card as Card$1, validCardComponents, Checkbox as Checkbox$1, CheckboxStandalone as CheckboxStandalone$1, AllowCloseContext, Dialog as Dialog$1, Disclosure as Disclosure$1, Drawer as Drawer$1, Dropdown as Dropdown$1, FieldLabel as FieldLabel$1, FieldMessage as FieldMessage$1, tones, Heading as Heading$1, Link as Link$1, List as List$1, MonthPicker as MonthPicker$1, MenuItem as MenuItem$1, MenuItemLink as MenuItemLink$1, MenuItemCheckbox as MenuItemCheckbox$1, Notice as Notice$1, OverflowMenu as OverflowMenu$1, Pagination as Pagination$1, defaultPageLimit, PasswordField as PasswordField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Rating as Rating$1, TabsProvider as TabsProvider$1, Tabs as Tabs$1, Tab as Tab$1, Tag as Tag$1, Textarea as Textarea$1, TextDropdown as TextDropdown$1, parseSimpleToComplexOption, TextField as TextField$1, Tiles as Tiles$1, Toggle as Toggle$1 } from "../Toggle.chunk.mjs";
-import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, 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, Loader, MenuItemDivider, MenuRenderer, RadioItem, Secondary, Step, Stepper, Strong, TabPanel, TabPanels, ThemeNameConsumer, filterSuggestions, useBreakpoint, useColor } from "../Toggle.chunk.mjs";
+import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, 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, Loader, MenuItemDivider, MenuRenderer, PageBlock, RadioItem, Secondary, Step, Stepper, Strong, TabPanel, TabPanels, ThemeNameConsumer, filterSuggestions, useBreakpoint, useColor } from "../Toggle.chunk.mjs";
 import { useFallbackState } from "../playroomState.chunk.mjs";
 import { useRef, forwardRef, useState, useEffect } from "react";
 import { v4 } from "uuid";
 import { Bleed as Bleed$1, validBleedComponents, Box as Box$1, Button as Button$1, buttonVariants, ButtonIcon as ButtonIcon$1, buttonIconVariants, Columns as Columns$1, validColumnsComponents, Inline as Inline$1, validInlineComponents, IconClear, Stack as Stack$1, validStackComponents, TooltipRenderer as TooltipRenderer$1, useBackgroundLightness, PublicBox, Text } from "../ToastContext.chunk.mjs";
 import { BraidPortal, Column, ContentBlock, Divider, Hidden, IconCritical, IconPositive, IconRenderer, TextLink, TextLinkButton, ToastProvider, useResponsiveValue, useSpace, useThemeName, useToast } from "../ToastContext.chunk.mjs";
 import { atoms } from "../styles/lib/css/atoms/atoms.mjs";
+import { breakpointNames } from "../styles/lib/css/breakpoints.mjs";
 import { space } from "../styles/lib/css/atoms/atomicProperties.mjs";
 import { lightTheme, darkTheme, box, label, line } from "../styles/lib/components/private/Placeholder/Placeholder.css.mjs";
 import { BraidProvider, makeLinkComponent } from "../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
@@ -259,7 +260,13 @@ const CheckboxStandalone = ({
   );
 };
 const validSpaceValues = Object.keys(space);
-const cleanSpaceValue = (space2) => typeof space2 === "undefined" || typeof space2 === "boolean" || typeof space2 === "string" && !validSpaceValues.includes(space2) ? "none" : space2;
+const cleanSpaceValue = (space2) => {
+  const validResponsiveObject = typeof space2 === "object" && Object.keys(space2).some(
+    (bp) => breakpointNames.includes(bp) && validSpaceValues.includes(space2[bp])
+  );
+  const validSpace = typeof space2 === "string" && validSpaceValues.includes(space2);
+  return validSpace || validResponsiveObject ? space2 : void 0;
+};
 const Columns = ({
   space: space2,
   align,
@@ -269,7 +276,7 @@ const Columns = ({
 }) => /* @__PURE__ */ jsx(
   Columns$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && validColumnsComponents.indexOf(component) > -1 ? component : void 0,
@@ -429,7 +436,7 @@ const Inline = ({
 }) => /* @__PURE__ */ jsx(
   Inline$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && validInlineComponents.indexOf(component) > -1 ? component : void 0,
@@ -645,7 +652,7 @@ const Stack = ({
 }) => /* @__PURE__ */ jsx(
   Stack$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     component: component && validStackComponents.indexOf(component) > -1 ? component : void 0,
     ...restProps
@@ -782,7 +789,7 @@ const TextField = ({
 const Tiles = ({ space: space2, columns, ...restProps }) => /* @__PURE__ */ jsx(
   Tiles$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     columns: typeof columns === "boolean" || !columns ? 1 : columns,
     ...restProps
   }
@@ -957,6 +964,7 @@ export {
   IconList,
   IconLocation,
   IconMail,
+  IconMessage,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -1017,6 +1025,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  PageBlock,
   Pagination,
   PasswordField,
   Placeholder,

package/dist/playroom/snippets.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const snippets$I = [{
+const snippets$J = [{
   name: "Large",
   code: '<Accordion>\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
 }, {
@@ -21,7 +21,7 @@ const snippets$I = [{
   name: "Standalone item with a badge",
   code: '<AccordionItem label="Label" badge={<Badge tone="promote" weight="strong">\n            Badge\n          </Badge>}>\n        <Placeholder height={100} />\n      </AccordionItem>'
 }];
-const snippets$H = [{
+const snippets$I = [{
   name: "With multiple buttons",
   code: '<Actions>\n        <Button>Submit</Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
 }, {
@@ -34,7 +34,7 @@ const snippets$H = [{
   name: "Small size",
   code: '<Actions size="small">\n        <Button>Button 1</Button>\n        <Button>Button 2</Button>\n        <Button variant="transparent">Button 3</Button>\n      </Actions>'
 }];
-const snippets$G = [{
+const snippets$H = [{
   name: "Critical",
   code: '<Alert tone="critical">\n        <Text>Critical Alert</Text>\n      </Alert>'
 }, {
@@ -53,7 +53,7 @@ const snippets$G = [{
   name: "Dismissible alert",
   code: '<Alert onClose={() => {}} closeLabel="Close">\n        <Text>Dismissible Alert</Text>\n      </Alert>'
 }];
-const snippets$F = [{
+const snippets$G = [{
   name: "Standard",
   code: `<Autosuggest id="fruit" label="Fruit" suggestions={[{
   text: 'Apples'
@@ -128,7 +128,7 @@ const snippets$F = [{
   text: 'Sydney'
 }]} />`
 }];
-const snippets$E = [{
+const snippets$F = [{
   name: "Info",
   code: '<Badge tone="info">Badge</Badge>'
 }, {
@@ -168,7 +168,7 @@ const snippets$E = [{
   name: "Multiple",
   code: '<Inline space="small">\n        <Badge tone="info">Badge</Badge>\n        <Badge tone="positive">Badge</Badge>\n        <Badge tone="promote">Badge</Badge>\n      </Inline>'
 }];
-const snippets$D = [{
+const snippets$E = [{
   name: "On all sides",
   code: '<Bleed space="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }, {
@@ -190,7 +190,7 @@ const snippets$D = [{
   name: "To the right",
   code: '<Bleed right="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }];
-const snippets$C = [{
+const snippets$D = [{
   name: "Solid",
   code: "<Button>Button</Button>"
 }, {
@@ -251,7 +251,7 @@ const snippets$C = [{
   name: "Small Transparent",
   code: '<Button size="small" variant="transparent">\n        Button\n      </Button>'
 }];
-const snippets$B = [{
+const snippets$C = [{
   name: "Soft",
   code: '<ButtonIcon variant="soft" icon={<IconBookmark />} label="Bookmark" id="buttonicon-soft" />'
 }, {
@@ -264,7 +264,7 @@ const snippets$B = [{
   name: "Secondary",
   code: '<ButtonIcon tone="secondary" icon={<IconClear />} label="Close" id="buttonicon-secondary" />'
 }];
-const snippets$A = [{
+const snippets$B = [{
   name: "With Heading",
   code: '<Card>\n        <Stack space="gutter">\n          <Heading level="3">Heading</Heading>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
 }, {
@@ -280,7 +280,7 @@ const snippets$A = [{
   name: "With Overflow Menu",
   code: '<Card>\n        <Stack space="gutter">\n          <Columns space="gutter">\n            <Column>\n              <Heading level="3">Heading</Heading>\n            </Column>\n            <Column width="content">\n              <OverflowMenu label="Options">\n                <MenuItem>Menu Item</MenuItem>\n              </OverflowMenu>\n            </Column>\n          </Columns>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
 }];
-const snippets$z = [{
+const snippets$A = [{
   name: "Standard",
   code: '<Checkbox label="Label" />'
 }, {
@@ -299,7 +299,7 @@ const snippets$z = [{
   name: "With nested content",
   code: '<Checkbox label="Label">\n        <Placeholder height={100} />\n      </Checkbox>'
 }];
-const snippets$y = [{
+const snippets$z = [{
   name: "2 Columns",
   code: '<Columns space="gutter">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
 }, {
@@ -315,7 +315,7 @@ const snippets$y = [{
   name: "Main Content With Sidebar",
   code: '<Columns space="gutter" collapseBelow="tablet">\n        <Column width="2/3">\n          <Placeholder height={400} label="Main" />\n        </Column>\n        <Column>\n          <Placeholder height={100} label="Sidebar" />\n        </Column>\n      </Columns>'
 }];
-const snippets$x = [{
+const snippets$y = [{
   name: "Standard",
   code: "<ContentBlock>\n        <Placeholder height={100} />\n      </ContentBlock>"
 }, {
@@ -328,7 +328,7 @@ const snippets$x = [{
   name: "Large",
   code: '<ContentBlock width="large">\n        <Placeholder height={100} />\n      </ContentBlock>'
 }];
-const snippets$w = [{
+const snippets$x = [{
   name: "Standard",
   code: '<Dialog title="Dialog Heading" open={true}>\n        <Placeholder width={250} height={100} />\n      </Dialog>'
 }, {
@@ -347,18 +347,18 @@ const snippets$w = [{
   name: "Large",
   code: '<Dialog title="Dialog Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
 }];
-const snippets$v = [{
+const snippets$w = [{
   name: "Standard",
   code: '<Disclosure expandLabel="Show" collapseLabel="Hide">\n        <Stack space="large">\n          <Text>Content</Text>\n        </Stack>\n      </Disclosure>'
 }];
-const snippets$u = [{
+const snippets$v = [{
   name: "Regular",
   code: "<Divider />"
 }, {
   name: "Strong",
   code: '<Divider weight="strong" />'
 }];
-const snippets$t = [{
+const snippets$u = [{
   name: "Default",
   code: '<Drawer title="Drawer Heading" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }, {
@@ -371,7 +371,7 @@ const snippets$t = [{
   name: "Large",
   code: '<Drawer title="Drawer Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }];
-const snippets$s = [{
+const snippets$t = [{
   name: "Standard",
   code: '<Dropdown label="Label" placeholder="Please select">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
 }, {
@@ -393,7 +393,7 @@ const snippets$s = [{
   name: "With a positive message",
   code: '<Dropdown label="Label" placeholder="Please select" tone="positive" message="Positive message">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
 }];
-const snippets$r = [{
+const snippets$s = [{
   name: "Standard",
   code: '<FieldLabel label="Label" />'
 }, {
@@ -403,7 +403,7 @@ const snippets$r = [{
   name: "Standard with tertiary label",
   code: '<FieldLabel label="Label" secondaryLabel="Optional" tertiaryLabel={<TextLink href="#">Help?</TextLink>} />'
 }];
-const snippets$q = [{
+const snippets$r = [{
   name: "Standard",
   code: '<FieldMessage message="This is a message" />'
 }, {
@@ -416,7 +416,7 @@ const snippets$q = [{
   name: "Secondary message",
   code: '<FieldMessage message="This is a message" secondaryMessage={<Text size="small" tone="secondary">\n            Secondary\n          </Text>} />'
 }];
-const snippets$p = [{
+const snippets$q = [{
   name: "Level 1",
   code: '<Heading level="1">Heading</Heading>'
 }, {
@@ -444,7 +444,7 @@ const snippets$p = [{
   name: "Level 4 (Weak)",
   code: '<Heading level="4" weight="weak">\n        Heading\n      </Heading>'
 }];
-const snippets$o = [{
+const snippets$p = [{
   name: "Small space",
   code: '<Inline space="small">\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>'
 }, {
@@ -467,7 +467,7 @@ const snippets$o = [{
   name: "Vertically centered",
   code: '<Inline space="small" alignY="center">\n        <Placeholder width={48} height={40} />\n        <Placeholder width={48} height={100} />\n        <Placeholder width={48} height={60} />\n      </Inline>'
 }];
-const snippets$n = [{
+const snippets$o = [{
   name: "XSmall Space",
   code: '<List space="xsmall">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
 }, {
@@ -492,11 +492,11 @@ const snippets$n = [{
   name: "Icon",
   code: '<List space="medium" type="icon" icon={<IconTick tone="positive" />}>\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
 }];
-const snippets$m = [{
+const snippets$n = [{
   name: "Standard",
   code: "<Loader />"
 }];
-const snippets$l = [{
+const snippets$m = [{
   name: "Standard",
   code: '<MonthPicker label="Month" />'
 }, {
@@ -518,7 +518,7 @@ const snippets$l = [{
   name: "With custom months and years",
   code: `<MonthPicker label="Started" monthLabel="MM" yearLabel="YYYY" monthNames={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']} />`
 }];
-const snippets$k = [{
+const snippets$l = [{
   name: "Critical",
   code: '<Notice tone="critical">\n        <Text>Critical Notice</Text>\n      </Notice>'
 }, {
@@ -531,10 +531,17 @@ const snippets$k = [{
   name: "Promote",
   code: '<Notice tone="promote">\n        <Text>Promote Notice</Text>\n      </Notice>'
 }];
-const snippets$j = [{
+const snippets$k = [{
   name: "Standard",
   code: '<OverflowMenu label="Options">\n        <MenuItem>Option</MenuItem>\n        <MenuItem>Option</MenuItem>\n      </OverflowMenu>'
 }];
+const snippets$j = [{
+  name: "Medium",
+  code: '<PageBlock width="medium">\n        <Placeholder height={100} />\n      </PageBlock>'
+}, {
+  name: "Large",
+  code: '<PageBlock width="large">\n        <Placeholder height={100} />\n      </PageBlock>'
+}];
 const snippets$i = [{
   name: "Standard",
   code: "<Pagination />"
@@ -807,32 +814,33 @@ const snippets$1 = [{
   code: '<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n        {({\n    triggerProps\n  }) => <Box {...triggerProps}>\n            <Placeholder label="Tooltip trigger" height={100} />\n          </Box>}\n      </TooltipRenderer>'
 }];
 const snippets = Object.entries({
-  Accordion: snippets$I,
-  Actions: snippets$H,
-  Alert: snippets$G,
-  Autosuggest: snippets$F,
-  Badge: snippets$E,
-  Bleed: snippets$D,
-  Button: snippets$C,
-  ButtonIcon: snippets$B,
-  Card: snippets$A,
-  Checkbox: snippets$z,
-  Columns: snippets$y,
-  ContentBlock: snippets$x,
-  Dialog: snippets$w,
-  Disclosure: snippets$v,
-  Divider: snippets$u,
-  Drawer: snippets$t,
-  Dropdown: snippets$s,
-  FieldLabel: snippets$r,
-  FieldMessage: snippets$q,
-  Heading: snippets$p,
-  Inline: snippets$o,
-  List: snippets$n,
-  Loader: snippets$m,
-  MonthPicker: snippets$l,
-  Notice: snippets$k,
-  OverflowMenu: snippets$j,
+  Accordion: snippets$J,
+  Actions: snippets$I,
+  Alert: snippets$H,
+  Autosuggest: snippets$G,
+  Badge: snippets$F,
+  Bleed: snippets$E,
+  Button: snippets$D,
+  ButtonIcon: snippets$C,
+  Card: snippets$B,
+  Checkbox: snippets$A,
+  Columns: snippets$z,
+  ContentBlock: snippets$y,
+  Dialog: snippets$x,
+  Disclosure: snippets$w,
+  Divider: snippets$v,
+  Drawer: snippets$u,
+  Dropdown: snippets$t,
+  FieldLabel: snippets$s,
+  FieldMessage: snippets$r,
+  Heading: snippets$q,
+  Inline: snippets$p,
+  List: snippets$o,
+  Loader: snippets$n,
+  MonthPicker: snippets$m,
+  Notice: snippets$l,
+  OverflowMenu: snippets$k,
+  PageBlock: snippets$j,
   Pagination: snippets$i,
   PasswordField: snippets$h,
   RadioGroup: snippets$g,

package/dist/playroom/snippets.mjs

@@ -1,4 +1,4 @@
-const snippets$I = [{
+const snippets$J = [{
   name: "Large",
   code: '<Accordion>\n        <AccordionItem label="Item 1">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 2">\n          <Placeholder height={100} />\n        </AccordionItem>\n        <AccordionItem label="Item 3">\n          <Placeholder height={100} />\n        </AccordionItem>\n      </Accordion>'
 }, {
@@ -20,7 +20,7 @@ const snippets$I = [{
   name: "Standalone item with a badge",
   code: '<AccordionItem label="Label" badge={<Badge tone="promote" weight="strong">\n            Badge\n          </Badge>}>\n        <Placeholder height={100} />\n      </AccordionItem>'
 }];
-const snippets$H = [{
+const snippets$I = [{
   name: "With multiple buttons",
   code: '<Actions>\n        <Button>Submit</Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
 }, {
@@ -33,7 +33,7 @@ const snippets$H = [{
   name: "Small size",
   code: '<Actions size="small">\n        <Button>Button 1</Button>\n        <Button>Button 2</Button>\n        <Button variant="transparent">Button 3</Button>\n      </Actions>'
 }];
-const snippets$G = [{
+const snippets$H = [{
   name: "Critical",
   code: '<Alert tone="critical">\n        <Text>Critical Alert</Text>\n      </Alert>'
 }, {
@@ -52,7 +52,7 @@ const snippets$G = [{
   name: "Dismissible alert",
   code: '<Alert onClose={() => {}} closeLabel="Close">\n        <Text>Dismissible Alert</Text>\n      </Alert>'
 }];
-const snippets$F = [{
+const snippets$G = [{
   name: "Standard",
   code: `<Autosuggest id="fruit" label="Fruit" suggestions={[{
   text: 'Apples'
@@ -127,7 +127,7 @@ const snippets$F = [{
   text: 'Sydney'
 }]} />`
 }];
-const snippets$E = [{
+const snippets$F = [{
   name: "Info",
   code: '<Badge tone="info">Badge</Badge>'
 }, {
@@ -167,7 +167,7 @@ const snippets$E = [{
   name: "Multiple",
   code: '<Inline space="small">\n        <Badge tone="info">Badge</Badge>\n        <Badge tone="positive">Badge</Badge>\n        <Badge tone="promote">Badge</Badge>\n      </Inline>'
 }];
-const snippets$D = [{
+const snippets$E = [{
   name: "On all sides",
   code: '<Bleed space="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }, {
@@ -189,7 +189,7 @@ const snippets$D = [{
   name: "To the right",
   code: '<Bleed right="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }];
-const snippets$C = [{
+const snippets$D = [{
   name: "Solid",
   code: "<Button>Button</Button>"
 }, {
@@ -250,7 +250,7 @@ const snippets$C = [{
   name: "Small Transparent",
   code: '<Button size="small" variant="transparent">\n        Button\n      </Button>'
 }];
-const snippets$B = [{
+const snippets$C = [{
   name: "Soft",
   code: '<ButtonIcon variant="soft" icon={<IconBookmark />} label="Bookmark" id="buttonicon-soft" />'
 }, {
@@ -263,7 +263,7 @@ const snippets$B = [{
   name: "Secondary",
   code: '<ButtonIcon tone="secondary" icon={<IconClear />} label="Close" id="buttonicon-secondary" />'
 }];
-const snippets$A = [{
+const snippets$B = [{
   name: "With Heading",
   code: '<Card>\n        <Stack space="gutter">\n          <Heading level="3">Heading</Heading>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
 }, {
@@ -279,7 +279,7 @@ const snippets$A = [{
   name: "With Overflow Menu",
   code: '<Card>\n        <Stack space="gutter">\n          <Columns space="gutter">\n            <Column>\n              <Heading level="3">Heading</Heading>\n            </Column>\n            <Column width="content">\n              <OverflowMenu label="Options">\n                <MenuItem>Menu Item</MenuItem>\n              </OverflowMenu>\n            </Column>\n          </Columns>\n          <Text>Text</Text>\n        </Stack>\n      </Card>'
 }];
-const snippets$z = [{
+const snippets$A = [{
   name: "Standard",
   code: '<Checkbox label="Label" />'
 }, {
@@ -298,7 +298,7 @@ const snippets$z = [{
   name: "With nested content",
   code: '<Checkbox label="Label">\n        <Placeholder height={100} />\n      </Checkbox>'
 }];
-const snippets$y = [{
+const snippets$z = [{
   name: "2 Columns",
   code: '<Columns space="gutter">\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n        <Column>\n          <Placeholder height={60} label="Column" />\n        </Column>\n      </Columns>'
 }, {
@@ -314,7 +314,7 @@ const snippets$y = [{
   name: "Main Content With Sidebar",
   code: '<Columns space="gutter" collapseBelow="tablet">\n        <Column width="2/3">\n          <Placeholder height={400} label="Main" />\n        </Column>\n        <Column>\n          <Placeholder height={100} label="Sidebar" />\n        </Column>\n      </Columns>'
 }];
-const snippets$x = [{
+const snippets$y = [{
   name: "Standard",
   code: "<ContentBlock>\n        <Placeholder height={100} />\n      </ContentBlock>"
 }, {
@@ -327,7 +327,7 @@ const snippets$x = [{
   name: "Large",
   code: '<ContentBlock width="large">\n        <Placeholder height={100} />\n      </ContentBlock>'
 }];
-const snippets$w = [{
+const snippets$x = [{
   name: "Standard",
   code: '<Dialog title="Dialog Heading" open={true}>\n        <Placeholder width={250} height={100} />\n      </Dialog>'
 }, {
@@ -346,18 +346,18 @@ const snippets$w = [{
   name: "Large",
   code: '<Dialog title="Dialog Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
 }];
-const snippets$v = [{
+const snippets$w = [{
   name: "Standard",
   code: '<Disclosure expandLabel="Show" collapseLabel="Hide">\n        <Stack space="large">\n          <Text>Content</Text>\n        </Stack>\n      </Disclosure>'
 }];
-const snippets$u = [{
+const snippets$v = [{
   name: "Regular",
   code: "<Divider />"
 }, {
   name: "Strong",
   code: '<Divider weight="strong" />'
 }];
-const snippets$t = [{
+const snippets$u = [{
   name: "Default",
   code: '<Drawer title="Drawer Heading" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }, {
@@ -370,7 +370,7 @@ const snippets$t = [{
   name: "Large",
   code: '<Drawer title="Drawer Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }];
-const snippets$s = [{
+const snippets$t = [{
   name: "Standard",
   code: '<Dropdown label="Label" placeholder="Please select">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
 }, {
@@ -392,7 +392,7 @@ const snippets$s = [{
   name: "With a positive message",
   code: '<Dropdown label="Label" placeholder="Please select" tone="positive" message="Positive message">\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>'
 }];
-const snippets$r = [{
+const snippets$s = [{
   name: "Standard",
   code: '<FieldLabel label="Label" />'
 }, {
@@ -402,7 +402,7 @@ const snippets$r = [{
   name: "Standard with tertiary label",
   code: '<FieldLabel label="Label" secondaryLabel="Optional" tertiaryLabel={<TextLink href="#">Help?</TextLink>} />'
 }];
-const snippets$q = [{
+const snippets$r = [{
   name: "Standard",
   code: '<FieldMessage message="This is a message" />'
 }, {
@@ -415,7 +415,7 @@ const snippets$q = [{
   name: "Secondary message",
   code: '<FieldMessage message="This is a message" secondaryMessage={<Text size="small" tone="secondary">\n            Secondary\n          </Text>} />'
 }];
-const snippets$p = [{
+const snippets$q = [{
   name: "Level 1",
   code: '<Heading level="1">Heading</Heading>'
 }, {
@@ -443,7 +443,7 @@ const snippets$p = [{
   name: "Level 4 (Weak)",
   code: '<Heading level="4" weight="weak">\n        Heading\n      </Heading>'
 }];
-const snippets$o = [{
+const snippets$p = [{
   name: "Small space",
   code: '<Inline space="small">\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n        <Placeholder width={48} height={48} />\n      </Inline>'
 }, {
@@ -466,7 +466,7 @@ const snippets$o = [{
   name: "Vertically centered",
   code: '<Inline space="small" alignY="center">\n        <Placeholder width={48} height={40} />\n        <Placeholder width={48} height={100} />\n        <Placeholder width={48} height={60} />\n      </Inline>'
 }];
-const snippets$n = [{
+const snippets$o = [{
   name: "XSmall Space",
   code: '<List space="xsmall">\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
 }, {
@@ -491,11 +491,11 @@ const snippets$n = [{
   name: "Icon",
   code: '<List space="medium" type="icon" icon={<IconTick tone="positive" />}>\n        <Text>Text</Text>\n        <Text>Text</Text>\n        <Text>Text</Text>\n      </List>'
 }];
-const snippets$m = [{
+const snippets$n = [{
   name: "Standard",
   code: "<Loader />"
 }];
-const snippets$l = [{
+const snippets$m = [{
   name: "Standard",
   code: '<MonthPicker label="Month" />'
 }, {
@@ -517,7 +517,7 @@ const snippets$l = [{
   name: "With custom months and years",
   code: `<MonthPicker label="Started" monthLabel="MM" yearLabel="YYYY" monthNames={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']} />`
 }];
-const snippets$k = [{
+const snippets$l = [{
   name: "Critical",
   code: '<Notice tone="critical">\n        <Text>Critical Notice</Text>\n      </Notice>'
 }, {
@@ -530,10 +530,17 @@ const snippets$k = [{
   name: "Promote",
   code: '<Notice tone="promote">\n        <Text>Promote Notice</Text>\n      </Notice>'
 }];
-const snippets$j = [{
+const snippets$k = [{
   name: "Standard",
   code: '<OverflowMenu label="Options">\n        <MenuItem>Option</MenuItem>\n        <MenuItem>Option</MenuItem>\n      </OverflowMenu>'
 }];
+const snippets$j = [{
+  name: "Medium",
+  code: '<PageBlock width="medium">\n        <Placeholder height={100} />\n      </PageBlock>'
+}, {
+  name: "Large",
+  code: '<PageBlock width="large">\n        <Placeholder height={100} />\n      </PageBlock>'
+}];
 const snippets$i = [{
   name: "Standard",
   code: "<Pagination />"
@@ -806,32 +813,33 @@ const snippets$1 = [{
   code: '<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n        {({\n    triggerProps\n  }) => <Box {...triggerProps}>\n            <Placeholder label="Tooltip trigger" height={100} />\n          </Box>}\n      </TooltipRenderer>'
 }];
 const snippets = Object.entries({
-  Accordion: snippets$I,
-  Actions: snippets$H,
-  Alert: snippets$G,
-  Autosuggest: snippets$F,
-  Badge: snippets$E,
-  Bleed: snippets$D,
-  Button: snippets$C,
-  ButtonIcon: snippets$B,
-  Card: snippets$A,
-  Checkbox: snippets$z,
-  Columns: snippets$y,
-  ContentBlock: snippets$x,
-  Dialog: snippets$w,
-  Disclosure: snippets$v,
-  Divider: snippets$u,
-  Drawer: snippets$t,
-  Dropdown: snippets$s,
-  FieldLabel: snippets$r,
-  FieldMessage: snippets$q,
-  Heading: snippets$p,
-  Inline: snippets$o,
-  List: snippets$n,
-  Loader: snippets$m,
-  MonthPicker: snippets$l,
-  Notice: snippets$k,
-  OverflowMenu: snippets$j,
+  Accordion: snippets$J,
+  Actions: snippets$I,
+  Alert: snippets$H,
+  Autosuggest: snippets$G,
+  Badge: snippets$F,
+  Bleed: snippets$E,
+  Button: snippets$D,
+  ButtonIcon: snippets$C,
+  Card: snippets$B,
+  Checkbox: snippets$A,
+  Columns: snippets$z,
+  ContentBlock: snippets$y,
+  Dialog: snippets$x,
+  Disclosure: snippets$w,
+  Divider: snippets$v,
+  Drawer: snippets$u,
+  Dropdown: snippets$t,
+  FieldLabel: snippets$s,
+  FieldMessage: snippets$r,
+  Heading: snippets$q,
+  Inline: snippets$p,
+  List: snippets$o,
+  Loader: snippets$n,
+  MonthPicker: snippets$m,
+  Notice: snippets$l,
+  OverflowMenu: snippets$k,
+  PageBlock: snippets$j,
   Pagination: snippets$i,
   PasswordField: snippets$h,
   RadioGroup: snippets$g,

package/dist/reset.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, KeyboardEvent, MouseEvent, FormEvent } from 'react';
+import React__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, Ref, KeyboardEvent, MouseEvent, FormEvent } from 'react';
 import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
@@ -2855,6 +2855,7 @@ interface ButtonProps extends ButtonStyleProps {
     'aria-controls'?: NativeButtonProps$1['aria-controls'];
     'aria-expanded'?: NativeButtonProps$1['aria-expanded'];
     'aria-describedby'?: NativeButtonProps$1['aria-describedby'];
+    'aria-label'?: NativeButtonProps$1['aria-label'];
     tabIndex?: NativeButtonProps$1['tabIndex'];
     data?: DataAttributeMap;
 }
@@ -2995,7 +2996,7 @@ type AutosuggestBaseProps<Value> = Omit<FieldBaseProps, 'value' | 'autoComplete'
 };
 type AutosuggestLabelProps = FieldLabelVariant$1;
 type AutosuggestProps<Value> = AutosuggestBaseProps<Value> & AutosuggestLabelProps;
-declare const Autosuggest$1: <Value>(props: AutosuggestProps<Value> & RefAttributes<HTMLInputElement>) => ReactElement;
+declare const Autosuggest$1: <Value>(props: AutosuggestProps<Value> & React__default.RefAttributes<HTMLInputElement>) => ReactElement;
 
 type FilterableSuggestion<Value> = Omit<Suggestion<Value>, 'highlights'>;
 type FilterableGroupedSuggestions<Value> = Omit<GroupedSuggestions<Value>, 'suggestions'> & {
@@ -3205,10 +3206,11 @@ interface TextLinkButtonProps extends Omit<TextLinkStyles, 'showVisited'> {
     'aria-controls'?: NativeSpanProps['aria-controls'];
     'aria-expanded'?: NativeSpanProps['aria-expanded'];
     'aria-describedby'?: NativeSpanProps['aria-describedby'];
+    'aria-label'?: NativeSpanProps['aria-label'];
     tabIndex?: NativeSpanProps['tabIndex'];
     icon?: ReactElement<UseIconProps>;
 }
-declare const TextLinkButton: ({ weight, hitArea, id, onClick, data, children, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, tabIndex, icon, iconPosition, ...restProps }: TextLinkButtonProps) => JSX.Element;
+declare const TextLinkButton: ({ weight, hitArea, id, onClick, data, children, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, tabIndex, icon, iconPosition, ...restProps }: TextLinkButtonProps) => JSX.Element;
 
 type DisclosureBaseProps = {
     expandLabel: string;
@@ -3495,6 +3497,15 @@ type NoticeProps = {
 };
 declare const Notice$1: ({ tone, data, children, ...restProps }: NoticeProps) => JSX.Element;
 
+declare const validPageBlockComponents: readonly ["div", "article", "aside", "main", "section", "nav"];
+interface Props$1 {
+    children: ReactNode;
+    width?: Extract<ContentBlockProps['width'], 'medium' | 'large'>;
+    component?: (typeof validPageBlockComponents)[number];
+    data?: DataAttributeMap;
+}
+declare const PageBlock: ({ children, width, component: componentProp, data, ...restProps }: Props$1) => JSX.Element;
+
 interface PaginationProps {
     page: number;
     total: number;
@@ -3926,6 +3937,9 @@ declare const IconLocation: (props: IconLocationProps) => JSX.Element;
 type IconMailProps = UseIconProps;
 declare const IconMail: (props: IconMailProps) => JSX.Element;
 
+type IconMessageProps = UseIconProps;
+declare const IconMessage: (props: IconMessageProps) => JSX.Element;
+
 type IconMinusProps = UseIconProps;
 declare const IconMinus: (props: IconMinusProps) => JSX.Element;
 
@@ -5246,4 +5260,4 @@ declare const _default: {
     code: string;
 }[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, Box, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Breakpoint, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, LinkComponent, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu$1 as OverflowMenu, OverflowMenu as OverflowMenu$1, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, PublicBox, Radio$1 as Radio, Radio as Radio$1, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider$1 as TabsProvider, TabsProvider as TabsProvider$1, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer$1 as TooltipRenderer, TooltipRenderer as TooltipRenderer$1, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, responsiveStyle, useBreakpoint, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, Box, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Breakpoint, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, 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$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, LinkComponent, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu$1 as OverflowMenu, OverflowMenu as OverflowMenu$1, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, PublicBox, Radio$1 as Radio, Radio as Radio$1, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider$1 as TabsProvider, TabsProvider as TabsProvider$1, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer$1 as TooltipRenderer, TooltipRenderer as TooltipRenderer$1, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, responsiveStyle, useBreakpoint, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.5.0",
+  "version": "32.6.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -189,7 +189,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "11.9.2",
+    "sku": "11.11.0",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },
@@ -204,10 +204,12 @@
   "scripts": {
     "build": "crackle package",
     "codemod": "rm -rf ./codemod/dist && cp -r ../codemod/dist ./codemod/dist",
+    "preformat:eslint": "ignore-sync .eslintignore-sync",
     "format:eslint": "eslint --cache --fix .",
     "format:prettier": "prettier --cache --write .",
     "generate:icons": "tsx ./scripts/generateIcons.cts",
     "generate:snippets": "tsx ./scripts/generateSnippets.cts",
+    "prelint:eslint": "ignore-sync .eslintignore-sync",
     "lint:eslint": "eslint --cache .",
     "lint:prettier": "prettier --cache --list-different .",
     "lint:tsc": "tsc",