braid-design-system 32.8.2 → 32.9.0

package/dist/index.chunk.cjs

@@ -36,6 +36,7 @@ const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require(
 const styles_lib_components_OverflowMenu_OverflowMenu_css_cjs = require("./styles/lib/components/OverflowMenu/OverflowMenu.css.cjs");
 const isMobile = require("is-mobile");
 const styles_lib_components_MonthPicker_MonthPicker_css_cjs = require("./styles/lib/components/MonthPicker/MonthPicker.css.cjs");
+const styles_lib_components_Page_Page_css_cjs = require("./styles/lib/components/Page/Page.css.cjs");
 const styles_lib_components_Pagination_Pagination_css_cjs = require("./styles/lib/components/Pagination/Pagination.css.cjs");
 const styles_lib_components_Rating_Rating_css_cjs = require("./styles/lib/components/Rating/Rating.css.cjs");
 const styles_lib_components_Stepper_Stepper_css_cjs = require("./styles/lib/components/Stepper/Stepper.css.cjs");
@@ -5993,6 +5994,40 @@ const Notice = ({
     }
   );
 };
+const PageContext = React.createContext(false);
+const Page$1 = ({
+  children,
+  footer,
+  footerPosition,
+  data,
+  ...restProps
+}) => {
+  assert__default.default(
+    !React.useContext(PageContext),
+    "Page components should not be nested within each other"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ToastContext.Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      className: styles_lib_components_Page_Page_css_cjs.fullHeight,
+      ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToastContext.Box,
+          {
+            flexGrow: footerPosition !== "belowFold" ? 1 : void 0,
+            className: footerPosition === "belowFold" ? styles_lib_components_Page_Page_css_cjs.fullHeight : void 0,
+            paddingBottom: "xxxlarge",
+            children
+          }
+        ),
+        footer
+      ]
+    }
+  ) });
+};
 const paginate = ({
   page,
   total,
@@ -7616,7 +7651,7 @@ const TabPanel = ({
           {
             zIndex: 1,
             boxShadow: "outlineFocus",
-            borderRadius: "standard",
+            borderRadius: "large",
             className: styles_lib_components_Tabs_Tabs_css_cjs.tabPanelFocusRing,
             onlyVisibleForKeyboardNavigation: true
           }
@@ -8339,6 +8374,7 @@ exports.MenuRenderer = MenuRenderer;
 exports.MonthPicker = MonthPicker;
 exports.Notice = Notice;
 exports.OverflowMenu = OverflowMenu;
+exports.Page = Page$1;
 exports.PageBlock = PageBlock;
 exports.Pagination = Pagination;
 exports.PasswordField = PasswordField;

package/dist/index.chunk.mjs

@@ -35,6 +35,7 @@ import { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemC
 import { triggerOffset } from "./styles/lib/components/OverflowMenu/OverflowMenu.css.mjs";
 import { isMobile } from "is-mobile";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
+import { fullHeight } from "./styles/lib/components/Page/Page.css.mjs";
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
 import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./styles/lib/components/Rating/Rating.css.mjs";
 import { step, tone as tone$2, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
@@ -5985,6 +5986,40 @@ const Notice = ({
     }
   );
 };
+const PageContext = createContext(false);
+const Page$1 = ({
+  children: children2,
+  footer,
+  footerPosition,
+  data,
+  ...restProps
+}) => {
+  assert(
+    !useContext(PageContext),
+    "Page components should not be nested within each other"
+  );
+  return /* @__PURE__ */ jsx(PageContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      className: fullHeight,
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            flexGrow: footerPosition !== "belowFold" ? 1 : void 0,
+            className: footerPosition === "belowFold" ? fullHeight : void 0,
+            paddingBottom: "xxxlarge",
+            children: children2
+          }
+        ),
+        footer
+      ]
+    }
+  ) });
+};
 const paginate = ({
   page,
   total,
@@ -7608,7 +7643,7 @@ const TabPanel = ({
           {
             zIndex: 1,
             boxShadow: "outlineFocus",
-            borderRadius: "standard",
+            borderRadius: "large",
             className: tabPanelFocusRing,
             onlyVisibleForKeyboardNavigation: true
           }
@@ -8332,6 +8367,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  Page$1 as Page,
   PageBlock,
   Pagination,
   PasswordField,

package/dist/index.cjs

@@ -141,6 +141,7 @@ exports.MenuRenderer = index.MenuRenderer;
 exports.MonthPicker = index.MonthPicker;
 exports.Notice = index.Notice;
 exports.OverflowMenu = index.OverflowMenu;
+exports.Page = index.Page;
 exports.PageBlock = index.PageBlock;
 exports.Pagination = index.Pagination;
 exports.PasswordField = index.PasswordField;

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, 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, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './reset.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, 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, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from './reset.js';

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { BraidProvider, makeLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { Bleed, PublicBox, BraidPortal, Button, ButtonIcon, Column, Columns, ContentBlock, Divider, Hidden, IconClear, IconCritical, IconPositive, IconRenderer, Inline, Stack, Text, TextLink, TextLinkButton, ToastProvider, TooltipRenderer, useResponsiveValue, useSpace, useThemeName, useToast } from "./ToastContext.chunk.mjs";
-import { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, BoxRenderer, ButtonLink, Card, Checkbox, CheckboxStandalone, Dialog, Disclosure, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, 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, Link, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, TextDropdown, TextField, Textarea, ThemeNameConsumer, Tiles, Toggle, filterSuggestions, useBreakpoint, useColor } from "./index.chunk.mjs";
+import { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, BoxRenderer, ButtonLink, Card, Checkbox, CheckboxStandalone, Dialog, Disclosure, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, 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, Link, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, Radio, RadioGroup, RadioItem, Rating, Secondary, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Tabs, TabsProvider, Tag, TextDropdown, TextField, Textarea, ThemeNameConsumer, Tiles, Toggle, filterSuggestions, useBreakpoint, useColor } from "./index.chunk.mjs";
 export {
   Accordion,
   AccordionItem,
@@ -129,6 +129,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  Page,
   PageBlock,
   Pagination,
   PasswordField,

package/dist/playroom/components.cjs

@@ -987,6 +987,7 @@ exports.IconZoomOut = index.IconZoomOut;
 exports.Loader = index.Loader;
 exports.MenuItemDivider = index.MenuItemDivider;
 exports.MenuRenderer = index.MenuRenderer;
+exports.Page = index.Page;
 exports.PageBlock = index.PageBlock;
 exports.RadioItem = index.RadioItem;
 exports.Secondary = index.Secondary;

package/dist/playroom/components.d.ts

@@ -1 +1 @@
-export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, 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, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu$1 as OverflowMenu, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Tabs$1 as Tabs, TabsProvider$1 as TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer$1 as TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../reset.js';
+export { Accordion$1 as Accordion, AccordionItem$1 as AccordionItem, Actions, Alert$1 as Alert, Autosuggest$1 as Autosuggest, Badge$1 as Badge, Bleed$1 as Bleed, Box, BoxRenderer, BraidPortal, BraidProvider, Button$1 as Button, ButtonIcon$1 as ButtonIcon, ButtonLink$1 as ButtonLink, Card$1 as Card, Checkbox$1 as Checkbox, CheckboxStandalone$1 as CheckboxStandalone, Column, Columns$1 as Columns, ContentBlock, Dialog$1 as Dialog, Disclosure$1 as Disclosure, Divider, Drawer$1 as Drawer, Dropdown$1 as Dropdown, FieldLabel$1 as FieldLabel, FieldMessage$1 as FieldMessage, Heading$1 as Heading, 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, Link$1 as Link, LinkComponent, List$1 as List, Loader, MenuItem$1 as MenuItem, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuRenderer, MonthPicker$1 as MonthPicker, Notice$1 as Notice, OverflowMenu$1 as OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, PasswordField$1 as PasswordField, Placeholder, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioItem, Rating$1 as Rating, Secondary, Stack$1 as Stack, Step, Stepper, Strong, Tab$1 as Tab, TabPanel, TabPanels, Tabs$1 as Tabs, TabsProvider$1 as TabsProvider, Tag$1 as Tag, Text, TextDropdown$1 as TextDropdown, TextField$1 as TextField, TextLink, TextLinkButton, Textarea$1 as Textarea, ThemeNameConsumer, Tiles$1 as Tiles, ToastProvider, Toggle$1 as Toggle, TooltipRenderer$1 as TooltipRenderer, filterSuggestions, makeLinkComponent, useBreakpoint, useColor, useResponsiveValue, useSpace, useThemeName, useToast } from '../reset.js';

package/dist/playroom/components.mjs

@@ -7,7 +7,7 @@ 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 "../index.chunk.mjs";
-import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, 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 { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark, IconCaution, IconChevron, IconCompany, IconCompose, IconCopy, IconCreditCard, 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, 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, Page, 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";
@@ -1026,6 +1026,7 @@ export {
   MonthPicker,
   Notice,
   OverflowMenu,
+  Page,
   PageBlock,
   Pagination,
   PasswordField,

package/dist/playroom/snippets.cjs

@@ -1,5 +1,5 @@
 "use strict";
-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>'
 }, {
@@ -21,7 +21,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>'
 }, {
@@ -34,7 +34,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>'
 }, {
@@ -53,7 +53,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'
@@ -128,7 +128,7 @@ const snippets$G = [{
   text: 'Sydney'
 }]} />`
 }];
-const snippets$F = [{
+const snippets$G = [{
   name: "Info",
   code: '<Badge tone="info">Badge</Badge>'
 }, {
@@ -168,7 +168,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>'
 }, {
@@ -190,7 +190,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>"
 }, {
@@ -251,7 +251,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" />'
 }, {
@@ -264,7 +264,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>'
 }, {
@@ -280,7 +280,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" />'
 }, {
@@ -299,7 +299,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>'
 }, {
@@ -315,7 +315,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>"
 }, {
@@ -328,7 +328,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>'
 }, {
@@ -347,18 +347,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>'
 }, {
@@ -371,7 +371,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>'
 }, {
@@ -393,7 +393,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" />'
 }, {
@@ -403,7 +403,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" />'
 }, {
@@ -416,7 +416,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>'
 }, {
@@ -444,7 +444,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>'
 }, {
@@ -467,7 +467,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>'
 }, {
@@ -492,11 +492,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" />'
 }, {
@@ -518,7 +518,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>'
 }, {
@@ -531,10 +531,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>'
@@ -814,32 +821,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,