@pega/cosmos-react-core 2.0.0-dev.11.0 → 2.0.0-dev.14.0

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

@@ -9,10 +9,11 @@ import { tryCatch } from '../../utils/utils';
 import Flex from '../Flex';
 import { readableHue, calculateFontSize, getHoverColors } from '../../styles';
 import { StyledPopover } from '../Popover';
-import { StyledNoItems } from '../NoItems';
+import { StyledEmptyState } from '../EmptyState';
 import { StyledMenuListContainer } from '../Menu/Menu.styles';
 import Text from '../Text';
 import { useDirection } from '../../hooks';
+import { StyledBareButton } from '../Button/BareButton';
 const navWidth = '4rem';
 const navOpenWidth = '18.75rem';
 const headerHeight = '3rem';
@@ -94,20 +95,26 @@ export const StyledAppShellNavIcon = styled.svg ``;
 export const StyledUtilIconCount = styled.span `
   flex-shrink: 0;
 `;
-export const StyledAppNav = styled.nav(({ appHeader, navOpen, theme }) => {
+export const StyledAppNav = styled.nav(({ appHeader, navOpen, showEnv, theme }) => {
     return css `
       z-index: ${theme.base['z-index'].drawer};
       position: fixed;
       background: ${theme.components['app-shell'].nav['background-color']};
-      max-width: calc(100vw - ${theme.base.sizes['touch-mouse']});
+      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 (pointer: coarse) {
-        max-width: calc(100vw - ${theme.base.sizes['touch-finger']});
+        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
       }
 
       ${theme.base['custom-scrollbar'] &&
@@ -171,7 +178,7 @@ export const StyledSearchForm = styled.form(({ theme }) => {
     padding: ${theme.base.spacing} 0;
 
     ${StyledSearchInput} {
-      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
 
       &:focus-within {
         box-shadow: ${theme.base.shadow['focus-inverted']};
@@ -265,7 +272,7 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, navOpe
         display: flex;
         align-items: center;
         width: 100%;
-        padding: ${theme.base.spacing} 0;
+        padding: calc(1.25 * ${theme.base.spacing}) 0;
         white-space: nowrap;
         color: rgba(255, 255, 255, 0.7);
         cursor: pointer;
@@ -370,12 +377,13 @@ 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:last-child ${StyledAvatar} {
+    li ${StyledAvatar} {
       flex-shrink: 0;
-      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
       font-weight: ${theme.base['font-weight'].normal};
     }
-    ${StyledIcon}:first-child {
+    ${StyledBareButton} > ${StyledIcon}:first-child,
+    ${StyledBareButton} > ${StyledUtilIconCount} {
       flex-shrink: 0;
       margin: 0 calc((${navWidth} - 1.125rem) / 2);
     }
@@ -383,17 +391,20 @@ export const StyledUtils = styled.div(({ theme }) => {
 });
 StyledUtils.defaultProps = defaultThemeProp;
 /* AppHeader styles */
-export const StyledAppHeaderInfo = styled.a(({ centerLogo, theme }) => {
+export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
     return css `
-    display: flex;
-
-    &:hover {
+    & > :first-child {
       text-decoration: none;
+      vertical-align: top;
     }
 
-    > ${StyledImage} {
+    ${StyledImage} {
       height: 1.625rem;
-      padding-inline-start: ${centerLogo ? theme.base.spacing : 0};
+
+      ${centerLogo &&
+        css `
+        padding-inline-start: ${theme.base.spacing};
+      `}
     }
   `;
 });
@@ -475,7 +486,7 @@ export const StyledAppHeaderSpacer = styled.div `
 `;
 export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
-    const secondaryColor = tryCatch(() => rgba(contrastColor !== null && contrastColor !== void 0 ? contrastColor : theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    const secondaryColor = tryCatch(() => rgba(contrastColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     return css `
       text-overflow: ellipsis;
       overflow: hidden;
@@ -496,13 +507,14 @@ export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
     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%;
-    min-height: ${headerHeight};
+    height: ${headerHeight};
     background-color: ${headerColor};
-    position: sticky;
-    top: 0;
-    z-index: ${theme.base['z-index'].drawer};
+    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
 
     > :first-child {
       justify-self: flex-start;
@@ -593,8 +605,8 @@ export const StyledDrawerHeading = styled.header(({ theme }) => {
 StyledDrawerHeading.defaultProps = defaultThemeProp;
 export const StyledDrawerBackButton = styled.button(({ theme }) => {
     return css `
-    height: ${theme.base.sizes['touch-mouse']};
-    width: ${theme.base.sizes['touch-mouse']};
+    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']}`}
     );
@@ -830,8 +842,8 @@ export const StyledNotificationAlert = styled.div(({ theme }) => {
   `;
 });
 StyledNotificationAlert.defaultProps = defaultThemeProp;
-export const NoItemsColorContrast = styled.div `
-  ${StyledNoItems} {
+export const EmptyStateColorContrast = styled.div `
+  ${StyledEmptyState} {
     span,
     svg {
       color: rgba(255, 255, 255, 0.7);

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,IAAmB,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,QAAQ,GAAG,MAAM,CAAC;AACxB,MAAM,YAAY,GAAG,UAAU,CAAC;AAChC,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,qBAAqB;AAErB,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC9C,CAAC,EACC,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,aAAa,EAAE,EAAE,IAAI,EAAE,EACxB,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE,EACtC,EACF,EACF,EACF,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,QAAQ,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC/B,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACtC,CAAC;IAEF,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IAErD,OAAO,GAAG,CAAA;0BACY,KAAK;eAChB,UAAU;0CACiB,MAAM;qBAC3B,OAAO;mBACT,OAAO;;;qBAGL,IAAI;;;KAGpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACrE,CAAC;IAEF,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,SAAS,QAAQ;kCAChB,QAAQ;uBACnB,QAAQ;;MAEzB,IAAI;QACN,GAAG,CAAA;;sBAEe,UAAU;;;KAG3B;;;;0BAIqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;MAGvD,WAAW;;oBAEG,QAAQ;;;;mBAIT,QAAQ,CAAC,EAAE;;;;;mBAKX,QAAQ,CAAC,CAAC;eACd,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;;kBAGM,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;GAC1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CACxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,GAAG,CAAA;;QAEN,KAAK,gBAAgB,OAAO;aACvB,OAAO;8BACU,OAAO;KAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,OAAO,GAAG,CAAA;iBACG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;oBAEzB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;gCACzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;eAChD,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;6BACnB,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;0BAGpC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE;;;kCAG3D,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;;;QAG1D,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;0CA0BiC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;OAuB9D;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE3B,iBAAiB;wBACC,QAAQ,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;;;sBAG/C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;UAE/C,gBAAgB;;;;;;wBAMF,WAAW;;;;;;;0BAOT,WAAW;;;;;QAK7B,gBAAgB;sBACF,WAAW;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;UACF,aAAa;;QAEf,uBAAuB;4BACH,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;QAGzE,uBAAuB;;;;;;;;;;;GAW5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAQxD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CACxC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1C,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAC1D,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;QAGN,UAAU;;;;QAIV,eAAe;;;gBAGP,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;YAI7B,OAAO;QACT,GAAG,CAAA;;WAEF;;UAED,OAAO;QACT,GAAG,CAAA;;SAEF;;;;;;+BAMsB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;sCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQnD,KAAK,CAAC,IAAI,CAAC,OAAO;;;;uBAId,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;oBAgBzC,eAAe,eAAe,eAAe;YACrD,OAAO;QACT,GAAG,CAAA;;WAEF;;;;;8BAKmB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;UAGvD,qBAAqB;;kBAEb,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC/B,OAAO;QACT,GAAG,CAAA;;WAEF;;qBAEU,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;iCAEP,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;wCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;YAE5D,CAAC,mBAAmB;QACtB,GAAG,CAAA;iCACoB,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;WAC9C;;;UAGD,qBAAqB;;4BAEH,QAAQ;;;;;iBAKnB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;4BACjB,gBAAgB;;KAEvC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEzC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;MACN,iBAAiB;;mBAEJ,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7F,OAAO,GAAG,CAAA;kBACM,UAAU;;MAEtB,iBAAiB;;gCAES,QAAQ;uBACjB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;GAGpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAwB,KAAK,CAAC,EAAE;IACvE,MAAM,EACJ,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,SAAS,EAAE,EACT,KAAK,EACL,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAC/B,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;MACN,UAAU;;gCAEgB,KAAK,IAAI,YAAY;qBAChC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM;;;GAGtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IACF,OAAO,GAAG,CAAA;kCACsB,WAAW;oBACzB,YAAY;;wBAER,QAAQ,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;qBAChD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;MAE/C,UAAU;;wBAEQ,QAAQ;;GAE7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,sBAAsB;AAEtB,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAA0B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;;;;;;;QAOJ,WAAW;;8BAEW,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;;GAE9D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAClD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,GAAG,CAAA;;;;;;;8BAOgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;QAEpF,iBAAiB;UACf,gBAAgB;wBACF,eAAe;;;UAG7B,qBAAqB;wBACP,eAAe;0BACb,eAAe;;;;QAIjC,CAAC,eAAe;QAClB,GAAG,CAAA;;;;;;;YAOG,iBAAiB;cACf,gBAAgB;4BACF,WAAW;uBAChB,aAAa;;;cAGtB,qBAAqB;4BACP,WAAW;8BACT,WAAW;;;gCAGT,WAAW;;;;;;;;;;YAU/B,iBAAiB;cACf,gBAAgB;4BACF,eAAe;;;cAG7B,qBAAqB;4BACP,eAAe;8BACb,eAAe;;;gCAGb,aAAa;;;;;OAKtC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACxE,CAAC;IACF,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CACnC,IAAI,CACF,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CACF,CAAC;IACF,OAAO,GAAG,CAAA;;;;eAIC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;KAClE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAClD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;oBAIA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5F,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;WACD,KAAK,CAAC,IAAI,CAAC,OAAO;;kBAEX,YAAY;wBACN,WAAW;;;eAGpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;;;;;QAMnC,SAAS;QACX,GAAG,CAAA;;OAEF;;;QAGC,uBAAuB;;;UAGrB,aAAa;;UAEb,uBAAuB;8BACH,WAAW;;;UAG/B,uBAAuB;mBACd,aAAa;;;;;qBAKX,WAAW,CAAC,UAAU;gCACX,WAAW,CAAC,UAAU;;;;;GAKnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,4BAA4B;AAE5B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAE3D,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;kBAEM,YAAY;eACf,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;wBACnB,cAAc;aACzB,aAAa;;;4BAGE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,4BAA4B;AAE5B,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;;eAIxD,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;GACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;mBAI7C,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;mBAOxC,QAAQ,CAAC,GAAG;;;;GAI5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;aAChC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;;QAEpC,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;;;;;eAKvE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;0BAMZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAA2B,GAAG,EAAE;IACvE,OAAO,GAAG,CAAA,EAAE,CAAC;AACf,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;eASjD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;0BAMZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI5C,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO;;iBAEzB,QAAQ,CAAC,GAAG;;MAEvB,UAAU;;QAER,GAAG;QACL,GAAG,CAAA;;OAEF;;;;;eAKQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;0BAMZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;sBACU,KAAK,CAAC,IAAI,CAAC,OAAO;uBACjB,KAAK,CAAC,IAAI,CAAC,OAAO;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO;;wBAET,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;;;eAK9D,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;kCACsB,WAAW;;;GAG1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,QAAQ,CAAC,GAAG;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,gCAAgC;AAEhC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAIrC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,SAAS,IAAI,SAAS;QAAE,YAAY,GAAG,CAAC,CAAC;IAE7C,OAAO,GAAG,CAAA;yBACa,YAAY;;2BAEV,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ;+BACpB,YAAY;wBACnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;yBAEnC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;6BACrB,YAAY;;;MAGnC,CAAC,SAAS;QACZ,GAAG,CAAA;;UAEG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE;KACxE;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,yBAAyB;AACzB,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlD,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;eAUjD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;0BAMZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI9C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO;;iBAEzB,QAAQ,CAAC,GAAG;;MAEvB,UAAU;;QAER,GAAG;QACL,GAAG,CAAA;;OAEF;;;;;eAKQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;0BAMZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;GACjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;IAC1C,aAAa;;;;;;CAMhB,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;kCACsB,WAAW;;;GAG1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, mix, readableColor, rgba } from 'polished';\n\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport {\n  StyledSearchInput,\n  StyledSearchIcon,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { DrawerProps } from '../Drawer';\nimport Flex from '../Flex';\nimport { readableHue, calculateFontSize, getHoverColors } from '../../styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledNoItems } from '../NoItems';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport Text, { TextProps } from '../Text';\nimport { useDirection } from '../../hooks';\n\nconst navWidth = '4rem';\nconst navOpenWidth = '18.75rem';\nconst headerHeight = '3rem';\n\n/* AppShell styles */\n\nexport const StyledAppEnvironment = styled(Flex)<{ color: string }>(\n  ({\n    color,\n    theme: {\n      base: {\n        spacing,\n        'font-weight': { bold }\n      },\n      components: {\n        'app-shell': {\n          nav: { 'background-color': navColor }\n        }\n      }\n    }\n  }) => {\n    const foreground = tryCatch(\n      () => readableHue(color, color),\n      () => readableHue(navColor, navColor)\n    );\n\n    const shadow = tryCatch(() => rgba(foreground, 0.1));\n\n    return css`\n      background-color: ${color};\n      color: ${foreground};\n      box-shadow: inset 0 0 0 0.0625rem ${shadow};\n      height: calc(${spacing} * 2.5);\n      padding: 0 ${spacing};\n      text-align: center;\n      text-transform: uppercase;\n      font-weight: ${bold};\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `;\n  }\n);\n\nStyledAppEnvironment.defaultProps = defaultThemeProp;\n\nexport const StyledAppInfo = styled.a(({ theme, href }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\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    ${href &&\n    css`\n      &:hover {\n        background: ${hoverColor};\n        text-decoration: none;\n      }\n    `}\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: rgba(255, 255, 255, 0.7);\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div<{ navOpen: boolean }>(({ navOpen }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: ${navOpen ? 'auto' : 'hidden'};\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled.span(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    const { start } = useDirection();\n\n    return css`\n      position: absolute;\n      ${start}: calc(4.5 * ${spacing});\n      top: ${spacing};\n      padding: 0 calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellNavIcon = styled.svg``;\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; navOpen: boolean }>(\n  ({ appHeader, navOpen, theme }) => {\n    return css`\n      z-index: ${theme.base['z-index'].drawer};\n      position: fixed;\n      background: ${theme.components['app-shell'].nav['background-color']};\n      max-width: calc(100vw - ${theme.base.sizes['touch-mouse']});\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\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base.sizes['touch-finger']});\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 StyledSearchForm = styled.form(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    flex-shrink: 0;\n    padding: ${theme.base.spacing} 0;\n\n    ${StyledSearchInput} {\n      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);\n\n      &:focus-within {\n        box-shadow: ${theme.base.shadow['focus-inverted']};\n\n        ${StyledSearchIcon} {\n          color: rgba(255, 255, 255, 0.9);\n        }\n      }\n\n      input {\n        border-color: ${borderColor};\n\n        &::placeholder {\n          color: rgba(255, 255, 255, 0.4);\n        }\n\n        &:focus:not([disabled]) {\n          border-color: ${borderColor};\n        }\n      }\n\n      input,\n      ${StyledSearchIcon} {\n        background: ${borderColor};\n        color: rgba(255, 255, 255, 0.7);\n      }\n    }\n  `;\n});\n\nStyledSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledNavListMenuButton = styled.button(({ theme }) => {\n  return css`\n    & + ${StyledPopover} {\n      &,\n      ${StyledMenuListContainer} {\n        background-color: ${theme.components['app-shell'].nav['background-color']};\n      }\n\n      ${StyledMenuListContainer} li {\n        color: rgba(255, 255, 255, 0.7);\n        background-color: transparent;\n\n        &:hover,\n        &[data-current='true'] {\n          color: #ffffff;\n          background-color: rgba(255, 255, 255, 0.05);\n        }\n      }\n    }\n  `;\n});\n\nStyledNavListMenuButton.defaultProps = defaultThemeProp;\n\ninterface StyledNavListItemProps {\n  nestedListCollapsed: boolean;\n  active: boolean;\n  navOpen: boolean;\n}\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItem = styled.li<StyledNavListItemProps>(\n  ({ theme, nestedListCollapsed, navOpen }) => {\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    const { rtl } = useDirection();\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      ${StyledCaseClose} {\n        display: flex;\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        opacity: 0;\n        &:hover,\n        &:focus {\n          ${navOpen &&\n          css`\n            opacity: 1;\n          `}\n        }\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        top: 50%;\n        bottom: 50%;\n        margin: auto 0;\n        color: rgba(255, 255, 255, 0.7);\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n      }\n\n      > :first-child {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: ${theme.base.spacing} 0;\n        white-space: nowrap;\n        color: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          color: inherit;\n          white-space: nowrap;\n        }\n\n        &:hover,\n        &:focus {\n          color: #ffffff;\n          background: rgba(255, 255, 255, 0.05);\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: inset ${theme.base.shadow['focus-inverted']};\n        }\n\n        ${StyledAppShellNavIcon}:last-child {\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        ${StyledAppShellNavIcon}:first-child {\n          flex-shrink: 0;\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\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  const background = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));\n  return css`\n    background: ${background};\n\n    ${StyledNavListItem} {\n      > :first-child {\n        padding-inline-start: ${navWidth};\n        font-weight: ${theme.base['font-weight'].normal};\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div<{ expanded: boolean }>(props => {\n  const {\n    expanded,\n    theme: {\n      base: {\n        animation: {\n          speed,\n          timing: { ease: acceleration }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    ${StyledIcon} {\n      &:first-of-type {\n        transition: transform ${speed} ${acceleration};\n        transform: ${expanded ? 'rotateZ(45deg)' : 'none'};\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    li:last-child ${StyledAvatar} {\n      flex-shrink: 0;\n      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n    ${StyledIcon}:first-child {\n      flex-shrink: 0;\n      margin: 0 calc((${navWidth} - 1.125rem) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\n/* AppHeader styles */\n\nexport const StyledAppHeaderInfo = styled.a<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    display: flex;\n\n    &:hover {\n      text-decoration: none;\n    }\n\n    > ${StyledImage} {\n      height: 1.625rem;\n      padding-inline-start: ${centerLogo ? theme.base.spacing : 0};\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const backgroundColor = theme.base.palette['app-background'];\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${StyledSearchInput} {\n        ${StyledSearchIcon} {\n          background: ${backgroundColor};\n        }\n\n        ${StyledSearchTextInput} {\n          background: ${backgroundColor};\n          border-color: ${backgroundColor};\n        }\n      }\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 2rem;\n        min-width: 2rem;\n        margin-inline-start: auto;\n        margin-inline-end: 0;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchIcon} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n              border-color: ${headerColor};\n\n              &:hover:not(:focus) {\n                border-color: ${headerColor};\n              }\n            }\n          }\n        }\n\n        &:focus-within {\n          max-width: 100%;\n          min-width: 10rem;\n\n          ${StyledSearchInput} {\n            ${StyledSearchIcon} {\n              background: ${backgroundColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${backgroundColor};\n              border-color: ${backgroundColor};\n\n              &:hover:not(:focus) {\n                border-color: ${contrastColor};\n              }\n            }\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n    `;\n  }\n);\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean }>(({ hideTitle, theme }) => {\n  const headerColor = theme.components['app-shell'].header['background-color'];\n  const contrastColor = tryCatch(() => readableColor(headerColor));\n  const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n  return css`\n    gap: ${theme.base.spacing};\n    max-width: 100%;\n    min-height: ${headerHeight};\n    background-color: ${headerColor};\n    position: sticky;\n    top: 0;\n    z-index: ${theme.base['z-index'].drawer};\n\n    > :first-child {\n      justify-self: flex-start;\n      min-width: 33vw;\n\n      ${hideTitle &&\n      css`\n        min-width: fit-content;\n      `}\n    }\n\n    > ${StyledAppHeaderOperator} {\n      justify-self: flex-end;\n\n      + ${StyledPopover} {\n        &,\n        ${StyledMenuListContainer} {\n          background-color: ${headerColor};\n        }\n\n        ${StyledMenuListContainer} li {\n          color: ${contrastColor};\n          background-color: transparent;\n\n          &:hover,\n          &[data-current='true'] {\n            color: ${hoverColors.foreground};\n            background-color: ${hoverColors.background};\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\n/* Mobile AppShell styles */\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\n/* AppShell Drawer styles */\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  return css`\n    background: ${theme.components['app-shell'].nav['background-color']};\n    width: 100%;\n    height: 100%;\n    color: rgba(255, 255, 255, 0.7);\n    opacity: ${open ? 1 : 0};\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\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    span {\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: rgba(255, 255, 255, 0.7);\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  return css`\n    height: ${theme.base.sizes['touch-mouse']};\n    width: ${theme.base.sizes['touch-mouse']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerSummaryItem = styled.a(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    color: inherit;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledDrawerPinButton = styled.button(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { ltr } = useDirection();\n\n  return css`\n    color: inherit;\n    padding: calc(2 * ${theme.base.spacing});\n    cursor: pointer;\n    font-size: ${fontSize.xxl};\n\n    ${StyledIcon} {\n      display: block;\n      ${ltr &&\n      css`\n        transform: scaleX(-1);\n      `}\n    }\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerPinButton.defaultProps = defaultThemeProp;\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  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: inherit;\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    text-align: center;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      box-shadow: unset;\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\n/* Main content region styles */\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, headerOffset = 0, theme }) => {\n  let heightOffset = 0;\n  if (appHeader || mobileNav) heightOffset = 3;\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset}rem);\n    background-color: ${theme.base.palette['app-background']};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\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});\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\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div`\n  max-height: 100%;\n  white-space: nowrap;\n`;\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryItem = styled.a(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    color: inherit;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    cursor: pointer;\n    text-align: start;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { ltr } = useDirection();\n\n  return css`\n    color: inherit;\n    padding: calc(2 * ${theme.base.spacing});\n    cursor: pointer;\n    font-size: ${fontSize.xxl};\n\n    ${StyledIcon} {\n      display: block;\n      ${ltr &&\n      css`\n        transform: scaleX(-1);\n      `}\n    }\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationAlert = styled.div(({ theme }) => {\n  return css`\n    border: unset;\n    background-color: ${theme.base.colors.blue.light};\n  `;\n});\n\nStyledNotificationAlert.defaultProps = defaultThemeProp;\n\nexport const NoItemsColorContrast = styled.div`\n  ${StyledNoItems} {\n    span,\n    svg {\n      color: rgba(255, 255, 255, 0.7);\n    }\n  }\n`;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}
+{"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 { lighten, mix, readableColor, rgba } from 'polished';\n\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport {\n  StyledSearchInput,\n  StyledSearchIcon,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { DrawerProps } from '../Drawer';\nimport Flex from '../Flex';\nimport { readableHue, calculateFontSize, getHoverColors } from '../../styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport Text, { TextProps } from '../Text';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\n\nconst navWidth = '4rem';\nconst navOpenWidth = '18.75rem';\nconst headerHeight = '3rem';\n\n/* AppShell styles */\n\nexport const StyledAppEnvironment = styled(Flex)<{ color: string }>(\n  ({\n    color,\n    theme: {\n      base: {\n        spacing,\n        'font-weight': { bold }\n      },\n      components: {\n        'app-shell': {\n          nav: { 'background-color': navColor }\n        }\n      }\n    }\n  }) => {\n    const foreground = tryCatch(\n      () => readableHue(color, color),\n      () => readableHue(navColor, navColor)\n    );\n\n    const shadow = tryCatch(() => rgba(foreground, 0.1));\n\n    return css`\n      background-color: ${color};\n      color: ${foreground};\n      box-shadow: inset 0 0 0 0.0625rem ${shadow};\n      height: calc(${spacing} * 2.5);\n      padding: 0 ${spacing};\n      text-align: center;\n      text-transform: uppercase;\n      font-weight: ${bold};\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `;\n  }\n);\n\nStyledAppEnvironment.defaultProps = defaultThemeProp;\n\nexport const StyledAppInfo = styled.a(({ theme, href }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\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    ${href &&\n    css`\n      &:hover {\n        background: ${hoverColor};\n        text-decoration: none;\n      }\n    `}\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: rgba(255, 255, 255, 0.7);\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div<{ navOpen: boolean }>(({ navOpen }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: ${navOpen ? 'auto' : 'hidden'};\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled.span(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    const { start } = useDirection();\n\n    return css`\n      position: absolute;\n      ${start}: calc(4.5 * ${spacing});\n      top: ${spacing};\n      padding: 0 calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellNavIcon = styled.svg``;\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; navOpen: boolean; showEnv: boolean }>(\n  ({ appHeader, navOpen, showEnv, theme }) => {\n    return css`\n      z-index: ${theme.base['z-index'].drawer};\n      position: fixed;\n      background: ${theme.components['app-shell'].nav['background-color']};\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\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\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 StyledSearchForm = styled.form(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    flex-shrink: 0;\n    padding: ${theme.base.spacing} 0;\n\n    ${StyledSearchInput} {\n      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n\n      &:focus-within {\n        box-shadow: ${theme.base.shadow['focus-inverted']};\n\n        ${StyledSearchIcon} {\n          color: rgba(255, 255, 255, 0.9);\n        }\n      }\n\n      input {\n        border-color: ${borderColor};\n\n        &::placeholder {\n          color: rgba(255, 255, 255, 0.4);\n        }\n\n        &:focus:not([disabled]) {\n          border-color: ${borderColor};\n        }\n      }\n\n      input,\n      ${StyledSearchIcon} {\n        background: ${borderColor};\n        color: rgba(255, 255, 255, 0.7);\n      }\n    }\n  `;\n});\n\nStyledSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledNavListMenuButton = styled.button(({ theme }) => {\n  return css`\n    & + ${StyledPopover} {\n      &,\n      ${StyledMenuListContainer} {\n        background-color: ${theme.components['app-shell'].nav['background-color']};\n      }\n\n      ${StyledMenuListContainer} li {\n        color: rgba(255, 255, 255, 0.7);\n        background-color: transparent;\n\n        &:hover,\n        &[data-current='true'] {\n          color: #ffffff;\n          background-color: rgba(255, 255, 255, 0.05);\n        }\n      }\n    }\n  `;\n});\n\nStyledNavListMenuButton.defaultProps = defaultThemeProp;\n\ninterface StyledNavListItemProps {\n  nestedListCollapsed: boolean;\n  active: boolean;\n  navOpen: boolean;\n}\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItem = styled.li<StyledNavListItemProps>(\n  ({ theme, nestedListCollapsed, navOpen }) => {\n    const activeBackground = tryCatch(() =>\n      rgba('#000000', theme.base.transparency['transparent-4'])\n    );\n\n    const { rtl } = useDirection();\n\n    return css`\n      display: block;\n      position: relative;\n      ${StyledIcon} {\n        font-size: 1.25rem;\n      }\n\n      ${StyledCaseClose} {\n        display: flex;\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        opacity: 0;\n        &:hover,\n        &:focus {\n          ${navOpen &&\n          css`\n            opacity: 1;\n          `}\n        }\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        top: 50%;\n        bottom: 50%;\n        margin: auto 0;\n        color: rgba(255, 255, 255, 0.7);\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\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: rgba(255, 255, 255, 0.7);\n        cursor: pointer;\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n        text-decoration: none;\n\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          color: inherit;\n          white-space: nowrap;\n        }\n\n        &:hover,\n        &:focus {\n          color: #ffffff;\n          background: rgba(255, 255, 255, 0.05);\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: inset ${theme.base.shadow['focus-inverted']};\n        }\n\n        ${StyledAppShellNavIcon}:last-child {\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        ${StyledAppShellNavIcon}:first-child {\n          flex-shrink: 0;\n          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\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  const background = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));\n  return css`\n    background: ${background};\n\n    ${StyledNavListItem} {\n      > :first-child {\n        padding-inline-start: ${navWidth};\n        font-weight: ${theme.base['font-weight'].normal};\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div<{ expanded: boolean }>(props => {\n  const {\n    expanded,\n    theme: {\n      base: {\n        animation: {\n          speed,\n          timing: { ease: acceleration }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    ${StyledIcon} {\n      &:first-of-type {\n        transition: transform ${speed} ${acceleration};\n        transform: ${expanded ? 'rotateZ(45deg)' : 'none'};\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    li ${StyledAvatar} {\n      flex-shrink: 0;\n      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n    ${StyledBareButton} > ${StyledIcon}:first-child,\n    ${StyledBareButton} > ${StyledUtilIconCount} {\n      flex-shrink: 0;\n      margin: 0 calc((${navWidth} - 1.125rem) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\n/* AppHeader styles */\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      text-decoration: none;\n      vertical-align: top;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const backgroundColor = theme.base.palette['app-background'];\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${StyledSearchInput} {\n        ${StyledSearchIcon} {\n          background: ${backgroundColor};\n        }\n\n        ${StyledSearchTextInput} {\n          background: ${backgroundColor};\n          border-color: ${backgroundColor};\n        }\n      }\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 2rem;\n        min-width: 2rem;\n        margin-inline-start: auto;\n        margin-inline-end: 0;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchIcon} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n              border-color: ${headerColor};\n\n              &:hover:not(:focus) {\n                border-color: ${headerColor};\n              }\n            }\n          }\n        }\n\n        &:focus-within {\n          max-width: 100%;\n          min-width: 10rem;\n\n          ${StyledSearchInput} {\n            ${StyledSearchIcon} {\n              background: ${backgroundColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${backgroundColor};\n              border-color: ${backgroundColor};\n\n              &:hover:not(:focus) {\n                border-color: ${contrastColor};\n              }\n            }\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n    `;\n  }\n);\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean }>(({ hideTitle, theme }) => {\n  const headerColor = theme.components['app-shell'].header['background-color'];\n  const contrastColor = tryCatch(() => readableColor(headerColor));\n  const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n  return css`\n    position: sticky;\n    z-index: ${theme.base['z-index'].drawer};\n    top: 0;\n    gap: ${theme.base.spacing};\n    max-width: 100%;\n    height: ${headerHeight};\n    background-color: ${headerColor};\n    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n    > :first-child {\n      justify-self: flex-start;\n      min-width: 33vw;\n\n      ${hideTitle &&\n      css`\n        min-width: fit-content;\n      `}\n    }\n\n    > ${StyledAppHeaderOperator} {\n      justify-self: flex-end;\n\n      + ${StyledPopover} {\n        &,\n        ${StyledMenuListContainer} {\n          background-color: ${headerColor};\n        }\n\n        ${StyledMenuListContainer} li {\n          color: ${contrastColor};\n          background-color: transparent;\n\n          &:hover,\n          &[data-current='true'] {\n            color: ${hoverColors.foreground};\n            background-color: ${hoverColors.background};\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\n/* Mobile AppShell styles */\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\n/* AppShell Drawer styles */\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  return css`\n    background: ${theme.components['app-shell'].nav['background-color']};\n    width: 100%;\n    height: 100%;\n    color: rgba(255, 255, 255, 0.7);\n    opacity: ${open ? 1 : 0};\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\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    span {\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: rgba(255, 255, 255, 0.7);\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  return css`\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerSummaryItem = styled.a(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    color: inherit;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledDrawerPinButton = styled.button(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { ltr } = useDirection();\n\n  return css`\n    color: inherit;\n    padding: calc(2 * ${theme.base.spacing});\n    cursor: pointer;\n    font-size: ${fontSize.xxl};\n\n    ${StyledIcon} {\n      display: block;\n      ${ltr &&\n      css`\n        transform: scaleX(-1);\n      `}\n    }\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledDrawerPinButton.defaultProps = defaultThemeProp;\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  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: inherit;\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    text-align: center;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      box-shadow: unset;\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\n/* Main content region styles */\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, headerOffset = 0, theme }) => {\n  let heightOffset = 0;\n  if (appHeader || mobileNav) heightOffset = 3;\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset}rem);\n    background-color: ${theme.base.palette['app-background']};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\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});\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\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div`\n  max-height: 100%;\n  white-space: nowrap;\n`;\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryItem = styled.a(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    color: inherit;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    cursor: pointer;\n    text-align: start;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { ltr } = useDirection();\n\n  return css`\n    color: inherit;\n    padding: calc(2 * ${theme.base.spacing});\n    cursor: pointer;\n    font-size: ${fontSize.xxl};\n\n    ${StyledIcon} {\n      display: block;\n      ${ltr &&\n      css`\n        transform: scaleX(-1);\n      `}\n    }\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: inset ${theme.base.shadow['focus-inverted']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationAlert = styled.div(({ theme }) => {\n  return css`\n    border: unset;\n    background-color: ${theme.base.colors.blue.light};\n  `;\n});\n\nStyledNotificationAlert.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div`\n  ${StyledEmptyState} {\n    span,\n    svg {\n      color: rgba(255, 255, 255, 0.7);\n    }\n  }\n`;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppShellList.js

@@ -6,27 +6,24 @@ import Flex from '../Flex';
 import Grid from '../Grid';
 import Icon from '../Icon';
 import MetaList from '../MetaList';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
 import Progress from '../Progress';
 import SummaryItem from '../SummaryItem';
 import Text from '../Text';
 import { useI18n } from '../../hooks';
-import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryItem, StyledAppShellMetaList, StyledNotificationAlert, StyledAppShellPinButton, NoItemsColorContrast, StyledAppShellListSection, StyledAppShellListHeading, StyledLoading, StyledDrawerViewAll } from './AppShell.styles';
+import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryItem, StyledAppShellMetaList, StyledNotificationAlert, StyledAppShellPinButton, EmptyStateColorContrast, StyledAppShellListSection, StyledAppShellListHeading, StyledLoading, StyledDrawerViewAll } from './AppShell.styles';
 const List = ({ headingText, emptyText, items, loading = false, displayPins = false, onItemClick, onItemPinToggle, viewAll: viewAllProps }) => {
     const t = useI18n();
     const renderContent = items.length ? (_jsx(Flex, Object.assign({ as: StyledAppShellList, item: { grow: 1 } }, { children: items.map(({ id, primary, secondary, visual, unread, href, onClick, pinned, onPinToggle, ...restProps }) => {
-            return (_jsxs(Grid, Object.assign({ as: 'li', container: { cols: '1fr auto' } }, { children: [_jsx(SummaryItem, Object.assign({}, restProps, { as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', overflowStrategy: 'ellipsis', primary: primary, secondary: (secondary === null || secondary === void 0 ? void 0 : secondary.length) ? (_jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }, void 0)) : undefined, visual: visual, href: href, onClick: (event) => {
-                            onClick === null || onClick === void 0 ? void 0 : onClick(id, event);
-                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(id, event);
-                        }, actions: unread ? _jsx(Alert, { as: StyledNotificationAlert, variant: 'urgent' }, void 0) : null }), void 0),
-                    displayPins && (_jsx(BareButton, Object.assign({ as: StyledAppShellPinButton, onClick: () => {
-                            onPinToggle === null || onPinToggle === void 0 ? void 0 : onPinToggle(id);
-                            onItemPinToggle === null || onItemPinToggle === void 0 ? void 0 : onItemPinToggle(id);
+            return (_jsxs(Grid, Object.assign({ as: 'li', container: { cols: '1fr auto' } }, { children: [_jsx(SummaryItem, Object.assign({}, restProps, { as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', overflowStrategy: 'ellipsis', primary: primary, secondary: secondary?.length ? (_jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }, void 0)) : undefined, visual: visual, href: href, onClick: (event) => {
+                            onClick?.(id, event);
+                            onItemClick?.(id, event);
+                        }, actions: unread ? _jsx(Alert, { as: StyledNotificationAlert, variant: 'urgent' }, void 0) : null }), void 0), displayPins && (_jsx(BareButton, Object.assign({ as: StyledAppShellPinButton, onClick: () => {
+                            onPinToggle?.(id);
+                            onItemPinToggle?.(id);
                         } }, { children: _jsx(Icon, { name: pinned ? 'pin-solid' : 'pin' }, void 0) }), void 0))] }), id));
-        }) }), void 0)) : (_jsx(Flex, Object.assign({ as: NoItemsColorContrast, container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } }, { children: _jsx(NoItems, { message: emptyText }, void 0) }), void 0));
-    return (_jsxs(Flex, Object.assign({ as: StyledAppShellListSection, container: { direction: 'column' } }, { children: [headingText && (_jsx(Text, Object.assign({ variant: 'h3', as: StyledAppShellListHeading }, { children: headingText }), void 0)),
-            loading ? (_jsx(Flex, Object.assign({ container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } }, { children: _jsx(Progress, { as: StyledLoading, placement: 'inline' }, void 0) }), void 0)) : (renderContent),
-            ((viewAllProps === null || viewAllProps === void 0 ? void 0 : viewAllProps.href) || (viewAllProps === null || viewAllProps === void 0 ? void 0 : viewAllProps.onClick)) && !!items.length && !loading && (_jsx(StyledDrawerViewAll, Object.assign({}, viewAllProps, { as: viewAllProps.href ? 'a' : 'button' }, { children: t('view_all') }), void 0))] }), void 0));
+        }) }), void 0)) : (_jsx(Flex, Object.assign({ as: EmptyStateColorContrast, container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } }, { children: _jsx(EmptyState, { message: emptyText }, void 0) }), void 0));
+    return (_jsxs(Flex, Object.assign({ as: StyledAppShellListSection, container: { direction: 'column' } }, { children: [headingText && (_jsx(Text, Object.assign({ variant: 'h3', as: StyledAppShellListHeading }, { children: headingText }), void 0)), loading ? (_jsx(Flex, Object.assign({ container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 } }, { children: _jsx(Progress, { as: StyledLoading, placement: 'inline' }, void 0) }), void 0)) : (renderContent), (viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (_jsx(StyledDrawerViewAll, Object.assign({}, viewAllProps, { as: viewAllProps.href ? 'a' : 'button' }, { children: t('view_all') }), void 0))] }), void 0));
 };
 const AppShellList = ({ listView }) => {
     return (_jsx(Flex, Object.assign({ as: StyledAppShellListWrapper, container: { direction: 'column' } }, { children: listView.map(listItem => (_createElement(List, { ...listItem, key: listItem.id }))) }), void 0));

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport MetaList from '../MetaList';\nimport NoItems from '../NoItems';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationAlert,\n  StyledAppShellPinButton,\n  NoItemsColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll\n} from './AppShell.styles';\n\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          return (\n            <Grid key={id} as='li' container={{ cols: '1fr auto' }}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                overflowStrategy='ellipsis'\n                primary={primary}\n                secondary={\n                  secondary?.length ? (\n                    <MetaList as={StyledAppShellMetaList} items={secondary} />\n                  ) : undefined\n                }\n                visual={visual}\n                href={href}\n                onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                  onClick?.(id, event);\n                  onItemClick?.(id, event);\n                }}\n                actions={unread ? <Alert as={StyledNotificationAlert} variant='urgent' /> : null}\n              />\n              {displayPins && (\n                <BareButton\n                  as={StyledAppShellPinButton}\n                  onClick={() => {\n                    onPinToggle?.(id);\n                    onItemPinToggle?.(id);\n                  }}\n                >\n                  <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                </BareButton>\n              )}\n            </Grid>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={NoItemsColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <NoItems message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}
+{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationAlert,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll\n} from './AppShell.styles';\n\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          return (\n            <Grid key={id} as='li' container={{ cols: '1fr auto' }}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                overflowStrategy='ellipsis'\n                primary={primary}\n                secondary={\n                  secondary?.length ? (\n                    <MetaList as={StyledAppShellMetaList} items={secondary} />\n                  ) : undefined\n                }\n                visual={visual}\n                href={href}\n                onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                  onClick?.(id, event);\n                  onItemClick?.(id, event);\n                }}\n                actions={unread ? <Alert as={StyledNotificationAlert} variant='urgent' /> : null}\n              />\n              {displayPins && (\n                <BareButton\n                  as={StyledAppShellPinButton}\n                  onClick={() => {\n                    onPinToggle?.(id);\n                    onItemPinToggle?.(id);\n                  }}\n                >\n                  <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                </BareButton>\n              )}\n            </Grid>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}

package/lib/components/AppShell/Drawer.js

@@ -36,16 +36,13 @@ export default (props) => {
                     focusedImperatively.current = true;
                     backButtonRef.current.focus();
                 }
-                onDrawerOpen === null || onDrawerOpen === void 0 ? void 0 : onDrawerOpen();
+                onDrawerOpen?.();
             }, onAfterClose: () => {
                 if (refocusEl && document.activeElement !== refocusEl) {
                     focusedImperatively.current = true;
                     refocusEl.focus();
                 }
-                onDrawerClose === null || onDrawerClose === void 0 ? void 0 : onDrawerClose();
-            } }, { children: [_jsxs(Flex, Object.assign({ as: StyledDrawerHeading, container: { alignItems: 'center' } }, { children: [rtl && _jsx(Text, { children: header }, void 0),
-                        _jsx(BareButton, Object.assign({ as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: t('close_noun', header) }, { children: _jsx(Icon, { name: 'arrow-left' }, void 0) }), void 0),
-                        ltr && _jsx(Text, { children: header }, void 0)] }), void 0),
-                _jsx(Flex, Object.assign({ as: StyledDrawerListContainer, container: { direction: 'column' } }, { children: content }), void 0)] }), void 0) }), void 0));
+                onDrawerClose?.();
+            } }, { children: [_jsxs(Flex, Object.assign({ as: StyledDrawerHeading, container: { alignItems: 'center' } }, { children: [rtl && _jsx(Text, { children: header }, void 0), _jsx(BareButton, Object.assign({ as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: t('close_noun', header) }, { children: _jsx(Icon, { name: 'arrow-left' }, void 0) }), void 0), ltr && _jsx(Text, { children: header }, void 0)] }), void 0), _jsx(Flex, Object.assign({ as: StyledDrawerListContainer, container: { direction: 'column' } }, { children: content }), void 0)] }), void 0) }), void 0));
 };
 //# sourceMappingURL=Drawer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && <Text>{header}</Text>}\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            title={t('close_noun', header)}\n          >\n            <Icon name='arrow-left' />\n          </BareButton>\n          {ltr && <Text>{header}</Text>}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && <Text>{header}</Text>}\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            title={t('close_noun', header)}\n          >\n            <Icon name='arrow-left' />\n          </BareButton>\n          {ltr && <Text>{header}</Text>}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}

