@procore/core-react 12.53.3 → 12.54.0

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

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","StyledRequiredContainer","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","_ref0","$minusHeight","_ref1","$offsetTop","StyledPageMain","p","$fillHeight","$flex","_ref10","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref11"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport { StyledRequiredContainer } from '../Required/Required.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\nexport const 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  flex-grow: 1;\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  > ${StyledRequiredContainer} {\n    margin-bottom: 16px;\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  ${({ $minusHeight }) =>\n    css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n`\n\nexport const StyledPageMain = styled.div<{\n  $flex?: boolean\n  $fillHeight?: boolean\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  ${(p) => (p.$fillHeight ? `height: 100%;` : '')}\n  ${(p) => (p.$flex ? `display: flex; flex-direction: column;` : '')}\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  $fillHeight?: boolean\n}>`\n  display: grid;\n  grid-template-columns: 1fr auto;\n\n  height: ${(p) => (p.$fillHeight ? '100%' : '')};\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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,sBAAsB,QAAQ,6CAA6C;AACpF,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,oBAAoB,QAAQ,oBAAoB;AAEzD,IAAMC,qBAAqB,GAAGH,OAAO,CAACI,EAAE;AACxC,IAAMC,gBAAgB,GAAGL,OAAO,CAACM,EAAE;AACnC,IAAMC,uBAAuB,GAAGP,OAAO,CAACQ,EAAE;AAE1C,OAAO,IAAMC,gBAAgB,gBAAGjB,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+HACzBV,qBAAqB,EACnBE,gBAAgB,EACjBA,gBAAgB,EAEvBH,oBAAoB,CAACY,QAAQ,EACnBP,uBAAuB,EACxBA,uBAAuB,EAGvC,UAAAQ,IAAA;EAAA,IAAGC,YAAY,GAAAD,IAAA,CAAZC,YAAY;EAAA,OACf,CAACA,YAAY,IACbvB,GAAG,kCACCM,SAAS,CAAC,GAAG,CAAC,EACID,MAAM,CAACmB,KAAK,CACjC;AAAA,EACJ;AAED,OAAO,IAAMC,oBAAoB,gBAAG1B,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAC9BV,qBAAqB,CAKpC;AAED,OAAO,IAAMgB,eAAe,gBAAG3B,MAAM,CAAC0B,oBAAoB,CAAC,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAErCV,qBAAqB,CAE1C;AAED,OAAO,IAAMiB,qBAAqB,gBAAG5B,MAAM,CAAC0B,oBAAoB,CAAC,CAACG,KAAK,CAAC;EACtEC,EAAE,EAAE;AACN,CAAC,CAAC,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEJ,OAAO,IAAMU,gBAAgB,gBAAG/B,MAAM,CAAC0B,oBAAoB,CAAC,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE9D,OAAO,IAAMW,UAAU,GAAG,SAAbA,UAAUA,CAAA;EAAA,OAAS/B,GAAG,uGAEjBO,OAAO,CAACyB,EAAE,EAQTzB,OAAO,CAACI,EAAE;AAAA,CAE5B;AAED,OAAO,IAAMsB,iBAAiB,gBAAGlC,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACvCW,UAAU,CAAC,CAAC,CACf;AAED,OAAO,IAAMG,cAAc,gBAAGnC,MAAM,CAAC0B,oBAAoB,CAAC,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE5D,OAAO,IAAMe,UAAU,gBAAGpC,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qLAEnBR,gBAAgB,EACfA,gBAAgB,EACfA,gBAAgB,EAExBH,oBAAoB,CAACY,QAAQ,EACrBP,uBAAuB,EACtBA,uBAAuB,EACtBA,uBAAuB,EAGtCX,uBAAuB,CAG5B;AAED,IAAMiC,eAAe,GAAG,GAAG;AAE3B,OAAO,IAAMC,gBAAgB,gBAAGtC,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0LAG3BgB,eAAe,EAInBA,eAAe,EAEtBlC,sBAAsB,EACNK,OAAO,CAACI,EAAE,CAM7B;AAED,OAAO,IAAM2B,aAAa,gBAAGvC,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAEzC,IAAMmB,UAAU,GAAG,GAAG;AACtB,IAAMC,QAAQ,GAAG;EACfC,eAAe,EAAE,CAAC;EAClBC,iBAAiB,EAAE,CAAC;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,IAAMC,iBAAiB,GAAG;EAC/BC,KAAK,EAAE;AACT,CAAC;AAED,OAAO,IAAMC,YAAY,gBAAG/C,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAIhBf,MAAM,CAACmB,KAAK,EAE9B,UAAAuB,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI1C,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;AAAA,GAI5CkC,QAAQ,CAACG,MAAM,EAExB,UAAAM,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OACfA,YAAY,IACZlD,GAAG,iCACQS,oBAAoB,CAACY,QAAQ,EACzBmB,QAAQ,CAACG,MAAM,CAE7B;AAAA,EACJ;AAED,OAAO,IAAMQ,WAAW,gBAAGpD,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDACjC,UAAAgC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;IAAEC,KAAK,GAAAF,KAAA,CAALE,KAAK;EAAA,OACjB9C,MAAM,CAAC,CAAC,IACRR,GAAG,iGAMwB4C,iBAAiB,CAACC,KAAK,EAE9CQ,OAAO,IACTrD,GAAG,mBAEF,EAECsD,KAAK,IACPtD,GAAG,yBACauC,UAAU,CACzB,CACF;AAAA,GAGM9B,oBAAoB,CAACY,QAAQ,CAIvC;AAED,IAAMkC,aAAa,GAAG,MAAM;AAE5B,IAAMC,OAAO,gBAAGvD,SAAS,oEAEGsD,aAAa,CAKxC;AAED,IAAME,QAAQ,gBAAGxD,SAAS,oEAKEsD,aAAa,CAExC;AAED,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA;EAAA,OAAS1D,GAAG,gBAC/B,UAAA2D,KAAA;IAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OACXA,QAAQ,IACR5D,GAAG,sCACYwD,OAAO,EAAaZ,iBAAiB,CAACC,KAAK,CACzD;EAAA,GAED,UAAAgB,KAAA;IAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OACXA,QAAQ,IACR9D,GAAG,sCACYyD,QAAQ,EAAab,iBAAiB,CAACC,KAAK,CAC1D;EAAA;AAAA,CACJ;AAED,OAAO,IAAMkB,gBAAgB,gBAAGhE,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0JAUtC,UAAA4C,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OAAOjE,GAAG,iEAChBS,oBAAoB,CAACY,QAAQ,EAClCf,SAAS,CAAC,CAAC,CAAC,EAEHkC,QAAQ,CAACE,iBAAiB,EAC5BuB,YAAY;AAAA,CAExB,EAMQxD,oBAAoB,CAACY,QAAQ,EAClCqC,iBAAiB,CAAC,CAAC,EAGrB,UAAAQ,KAAA;EAAA,IAAGC,aAAa,GAAAD,KAAA,CAAbC,aAAa;EAAA,OAAOA,aAAa,IAAIT,iBAAiB,CAAC,CAAC;AAAA,GAE3D,UAAAU,KAAA;EAAA,IAAGf,OAAO,GAAAe,KAAA,CAAPf,OAAO;EAAA,OACVA,OAAO,IACPrD,GAAG,mBAEF;AAAA,GAEsBK,MAAM,CAACgE,MAAM,EAC7B9B,UAAU,EAEClC,MAAM,CAACiE,MAAM,EAGtB9B,QAAQ,CAACC,eAAe,EACjC,UAAA8B,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OACfxE,GAAG,oCACuBwE,YAAY;AAAA,CACrC,EAED,UAAAC,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,KAAK,IAAI,IACnB1E,GAAG,kBACM0E,UAAU,CAClB;AAAA,EACJ;AAED,OAAO,IAAMC,cAAc,gBAAG5E,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAOlBf,MAAM,CAACiE,MAAM,EAE/B;EAAA,OACA9D,MAAM,CAAC,CAAC,IACRR,GAAG,kBAEF;AAAA,GAED,UAAC4E,CAAC;EAAA,OAAMA,CAAC,CAACC,WAAW,qBAAqB,EAAE;AAAA,CAAC,EAC7C,UAACD,CAAC;EAAA,OAAMA,CAAC,CAACE,KAAK,8CAA8C,EAAE;AAAA,CAAC,EAEhE,UAAAC,MAAA,EAA6B;EAAA,IAA1BC,mBAAmB,GAAAD,MAAA,CAAnBC,mBAAmB;EACtB,IAAI,CAACA,mBAAmB,EAAE;IACxB,OAAO,EAAE;EACX;EAEA,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACD,mBAAmB,CAAC,EAAE;IACnD,OAAOhF,GAAG,uCACmBI,YAAY;EAE3C;EAEA,OAAOJ,GAAG;AAGZ,CAAC,CACF;AAED,OAAO,IAAMkF,mBAAmB,gBAAGnF,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAMjC,UAACwD,CAAC;EAAA,OAAMA,CAAC,CAACC,WAAW,GAAG,MAAM,GAAG,EAAE;AAAA,CAAC,EAC5C;EAAA,OACArE,MAAM,CAAC,CAAC,IACRR,GAAG,kCAGF;AAAA,EACJ;AAED,OAAO,IAAMmF,yBAAyB,gBAAGpF,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAI/C,UAAAgE,MAAA;EAAA,IAAG/B,OAAO,GAAA+B,MAAA,CAAP/B,OAAO;IAAEC,KAAK,GAAA8B,MAAA,CAAL9B,KAAK;EAAA,OACjB,CAAC9C,MAAM,CAAC,CAAC,IACTR,GAAG,wCACmB4C,iBAAiB,CAACC,KAAK,EAEzCQ,OAAO,IACTrD,GAAG,cAEF,EAECsD,KAAK,IACPtD,GAAG,oBACQuC,UAAU,CACpB,CACF;AAAA,EACJ","ignoreList":[]}
+{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","StyledAnchorNavigation","StyledPanel","StyledBody","StyledPanelBody","StyledRequiredContainer","minScrimSize","colors","getShadow","spacing","isIE11","mediaBreakpointsDown","mediaHeightDown","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","navigationWidth","StyledNavigation","StyledContent","panelWidth","zIndexes","panel","footer","animationDuration","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$altAnimation","_ref8","gray85","gray96","_ref9","$minusHeight","_ref0","$offsetTop","_ref1","$rightOffset","StyledPageMain","p","$fillHeight","$flex","_ref10","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref11"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledAnchorNavigation } from '../AnchorNavigation/AnchorNavigation.styles'\nimport {\n  StyledPanel,\n  StyledBody as StyledPanelBody,\n} from '../Panel/Panel.styles'\nimport { StyledRequiredContainer } from '../Required/Required.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, mediaHeightDown } 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\nexport const 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  flex-grow: 1;\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  > ${StyledRequiredContainer} {\n    margin-bottom: 16px;\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  panel: 3,\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  @media ${mediaHeightDown.short} {\n    position: static;\n    box-shadow: none;\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  @media ${mediaBreakpointsDown.tabletMd} {\n    ${getShadow(2)}\n    border-left: 0;\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.panel};\n  ${({ $minusHeight }) =>\n    css`\n      height: calc(100dvh - ${$minusHeight}px);\n    `}\n\n  ${({ $offsetTop }) =>\n    $offsetTop !== null &&\n    css`\n      top: ${$offsetTop}px;\n    `}\n\n  // High zoom: full-width sheet\n  ${({ $offsetTop, $rightOffset }) => css`\n    @media ${mediaBreakpointsDown.tabletMd} {\n      left: 0;\n      right: ${$rightOffset}px;\n      width: auto;\n      height: calc(100dvh - ${$offsetTop ?? 0}px);\n    }\n  `}\n\n  // High zoom: the panel scrolls as a whole\n  @media ${mediaHeightDown.short} {\n    > ${StyledPanel} {\n      height: auto;\n      min-height: 100%;\n      overflow: visible;\n\n      > ${StyledPanelBody} {\n        flex: 1 0 auto;\n        height: auto;\n        overflow: visible;\n      }\n    }\n  }\n`\n\nexport const StyledPageMain = styled.div<{\n  $flex?: boolean\n  $fillHeight?: boolean\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  ${(p) => (p.$fillHeight ? `height: 100%;` : '')}\n  ${(p) => (p.$flex ? `display: flex; flex-direction: column;` : '')}\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  $fillHeight?: boolean\n}>`\n  display: grid;\n  grid-template-columns: 1fr auto;\n\n  // High zoom: content must not widen the page\n  @media ${mediaBreakpointsDown.tabletMd} {\n    grid-template-columns: minmax(0, 1fr) auto;\n\n    > * {\n      min-width: 0;\n    }\n  }\n\n  height: ${(p) => (p.$fillHeight ? '100%' : '')};\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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","ignoreList":[]}

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

