braid-design-system 33.2.2 → 33.3.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # braid-design-system
 
+## 33.3.0
+
+### Minor Changes
+
+- **Table:** Add component ([#1673](https://github.com/seek-oss/braid-design-system/pull/1673))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Table label="Table example">
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>...</TableHeaderCell>
+        <TableHeaderCell>...</TableHeaderCell>
+        <TableHeaderCell>...</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>...</TableCell>
+        <TableCell>...</TableCell>
+        <TableCell>...</TableCell>
+      </TableRow>
+      ...
+    </TableBody>
+  </Table>
+  ```
+
+- **MenuRenderer, OverflowMenu:** Add `small` size. ([#1675](https://github.com/seek-oss/braid-design-system/pull/1675))
+
+  Introduce a new `small` size for `MenuRenderer` and `OverflowMenu`.
+  This is available via the `size` prop, which supports the existing `standard` (default) and `small`.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <MenuRenderer size="small" ... />
+  ```
+
+### Patch Changes
+
+- **Tiles**: Fixes a bug where nested `Tiles` components could calculate their columns incorrectly. ([#1667](https://github.com/seek-oss/braid-design-system/pull/1667))
+
+  Previously, when using a `Tiles` component inside another `Tiles` component, the responsive column calculation could be incorrect in certain scenarios.
+  This change ensures nested `Tiles` elements always calculate their columns correctly.
+
+- **Button, ButtonLink:** Ensure inner label is full width ([#1671](https://github.com/seek-oss/braid-design-system/pull/1671))
+
+  Ensuring the inner label element is full width to maintain backwards compatibility with previous block layout.
+
+- **Columns:** Ensure component occupies available height ([#1672](https://github.com/seek-oss/braid-design-system/pull/1672))
+
+  Enables `Columns` content to occupy the available height of the parent container.
+
+- **AccordionItem**: Simplify internal layout. ([#1674](https://github.com/seek-oss/braid-design-system/pull/1674))
+
+- **Accordion, AccordionItem**: Adjust spacing values for improved visual balance. ([#1674](https://github.com/seek-oss/braid-design-system/pull/1674))
+
+  This change reduces the default spacing within `Accordion` and `AccordionItem` components at certain sizes, ensuring the content is better associated with the correct `AccordionItem`.
+
+  Within the `Accordion` component, the default space between `AccordionItem` components has been reduced for size `large` with dividers, and sizes `small` and `xsmall` without dividers.
+  Within the `AccordionItem` component, the space between the `label` and content has been reduced for sizes `large` and `small`.
+
 ## 33.2.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -62,6 +62,12 @@ const lib_components_Stack_Stack_cjs = require("./lib/components/Stack/Stack.cjs
 const lib_components_Stepper_Step_cjs = require("./lib/components/Stepper/Step.cjs");
 const lib_components_Stepper_Stepper_cjs = require("./lib/components/Stepper/Stepper.cjs");
 const lib_components_Strong_Strong_cjs = require("./lib/components/Strong/Strong.cjs");
+const lib_components_Table_Table_cjs = require("./lib/components/Table/Table.cjs");
+const lib_components_Table_TableBody_cjs = require("./lib/components/Table/TableBody.cjs");
+const lib_components_Table_TableCell_cjs = require("./lib/components/Table/TableCell.cjs");
+const lib_components_Table_TableFooter_cjs = require("./lib/components/Table/TableFooter.cjs");
+const lib_components_Table_TableHeader_cjs = require("./lib/components/Table/TableHeader.cjs");
+const lib_components_Table_TableRow_cjs = require("./lib/components/Table/TableRow.cjs");
 const lib_components_Tabs_Tab_cjs = require("./lib/components/Tabs/Tab.cjs");
 const lib_components_Tabs_TabsProvider_cjs = require("./lib/components/Tabs/TabsProvider.cjs");
 const lib_components_Tabs_Tabs_cjs = require("./lib/components/Tabs/Tabs.cjs");
@@ -243,6 +249,13 @@ exports.Stack = lib_components_Stack_Stack_cjs.Stack;
 exports.Step = lib_components_Stepper_Step_cjs.Step;
 exports.Stepper = lib_components_Stepper_Stepper_cjs.Stepper;
 exports.Strong = lib_components_Strong_Strong_cjs.Strong;
+exports.Table = lib_components_Table_Table_cjs.Table;
+exports.TableBody = lib_components_Table_TableBody_cjs.TableBody;
+exports.TableCell = lib_components_Table_TableCell_cjs.TableCell;
+exports.TableHeaderCell = lib_components_Table_TableCell_cjs.TableHeaderCell;
+exports.TableFooter = lib_components_Table_TableFooter_cjs.TableFooter;
+exports.TableHeader = lib_components_Table_TableHeader_cjs.TableHeader;
+exports.TableRow = lib_components_Table_TableRow_cjs.TableRow;
 exports.Tab = lib_components_Tabs_Tab_cjs.Tab;
 exports.TabsProvider = lib_components_Tabs_TabsProvider_cjs.TabsProvider;
 exports.Tabs = lib_components_Tabs_Tabs_cjs.Tabs;

package/dist/index.d.mts

@@ -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, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBookmark, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, 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, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './wireframe.chunk.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, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBookmark, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, 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, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './wireframe.chunk.js';

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, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBookmark, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, 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, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './wireframe.chunk.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, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBookmark, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialX, IconSocialYouTube, IconSort, 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, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './wireframe.chunk.js';

package/dist/index.mjs

@@ -60,6 +60,12 @@ import { Stack } from "./lib/components/Stack/Stack.mjs";
 import { Step } from "./lib/components/Stepper/Step.mjs";
 import { Stepper } from "./lib/components/Stepper/Stepper.mjs";
 import { Strong } from "./lib/components/Strong/Strong.mjs";
+import { Table } from "./lib/components/Table/Table.mjs";
+import { TableBody } from "./lib/components/Table/TableBody.mjs";
+import { TableCell, TableHeaderCell } from "./lib/components/Table/TableCell.mjs";
+import { TableFooter } from "./lib/components/Table/TableFooter.mjs";
+import { TableHeader } from "./lib/components/Table/TableHeader.mjs";
+import { TableRow } from "./lib/components/Table/TableRow.mjs";
 import { Tab } from "./lib/components/Tabs/Tab.mjs";
 import { TabsProvider } from "./lib/components/Tabs/TabsProvider.mjs";
 import { Tabs } from "./lib/components/Tabs/Tabs.mjs";
@@ -340,6 +346,13 @@ export {
   Tab,
   TabPanel,
   TabPanels,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
   Tabs,
   TabsProvider,
   Tag,

package/dist/lib/components/Accordion/Accordion.cjs

@@ -11,23 +11,24 @@ const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs")
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const validSpaceValues = ["medium", "large", "xlarge"];
+const defaultSize = "large";
 const defaultSpaceForSize = {
   divided: {
     xsmall: "medium",
     small: "medium",
     standard: "medium",
-    large: "large"
+    large: "medium"
   },
   undivided: {
-    xsmall: "large",
-    small: "large",
+    xsmall: "medium",
+    small: "medium",
     standard: "large",
     large: "large"
   }
 };
 const Accordion = ({
   children,
-  size = "large",
+  size = defaultSize,
   tone,
   weight,
   space: spaceProp,
@@ -72,4 +73,5 @@ const Accordion = ({
   ) });
 };
 exports.Accordion = Accordion;
+exports.defaultSize = defaultSize;
 exports.validSpaceValues = validSpaceValues;

package/dist/lib/components/Accordion/Accordion.mjs

@@ -8,23 +8,24 @@ import { Divider } from "../Divider/Divider.mjs";
 import { validTones, AccordionContext } from "./AccordionContext.mjs";
 import { flattenChildren } from "../../utils/flattenChildren.mjs";
 const validSpaceValues = ["medium", "large", "xlarge"];
+const defaultSize = "large";
 const defaultSpaceForSize = {
   divided: {
     xsmall: "medium",
     small: "medium",
     standard: "medium",
-    large: "large"
+    large: "medium"
   },
   undivided: {
-    xsmall: "large",
-    small: "large",
+    xsmall: "medium",
+    small: "medium",
     standard: "large",
     large: "large"
   }
 };
 const Accordion = ({
   children,
-  size = "large",
+  size = defaultSize,
   tone,
   weight,
   space: spaceProp,
@@ -70,5 +71,6 @@ const Accordion = ({
 };
 export {
   Accordion,
+  defaultSize,
   validSpaceValues
 };

package/dist/lib/components/Accordion/AccordionItem.cjs

@@ -4,23 +4,24 @@ const React = require("react");
 const assert = require("assert");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
-const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
-const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
 const lib_components_Disclosure_useDisclosure_cjs = require("../Disclosure/useDisclosure.cjs");
 const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
 const lib_components_Accordion_AccordionContext_cjs = require("./AccordionContext.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_private_badgeSlotSpace_cjs = require("../private/badgeSlotSpace.cjs");
 const lib_components_Accordion_AccordionItem_css_cjs = require("./AccordionItem.css.cjs");
+const lib_components_Spread_Spread_cjs = require("../Spread/Spread.cjs");
+const lib_components_Accordion_Accordion_cjs = require("./Accordion.cjs");
+const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
 const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
 const lib_components_private_hideFocusRings_hideFocusRings_css_cjs = require("../private/hideFocusRings/hideFocusRings.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const itemSpaceForSize = {
   xsmall: "small",
-  small: "medium",
+  small: "small",
   standard: "medium",
-  large: "large"
+  large: "medium"
 };
 const AccordionItem = ({
   id,
@@ -64,7 +65,7 @@ const AccordionItem = ({
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
   );
-  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? "large";
+  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? lib_components_Accordion_Accordion_cjs.defaultSize;
   const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
   const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
   const itemSpace = itemSpaceForSize[size] ?? "none";
@@ -81,55 +82,54 @@ const AccordionItem = ({
       onToggle: restProps.onToggle
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", display: "flex", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_Box_Box_cjs.Box,
-        {
-          component: "button",
-          type: "button",
-          cursor: "pointer",
-          className: lib_components_Accordion_AccordionItem_css_cjs.button,
-          outline: "none",
-          width: "full",
-          textAlign: "left",
-          ...buttonProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { component: "span", space: itemSpace, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { size, weight, tone, icon, children: [
-              badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingRight: lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace, children: label }) : label,
-              badge ? React.cloneElement(badge, {}) : null
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-              lib_components_Text_Text_cjs.Text,
-              {
-                size,
-                weight,
-                tone: tone === "neutral" ? "secondary" : tone,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down" })
-              }
-            ) })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_private_Overlay_Overlay_cjs.Overlay,
-        {
-          boxShadow: "outlineFocus",
-          borderRadius: "standard",
-          transition: "fast",
-          className: [lib_components_Accordion_AccordionItem_css_cjs.focusRing, lib_components_private_hideFocusRings_hideFocusRings_css_cjs.hideFocusRingsClassName]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
-      {
-        paddingTop: itemSpace,
-        display: expanded ? "block" : "none",
-        ...contentProps,
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Stack_Stack_cjs.Stack,
+    {
+      space: itemSpace,
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", display: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "button",
+              type: "button",
+              cursor: "pointer",
+              className: lib_components_Accordion_AccordionItem_css_cjs.button,
+              outline: "none",
+              width: "full",
+              textAlign: "left",
+              ...buttonProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Spread_Spread_cjs.Spread, { component: "span", space: itemSpace, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { size, weight, tone, icon, children: [
+                  badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingRight: lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace, children: label }) : label,
+                  badge ? React.cloneElement(badge, {}) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_Text_Text_cjs.Text,
+                  {
+                    size,
+                    weight,
+                    tone: tone === "neutral" ? "secondary" : tone,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down" })
+                  }
+                )
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_private_Overlay_Overlay_cjs.Overlay,
+            {
+              boxShadow: "outlineFocus",
+              borderRadius: "standard",
+              transition: "fast",
+              className: [lib_components_Accordion_AccordionItem_css_cjs.focusRing, lib_components_private_hideFocusRings_hideFocusRings_css_cjs.hideFocusRingsClassName]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { display: expanded ? "block" : "none", ...contentProps, children })
+      ]
+    }
+  );
 };
 exports.AccordionItem = AccordionItem;

package/dist/lib/components/Accordion/AccordionItem.mjs

@@ -3,21 +3,22 @@ import { useContext, cloneElement } from "react";
 import assert from "assert";
 import { Box } from "../Box/Box.mjs";
 import { Text } from "../Text/Text.mjs";
-import { Columns } from "../Columns/Columns.mjs";
-import { Column } from "../Column/Column.mjs";
 import { useDisclosure } from "../Disclosure/useDisclosure.mjs";
 import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { AccordionContext, validTones } from "./AccordionContext.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { badgeSlotSpace } from "../private/badgeSlotSpace.mjs";
 import { button, focusRing } from "./AccordionItem.css.mjs";
+import { Spread } from "../Spread/Spread.mjs";
+import { defaultSize } from "./Accordion.mjs";
+import { Stack } from "../Stack/Stack.mjs";
 import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
 import { hideFocusRingsClassName } from "../private/hideFocusRings/hideFocusRings.css.mjs";
 const itemSpaceForSize = {
   xsmall: "small",
-  small: "medium",
+  small: "small",
   standard: "medium",
-  large: "large"
+  large: "medium"
 };
 const AccordionItem = ({
   id,
@@ -61,7 +62,7 @@ const AccordionItem = ({
     !icon || icon.props.size === void 0 && icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
   );
-  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? "large";
+  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? defaultSize;
   const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
   const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
   const itemSpace = itemSpaceForSize[size] ?? "none";
@@ -78,56 +79,55 @@ const AccordionItem = ({
       onToggle: restProps.onToggle
     }
   });
-  return /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxs(Box, { position: "relative", display: "flex", children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "button",
-          type: "button",
-          cursor: "pointer",
-          className: button,
-          outline: "none",
-          width: "full",
-          textAlign: "left",
-          ...buttonProps,
-          children: /* @__PURE__ */ jsx(Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxs(Columns, { component: "span", space: itemSpace, children: [
-            /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(Text, { size, weight, tone, icon, children: [
-              badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: badgeSlotSpace, children: label }) : label,
-              badge ? cloneElement(badge, {}) : null
-            ] }) }),
-            /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                size,
-                weight,
-                tone: tone === "neutral" ? "secondary" : tone,
-                children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down" })
-              }
-            ) })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Overlay,
-        {
-          boxShadow: "outlineFocus",
-          borderRadius: "standard",
-          transition: "fast",
-          className: [focusRing, hideFocusRingsClassName]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        paddingTop: itemSpace,
-        display: expanded ? "block" : "none",
-        ...contentProps,
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      space: itemSpace,
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { position: "relative", display: "flex", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "button",
+              type: "button",
+              cursor: "pointer",
+              className: button,
+              outline: "none",
+              width: "full",
+              textAlign: "left",
+              ...buttonProps,
+              children: /* @__PURE__ */ jsx(Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxs(Spread, { component: "span", space: itemSpace, children: [
+                /* @__PURE__ */ jsxs(Text, { size, weight, tone, icon, children: [
+                  badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: badgeSlotSpace, children: label }) : label,
+                  badge ? cloneElement(badge, {}) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size,
+                    weight,
+                    tone: tone === "neutral" ? "secondary" : tone,
+                    children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down" })
+                  }
+                )
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Overlay,
+            {
+              boxShadow: "outlineFocus",
+              borderRadius: "standard",
+              transition: "fast",
+              className: [focusRing, hideFocusRingsClassName]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { display: expanded ? "block" : "none", ...contentProps, children })
+      ]
+    }
+  );
 };
 export {
   AccordionItem

package/dist/lib/components/Badge/Badge.cjs

@@ -10,6 +10,7 @@ const lib_components_private_defaultTextProps_cjs = require("../private/defaultT
 const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
 const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
 const lib_components_Badge_Badge_css_cjs = require("./Badge.css.cjs");
+const lib_components_Badge_defaultBadgeProps_cjs = require("./defaultBadgeProps.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const validTones = [
@@ -41,7 +42,7 @@ const Badge = React.forwardRef(
   ({
     tone = "info",
     weight = "regular",
-    bleedY = false,
+    bleedY: bleedYProp,
     title,
     children,
     id,
@@ -64,9 +65,10 @@ const Badge = React.forwardRef(
     const headingContext = React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext);
     const isInline = Boolean(textContext || headingContext);
     assert__default.default(
-      !isInline || isInline && bleedY === false,
+      !isInline || isInline && typeof bleedYProp === "undefined",
       "A `Badge` cannot use `bleedY` when rendered inside a `Text` or `Heading` component."
     );
+    const { bleedY } = lib_components_Badge_defaultBadgeProps_cjs.useDefaultBadgeProps({ bleedY: bleedYProp });
     const content = (
       // Ensures the foreground text tone follows the default
       // for the selected background colour
@@ -93,7 +95,7 @@ const Badge = React.forwardRef(
         }
       ) }) })
     );
-    return bleedY ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Bleed_Bleed_cjs.Bleed, { component: "span", vertical: lib_components_Badge_Badge_css_cjs.verticalPadding, children: content }) : content;
+    return bleedY && !isInline ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Bleed_Bleed_cjs.Bleed, { component: "span", vertical: lib_components_Badge_Badge_css_cjs.verticalPadding, children: content }) : content;
   }
 );
 Badge.displayName = "Badge";

package/dist/lib/components/Badge/Badge.mjs

@@ -9,6 +9,7 @@ import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { TextContext } from "../Text/TextContext.mjs";
 import { HeadingContext } from "../Heading/HeadingContext.mjs";
 import { verticalPadding, inline } from "./Badge.css.mjs";
+import { useDefaultBadgeProps } from "./defaultBadgeProps.mjs";
 const validTones = [
   "promote",
   "info",
@@ -38,7 +39,7 @@ const Badge = forwardRef(
   ({
     tone = "info",
     weight = "regular",
-    bleedY = false,
+    bleedY: bleedYProp,
     title,
     children,
     id,
@@ -61,9 +62,10 @@ const Badge = forwardRef(
     const headingContext = useContext(HeadingContext);
     const isInline = Boolean(textContext || headingContext);
     assert(
-      !isInline || isInline && bleedY === false,
+      !isInline || isInline && typeof bleedYProp === "undefined",
       "A `Badge` cannot use `bleedY` when rendered inside a `Text` or `Heading` component."
     );
+    const { bleedY } = useDefaultBadgeProps({ bleedY: bleedYProp });
     const content = (
       // Ensures the foreground text tone follows the default
       // for the selected background colour
@@ -90,7 +92,7 @@ const Badge = forwardRef(
         }
       ) }) })
     );
-    return bleedY ? /* @__PURE__ */ jsx(Bleed, { component: "span", vertical: verticalPadding, children: content }) : content;
+    return bleedY && !isInline ? /* @__PURE__ */ jsx(Bleed, { component: "span", vertical: verticalPadding, children: content }) : content;
   }
 );
 Badge.displayName = "Badge";

package/dist/lib/components/Badge/defaultBadgeProps.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DefaultBadgePropsContext = React.createContext({
+  bleedY: void 0
+});
+const DefaultBadgePropsProvider = ({
+  bleedY,
+  children
+}) => {
+  const defaultBadgeProps = React.useMemo(
+    () => ({
+      bleedY
+    }),
+    [bleedY]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultBadgePropsContext.Provider, { value: defaultBadgeProps, children });
+};
+const useDefaultBadgeProps = ({
+  bleedY: bleedYProp
+}) => {
+  const { bleedY } = React.useContext(DefaultBadgePropsContext);
+  return {
+    bleedY: bleedYProp ?? bleedY ?? false
+  };
+};
+exports.DefaultBadgePropsProvider = DefaultBadgePropsProvider;
+exports.useDefaultBadgeProps = useDefaultBadgeProps;

package/dist/lib/components/Badge/defaultBadgeProps.mjs

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const DefaultBadgePropsContext = createContext({
+  bleedY: void 0
+});
+const DefaultBadgePropsProvider = ({
+  bleedY,
+  children
+}) => {
+  const defaultBadgeProps = useMemo(
+    () => ({
+      bleedY
+    }),
+    [bleedY]
+  );
+  return /* @__PURE__ */ jsx(DefaultBadgePropsContext.Provider, { value: defaultBadgeProps, children });
+};
+const useDefaultBadgeProps = ({
+  bleedY: bleedYProp
+}) => {
+  const { bleedY } = useContext(DefaultBadgePropsContext);
+  return {
+    bleedY: bleedYProp ?? bleedY ?? false
+  };
+};
+export {
+  DefaultBadgePropsProvider,
+  useDefaultBadgeProps
+};