braid-design-system 32.5.0 → 32.7.0

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/playroomState.chunk.cjs

@@ -71,7 +71,7 @@ function useFallbackState(stateKey, value, onChange, defaultValue) {
         unwrapValue(args[0])
       );
     }
-    (handler || noop)(...args);
+    return (handler || noop)(...args);
   };
   const handleChange = wrapChangeHandler(onChange || noop);
   const resolvedValue = value ?? (stateKey ? playroomState.getState(stateKey) ?? defaultValue : internalStateValue);

package/dist/playroomState.chunk.mjs

@@ -68,7 +68,7 @@ function useFallbackState(stateKey, value, onChange, defaultValue) {
         unwrapValue(args[0])
       );
     }
-    (handler || noop)(...args);
+    return (handler || noop)(...args);
   };
   const handleChange = wrapChangeHandler(onChange || noop);
   const resolvedValue = value ?? (stateKey ? playroomState.getState(stateKey) ?? defaultValue : internalStateValue);

package/dist/reset.cjs

@@ -1,2 +1,7 @@
 "use strict";
 require("./side-effects/lib/css/reset/index.cjs");
+require("./styles/lib/themes/apac/apacTheme.css.cjs");
+require("./styles/lib/themes/docs/docsTheme.css.cjs");
+require("./styles/lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
+require("./styles/lib/themes/seekJobs/seekJobs.css.cjs");
+require("./styles/lib/themes/wireframe/wireframeTheme.css.cjs");

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'> & {
@@ -3172,7 +3173,7 @@ interface ModalContentProps {
 
 interface ModalProps extends Omit<ModalContentProps, 'onClose' | 'scrollLock' | 'headingRef' | 'modalRef'> {
     open: boolean;
-    onClose: (openState: false) => void;
+    onClose: (openState: false) => void | false;
 }
 
 declare const modalStyle$1: {
@@ -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/dist/reset.mjs

@@ -1 +1,6 @@
 import "./side-effects/lib/css/reset/index.mjs";
+import "./styles/lib/themes/apac/apacTheme.css.mjs";
+import "./styles/lib/themes/docs/docsTheme.css.mjs";
+import "./styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
+import "./styles/lib/themes/seekJobs/seekJobs.css.mjs";
+import "./styles/lib/themes/wireframe/wireframeTheme.css.mjs";

package/dist/styles/lib/components/private/Modal/Modal.css.cjs

@@ -6,6 +6,7 @@ const styles_lib_components_private_Modal_ModalExternalGutter_cjs = require("./M
 const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
 fileScope.setFileScope("src/lib/components/private/Modal/Modal.css.ts?used", "braid-design-system");
 const fixedStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
   position: "fixed",
@@ -15,9 +16,16 @@ const resetStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
   position: "relative",
   zIndex: 0
 });
-const backdrop = css.style({
-  background: "rgba(0, 0, 0, .4)"
-}, "backdrop");
+const backdrop = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    background: "#000",
+    opacity: 0.4
+  },
+  darkMode: {
+    background: "#000",
+    opacity: 0.6
+  }
+}), "backdrop");
 const reducedMotion = css.style({
   "@media": {
     "screen and (prefers-reduced-motion)": {
@@ -32,7 +40,7 @@ const entrance = {
   right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(140%)"
+      transform: "translateX(110%)"
     },
     tablet: {
       opacity: 0,
@@ -42,7 +50,7 @@ const entrance = {
   left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(-140%)"
+      transform: "translateX(-110%)"
     },
     tablet: {
       opacity: 0,
@@ -54,7 +62,7 @@ const exit = {
   right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(140%)"
+      transform: "translateX(110%)"
     },
     tablet: {
       opacity: 0,
@@ -64,7 +72,7 @@ const exit = {
   left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(-140%)"
+      transform: "translateX(-110%)"
     },
     tablet: {
       opacity: 0,

package/dist/styles/lib/components/private/Modal/Modal.css.mjs

@@ -5,6 +5,7 @@ import { externalGutter } from "./ModalExternalGutter.mjs";
 import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
 import { vars } from "../../../themes/vars.css.mjs";
 import { atoms } from "../../../css/atoms/atoms.mjs";
+import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
 setFileScope("src/lib/components/private/Modal/Modal.css.ts?used", "braid-design-system");
 const fixedStackingContext = atoms({
   position: "fixed",
@@ -14,9 +15,16 @@ const resetStackingContext = atoms({
   position: "relative",
   zIndex: 0
 });
-const backdrop = style({
-  background: "rgba(0, 0, 0, .4)"
-}, "backdrop");
+const backdrop = style(colorModeStyle({
+  lightMode: {
+    background: "#000",
+    opacity: 0.4
+  },
+  darkMode: {
+    background: "#000",
+    opacity: 0.6
+  }
+}), "backdrop");
 const reducedMotion = style({
   "@media": {
     "screen and (prefers-reduced-motion)": {
@@ -31,7 +39,7 @@ const entrance = {
   right: [reducedMotion, style(responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(140%)"
+      transform: "translateX(110%)"
     },
     tablet: {
       opacity: 0,
@@ -41,7 +49,7 @@ const entrance = {
   left: [reducedMotion, style(responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(-140%)"
+      transform: "translateX(-110%)"
     },
     tablet: {
       opacity: 0,
@@ -53,7 +61,7 @@ const exit = {
   right: [reducedMotion, style(responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(140%)"
+      transform: "translateX(110%)"
     },
     tablet: {
       opacity: 0,
@@ -63,7 +71,7 @@ const exit = {
   left: [reducedMotion, style(responsiveStyle({
     mobile: {
       opacity: 1,
-      transform: "translateX(-140%)"
+      transform: "translateX(-110%)"
     },
     tablet: {
       opacity: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.5.0",
+  "version": "32.7.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": "12.1.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",