braid-design-system 32.5.0 → 32.7.0

package/dist/playroom/components.mjs

@@ -6,14 +6,15 @@ import "../styles/lib/themes/seekJobs/seekJobs.css.mjs";
 import "../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
 import { wireframe } from "../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
 import "../styles/lib/themes/docs/docsTheme.css.mjs";
-import { Accordion as Accordion$1, validSpaceValues as validSpaceValues$1, AccordionItem as AccordionItem$1, Alert as Alert$1, Autosuggest as Autosuggest$1, Badge as Badge$1, ButtonLink as ButtonLink$1, Card as Card$1, validCardComponents, Checkbox as Checkbox$1, CheckboxStandalone as CheckboxStandalone$1, AllowCloseContext, Dialog as Dialog$1, Disclosure as Disclosure$1, Drawer as Drawer$1, Dropdown as Dropdown$1, FieldLabel as FieldLabel$1, FieldMessage as FieldMessage$1, tones, Heading as Heading$1, Link as Link$1, List as List$1, MonthPicker as MonthPicker$1, MenuItem as MenuItem$1, MenuItemLink as MenuItemLink$1, MenuItemCheckbox as MenuItemCheckbox$1, Notice as Notice$1, OverflowMenu as OverflowMenu$1, Pagination as Pagination$1, defaultPageLimit, PasswordField as PasswordField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Rating as Rating$1, TabsProvider as TabsProvider$1, Tabs as Tabs$1, Tab as Tab$1, Tag as Tag$1, Textarea as Textarea$1, TextDropdown as TextDropdown$1, parseSimpleToComplexOption, TextField as TextField$1, Tiles as Tiles$1, Toggle as Toggle$1 } from "../Toggle.chunk.mjs";
-import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Loader, MenuItemDivider, MenuRenderer, RadioItem, Secondary, Step, Stepper, Strong, TabPanel, TabPanels, ThemeNameConsumer, filterSuggestions, useBreakpoint, useColor } from "../Toggle.chunk.mjs";
+import { Accordion as Accordion$1, validSpaceValues as validSpaceValues$1, AccordionItem as AccordionItem$1, Alert as Alert$1, Autosuggest as Autosuggest$1, Badge as Badge$1, ButtonLink as ButtonLink$1, Card as Card$1, validCardComponents, Checkbox as Checkbox$1, CheckboxStandalone as CheckboxStandalone$1, AllowCloseContext, Dialog as Dialog$1, Disclosure as Disclosure$1, Drawer as Drawer$1, Dropdown as Dropdown$1, FieldLabel as FieldLabel$1, FieldMessage as FieldMessage$1, tones, Heading as Heading$1, Link as Link$1, List as List$1, MonthPicker as MonthPicker$1, MenuItem as MenuItem$1, MenuItemLink as MenuItemLink$1, MenuItemCheckbox as MenuItemCheckbox$1, Notice as Notice$1, OverflowMenu as OverflowMenu$1, Pagination as Pagination$1, defaultPageLimit, PasswordField as PasswordField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Rating as Rating$1, TabsProvider as TabsProvider$1, Tabs as Tabs$1, Tab as Tab$1, Tag as Tag$1, Textarea as Textarea$1, TextDropdown as TextDropdown$1, parseSimpleToComplexOption, TextField as TextField$1, Tiles as Tiles$1, Toggle as Toggle$1 } from "../index.chunk.mjs";
+import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Loader, MenuItemDivider, MenuRenderer, PageBlock, RadioItem, Secondary, Step, Stepper, Strong, TabPanel, TabPanels, ThemeNameConsumer, filterSuggestions, useBreakpoint, useColor } from "../index.chunk.mjs";
 import { useFallbackState } from "../playroomState.chunk.mjs";
 import { useRef, forwardRef, useState, useEffect } from "react";
 import { v4 } from "uuid";
 import { Bleed as Bleed$1, validBleedComponents, Box as Box$1, Button as Button$1, buttonVariants, ButtonIcon as ButtonIcon$1, buttonIconVariants, Columns as Columns$1, validColumnsComponents, Inline as Inline$1, validInlineComponents, IconClear, Stack as Stack$1, validStackComponents, TooltipRenderer as TooltipRenderer$1, useBackgroundLightness, PublicBox, Text } from "../ToastContext.chunk.mjs";
 import { BraidPortal, Column, ContentBlock, Divider, Hidden, IconCritical, IconPositive, IconRenderer, TextLink, TextLinkButton, ToastProvider, useResponsiveValue, useSpace, useThemeName, useToast } from "../ToastContext.chunk.mjs";
 import { atoms } from "../styles/lib/css/atoms/atoms.mjs";
+import { breakpointNames } from "../styles/lib/css/breakpoints.mjs";
 import { space } from "../styles/lib/css/atoms/atomicProperties.mjs";
 import { lightTheme, darkTheme, box, label, line } from "../styles/lib/components/private/Placeholder/Placeholder.css.mjs";
 import { BraidProvider, makeLinkComponent } from "../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
@@ -259,7 +260,13 @@ const CheckboxStandalone = ({
   );
 };
 const validSpaceValues = Object.keys(space);
-const cleanSpaceValue = (space2) => typeof space2 === "undefined" || typeof space2 === "boolean" || typeof space2 === "string" && !validSpaceValues.includes(space2) ? "none" : space2;
+const cleanSpaceValue = (space2) => {
+  const validResponsiveObject = typeof space2 === "object" && Object.keys(space2).some(
+    (bp) => breakpointNames.includes(bp) && validSpaceValues.includes(space2[bp])
+  );
+  const validSpace = typeof space2 === "string" && validSpaceValues.includes(space2);
+  return validSpace || validResponsiveObject ? space2 : void 0;
+};
 const Columns = ({
   space: space2,
   align,
@@ -269,7 +276,7 @@ const Columns = ({
 }) => /* @__PURE__ */ jsx(
   Columns$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && validColumnsComponents.indexOf(component) > -1 ? component : void 0,
@@ -429,7 +436,7 @@ const Inline = ({
 }) => /* @__PURE__ */ jsx(
   Inline$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     alignY: typeof alignY !== "boolean" ? alignY : void 0,
     component: component && validInlineComponents.indexOf(component) > -1 ? component : void 0,
@@ -645,7 +652,7 @@ const Stack = ({
 }) => /* @__PURE__ */ jsx(
   Stack$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     align: typeof align !== "boolean" ? align : void 0,
     component: component && validStackComponents.indexOf(component) > -1 ? component : void 0,
     ...restProps
@@ -782,7 +789,7 @@ const TextField = ({
 const Tiles = ({ space: space2, columns, ...restProps }) => /* @__PURE__ */ jsx(
   Tiles$1,
   {
-    space: cleanSpaceValue(space2),
+    space: cleanSpaceValue(space2) || "none",
     columns: typeof columns === "boolean" || !columns ? 1 : columns,
     ...restProps
   }
@@ -957,6 +964,7 @@ export {
   IconList,
   IconLocation,
   IconMail,
+  IconMessage,
   IconMinus,
   IconMobile,
   IconMoney,
@@ -1017,6 +1025,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  PageBlock,
   Pagination,
   PasswordField,
   Placeholder,

package/dist/playroom/snippets.cjs

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