@pega/cosmos-react-core 2.2.1 → 2.2.4

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

@@ -0,0 +1,918 @@
+import styled, { css } from 'styled-components';
+import { lighten, mix, readableColor, rgba } from 'polished';
+import { useContext } from 'react';
+import { StyledAvatar } from '../Avatar';
+import { StyledIcon } from '../Icon';
+import { StyledImage } from '../Image/Image';
+import { StyledSearchInput, StyledSearchIcon, StyledSearchTextInput } from '../SearchInput/SearchInput';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils/utils';
+import Flex from '../Flex';
+import { StyledSummaryItem } from '../SummaryItem';
+import { readableHue, calculateFontSize, getHoverColors } from '../../styles';
+import { StyledPopover } from '../Popover';
+import { StyledEmptyState } from '../EmptyState';
+import { StyledMenuListContainer } from '../Menu/Menu.styles';
+import Text, { StyledText } from '../Text';
+import { useDirection } from '../../hooks';
+import { StyledBareButton } from '../Button/BareButton';
+import { StyledAlert } from '../Badges/Alert';
+import AppShellContext from './AppShellContext';
+const navWidth = '4rem';
+const navOpenWidth = '18.75rem';
+const headerHeight = '3rem';
+/* AppShell styles */
+export const StyledAppEnvironment = styled(Flex)(({ color, theme: { base: { spacing, 'font-weight': { bold } }, components: { 'app-shell': { nav: { 'background-color': navColor } } } } }) => {
+    const foreground = tryCatch(() => readableHue(color, color), () => readableHue(navColor, navColor));
+    const shadow = tryCatch(() => rgba(foreground, 0.1));
+    return css `
+      background-color: ${color};
+      color: ${foreground};
+      box-shadow: inset 0 0 0 0.0625rem ${shadow};
+      height: calc(${spacing} * 2.5);
+      padding: 0 ${spacing};
+      text-align: center;
+      text-transform: uppercase;
+      font-weight: ${bold};
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `;
+});
+StyledAppEnvironment.defaultProps = defaultThemeProp;
+export const StyledAppInfo = styled.a(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const hoverColor = tryCatch(() => lighten(0.05, theme.components['app-shell'].nav['background-color']));
+    return css `
+    padding: ${theme.base.spacing} calc(${navWidth} / 4);
+    grid-template-columns: calc(${navWidth} / 2) auto;
+    column-gap: calc(${navWidth} / 4);
+
+    a&:hover,
+    button&:hover {
+      background-color: ${hoverColor};
+      text-decoration: none;
+    }
+
+    &:focus:not([disabled]) {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+
+    ${StyledImage} {
+      display: inline-block;
+      width: calc(${navWidth} / 2);
+    }
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span:last-of-type {
+      font-size: ${fontSize.xs};
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    span:first-of-type {
+      font-size: ${fontSize.s};
+      color: ${theme.base.colors.white};
+    }
+  `;
+});
+StyledAppInfo.defaultProps = defaultThemeProp;
+export const StyledScrollWrap = styled.div(() => {
+    const { navOpen } = useContext(AppShellContext);
+    return css `
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: ${navOpen ? 'auto' : 'hidden'};
+  `;
+});
+StyledScrollWrap.defaultProps = defaultThemeProp;
+export const StyledCountIcon = styled.span(({ 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 StyledAppShellNavIcon = styled.svg ``;
+export const StyledUtilIconCount = styled.span `
+  flex-shrink: 0;
+`;
+export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
+    const { navOpen, navState } = useContext(AppShellContext);
+    return css `
+      position: fixed;
+      z-index: ${navState !== 'closed'
+        ? css `calc(${theme.base['z-index'].backdrop} - 1) `
+        : 'auto'};
+      background: ${theme.components['app-shell'].nav['background-color']};
+      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};
+
+      ${!showEnv &&
+        css `
+        padding-block-start: ${theme.base.spacing};
+      `}
+
+      @media (min-width: ${theme.base.breakpoints.xl}) {
+        z-index: auto;
+
+        /* Setting width here keeps the nav width transition in sync with main's margin transition on resize which is also in a media query. */
+        width: ${navOpenWidth};
+      }
+
+      @media (pointer: coarse) {
+        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
+      }
+
+      ${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 StyledSearchForm = styled.form(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    flex-shrink: 0;
+    padding: ${theme.base.spacing} 0;
+
+    ${StyledSearchInput} {
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
+
+      &:focus-within {
+        box-shadow: ${theme.base.shadow['focus-inverted']};
+
+        ${StyledSearchIcon} {
+          color: rgba(255, 255, 255, 0.9);
+        }
+      }
+
+      input {
+        border-color: ${borderColor};
+
+        &::placeholder {
+          color: rgba(255, 255, 255, 0.4);
+        }
+
+        &:focus:not([disabled]) {
+          border-color: ${borderColor};
+        }
+      }
+
+      input,
+      ${StyledSearchIcon} {
+        background: ${borderColor};
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+  `;
+});
+StyledSearchForm.defaultProps = defaultThemeProp;
+export const StyledNavListMenuButton = styled.button(({ theme }) => {
+    return css `
+    & + ${StyledPopover} {
+      &,
+      ${StyledMenuListContainer} {
+        background-color: ${theme.components['app-shell'].nav['background-color']};
+      }
+
+      ${StyledMenuListContainer} li {
+        color: rgba(255, 255, 255, 0.7);
+        background-color: transparent;
+
+        &:hover,
+        &[data-current='true'] {
+          color: #ffffff;
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+      }
+    }
+  `;
+});
+StyledNavListMenuButton.defaultProps = defaultThemeProp;
+export const StyledCaseClose = styled.button ``;
+export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed }) => {
+    const { navOpen } = useContext(AppShellContext);
+    const activeBackground = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));
+    const { rtl } = useDirection();
+    return css `
+    display: block;
+    position: relative;
+    ${StyledIcon} {
+      font-size: 1.25rem;
+    }
+
+    ${StyledCaseClose} {
+      display: flex;
+      position: absolute;
+      left: ${navOpen ? 'auto' : '100%'};
+      opacity: 0;
+      &:hover,
+      &:focus {
+        ${navOpen &&
+        css `
+          opacity: 1;
+        `}
+      }
+      ${navOpen &&
+        css `
+        inset-inline-end: 1rem;
+      `}
+      top: 50%;
+      bottom: 50%;
+      margin: auto 0;
+      color: rgba(255, 255, 255, 0.7);
+      transition-property: transform, opacity;
+      transition-duration: ${theme.base.animation.speed};
+      transition-timing-function: ${theme.base.animation.timing.ease};
+    }
+
+    > :first-child {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: calc(1.25 * ${theme.base.spacing}) 0;
+      white-space: nowrap;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      text-decoration: none;
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: inherit;
+        white-space: nowrap;
+      }
+
+      &:hover,
+      &:focus {
+        color: #ffffff;
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
+        ${navOpen &&
+        css `
+          opacity: 1;
+        `}
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      }
+
+      ${StyledAppShellNavIcon}:last-child {
+        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'});
+        `}
+      }
+
+      ${StyledAppShellNavIcon}:first-child {
+        flex-shrink: 0;
+        margin: 0 calc((${navWidth} - 1.125rem) / 2);
+      }
+    }
+
+    &[aria-current='page'] > :first-child {
+      color: ${theme.base.colors.blue.light};
+      background-color: ${activeBackground};
+    }
+  `;
+});
+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 }) => {
+    const background = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));
+    return css `
+    background: ${background};
+
+    ${StyledNavListItem} {
+      > :first-child {
+        padding-inline-start: ${navWidth};
+        font-weight: ${theme.base['font-weight'].normal};
+      }
+    }
+  `;
+});
+StyledNestedNavList.defaultProps = defaultThemeProp;
+export const StyledCaseTypes = styled.div(props => {
+    const { expanded, theme: { base: { animation: { speed, timing: { ease: acceleration } } } } } = props;
+    return css `
+    ${StyledIcon} {
+      &:first-of-type {
+        transition: transform ${speed} ${acceleration};
+        transform: ${expanded ? 'rotateZ(45deg)' : 'none'};
+      }
+    }
+  `;
+});
+StyledCaseTypes.defaultProps = defaultThemeProp;
+export const StyledUtils = styled.div(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    border-top: 0.0625rem solid ${borderColor};
+    li ${StyledAvatar} {
+      flex-shrink: 0;
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
+      font-weight: ${theme.base['font-weight'].normal};
+    }
+
+    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
+      flex-shrink: 0;
+      margin: 0 calc((${navWidth} - 1.125rem) / 2);
+    }
+  `;
+});
+StyledUtils.defaultProps = defaultThemeProp;
+/* AppHeader styles */
+export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
+    return css `
+    & > :first-child {
+      vertical-align: top;
+    }
+
+    & > a,
+    & > button {
+      cursor: pointer;
+      text-decoration: none;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    ${StyledImage} {
+      height: 1.625rem;
+
+      ${centerLogo &&
+        css `
+        padding-inline-start: ${theme.base.spacing};
+      `}
+    }
+  `;
+});
+StyledAppHeaderInfo.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }) => {
+    const backgroundColor = theme.base.palette['app-background'];
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    return css `
+      max-width: 33vw;
+      min-width: 10rem;
+      width: 100%;
+      justify-self: center;
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+
+      ${StyledSearchInput} {
+        ${StyledSearchIcon} {
+          background: ${backgroundColor};
+        }
+
+        ${StyledSearchTextInput} {
+          background: ${backgroundColor};
+          border-color: ${backgroundColor};
+        }
+      }
+
+      ${!isMediumOrAbove &&
+        css `
+        max-width: 2rem;
+        min-width: 2rem;
+        margin-inline-start: auto;
+        margin-inline-end: 0;
+
+        &:not([focused]) {
+          ${StyledSearchInput} {
+            ${StyledSearchIcon} {
+              background: ${headerColor};
+              color: ${contrastColor};
+            }
+
+            ${StyledSearchTextInput} {
+              background: ${headerColor};
+              border-color: ${headerColor};
+
+              &:hover:not(:focus) {
+                border-color: ${headerColor};
+              }
+            }
+          }
+        }
+
+        &:focus-within {
+          max-width: 100%;
+          min-width: 10rem;
+
+          ${StyledSearchInput} {
+            ${StyledSearchIcon} {
+              background: ${backgroundColor};
+            }
+
+            ${StyledSearchTextInput} {
+              background: ${backgroundColor};
+              border-color: ${backgroundColor};
+
+              &:hover:not(:focus) {
+                border-color: ${contrastColor};
+              }
+            }
+          }
+        }
+      `}
+    `;
+});
+StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSpacer = styled.div `
+  margin: auto;
+`;
+export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
+    const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
+    const secondaryColor = tryCatch(() => rgba(contrastColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      color: ${variant === 'secondary' ? secondaryColor : contrastColor};
+      font-size: ${fontSize.s};
+
+      ${variant !== 'secondary' &&
+        css `
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      `}
+    `;
+});
+StyledAppHeaderText.defaultProps = defaultThemeProp;
+export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
+    border-radius: 50%;
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `);
+StyledAppHeaderOperator.defaultProps = defaultThemeProp;
+export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
+    return css `
+    position: sticky;
+    z-index: ${theme.base['z-index'].drawer};
+    top: 0;
+    gap: ${theme.base.spacing};
+    max-width: 100%;
+    height: ${headerHeight};
+    background-color: ${headerColor};
+    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+
+    > :first-child {
+      justify-self: flex-start;
+      min-width: 33vw;
+
+      ${hideTitle &&
+        css `
+        min-width: fit-content;
+      `}
+    }
+
+    > ${StyledAppHeaderOperator} {
+      justify-self: flex-end;
+
+      + ${StyledPopover} {
+        &,
+        ${StyledMenuListContainer} {
+          background-color: ${headerColor};
+        }
+
+        ${StyledMenuListContainer} li {
+          color: ${contrastColor};
+          background-color: transparent;
+
+          &:hover,
+          &[data-current='true'] {
+            color: ${hoverColors.foreground};
+            background-color: ${hoverColors.background};
+          }
+        }
+      }
+    }
+  `;
+});
+StyledAppHeader.defaultProps = defaultThemeProp;
+/* Mobile AppShell styles */
+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;
+/* AppShell Drawer styles */
+export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
+    return css `
+    background: ${theme.components['app-shell'].nav['background-color']};
+    width: 100%;
+    height: 100%;
+    color: rgba(255, 255, 255, 0.7);
+    opacity: ${open ? 1 : 0};
+  `;
+});
+StyledDrawerWrapper.defaultProps = defaultThemeProp;
+export const StyledDrawerHeading = styled.header(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    line-height: 1;
+
+    span {
+      font-size: ${fontSize.s};
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      margin: 0 auto;
+      position: relative;
+      left: -0.7rem;
+    }
+
+    svg {
+      font-size: ${fontSize.xxl};
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.7);
+    }
+  `;
+});
+StyledDrawerHeading.defaultProps = defaultThemeProp;
+export const StyledDrawerBackButton = styled.button(({ theme }) => {
+    return css `
+    height: ${theme.base['hit-area']['mouse-min']};
+    width: ${theme.base['hit-area']['mouse-min']};
+    border-radius: calc(
+      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}
+    );
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledDrawerBackButton.defaultProps = defaultThemeProp;
+export const StyledDrawerList = styled.ul(() => {
+    return css ``;
+});
+StyledDrawerList.defaultProps = defaultThemeProp;
+export const StyledDrawerMetaList = styled.ul `
+  li {
+    color: inherit;
+  }
+`;
+export const StyledDrawerPinButton = styled.button(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const { ltr } = useDirection();
+    return css `
+    color: inherit;
+    padding: calc(2 * ${theme.base.spacing});
+    cursor: pointer;
+    font-size: ${fontSize.xxl};
+
+    ${StyledIcon} {
+      display: block;
+      ${ltr &&
+        css `
+        transform: scaleX(-1);
+      `}
+    }
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledDrawerPinButton.defaultProps = defaultThemeProp;
+export const EmptyDrawerVisual = styled.div(({ theme }) => {
+    return css `
+    width: calc(4 * ${theme.base.spacing});
+    height: calc(4 * ${theme.base.spacing});
+  `;
+});
+EmptyDrawerVisual.defaultProps = defaultThemeProp;
+export const StyledDrawerListHeading = styled.h3(({ theme }) => {
+    return css `
+    position: sticky;
+    top: 0;
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    background-color: hsl(207 14% 13% / 1);
+    z-index: 1;
+  `;
+});
+StyledDrawerListHeading.defaultProps = defaultThemeProp;
+export const StyledDrawerViewAll = styled.a(({ theme }) => {
+    return css `
+    position: sticky;
+    bottom: 0;
+    padding: ${theme.base.spacing} 0;
+    color: inherit;
+    background-color: ${theme.components['app-shell'].nav['background-color']};
+    text-align: center;
+    margin-top: 0.0625rem;
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      box-shadow: unset;
+    }
+  `;
+});
+StyledDrawerViewAll.defaultProps = defaultThemeProp;
+export const StyledDrawerListSection = styled.div(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    border-top: 0.0625rem solid ${borderColor};
+    min-height: max(20%, 8rem);
+    overflow-y: auto;
+  `;
+});
+StyledDrawerListSection.defaultProps = defaultThemeProp;
+export const StyledDrawerListContainer = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});
+    overflow: auto;
+  `;
+});
+StyledDrawerListContainer.defaultProps = defaultThemeProp;
+export const StyledLoading = styled.div `
+  font-size: 2rem;
+`;
+/* Main content region styles */
+export const StyledAppMain = styled.main(({ appHeader, mobileNav, headerOffset = 0, theme }) => {
+    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
+    return css `
+    --appshell-offset: ${headerOffset}px;
+    position: relative;
+    margin-inline-start: ${mobileNav ? 0 : navWidth};
+    min-height: calc(100vh - ${heightOffset});
+    background-color: ${theme.base.palette['app-background']};
+
+    :focus {
+      outline: none;
+    }
+
+    @media (min-width: ${theme.base.breakpoints.xl}) {
+      margin-inline-start: ${navOpenWidth};
+    }
+
+    ${!mobileNav &&
+        css `
+      transition: margin-inline-start
+        ${`${theme.base.animation.speed} ${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;
+/* AppShellList styles */
+export const StyledAppShellListWrapper = styled.div(({ theme }) => {
+    return css `
+    max-height: 100%;
+    white-space: nowrap;
+
+    ${StyledSummaryItem} {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: calc(100% - 0.03125rem);
+        inset-inline-end: 1rem;
+        inset-inline-start: 1rem;
+        height: 0.0625rem;
+        background-color: ${theme.base.colors.gray['extra-dark']};
+      }
+    }
+  `;
+});
+StyledAppShellListWrapper.defaultProps = defaultThemeProp;
+export const StyledAppShellList = styled.ul ``;
+StyledAppShellList.defaultProps = defaultThemeProp;
+export const StyledAppShellSummaryItem = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    text-align: start;
+    white-space: normal;
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledAppShellSummaryItem.defaultProps = defaultThemeProp;
+export const StyledAppShellMetaList = styled.ul `
+  li {
+    color: inherit;
+  }
+`;
+export const StyledAppShellPinButton = styled.button(({ theme }) => {
+    return css `
+    color: inherit;
+    border: none;
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      color: ${theme.base.colors.white};
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+    }
+  `;
+});
+StyledAppShellPinButton.defaultProps = defaultThemeProp;
+export const StyledNotificationVisual = styled.span(({ theme, unread, visualIncluded }) => {
+    return css `
+      position: relative;
+      ${StyledAlert} {
+        display: ${unread ? 'auto' : 'none'};
+        position: absolute;
+        inset-inline-start: -0.65625rem;
+        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};
+        background-color: ${theme.base.palette.light};
+        height: 0.3125rem;
+        width: 0.3125rem;
+      } ;
+    `;
+});
+StyledNotificationVisual.defaultProps = defaultThemeProp;
+export const StyledNotificationPrimary = styled.span(({ theme, unread }) => {
+    return css `
+    font-weight: ${unread
+        ? theme.base['font-weight'].bold
+        : theme.base['font-weight']['semi-bold']};
+    color: ${unread ? theme.base.palette.light : 'inherit'};
+  `;
+});
+StyledNotificationPrimary.defaultProps = defaultThemeProp;
+export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
+    return css `
+      ${StyledText} {
+        opacity: ${unread
+        ? theme.base.transparency['transparent-1']
+        : theme.base.transparency['transparent-3']};
+      }
+    `;
+});
+StyledNotificationSecondary.defaultProps = defaultThemeProp;
+export const EmptyStateColorContrast = styled.div `
+  ${StyledEmptyState} {
+    span,
+    svg {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+`;
+export const StyledAppShellListSection = styled.div(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    border-top: 0.0625rem solid ${borderColor};
+    min-height: max(20%, 8rem);
+    overflow-y: auto;
+  `;
+});
+StyledAppShellListSection.defaultProps = defaultThemeProp;
+export const StyledAppShellListHeading = styled.h3(({ theme }) => {
+    return css `
+    position: sticky;
+    top: 0;
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    background-color: hsl(207 14% 13% / 1);
+    z-index: 1;
+  `;
+});
+StyledAppShellListHeading.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppShell.styles.js.map