braid-design-system 32.6.0 → 32.8.0

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

@@ -3173,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: {
@@ -3887,6 +3887,11 @@ declare const IconEdit: (props: IconEditProps) => JSX.Element;
 type IconEducationProps = UseIconProps;
 declare const IconEducation: (props: IconEducationProps) => JSX.Element;
 
+type IconEnlargeProps = UseIconProps & {
+    active?: boolean;
+};
+declare const IconEnlarge: ({ active, ...props }: IconEnlargeProps) => JSX.Element;
+
 type IconFilterProps = UseIconProps;
 declare const IconFilter: (props: IconFilterProps) => JSX.Element;
 
@@ -5260,4 +5265,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, 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 };
+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, IconEnlarge, 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.6.0",
+  "version": "32.8.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.11.0",
+    "sku": "12.1.0",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },