@pega/cosmos-react-core 9.14.0 → 9.15.1

package/lib/components/AppShell/Drawer.styles.d.ts

@@ -1,17 +1,5 @@
 import type { DrawerProps } from '../Drawer';
-export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps & {
-    topOffset: string;
-}>> & string;
-/**
- * Fixed-position container that offsets the drawer below the top chrome
- * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
- * The inner Drawer uses position='absolute' relative to this container.
- * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
- * rounding issues and ensuring the drawer always fills the available height.
- */
-export declare const StyledTopNavDrawerOffset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $topOffset: string;
-}>> & string;
+export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps>> & string;
 export declare const StyledDrawerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledDrawerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     displayPins: boolean;

package/lib/components/AppShell/Drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB;eAAyC,MAAM;YA6B9E,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB;gBAA4B,MAAM;YAStE,CAAC;AAIF,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAOlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAMpC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,gPA2B9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAOlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAMpC,CAAC"}

package/lib/components/AppShell/Drawer.styles.js

@@ -7,44 +7,28 @@ import { StyledLabel } from '../Label';
 import { StyledForm } from '../MultiStepForm/MultiStepForm';
 import { navOpenWidth } from './AppShell.styles';
 import { navContrastColors } from './style-utils';
-export const StyledDrawerWrapper = styled.div(({ theme, open, topOffset }) => {
+export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
     const { components: { 'app-shell': { nav: { background: navBg } } } } = theme;
     const { foreground, border: borderColor } = navContrastColors(theme);
     return css `
-      display: flex;
-      flex-direction: column;
-      background: ${navBg};
-      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
-      height: unset;
-      inset-block: ${topOffset} 0;
-      color: ${foreground};
-      opacity: ${open ? 1 : 0};
-      border-inline-end: ${rem(1)} solid ${borderColor};
+    display: flex;
+    flex-direction: column;
+    background: ${navBg};
+    width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
+    height: unset;
+    inset-block: var(--appshell-top-offset, 0) var(--appshell-bottom-offset, 0);
+    color: ${foreground};
+    opacity: ${open ? 1 : 0};
+    border-inline-end: ${rem(1)} solid ${borderColor};
 
-      ${StyledForm},
-      ${StyledLabel},
+    ${StyledForm},
+    ${StyledLabel},
     ${StyledMetaListItem} {
-        color: ${foreground};
-      }
-    `;
+      color: ${foreground};
+    }
+  `;
 });
 StyledDrawerWrapper.defaultProps = defaultThemeProp;
-/**
- * Fixed-position container that offsets the drawer below the top chrome
- * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
- * The inner Drawer uses position='absolute' relative to this container.
- * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
- * rounding issues and ensuring the drawer always fills the available height.
- */
-export const StyledTopNavDrawerOffset = styled.div(({ $topOffset, theme }) => css `
-    position: fixed;
-    inset-block-start: ${$topOffset};
-    inset-inline-start: 0;
-    inset-block-end: 0;
-    width: ${navOpenWidth};
-    z-index: ${theme.base['z-index'].drawer};
-  `);
-StyledTopNavDrawerOffset.defaultProps = defaultThemeProp;
 export const StyledDrawerHeading = styled.header(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { foreground } = navContrastColors(theme);

package/lib/components/AppShell/Drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps & { topOffset: string }>(\n  ({ theme, open, topOffset }) => {\n    const {\n      components: {\n        'app-shell': {\n          nav: { background: navBg }\n        }\n      }\n    } = theme;\n    const { foreground, border: borderColor } = navContrastColors(theme);\n\n    return css`\n      display: flex;\n      flex-direction: column;\n      background: ${navBg};\n      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));\n      height: unset;\n      inset-block: ${topOffset} 0;\n      color: ${foreground};\n      opacity: ${open ? 1 : 0};\n      border-inline-end: ${rem(1)} solid ${borderColor};\n\n      ${StyledForm},\n      ${StyledLabel},\n    ${StyledMetaListItem} {\n        color: ${foreground};\n      }\n    `;\n  }\n);\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\n/**\n * Fixed-position container that offsets the drawer below the top chrome\n * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.\n * The inner Drawer uses position='absolute' relative to this container.\n * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit\n * rounding issues and ensuring the drawer always fills the available height.\n */\nexport const StyledTopNavDrawerOffset = styled.div<{ $topOffset: string }>(\n  ({ $topOffset, theme }) => css`\n    position: fixed;\n    inset-block-start: ${$topOffset};\n    inset-inline-start: 0;\n    inset-block-end: 0;\n    width: ${navOpenWidth};\n    z-index: ${theme.base['z-index'].drawer};\n  `\n);\n\nStyledTopNavDrawerOffset.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background: ${nestedListHeader};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(() => {\n  return css`\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { background: navBg }\n      }\n    }\n  } = theme;\n  const { foreground, border: borderColor } = navContrastColors(theme);\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    background: ${navBg};\n    width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));\n    height: unset;\n    inset-block: var(--appshell-top-offset, 0) var(--appshell-bottom-offset, 0);\n    color: ${foreground};\n    opacity: ${open ? 1 : 0};\n    border-inline-end: ${rem(1)} solid ${borderColor};\n\n    ${StyledForm},\n    ${StyledLabel},\n    ${StyledMetaListItem} {\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background: ${nestedListHeader};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(() => {\n  return css`\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Backdrop/Backdrop.js

@@ -21,7 +21,7 @@ export const StyledBackdrop = styled(Flex)(props => {
     position: ${position};
     z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
     inset-inline: 0;
-    inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};
+    inset-block-start: ${position === 'fixed' ? 'var(--appshell-hard-top-offset, 0rem)' : '0'};
     inset-block-end: 0;
     padding-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};
     border-radius: inherit;

package/lib/components/Backdrop/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n  PropsWithDefaults,\n  ExcludeStrict,\n  WithAttributes,\n  RefElement,\n  TestIdProp,\n  OmitStrict\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /**\n     * Opacity of the Backdrop.\n     * @default 0.4\n     */\n    alpha?: number;\n    /** Props passed to Flex container. */\n    container?: ExcludeStrict<FlexProps['container'], true>;\n    /**\n     * Toggles visibility of Backdrop.\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Determines the color of the Backdrop.\n     * @default 'dark'\n     */\n    variant?: 'dark' | 'light';\n    /**\n     * Transition speed of Backdrop animation.\n     * @default 'medium'\n     */\n    transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n    /**\n     * The position of the Backdrop.\n     * @default 'fixed'\n     */\n    position?: 'absolute' | 'fixed';\n    /** Accepts a callback that gets invoked before opening Backdrop. */\n    onBeforeTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked after opening Backdrop. */\n    onAfterTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked before closing Backdrop. */\n    onBeforeTransitionOut?: () => void;\n    /** Accepts a callback that gets invoked after closing Backdrop */\n    onAfterTransitionOut?: () => void;\n  }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<\n  OmitStrict<BackdropPropsWithDefaults, 'open'> & { opacity: 0 | 1 }\n>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    inset-inline: 0;\n    inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};\n    inset-block-end: 0;\n    padding-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nexport default withTestIds(\n  forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n    {\n      testId,\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.6,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBackdropTestIds);\n    const [state, setState] = useState<State>('closed');\n    const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n    const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open]);\n\n    // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n    useEffect(() => {\n      if (!backdropRef.current) return;\n      const opacity = window.getComputedStyle(backdropRef.current).opacity;\n      // If the opacity is already at the destination value, sync the state value.\n      if (state === 'closing' && opacity === '0') {\n        // Since the transition never ran, we have to pretend it did and call the callback.\n        // TODO: This maybe can be fixed with the animation api\n        onAfterTransitionOut?.();\n        setState('closed');\n      }\n      if (state === 'opening' && opacity === '1') {\n        // ditto, see above...\n        onAfterTransitionIn?.();\n        setState('open');\n      }\n    }, [state]);\n\n    return !open && state === 'closed' ? null : (\n      <Configuration portalTarget={backdropEl ?? undefined}>\n        <StyledBackdrop\n          data-testid={testIds.root}\n          container={{ justify: 'center', alignItems: 'center', ...container }}\n          transitionSpeed={transitionSpeed}\n          opacity={state === 'opening' || state === 'open' ? 1 : 0}\n          alpha={alpha}\n          variant={variant}\n          position={position}\n          onTransitionEnd={onTransitionEnd}\n          ref={backdropRef}\n          {...restProps}\n        >\n          {children}\n        </StyledBackdrop>\n      </Configuration>\n    );\n  }),\n  getBackdropTestIds\n);\n"]}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n  PropsWithDefaults,\n  ExcludeStrict,\n  WithAttributes,\n  RefElement,\n  TestIdProp,\n  OmitStrict\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /**\n     * Opacity of the Backdrop.\n     * @default 0.4\n     */\n    alpha?: number;\n    /** Props passed to Flex container. */\n    container?: ExcludeStrict<FlexProps['container'], true>;\n    /**\n     * Toggles visibility of Backdrop.\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Determines the color of the Backdrop.\n     * @default 'dark'\n     */\n    variant?: 'dark' | 'light';\n    /**\n     * Transition speed of Backdrop animation.\n     * @default 'medium'\n     */\n    transitionSpeed?: 'slow' | 'medium' | 'fast' | 'none';\n    /**\n     * The position of the Backdrop.\n     * @default 'fixed'\n     */\n    position?: 'absolute' | 'fixed';\n    /** Accepts a callback that gets invoked before opening Backdrop. */\n    onBeforeTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked after opening Backdrop. */\n    onAfterTransitionIn?: () => void;\n    /** Accepts a callback that gets invoked before closing Backdrop. */\n    onBeforeTransitionOut?: () => void;\n    /** Accepts a callback that gets invoked after closing Backdrop */\n    onAfterTransitionOut?: () => void;\n  }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n  BackdropProps,\n  'open' | 'transitionSpeed' | 'alpha' | 'position'\n>;\n\nconst transitionSpeedToTheme = {\n  slow: 2,\n  medium: 1,\n  fast: 0.5,\n  none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<\n  OmitStrict<BackdropPropsWithDefaults, 'open'> & { opacity: 0 | 1 }\n>(props => {\n  const {\n    theme: { base }\n  } = props;\n  const { opacity, alpha, variant, position } = props;\n  const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${\n    base.animation.speed\n  }), 1ms)`;\n\n  return css`\n    position: ${position};\n    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n    inset-inline: 0;\n    inset-block-start: ${position === 'fixed' ? 'var(--appshell-hard-top-offset, 0rem)' : '0'};\n    inset-block-end: 0;\n    padding-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};\n    border-radius: inherit;\n    opacity: ${opacity};\n    transition-property: opacity;\n    transition-timing-function: ${props.theme.base.animation.timing.ease};\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    transition-duration: 1ms;\n    transition-duration: ${transitionDuration};\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n\n    ${variant === 'dark' &&\n    css`\n      background: rgba(0, 0, 0, ${alpha});\n    `}\n\n    ${variant === 'light' &&\n    css`\n      background: rgba(255, 255, 255, ${alpha});\n    `}\n  `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' | 'opening' | 'open' | 'closing';\n\nexport default withTestIds(\n  forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n    {\n      testId,\n      children,\n      container,\n      open = false,\n      variant = 'dark',\n      transitionSpeed = 'medium',\n      alpha = 0.6,\n      position = 'fixed',\n      onBeforeTransitionIn,\n      onAfterTransitionIn,\n      onBeforeTransitionOut,\n      onAfterTransitionOut,\n      ...restProps\n    },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBackdropTestIds);\n    const [state, setState] = useState<State>('closed');\n    const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n    const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.propertyName !== 'opacity' || e.target !== e.currentTarget) return;\n        let nextState: State;\n\n        if (state === 'closing') {\n          nextState = 'closed';\n          onAfterTransitionOut?.();\n        } else {\n          nextState = 'open';\n          onAfterTransitionIn?.();\n        }\n\n        setState(nextState);\n      },\n      [state, onAfterTransitionOut, onAfterTransitionIn]\n    );\n\n    useEffect(() => {\n      if (open) {\n        if (state === 'closed' || state === 'closing') {\n          onBeforeTransitionIn?.();\n          reflow();\n          setState('opening');\n        }\n      } else if (state === 'open' || state === 'opening') {\n        onBeforeTransitionOut?.();\n        setState('closing');\n      }\n    }, [open]);\n\n    // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n    useEffect(() => {\n      if (!backdropRef.current) return;\n      const opacity = window.getComputedStyle(backdropRef.current).opacity;\n      // If the opacity is already at the destination value, sync the state value.\n      if (state === 'closing' && opacity === '0') {\n        // Since the transition never ran, we have to pretend it did and call the callback.\n        // TODO: This maybe can be fixed with the animation api\n        onAfterTransitionOut?.();\n        setState('closed');\n      }\n      if (state === 'opening' && opacity === '1') {\n        // ditto, see above...\n        onAfterTransitionIn?.();\n        setState('open');\n      }\n    }, [state]);\n\n    return !open && state === 'closed' ? null : (\n      <Configuration portalTarget={backdropEl ?? undefined}>\n        <StyledBackdrop\n          data-testid={testIds.root}\n          container={{ justify: 'center', alignItems: 'center', ...container }}\n          transitionSpeed={transitionSpeed}\n          opacity={state === 'opening' || state === 'open' ? 1 : 0}\n          alpha={alpha}\n          variant={variant}\n          position={position}\n          onTransitionEnd={onTransitionEnd}\n          ref={backdropRef}\n          {...restProps}\n        >\n          {children}\n        </StyledBackdrop>\n      </Configuration>\n    );\n  }),\n  getBackdropTestIds\n);\n"]}

package/lib/components/ClassificationMarking/ClassificationMarking.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAKf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;YAgB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;YAmCd,CAAC"}
+{"version":3,"file":"ClassificationMarking.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,gCAAgC;YACnC,MAAM;EAKf,CAAC;AAEF,eAAO,MAAM,aAAa;gBACZ,MAAM;WACX,MAAM;YACL,MAAM;eACH,MAAM;iBACJ,MAAM;eACR,KAAK,GAAG,QAAQ;YAoB3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;YAC1B,MAAM;YAKd,CAAC"}

package/lib/components/ClassificationMarking/ClassificationMarking.styles.js

@@ -1,6 +1,5 @@
 import styled, { css, createGlobalStyle } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';
 /**
  * Promotes --marking-height to :root so portaled elements
  * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.
@@ -15,7 +14,11 @@ export const StyledMarking = styled.div(({ background, color, height, fontSize,
     position: fixed;
     ${placement}: 0;
     inset-inline: 0;
+    box-sizing: content-box;
     height: ${height};
+    ${placement === 'bottom'
+        ? 'padding-block-end: var(--safe-area-inset-block-end, 0);'
+        : 'padding-block-start: var(--safe-area-inset-block-start, 0);'}
     line-height: ${height};
     text-align: center;
     font-weight: ${theme.base['font-weight'].bold};
@@ -27,39 +30,9 @@ export const StyledMarking = styled.div(({ background, color, height, fontSize,
   `;
 });
 StyledMarking.defaultProps = defaultThemeProp;
-export const StyledClassifiedContent = styled.div(({ height, theme }) => {
+export const StyledClassifiedContent = styled.div(({ height }) => {
     return css `
     --marking-height: ${height};
-    --top-offset: calc(${headerHeight} + var(--marking-height));
-    --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));
-    height: calc(100% - var(--marking-height));
-    min-height: calc(100% - var(--marking-height));
-
-    /* Header layout fix: position below top banner */
-    & > header:not(${StyledMobileNav}) {
-      position: fixed;
-      top: var(--marking-height);
-      width: 100%;
-    }
-
-    /* Desktop only: nav and main top offset and min-height */
-    @media (width > ${theme.base.breakpoints.sm}) {
-      & nav[data-app-region],
-      & nav[data-app-region] [role='dialog'],
-      & main[data-app-region] {
-        top: var(--top-offset);
-        min-height: var(--remaining-height);
-      }
-
-      /* Nav height */
-      & nav[data-app-region] {
-        height: var(--remaining-height);
-      }
-
-      & main[data-app-region] {
-        padding-block-end: var(--marking-height);
-      }
-    }
   `;
 });
 StyledClassifiedContent.defaultProps = defaultThemeProp;

package/lib/components/ClassificationMarking/ClassificationMarking.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;cAED,MAAM;mBACD,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;wBACY,MAAM;yBACL,YAAY;wCACG,YAAY;;;;;qBAK/B,eAAe;;;;;;;sBAOd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;;;;;;;;;;;;;GAiB5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { headerHeight, StyledMobileNav } from '../AppShell/AppShell.styles';\n\n/**\n * Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n */\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n  height: string;\n}>`\n  :root {\n    --marking-height: ${({ height }) => height};\n  }\n`;\n\nexport const StyledMarking = styled.div<{\n  background: string;\n  color: string;\n  height: string;\n  fontSize?: string;\n  fontFamily?: string;\n  placement: 'top' | 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n  return css`\n    position: fixed;\n    ${placement}: 0;\n    inset-inline: 0;\n    height: ${height};\n    line-height: ${height};\n    text-align: center;\n    font-weight: ${theme.base['font-weight'].bold};\n    ${fontFamily ? `font-family: ${fontFamily};` : ''}\n    ${fontSize ? `font-size: ${fontSize};` : ''}\n    z-index: ${theme.base['z-index'].max};\n    background: ${background};\n    color: ${color};\n  `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n  height: string;\n}>(({ height, theme }) => {\n  return css`\n    --marking-height: ${height};\n    --top-offset: calc(${headerHeight} + var(--marking-height));\n    --remaining-height: calc(100vh - (${headerHeight} + (var(--marking-height) * 2)));\n    height: calc(100% - var(--marking-height));\n    min-height: calc(100% - var(--marking-height));\n\n    /* Header layout fix: position below top banner */\n    & > header:not(${StyledMobileNav}) {\n      position: fixed;\n      top: var(--marking-height);\n      width: 100%;\n    }\n\n    /* Desktop only: nav and main top offset and min-height */\n    @media (width > ${theme.base.breakpoints.sm}) {\n      & nav[data-app-region],\n      & nav[data-app-region] [role='dialog'],\n      & main[data-app-region] {\n        top: var(--top-offset);\n        min-height: var(--remaining-height);\n      }\n\n      /* Nav height */\n      & nav[data-app-region] {\n        height: var(--remaining-height);\n      }\n\n      & main[data-app-region] {\n        padding-block-end: var(--marking-height);\n      }\n    }\n  `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ClassificationMarking.styles.js","sourceRoot":"","sources":["../../../src/components/ClassificationMarking/ClassificationMarking.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,iBAAiB,CAE/D;;wBAEsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAOpC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;MAEN,SAAS;;;cAGD,MAAM;MACd,SAAS,KAAK,QAAQ;QACtB,CAAC,CAAC,yDAAyD;QAC3D,CAAC,CAAC,6DAA6D;mBAClD,MAAM;;mBAEN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;MAC3C,UAAU,CAAC,CAAC,CAAC,gBAAgB,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,QAAQ,CAAC,CAAC,CAAC,cAAc,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;eAChC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;kBACtB,UAAU;aACf,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAChB,OAAO,GAAG,CAAA;wBACY,MAAM;GAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, createGlobalStyle } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\n/**\n * Promotes --marking-height to :root so portaled elements\n * (Fullscreen, Lightbox) can read it outside the StyledClassifiedContent tree.\n */\nexport const ClassificationMarkingGlobalStyle = createGlobalStyle<{\n  height: string;\n}>`\n  :root {\n    --marking-height: ${({ height }) => height};\n  }\n`;\n\nexport const StyledMarking = styled.div<{\n  background: string;\n  color: string;\n  height: string;\n  fontSize?: string;\n  fontFamily?: string;\n  placement: 'top' | 'bottom';\n}>(({ background, color, height, fontSize, fontFamily, placement, theme }) => {\n  return css`\n    position: fixed;\n    ${placement}: 0;\n    inset-inline: 0;\n    box-sizing: content-box;\n    height: ${height};\n    ${placement === 'bottom'\n      ? 'padding-block-end: var(--safe-area-inset-block-end, 0);'\n      : 'padding-block-start: var(--safe-area-inset-block-start, 0);'}\n    line-height: ${height};\n    text-align: center;\n    font-weight: ${theme.base['font-weight'].bold};\n    ${fontFamily ? `font-family: ${fontFamily};` : ''}\n    ${fontSize ? `font-size: ${fontSize};` : ''}\n    z-index: ${theme.base['z-index'].max};\n    background: ${background};\n    color: ${color};\n  `;\n});\n\nStyledMarking.defaultProps = defaultThemeProp;\n\nexport const StyledClassifiedContent = styled.div<{\n  height: string;\n}>(({ height }) => {\n  return css`\n    --marking-height: ${height};\n  `;\n});\n\nStyledClassifiedContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Fullscreen/Fullscreen.js

@@ -12,12 +12,12 @@ export const StyledFullscreen = styled.div(({ theme, fullscreen }) => {
     ${fullscreen &&
         css `
       --content-height-in-view: calc(
-        100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
+        100dvh - var(--appshell-hard-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)
       );
       position: fixed;
       z-index: ${theme.base['z-index'].backdrop};
       inset-inline: 0;
-      inset-block-start: var(--appshell-top-offset, 0);
+      inset-block-start: var(--appshell-hard-top-offset, 0);
       inset-block-end: var(--appshell-hard-bottom-offset, 0);
       background: ${theme.base.palette['primary-background']};
     `}

package/lib/components/Fullscreen/Fullscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useElement,\n  useFocusTrap,\n  usePopoverMap,\n  useScrollToggle,\n  useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n  'div',\n  {\n    children: ReactNode;\n  }\n> &\n  TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n  return css`\n    ${fullscreen &&\n    css`\n      --content-height-in-view: calc(\n        100dvh - var(--appshell-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n      );\n      position: fixed;\n      z-index: ${theme.base['z-index'].backdrop};\n      inset-inline: 0;\n      inset-block-start: var(--appshell-top-offset, 0);\n      inset-block-end: var(--appshell-hard-bottom-offset, 0);\n      background: ${theme.base.palette['primary-background']};\n    `}\n  `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean | undefined, () => void] | undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n  // Ensure easier/safer destructuring in use\n  return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n  parentJSX,\n  parentElRef\n}: {\n  parentJSX: ReactElement;\n  parentElRef: RefObject<HTMLDivElement>;\n}) => {\n  const { portalTarget } = useConfiguration();\n  useFocusTrap(parentElRef);\n  const { disableScroll, enableScroll } = useScrollToggle();\n\n  useEffect(() => {\n    disableScroll();\n    return enableScroll;\n  }, []);\n\n  return portalTarget\n    ? createPortal(\n        <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n        portalTarget\n      )\n    : null;\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n    { children, testId, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getFullscreenTestIds);\n    // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n    const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n    const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n    const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n    const [fullscreen, setFullscreen] = useState<boolean | undefined>(undefined);\n\n    const ctxValue: FullscreenContextValue = useMemo(() => {\n      return [\n        fullscreen,\n        () => {\n          setFullscreen(cur => !cur);\n        }\n      ];\n    }, [fullscreen]);\n\n    const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n    const parentJSX = (\n      <StyledFullscreen\n        data-testid={testIds.root}\n        data-fullscreen-enabled={fullscreen ? true : undefined}\n        {...restProps}\n        ref={parentElRef}\n        fullscreen={!!fullscreen}\n        data-popover-id={popoverId}\n      >\n        {children}\n      </StyledFullscreen>\n    );\n\n    return (\n      <FullscreenContext.Provider value={ctxValue}>\n        {fullscreen && parentEl ? (\n          <>\n            {/* DOM element required for outer event management. */}\n            <div ref={setTargetEl} style={{ display: 'none' }} />\n            <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n          </>\n        ) : (\n          parentJSX\n        )}\n      </FullscreenContext.Provider>\n    );\n  }),\n  getFullscreenTestIds\n);\n"]}
+{"version":3,"file":"Fullscreen.js","sourceRoot":"","sources":["../../../src/components/Fullscreen/Fullscreen.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAU7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;MACN,UAAU;QACZ,GAAG,CAAA;;;;;iBAKU,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;;oBAI3B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;KACvD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAIjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB,SAAS,CAAC,CAAC;AAElF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,2CAA2C;IAC3C,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,WAAW,EAIZ,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1B,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC;QAChB,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY;QACjB,CAAC,CAAC,YAAY,CACV,KAAC,aAAa,IAAC,YAAY,EAAE,WAAW,CAAC,OAAO,IAAI,SAAS,YAAG,SAAS,GAAiB,EAC1F,YAAY,CACb;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,WAAW,CACxB,UAAU,CAAgE,SAAS,UAAU,CAC3F,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAClC,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,gGAAgG;IAChG,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IAEzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAE7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE7E,MAAM,QAAQ,GAA2B,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO;YACL,UAAU;YACV,GAAG,EAAE;gBACH,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;YAC7B,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAExD,MAAM,SAAS,GAAG,CAChB,KAAC,gBAAgB,mBACF,OAAO,CAAC,IAAI,6BACA,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAClD,SAAS,EACb,GAAG,EAAE,WAAW,EAChB,UAAU,EAAE,CAAC,CAAC,UAAU,qBACP,SAAS,YAEzB,QAAQ,GACQ,CACpB,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACxC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,CACxB,8BAEE,cAAK,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAI,EACrD,KAAC,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,GAAI,IAC/D,CACJ,CAAC,CAAC,CAAC,CACF,SAAS,CACV,GAC0B,CAC9B,CAAC;AACJ,CAAC,CAAC,EACF,oBAAoB,CACrB,CAAC","sourcesContent":["import { forwardRef, createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport type { PropsWithoutRef, ReactNode, ReactElement, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useElement,\n  useFocusTrap,\n  usePopoverMap,\n  useScrollToggle,\n  useTestIds\n} from '../../hooks';\nimport Configuration from '../Configuration';\nimport { withTestIds } from '../../utils';\n\nimport { getFullscreenTestIds } from './Fullscreen.test-ids';\n\nexport type FullscreenProps = WithAttributes<\n  'div',\n  {\n    children: ReactNode;\n  }\n> &\n  TestIdProp;\n\nexport const StyledFullscreen = styled.div<{ fullscreen?: boolean }>(({ theme, fullscreen }) => {\n  return css`\n    ${fullscreen &&\n    css`\n      --content-height-in-view: calc(\n        100dvh - var(--appshell-hard-top-offset, 0rem) - var(--appshell-hard-bottom-offset, 0rem)\n      );\n      position: fixed;\n      z-index: ${theme.base['z-index'].backdrop};\n      inset-inline: 0;\n      inset-block-start: var(--appshell-hard-top-offset, 0);\n      inset-block-end: var(--appshell-hard-bottom-offset, 0);\n      background: ${theme.base.palette['primary-background']};\n    `}\n  `;\n});\n\nStyledFullscreen.defaultProps = defaultThemeProp;\n\nexport type FullscreenContextValue = [boolean | undefined, () => void] | undefined;\n\nexport const FullscreenContext = createContext<FullscreenContextValue>(undefined);\n\nexport const useFullscreenContext = () => {\n  // Ensure easier/safer destructuring in use\n  return useContext(FullscreenContext);\n};\n\nconst PortalRender = ({\n  parentJSX,\n  parentElRef\n}: {\n  parentJSX: ReactElement;\n  parentElRef: RefObject<HTMLDivElement>;\n}) => {\n  const { portalTarget } = useConfiguration();\n  useFocusTrap(parentElRef);\n  const { disableScroll, enableScroll } = useScrollToggle();\n\n  useEffect(() => {\n    disableScroll();\n    return enableScroll;\n  }, []);\n\n  return portalTarget\n    ? createPortal(\n        <Configuration portalTarget={parentElRef.current ?? undefined}>{parentJSX}</Configuration>,\n        portalTarget\n      )\n    : null;\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<FullscreenProps>, PropsWithoutRef<FullscreenProps>>(function Fullscreen(\n    { children, testId, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getFullscreenTestIds);\n    // setParentEl ensures one extra render needed for keeping div passed to PortalRender up to date\n    const [parentEl, setParentEl] = useElement<HTMLDivElement>();\n    const parentElRef = useConsolidatedRef(setParentEl, ref);\n\n    const [targetEl, setTargetEl] = useElement<HTMLDivElement>();\n\n    const [fullscreen, setFullscreen] = useState<boolean | undefined>(undefined);\n\n    const ctxValue: FullscreenContextValue = useMemo(() => {\n      return [\n        fullscreen,\n        () => {\n          setFullscreen(cur => !cur);\n        }\n      ];\n    }, [fullscreen]);\n\n    const popoverId = usePopoverMap(targetEl, !!fullscreen);\n\n    const parentJSX = (\n      <StyledFullscreen\n        data-testid={testIds.root}\n        data-fullscreen-enabled={fullscreen ? true : undefined}\n        {...restProps}\n        ref={parentElRef}\n        fullscreen={!!fullscreen}\n        data-popover-id={popoverId}\n      >\n        {children}\n      </StyledFullscreen>\n    );\n\n    return (\n      <FullscreenContext.Provider value={ctxValue}>\n        {fullscreen && parentEl ? (\n          <>\n            {/* DOM element required for outer event management. */}\n            <div ref={setTargetEl} style={{ display: 'none' }} />\n            <PortalRender parentJSX={parentJSX} parentElRef={parentElRef} />\n          </>\n        ) : (\n          parentJSX\n        )}\n      </FullscreenContext.Provider>\n    );\n  }),\n  getFullscreenTestIds\n);\n"]}

package/lib/components/Lightbox/Lightbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;YAA2B,OAAO;YAuBzD,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,6NAWrB,CAAC;AAIH,eAAO,MAAM,eAAe;;0KAgE1B,CAAC;AAIH,eAAO,MAAM,eAAe,6NAW1B,CAAC;AAIH,eAAO,MAAM,oBAAoB;YAAwB,OAAO;YAuC9D,CAAC;AAEH,eAAO,MAAM,YAAY,yOAKxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAE5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;uJAG/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;YAA8B,OAAO;;;iDAW9D,CAAC"}
+{"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY;YAA2B,OAAO;YAuBzD,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,6NAWrB,CAAC;AAIH,eAAO,MAAM,eAAe;;0KAgE1B,CAAC;AAIH,eAAO,MAAM,eAAe,6NAW1B,CAAC;AAIH,eAAO,MAAM,oBAAoB;YAAwB,OAAO;YAwC9D,CAAC;AAEH,eAAO,MAAM,YAAY,yOAKxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAE5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;uJAG/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;YAA8B,OAAO;;;iDAW9D,CAAC"}

package/lib/components/Lightbox/Lightbox.styles.js

@@ -145,6 +145,7 @@ export const StyledMediaContainer = styled.div(({ theme, global }) => {
     ${!global &&
         css `
       background-color: ${theme.base.colors.gray['extra-dark']};
+      overflow-y: auto;
     `}
 
     & > div {

package/lib/components/Lightbox/Lightbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport Text, { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\nimport { StyledLink } from '../Link/Link';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledHeader = styled.header<{ global: boolean }>(({ theme, global }) => {\n  const color: string | undefined = tryCatch(() =>\n    rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    position: relative;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    color: ${color};\n    ${!global &&\n    css`\n      background-color: ${theme.base.colors.gray['extra-dark']};\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    `}\n\n    ${StyledMetaList} {\n      justify-content: center;\n      li {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize.xs};\n    text-align: center;\n    min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n    @media (pointer: coarse) {\n      min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n    }\n  `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.light};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    min-width: 0;\n\n    ${StyledLink} {\n      color: inherit;\n      text-decoration: underline;\n    }\n  `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n  const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n  const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n  const { rtl } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n    min-width: ${theme.base['hit-area']['mouse-min']};\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: none;\n    border-radius: 0;\n\n    @media (pointer: coarse) {\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    & > span {\n      display: inline-block;\n      background-color: ${bg};\n\n      ${StyledIcon} {\n        color: ${theme.base.palette.light};\n        width: 2rem;\n        height: 3rem;\n\n        ${rtl &&\n        css`\n          transform: rotateZ(180deg);\n        `}\n      }\n    }\n\n    &:nth-of-type(1) {\n      inset-inline-start: 0;\n      text-align: start;\n      & > span {\n        border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:nth-of-type(2) {\n      inset-inline-end: 0;\n      text-align: end;\n      & > span {\n        border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:hover > span {\n      background-color: ${hoverBg};\n    }\n\n    &:focus > span {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled.div(({ theme }) => {\n  return css`\n    button {\n      padding: ${theme.base.spacing};\n      color: ${theme.base.palette.light};\n\n      &:focus:enabled {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMediaContainer = styled.div<{ global: boolean }>(({ theme, global }) => {\n  return css`\n    position: relative;\n\n    ${!global &&\n    css`\n      background-color: ${theme.base.colors.gray['extra-dark']};\n    `}\n\n    & > div {\n      position: absolute;\n      inset: 0;\n    }\n\n    ${StyledErrorState} {\n      margin: auto;\n      & > ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n\n    img,\n    video,\n    audio {\n      display: block;\n      max-width: calc(100% - 5rem);\n      max-height: 100%;\n      margin: auto;\n    }\n\n    img,\n    video {\n      ${!global &&\n      css`\n        margin-block-start: calc(${theme.base.spacing} * 4);\n        max-width: calc(100% - calc(${theme.base.spacing} * 4));\n      `}\n    }\n  `;\n});\n\nexport const StyledObject = styled.object`\n  display: block;\n  margin: auto;\n  width: calc(100% - 5rem);\n  height: 100%;\n`;\n\nStyledMediaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const StyledLiveRegion = styled.div`\n  ${hideVisually}\n`;\n\nexport const StyledLightboxTitle = styled(Text)`\n  max-width: 100%;\n  ${ellipsisOverflow};\n`;\n\nexport const StyledLightbox = styled(Backdrop)<{ global: boolean }>(({ global, theme }) => {\n  return css`\n    ${global &&\n    css`\n      z-index: ${theme.base['z-index'].max};\n    `}\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport Text, { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\nimport { StyledLink } from '../Link/Link';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nexport const StyledHeader = styled.header<{ global: boolean }>(({ theme, global }) => {\n  const color: string | undefined = tryCatch(() =>\n    rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    position: relative;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    color: ${color};\n    ${!global &&\n    css`\n      background-color: ${theme.base.colors.gray['extra-dark']};\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    `}\n\n    ${StyledMetaList} {\n      justify-content: center;\n      li {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize.xs};\n    text-align: center;\n    min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n    @media (pointer: coarse) {\n      min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n    }\n  `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.light};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    min-width: 0;\n\n    ${StyledLink} {\n      color: inherit;\n      text-decoration: underline;\n    }\n  `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n  const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n  const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n  const { rtl } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n    min-width: ${theme.base['hit-area']['mouse-min']};\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: none;\n    border-radius: 0;\n\n    @media (pointer: coarse) {\n      min-width: ${theme.base['hit-area']['finger-min']};\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    & > span {\n      display: inline-block;\n      background-color: ${bg};\n\n      ${StyledIcon} {\n        color: ${theme.base.palette.light};\n        width: 2rem;\n        height: 3rem;\n\n        ${rtl &&\n        css`\n          transform: rotateZ(180deg);\n        `}\n      }\n    }\n\n    &:nth-of-type(1) {\n      inset-inline-start: 0;\n      text-align: start;\n      & > span {\n        border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:nth-of-type(2) {\n      inset-inline-end: 0;\n      text-align: end;\n      & > span {\n        border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n        border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n      }\n    }\n\n    &:hover > span {\n      background-color: ${hoverBg};\n    }\n\n    &:focus > span {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled.div(({ theme }) => {\n  return css`\n    button {\n      padding: ${theme.base.spacing};\n      color: ${theme.base.palette.light};\n\n      &:focus:enabled {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMediaContainer = styled.div<{ global: boolean }>(({ theme, global }) => {\n  return css`\n    position: relative;\n\n    ${!global &&\n    css`\n      background-color: ${theme.base.colors.gray['extra-dark']};\n      overflow-y: auto;\n    `}\n\n    & > div {\n      position: absolute;\n      inset: 0;\n    }\n\n    ${StyledErrorState} {\n      margin: auto;\n      & > ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n\n    img,\n    video,\n    audio {\n      display: block;\n      max-width: calc(100% - 5rem);\n      max-height: 100%;\n      margin: auto;\n    }\n\n    img,\n    video {\n      ${!global &&\n      css`\n        margin-block-start: calc(${theme.base.spacing} * 4);\n        max-width: calc(100% - calc(${theme.base.spacing} * 4));\n      `}\n    }\n  `;\n});\n\nexport const StyledObject = styled.object`\n  display: block;\n  margin: auto;\n  width: calc(100% - 5rem);\n  height: 100%;\n`;\n\nStyledMediaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const StyledLiveRegion = styled.div`\n  ${hideVisually}\n`;\n\nexport const StyledLightboxTitle = styled(Text)`\n  max-width: 100%;\n  ${ellipsisOverflow};\n`;\n\nexport const StyledLightbox = styled(Backdrop)<{ global: boolean }>(({ global, theme }) => {\n  return css`\n    ${global &&\n    css`\n      z-index: ${theme.base['z-index'].max};\n    `}\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.js

@@ -261,7 +261,7 @@ export const StyledTemplateRow = styled.div(({ theme }) => {
 StyledTemplateRow.defaultProps = defaultThemeProp;
 export const StyledTemplate = styled.div(({ theme }) => {
     const { base: { breakpoints } } = theme;
-    const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    const templateHeight = 'calc(100dvh - var(--appshell-top-offset, 0rem))';
     return css `
     height: 100%;
     min-height: 0;

package/lib/components/PageTemplates/CategorySubPage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n    min-height: 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n      min-height: inherit;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n  const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';\n\n  return css`\n    height: 100%;\n    min-height: 0;\n\n    /* md or above / split-scroll layout */\n    @media all and (min-width: ${breakpoints.md}) {\n      height: ${templateHeight};\n      min-height: ${templateHeight};\n      max-height: ${templateHeight};\n      overflow: hidden;\n    }\n  `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n    min-height: 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n      min-height: inherit;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n  const templateHeight = 'calc(100dvh - var(--appshell-top-offset, 0rem))';\n\n  return css`\n    height: 100%;\n    min-height: 0;\n\n    /* md or above / split-scroll layout */\n    @media all and (min-width: ${breakpoints.md}) {\n      height: ${templateHeight};\n      min-height: ${templateHeight};\n      max-height: ${templateHeight};\n      overflow: hidden;\n    }\n  `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/DashboardPage.js

@@ -19,7 +19,7 @@ export const StyledDashboardRegion = styled(StyledRegion) `
 `;
 StyledDashboardRegion.defaultProps = defaultThemeProp;
 export const StyledDashboardPageLayout = styled(StyledPageLayout)(({ fitToViewport, theme: { base: { palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground } }, components: { tabs: { detached: detachedTabs } } } }) => {
-    const height = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    const height = 'calc(100dvh - var(--appshell-top-offset, 0rem))';
     return css `
     min-height: ${height};
     background-color: ${detachedTabs ? primaryBackground : secondaryBackground};