@@ -57,6 +57,7 @@ export interface PageAsideProps extends PageComponentProps {
     restoreFocusOnClose?: boolean;
     /**
      * When true, contains keyboard focus inside the aside while it is open, so focus cannot move to the rest of the page (a focus trap). Backed by the `FocusScope` `contain` behavior.
+     * On small screens (up to the `tabletMd` breakpoint), where the aside overlays the page as a sheet, focus is always contained and restored on close, and moves into the aside when it opens, regardless of these props.
      * @a11y Use for modal-like asides so focus stays inside the panel even when the focused element is removed (e.g. selecting a filter with no results).
      * @since 12.51.0
      */

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 React from 'react'\nimport type { AnchorNavigationSection } from '../AnchorNavigation/AnchorNavigation.types'\nimport type { Props } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface PageProps extends PageComponentProps {\n  /**\n   * Opt-in: makes Page fill its parent height and propagates that layout behavior\n   * to Page.Main and Page.Aside to improve sticky footer/page height behavior.\n   *\n   * @since 12.45.0\n   */\n  fillHeight?: boolean\n}\n\nexport interface PageBodyProps extends PageComponentProps {}\n\nexport interface PageBodyNavigationProps\n  extends Omit<React.HtmlHTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  sections?: AnchorNavigationSection[]\n  selected?: string\n  onSelect?: (id: string) => void\n  minSections?: number\n}\n\nexport interface PageBodyProps extends PageComponentProps {\n  /**\n   * @description If the content of the Page has required fields\n   * @since 12.48.0\n   */\n  required?: boolean\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   * If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).\n   * @a11y Moves focus into the aside as it appears, so keyboard and screen reader users are not left behind on the trigger.\n   * @since 12.36.1\n   */\n  focusOnOpen?: boolean\n  /**\n   * When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).\n   * @a11y Returns keyboard focus to the triggering control when the aside closes, so users are not dropped at the top of the page.\n   * @since 12.36.1\n   */\n  restoreFocusOnClose?: boolean\n  /**\n   * When true, contains keyboard focus inside the aside while it is open, so focus cannot move to the rest of the page (a focus trap). Backed by the `FocusScope` `contain` behavior.\n   * @a11y Use for modal-like asides so focus stays inside the panel even when the focused element is removed (e.g. selecting a filter with no results).\n   * @since 12.51.0\n   */\n  containFocus?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {\n  /**\n   * Sets display flex column on the element and makes the body grow.\n   *\n   * Helps with small content and pushing the footer to the bottom of the screen.\n   *\n   * @since 12.45.0\n   */\n  flex?: boolean\n}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":"","ignoreList":[]}
+{"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 { Props } from '../_utils/types'\n\ninterface CustomizableStyledComponent {\n  as?: string | React.ComponentType<any>\n}\n\nexport interface PageComponentProps\n  extends CustomizableStyledComponent,\n    Props,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface PageProps extends PageComponentProps {\n  /**\n   * Opt-in: makes Page fill its parent height and propagates that layout behavior\n   * to Page.Main and Page.Aside to improve sticky footer/page height behavior.\n   *\n   * @since 12.45.0\n   */\n  fillHeight?: boolean\n}\n\nexport interface PageBodyProps extends PageComponentProps {}\n\nexport interface PageBodyNavigationProps\n  extends Omit<React.HtmlHTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  sections?: AnchorNavigationSection[]\n  selected?: string\n  onSelect?: (id: string) => void\n  minSections?: number\n}\n\nexport interface PageBodyProps extends PageComponentProps {\n  /**\n   * @description If the content of the Page has required fields\n   * @since 12.48.0\n   */\n  required?: boolean\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   * If the aside block should be open\n   * @since 10.19.0\n   */\n  open?: boolean\n  /**\n   * When true, moves keyboard focus to the aside container when it opens (on a closed -> open transition).\n   * @a11y Moves focus into the aside as it appears, so keyboard and screen reader users are not left behind on the trigger.\n   * @since 12.36.1\n   */\n  focusOnOpen?: boolean\n  /**\n   * When true, restores focus back to the element that was focused before the aside opened (on an open -> closed transition).\n   * @a11y Returns keyboard focus to the triggering control when the aside closes, so users are not dropped at the top of the page.\n   * @since 12.36.1\n   */\n  restoreFocusOnClose?: boolean\n  /**\n   * When true, contains keyboard focus inside the aside while it is open, so focus cannot move to the rest of the page (a focus trap). Backed by the `FocusScope` `contain` behavior.\n   * On small screens (up to the `tabletMd` breakpoint), where the aside overlays the page as a sheet, focus is always contained and restored on close, and moves into the aside when it opens, regardless of these props.\n   * @a11y Use for modal-like asides so focus stays inside the panel even when the focused element is removed (e.g. selecting a filter with no results).\n   * @since 12.51.0\n   */\n  containFocus?: boolean\n}\n\nexport interface PageMainProps extends PageComponentProps {\n  /**\n   * Sets display flex column on the element and makes the body grow.\n   *\n   * Helps with small content and pushing the footer to the bottom of the screen.\n   *\n   * @since 12.45.0\n   */\n  flex?: boolean\n}\n\nexport interface PageFooterProps extends PageComponentProps {}\n\nexport type PageAsideAnimationStatus = 'open' | 'closed' | 'opening' | 'closing'\n"],"mappings":"","ignoreList":[]}

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

@@ -1,9 +1,20 @@
 export declare const mediaBreakpointsDown: {
+    tabletSm: string;
     tabletMd: string;
     tabletLg: string;
     desktopMd: string;
 };
+/** Short viewports (high zoom): no room for sticky elements */
+export declare const mediaHeightDown: {
+    short: string;
+};
+/** Very narrow viewports (400% zoom, small phones) */
+export declare const mediaWidthDown: {
+    mobileSm: string;
+};
 export declare const getIsUsingSmallScreen: () => boolean;
+/** Reactive getIsUsingSmallScreen */
+export declare function useIsUsingSmallScreen(): boolean;
 export declare const wait: (ms: number) => Promise<void>;
 export declare function getBottomOffsetForFooterUseCase(footerEl: HTMLDivElement, globalBottomOffset: number): number | null;
 export declare function getGlobalBottomOffset(containerEl: HTMLDivElement): number;

package/dist/PageLayout/PageLayout.utils.js

@@ -1,16 +1,61 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
 import { breakpointRawMinWidthValues } from '../Grid/Grid.constants';
 var adjustMaxWidth = function adjustMaxWidth(breakpointMinWidth) {
   return breakpointMinWidth - 0.02;
 };
 export var mediaBreakpointsDown = {
+  tabletSm: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletSm), "px)"),
   tabletMd: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletMd), "px)"),
   tabletLg: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.tabletLg), "px)"),
   desktopMd: "(max-width: ".concat(adjustMaxWidth(breakpointRawMinWidthValues.desktopMd), "px)")
 };
+
+/** Short viewports (high zoom): no room for sticky elements */
+export var mediaHeightDown = {
+  "short": '(max-height: 479.98px)'
+};
+
+/** Very narrow viewports (400% zoom, small phones) */
+export var mediaWidthDown = {
+  mobileSm: '(max-width: 439.98px)'
+};
 export var getIsUsingSmallScreen = function getIsUsingSmallScreen() {
   var _globalThis$matchMedi;
   return (_globalThis$matchMedi = globalThis.matchMedia) === null || _globalThis$matchMedi === void 0 ? void 0 : _globalThis$matchMedi.call(globalThis, mediaBreakpointsDown.tabletMd).matches;
 };
+
+/** Reactive getIsUsingSmallScreen */
+export function useIsUsingSmallScreen() {
+  var _React$useState = React.useState(function () {
+      var _getIsUsingSmallScree;
+      return (_getIsUsingSmallScree = getIsUsingSmallScreen()) !== null && _getIsUsingSmallScree !== void 0 ? _getIsUsingSmallScree : false;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSmallScreen = _React$useState2[0],
+    setIsSmallScreen = _React$useState2[1];
+  React.useEffect(function () {
+    var _globalThis$matchMedi2;
+    var mediaQuery = (_globalThis$matchMedi2 = globalThis.matchMedia) === null || _globalThis$matchMedi2 === void 0 ? void 0 : _globalThis$matchMedi2.call(globalThis, mediaBreakpointsDown.tabletMd);
+    if (!mediaQuery) {
+      return;
+    }
+    var update = function update() {
+      return setIsSmallScreen(mediaQuery.matches);
+    };
+    update();
+    mediaQuery.addEventListener('change', update);
+    return function () {
+      return mediaQuery.removeEventListener('change', update);
+    };
+  }, []);
+  return isSmallScreen;
+}
 export var wait = function wait(ms) {
   return new Promise(function (resolve) {
     return setTimeout(resolve, ms);

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

@@ -1 +1 @@
-{"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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","ignoreList":[]}
+{"version":3,"file":"PageLayout.utils.js","names":["React","breakpointRawMinWidthValues","adjustMaxWidth","breakpointMinWidth","mediaBreakpointsDown","tabletSm","concat","tabletMd","tabletLg","desktopMd","mediaHeightDown","mediaWidthDown","mobileSm","getIsUsingSmallScreen","_globalThis$matchMedi","globalThis","matchMedia","call","matches","useIsUsingSmallScreen","_React$useState","useState","_getIsUsingSmallScree","_React$useState2","_slicedToArray","isSmallScreen","setIsSmallScreen","useEffect","_globalThis$matchMedi2","mediaQuery","update","addEventListener","removeEventListener","wait","ms","Promise","resolve","setTimeout","getBottomOffsetForFooterUseCase","footerEl","globalBottomOffset","_footerRect$y","viewportHeight","innerHeight","footerRect","getBoundingClientRect","footerTop","y","top","footerHeight","height","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 React from 'react'\nimport { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\n\nconst adjustMaxWidth = (breakpointMinWidth: number) => breakpointMinWidth - 0.02\n\nexport const mediaBreakpointsDown = {\n  tabletSm: `(max-width: ${adjustMaxWidth(\n    breakpointRawMinWidthValues.tabletSm\n  )}px)`,\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\n/** Short viewports (high zoom): no room for sticky elements */\nexport const mediaHeightDown = {\n  short: '(max-height: 479.98px)',\n}\n\n/** Very narrow viewports (400% zoom, small phones) */\nexport const mediaWidthDown = {\n  mobileSm: '(max-width: 439.98px)',\n}\n\nexport const getIsUsingSmallScreen = () =>\n  globalThis.matchMedia?.(mediaBreakpointsDown.tabletMd).matches\n\n/** Reactive getIsUsingSmallScreen */\nexport function useIsUsingSmallScreen() {\n  const [isSmallScreen, setIsSmallScreen] = React.useState(\n    () => getIsUsingSmallScreen() ?? false\n  )\n\n  React.useEffect(() => {\n    const mediaQuery = globalThis.matchMedia?.(mediaBreakpointsDown.tabletMd)\n    if (!mediaQuery) {\n      return\n    }\n\n    const update = () => setIsSmallScreen(mediaQuery.matches)\n    update()\n    mediaQuery.addEventListener('change', update)\n\n    return () => mediaQuery.removeEventListener('change', update)\n  }, [])\n\n  return isSmallScreen\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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","ignoreList":[]}

package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { Box } from '../../Box';
 import { Required } from '../../Required';
 import { Typography } from '../../Typography';
-import { StyledPageFooter } from './PageFooterTemplate.styles';
+import { StyledPageFooter, StyledPageFooterActions } from './PageFooterTemplate.styles';
 export var PageFooterTemplate = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
     notation = _ref.notation,
@@ -24,7 +24,7 @@ export var PageFooterTemplate = /*#__PURE__*/React.forwardRef(function (_ref, re
   }, typeof required === 'string' ? required : null), notation && /*#__PURE__*/React.createElement(Typography, {
     color: "gray15",
     intent: "small"
-  }, notation)), /*#__PURE__*/React.createElement(Box, {
+  }, notation)), /*#__PURE__*/React.createElement(StyledPageFooterActions, {
     display: "flex",
     gap: "sm"
   }, actions));

package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageFooterTemplate.js","names":["React","Box","Required","Typography","StyledPageFooter","PageFooterTemplate","forwardRef","_ref","ref","actions","notation","required","props","_objectWithoutProperties","_excluded","createElement","_extends","display","flexDirection","gap","showLabel","color","intent"],"sources":["../../../src/PageTemplate/PageFooterTemplate/PageFooterTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../../Box'\nimport { Required } from '../../Required'\nimport { Typography } from '../../Typography'\nimport { StyledPageFooter } from './PageFooterTemplate.styles'\nimport type { PageFooterTemplateProps } from './PageFooterTemplate.types'\n\nexport const PageFooterTemplate = React.forwardRef<\n  HTMLElement,\n  PageFooterTemplateProps\n>(({ actions, notation, required, ...props }, ref) => (\n  <StyledPageFooter ref={ref} data-core-react=\"page-footer-template\" {...props}>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"xs\">\n      {required && (\n        <Required showLabel>\n          {typeof required === 'string' ? required : null}\n        </Required>\n      )}\n\n      {notation && (\n        <Typography color=\"gray15\" intent=\"small\">\n          {notation}\n        </Typography>\n      )}\n    </Box>\n\n    <Box display=\"flex\" gap=\"sm\">\n      {actions}\n    </Box>\n  </StyledPageFooter>\n))\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,WAAW;AAC/B,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gBAAgB,QAAQ,6BAA6B;AAG9D,OAAO,IAAMC,kBAAkB,gBAAGL,KAAK,CAACM,UAAU,CAGhD,UAAAC,IAAA,EAA4CC,GAAG;EAAA,IAA5CC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBACxCd,KAAA,CAAAe,aAAA,CAACX,gBAAgB,EAAAY,QAAA;IAACR,GAAG,EAAEA,GAAI;IAAC,mBAAgB;EAAsB,GAAKI,KAAK,gBAC1EZ,KAAA,CAAAe,aAAA,CAACd,GAAG;IAACgB,OAAO,EAAC,MAAM;IAACC,aAAa,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAI,GAChDR,QAAQ,iBACPX,KAAA,CAAAe,aAAA,CAACb,QAAQ;IAACkB,SAAS;EAAA,GAChB,OAAOT,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAG,IACnC,CACX,EAEAD,QAAQ,iBACPV,KAAA,CAAAe,aAAA,CAACZ,UAAU;IAACkB,KAAK,EAAC,QAAQ;IAACC,MAAM,EAAC;EAAO,GACtCZ,QACS,CAEX,CAAC,eAENV,KAAA,CAAAe,aAAA,CAACd,GAAG;IAACgB,OAAO,EAAC,MAAM;IAACE,GAAG,EAAC;EAAI,GACzBV,OACE,CACW,CAAC;AAAA,CACpB,CAAC","ignoreList":[]}
+{"version":3,"file":"PageFooterTemplate.js","names":["React","Box","Required","Typography","StyledPageFooter","StyledPageFooterActions","PageFooterTemplate","forwardRef","_ref","ref","actions","notation","required","props","_objectWithoutProperties","_excluded","createElement","_extends","display","flexDirection","gap","showLabel","color","intent"],"sources":["../../../src/PageTemplate/PageFooterTemplate/PageFooterTemplate.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../../Box'\nimport { Required } from '../../Required'\nimport { Typography } from '../../Typography'\nimport {\n  StyledPageFooter,\n  StyledPageFooterActions,\n} from './PageFooterTemplate.styles'\nimport type { PageFooterTemplateProps } from './PageFooterTemplate.types'\n\nexport const PageFooterTemplate = React.forwardRef<\n  HTMLElement,\n  PageFooterTemplateProps\n>(({ actions, notation, required, ...props }, ref) => (\n  <StyledPageFooter ref={ref} data-core-react=\"page-footer-template\" {...props}>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"xs\">\n      {required && (\n        <Required showLabel>\n          {typeof required === 'string' ? required : null}\n        </Required>\n      )}\n\n      {notation && (\n        <Typography color=\"gray15\" intent=\"small\">\n          {notation}\n        </Typography>\n      )}\n    </Box>\n\n    <StyledPageFooterActions display=\"flex\" gap=\"sm\">\n      {actions}\n    </StyledPageFooterActions>\n  </StyledPageFooter>\n))\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,WAAW;AAC/B,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,EAChBC,uBAAuB,QAClB,6BAA6B;AAGpC,OAAO,IAAMC,kBAAkB,gBAAGN,KAAK,CAACO,UAAU,CAGhD,UAAAC,IAAA,EAA4CC,GAAG;EAAA,IAA5CC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBACxCf,KAAA,CAAAgB,aAAA,CAACZ,gBAAgB,EAAAa,QAAA;IAACR,GAAG,EAAEA,GAAI;IAAC,mBAAgB;EAAsB,GAAKI,KAAK,gBAC1Eb,KAAA,CAAAgB,aAAA,CAACf,GAAG;IAACiB,OAAO,EAAC,MAAM;IAACC,aAAa,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAI,GAChDR,QAAQ,iBACPZ,KAAA,CAAAgB,aAAA,CAACd,QAAQ;IAACmB,SAAS;EAAA,GAChB,OAAOT,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,GAAG,IACnC,CACX,EAEAD,QAAQ,iBACPX,KAAA,CAAAgB,aAAA,CAACb,UAAU;IAACmB,KAAK,EAAC,QAAQ;IAACC,MAAM,EAAC;EAAO,GACtCZ,QACS,CAEX,CAAC,eAENX,KAAA,CAAAgB,aAAA,CAACX,uBAAuB;IAACa,OAAO,EAAC,MAAM;IAACE,GAAG,EAAC;EAAI,GAC7CV,OACsB,CACT,CAAC;AAAA,CACpB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,8 @@
 export declare const StyledPageFooter: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const StyledPageFooterActions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("../../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../../Box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js

@@ -1,8 +1,15 @@
 import styled from 'styled-components';
+import { Box } from '../../Box';
+import { StyledButton, StyledLinkButton } from '../../Button/Button.styles';
+import { mediaBreakpointsDown, mediaHeightDown, mediaWidthDown } from '../../PageLayout/PageLayout.utils';
 import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageFooter = /*#__PURE__*/styled.footer.withConfig({
   displayName: "StyledPageFooter",
-  componentId: "core-12_53_3__sc-1f0zfyf-0"
-})(["display:flex;align-items:center;justify-content:space-between;background-color:", ";padding:", "px;width:100%;box-shadow:0 -2px 6px 0 rgba(0,0,0,0.1);position:sticky;bottom:0;"], colors.white, spacing.lg);
+  componentId: "core-12_54_0__sc-1f0zfyf-0"
+})(["display:flex;align-items:center;justify-content:space-between;background-color:", ";padding:", "px;width:100%;box-shadow:0 -2px 6px 0 rgba(0,0,0,0.1);position:sticky;bottom:0;@media ", "{flex-wrap:wrap;gap:", "px;}@media ", "{position:static;}"], colors.white, spacing.lg, mediaBreakpointsDown.tabletMd, spacing.sm, mediaHeightDown["short"]);
+export var StyledPageFooterActions = /*#__PURE__*/styled(Box).withConfig({
+  displayName: "StyledPageFooterActions",
+  componentId: "core-12_54_0__sc-1f0zfyf-1"
+})(["@media ", "{align-items:stretch;flex:1 1 100%;flex-direction:column;", ",", "{width:100%;}}"], mediaWidthDown.mobileSm, StyledButton, StyledLinkButton);
 //# sourceMappingURL=PageFooterTemplate.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageFooterTemplate.styles.js","names":["styled","colors","spacing","StyledPageFooter","footer","withConfig","displayName","componentId","white","lg"],"sources":["../../../src/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { colors } from '../../_styles/colors'\nimport { spacing } from '../../_styles/spacing'\n\nexport const StyledPageFooter = styled.footer`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${colors.white};\n  padding: ${spacing.lg}px;\n  width: 100%;\n  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.1);\n  position: sticky;\n  bottom: 0;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,OAAO,IAAMC,gBAAgB,gBAAGH,MAAM,CAACI,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wLAIvBN,MAAM,CAACO,KAAK,EACrBN,OAAO,CAACO,EAAE,CAKtB","ignoreList":[]}
+{"version":3,"file":"PageFooterTemplate.styles.js","names":["styled","Box","StyledButton","StyledLinkButton","mediaBreakpointsDown","mediaHeightDown","mediaWidthDown","colors","spacing","StyledPageFooter","footer","withConfig","displayName","componentId","white","lg","tabletMd","sm","StyledPageFooterActions","mobileSm"],"sources":["../../../src/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { StyledButton, StyledLinkButton } from '../../Button/Button.styles'\nimport {\n  mediaBreakpointsDown,\n  mediaHeightDown,\n  mediaWidthDown,\n} from '../../PageLayout/PageLayout.utils'\nimport { colors } from '../../_styles/colors'\nimport { spacing } from '../../_styles/spacing'\n\nexport const StyledPageFooter = styled.footer`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${colors.white};\n  padding: ${spacing.lg}px;\n  width: 100%;\n  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.1);\n  position: sticky;\n  bottom: 0;\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex-wrap: wrap;\n    gap: ${spacing.sm}px;\n  }\n\n  @media ${mediaHeightDown.short} {\n    position: static;\n  }\n`\n\nexport const StyledPageFooterActions = styled(Box)`\n  /* 400% zoom: one full-width button per row */\n  @media ${mediaWidthDown.mobileSm} {\n    align-items: stretch;\n    flex: 1 1 100%;\n    flex-direction: column;\n\n    ${StyledButton}, ${StyledLinkButton} {\n      width: 100%;\n    }\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,QAAQ,WAAW;AAC/B,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC3E,SACEC,oBAAoB,EACpBC,eAAe,EACfC,cAAc,QACT,mCAAmC;AAC1C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,uBAAuB;AAE/C,OAAO,IAAMC,gBAAgB,gBAAGT,MAAM,CAACU,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4PAIvBN,MAAM,CAACO,KAAK,EACrBN,OAAO,CAACO,EAAE,EAMZX,oBAAoB,CAACY,QAAQ,EAE7BR,OAAO,CAACS,EAAE,EAGVZ,eAAe,SAAM,CAG/B;AAED,OAAO,IAAMa,uBAAuB,gBAAGlB,MAAM,CAACC,GAAG,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oGAEvCP,cAAc,CAACa,QAAQ,EAK5BjB,YAAY,EAAKC,gBAAgB,CAItC","ignoreList":[]}

package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js

@@ -5,16 +5,16 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageHeader = /*#__PURE__*/styled(Page.Header).withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_53_3__sc-1d5kop0-0"
+  componentId: "core-12_54_0__sc-1d5kop0-0"
 })(["border-bottom:1px solid ", ";padding-top:", "px;", ""], colors.gray85, spacing.lg, function (p) {
   return p.$hasPaddingBottom && "padding-bottom: ".concat(spacing.lg, "px;");
 });
 export var StyledActions = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledActions",
-  componentId: "core-12_53_3__sc-1d5kop0-1"
+  componentId: "core-12_54_0__sc-1d5kop0-1"
 })(["width:fit-content;"]);
 export var StyledToggleActionBox = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledToggleActionBox",
-  componentId: "core-12_53_3__sc-1d5kop0-2"
+  componentId: "core-12_54_0__sc-1d5kop0-2"
 })(["bottom:", "px;position:relative;padding-left:48px;"], spacing.lg);
 //# sourceMappingURL=PageHeaderTemplate.styles.js.map

package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js

@@ -10,10 +10,10 @@ var panelWidthSmall = 360;
 export var mobileBreakpoint = 440;
 export var StyledPageAside = /*#__PURE__*/styled(Page.Aside).withConfig({
   displayName: "StyledPageAside",
-  componentId: "core-12_53_3__sc-1p7nu53-0"
+  componentId: "core-12_54_0__sc-1p7nu53-0"
 })(["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_53_3__sc-1p7nu53-1"
+  componentId: "core-12_54_0__sc-1p7nu53-1"
 })(["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=PagePaneTemplate.styles.js.map

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

@@ -5,14 +5,14 @@ import { spacing } from '../../_styles/spacing';
 export var mobileBreakpoint = 440;
 export var StyledPageWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageWrapper",
-  componentId: "core-12_53_3__sc-uuo7st-0"
+  componentId: "core-12_54_0__sc-uuo7st-0"
 })(["display:flex;flex-direction:column;"]);
 export var StyledPageBodyWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageBodyWrapper",
-  componentId: "core-12_53_3__sc-uuo7st-1"
+  componentId: "core-12_54_0__sc-uuo7st-1"
 })(["display:grid;grid-template-columns:1fr auto;"]);
 export var StyledPageBody = /*#__PURE__*/styled(Page.Body).withConfig({
   displayName: "StyledPageBody",
-  componentId: "core-12_53_3__sc-uuo7st-2"
+  componentId: "core-12_54_0__sc-uuo7st-2"
 })(["padding-bottom:", "px;@media ", "{padding:", "px;}"], spacing.lg, mediaBreakpointsDown.desktopMd, spacing.md);
 //# sourceMappingURL=PageTemplate.styles.js.map

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_53_3__sc-fy34i1-0"
+  componentId: "core-12_54_0__sc-fy34i1-0"
 })(["display:flex;align-items:center;"]);
 export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledPageCount",
