braid-design-system 32.8.3 → 32.9.0

package/dist/playroom/snippets.mjs

@@ -1,4 +1,4 @@
-const snippets$J = [{
+const snippets$K = [{
   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$J = [{
   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$I = [{
+const snippets$J = [{
   name: "With multiple buttons",
   code: '<Actions>\n        <Button>Submit</Button>\n        <Button variant="transparent">Cancel</Button>\n      </Actions>'
 }, {
@@ -33,7 +33,7 @@ const snippets$I = [{
   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$H = [{
+const snippets$I = [{
   name: "Critical",
   code: '<Alert tone="critical">\n        <Text>Critical Alert</Text>\n      </Alert>'
 }, {
@@ -52,7 +52,7 @@ const snippets$H = [{
   name: "Dismissible alert",
   code: '<Alert onClose={() => {}} closeLabel="Close">\n        <Text>Dismissible Alert</Text>\n      </Alert>'
 }];
-const snippets$G = [{
+const snippets$H = [{
   name: "Standard",
   code: `<Autosuggest id="fruit" label="Fruit" suggestions={[{
   text: 'Apples'
@@ -127,7 +127,7 @@ const snippets$G = [{
   text: 'Sydney'
 }]} />`
 }];
-const snippets$F = [{
+const snippets$G = [{
   name: "Info",
   code: '<Badge tone="info">Badge</Badge>'
 }, {
@@ -167,7 +167,7 @@ const snippets$F = [{
   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$E = [{
+const snippets$F = [{
   name: "On all sides",
   code: '<Bleed space="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }, {
@@ -189,7 +189,7 @@ const snippets$E = [{
   name: "To the right",
   code: '<Bleed right="gutter">\n        <Placeholder height={80} />\n      </Bleed>'
 }];
-const snippets$D = [{
+const snippets$E = [{
   name: "Solid",
   code: "<Button>Button</Button>"
 }, {
@@ -250,7 +250,7 @@ const snippets$D = [{
   name: "Small Transparent",
   code: '<Button size="small" variant="transparent">\n        Button\n      </Button>'
 }];
-const snippets$C = [{
+const snippets$D = [{
   name: "Soft",
   code: '<ButtonIcon variant="soft" icon={<IconBookmark />} label="Bookmark" id="buttonicon-soft" />'
 }, {
@@ -263,7 +263,7 @@ const snippets$C = [{
   name: "Secondary",
   code: '<ButtonIcon tone="secondary" icon={<IconClear />} label="Close" id="buttonicon-secondary" />'
 }];
-const snippets$B = [{
+const snippets$C = [{
   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$B = [{
   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$A = [{
+const snippets$B = [{
   name: "Standard",
   code: '<Checkbox label="Label" />'
 }, {
@@ -298,7 +298,7 @@ const snippets$A = [{
   name: "With nested content",
   code: '<Checkbox label="Label">\n        <Placeholder height={100} />\n      </Checkbox>'
 }];
-const snippets$z = [{
+const snippets$A = [{
   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$z = [{
   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$y = [{
+const snippets$z = [{
   name: "Standard",
   code: "<ContentBlock>\n        <Placeholder height={100} />\n      </ContentBlock>"
 }, {
@@ -327,7 +327,7 @@ const snippets$y = [{
   name: "Large",
   code: '<ContentBlock width="large">\n        <Placeholder height={100} />\n      </ContentBlock>'
 }];
-const snippets$x = [{
+const snippets$y = [{
   name: "Standard",
   code: '<Dialog title="Dialog Heading" open={true}>\n        <Placeholder width={250} height={100} />\n      </Dialog>'
 }, {
@@ -346,18 +346,18 @@ const snippets$x = [{
   name: "Large",
   code: '<Dialog title="Dialog Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Dialog>'
 }];
-const snippets$w = [{
+const snippets$x = [{
   name: "Standard",
   code: '<Disclosure expandLabel="Show" collapseLabel="Hide">\n        <Stack space="large">\n          <Text>Content</Text>\n        </Stack>\n      </Disclosure>'
 }];
-const snippets$v = [{
+const snippets$w = [{
   name: "Regular",
   code: "<Divider />"
 }, {
   name: "Strong",
   code: '<Divider weight="strong" />'
 }];
-const snippets$u = [{
+const snippets$v = [{
   name: "Default",
   code: '<Drawer title="Drawer Heading" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }, {
@@ -370,7 +370,7 @@ const snippets$u = [{
   name: "Large",
   code: '<Drawer title="Drawer Heading" width="large" open={true}>\n        <Placeholder width="100%" height={100} />\n      </Drawer>'
 }];
-const snippets$t = [{
+const snippets$u = [{
   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$t = [{
   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$s = [{
+const snippets$t = [{
   name: "Standard",
   code: '<FieldLabel label="Label" />'
 }, {
@@ -402,7 +402,7 @@ const snippets$s = [{
   name: "Standard with tertiary label",
   code: '<FieldLabel label="Label" secondaryLabel="Optional" tertiaryLabel={<TextLink href="#">Help?</TextLink>} />'
 }];
-const snippets$r = [{
+const snippets$s = [{
   name: "Standard",
   code: '<FieldMessage message="This is a message" />'
 }, {
@@ -415,7 +415,7 @@ const snippets$r = [{
   name: "Secondary message",
   code: '<FieldMessage message="This is a message" secondaryMessage={<Text size="small" tone="secondary">\n            Secondary\n          </Text>} />'
 }];
-const snippets$q = [{
+const snippets$r = [{
   name: "Level 1",
   code: '<Heading level="1">Heading</Heading>'
 }, {
@@ -443,7 +443,7 @@ const snippets$q = [{
   name: "Level 4 (Weak)",
   code: '<Heading level="4" weight="weak">\n        Heading\n      </Heading>'
 }];
-const snippets$p = [{
+const snippets$q = [{
   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$p = [{
   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$o = [{
+const snippets$p = [{
   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$o = [{
   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$n = [{
+const snippets$o = [{
   name: "Standard",
   code: "<Loader />"
 }];
-const snippets$m = [{
+const snippets$n = [{
   name: "Standard",
   code: '<MonthPicker label="Month" />'
 }, {
@@ -517,7 +517,7 @@ const snippets$m = [{
   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$l = [{
+const snippets$m = [{
   name: "Critical",
   code: '<Notice tone="critical">\n        <Text>Critical Notice</Text>\n      </Notice>'
 }, {
@@ -530,10 +530,17 @@ const snippets$l = [{
   name: "Promote",
   code: '<Notice tone="promote">\n        <Text>Promote Notice</Text>\n      </Notice>'
 }];
-const snippets$k = [{
+const snippets$l = [{
   name: "Standard",
   code: '<OverflowMenu label="Options">\n        <MenuItem>Option</MenuItem>\n        <MenuItem>Option</MenuItem>\n      </OverflowMenu>'
 }];
+const snippets$k = [{
+  name: "Default",
+  code: '<Page footer={<Placeholder label="Footer" height={100} />}>\n        <Placeholder label="Header" height={60} />\n      </Page>'
+}, {
+  name: "Footer below fold",
+  code: '<Page footer={<Placeholder label="Footer" height={100} />} footerPosition="belowFold">\n        <Placeholder label="Header" height={60} />\n      </Page>'
+}];
 const snippets$j = [{
   name: "Medium",
   code: '<PageBlock width="medium">\n        <Placeholder height={100} />\n      </PageBlock>'
@@ -813,32 +820,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$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,
+  Accordion: snippets$K,
+  Actions: snippets$J,
+  Alert: snippets$I,
+  Autosuggest: snippets$H,
+  Badge: snippets$G,
+  Bleed: snippets$F,
+  Button: snippets$E,
+  ButtonIcon: snippets$D,
+  Card: snippets$C,
+  Checkbox: snippets$B,
+  Columns: snippets$A,
+  ContentBlock: snippets$z,
+  Dialog: snippets$y,
+  Disclosure: snippets$x,
+  Divider: snippets$w,
+  Drawer: snippets$v,
+  Dropdown: snippets$u,
+  FieldLabel: snippets$t,
+  FieldMessage: snippets$s,
+  Heading: snippets$r,
+  Inline: snippets$q,
+  List: snippets$p,
+  Loader: snippets$o,
+  MonthPicker: snippets$n,
+  Notice: snippets$m,
+  OverflowMenu: snippets$l,
+  Page: snippets$k,
   PageBlock: snippets$j,
   Pagination: snippets$i,
   PasswordField: snippets$h,

package/dist/reset.d.ts

@@ -3506,6 +3506,14 @@ interface Props$1 {
 }
 declare const PageBlock: ({ children, width, component: componentProp, data, ...restProps }: Props$1) => JSX.Element;
 
+interface PageProps {
+    children: ReactNode;
+    footer: ReactNode;
+    footerPosition?: 'belowFold';
+    data?: DataAttributeMap;
+}
+declare const Page: ({ children, footer, footerPosition, data, ...restProps }: PageProps) => JSX.Element;
+
 interface PaginationProps {
     page: number;
     total: number;
@@ -5265,4 +5273,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, 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 };
+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, Page, 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/styles/lib/components/Page/Page.css.cjs

@@ -0,0 +1,10 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/lib/components/Page/Page.css.ts?used", "braid-design-system");
+const heightLimit = css.createVar("heightLimit");
+const fullHeight = css.style({
+  minHeight: css.fallbackVar(heightLimit, "100vh")
+}, "fullHeight");
+fileScope.endFileScope();
+exports.fullHeight = fullHeight;

package/dist/styles/lib/components/Page/Page.css.mjs

@@ -0,0 +1,11 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style, fallbackVar } from "@vanilla-extract/css";
+setFileScope("src/lib/components/Page/Page.css.ts?used", "braid-design-system");
+const heightLimit = createVar("heightLimit");
+const fullHeight = style({
+  minHeight: fallbackVar(heightLimit, "100vh")
+}, "fullHeight");
+endFileScope();
+export {
+  fullHeight
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.8.3",
+  "version": "32.9.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -158,10 +158,10 @@
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/babel-plugin-macros": "^2.8.5",
     "@types/babel-plugin-tester": "^9.0.5",
     "@types/babel__core": "^7.18.0",
@@ -183,13 +183,13 @@
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "html-validate": "^7.1.1",
-    "playroom": "0.32.1",
+    "playroom": "0.31.0",
     "prettier": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "12.1.2",
+    "sku": "12.2.0",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },