@pega/cosmos-react-core 5.0.0-dev.4.7 → 5.0.0-dev.4.8

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

@@ -1,486 +0,0 @@
-import styled, { css } from 'styled-components';
-import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';
-import { useContext } from 'react';
-import { Count } from '../Badges';
-import { StyledAvatar } from '../Avatar';
-import { StyledIcon } from '../Icon';
-import { StyledImage } from '../Image/Image';
-import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
-import { calculateFontSize } from '../../styles';
-import { StyledMenuItem } from '../Menu/Menu.styles';
-import { useDirection } from '../../hooks';
-import { StyledBareButton } from '../Button/BareButton';
-import Button from '../Button';
-import { StyledTooltip } from '../Tooltip';
-import { StyledProgressBackdrop } from '../Progress';
-import Icon from '../Icon/Icon';
-import AppShellContext from './AppShellContext';
-import { navContrastColors, pxToRem } from './style-utils';
-export const navWidth = '4rem';
-export const navOpenWidth = '18.75rem';
-export const headerHeight = '3rem';
-export const StyledAppInfo = styled.a(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    const { hoverBg, foreground } = navContrastColors(theme);
-    return css `
-    padding: ${theme.base.spacing} calc(${navWidth} / 4);
-    grid-template-columns: calc(${navWidth} / 2) auto;
-    column-gap: calc(${navWidth} / 4);
-
-    &:hover,
-    button&:hover {
-      background-color: ${hoverBg};
-      text-decoration: none;
-    }
-
-    &:focus:not([disabled]) {
-      outline: none;
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-
-    ${StyledImage} {
-      display: inline-block;
-      width: calc(${navWidth} / 2);
-    }
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    span:last-of-type {
-      font-size: ${fontSize.xs};
-      color: ${foreground};
-    }
-
-    span:first-of-type {
-      font-size: ${fontSize.s};
-      color: ${foreground};
-    }
-  `;
-});
-StyledAppInfo.defaultProps = defaultThemeProp;
-export const StyledScrollWrap = styled.div(() => {
-    return css `
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-  `;
-});
-StyledScrollWrap.defaultProps = defaultThemeProp;
-export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing } } }) => {
-    return css `
-      position: absolute;
-      inset-inline-start: calc(4 * ${spacing});
-      top: calc(0.5 * ${spacing});
-      padding: 0 calc(0.5 * ${spacing});
-    `;
-});
-StyledCountIcon.defaultProps = defaultThemeProp;
-export const StyledSingleSelectIconBox = styled.span(({ theme }) => {
-    return css `
-    flex-shrink: 0;
-    height: ${theme.base['hit-area']['mouse-min']};
-    width: ${theme.base['hit-area']['mouse-min']};
-    margin-inline-start: calc(2 * ${theme.base.spacing});
-  `;
-});
-StyledSingleSelectIconBox.defaultProps = defaultThemeProp;
-export const StyledNavListItemExpandCollapse = styled(Icon) ``;
-export const StyledUtilIconCount = styled.span `
-  flex-shrink: 0;
-`;
-export const StyledNavItemIconBox = styled.span(({ theme }) => {
-    return css `
-    flex-shrink: 0;
-    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {
-      margin-inline: calc((${navWidth} - 1.125rem) / 2);
-    }
-
-    ${StyledAvatar} {
-      margin-inline: calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
-      font-weight: ${theme.base['font-weight'].normal};
-    }
-  `;
-});
-StyledNavItemIconBox.defaultProps = defaultThemeProp;
-export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
-    const navBg = theme.components['app-shell'].nav['background-color'];
-    const { navOpen } = useContext(AppShellContext);
-    return css `
-      position: fixed;
-      z-index: calc(${theme.base['z-index'].backdrop} - 2);
-      background: ${navBg};
-      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
-      width: ${navOpen ? navOpenWidth : navWidth};
-      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});
-      overflow: hidden;
-      white-space: nowrap;
-      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
-      padding-block-end: ${theme.base.spacing};
-      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};
-      ${!showEnv &&
-        css `
-        padding-block-start: ${theme.base.spacing};
-      `}
-      @media (pointer: coarse) {
-        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
-      }
-
-      /* App navigation can be focused with shortcut */
-      :focus-visible {
-        box-shadow: ${theme.base.shadow['focus-inset']};
-      }
-
-      ${theme.base['custom-scrollbar'] &&
-        css `
-        * {
-          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);
-          scrollbar-width: thin;
-        }
-
-        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {
-          /* stylelint-disable unit-allowed-list */
-
-          *::-webkit-scrollbar {
-            width: 12px;
-            height: 12px;
-          }
-
-          *::-webkit-scrollbar-track {
-            background-color: rgba(0, 0, 0, 0.2);
-          }
-
-          *::-webkit-scrollbar-corner {
-            background-color: rgba(0, 0, 0, 0.2);
-            border-bottom-right-radius: inherit;
-          }
-
-          *::-webkit-scrollbar-thumb {
-            background-color: transparent;
-            border: 3px solid transparent;
-            border-radius: calc(1.125 * ${theme.base['border-radius']});
-            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);
-          }
-
-          *::-webkit-scrollbar-thumb:hover {
-            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);
-          }
-
-          *::-webkit-scrollbar-track:horizontal {
-            border-bottom-left-radius: inherit;
-          }
-
-          *::-webkit-scrollbar-track:vertical {
-            border-top-right-radius: inherit;
-          }
-
-          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-          *::-webkit-scrollbar-track:not(:corner-present) {
-            border-bottom-right-radius: inherit;
-          }
-
-          /* stylelint-enable unit-allowed-list */
-        }
-      `}
-    `;
-});
-StyledAppNav.defaultProps = defaultThemeProp;
-export const StyledCaseClose = styled.button ``;
-export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, singleSelect }) => {
-    const { base: { 'font-weight': { 'semi-bold': semiBold } } } = theme;
-    const { navOpen } = useContext(AppShellContext);
-    const { hoverBg, foreground, border: borderColor } = navContrastColors(theme);
-    const { rtl } = useDirection();
-    return css `
-    display: block;
-    position: relative;
-
-    ${StyledIcon} {
-      font-size: 1.25rem;
-    }
-
-    ${StyledCaseClose} {
-      display: flex;
-      position: absolute;
-      opacity: 0;
-      left: ${navOpen ? 'auto' : '100%'};
-      top: 50%;
-      bottom: 50%;
-      margin: auto 0;
-      color: ${foreground};
-      transition-property: transform, opacity;
-      transition-duration: ${theme.base.animation.speed};
-      transition-timing-function: ${theme.base.animation.timing.ease};
-      ${navOpen &&
-        css `
-        inset-inline-end: 1rem;
-
-        &:hover,
-        &:focus {
-          opacity: 1;
-        }
-      `}
-    }
-
-    > :first-child {
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: calc(1.25 * ${theme.base.spacing}) 0;
-      white-space: nowrap;
-      color: ${foreground};
-      cursor: pointer;
-      text-decoration: none;
-      border-block: ${pxToRem(1)} solid transparent;
-
-      span:not(${StyledCountIcon}) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: inherit;
-        white-space: nowrap;
-      }
-
-      &:hover,
-      &:focus {
-        color: ${foreground};
-        background: ${hoverBg};
-      }
-
-      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
-        ${navOpen &&
-        css `
-          opacity: 1;
-        `}
-      }
-
-      &:focus {
-        outline: none;
-        box-shadow: ${theme.base.shadow['focus-inset']};
-      }
-
-      ${StyledNavListItemExpandCollapse} {
-        position: absolute;
-        left: ${navOpen ? 'auto' : '100%'};
-        ${navOpen &&
-        css `
-          inset-inline-end: 1rem;
-        `}
-        margin: 0;
-        opacity: ${navOpen ? '1' : '0'};
-        transition-property: transform, opacity;
-        transition-duration: ${theme.base.animation.speed};
-        transition-timing-function: ${theme.base.animation.timing.ease};
-
-        ${!nestedListCollapsed &&
-        css `
-          transform: rotateZ(${rtl ? '-90deg' : '90deg'});
-        `}
-      }
-
-      ${singleSelect &&
-        css `
-        ${StyledNavItemIconBox} > ${StyledIcon} {
-          margin-inline: ${theme.base.spacing};
-        }
-      `}
-
-      ${StyledSingleSelectIconBox} + span {
-        margin-inline-start: ${theme.base.spacing};
-      }
-    }
-
-    [aria-current='page'] {
-      position: relative;
-      font-weight: ${semiBold};
-      border-block: ${pxToRem(1)} solid ${borderColor};
-
-      &::before {
-        content: '';
-        position: absolute;
-        width: ${pxToRem(4)};
-        inset-inline-start: 0;
-        top: 0;
-        bottom: 0;
-        background-color: ${foreground};
-      }
-    }
-  `;
-});
-StyledNavListItem.defaultProps = defaultThemeProp;
-export const StyledNavList = styled.ul ``;
-export const StyledNavCasesList = styled.div(({ theme }) => {
-    return css `
-    ${StyledNavListItem} {
-      > :first-child {
-        padding: ${theme.base.spacing} 0;
-      }
-    }
-  `;
-});
-StyledNavCasesList.defaultProps = defaultThemeProp;
-export const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {
-    return css `
-    ${StyledNavListItem} {
-      > :first-child {
-        padding-inline-start: calc(${navWidth} + 2 * ${theme.base.spacing});
-        font-weight: ${theme.base['font-weight'].normal};
-      }
-    }
-  `;
-});
-StyledNestedNavList.defaultProps = defaultThemeProp;
-export const StyledCaseTypes = styled.div(props => {
-    const { theme: { base: { animation: { speed, timing: { ease: acceleration } } } } } = props;
-    return css `
-    button {
-      ${StyledNavItemIconBox} {
-        transition: transform ${speed} ${acceleration};
-      }
-
-      &[aria-expanded='false'] ${StyledNavItemIconBox} {
-        transform: none;
-      }
-
-      &[aria-expanded='true'] ${StyledNavItemIconBox} {
-        transform: rotateZ(45deg);
-      }
-    }
-  `;
-});
-StyledCaseTypes.defaultProps = defaultThemeProp;
-export const StyledUtils = styled.div(({ theme }) => {
-    const { border: borderColor } = navContrastColors(theme);
-    return css `
-    border-top: 0.0625rem solid ${borderColor};
-
-    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
-      margin: 0 calc((${navWidth} - 1.125rem) / 2);
-    }
-  `;
-});
-StyledUtils.defaultProps = defaultThemeProp;
-export const StyledMobileNav = styled.header(({ theme }) => {
-    const mobileNavColor = theme.base.palette['brand-primary'];
-    const contrastColor = tryCatch(() => readableColor(mobileNavColor));
-    return css `
-    min-width: 100%;
-    min-height: ${headerHeight};
-    z-index: ${theme.base['z-index'].drawer};
-    background-color: ${mobileNavColor};
-    color: ${contrastColor};
-    position: sticky;
-    top: 0;
-    padding-inline-start: ${theme.base.spacing};
-
-    @media (pointer: coarse) {
-      padding-inline-start: 0;
-    }
-  `;
-});
-StyledMobileNav.defaultProps = defaultThemeProp;
-export const StyledLoading = styled.div `
-  font-size: 2rem;
-`;
-export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, headerOffset = 0, theme }) => {
-    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
-    return css `
-    --appshell-offset: ${headerOffset}px;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --appshell-horizontal-offset: 0rem;
-
-    @media (min-width: ${theme.base.breakpoints.sm}) {
-      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};
-    }
-    position: relative;
-    margin-inline-start: ${mobileNav ? 0 : navWidth};
-    min-height: calc(100vh - ${heightOffset});
-    background-color: ${theme.base.palette['app-background']};
-
-    :focus {
-      outline: none;
-    }
-
-    ${navOpen &&
-        !mobileNav &&
-        css `
-      margin-inline-start: ${navOpenWidth};
-    `}
-
-    ${!mobileNav &&
-        css `
-      transition: margin-inline-start
-        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
-    `}
-
-    & > ${StyledProgressBackdrop} {
-      max-height: calc(100vh - ${heightOffset});
-      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});
-      inset-block-start: ${heightOffset};
-      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};
-      position: fixed;
-      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;
-      transition-duration: ${theme.base.animation.speed};
-      transition-timing-function: ${theme.base.animation.timing.ease};
-    }
-  `;
-});
-StyledAppMain.defaultProps = defaultThemeProp;
-export const StyledBannerRegion = styled.div(({ theme }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-  `;
-});
-StyledBannerRegion.defaultProps = defaultThemeProp;
-export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
-    const bg = theme.components.tooltip['background-color'];
-    const color = readableColor(bg);
-    return css `
-    background-color: ${bg};
-    padding: 0;
-    header {
-      color: ${color};
-      border-bottom: none;
-    }
-    ${StyledMenuItem} {
-      background-color: ${bg};
-      color: ${color};
-
-      &:hover,
-      &:focus {
-        background-color: ${bg};
-        box-shadow: ${theme.base.shadow.focus};
-      }
-    }
-  `;
-});
-StyledAppShellTooltip.defaultProps = defaultThemeProp;
-export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
-    const navBg = theme.components['app-shell'].nav['background-color'];
-    let bg = darken(0.2, navBg);
-    if (getContrast(navBg, bg) < 1.3) {
-        bg = lighten(0.2, navBg);
-    }
-    const color = readableColor(bg);
-    return css `
-    background-color: ${bg};
-    color: ${color};
-    border: none;
-    margin-top: calc(1 * ${theme.base.spacing});
-
-    ${StyledIcon} {
-      width: 1.25rem;
-      height: 1.25rem;
-      font-weight: bold;
-    }
-
-    &:enabled:focus,
-    :not([disabled]):focus {
-      box-shadow: ${theme.base.shadow.focus};
-    }
-  `;
-});
-StyledAppShellToggleButton.defaultProps = defaultThemeProp;
-//# sourceMappingURL=AppShell.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { darken, getContrast, lighten, readableColor, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { Count } from '../Badges';\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport { StyledMenuItem } from '../Menu/Menu.styles';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledTooltip } from '../Tooltip';\nimport { StyledProgressBackdrop } from '../Progress';\nimport Icon from '../Icon/Icon';\n\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const navWidth = '4rem';\nexport const navOpenWidth = '18.75rem';\nexport const headerHeight = '3rem';\n\nexport const StyledAppInfo = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(${navWidth} / 4);\n    grid-template-columns: calc(${navWidth} / 2) auto;\n    column-gap: calc(${navWidth} / 4);\n\n    &:hover,\n    button&:hover {\n      background-color: ${hoverBg};\n      text-decoration: none;\n    }\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n    }\n\n    span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: ${foreground};\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      position: absolute;\n      inset-inline-start: calc(4 * ${spacing});\n      top: calc(0.5 * ${spacing});\n      padding: 0 calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSingleSelectIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItemExpandCollapse = styled(Icon)``;\n\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledNavItemIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {\n      margin-inline: calc((${navWidth} - 1.125rem) / 2);\n    }\n\n    ${StyledAvatar} {\n      margin-inline: calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledNavItemIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; showEnv: boolean }>(\n  ({ appHeader, showEnv, theme }) => {\n    const navBg = theme.components['app-shell'].nav['background-color'];\n    const { navOpen } = useContext(AppShellContext);\n\n    return css`\n      position: fixed;\n      z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      background: ${navBg};\n      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});\n      width: ${navOpen ? navOpenWidth : navWidth};\n      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});\n      overflow: hidden;\n      white-space: nowrap;\n      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n      padding-block-end: ${theme.base.spacing};\n      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\n      }\n\n      /* App navigation can be focused with shortcut */\n      :focus-visible {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${theme.base['custom-scrollbar'] &&\n      css`\n        * {\n          scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n          scrollbar-width: thin;\n        }\n\n        @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n          /* stylelint-disable unit-allowed-list */\n\n          *::-webkit-scrollbar {\n            width: 12px;\n            height: 12px;\n          }\n\n          *::-webkit-scrollbar-track {\n            background-color: rgba(0, 0, 0, 0.2);\n          }\n\n          *::-webkit-scrollbar-corner {\n            background-color: rgba(0, 0, 0, 0.2);\n            border-bottom-right-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-thumb {\n            background-color: transparent;\n            border: 3px solid transparent;\n            border-radius: calc(1.125 * ${theme.base['border-radius']});\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n          }\n\n          *::-webkit-scrollbar-thumb:hover {\n            box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n          }\n\n          *::-webkit-scrollbar-track:horizontal {\n            border-bottom-left-radius: inherit;\n          }\n\n          *::-webkit-scrollbar-track:vertical {\n            border-top-right-radius: inherit;\n          }\n\n          /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n          *::-webkit-scrollbar-track:not(:corner-present) {\n            border-bottom-right-radius: inherit;\n          }\n\n          /* stylelint-enable unit-allowed-list */\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppNav.defaultProps = defaultThemeProp;\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItem = styled.li<{\n  nestedListCollapsed: boolean;\n  singleSelect: boolean;\n}>(({ theme, nestedListCollapsed, singleSelect }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': semiBold }\n    }\n  } = theme;\n\n  const { navOpen } = useContext(AppShellContext);\n  const { hoverBg, foreground, border: borderColor } = navContrastColors(theme);\n  const { rtl } = useDirection();\n\n  return css`\n    display: block;\n    position: relative;\n\n    ${StyledIcon} {\n      font-size: 1.25rem;\n    }\n\n    ${StyledCaseClose} {\n      display: flex;\n      position: absolute;\n      opacity: 0;\n      left: ${navOpen ? 'auto' : '100%'};\n      top: 50%;\n      bottom: 50%;\n      margin: auto 0;\n      color: ${foreground};\n      transition-property: transform, opacity;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n      ${navOpen &&\n      css`\n        inset-inline-end: 1rem;\n\n        &:hover,\n        &:focus {\n          opacity: 1;\n        }\n      `}\n    }\n\n    > :first-child {\n      position: relative;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding: calc(1.25 * ${theme.base.spacing}) 0;\n      white-space: nowrap;\n      color: ${foreground};\n      cursor: pointer;\n      text-decoration: none;\n      border-block: ${pxToRem(1)} solid transparent;\n\n      span:not(${StyledCountIcon}) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: inherit;\n        white-space: nowrap;\n      }\n\n      &:hover,\n      &:focus {\n        color: ${foreground};\n        background: ${hoverBg};\n      }\n\n      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {\n        ${navOpen &&\n        css`\n          opacity: 1;\n        `}\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${StyledNavListItemExpandCollapse} {\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        margin: 0;\n        opacity: ${navOpen ? '1' : '0'};\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n\n        ${!nestedListCollapsed &&\n        css`\n          transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n        `}\n      }\n\n      ${singleSelect &&\n      css`\n        ${StyledNavItemIconBox} > ${StyledIcon} {\n          margin-inline: ${theme.base.spacing};\n        }\n      `}\n\n      ${StyledSingleSelectIconBox} + span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    }\n\n    [aria-current='page'] {\n      position: relative;\n      font-weight: ${semiBold};\n      border-block: ${pxToRem(1)} solid ${borderColor};\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: ${pxToRem(4)};\n        inset-inline-start: 0;\n        top: 0;\n        bottom: 0;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n\nexport const StyledNavCasesList = styled.div(({ theme }) => {\n  return css`\n    ${StyledNavListItem} {\n      > :first-child {\n        padding: ${theme.base.spacing} 0;\n      }\n    }\n  `;\n});\n\nStyledNavCasesList.defaultProps = defaultThemeProp;\n\nexport const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {\n  return css`\n    ${StyledNavListItem} {\n      > :first-child {\n        padding-inline-start: calc(${navWidth} + 2 * ${theme.base.spacing});\n        font-weight: ${theme.base['font-weight'].normal};\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        animation: {\n          speed,\n          timing: { ease: acceleration }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    button {\n      ${StyledNavItemIconBox} {\n        transition: transform ${speed} ${acceleration};\n      }\n\n      &[aria-expanded='false'] ${StyledNavItemIconBox} {\n        transform: none;\n      }\n\n      &[aria-expanded='true'] ${StyledNavItemIconBox} {\n        transform: rotateZ(45deg);\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n\n    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {\n      margin: 0 calc((${navWidth} - 1.125rem) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header(({ theme }) => {\n  const mobileNavColor = theme.base.palette['brand-primary'];\n\n  const contrastColor = tryCatch(() => readableColor(mobileNavColor));\n\n  return css`\n    min-width: 100%;\n    min-height: ${headerHeight};\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${mobileNavColor};\n    color: ${contrastColor};\n    position: sticky;\n    top: 0;\n    padding-inline-start: ${theme.base.spacing};\n\n    @media (pointer: coarse) {\n      padding-inline-start: 0;\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  navOpen: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, navOpen, headerOffset = 0, theme }) => {\n  const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --appshell-horizontal-offset: 0rem;\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};\n    }\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset});\n    background-color: ${theme.base.palette['app-background']};\n\n    :focus {\n      outline: none;\n    }\n\n    ${navOpen &&\n    !mobileNav &&\n    css`\n      margin-inline-start: ${navOpenWidth};\n    `}\n\n    ${!mobileNav &&\n    css`\n      transition: margin-inline-start\n        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n    `}\n\n    & > ${StyledProgressBackdrop} {\n      max-height: calc(100vh - ${heightOffset});\n      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});\n      inset-block-start: ${heightOffset};\n      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};\n      position: fixed;\n      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n  `;\n});\n\nStyledAppMain.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {\n  const bg = theme.components.tooltip['background-color'];\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    padding: 0;\n    header {\n      color: ${color};\n      border-bottom: none;\n    }\n    ${StyledMenuItem} {\n      background-color: ${bg};\n      color: ${color};\n\n      &:hover,\n      &:focus {\n        background-color: ${bg};\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledAppShellTooltip.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav['background-color'];\n  let bg = darken(0.2, navBg);\n\n  if (getContrast(navBg, bg) < 1.3) {\n    bg = lighten(0.2, navBg);\n  }\n\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    color: ${color};\n    border: none;\n    margin-top: calc(1 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n"]}