-  componentId: "core-12_53_3__sc-fy34i1-1"
+  componentId: "core-12_54_0__sc-fy34i1-1"
 })(["margin-right:", "px;"], spacing.xl);
 export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledCurrentPage",
-  componentId: "core-12_53_3__sc-fy34i1-2"
+  componentId: "core-12_54_0__sc-fy34i1-2"
 })(["margin-right:", "px;"], spacing.sm);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_53_3__sc-fy34i1-3"
+  componentId: "core-12_54_0__sc-fy34i1-3"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_53_3__sc-fy34i1-4"
+  componentId: "core-12_54_0__sc-fy34i1-4"
 })(["min-height:80px;max-height:300px;max-width:248px;"]);
 //# sourceMappingURL=Pagination.styles.js.map

package/dist/Panel/Panel.styles.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Card } from '../Card';
+import { mediaBreakpointsDown } from '../PageLayout/PageLayout.utils';
 import { StyledRequiredContainer } from '../Required/Required.styles';
 import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
 import { H2 } from '../Semantic';
@@ -9,18 +10,18 @@ import { spacing } from '../_styles/spacing';
 var headerActionSize = 36;
 var buttonShadowWidth = 2;
 var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
-var panel = /*#__PURE__*/css(["display:flex;padding:", "px;background:", ";"], spacing.lg, colors.white);
+var panel = /*#__PURE__*/css(["display:flex;padding:", "px;background:", ";@media ", "{flex-wrap:wrap;row-gap:", "px;}"], spacing.lg, colors.white, mediaBreakpointsDown.tabletMd, spacing.sm);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_53_3__sc-lidix2-0"
-})(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
+  componentId: "core-12_54_0__sc-lidix2-0"
+})(["border-bottom:1px solid ", ";", " @media ", "{flex-wrap:nowrap;}@media ", "{flex-wrap:wrap;}"], colors.gray85, panel, mediaBreakpointsDown.tabletMd, mediaBreakpointsDown.tabletSm);
 export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_53_3__sc-lidix2-1"
