@procore/core-react 12.15.0 → 12.16.1

package/dist/PageLayout/PageLayout.styles.js

@@ -5,61 +5,58 @@ import { colors } from '../_styles/colors';
 import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 import { isIE11 } from '../_utils/isIE11';
-import { getSmallScreenBreakpointValue } from './PageLayout.utils';
+import { mediaBreakpointsDown } from './PageLayout.utils';
 var headerVerticalSpacing = spacing.sm;
 var outerPageSpacing = spacing.lg;
 var outerPageSpacingSmaller = spacing.md;
-export var adjustMaxWidth = function adjustMaxWidth(breakpointMinWidth) {
-  return breakpointMinWidth - 0.02;
-};
 export var StyledPageHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_15_0__sc-1cvdbsv-0"
-})(["padding-top:", "px;padding-right:", "px;padding-left:", "px;@media ", "{padding-right:", "px;padding-left:", "px;}", ""], headerVerticalSpacing, outerPageSpacing, outerPageSpacing, getSmallScreenBreakpointValue(), outerPageSpacingSmaller, outerPageSpacingSmaller, function (_ref) {
+  componentId: "core-12_16_1__sc-1cvdbsv-0"
+})(["padding-top:", "px;padding-right:", "px;padding-left:", "px;@media ", "{padding-right:", "px;padding-left:", "px;}", ""], headerVerticalSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, function (_ref) {
   var $transparent = _ref.$transparent;
   return !$transparent && css(["", " background-color:", ";"], getShadow(1.5), colors.white);
 });
 var StyledPageHeaderItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageHeaderItem",
-  componentId: "core-12_15_0__sc-1cvdbsv-1"
+  componentId: "core-12_16_1__sc-1cvdbsv-1"
 })(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
 export var StyledPageTitle = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTitle",
-  componentId: "core-12_15_0__sc-1cvdbsv-2"
+  componentId: "core-12_16_1__sc-1cvdbsv-2"
 })(["&:last-child{padding-bottom:", "px;}"], headerVerticalSpacing);
 export var StyledPageBreadcrumbs = /*#__PURE__*/styled(StyledPageHeaderItem).attrs({
   as: 'nav'
 }).withConfig({
   displayName: "StyledPageBreadcrumbs",
-  componentId: "core-12_15_0__sc-1cvdbsv-3"
+  componentId: "core-12_16_1__sc-1cvdbsv-3"
 })([""]);
 export var StyledPageBanner = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageBanner",
-  componentId: "core-12_15_0__sc-1cvdbsv-4"
+  componentId: "core-12_16_1__sc-1cvdbsv-4"
 })([""]);
 export var getActions = function getActions() {
   return css(["flex-shrink:0;padding-left:", "px;> button,> a{&:first-child{margin-left:0;}margin-left:", "px;}"], spacing.xl, spacing.sm);
 };
 export var StyledPageActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageActions",
-  componentId: "core-12_15_0__sc-1cvdbsv-5"
+  componentId: "core-12_16_1__sc-1cvdbsv-5"
 })(["", ""], getActions());
 export var StyledPageTabs = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTabs",
-  componentId: "core-12_15_0__sc-1cvdbsv-6"
+  componentId: "core-12_16_1__sc-1cvdbsv-6"
 })([""]);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_15_0__sc-1cvdbsv-7"
-})(["padding-top:", "px;padding-left:", "px;padding-right:", "px;@media ", "{padding-top:", "px;padding-left:", "px;padding-right:", "px;}"], outerPageSpacing, outerPageSpacing, outerPageSpacing, getSmallScreenBreakpointValue(), outerPageSpacingSmaller, outerPageSpacingSmaller, outerPageSpacingSmaller);
+  componentId: "core-12_16_1__sc-1cvdbsv-7"
+})(["padding-top:", "px;padding-left:", "px;padding-right:", "px;@media ", "{padding-top:", "px;padding-left:", "px;padding-right:", "px;}"], outerPageSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, outerPageSpacingSmaller);
 var navigationWidth = 200;
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_15_0__sc-1cvdbsv-8"
+  componentId: "core-12_16_1__sc-1cvdbsv-8"
 })(["float:left;max-height:100vh;min-width:", "px;overflow-y:auto;position:sticky;top:0;width:", "px;", "{padding:20px ", "px 0 0;}@media screen and (max-width:1024px){display:none;}"], navigationWidth, navigationWidth, StyledAnchorNavigation, spacing.sm);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_15_0__sc-1cvdbsv-9"
+  componentId: "core-12_16_1__sc-1cvdbsv-9"
 })([""]);
 var panelWidth = 400;
 var zIndexes = {
@@ -72,22 +69,22 @@ export var animationDuration = {
 };
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_15_0__sc-1cvdbsv-10"
+  componentId: "core-12_16_1__sc-1cvdbsv-10"
 })(["background-color:", ";", " position:sticky;bottom:0;z-index:", ";", ""], colors.white, function (_ref2) {
   var $hasShadow = _ref2.$hasShadow;
   return $hasShadow && getShadow(2, 'top');
 }, zIndexes.footer, function (_ref3) {
   var $isAsideOpen = _ref3.$isAsideOpen;
-  return $isAsideOpen && css(["@media ", "{z-index:", ";}"], getSmallScreenBreakpointValue(), zIndexes.footer);
+  return $isAsideOpen && css(["@media ", "{z-index:", ";}"], mediaBreakpointsDown.tabletMd, zIndexes.footer);
 });
 export var StyledAside = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAside",
-  componentId: "core-12_15_0__sc-1cvdbsv-11"
+  componentId: "core-12_16_1__sc-1cvdbsv-11"
 })(["", " @media ", "{position:absolute;right:0;}"], function (_ref4) {
   var $closed = _ref4.$closed,
     $open = _ref4.$open;
   return isIE11() && css(["display:flex;flex-grow:0;flex-shrink:0;flex-basis:0;transition:flex-basis ", "ms;", " ", ""], animationDuration.panel, $closed && css(["flex-basis:0;"]), $open && css(["flex-basis:", "px;"], panelWidth));
-}, getSmallScreenBreakpointValue());
+}, mediaBreakpointsDown.tabletMd);
 var slideDistance = '100%';
 var slideIn = /*#__PURE__*/keyframes(["from{transform:translateX(", ");}to{transform:translateX(0);}"], slideDistance);
 var slideOut = /*#__PURE__*/keyframes(["from{transform:translateX(0);}to{transform:translateX(", ");}"], slideDistance);
@@ -102,11 +99,11 @@ var getPanelAnimation = function getPanelAnimation() {
 };
 export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsidePanel",
-  componentId: "core-12_15_0__sc-1cvdbsv-12"
+  componentId: "core-12_16_1__sc-1cvdbsv-12"
 })(["", " @media ", "{", "}", " ", " border-left:1px solid ", ";width:", "px;position:fixed;background-color:", ";overflow:auto;z-index:", ";", " ", ""], function (_ref7) {
   var $rightOffset = _ref7.$rightOffset;
-  return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], getSmallScreenBreakpointValue(), getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
-}, getSmallScreenBreakpointValue(), getPanelAnimation(), function (_ref8) {
+  return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], mediaBreakpointsDown.tabletMd, getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
+}, mediaBreakpointsDown.tabletMd, getPanelAnimation(), function (_ref8) {
   var $altAnimation = _ref8.$altAnimation;
   return $altAnimation && getPanelAnimation();
 }, function (_ref9) {
@@ -121,7 +118,7 @@ export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageMain",
-  componentId: "core-12_15_0__sc-1cvdbsv-13"
+  componentId: "core-12_16_1__sc-1cvdbsv-13"
 })(["position:relative;max-width:100%;background-color:", ";", " ", ""], colors.gray96, function () {
   return isIE11() && css(["flex:1 0 0%;"]);
 }, function (_ref12) {
@@ -136,13 +133,13 @@ export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageContainer",
-  componentId: "core-12_15_0__sc-1cvdbsv-14"
+  componentId: "core-12_16_1__sc-1cvdbsv-14"
 })(["display:grid;grid-template-columns:1fr auto;", ""], function () {
   return isIE11() && css(["display:flex;flex-wrap:wrap;"]);
 });
 export var StyledAsideFluidContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsideFluidContainer",
-  componentId: "core-12_15_0__sc-1cvdbsv-15"
+  componentId: "core-12_16_1__sc-1cvdbsv-15"
 })(["", ""], function (_ref13) {
   var $closed = _ref13.$closed,
     $open = _ref13.$open;

package/dist/PageLayout/PageLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","minScrimSize","colors","getShadow","spacing","isIE11","getSmallScreenBreakpointValue","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","adjustMaxWidth","breakpointMinWidth","StyledPageHeader","div","withConfig","displayName","componentId","_ref","$transparent","white","StyledPageHeaderItem","StyledPageTitle","StyledPageBreadcrumbs","attrs","as","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { getSmallScreenBreakpointValue } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const adjustMaxWidth = (breakpointMinWidth: number) =>\n  breakpointMinWidth - 0.02\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nconst StyledPageHeaderItem = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageTitle = styled(StyledPageHeaderItem)`\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled(StyledPageHeaderItem).attrs({\n  as: 'nav',\n})``\n\nexport const StyledPageBanner = styled(StyledPageHeaderItem)``\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled(StyledPageHeaderItem)``\n\nexport const StyledBody = styled.div`\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${getSmallScreenBreakpointValue()} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${getSmallScreenBreakpointValue()} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${getSmallScreenBreakpointValue()} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${getSmallScreenBreakpointValue()} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${getSmallScreenBreakpointValue()} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n\n  ${({ $minusHeight }) => {\n    return css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `\n  }}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div`\n  display: grid;\n  grid-template-columns: 1fr auto;\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","minScrimSize","colors","getShadow","spacing","isIE11","mediaBreakpointsDown","headerVerticalSpacing","sm","outerPageSpacing","lg","outerPageSpacingSmaller","md","StyledPageHeader","div","withConfig","displayName","componentId","tabletMd","_ref","$transparent","white","StyledPageHeaderItem","StyledPageTitle","StyledPageBreadcrumbs","attrs","as","StyledPageBanner","getActions","xl","StyledPageActions","StyledPageTabs","StyledBody","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { mediaBreakpointsDown } from './PageLayout.utils'\n\nconst headerVerticalSpacing = spacing.sm\nconst outerPageSpacing = spacing.lg\nconst outerPageSpacingSmaller = spacing.md\n\nexport const StyledPageHeader = styled.div<{ $transparent?: boolean }>`\n  padding-top: ${headerVerticalSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-right: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n  }\n\n  ${({ $transparent }) =>\n    !$transparent &&\n    css`\n      ${getShadow(1.5)}\n      background-color: ${colors.white};\n    `}\n`\n\nconst StyledPageHeaderItem = styled.div`\n  margin-top: ${headerVerticalSpacing}px;\n\n  &:first-child {\n    margin-top: 0;\n  }\n`\n\nexport const StyledPageTitle = styled(StyledPageHeaderItem)`\n  &:last-child {\n    padding-bottom: ${headerVerticalSpacing}px;\n  }\n`\n\nexport const StyledPageBreadcrumbs = styled(StyledPageHeaderItem).attrs({\n  as: 'nav',\n})``\n\nexport const StyledPageBanner = styled(StyledPageHeaderItem)``\n\nexport const getActions = () => css`\n  flex-shrink: 0;\n  padding-left: ${spacing.xl}px;\n\n  > button,\n  > a {\n    &:first-child {\n      margin-left: 0;\n    }\n\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nexport const StyledPageActions = styled.div`\n  ${getActions()}\n`\n\nexport const StyledPageTabs = styled(StyledPageHeaderItem)``\n\nexport const StyledBody = styled.div`\n  padding-top: ${outerPageSpacing}px;\n  padding-left: ${outerPageSpacing}px;\n  padding-right: ${outerPageSpacing}px;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    padding-top: ${outerPageSpacingSmaller}px;\n    padding-left: ${outerPageSpacingSmaller}px;\n    padding-right: ${outerPageSpacingSmaller}px;\n  }\n`\n\nconst navigationWidth = 200\n\nexport const StyledNavigation = styled.div`\n  float: left;\n  max-height: 100vh;\n  min-width: ${navigationWidth}px;\n  overflow-y: auto;\n  position: sticky;\n  top: 0;\n  width: ${navigationWidth}px;\n\n  ${StyledAnchorNavigation} {\n    padding: 20px ${spacing.sm}px 0 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    display: none;\n  }\n`\n\nexport const StyledContent = styled.div``\n\nconst panelWidth = 400\nconst zIndexes = {\n  panelWideScreen: 3,\n  panelNarrowScreen: 1,\n  footer: 2,\n}\n\nexport const animationDuration = {\n  panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n  $isAsideOpen: boolean\n  $hasShadow: boolean\n}>`\n  background-color: ${colors.white};\n\n  ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n  position: sticky;\n  bottom: 0;\n  z-index: ${zIndexes.footer};\n\n  ${({ $isAsideOpen }) =>\n    $isAsideOpen &&\n    css`\n      @media ${mediaBreakpointsDown.tabletMd} {\n        z-index: ${zIndexes.footer};\n      }\n    `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n  ${({ $closed, $open }) =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      flex-basis: 0;\n\n      transition: flex-basis ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        flex-basis: 0;\n      `}\n\n      ${$open &&\n      css`\n        flex-basis: ${panelWidth}px;\n      `}\n    `}\n\n  // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n  @media ${mediaBreakpointsDown.tabletMd} {\n    position: absolute;\n    right: 0;\n  }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n  from {\n    transform: translateX(${slideDistance});\n  }\n  to {\n    transform: translateX(0);\n  }\n`\n\nconst slideOut = keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(${slideDistance});\n  }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n    `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n  $offsetTop: number | null\n  $minusHeight: number\n  $closing: boolean\n  $closed: boolean\n  $opening: boolean\n  $rightOffset: number\n  $altAnimation: boolean\n}>`\n  // position panel behind the page sticky footer on smaller screens\n  ${({ $rightOffset }) => css`\n    @media ${mediaBreakpointsDown.tabletMd} {\n      ${getShadow(2)}\n      border-left: 0;\n      z-index: ${zIndexes.panelNarrowScreen};\n      right: ${$rightOffset}px;\n    }\n  `}\n\n  /*\n   * On smaller screens, the panel is positioned absolutely,\n   *  so the animation needs to happen here\n  */\n  @media ${mediaBreakpointsDown.tabletMd} {\n    ${getPanelAnimation()}\n  }\n\n  ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      display: none;\n    `}\n\n  border-left: 1px solid ${colors.gray85};\n  width: ${panelWidth}px;\n  position: fixed;\n  background-color: ${colors.gray96};\n\n  overflow: auto;\n  z-index: ${zIndexes.panelWideScreen};\n\n  ${({ $minusHeight }) => {\n    return css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `\n  }}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $tearsheetPlacement: Placement | null\n}>`\n  position: relative;\n  max-width: 100%;\n  background-color: ${colors.gray96};\n\n  ${() =>\n    isIE11() &&\n    css`\n      flex: 1 0 0%;\n    `}\n\n  ${({ $tearsheetPlacement }) => {\n    if (!$tearsheetPlacement) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($tearsheetPlacement)) {\n      return css`\n        min-height: calc(100vh - ${minScrimSize}px);\n      `\n    }\n\n    return css`\n      min-height: 100vh;\n    `\n  }}\n`\n\nexport const StyledPageContainer = styled.div`\n  display: grid;\n  grid-template-columns: 1fr auto;\n  ${() =>\n    isIE11() &&\n    css`\n      display: flex;\n      flex-wrap: wrap;\n    `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n  $open: boolean\n  $closed: boolean\n}>`\n  ${({ $closed, $open }) =>\n    !isIE11() &&\n    css`\n      transition: width ${animationDuration.panel}ms;\n\n      ${$closed &&\n      css`\n        width: 0;\n      `}\n\n      ${$open &&\n      css`\n        width: ${panelWidth}px;\n      `}\n    `}\n`\n"],"mappings":"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"}

package/dist/PageLayout/PageLayout.types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type React from 'react';
 import type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types';
 import type { DivAttributes, Props, UlAttributes } from '../_utils/types';
 interface CustomizableStyledComponent {
@@ -7,9 +7,10 @@ interface CustomizableStyledComponent {
 export interface PageComponentProps extends CustomizableStyledComponent, Props, DivAttributes {
 }
 export interface PageBodyNavigationProps extends Props, UlAttributes {
-    sections: AnchorNavigationSection[];
-    active: string;
-    setActive: (id: string) => void;
+    sections?: AnchorNavigationSection[];
+    active?: string;
+    setActive?: (id: string) => void;
+    minSections?: number;
 }
 export interface PageHeaderProps extends PageComponentProps {
     /**

package/dist/PageLayout/PageLayout.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.types.js","names":[],"sources":["../../src/PageLayout/PageLayout.types.ts"],"sourcesContent":["import type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types'\nimport type { DivAttributes, Props, UlAttributes } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    DivAttributes {}\n\nexport interface PageBodyNavigationProps extends Props, UlAttributes {\n  sections: AnchorNavigationSection[]\n  active: string\n  setActive: (id: string) => void\n}\n\nexport interface PageHeaderProps extends PageComponentProps {\n  /**\n   * @description If the header should have no background.\n   * @since 10.19.0\n   */\n  transparent?: boolean\n}\n\nexport interface PageAsideProps extends PageComponentProps {\n  /**\n   * @description If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":""}
+{"version":3,"file":"PageLayout.types.js","names":[],"sources":["../../src/PageLayout/PageLayout.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types'\nimport type { DivAttributes, Props, UlAttributes } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    DivAttributes {}\n\nexport interface PageBodyNavigationProps extends Props, UlAttributes {\n  sections?: AnchorNavigationSection[]\n  active?: string\n  setActive?: (id: string) => void\n  minSections?: number\n}\n\nexport interface PageHeaderProps extends PageComponentProps {\n  /**\n   * @description If the header should have no background.\n   * @since 10.19.0\n   */\n  transparent?: boolean\n}\n\nexport interface PageAsideProps extends PageComponentProps {\n  /**\n   * @description If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":""}

package/dist/PageLayout/PageLayout.utils.d.ts

@@ -1,4 +1,8 @@
-export declare const getSmallScreenBreakpointValue: () => string;
+export declare const mediaBreakpointsDown: {
+    tabletMd: string;
+    tabletLg: string;
+    desktopMd: string;
+};
 export declare const getIsUsingSmallScreen: () => boolean;
 export declare const wait: (ms: number) => Promise<void>;
 export declare function getBottomOffsetForFooterUseCase(footerEl: HTMLDivElement, globalBottomOffset: number): number | null;

package/dist/PageLayout/PageLayout.utils.js

@@ -1,11 +1,15 @@
 import { breakpointRawMinWidthValues } from '../Grid/Grid.constants';
-import { adjustMaxWidth } from './PageLayout.styles';
-export var getSmallScreenBreakpointValue = function getSmallScreenBreakpointValue() {
-  return "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletMd), "px)");
+var adjustMaxWidth = function adjustMaxWidth(breakpointMinWidth) {
+  return breakpointMinWidth - 0.02;
+};
+export var mediaBreakpointsDown = {
+  tabletMd: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletMd), "px)"),
+  tabletLg: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletLg), "px)"),
+  desktopMd: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.desktopMd), "px)")
 };
 export var getIsUsingSmallScreen = function getIsUsingSmallScreen() {
   var _globalThis$matchMedi;
-  return (_globalThis$matchMedi = globalThis.matchMedia) === null || _globalThis$matchMedi === void 0 ? void 0 : _globalThis$matchMedi.call(globalThis, getSmallScreenBreakpointValue()).matches;
+  return (_globalThis$matchMedi = globalThis.matchMedia) === null || _globalThis$matchMedi === void 0 ? void 0 : _globalThis$matchMedi.call(globalThis, mediaBreakpointsDown.tabletMd).matches;
 };
 export var wait = function wait(ms) {
   return new Promise(function (resolve) {

package/dist/PageLayout/PageLayout.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.utils.js","names":["breakpointRawMinWidthValues","adjustMaxWidth","getSmallScreenBreakpointValue","concat","tabletMd","getIsUsingSmallScreen","_globalThis$matchMedi","globalThis","matchMedia","call","matches","wait","ms","Promise","resolve","setTimeout","getBottomOffsetForFooterUseCase","footerEl","globalBottomOffset","_footerRect$y","viewportHeight","innerHeight","footerRect","getBoundingClientRect","footerTop","y","top","footerHeight","height","isSmallScreen","isPageFooterSticky","dataset","sticky","bottom","getGlobalBottomOffset","containerEl","lowerBoundary","lowerBoundaryTopOffset","document","documentElement","clientHeight","Math","max","getGlobalTopOffset","_upperBoundary$y","upperBoundary","upperBoundaryTopOffset","getRightOffset","containerRight","right","viewportWidth","clientWidth","getIsIntersectingVertically","upperEl","lowerEl"],"sources":["../../src/PageLayout/PageLayout.utils.ts"],"sourcesContent":["import { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\nimport { adjustMaxWidth } from './PageLayout.styles'\n\nexport const getSmallScreenBreakpointValue = () =>\n  `(max-width: ${adjustMaxWidth(breakpointRawMinWidthValues.tabletMd)}px)`\n\nexport const getIsUsingSmallScreen = () => {\n  return globalThis.matchMedia?.(getSmallScreenBreakpointValue()).matches\n}\n\nexport const wait = (ms: number) =>\n  new Promise<void>((resolve) => setTimeout(resolve, ms))\n\nexport function getBottomOffsetForFooterUseCase(\n  footerEl: HTMLDivElement,\n  globalBottomOffset: number\n) {\n  const viewportHeight = globalThis.innerHeight\n  const footerRect = footerEl.getBoundingClientRect()\n  const footerTop = footerRect.y ?? footerRect.top\n  const footerHeight = footerRect.height\n  const isSmallScreen = getIsUsingSmallScreen()\n  const isPageFooterSticky = footerEl.dataset.sticky === 'sticky'\n\n  if (isSmallScreen) {\n    if (isPageFooterSticky) {\n      return globalBottomOffset + viewportHeight - footerTop\n    }\n\n    return globalBottomOffset + footerHeight\n  }\n\n  if (isPageFooterSticky) {\n    // align with the sticky footer in the rest of use cases\n    return viewportHeight - footerRect.bottom\n  }\n\n  return null\n}\n\nexport function getGlobalBottomOffset(containerEl: HTMLDivElement) {\n  const lowerBoundary = containerEl.getBoundingClientRect()\n  const lowerBoundaryTopOffset = lowerBoundary.bottom\n  const viewportHeight = document.documentElement.clientHeight\n  return Math.max(viewportHeight - lowerBoundaryTopOffset, 0)\n}\n\nexport function getGlobalTopOffset(containerEl: HTMLDivElement) {\n  const upperBoundary = containerEl.getBoundingClientRect()\n  const upperBoundaryTopOffset = upperBoundary.y ?? upperBoundary.top\n  return Math.max(upperBoundaryTopOffset, 0)\n}\n\nexport function getRightOffset(containerEl: HTMLDivElement) {\n  const containerRight = containerEl.getBoundingClientRect().right\n  const viewportWidth = document.documentElement.clientWidth\n\n  return viewportWidth - containerRight\n}\n\nexport function getIsIntersectingVertically(\n  upperEl: HTMLElement,\n  lowerEl: HTMLElement\n) {\n  return (\n    upperEl.getBoundingClientRect().bottom > lowerEl.getBoundingClientRect().top\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout.utils.js","names":["breakpointRawMinWidthValues","adjustMaxWidth","breakpointMinWidth","mediaBreakpointsDown","tabletMd","concat","tabletLg","desktopMd","getIsUsingSmallScreen","_globalThis$matchMedi","globalThis","matchMedia","call","matches","wait","ms","Promise","resolve","setTimeout","getBottomOffsetForFooterUseCase","footerEl","globalBottomOffset","_footerRect$y","viewportHeight","innerHeight","footerRect","getBoundingClientRect","footerTop","y","top","footerHeight","height","isSmallScreen","isPageFooterSticky","dataset","sticky","bottom","getGlobalBottomOffset","containerEl","lowerBoundary","lowerBoundaryTopOffset","document","documentElement","clientHeight","Math","max","getGlobalTopOffset","_upperBoundary$y","upperBoundary","upperBoundaryTopOffset","getRightOffset","containerRight","right","viewportWidth","clientWidth","getIsIntersectingVertically","upperEl","lowerEl"],"sources":["../../src/PageLayout/PageLayout.utils.ts"],"sourcesContent":["import { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\n\nconst adjustMaxWidth = (breakpointMinWidth: number) => breakpointMinWidth - 0.02\n\nexport const mediaBreakpointsDown = {\n  tabletMd: `(max-width: ${adjustMaxWidth(\n    breakpointRawMinWidthValues.tabletMd\n  )}px)`,\n  tabletLg: `(max-width: ${adjustMaxWidth(\n    breakpointRawMinWidthValues.tabletLg\n  )}px)`,\n  desktopMd: `(max-width: ${adjustMaxWidth(\n    breakpointRawMinWidthValues.desktopMd\n  )}px)`,\n}\n\nexport const getIsUsingSmallScreen = () =>\n  globalThis.matchMedia?.(mediaBreakpointsDown.tabletMd).matches\n\nexport const wait = (ms: number) =>\n  new Promise<void>((resolve) => setTimeout(resolve, ms))\n\nexport function getBottomOffsetForFooterUseCase(\n  footerEl: HTMLDivElement,\n  globalBottomOffset: number\n) {\n  const viewportHeight = globalThis.innerHeight\n  const footerRect = footerEl.getBoundingClientRect()\n  const footerTop = footerRect.y ?? footerRect.top\n  const footerHeight = footerRect.height\n  const isSmallScreen = getIsUsingSmallScreen()\n  const isPageFooterSticky = footerEl.dataset.sticky === 'sticky'\n\n  if (isSmallScreen) {\n    if (isPageFooterSticky) {\n      return globalBottomOffset + viewportHeight - footerTop\n    }\n\n    return globalBottomOffset + footerHeight\n  }\n\n  if (isPageFooterSticky) {\n    // align with the sticky footer in the rest of use cases\n    return viewportHeight - footerRect.bottom\n  }\n\n  return null\n}\n\nexport function getGlobalBottomOffset(containerEl: HTMLDivElement) {\n  const lowerBoundary = containerEl.getBoundingClientRect()\n  const lowerBoundaryTopOffset = lowerBoundary.bottom\n  const viewportHeight = document.documentElement.clientHeight\n  return Math.max(viewportHeight - lowerBoundaryTopOffset, 0)\n}\n\nexport function getGlobalTopOffset(containerEl: HTMLDivElement) {\n  const upperBoundary = containerEl.getBoundingClientRect()\n  const upperBoundaryTopOffset = upperBoundary.y ?? upperBoundary.top\n  return Math.max(upperBoundaryTopOffset, 0)\n}\n\nexport function getRightOffset(containerEl: HTMLDivElement) {\n  const containerRight = containerEl.getBoundingClientRect().right\n  const viewportWidth = document.documentElement.clientWidth\n\n  return viewportWidth - containerRight\n}\n\nexport function getIsIntersectingVertically(\n  upperEl: HTMLElement,\n  lowerEl: HTMLElement\n) {\n  return (\n    upperEl.getBoundingClientRect().bottom > lowerEl.getBoundingClientRect().top\n  )\n}\n"],"mappings":"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"}

package/dist/PageTemplate/PageTemplate.js

@@ -1,18 +1,39 @@
-var _excluded = ["children", "header", "footer", "pane", "innerPane"];
+var _excluded = ["children", "header", "footer", "pane", "innerPane", "panelConfig"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
+import { AnchorNavigationProvider } from '../AnchorNavigation/AnchorNavigationProvider';
+import { breakpointRawMinWidthValues } from '../Grid/Grid.constants';
 import { Page } from '../PageLayout';
+import { useMediaLessThan } from '../_hooks/useMediaLessThan';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { StyledModal, StyledPageAside, StyledPageBody, StyledPageBodyWrapper, StyledPageWrapper } from './PageTemplate.styles';
 export var PageTemplate = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     header = _ref.header,
     footer = _ref.footer,
     pane = _ref.pane,
     innerPane = _ref.innerPane,
+    panelConfig = _ref.panelConfig,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Page, _extends({}, props, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Page.Main, null, header, /*#__PURE__*/React.createElement(Page.Body, null, innerPane, children), footer), pane);
+  var mainRef = React.useRef(null);
+  var isMobile = useMediaLessThan(mainRef, breakpointRawMinWidthValues.tabletMd);
+  var _ref2 = panelConfig !== null && panelConfig !== void 0 ? panelConfig : {},
+    labelId = _ref2.labelId,
+    isVisible = _ref2.isVisible,
+    onClose = _ref2.onClose;
+  return /*#__PURE__*/React.createElement(AnchorNavigationProvider, null, /*#__PURE__*/React.createElement(Page, _extends({}, props, {
+    ref: mergeRefs(ref, mainRef)
+  }), /*#__PURE__*/React.createElement(StyledPageWrapper, null, header, /*#__PURE__*/React.createElement(StyledPageBodyWrapper, null, /*#__PURE__*/React.createElement(Page.Main, null, /*#__PURE__*/React.createElement(StyledPageBody, null, innerPane, children), footer), isMobile && /*#__PURE__*/React.createElement(StyledModal, {
+    "aria-labelledby": labelId,
+    open: isVisible,
+    onClickOverlay: onClose,
+    placement: "center",
+    role: "dialog",
+    width: "md"
+  }, pane), !isMobile && /*#__PURE__*/React.createElement(StyledPageAside, {
+    open: isVisible
+  }, pane)))));
 });
 //# sourceMappingURL=PageTemplate.js.map

package/dist/PageTemplate/PageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.js","names":["React","Page","PageTemplate","forwardRef","_ref","ref","children","header","footer","pane","innerPane","props","_objectWithoutProperties","_excluded","createElement","_extends","Main","Body"],"sources":["../../src/PageTemplate/PageTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport { Page } from '../PageLayout'\nimport type { PageTemplateProps } from './PageTemplate.types'\n\nexport const PageTemplate = React.forwardRef<HTMLDivElement, PageTemplateProps>(\n  ({ children, header, footer, pane, innerPane, ...props }, ref) => (\n    <Page {...props} ref={ref}>\n      <Page.Main>\n        {header}\n        <Page.Body>\n          {innerPane}\n          {children}\n        </Page.Body>\n        {footer}\n      </Page.Main>\n      {pane}\n    </Page>\n  )\n)\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,eAAe;AAGpC,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,UAAU,CAC1C,UAAAC,IAAA,EAA0DC,GAAG;EAAA,IAA1DC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAKC,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBACpDb,KAAA,CAAAc,aAAA,CAACb,IAAI,EAAAc,QAAA,KAAKJ,KAAK;IAAEN,GAAG,EAAEA;EAAI,iBACxBL,KAAA,CAAAc,aAAA,CAACb,IAAI,CAACe,IAAI,QACPT,MAAM,eACPP,KAAA,CAAAc,aAAA,CAACb,IAAI,CAACgB,IAAI,QACPP,SAAS,EACTJ,QACQ,CAAC,EACXE,MACQ,CAAC,EACXC,IACG,CAAC;AAAA,CAEX,CAAC"}
+{"version":3,"file":"PageTemplate.js","names":["React","AnchorNavigationProvider","breakpointRawMinWidthValues","Page","useMediaLessThan","mergeRefs","StyledModal","StyledPageAside","StyledPageBody","StyledPageBodyWrapper","StyledPageWrapper","PageTemplate","forwardRef","_ref","ref","children","header","footer","pane","innerPane","panelConfig","props","_objectWithoutProperties","_excluded","mainRef","useRef","isMobile","tabletMd","_ref2","labelId","isVisible","onClose","createElement","_extends","Main","open","onClickOverlay","placement","role","width"],"sources":["../../src/PageTemplate/PageTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport { AnchorNavigationProvider } from '../AnchorNavigation/AnchorNavigationProvider'\nimport { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\nimport { Page } from '../PageLayout'\nimport { useMediaLessThan } from '../_hooks/useMediaLessThan'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledModal,\n  StyledPageAside,\n  StyledPageBody,\n  StyledPageBodyWrapper,\n  StyledPageWrapper,\n} from './PageTemplate.styles'\nimport type { PageTemplateProps } from './PageTemplate.types'\n\nexport const PageTemplate = React.forwardRef<HTMLDivElement, PageTemplateProps>(\n  (\n    { children, header, footer, pane, innerPane, panelConfig, ...props },\n    ref\n  ) => {\n    const mainRef = React.useRef<HTMLDivElement>(null)\n    const isMobile = useMediaLessThan(\n      mainRef,\n      breakpointRawMinWidthValues.tabletMd\n    )\n    const { labelId, isVisible, onClose } = panelConfig ?? {}\n\n    return (\n      <AnchorNavigationProvider>\n        <Page {...props} ref={mergeRefs(ref, mainRef)}>\n          <StyledPageWrapper>\n            {header}\n            <StyledPageBodyWrapper>\n              <Page.Main>\n                <StyledPageBody>\n                  {innerPane}\n                  {children}\n                </StyledPageBody>\n                {footer}\n              </Page.Main>\n              {isMobile && (\n                <StyledModal\n                  aria-labelledby={labelId}\n                  open={isVisible}\n                  onClickOverlay={onClose}\n                  placement=\"center\"\n                  role=\"dialog\"\n                  width=\"md\"\n                >\n                  {pane}\n                </StyledModal>\n              )}\n              {!isMobile && (\n                <StyledPageAside open={isVisible}>{pane}</StyledPageAside>\n              )}\n            </StyledPageBodyWrapper>\n          </StyledPageWrapper>\n        </Page>\n      </AnchorNavigationProvider>\n    )\n  }\n)\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,wBAAwB,QAAQ,8CAA8C;AACvF,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SACEC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,qBAAqB,EACrBC,iBAAiB,QACZ,uBAAuB;AAG9B,OAAO,IAAMC,YAAY,gBAAGX,KAAK,CAACY,UAAU,CAC1C,UAAAC,IAAA,EAEEC,GAAG,EACA;EAAA,IAFDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAEC,WAAW,GAAAP,IAAA,CAAXO,WAAW;IAAKC,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAGlE,IAAMC,OAAO,GAAGxB,KAAK,CAACyB,MAAM,CAAiB,IAAI,CAAC;EAClD,IAAMC,QAAQ,GAAGtB,gBAAgB,CAC/BoB,OAAO,EACPtB,2BAA2B,CAACyB,QAC9B,CAAC;EACD,IAAAC,KAAA,GAAwCR,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,CAAC,CAAC;IAAjDS,OAAO,GAAAD,KAAA,CAAPC,OAAO;IAAEC,SAAS,GAAAF,KAAA,CAATE,SAAS;IAAEC,OAAO,GAAAH,KAAA,CAAPG,OAAO;EAEnC,oBACE/B,KAAA,CAAAgC,aAAA,CAAC/B,wBAAwB,qBACvBD,KAAA,CAAAgC,aAAA,CAAC7B,IAAI,EAAA8B,QAAA,KAAKZ,KAAK;IAAEP,GAAG,EAAET,SAAS,CAACS,GAAG,EAAEU,OAAO;EAAE,iBAC5CxB,KAAA,CAAAgC,aAAA,CAACtB,iBAAiB,QACfM,MAAM,eACPhB,KAAA,CAAAgC,aAAA,CAACvB,qBAAqB,qBACpBT,KAAA,CAAAgC,aAAA,CAAC7B,IAAI,CAAC+B,IAAI,qBACRlC,KAAA,CAAAgC,aAAA,CAACxB,cAAc,QACZW,SAAS,EACTJ,QACa,CAAC,EAChBE,MACQ,CAAC,EACXS,QAAQ,iBACP1B,KAAA,CAAAgC,aAAA,CAAC1B,WAAW;IACV,mBAAiBuB,OAAQ;IACzBM,IAAI,EAAEL,SAAU;IAChBM,cAAc,EAAEL,OAAQ;IACxBM,SAAS,EAAC,QAAQ;IAClBC,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAC;EAAI,GAETrB,IACU,CACd,EACA,CAACQ,QAAQ,iBACR1B,KAAA,CAAAgC,aAAA,CAACzB,eAAe;IAAC4B,IAAI,EAAEL;EAAU,GAAEZ,IAAsB,CAEtC,CACN,CACf,CACkB,CAAC;AAE/B,CACF,CAAC"}

package/dist/PageTemplate/PageTemplate.styles.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const mobileBreakpoint = 440;
+export declare const StyledPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPageBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPageBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../PageLayout").PageProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledPageAside: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../PageLayout").PageAsideProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Modal").ModalProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Body: import("react").ForwardRefExoticComponent<import("../Modal/Modal.types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Container: import("react").ForwardRefExoticComponent<import("../Modal/Modal.types").ModalContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("styled-components").StyledComponent<"div", any, {
+        $compact?: boolean | undefined;
+    }, never>;
+    Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    FooterButtons: import("react").ForwardRefExoticComponent<import("../Modal/Modal.types").ModalCloseableHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    FooterNotation: import("react").ForwardRefExoticComponent<import("..").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>;
+    FooterSummary: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("../Modal/Modal.types").ModalCloseableHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Heading: typeof import("../Section/Section").Heading;
+    Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Scrim: import("styled-components").StyledComponent<"div", any, {}, never>;
+    State: (props: import("..").RenderProps) => import("react").JSX.Element;
+    Section: import("react").ForwardRefExoticComponent<import("../Section").SectionProps & import("react").RefAttributes<HTMLDivElement>>;
+}, any, {}, never>;

package/dist/PageTemplate/PageTemplate.styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { Modal } from '../Modal';
+import { StyledModalContent } from '../Modal/Modal.styles';
+import { Page } from '../PageLayout';
+import { StyledAsideFluidContainer, StyledAsidePanel } from '../PageLayout/PageLayout.styles';
+import { mediaBreakpointsDown } from '../PageLayout/PageLayout.utils';
+import { StyledFooter as StyledPanelFooter } from '../Panel/Panel.styles';
+import { spacing } from '../_styles/spacing';
+var panelWidthSmall = 360;
+export var mobileBreakpoint = 440;
+export var StyledPageWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledPageWrapper",
+  componentId: "core-12_16_1__sc-1yw4cq0-0"
+})(["display:flex;flex-direction:column;"]);
+export var StyledPageBodyWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledPageBodyWrapper",
+  componentId: "core-12_16_1__sc-1yw4cq0-1"
+})(["display:grid;grid-template-columns:1fr auto;"]);
+export var StyledPageBody = /*#__PURE__*/styled(Page.Body).withConfig({
+  displayName: "StyledPageBody",
+  componentId: "core-12_16_1__sc-1yw4cq0-2"
+})(["padding-bottom:", "px;@media ", "{padding:", "px;}"], spacing.lg, mediaBreakpointsDown.desktopMd, spacing.md);
+export var StyledPageAside = /*#__PURE__*/styled(Page.Aside).withConfig({
+  displayName: "StyledPageAside",
+  componentId: "core-12_16_1__sc-1yw4cq0-3"
+})(["position:sticky;top:0;right:0;max-height:100vh;width:100%;height:100%;@media ", "{position:sticky;max-width:", "px;flex-basis:", "px;}", "{@media ", "{max-width:", "px;}}", "{position:sticky;top:0;right:0;box-shadow:none;animation:none;padding-bottom:68px;@media ", "{width:", "px;}@media (max-width:", "px){padding-bottom:0;}}", "{position:fixed;bottom:0;display:flex;width:100%;max-width:400px;@media ", "{max-width:", "px;}}"], mediaBreakpointsDown.tabletLg, panelWidthSmall, panelWidthSmall, StyledAsideFluidContainer, mediaBreakpointsDown.tabletLg, panelWidthSmall, StyledAsidePanel, mediaBreakpointsDown.tabletLg, panelWidthSmall, mobileBreakpoint, StyledPanelFooter, mediaBreakpointsDown.tabletLg, panelWidthSmall);
+export var StyledModal = /*#__PURE__*/styled(Modal).withConfig({
+  displayName: "StyledModal",
+  componentId: "core-12_16_1__sc-1yw4cq0-4"
+})(["top:", "px;bottom:", "px;max-width:416px;transform:none;", "{max-height:100vh;}@media (max-width:", "px){top:0;bottom:0;left:0;right:0;max-width:100%;}"], spacing.md, spacing.md, StyledModalContent, mobileBreakpoint);
+//# sourceMappingURL=PageTemplate.styles.js.map

