braid-design-system 33.0.0 → 33.1.0

package/CHANGELOG.md

@@ -1,10 +1,66 @@
 # braid-design-system
 
+## 33.1.0
+
+### Minor Changes
+
+- **IconLicence:** Add component ([#1640](https://github.com/seek-oss/braid-design-system/pull/1640))
+
+  Add `IconLicence` to icon suite
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconLicence />
+  ```
+
+- **IconAttachment:** Add component ([#1635](https://github.com/seek-oss/braid-design-system/pull/1635))
+
+  Add `IconAttachment` to icon suite
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconAttachment />
+  ```
+
+- **Disclosure:** Add `size` support ([#1633](https://github.com/seek-oss/braid-design-system/pull/1633))
+
+  Introduce the `size` prop to the `Disclosure` component, providing the same options as the `Text` component.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Disclosure size="small">...</Disclosure>
+  ```
+
+### Patch Changes
+
+- Standardise icon slot spacing ([#1638](https://github.com/seek-oss/braid-design-system/pull/1638))
+
+  Normalise the space between the `icon` slot and component content across the system.
+
+- **Rating:** Simplify internal layout ([#1638](https://github.com/seek-oss/braid-design-system/pull/1638))
+
+  Simplify the internal HTML and layout of the `Rating` component.
+  This change should not affect the appearance or behavior of the component.
+
+- Remove lodash dependency ([#1639](https://github.com/seek-oss/braid-design-system/pull/1639))
+
+- **useToast**: Ensure content is left aligned ([#1630](https://github.com/seek-oss/braid-design-system/pull/1630))
+
+  Applies left alignment to `Toast` content to ensure intended alignment, regardless of other styles applied.
+
+- **IconRocket:** Update design ([#1636](https://github.com/seek-oss/braid-design-system/pull/1636))
+
+  Update the design asset for `IconRocket`
+
 ## 33.0.0
 
 This release is a huge milestone for Braid with upgrades occurring across a number of key areas:
 
 ### Migrate layout components to [CSS Gap]
+
 With SEEKs Browser Support Policy now enabling adoption of [CSS gap], Braid's layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management.
 
 The result is on average our experiences receive around a 20% reduction in DOM elements, more performant rendering, better composability without the introduction of intermediary elements and a better debug experience in dev tools.
@@ -12,17 +68,19 @@ The result is on average our experiences receive around a 20% reduction in DOM e
 The key tradeoff is the removal of `dividers` functionality which is explained further [here].
 
 ### Reduce `gutter` size in `seekJobs` theme
+
 The size of the `gutter` token on the `seekJobs` theme has been reduced from `large` (i.e. 32px), to `medium` (i.e. 24px).
 This is a semantic token that runs through many system components, and consumer should perform a visual design audit to ensure experiences are laid out as intended.
 
 ### Other key changes
+
 - Remove support for React v17.x
 - Removal of deprecated features
 
 [CSS Gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
 [here]: https://github.com/seek-oss/braid-design-system/blob/8177e4c6b502536e8f37811f5eef735ff265f1c6/docs/Removing%20dividers%20support%20from%20layout%20components.md
 
-See full changelog below 👇 
+See full changelog below 👇
 
 ### Major Changes
 

package/dist/index.cjs

@@ -81,6 +81,7 @@ const lib_components_TooltipRenderer_TooltipRenderer_cjs = require("./lib/compon
 const lib_components_icons_IconAI_IconAI_cjs = require("./lib/components/icons/IconAI/IconAI.cjs");
 const lib_components_icons_IconAdd_IconAdd_cjs = require("./lib/components/icons/IconAdd/IconAdd.cjs");
 const lib_components_icons_IconArrow_IconArrow_cjs = require("./lib/components/icons/IconArrow/IconArrow.cjs");
+const lib_components_icons_IconAttachment_IconAttachment_cjs = require("./lib/components/icons/IconAttachment/IconAttachment.cjs");
 const lib_components_icons_IconBookmark_IconBookmark_cjs = require("./lib/components/icons/IconBookmark/IconBookmark.cjs");
 const lib_components_icons_IconCareer_IconCareer_cjs = require("./lib/components/icons/IconCareer/IconCareer.cjs");
 const lib_components_icons_IconCategory_IconCategory_cjs = require("./lib/components/icons/IconCategory/IconCategory.cjs");
@@ -116,6 +117,7 @@ const lib_components_icons_IconImage_IconImage_cjs = require("./lib/components/i
 const lib_components_icons_IconInfo_IconInfo_cjs = require("./lib/components/icons/IconInfo/IconInfo.cjs");
 const lib_components_icons_IconInvoice_IconInvoice_cjs = require("./lib/components/icons/IconInvoice/IconInvoice.cjs");
 const lib_components_icons_IconLanguage_IconLanguage_cjs = require("./lib/components/icons/IconLanguage/IconLanguage.cjs");
+const lib_components_icons_IconLicence_IconLicence_cjs = require("./lib/components/icons/IconLicence/IconLicence.cjs");
 const lib_components_icons_IconLink_IconLink_cjs = require("./lib/components/icons/IconLink/IconLink.cjs");
 const lib_components_icons_IconLinkBroken_IconLinkBroken_cjs = require("./lib/components/icons/IconLinkBroken/IconLinkBroken.cjs");
 const lib_components_icons_IconList_IconList_cjs = require("./lib/components/icons/IconList/IconList.cjs");
@@ -256,6 +258,7 @@ exports.TooltipRenderer = lib_components_TooltipRenderer_TooltipRenderer_cjs.Too
 exports.IconAI = lib_components_icons_IconAI_IconAI_cjs.IconAI;
 exports.IconAdd = lib_components_icons_IconAdd_IconAdd_cjs.IconAdd;
 exports.IconArrow = lib_components_icons_IconArrow_IconArrow_cjs.IconArrow;
+exports.IconAttachment = lib_components_icons_IconAttachment_IconAttachment_cjs.IconAttachment;
 exports.IconBookmark = lib_components_icons_IconBookmark_IconBookmark_cjs.IconBookmark;
 exports.IconCareer = lib_components_icons_IconCareer_IconCareer_cjs.IconCareer;
 exports.IconCategory = lib_components_icons_IconCategory_IconCategory_cjs.IconCategory;
@@ -291,6 +294,7 @@ exports.IconImage = lib_components_icons_IconImage_IconImage_cjs.IconImage;
 exports.IconInfo = lib_components_icons_IconInfo_IconInfo_cjs.IconInfo;
 exports.IconInvoice = lib_components_icons_IconInvoice_IconInvoice_cjs.IconInvoice;
 exports.IconLanguage = lib_components_icons_IconLanguage_IconLanguage_cjs.IconLanguage;
+exports.IconLicence = lib_components_icons_IconLicence_IconLicence_cjs.IconLicence;
 exports.IconLink = lib_components_icons_IconLink_IconLink_cjs.IconLink;
 exports.IconLinkBroken = lib_components_icons_IconLinkBroken_IconLinkBroken_cjs.IconLinkBroken;
 exports.IconList = lib_components_icons_IconList_IconList_cjs.IconList;

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, IconBookmark, IconCareer, IconCategory, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, 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, 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, IconBookmark, IconCareer, IconCategory, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, 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, 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';

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, IconBookmark, IconCareer, IconCategory, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, 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, 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, IconBookmark, IconCareer, IconCategory, IconCaution, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, 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, 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';

package/dist/index.mjs

@@ -79,6 +79,7 @@ import { TooltipRenderer } from "./lib/components/TooltipRenderer/TooltipRendere
 import { IconAI } from "./lib/components/icons/IconAI/IconAI.mjs";
 import { IconAdd } from "./lib/components/icons/IconAdd/IconAdd.mjs";
 import { IconArrow } from "./lib/components/icons/IconArrow/IconArrow.mjs";
+import { IconAttachment } from "./lib/components/icons/IconAttachment/IconAttachment.mjs";
 import { IconBookmark } from "./lib/components/icons/IconBookmark/IconBookmark.mjs";
 import { IconCareer } from "./lib/components/icons/IconCareer/IconCareer.mjs";
 import { IconCategory } from "./lib/components/icons/IconCategory/IconCategory.mjs";
@@ -114,6 +115,7 @@ import { IconImage } from "./lib/components/icons/IconImage/IconImage.mjs";
 import { IconInfo } from "./lib/components/icons/IconInfo/IconInfo.mjs";
 import { IconInvoice } from "./lib/components/icons/IconInvoice/IconInvoice.mjs";
 import { IconLanguage } from "./lib/components/icons/IconLanguage/IconLanguage.mjs";
+import { IconLicence } from "./lib/components/icons/IconLicence/IconLicence.mjs";
 import { IconLink } from "./lib/components/icons/IconLink/IconLink.mjs";
 import { IconLinkBroken } from "./lib/components/icons/IconLinkBroken/IconLinkBroken.mjs";
 import { IconList } from "./lib/components/icons/IconList/IconList.mjs";
@@ -205,6 +207,7 @@ export {
   IconAI,
   IconAdd,
   IconArrow,
+  IconAttachment,
   IconBookmark,
   IconCareer,
   IconCategory,
@@ -240,6 +243,7 @@ export {
   IconInfo,
   IconInvoice,
   IconLanguage,
+  IconLicence,
   IconLink,
   IconLinkBroken,
   IconList,

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

@@ -10,6 +10,7 @@ const lib_components_Disclosure_useDisclosure_cjs = require("../Disclosure/useDi
 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_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
 const lib_components_private_hideFocusRings_hideFocusRings_css_cjs = require("../private/hideFocusRings/hideFocusRings.css.cjs");
@@ -95,7 +96,7 @@ const AccordionItem = ({
           ...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: "xsmall", children: label }) : label,
+              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(

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

@@ -9,6 +9,7 @@ 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 { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
 import { hideFocusRingsClassName } from "../private/hideFocusRings/hideFocusRings.css.mjs";
@@ -92,7 +93,7 @@ const AccordionItem = ({
           ...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: "xsmall", children: label }) : label,
+              badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: badgeSlotSpace, children: label }) : label,
               badge ? cloneElement(badge, {}) : null
             ] }) }),
             /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(

package/dist/lib/components/Button/Button.cjs

@@ -285,7 +285,6 @@ const ButtonText = ({
               lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon,
               {
                 iconPosition,
-                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", "xxsmall"),
                 children: icon
               }
@@ -296,7 +295,6 @@ const ButtonText = ({
               lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon,
               {
                 iconPosition,
-                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("right", "xxsmall"),
                 children: icon
               }

package/dist/lib/components/Button/Button.mjs

@@ -282,7 +282,6 @@ const ButtonText = ({
               AvoidWidowIcon,
               {
                 iconPosition,
-                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : negativeMargin("left", "xxsmall"),
                 children: icon
               }
@@ -293,7 +292,6 @@ const ButtonText = ({
               AvoidWidowIcon,
               {
                 iconPosition,
-                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : negativeMargin("right", "xxsmall"),
                 children: icon
               }

package/dist/lib/components/Disclosure/Disclosure.cjs

@@ -10,14 +10,22 @@ const lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs = require("../pri
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
 const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
+const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
 const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const defaultSpaceForSize = {
+  large: "medium",
+  standard: "medium",
+  xsmall: "small",
+  small: "small"
+};
 const Disclosure = ({
   id,
   expandLabel,
   collapseLabel = expandLabel,
-  space = "medium",
+  space,
+  size: sizeProp,
   children,
   data,
   weight,
@@ -34,6 +42,10 @@ const Disclosure = ({
   const textContext = React.useContext(lib_components_Text_TextContext_cjs.TextContext);
   const headingContext = React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext);
   const isInline = Boolean(textContext || headingContext);
+  assert__default.default(
+    typeof sizeProp === "undefined" || !isInline,
+    `Specifying a custom \`size\` for a \`Disclosure\` inside the context of a \`<${textContext ? "Text" : "Heading"}>\` component is invalid. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Disclosure`
+  );
   const { expanded, buttonProps, contentProps } = lib_components_Disclosure_useDisclosure_cjs.useDisclosure({
     id,
     ...restProps.expanded !== void 0 ? {
@@ -43,6 +55,14 @@ const Disclosure = ({
       onToggle: restProps.onToggle
     }
   });
+  const size = sizeProp ?? (textContext == null ? void 0 : textContext.size) ?? "standard";
+  const defaultSpace = isInline ? (
+    /*
+     * If inline, only use `xxsmall` space between the trigger and the content
+     * to compensate for the additional space created by the line height of text.
+     */
+    "xxsmall"
+  ) : defaultSpaceForSize[size];
   const trigger = /* @__PURE__ */ jsxRuntime.jsxs(lib_components_TextLinkButton_TextLinkButton_cjs.TextLinkButton, { hitArea: "large", weight, ...buttonProps, children: [
     expanded ? collapseLabel : expandLabel,
     /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon, { iconPosition: "trailing", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down", alignY: "lowercase" }) })
@@ -64,17 +84,17 @@ const Disclosure = ({
             children: isInline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               " ",
               trigger
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { children: trigger })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size, children: trigger })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           lib_components_Box_Box_cjs.Box,
           {
             component,
-            paddingTop: space,
+            paddingTop: space ?? defaultSpace,
             display: expanded ? "block" : "none",
             ...contentProps,
-            children
+            children: isInline ? children : /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_defaultTextProps_cjs.DefaultTextPropsProvider, { size, children })
           }
         )
       ]

package/dist/lib/components/Disclosure/Disclosure.mjs

@@ -9,12 +9,20 @@ import { AvoidWidowIcon } from "../private/AvoidWidowIcon/AvoidWidowIcon.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { TextContext } from "../Text/TextContext.mjs";
 import { HeadingContext } from "../Heading/HeadingContext.mjs";
+import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
+const defaultSpaceForSize = {
+  large: "medium",
+  standard: "medium",
+  xsmall: "small",
+  small: "small"
+};
 const Disclosure = ({
   id,
   expandLabel,
   collapseLabel = expandLabel,
-  space = "medium",
+  space,
+  size: sizeProp,
   children,
   data,
   weight,
@@ -31,6 +39,10 @@ const Disclosure = ({
   const textContext = useContext(TextContext);
   const headingContext = useContext(HeadingContext);
   const isInline = Boolean(textContext || headingContext);
+  assert(
+    typeof sizeProp === "undefined" || !isInline,
+    `Specifying a custom \`size\` for a \`Disclosure\` inside the context of a \`<${textContext ? "Text" : "Heading"}>\` component is invalid. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Disclosure`
+  );
   const { expanded, buttonProps, contentProps } = useDisclosure({
     id,
     ...restProps.expanded !== void 0 ? {
@@ -40,6 +52,14 @@ const Disclosure = ({
       onToggle: restProps.onToggle
     }
   });
+  const size = sizeProp ?? (textContext == null ? void 0 : textContext.size) ?? "standard";
+  const defaultSpace = isInline ? (
+    /*
+     * If inline, only use `xxsmall` space between the trigger and the content
+     * to compensate for the additional space created by the line height of text.
+     */
+    "xxsmall"
+  ) : defaultSpaceForSize[size];
   const trigger = /* @__PURE__ */ jsxs(TextLinkButton, { hitArea: "large", weight, ...buttonProps, children: [
     expanded ? collapseLabel : expandLabel,
     /* @__PURE__ */ jsx(AvoidWidowIcon, { iconPosition: "trailing", children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down", alignY: "lowercase" }) })
@@ -61,17 +81,17 @@ const Disclosure = ({
             children: isInline ? /* @__PURE__ */ jsxs(Fragment, { children: [
               " ",
               trigger
-            ] }) : /* @__PURE__ */ jsx(Text, { children: trigger })
+            ] }) : /* @__PURE__ */ jsx(Text, { size, children: trigger })
           }
         ),
         /* @__PURE__ */ jsx(
           Box,
           {
             component,
-            paddingTop: space,
+            paddingTop: space ?? defaultSpace,
             display: expanded ? "block" : "none",
             ...contentProps,
-            children
+            children: isInline ? children : /* @__PURE__ */ jsx(DefaultTextPropsProvider, { size, children })
           }
         )
       ]

package/dist/lib/components/Inline/Inline.playroom.cjs

@@ -2,13 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const lib_playroom_cleanSpaceValue_cjs = require("../../playroom/cleanSpaceValue.cjs");
 const lib_components_Inline_Inline_cjs = require("./Inline.cjs");
-const Inline = ({
-  space,
-  align,
-  alignY,
-  component,
-  ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+const Inline = ({ space, align, alignY, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
   lib_components_Inline_Inline_cjs.Inline,
   {
     space: lib_playroom_cleanSpaceValue_cjs.cleanSpaceValue(space) || "none",

package/dist/lib/components/Inline/Inline.playroom.mjs

@@ -1,13 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cleanSpaceValue } from "../../playroom/cleanSpaceValue.mjs";
 import { Inline as Inline$1 } from "./Inline.mjs";
-const Inline = ({
-  space,
-  align,
-  alignY,
-  component,
-  ...restProps
-}) => /* @__PURE__ */ jsx(
+const Inline = ({ space, align, alignY, ...restProps }) => /* @__PURE__ */ jsx(
   Inline$1,
   {
     space: cleanSpaceValue(space) || "none",

package/dist/lib/components/MenuItem/useMenuItem.cjs

@@ -13,6 +13,9 @@ const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
 const lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
 const lib_components_MenuItem_useMenuItem_css_cjs = require("./useMenuItem.css.cjs");
 const lib_components_MenuRenderer_MenuRendererContext_cjs = require("../MenuRenderer/MenuRendererContext.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_private_iconSlotSpace_cjs = require("../private/iconSlotSpace.cjs");
+const lib_components_private_badgeSlotSpace_cjs = require("../private/badgeSlotSpace.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const {
@@ -26,7 +29,6 @@ const {
   MENU_ITEM_HOVER
 } = lib_components_MenuRenderer_MenuRenderer_actions_cjs.actionTypes;
 const menuItemChildrenSize = "standard";
-const menuItemPaddingSize = "small";
 function useMenuItem({
   displayName = "MenuItem",
   formElement = false,
@@ -109,7 +111,7 @@ function useMenuItem({
         lib_css_atoms_atoms_cjs.atoms({
           display: "block",
           width: "full",
-          paddingX: menuItemPaddingSize,
+          paddingX: "small",
           cursor: "pointer",
           textAlign: "left",
           outline: "none"
@@ -127,6 +129,9 @@ function MenuItemChildren({
   formElement = false
 }) {
   const menuRendererContext = React.useContext(lib_components_MenuRenderer_MenuRendererContext_cjs.MenuRendererContext);
+  const legacy = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
+  const iconSpace = legacy ? "small" : lib_components_private_iconSlotSpace_cjs.iconSlotSpace;
+  const badgeSpace = legacy ? "small" : lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace;
   assert__default.default(
     menuRendererContext !== null,
     `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
@@ -157,7 +162,7 @@ function MenuItemChildren({
       lib_components_Box_Box_cjs.Box,
       {
         component: "span",
-        paddingRight: menuItemPaddingSize,
+        paddingRight: iconSpace,
         flexShrink: 0,
         minWidth: 0,
         children: leftSlot
@@ -177,7 +182,7 @@ function MenuItemChildren({
       lib_components_Box_Box_cjs.Box,
       {
         component: "span",
-        paddingLeft: menuItemPaddingSize,
+        paddingLeft: badgeSpace,
         flexShrink: 0,
         minWidth: 0,
         children: badge

package/dist/lib/components/MenuItem/useMenuItem.mjs

@@ -12,6 +12,9 @@ import { atoms } from "../../css/atoms/atoms.mjs";
 import { iconSize } from "../../hooks/useIcon/index.mjs";
 import { menuItem } from "./useMenuItem.css.mjs";
 import { MenuRendererContext } from "../MenuRenderer/MenuRendererContext.mjs";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
+import { badgeSlotSpace } from "../private/badgeSlotSpace.mjs";
 const {
   MENU_ITEM_UP,
   MENU_ITEM_DOWN,
@@ -23,7 +26,6 @@ const {
   MENU_ITEM_HOVER
 } = actionTypes;
 const menuItemChildrenSize = "standard";
-const menuItemPaddingSize = "small";
 function useMenuItem({
   displayName = "MenuItem",
   formElement = false,
@@ -106,7 +108,7 @@ function useMenuItem({
         atoms({
           display: "block",
           width: "full",
-          paddingX: menuItemPaddingSize,
+          paddingX: "small",
           cursor: "pointer",
           textAlign: "left",
           outline: "none"
@@ -124,6 +126,9 @@ function MenuItemChildren({
   formElement = false
 }) {
   const menuRendererContext = useContext(MenuRendererContext);
+  const legacy = useBraidTheme().legacy;
+  const iconSpace = legacy ? "small" : iconSlotSpace;
+  const badgeSpace = legacy ? "small" : badgeSlotSpace;
   assert(
     menuRendererContext !== null,
     `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
@@ -154,7 +159,7 @@ function MenuItemChildren({
       Box,
       {
         component: "span",
-        paddingRight: menuItemPaddingSize,
+        paddingRight: iconSpace,
         flexShrink: 0,
         minWidth: 0,
         children: leftSlot
@@ -174,7 +179,7 @@ function MenuItemChildren({
       Box,
       {
         component: "span",
-        paddingLeft: menuItemPaddingSize,
+        paddingLeft: badgeSpace,
         flexShrink: 0,
         minWidth: 0,
         children: badge

package/dist/lib/components/MenuItemCheckbox/MenuItemCheckbox.cjs

@@ -3,6 +3,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_icons_IconTick_IconTick_cjs = require("../icons/IconTick/IconTick.cjs");
 const lib_components_MenuItem_useMenuItem_cjs = require("../MenuItem/useMenuItem.cjs");
+const lib_components_private_iconSlotSpace_cjs = require("../private/iconSlotSpace.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
 const lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./MenuItemCheckbox.css.cjs");
 const MenuItemCheckbox = ({
   children,
@@ -18,6 +20,8 @@ const MenuItemCheckbox = ({
     data,
     id
   });
+  const legacy = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
+  const iconSpace = legacy ? "xsmall" : lib_components_private_iconSlotSpace_cjs.iconSlotSpace;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     lib_components_Box_Box_cjs.Box,
     {
@@ -37,7 +41,7 @@ const MenuItemCheckbox = ({
             boxShadow: "borderField",
             position: "relative",
             background: { lightMode: "surface" },
-            marginRight: "xsmall",
+            marginRight: iconSpace,
             flexShrink: 0,
             className: lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
             children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/lib/components/MenuItemCheckbox/MenuItemCheckbox.mjs

@@ -2,6 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { IconTick } from "../icons/IconTick/IconTick.mjs";
 import { useMenuItem } from "../MenuItem/useMenuItem.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
 import { checkboxSize } from "./MenuItemCheckbox.css.mjs";
 const MenuItemCheckbox = ({
   children,
@@ -17,6 +19,8 @@ const MenuItemCheckbox = ({
     data,
     id
   });
+  const legacy = useBraidTheme().legacy;
+  const iconSpace = legacy ? "xsmall" : iconSlotSpace;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -36,7 +40,7 @@ const MenuItemCheckbox = ({
             boxShadow: "borderField",
             position: "relative",
             background: { lightMode: "surface" },
-            marginRight: "xsmall",
+            marginRight: iconSpace,
             flexShrink: 0,
             className: checkboxSize,
             children: /* @__PURE__ */ jsx(

package/dist/lib/components/Notice/Notice.cjs

@@ -6,6 +6,7 @@ const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
 const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_private_iconSlotSpace_cjs = require("../private/iconSlotSpace.cjs");
 const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
 const lib_components_icons_IconInfo_IconInfo_cjs = require("../icons/IconInfo/IconInfo.cjs");
 const lib_components_icons_IconPromote_IconPromote_cjs = require("../icons/IconPromote/IconPromote.cjs");
@@ -30,7 +31,7 @@ const Notice = ({
       "aria-live": "polite",
       textAlign: "left",
       ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_defaultTextProps_cjs.DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "xsmall", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_defaultTextProps_cjs.DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: lib_components_private_iconSlotSpace_cjs.iconSlotSpace, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children })
       ] }) })

package/dist/lib/components/Notice/Notice.mjs

@@ -5,6 +5,7 @@ import { Box } from "../Box/Box.mjs";
 import { Text } from "../Text/Text.mjs";
 import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
 import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
 import { IconInfo } from "../icons/IconInfo/IconInfo.mjs";
 import { IconPromote } from "../icons/IconPromote/IconPromote.mjs";
@@ -29,7 +30,7 @@ const Notice = ({
       "aria-live": "polite",
       textAlign: "left",
       ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsx(DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxs(Columns, { space: "xsmall", children: [
+      children: /* @__PURE__ */ jsx(DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxs(Columns, { space: iconSlotSpace, children: [
         /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Icon, {}) }) }),
         /* @__PURE__ */ jsx(Column, { children })
       ] }) })