-})(["flex-grow:1;"]);
+  componentId: "core-12_54_0__sc-lidix2-1"
+})(["flex-grow:1;min-width:0;@media ", "{flex-basis:100%;order:1;}"], mediaBreakpointsDown.tabletSm);
 export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBackAction",
-  componentId: "core-12_53_3__sc-lidix2-2"
+  componentId: "core-12_54_0__sc-lidix2-2"
 })(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
   var $active = _ref.$active;
   return $active ? headerActionSize : 0;
@@ -36,38 +37,38 @@ export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledMoreMenu",
-  componentId: "core-12_53_3__sc-lidix2-3"
+  componentId: "core-12_54_0__sc-lidix2-3"
 })(["max-height:128px;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_53_3__sc-lidix2-4"
-})(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
+  componentId: "core-12_54_0__sc-lidix2-4"
+})(["display:flex;margin-left:", "px;flex-shrink:0;", " @media ", "{margin-left:auto;}"], spacing.lg, gutter, mediaBreakpointsDown.tabletSm);
 export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCloseButton",
-  componentId: "core-12_53_3__sc-lidix2-5"
-})(["margin-left:", "px;"], spacing.sm);
+  componentId: "core-12_54_0__sc-lidix2-5"
+})(["margin-left:", "px;flex-shrink:0;@media ", "{", " + &{margin-left:auto;}}"], spacing.sm, mediaBreakpointsDown.tabletSm, StyledTitle);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_53_3__sc-lidix2-6"
+  componentId: "core-12_54_0__sc-lidix2-6"
 })(["height:100%;background:", ";overflow-y:auto;> ", "{margin:", "px;}&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
   var secondaryBgColor = _ref5.secondaryBgColor;
   return secondaryBgColor ? colors.gray96 : colors.white;
 }, StyledRequiredContainer, spacing.lg, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
 export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
   displayName: "StyledPanel",
-  componentId: "core-12_53_3__sc-lidix2-7"
+  componentId: "core-12_54_0__sc-lidix2-7"
 })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
 export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterNotation",
-  componentId: "core-12_53_3__sc-lidix2-8"
+  componentId: "core-12_54_0__sc-lidix2-8"
 })(["flex-grow:1;"]);
 export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterActions",
-  componentId: "core-12_53_3__sc-lidix2-9"
+  componentId: "core-12_54_0__sc-lidix2-9"
 })(["", ""], gutter);
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_53_3__sc-lidix2-10"
+  componentId: "core-12_54_0__sc-lidix2-10"
 })(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
   var $hasShadow = _ref6.$hasShadow;
   return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);