package/dist/PageTemplate/PageTemplate.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.styles.js","names":["styled","Modal","StyledModalContent","Page","StyledAsideFluidContainer","StyledAsidePanel","mediaBreakpointsDown","StyledFooter","StyledPanelFooter","spacing","panelWidthSmall","mobileBreakpoint","StyledPageWrapper","div","withConfig","displayName","componentId","StyledPageBodyWrapper","StyledPageBody","Body","lg","desktopMd","md","StyledPageAside","Aside","tabletLg","StyledModal"],"sources":["../../src/PageTemplate/PageTemplate.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Modal } from '../Modal'\nimport { StyledModalContent } from '../Modal/Modal.styles'\nimport { Page } from '../PageLayout'\nimport {\n  StyledAsideFluidContainer,\n  StyledAsidePanel,\n} from '../PageLayout/PageLayout.styles'\nimport { mediaBreakpointsDown } from '../PageLayout/PageLayout.utils'\nimport { StyledFooter as StyledPanelFooter } from '../Panel/Panel.styles'\nimport { spacing } from '../_styles/spacing'\n\nconst panelWidthSmall = 360\nexport const mobileBreakpoint = 440\n\nexport const StyledPageWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n\nexport const StyledPageBodyWrapper = styled.div`\n  display: grid;\n  grid-template-columns: 1fr auto;\n`\n\nexport const StyledPageBody = styled(Page.Body)`\n  padding-bottom: ${spacing.lg}px;\n\n  @media ${mediaBreakpointsDown.desktopMd} {\n    padding: ${spacing.md}px;\n  }\n`\n\nexport const StyledPageAside = styled(Page.Aside)`\n  position: sticky;\n  top: 0;\n  right: 0;\n  max-height: 100vh;\n  width: 100%;\n  height: 100%;\n\n  @media ${mediaBreakpointsDown.tabletLg} {\n    position: sticky;\n    max-width: ${panelWidthSmall}px;\n    flex-basis: ${panelWidthSmall}px;\n  }\n\n  ${StyledAsideFluidContainer} {\n    @media ${mediaBreakpointsDown.tabletLg} {\n      max-width: ${panelWidthSmall}px;\n    }\n  }\n\n  ${StyledAsidePanel} {\n    position: sticky;\n    top: 0;\n    right: 0;\n    box-shadow: none;\n    animation: none;\n    padding-bottom: 68px;\n\n    @media ${mediaBreakpointsDown.tabletLg} {\n      width: ${panelWidthSmall}px;\n    }\n\n    @media (max-width: ${mobileBreakpoint}px) {\n      padding-bottom: 0;\n    }\n  }\n\n  ${StyledPanelFooter} {\n    position: fixed;\n    bottom: 0;\n    display: flex;\n    width: 100%;\n    max-width: 400px;\n\n    @media ${mediaBreakpointsDown.tabletLg} {\n      max-width: ${panelWidthSmall}px;\n    }\n  }\n`\n\nexport const StyledModal = styled(Modal)`\n  top: ${spacing.md}px;\n  bottom: ${spacing.md}px;\n  max-width: 416px;\n  transform: none;\n\n  ${StyledModalContent} {\n    max-height: 100vh;\n  }\n\n  @media (max-width: ${mobileBreakpoint}px) {\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    max-width: 100%;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,IAAI,QAAQ,eAAe;AACpC,SACEC,yBAAyB,EACzBC,gBAAgB,QACX,iCAAiC;AACxC,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,YAAY,IAAIC,iBAAiB,QAAQ,uBAAuB;AACzE,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,eAAe,GAAG,GAAG;AAC3B,OAAO,IAAMC,gBAAgB,GAAG,GAAG;AAEnC,OAAO,IAAMC,iBAAiB,gBAAGZ,MAAM,CAACa,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2CAG1C;AAED,OAAO,IAAMC,qBAAqB,gBAAGjB,MAAM,CAACa,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oDAG9C;AAED,OAAO,IAAME,cAAc,gBAAGlB,MAAM,CAACG,IAAI,CAACgB,IAAI,CAAC,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2DAC3BP,OAAO,CAACW,EAAE,EAEnBd,oBAAoB,CAACe,SAAS,EAC1BZ,OAAO,CAACa,EAAE,CAExB;AAED,OAAO,IAAMC,eAAe,gBAAGvB,MAAM,CAACG,IAAI,CAACqB,KAAK,CAAC,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,obAQtCV,oBAAoB,CAACmB,QAAQ,EAEvBf,eAAe,EACdA,eAAe,EAG7BN,yBAAyB,EAChBE,oBAAoB,CAACmB,QAAQ,EACvBf,eAAe,EAI9BL,gBAAgB,EAQPC,oBAAoB,CAACmB,QAAQ,EAC3Bf,eAAe,EAGLC,gBAAgB,EAKrCH,iBAAiB,EAORF,oBAAoB,CAACmB,QAAQ,EACvBf,eAAe,CAGjC;AAED,OAAO,IAAMgB,WAAW,gBAAG1B,MAAM,CAACC,KAAK,CAAC,CAAAa,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gKAC/BP,OAAO,CAACa,EAAE,EACPb,OAAO,CAACa,EAAE,EAIlBpB,kBAAkB,EAICS,gBAAgB,CAOtC"}

package/dist/PageTemplate/PageTemplate.types.d.ts

@@ -1,8 +1,15 @@
 import type { ReactNode } from 'react';
+declare type PanelConfig = {
+    labelId: string;
+    isVisible: boolean;
+    onClose: () => void;
+};
 export declare type PageTemplateProps = {
     children?: ReactNode;
     header?: ReactNode;
     footer?: ReactNode;
     pane?: ReactNode;
     innerPane?: ReactNode;
+    panelConfig?: PanelConfig;
 };
+export {};

package/dist/PageTemplate/PageTemplate.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplate.types.js","names":[],"sources":["../../src/PageTemplate/PageTemplate.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport type PageTemplateProps = {\n  children?: ReactNode\n  header?: ReactNode\n  footer?: ReactNode\n  pane?: ReactNode\n  innerPane?: ReactNode\n}\n"],"mappings":""}
+{"version":3,"file":"PageTemplate.types.js","names":[],"sources":["../../src/PageTemplate/PageTemplate.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\ntype PanelConfig = {\n  labelId: string\n  isVisible: boolean\n  onClose: () => void\n}\n\nexport type PageTemplateProps = {\n  children?: ReactNode\n  header?: ReactNode\n  footer?: ReactNode\n  pane?: ReactNode\n  innerPane?: ReactNode\n  panelConfig?: PanelConfig\n}\n"],"mappings":""}

package/dist/PageTemplate/PageTemplateCard.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PageComponentProps } from '../PageLayout/PageLayout.types';
+interface Props extends PageComponentProps {
+    navigationLabel?: string;
+}
+export declare const PageTemplateCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/PageTemplate/PageTemplateCard.js

@@ -0,0 +1,35 @@
+var _excluded = ["navigationLabel"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useId } from '@react-aria/utils';
+import React from 'react';
+import { useAnchorNavigationContext } from '../AnchorNavigation/AnchorNavigationProvider';
+import { Card } from '../Card';
+import { SectionProvider } from '../Section';
+import { mergeRefs } from '../_utils/mergeRefs';
+export var PageTemplateCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var navigationLabel = _ref.navigationLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var cardId = useId();
+  var cardRef = React.useRef(null);
+  var _useAnchorNavigationC = useAnchorNavigationContext(),
+    registerSection = _useAnchorNavigationC.registerSection,
+    unregisterSection = _useAnchorNavigationC.unregisterSection;
+  var id = props.id || cardId;
+  React.useEffect(function () {
+    var _cardRef$current, _cardRef$current$quer;
+    var label = navigationLabel || ((_cardRef$current = cardRef.current) === null || _cardRef$current === void 0 ? void 0 : (_cardRef$current$quer = _cardRef$current.querySelector('h2')) === null || _cardRef$current$quer === void 0 ? void 0 : _cardRef$current$quer.textContent);
+    if (!cardRef.current || !label) return;
+    registerSection(id, label, cardRef.current);
+    return function () {
+      return unregisterSection(id);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/React.createElement(SectionProvider, null, /*#__PURE__*/React.createElement(Card, _extends({
+    ref: mergeRefs(ref, cardRef),
+    id: id
+  }, props)));
+});
+//# sourceMappingURL=PageTemplateCard.js.map

package/dist/PageTemplate/PageTemplateCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplateCard.js","names":["useId","React","useAnchorNavigationContext","Card","SectionProvider","mergeRefs","PageTemplateCard","forwardRef","_ref","ref","navigationLabel","props","_objectWithoutProperties","_excluded","cardId","cardRef","useRef","_useAnchorNavigationC","registerSection","unregisterSection","id","useEffect","_cardRef$current","_cardRef$current$quer","label","current","querySelector","textContent","createElement","_extends"],"sources":["../../src/PageTemplate/PageTemplateCard.tsx"],"sourcesContent":["import { useId } from '@react-aria/utils'\nimport React from 'react'\nimport { useAnchorNavigationContext } from '../AnchorNavigation/AnchorNavigationProvider'\nimport { Card } from '../Card'\nimport type { PageComponentProps } from '../PageLayout/PageLayout.types'\nimport { SectionProvider } from '../Section'\nimport { mergeRefs } from '../_utils/mergeRefs'\n\ninterface Props extends PageComponentProps {\n  navigationLabel?: string\n}\n\nexport const PageTemplateCard = React.forwardRef<HTMLDivElement, Props>(\n  ({ navigationLabel, ...props }, ref) => {\n    const cardId = useId()\n    const cardRef = React.useRef<HTMLDivElement>(null)\n    const { registerSection, unregisterSection } = useAnchorNavigationContext()\n    const id = props.id || cardId\n\n    React.useEffect(() => {\n      const label =\n        navigationLabel || cardRef.current?.querySelector('h2')?.textContent\n      if (!cardRef.current || !label) return\n\n      registerSection(id, label, cardRef.current)\n\n      return () => unregisterSection(id)\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <SectionProvider>\n        <Card ref={mergeRefs(ref, cardRef)} id={id} {...props} />\n      </SectionProvider>\n    )\n  }\n)\n"],"mappings":";;;;AAAA,SAASA,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,0BAA0B,QAAQ,8CAA8C;AACzF,SAASC,IAAI,QAAQ,SAAS;AAE9B,SAASC,eAAe,QAAQ,YAAY;AAC5C,SAASC,SAAS,QAAQ,qBAAqB;AAM/C,OAAO,IAAMC,gBAAgB,gBAAGL,KAAK,CAACM,UAAU,CAC9C,UAAAC,IAAA,EAAgCC,GAAG,EAAK;EAAA,IAArCC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAKC,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC1B,IAAMC,MAAM,GAAGd,KAAK,CAAC,CAAC;EACtB,IAAMe,OAAO,GAAGd,KAAK,CAACe,MAAM,CAAiB,IAAI,CAAC;EAClD,IAAAC,qBAAA,GAA+Cf,0BAA0B,CAAC,CAAC;IAAnEgB,eAAe,GAAAD,qBAAA,CAAfC,eAAe;IAAEC,iBAAiB,GAAAF,qBAAA,CAAjBE,iBAAiB;EAC1C,IAAMC,EAAE,GAAGT,KAAK,CAACS,EAAE,IAAIN,MAAM;EAE7Bb,KAAK,CAACoB,SAAS,CAAC,YAAM;IAAA,IAAAC,gBAAA,EAAAC,qBAAA;IACpB,IAAMC,KAAK,GACTd,eAAe,MAAAY,gBAAA,GAAIP,OAAO,CAACU,OAAO,cAAAH,gBAAA,wBAAAC,qBAAA,GAAfD,gBAAA,CAAiBI,aAAa,CAAC,IAAI,CAAC,cAAAH,qBAAA,uBAApCA,qBAAA,CAAsCI,WAAW;IACtE,IAAI,CAACZ,OAAO,CAACU,OAAO,IAAI,CAACD,KAAK,EAAE;IAEhCN,eAAe,CAACE,EAAE,EAAEI,KAAK,EAAET,OAAO,CAACU,OAAO,CAAC;IAE3C,OAAO;MAAA,OAAMN,iBAAiB,CAACC,EAAE,CAAC;IAAA;EACpC,CAAC,EAAE,EAAE,CAAC,EAAC;;EAEP,oBACEnB,KAAA,CAAA2B,aAAA,CAACxB,eAAe,qBACdH,KAAA,CAAA2B,aAAA,CAACzB,IAAI,EAAA0B,QAAA;IAACpB,GAAG,EAAEJ,SAAS,CAACI,GAAG,EAAEM,OAAO,CAAE;IAACK,EAAE,EAAEA;EAAG,GAAKT,KAAK,CAAG,CACzC,CAAC;AAEtB,CACF,CAAC"}

package/dist/Pagination/Pagination.styles.js

@@ -5,22 +5,22 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_15_0__sc-fy34i1-0"
+  componentId: "core-12_16_1__sc-fy34i1-0"
 })(["display:flex;align-items:center;"]);
 export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledPageCount",
-  componentId: "core-12_15_0__sc-fy34i1-1"
+  componentId: "core-12_16_1__sc-fy34i1-1"
 })(["margin-right:", "px;"], spacing.xl);
 export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledCurrentPage",
-  componentId: "core-12_15_0__sc-fy34i1-2"
+  componentId: "core-12_16_1__sc-fy34i1-2"
 })(["margin-right:", "px;"], spacing.sm);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_15_0__sc-fy34i1-3"
+  componentId: "core-12_16_1__sc-fy34i1-3"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_15_0__sc-fy34i1-4"
+  componentId: "core-12_16_1__sc-fy34i1-4"
 })(["max-height:300px;max-width:248px;"]);
 //# sourceMappingURL=Pagination.styles.js.map

package/dist/Panel/Panel.d.ts

@@ -34,5 +34,6 @@ export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.R
     Section: React.ForwardRefExoticComponent<import("../Section").SectionProps & React.RefAttributes<HTMLDivElement>>;
     Title: React.ForwardRefExoticComponent<TypographyProps & {
         qa?: Pick<PanelQaTags, "title"> | undefined;
+        id?: string | undefined;
     } & React.RefAttributes<HTMLSpanElement>>;
 };