package/lib/components/AppShell/Operator.js

@@ -6,7 +6,6 @@ import Menu from '../Menu';
 import { useConsolidatedRef } from '../../hooks';
 import AppShellContext from './AppShellContext';
 const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
-    var _a;
     const { navOpen } = useContext(AppShellContext);
     const buttonRef = useConsolidatedRef(ref);
     const operatorMenuItems = useMemo(() => {
@@ -29,8 +28,7 @@ const Operator = forwardRef(({ children, actions, popover, as }, ref) => {
                         setShowMenu(false);
                 }, onBlur: () => {
                     setShowMenu(false);
-                } }, { children: children }), void 0),
-            _jsx(Popover, Object.assign({}, popover, { show: showMenu, target: buttonRef.current }, { children: _jsx(Menu, { focusControlEl: (_a = buttonRef.current) !== null && _a !== void 0 ? _a : undefined, mode: 'action', items: operatorMenuItems, 
+                } }, { children: children }), void 0), _jsx(Popover, Object.assign({}, popover, { show: showMenu, target: buttonRef.current }, { children: _jsx(Menu, { focusControlEl: buttonRef.current ?? undefined, mode: 'action', items: operatorMenuItems, 
                     /**
                      * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.
                      */

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC,EACvC,EAAE;;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpE,EAAE;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,kBACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,gBAEA,QAAQ,YACE;YACb,KAAC,OAAO,oBAAK,OAAO,IAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,gBAC7D,KAAC,IAAI,IACH,cAAc,EAAE,MAAA,SAAS,CAAC,OAAO,mCAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB;;uBAEG;oBACH,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,WACD,YACM,YACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(\n  (\n    {\n      children,\n      actions,\n      popover,\n      as\n    }: {\n      children: ReactNode;\n      actions: OperatorProps['actions'];\n      popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    } & AsProp,\n    ref: Ref<HTMLButtonElement> | undefined\n  ) => {\n    const { navOpen } = useContext(AppShellContext);\n    const buttonRef = useConsolidatedRef(ref);\n\n    const operatorMenuItems = useMemo(() => {\n      return actions.flat().map(({ id, text, onClick: click, ...rest }) => ({\n        id,\n        primary: text,\n        onClick: click,\n        ...rest\n      }));\n    }, [actions]);\n\n    const [showMenu, setShowMenu] = useState(false);\n\n    useEffect(() => {\n      if (!navOpen) setShowMenu(false);\n    }, [navOpen]);\n\n    return (\n      <>\n        <BareButton\n          as={as}\n          ref={buttonRef}\n          onClick={() => {\n            setShowMenu(cur => !cur);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setShowMenu(false);\n          }}\n          onBlur={() => {\n            setShowMenu(false);\n          }}\n        >\n          {children}\n        </BareButton>\n        <Popover {...popover} show={showMenu} target={buttonRef.current}>\n          <Menu\n            focusControlEl={buttonRef.current ?? undefined}\n            mode='action'\n            items={operatorMenuItems}\n            /**\n             * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.\n             */\n            onItemClick={(_, e) => {\n              if (\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                setShowMenu(false);\n              }\n            }}\n          />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default Operator;\n"]}
+{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC,EACvC,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpE,EAAE;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,kBACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,gBAEA,QAAQ,YACE,EACb,KAAC,OAAO,oBAAK,OAAO,IAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,gBAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB;;uBAEG;oBACH,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,WACD,YACM,YACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(\n  (\n    {\n      children,\n      actions,\n      popover,\n      as\n    }: {\n      children: ReactNode;\n      actions: OperatorProps['actions'];\n      popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    } & AsProp,\n    ref: Ref<HTMLButtonElement> | undefined\n  ) => {\n    const { navOpen } = useContext(AppShellContext);\n    const buttonRef = useConsolidatedRef(ref);\n\n    const operatorMenuItems = useMemo(() => {\n      return actions.flat().map(({ id, text, onClick: click, ...rest }) => ({\n        id,\n        primary: text,\n        onClick: click,\n        ...rest\n      }));\n    }, [actions]);\n\n    const [showMenu, setShowMenu] = useState(false);\n\n    useEffect(() => {\n      if (!navOpen) setShowMenu(false);\n    }, [navOpen]);\n\n    return (\n      <>\n        <BareButton\n          as={as}\n          ref={buttonRef}\n          onClick={() => {\n            setShowMenu(cur => !cur);\n          }}\n          onKeyDown={(e: KeyboardEvent) => {\n            if (e.key === 'Escape') setShowMenu(false);\n          }}\n          onBlur={() => {\n            setShowMenu(false);\n          }}\n        >\n          {children}\n        </BareButton>\n        <Popover {...popover} show={showMenu} target={buttonRef.current}>\n          <Menu\n            focusControlEl={buttonRef.current ?? undefined}\n            mode='action'\n            items={operatorMenuItems}\n            /**\n             * @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated.\n             */\n            onItemClick={(_, e) => {\n              if (\n                (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                  .detail > 0\n              ) {\n                setShowMenu(false);\n              }\n            }}\n          />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default Operator;\n"]}

package/lib/components/AppShell/SkipNavigation.js

@@ -25,9 +25,9 @@ export default memo(() => {
         const main = documentIsAvailable ? document.querySelector('main') : false;
         if (!main)
             return;
-        const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el !== null && el !== void 0 ? el : main.querySelector(tag), null);
+        const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el ?? main.querySelector(tag), null);
         main.setAttribute('tabindex', '-1');
-        if (heading === null || heading === void 0 ? void 0 : heading.textContent)
+        if (heading?.textContent)
             main.setAttribute('aria-label', heading.textContent);
         main.style.outline = 'none';
         main.focus();

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

@@ -1 +1 @@
-{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n, useUID } from '../../hooks';\nimport Menu from '../Menu';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndexes }\n    }\n  } = props;\n\n  const z = Math.max(...Object.values(zIndexes)) + 1;\n\n  return css`\n    position: fixed;\n    z-index: ${z};\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport default memo(() => {\n  const onClick = useCallback(() => {\n    const main = documentIsAvailable ? document.querySelector('main') : false;\n    if (!main) return;\n\n    const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce<HTMLHeadingElement | null>(\n      (el, tag) => el ?? main.querySelector<HTMLHeadingElement>(tag),\n      null\n    );\n\n    main.setAttribute('tabindex', '-1');\n    if (heading?.textContent) main.setAttribute('aria-label', heading.textContent);\n    main.style.outline = 'none';\n    main.focus();\n\n    main.addEventListener(\n      'focusout',\n      () => {\n        main.removeAttribute('tabindex');\n        main.removeAttribute('aria-label');\n        main.style.outline = '';\n      },\n      { once: true }\n    );\n  }, []);\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect() {\n          return {\n            height: 0,\n            width: 0,\n            x: 20,\n            y: 20,\n            top: 20,\n            bottom: 20,\n            left: 20,\n            right: 20\n          };\n        }\n      }}\n    >\n      <Menu\n        items={[\n          {\n            id: useUID(),\n            primary: useI18n()('go_to_main_content'),\n            onClick\n          }\n        ]}\n      />\n    </StyledSkipNavigation>\n  );\n});\n"]}
+{"version":3,"file":"SkipNavigation.js","sourceRoot":"","sources":["../../../src/components/AppShell/SkipNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, memo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { documentIsAvailable } from '../../utils';\nimport { useI18n, useUID } from '../../hooks';\nimport Menu from '../Menu';\nimport Popover from '../Popover';\n\nexport const StyledSkipNavigation = styled(Popover)(props => {\n  const {\n    theme: {\n      base: { 'z-index': zIndexes }\n    }\n  } = props;\n\n  const z = Math.max(...Object.values(zIndexes)) + 1;\n\n  return css`\n    position: fixed;\n    z-index: ${z};\n\n    &:not(:focus-within) {\n      ${hideVisually()}\n    }\n  `;\n});\n\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport default memo(() => {\n  const onClick = useCallback(() => {\n    const main = documentIsAvailable ? document.querySelector('main') : false;\n    if (!main) return;\n\n    const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce<HTMLHeadingElement | null>(\n      (el, tag) => el ?? main.querySelector<HTMLHeadingElement>(tag),\n      null\n    );\n\n    main.setAttribute('tabindex', '-1');\n    if (heading?.textContent) main.setAttribute('aria-label', heading.textContent);\n    main.style.outline = 'none';\n    main.focus();\n\n    main.addEventListener(\n      'focusout',\n      () => {\n        main.removeAttribute('tabindex');\n        main.removeAttribute('aria-label');\n        main.style.outline = '';\n      },\n      { once: true }\n    );\n  }, []);\n\n  return (\n    <StyledSkipNavigation\n      show\n      placement='bottom-end'\n      target={{\n        getBoundingClientRect() {\n          return {\n            height: 0,\n            width: 0,\n            x: 20,\n            y: 20,\n            top: 20,\n            bottom: 20,\n            left: 20,\n            right: 20\n          };\n        }\n      }}\n    >\n      <Menu\n        items={[\n          {\n            id: useUID(),\n            primary: useI18n()('go_to_main_content'),\n            onClick\n          }\n        ]}\n      />\n    </StyledSkipNavigation>\n  );\n});\n"]}