package/dist/Panel/Panel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.styles.js","names":["styled","css","Card","StyledRequiredContainer","StyledSection","StyledSectionInner","H2","colors","getFocusInset","spacing","headerActionSize","buttonShadowWidth","gutter","sm","panel","lg","white","StyledHeader","div","withConfig","displayName","componentId","gray85","StyledTitle","StyledHeaderBackAction","_ref","$active","_ref2","_ref3","_ref4","StyledMoreMenu","StyledHeaderActions","StyledCloseButton","StyledBody","_ref5","secondaryBgColor","gray96","StyledPanel","aside","StyledFooterNotation","StyledFooterActions","StyledFooter","_ref6","$hasShadow"],"sources":["../../src/Panel/Panel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledRequiredContainer } from '../Required/Required.styles'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { H2 } from '../Semantic'\nimport { colors } from '../_styles/colors'\nimport { getFocusInset } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nconst headerActionSize = 36\nconst buttonShadowWidth = 2\n\nconst gutter = css`\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nconst panel = css`\n  display: flex;\n  padding: ${spacing.lg}px;\n  background: ${colors.white};\n`\n\nexport const StyledHeader = styled.div`\n  border-bottom: 1px solid ${colors.gray85};\n\n  ${panel}\n`\n\nexport const StyledTitle = styled(H2)`\n  flex-grow: 1;\n`\n\nexport const StyledHeaderBackAction = styled.div<{ $active: boolean }>`\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ${({ $active }) => ($active ? headerActionSize : 0)}px;\n  margin-right: ${({ $active }) => ($active ? spacing.lg : 0)}px;\n  opacity: ${({ $active }) => ($active ? 1 : 0)};\n  transform: translateX(\n    ${({ $active }) =>\n      $active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth)}px\n  );\n`\n\nexport const StyledMoreMenu = styled(Card)`\n  max-height: 128px;\n`\n\nexport const StyledHeaderActions = styled.div`\n  display: flex;\n  margin-left: ${spacing.lg}px;\n  flex-shrink: 0;\n\n  ${gutter}\n`\n\nexport const StyledCloseButton = styled.div`\n  margin-left: ${spacing.sm}px;\n`\n\nexport const StyledBody = styled.div<{ secondaryBgColor?: boolean }>`\n  height: 100%;\n  background: ${({ secondaryBgColor }) =>\n    secondaryBgColor ? colors.gray96 : colors.white};\n  overflow-y: auto;\n\n  > ${StyledRequiredContainer} {\n    margin: ${spacing.lg}px;\n  }\n\n  &:focus-visible {\n    ${getFocusInset()}\n  }\n\n  > ${StyledSection} {\n    padding-left: ${spacing.lg}px;\n    padding-right: ${spacing.lg}px;\n\n    ${StyledSection} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: ${spacing.lg}px;\n    }\n  }\n`\n\nexport const StyledPanel = styled.aside`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ${colors.white};\n  overflow: hidden;\n`\n\nexport const StyledFooterNotation = styled.div`\n  flex-grow: 1;\n`\n\nexport const StyledFooterActions = styled.div`\n  ${gutter}\n`\n\nexport const StyledFooter = styled.div<{ $hasShadow: boolean }>`\n  border-top: 1px solid ${colors.gray85};\n  justify-content: flex-end;\n\n  ${panel}\n\n  ${({ $hasShadow }) =>\n    $hasShadow &&\n    css`\n      box-shadow: 0 -4px 6px 0 #0000001a;\n      z-index: 1;\n    `}\n`\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Panel.styles.js","names":["styled","css","Card","mediaBreakpointsDown","StyledRequiredContainer","StyledSection","StyledSectionInner","H2","colors","getFocusInset","spacing","headerActionSize","buttonShadowWidth","gutter","sm","panel","lg","white","tabletMd","StyledHeader","div","withConfig","displayName","componentId","gray85","tabletSm","StyledTitle","StyledHeaderBackAction","_ref","$active","_ref2","_ref3","_ref4","StyledMoreMenu","StyledHeaderActions","StyledCloseButton","StyledBody","_ref5","secondaryBgColor","gray96","StyledPanel","aside","StyledFooterNotation","StyledFooterActions","StyledFooter","_ref6","$hasShadow"],"sources":["../../src/Panel/Panel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { mediaBreakpointsDown } from '../PageLayout/PageLayout.utils'\nimport { StyledRequiredContainer } from '../Required/Required.styles'\nimport { StyledSection, StyledSectionInner } from '../Section/Section.styles'\nimport { H2 } from '../Semantic'\nimport { colors } from '../_styles/colors'\nimport { getFocusInset } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nconst headerActionSize = 36\nconst buttonShadowWidth = 2\n\nconst gutter = css`\n  > * + * {\n    margin-left: ${spacing.sm}px;\n  }\n`\n\nconst panel = css`\n  display: flex;\n  padding: ${spacing.lg}px;\n  background: ${colors.white};\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex-wrap: wrap;\n    row-gap: ${spacing.sm}px;\n  }\n`\n\nexport const StyledHeader = styled.div`\n  border-bottom: 1px solid ${colors.gray85};\n\n  ${panel}\n\n  @media ${mediaBreakpointsDown.tabletMd} {\n    flex-wrap: nowrap;\n  }\n\n  @media ${mediaBreakpointsDown.tabletSm} {\n    flex-wrap: wrap;\n  }\n`\n\nexport const StyledTitle = styled(H2)`\n  flex-grow: 1;\n  min-width: 0;\n\n  @media ${mediaBreakpointsDown.tabletSm} {\n    /* Own row, under the back, actions and close controls */\n    flex-basis: 100%;\n    order: 1;\n  }\n`\n\nexport const StyledHeaderBackAction = styled.div<{ $active: boolean }>`\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ${({ $active }) => ($active ? headerActionSize : 0)}px;\n  margin-right: ${({ $active }) => ($active ? spacing.lg : 0)}px;\n  opacity: ${({ $active }) => ($active ? 1 : 0)};\n  transform: translateX(\n    ${({ $active }) =>\n      $active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth)}px\n  );\n`\n\nexport const StyledMoreMenu = styled(Card)`\n  max-height: 128px;\n`\n\nexport const StyledHeaderActions = styled.div`\n  display: flex;\n  margin-left: ${spacing.lg}px;\n  flex-shrink: 0;\n\n  ${gutter}\n\n  @media ${mediaBreakpointsDown.tabletSm} {\n    /* Right end of the controls row */\n    margin-left: auto;\n  }\n`\n\nexport const StyledCloseButton = styled.div`\n  margin-left: ${spacing.sm}px;\n  flex-shrink: 0;\n\n  @media ${mediaBreakpointsDown.tabletSm} {\n    ${StyledTitle} + & {\n      margin-left: auto;\n    }\n  }\n`\n\nexport const StyledBody = styled.div<{ secondaryBgColor?: boolean }>`\n  height: 100%;\n  background: ${({ secondaryBgColor }) =>\n    secondaryBgColor ? colors.gray96 : colors.white};\n  overflow-y: auto;\n\n  > ${StyledRequiredContainer} {\n    margin: ${spacing.lg}px;\n  }\n\n  &:focus-visible {\n    ${getFocusInset()}\n  }\n\n  > ${StyledSection} {\n    padding-left: ${spacing.lg}px;\n    padding-right: ${spacing.lg}px;\n\n    ${StyledSection} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ${StyledSectionInner} {\n      padding-top: ${spacing.lg}px;\n    }\n  }\n`\n\nexport const StyledPanel = styled.aside`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ${colors.white};\n  overflow: hidden;\n`\n\nexport const StyledFooterNotation = styled.div`\n  flex-grow: 1;\n`\n\nexport const StyledFooterActions = styled.div`\n  ${gutter}\n`\n\nexport const StyledFooter = styled.div<{ $hasShadow: boolean }>`\n  border-top: 1px solid ${colors.gray85};\n  justify-content: flex-end;\n\n  ${panel}\n\n  ${({ $hasShadow }) =>\n    $hasShadow &&\n    css`\n      box-shadow: 0 -4px 6px 0 #0000001a;\n      z-index: 1;\n    `}\n`\n"],"mappings":"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","ignoreList":[]}

package/dist/Pill/Pill.styles.js

@@ -6,18 +6,18 @@ import { PillColorPalets } from './Pill.colorPalette';
 var pillButtonSize = 16;
 export var StyledPill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPill",
-  componentId: "core-12_53_3__sc-99e1t5-0"
+  componentId: "core-12_54_0__sc-99e1t5-0"
 })(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
   var $color = _ref.$color;
   return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
 });
 export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_53_3__sc-99e1t5-1"
+  componentId: "core-12_54_0__sc-99e1t5-1"
 })(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
 export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledRemoveButton",
-  componentId: "core-12_53_3__sc-99e1t5-2"
+  componentId: "core-12_54_0__sc-99e1t5-2"
 })(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
   var $color = _ref2.$color;
   return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);

package/dist/PillSelect/PillSelect.styles.js

@@ -6,23 +6,23 @@ import { spacing } from '../_styles/spacing';
 var checkedIconPlaceholderWidth = 32;
 export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectOptionWrapper",
-  componentId: "core-12_53_3__sc-1ai2ze0-0"
+  componentId: "core-12_54_0__sc-1ai2ze0-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectCheckedContainer",
-  componentId: "core-12_53_3__sc-1ai2ze0-1"
+  componentId: "core-12_54_0__sc-1ai2ze0-1"
 })(["align-items:center;color:", ";display:inline-flex;padding-left:", "px;width:", "px;"], colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
 export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "PillSelectLabel",
-  componentId: "core-12_53_3__sc-1ai2ze0-2"
+  componentId: "core-12_54_0__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectOptionLabel = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "PillSelectOptionLabel",
-  componentId: "core-12_53_3__sc-1ai2ze0-3"
+  componentId: "core-12_54_0__sc-1ai2ze0-3"
 })(["min-width:0;overflow-wrap:break-word;word-break:normal;"]);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_53_3__sc-1ai2ze0-4"
+  componentId: "core-12_54_0__sc-1ai2ze0-4"
 })(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["pointer-events:none;"]);

package/dist/Popover/Popover.js

@@ -45,7 +45,12 @@ function PopoverInner(_ref2, ref) {
   var overlayNode = isReactElement(overlay) ? (/*#__PURE__*/React.cloneElement(overlay, {
     placement: placement
   })) : /*#__PURE__*/React.createElement(React.Fragment, null);
-  return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React.createElement(OverlayTrigger, _objectSpread(_objectSpread({
+    // Popovers are typically hover/focus-triggered, not dropdown-like,
+    // so background scroll should not be locked by default. Can be
+    // overridden for the rare click-triggered, dropdown-like popover.
+    scrollLock: false
+  }, props), {}, {
     initialIsVisible: initialIsVisible,
     overlay: overlayNode,
     placement: placement,