@pega/cosmos-react-core 9.0.0-build.2.4 → 9.0.0-build.2.6

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,QAAQ,SAAS,CAAC;AAC/B,eAAO,MAAM,YAAY,aAAa,CAAC;AACvC,eAAO,MAAM,YAAY,SAAS,CAAC;AAGnC,eAAO,MAAM,aAAa,uGA8CxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,eAAe;;uDAiB1B,CAAC;AAIH,eAAO,MAAM,yBAAyB,0GAOpC,CAAC;AAIH,eAAO,MAAM,+BAA+B,0KAAiB,CAAC;AAE9D,eAAO,MAAM,mBAAmB,0GAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,0GAe/B,CAAC;AAIH,eAAO,MAAM,YAAY;eAA2B,OAAO;aAAW,OAAO;SAgD5E,CAAC;AAIF,eAAO,MAAM,eAAe,4GAAkB,CAAC;AAE/C,eAAO,MAAM,gCAAgC;eAChC,OAAO;aACT,OAAO;SAwCjB,CAAC;AAIF,eAAO,MAAM,iBAAiB;yBACP,OAAO;kBACd,OAAO;SAmJrB,CAAC;AAIH,eAAO,MAAM,aAAa,wGAezB,CAAC;AAGF,eAAO,MAAM,kBAAkB,yGAQ7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,wGA+B9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGA2B1B,CAAC;AAIH,eAAO,MAAM,WAAW,yGAQtB,CAAC;AAIH,eAAO,MAAM,eAAe,4GAqB1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,aAAa;eACb,OAAO;eACP,OAAO;aACT,OAAO;mBACD,OAAO;mBACP,MAAM;SAwDrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAsBhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,oLA2BrC,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,QAAQ,SAAS,CAAC;AAC/B,eAAO,MAAM,YAAY,aAAa,CAAC;AACvC,eAAO,MAAM,YAAY,SAAS,CAAC;AAGnC,eAAO,MAAM,aAAa,uGA8CxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,eAAe;;uDAiB1B,CAAC;AAIH,eAAO,MAAM,yBAAyB,0GAOpC,CAAC;AAIH,eAAO,MAAM,+BAA+B,0KAAiB,CAAC;AAE9D,eAAO,MAAM,mBAAmB,0GAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,0GAe/B,CAAC;AAIH,eAAO,MAAM,YAAY;eAA2B,OAAO;aAAW,OAAO;SAgD5E,CAAC;AAIF,eAAO,MAAM,eAAe,4GAAkB,CAAC;AAE/C,eAAO,MAAM,gCAAgC;eAChC,OAAO;aACT,OAAO;SAwCjB,CAAC;AAIF,eAAO,MAAM,iBAAiB;yBACP,OAAO;kBACd,OAAO;SAmJrB,CAAC;AAIH,eAAO,MAAM,aAAa,wGAezB,CAAC;AAGF,eAAO,MAAM,kBAAkB,yGAQ7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,wGA+B9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGA2B1B,CAAC;AAIH,eAAO,MAAM,WAAW,yGAQtB,CAAC;AAIH,eAAO,MAAM,eAAe,4GAqB1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,aAAa;eACb,OAAO;eACP,OAAO;aACT,OAAO;mBACD,OAAO;mBACP,MAAM;SAyDrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAsBhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,oLA2BrC,CAAC"}

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

@@ -15,6 +15,7 @@ import { StyledTooltip } from '../Tooltip';
 import { StyledProgressBackdrop } from '../Progress';
 import Icon from '../Icon/Icon';
 import { StyledText } from '../Text';
+import { resizeDrawerMaxWidth } from '../../styles/constants';
 import AppShellContext from './AppShellContext';
 import { navContrastColors, pxToRem } from './style-utils';
 export const navWidth = '4rem';
@@ -475,7 +476,8 @@ export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, previ
 
       ${previewActive &&
         css `
-        margin-inline-end: clamp(21.875rem, (100vw - 31.25rem) / 10 + 21.875rem, 31.25rem);
+        transition: none;
+        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
       `}
     }
   `;

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":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { darken, getContrast, lighten, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { Count } from '../Badges';\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  calculateBackgroundAndContrastColor,\n  readableColor\n} from '../../styles';\nimport { StyledMenuItem } from '../Menu/Menu.styles';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledTooltip } from '../Tooltip';\nimport { StyledProgressBackdrop } from '../Progress';\nimport Icon from '../Icon/Icon';\nimport { StyledText } from '../Text';\n\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const navWidth = '4rem';\nexport const navOpenWidth = '18.75rem';\nexport const headerHeight = '3rem';\nconst iconWidth = '1.125rem';\n\nexport const StyledAppInfo = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(${navWidth} / 4);\n    grid-template-columns: calc(${navWidth} / 2) auto;\n    column-gap: calc(${navWidth} / 4);\n    vertical-align: middle;\n\n    &:hover,\n    button&:hover {\n      background-color: ${hoverBg};\n      text-decoration: none;\n    }\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n      margin-inline-end: calc(${theme.base.spacing} * 2);\n      vertical-align: middle;\n    }\n\n    span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      vertical-align: middle;\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: ${foreground};\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${foreground};\n      margin-inline-end: calc(${theme.base.spacing});\n      vertical-align: middle;\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: auto;\n    @media (height <= ${theme.base.breakpoints.sm}) {\n      overflow: visible;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)(({\n  theme: {\n    base: { spacing },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  }\n}) => {\n  const insetInlineStartOffsetMultiplier = detached ? 3 : 4;\n  return css`\n    position: absolute;\n    inset-inline-start: calc(${insetInlineStartOffsetMultiplier} * ${spacing});\n    top: calc(0.5 * ${spacing});\n    padding: 0 calc(0.5 * ${spacing});\n  `;\n});\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSingleSelectIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItemExpandCollapse = styled(Icon)``;\n\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledNavItemIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {\n      margin-inline: calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2);\n    }\n\n    ${StyledAvatar} {\n      margin-inline: calc(\n        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2\n      );\n      margin-block: calc(0.5 * ${theme.base.spacing});\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledNavItemIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; showEnv: boolean }>(\n  ({ appHeader, showEnv, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n\n    const navBg = theme.components['app-shell'].nav.background;\n    const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(navBg, navFgColor);\n\n    return css`\n      position: fixed;\n      z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      background: ${navBg};\n      color: ${foregroundColor};\n      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});\n      width: ${navOpen ? navOpenWidth : navWidth};\n      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});\n      overflow: hidden;\n      white-space: nowrap;\n      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n      padding-block-end: ${theme.base.spacing};\n      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};\n      border-color: ${theme.components['app-shell'].nav['border-color']};\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\n      }\n\n      @media (height <= ${theme.base.breakpoints.sm}) {\n        overflow: auto;\n      }\n\n      /* App navigation can be focused with shortcut */\n      :focus-visible {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${theme.base['custom-scrollbar'] &&\n      css`\n        * {\n          scrollbar-width: thin;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppNav.defaultProps = defaultThemeProp;\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItemVisualContainer = styled.div<{\n  isCurrent: boolean;\n  navOpen: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    },\n    isCurrent,\n    navOpen\n  }) => {\n    return css`\n      max-width: ${navWidth};\n      padding-block: calc(var(--nav-padding) / 8);\n      padding-inline: var(--nav-padding);\n\n      ${!navOpen &&\n      detached &&\n      css`\n        padding-inline: 0;\n        width: calc(${navWidth} - 2 * var(--nav-padding));\n        margin: auto;\n      `}\n\n      & > ${StyledText} {\n        padding-inline: ${isCurrent\n          ? `${spacing} calc(0.5 * ${spacing})`\n          : `calc(0.5 * ${spacing})`};\n\n        ${!navOpen &&\n        detached &&\n        css`\n          padding-inline: 0;\n        `}\n      }\n    `;\n  }\n);\n\nStyledNavListItemVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{\n  nestedListCollapsed: boolean;\n  singleSelect: boolean;\n}>(({ theme, nestedListCollapsed, singleSelect }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': semiBold }\n    },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const { rtl } = useDirection();\n\n  return css`\n    display: block;\n    position: relative;\n\n    ${StyledIcon} {\n      font-size: 1.25rem;\n    }\n\n    ${StyledCaseClose} {\n      display: flex;\n      position: absolute;\n      opacity: 0;\n      left: ${navOpen ? 'auto' : '100%'};\n      top: 50%;\n      bottom: 50%;\n      margin: auto 0;\n      color: ${foreground};\n      transition-property: transform, opacity;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n      ${navOpen &&\n      css`\n        inset-inline-end: 1rem;\n\n        &:hover,\n        &:focus {\n          opacity: 1;\n        }\n      `}\n    }\n    padding: calc(var(--nav-padding) / 8) var(--nav-padding);\n    ${!navOpen &&\n    detached &&\n    css`\n      padding-inline: 0;\n      width: calc(${navWidth} - 2 * var(--nav-padding));\n      margin: auto;\n    `}\n\n    > :first-child {\n      position: relative;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding: calc(1.25 * ${theme.base.spacing}) 0;\n      white-space: nowrap;\n      color: ${foreground};\n      cursor: pointer;\n      text-decoration: none;\n      border-block: ${pxToRem(1)} solid transparent;\n      ${detached &&\n      css`\n        border-radius: ${theme.base['border-radius']};\n      `}\n      span:not(${StyledCountIcon}) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: inherit;\n        white-space: nowrap;\n      }\n\n      &:hover,\n      &:focus {\n        color: ${foreground};\n        background: ${transparentize(0.9, foreground)};\n      }\n\n      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {\n        ${navOpen &&\n        css`\n          opacity: 1;\n        `}\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${StyledNavListItemExpandCollapse} {\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        margin: 0;\n        opacity: ${navOpen ? '1' : '0'};\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n\n        ${!nestedListCollapsed &&\n        css`\n          transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n        `}\n      }\n\n      ${singleSelect &&\n      css`\n        ${StyledNavItemIconBox} > ${StyledIcon} {\n          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));\n        }\n      `}\n\n      ${StyledSingleSelectIconBox} + span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    }\n\n    [aria-current='page'],\n    [aria-expanded='false']:has(+ ul [aria-current='page']) {\n      position: relative;\n      font-weight: ${semiBold};\n      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};\n      background: ${transparentize(0.85, foreground)};\n      ${!detached &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          width: ${pxToRem(4)};\n          inset-inline-start: 0;\n          top: 0;\n          bottom: 0;\n          background-color: ${foreground};\n        }\n      `}\n    }\n  `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    }\n  }) => {\n    return css`\n      --nav-padding: ${detached ? spacing : '0px'};\n    `;\n  }\n);\nStyledNavList.defaultProps = defaultThemeProp;\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 {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { nestedList } = navContrastColors(theme);\n\n  return css`\n    background: ${nestedList};\n    border-radius: ${detached ? borderRadius : '0px'};\n    padding-block: var(--nav-padding);\n\n    ${StyledNavListItem} {\n      > :first-child {\n        &:has(${StyledIcon}) {\n          padding-inline-start: calc(\n            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconWidth}\n          );\n        }\n\n        &:not(:has(${StyledIcon})) {\n          padding-inline-start: calc(${navWidth} - 3 * var(--nav-padding));\n        }\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        animation: {\n          speed,\n          timing: { ease: acceleration }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    button {\n      ${StyledNavItemIconBox} {\n        transition: transform ${speed} ${acceleration};\n      }\n\n      &[aria-expanded='false'] ${StyledNavItemIconBox} {\n        transform: none;\n      }\n\n      &[aria-expanded='true'] ${StyledNavItemIconBox} {\n        transform: rotateZ(45deg);\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};\n\n    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {\n      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header(({ theme }) => {\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    min-width: 100%;\n    min-height: ${headerHeight};\n    z-index: ${theme.base['z-index'].drawer};\n    background: ${mobileNavColor};\n    color: ${foreground};\n    padding-inline-start: ${theme.base.spacing};\n\n    @media (pointer: coarse) {\n      padding-inline-start: 0;\n    }\n\n    @media (height >= ${theme.base.breakpoints.sm}) {\n      inset-block-start: 0;\n      position: sticky;\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  navOpen: boolean;\n  previewActive: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {\n  const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';\n  const appBackground = theme.base.palette['app-background'];\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --appshell-horizontal-offset: 0rem;\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};\n    }\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset});\n    background: ${appBackground};\n\n    :focus {\n      outline: none;\n    }\n\n    ${navOpen &&\n    !mobileNav &&\n    css`\n      margin-inline-start: ${navOpenWidth};\n    `}\n\n    ${!mobileNav &&\n    css`\n      transition: margin-inline-start\n        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n    `}\n\n    & > ${StyledProgressBackdrop} {\n      max-height: calc(100vh - ${heightOffset});\n      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});\n      inset-block-start: ${heightOffset};\n      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};\n      position: fixed;\n      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${previewActive &&\n      css`\n        margin-inline-end: clamp(21.875rem, (100vw - 31.25rem) / 10 + 21.875rem, 31.25rem);\n      `}\n    }\n  `;\n});\n\nStyledAppMain.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {\n  const bg = theme.components.tooltip['background-color'];\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    padding: 0;\n    header {\n      color: ${color};\n      border-bottom: none;\n    }\n    ${StyledMenuItem} {\n      background-color: ${bg};\n      color: ${color};\n\n      &:hover,\n      &:focus {\n        background-color: ${bg};\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledAppShellTooltip.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  let bg = darken(0.2, backgroundColor);\n\n  if (getContrast(backgroundColor, bg) < 1.3) {\n    bg = lighten(0.2, backgroundColor);\n  }\n\n  return css`\n    background: ${bg};\n    color: ${navFgColor};\n    border: none;\n    margin-top: calc(1 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n"]}
+{"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,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,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,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,mCAAmC,EACnC,aAAa,EACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC/B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAAC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,SAAS,GAAG,UAAU,CAAC;AAE7B,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO,SAAS,QAAQ;kCAChB,QAAQ;uBACnB,QAAQ;;;;;0BAKL,OAAO;;;;;;oBAMb,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;MAG9C,WAAW;;oBAEG,QAAQ;gCACI,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;mBAW/B,QAAQ,CAAC,EAAE;eACf,UAAU;;;;mBAIN,QAAQ,CAAC,CAAC;eACd,UAAU;gCACO,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;GAI9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAC5C,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,EACF,EAAE,EAAE;IACH,MAAM,gCAAgC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,OAAO,GAAG,CAAA;;+BAEmB,gCAAgC,MAAM,OAAO;sBACtD,OAAO;4BACD,OAAO;GAChC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;cAEE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;aACpC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;oCACZ,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,+BAA+B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;QAEJ,UAAU,KAAK,mBAAmB,MAAM,UAAU;6BAC7B,QAAQ,MAAM,SAAS;;;MAG9C,YAAY;;WAEP,QAAQ,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;iCAE3B,KAAK,CAAC,IAAI,CAAC,OAAO;qBAC9B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAEzE,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;sBAEQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;oBAChC,KAAK;eACV,eAAe;gCACE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;eACpD,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;2BAClE,KAAK,CAAC,IAAI,CAAC,OAAO;2BAClB,OAAO,CAAC,CAAC,CAAC,UAAU,cAAc,CAAC,GAAG,EAAE,MAAM,CAAC;sBACpD,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC;QAC/D,CAAC,OAAO;QACV,GAAG,CAAA;+BACsB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC1C;;kCAE2B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;0BAG5C,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;;sBAM7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;QAG9C,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChC,GAAG,CAAA;;;;OAIF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAIxD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,EACD,SAAS,EACT,OAAO,EACR,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;mBACK,QAAQ;;;;QAInB,CAAC,OAAO;QACV,QAAQ;QACR,GAAG,CAAA;;sBAEa,QAAQ;;OAEvB;;YAEK,UAAU;0BACI,SAAS;QACzB,CAAC,CAAC,GAAG,OAAO,eAAe,OAAO,GAAG;QACrC,CAAC,CAAC,cAAc,OAAO,GAAG;;UAE1B,CAAC,OAAO;QACV,QAAQ;QACR,GAAG,CAAA;;SAEF;;KAEJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gCAAgC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAGvC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,EAAE,EAAE;IAClD,MAAM,EACJ,IAAI,EAAE,EACJ,aAAa,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EACzC,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;MAIN,UAAU;;;;MAIV,eAAe;;;;cAIP,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;eAIxB,UAAU;;6BAEI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;oCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QAC5D,OAAO;QACT,GAAG,CAAA;;;;;;;OAOF;;;MAGD,CAAC,OAAO;QACV,QAAQ;QACR,GAAG,CAAA;;oBAEa,QAAQ;;KAEvB;;;;;;;6BAOwB,KAAK,CAAC,IAAI,CAAC,OAAO;;eAEhC,UAAU;;;sBAGH,OAAO,CAAC,CAAC,CAAC;QACxB,QAAQ;QACV,GAAG,CAAA;yBACgB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;OAC7C;iBACU,eAAe;;;;;;;;;iBASf,UAAU;sBACL,cAAc,CAAC,GAAG,EAAE,UAAU,CAAC;;;kBAGnC,eAAe,eAAe,eAAe;UACrD,OAAO;QACT,GAAG,CAAA;;SAEF;;;;;sBAKa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;QAG9C,+BAA+B;;gBAEvB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;UAC/B,OAAO;QACT,GAAG,CAAA;;SAEF;;mBAEU,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;+BAEP,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;sCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;UAE5D,CAAC,mBAAmB;QACtB,GAAG,CAAA;+BACoB,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SAC9C;;;QAGD,YAAY;QACd,GAAG,CAAA;UACC,oBAAoB,MAAM,UAAU;gCACd,KAAK,CAAC,IAAI,CAAC,OAAO;;OAE3C;;QAEC,yBAAyB;+BACF,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;qBAO5B,QAAQ;sBACP,OAAO,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC;oBACvE,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC;QAC5C,CAAC,QAAQ;QACX,GAAG,CAAA;;;;mBAIU,OAAO,CAAC,CAAC,CAAC;;;;8BAIC,UAAU;;OAEjC;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;uBACS,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;KAC5C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,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;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,EACJ,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACvC,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,QAAQ,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,GAAG,CAAA;kBACM,UAAU;qBACP,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK;;;MAG9C,iBAAiB;;gBAEP,UAAU;;gBAEV,QAAQ,iCAAiC,SAAS,YAAY,SAAS;;;;qBAIlE,UAAU;uCACQ,QAAQ;;;;GAI5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAChD,MAAM,EACJ,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;;QAEJ,oBAAoB;gCACI,KAAK,IAAI,YAAY;;;iCAGpB,oBAAoB;;;;gCAIrB,oBAAoB;;;;GAIjD,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,OAAO,GAAG,CAAA;kCACsB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC;;MAE7E,gBAAgB,MAAM,UAAU,iBAAiB,gBAAgB,MAAM,mBAAmB;wBACxE,QAAQ,MAAM,SAAS;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IACpE,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,GAAG,CAAA;;kBAEM,YAAY;eACf,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;kBACzB,cAAc;aACnB,UAAU;4BACK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;wBAMtB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;GAI9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAMrC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/E,MAAM,YAAY,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC;IACpE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAE3D,OAAO,GAAG,CAAA;yBACa,YAAY;;;;yBAIZ,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;sCACZ,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;;;2BAG5C,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ;+BACpB,YAAY;kBACzB,aAAa;;;;;;MAMzB,OAAO;QACT,CAAC,SAAS;QACV,GAAG,CAAA;6BACsB,YAAY;KACpC;;MAEC,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;;UAEK,sBAAsB;iCACC,YAAY;gCACb,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;2BACtC,YAAY;4BACX,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;;;6BAGhC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;oCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;yBAG3C,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;sCACZ,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;6BAClD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;oCACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;QAE5D,aAAa;QACf,GAAG,CAAA;;6DAEoD,oBAAoB;OAC1E;;GAEJ,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,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;IAEhC,OAAO,GAAG,CAAA;wBACY,EAAE;;;eAGX,KAAK;;;MAGd,cAAc;0BACM,EAAE;eACb,KAAK;;;;4BAIQ,EAAE;sBACR,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAG1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACnF,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAEtC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC;QAC3C,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,GAAG,CAAA;kBACM,EAAE;aACP,UAAU;;2BAEI,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEvC,UAAU;;;;;;;;oBAQI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { darken, getContrast, lighten, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { Count } from '../Badges';\nimport { StyledAvatar } from '../Avatar';\nimport { StyledIcon } from '../Icon';\nimport { StyledImage } from '../Image/Image';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  calculateBackgroundAndContrastColor,\n  readableColor\n} from '../../styles';\nimport { StyledMenuItem } from '../Menu/Menu.styles';\nimport { useDirection } from '../../hooks';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledTooltip } from '../Tooltip';\nimport { StyledProgressBackdrop } from '../Progress';\nimport Icon from '../Icon/Icon';\nimport { StyledText } from '../Text';\nimport { resizeDrawerMaxWidth } from '../../styles/constants';\n\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const navWidth = '4rem';\nexport const navOpenWidth = '18.75rem';\nexport const headerHeight = '3rem';\nconst iconWidth = '1.125rem';\n\nexport const StyledAppInfo = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(${navWidth} / 4);\n    grid-template-columns: calc(${navWidth} / 2) auto;\n    column-gap: calc(${navWidth} / 4);\n    vertical-align: middle;\n\n    &:hover,\n    button&:hover {\n      background-color: ${hoverBg};\n      text-decoration: none;\n    }\n\n    &:focus:not([disabled]) {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledImage} {\n      display: inline-block;\n      width: calc(${navWidth} / 2);\n      margin-inline-end: calc(${theme.base.spacing} * 2);\n      vertical-align: middle;\n    }\n\n    span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      vertical-align: middle;\n    }\n\n    span:last-of-type {\n      font-size: ${fontSize.xs};\n      color: ${foreground};\n    }\n\n    span:first-of-type {\n      font-size: ${fontSize.s};\n      color: ${foreground};\n      margin-inline-end: calc(${theme.base.spacing});\n      vertical-align: middle;\n    }\n  `;\n});\n\nStyledAppInfo.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    overflow-x: hidden;\n    overflow-y: auto;\n    @media (height <= ${theme.base.breakpoints.sm}) {\n      overflow: visible;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)(({\n  theme: {\n    base: { spacing },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  }\n}) => {\n  const insetInlineStartOffsetMultiplier = detached ? 3 : 4;\n  return css`\n    position: absolute;\n    inset-inline-start: calc(${insetInlineStartOffsetMultiplier} * ${spacing});\n    top: calc(0.5 * ${spacing});\n    padding: 0 calc(0.5 * ${spacing});\n  `;\n});\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSingleSelectIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItemExpandCollapse = styled(Icon)``;\n\nexport const StyledUtilIconCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledNavItemIconBox = styled.span(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {\n      margin-inline: calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2);\n    }\n\n    ${StyledAvatar} {\n      margin-inline: calc(\n        (${navWidth} - ${theme.base['hit-area']['mouse-min']} - 2 * var(--nav-padding)) / 2\n      );\n      margin-block: calc(0.5 * ${theme.base.spacing});\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledNavItemIconBox.defaultProps = defaultThemeProp;\n\nexport const StyledAppNav = styled.nav<{ appHeader: boolean; showEnv: boolean }>(\n  ({ appHeader, showEnv, theme }) => {\n    const { navOpen } = useContext(AppShellContext);\n\n    const navBg = theme.components['app-shell'].nav.background;\n    const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(navBg, navFgColor);\n\n    return css`\n      position: fixed;\n      z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      background: ${navBg};\n      color: ${foregroundColor};\n      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});\n      width: ${navOpen ? navOpenWidth : navWidth};\n      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});\n      overflow: hidden;\n      white-space: nowrap;\n      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n      padding-block-end: ${theme.base.spacing};\n      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};\n      border-color: ${theme.components['app-shell'].nav['border-color']};\n      ${!showEnv &&\n      css`\n        padding-block-start: ${theme.base.spacing};\n      `}\n      @media (pointer: coarse) {\n        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});\n      }\n\n      @media (height <= ${theme.base.breakpoints.sm}) {\n        overflow: auto;\n      }\n\n      /* App navigation can be focused with shortcut */\n      :focus-visible {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${theme.base['custom-scrollbar'] &&\n      css`\n        * {\n          scrollbar-width: thin;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppNav.defaultProps = defaultThemeProp;\n\nexport const StyledCaseClose = styled.button``;\n\nexport const StyledNavListItemVisualContainer = styled.div<{\n  isCurrent: boolean;\n  navOpen: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    },\n    isCurrent,\n    navOpen\n  }) => {\n    return css`\n      max-width: ${navWidth};\n      padding-block: calc(var(--nav-padding) / 8);\n      padding-inline: var(--nav-padding);\n\n      ${!navOpen &&\n      detached &&\n      css`\n        padding-inline: 0;\n        width: calc(${navWidth} - 2 * var(--nav-padding));\n        margin: auto;\n      `}\n\n      & > ${StyledText} {\n        padding-inline: ${isCurrent\n          ? `${spacing} calc(0.5 * ${spacing})`\n          : `calc(0.5 * ${spacing})`};\n\n        ${!navOpen &&\n        detached &&\n        css`\n          padding-inline: 0;\n        `}\n      }\n    `;\n  }\n);\n\nStyledNavListItemVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{\n  nestedListCollapsed: boolean;\n  singleSelect: boolean;\n}>(({ theme, nestedListCollapsed, singleSelect }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': semiBold }\n    },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const { rtl } = useDirection();\n\n  return css`\n    display: block;\n    position: relative;\n\n    ${StyledIcon} {\n      font-size: 1.25rem;\n    }\n\n    ${StyledCaseClose} {\n      display: flex;\n      position: absolute;\n      opacity: 0;\n      left: ${navOpen ? 'auto' : '100%'};\n      top: 50%;\n      bottom: 50%;\n      margin: auto 0;\n      color: ${foreground};\n      transition-property: transform, opacity;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n      ${navOpen &&\n      css`\n        inset-inline-end: 1rem;\n\n        &:hover,\n        &:focus {\n          opacity: 1;\n        }\n      `}\n    }\n    padding: calc(var(--nav-padding) / 8) var(--nav-padding);\n    ${!navOpen &&\n    detached &&\n    css`\n      padding-inline: 0;\n      width: calc(${navWidth} - 2 * var(--nav-padding));\n      margin: auto;\n    `}\n\n    > :first-child {\n      position: relative;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding: calc(1.25 * ${theme.base.spacing}) 0;\n      white-space: nowrap;\n      color: ${foreground};\n      cursor: pointer;\n      text-decoration: none;\n      border-block: ${pxToRem(1)} solid transparent;\n      ${detached &&\n      css`\n        border-radius: ${theme.base['border-radius']};\n      `}\n      span:not(${StyledCountIcon}) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: inherit;\n        white-space: nowrap;\n      }\n\n      &:hover,\n      &:focus {\n        color: ${foreground};\n        background: ${transparentize(0.9, foreground)};\n      }\n\n      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {\n        ${navOpen &&\n        css`\n          opacity: 1;\n        `}\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n\n      ${StyledNavListItemExpandCollapse} {\n        position: absolute;\n        left: ${navOpen ? 'auto' : '100%'};\n        ${navOpen &&\n        css`\n          inset-inline-end: 1rem;\n        `}\n        margin: 0;\n        opacity: ${navOpen ? '1' : '0'};\n        transition-property: transform, opacity;\n        transition-duration: ${theme.base.animation.speed};\n        transition-timing-function: ${theme.base.animation.timing.ease};\n\n        ${!nestedListCollapsed &&\n        css`\n          transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n        `}\n      }\n\n      ${singleSelect &&\n      css`\n        ${StyledNavItemIconBox} > ${StyledIcon} {\n          margin-inline: calc(${theme.base.spacing} - var(--nav-padding));\n        }\n      `}\n\n      ${StyledSingleSelectIconBox} + span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    }\n\n    [aria-current='page'],\n    [aria-expanded='false']:has(+ ul [aria-current='page']) {\n      position: relative;\n      font-weight: ${semiBold};\n      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};\n      background: ${transparentize(0.85, foreground)};\n      ${!detached &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          width: ${pxToRem(4)};\n          inset-inline-start: 0;\n          top: 0;\n          bottom: 0;\n          background-color: ${foreground};\n        }\n      `}\n    }\n  `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        'app-shell': {\n          nav: { detached }\n        }\n      }\n    }\n  }) => {\n    return css`\n      --nav-padding: ${detached ? spacing : '0px'};\n    `;\n  }\n);\nStyledNavList.defaultProps = defaultThemeProp;\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 {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = theme;\n\n  const { nestedList } = navContrastColors(theme);\n\n  return css`\n    background: ${nestedList};\n    border-radius: ${detached ? borderRadius : '0px'};\n    padding-block: var(--nav-padding);\n\n    ${StyledNavListItem} {\n      > :first-child {\n        &:has(${StyledIcon}) {\n          padding-inline-start: calc(\n            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconWidth}\n          );\n        }\n\n        &:not(:has(${StyledIcon})) {\n          padding-inline-start: calc(${navWidth} - 3 * var(--nav-padding));\n        }\n      }\n    }\n  `;\n});\n\nStyledNestedNavList.defaultProps = defaultThemeProp;\n\nexport const StyledCaseTypes = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        animation: {\n          speed,\n          timing: { ease: acceleration }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    button {\n      ${StyledNavItemIconBox} {\n        transition: transform ${speed} ${acceleration};\n      }\n\n      &[aria-expanded='false'] ${StyledNavItemIconBox} {\n        transform: none;\n      }\n\n      &[aria-expanded='true'] ${StyledNavItemIconBox} {\n        transform: rotateZ(45deg);\n      }\n    }\n  `;\n});\n\nStyledCaseTypes.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};\n\n    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {\n      margin: 0 calc((${navWidth} - ${iconWidth}) / 2);\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.header(({ theme }) => {\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    min-width: 100%;\n    min-height: ${headerHeight};\n    z-index: ${theme.base['z-index'].drawer};\n    background: ${mobileNavColor};\n    color: ${foreground};\n    padding-inline-start: ${theme.base.spacing};\n\n    @media (pointer: coarse) {\n      padding-inline-start: 0;\n    }\n\n    @media (height >= ${theme.base.breakpoints.sm}) {\n      inset-block-start: 0;\n      position: sticky;\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledLoading = styled.div`\n  font-size: 2rem;\n`;\n\nexport const StyledAppMain = styled.main<{\n  appHeader: boolean;\n  mobileNav: boolean;\n  navOpen: boolean;\n  previewActive: boolean;\n  headerOffset?: number;\n}>(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {\n  const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';\n  const appBackground = theme.base.palette['app-background'];\n\n  return css`\n    --appshell-offset: ${headerOffset}px;\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --appshell-horizontal-offset: 0rem;\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};\n    }\n    position: relative;\n    margin-inline-start: ${mobileNav ? 0 : navWidth};\n    min-height: calc(100vh - ${heightOffset});\n    background: ${appBackground};\n\n    :focus {\n      outline: none;\n    }\n\n    ${navOpen &&\n    !mobileNav &&\n    css`\n      margin-inline-start: ${navOpenWidth};\n    `}\n\n    ${!mobileNav &&\n    css`\n      transition: margin-inline-start\n        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};\n    `}\n\n    & > ${StyledProgressBackdrop} {\n      max-height: calc(100vh - ${heightOffset});\n      max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});\n      inset-block-start: ${heightOffset};\n      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};\n      position: fixed;\n      transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};\n      transition-duration: ${theme.base.animation.speed};\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      ${previewActive &&\n      css`\n        transition: none;\n        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n      `}\n    }\n  `;\n});\n\nStyledAppMain.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {\n  const bg = theme.components.tooltip['background-color'];\n  const color = readableColor(bg);\n\n  return css`\n    background-color: ${bg};\n    padding: 0;\n    header {\n      color: ${color};\n      border-bottom: none;\n    }\n    ${StyledMenuItem} {\n      background-color: ${bg};\n      color: ${color};\n\n      &:hover,\n      &:focus {\n        background-color: ${bg};\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\n\nStyledAppShellTooltip.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  let bg = darken(0.2, backgroundColor);\n\n  if (getContrast(backgroundColor, bg) < 1.3) {\n    bg = lighten(0.2, backgroundColor);\n  }\n\n  return css`\n    background: ${bg};\n    color: ${navFgColor};\n    border: none;\n    margin-top: calc(1 * ${theme.base.spacing});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      font-weight: bold;\n    }\n\n    &:enabled:focus,\n    :not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AAqFH,wBAAqD"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,iBAAiB,EACjB,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAgBhF,eAAO,MAAM,iBAAiB,kKAQ7B,CAAC;AAEF,eAAO,MAAM,YAAY;aAEZ,OAAO;qBACC,OAAO;SAyE3B,CAAC;AAIF,eAAO,MAAM,YAAY;;0FA6BvB,CAAC;;;;AA+FH,wBAAqD"}

package/lib/components/Avatar/Avatar.js

@@ -114,9 +114,14 @@ StyledStatus.defaultProps = defaultThemeProp;
  * @param size
  */
 const getInitials = (name, size) => {
-    const words = name.split(' ');
-    const firstInitial = words[0][0];
-    return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;
+    if (!name) {
+        return '';
+    }
+    if (size === 's') {
+        return name[0];
+    }
+    const words = name.split(/\s+/);
+    return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;
 };
 /**
  * Generally, avatars are used to distinguish between different operators and
@@ -124,7 +129,8 @@ const getInitials = (name, size) => {
  * can upload a custom avatar of their choice.
  */
 const Avatar = forwardRef(function Avatar(props, ref) {
-    const { testId, shape = 'circle', size = 'm', imageSrc, icon, name, status, onImageError, ...restProps } = props;
+    const { testId, shape = 'circle', size = 'm', imageSrc, icon, name: nameProp, status, onImageError, ...restProps } = props;
+    const name = nameProp.trim();
     const [hasBrokenImage, setHasBrokenImage] = useState();
     const t = useI18n();
     const testIds = useTestIds(testId, getAvatarTestIds);

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        avatar: { 'background-color': avatarBackground },\n        icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n      }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatarBackground\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n  size,\n  theme\n}) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0][0];\n\n  return words.length === 1 || size === 's' ? firstInitial : `${firstInitial}${words[1][0]}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: AvatarProps['ref']\n) {\n  const {\n    testId,\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAvatarTestIds);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      data-testid={testIds.root}\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <StyledStatus size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /** Optional color for the icon to be rendered */\n  color?: string;\n  /** Optional background color for the avatar. Will be auto computed if not passed */\n  backgroundColor?: string;\n  /**\n   * Shape of the Avatar.\n   * @default 'circle'\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default 'm'\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5,\n  xl: 4\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1,\n  xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n  height: fit-content;\n  width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    color,\n    backgroundColor,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        avatar: { 'background-color': avatarBackground },\n        icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n      }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    let bgColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor || avatarBackground;\n    if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n      bgColor = tryCatch(\n        () => readableColor(color),\n        () => avatarBackground\n      );\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const iconColor = color || tryCatch(() => readableColor(bgColor));\n\n    return css`\n      position: relative;\n      flex-shrink: 0;\n      background-color: ${bgColor};\n      color: ${iconColor};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      vertical-align: top;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n  size,\n  theme\n}) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  if (!name) {\n    return '';\n  }\n\n  if (size === 's') {\n    return name[0];\n  }\n\n  const words = name.split(/\\s+/);\n\n  return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n  props: PropsWithoutRef<AvatarProps>,\n  ref: AvatarProps['ref']\n) {\n  const {\n    testId,\n    shape = 'circle',\n    size = 'm',\n    imageSrc,\n    icon,\n    name: nameProp,\n    status,\n    onImageError,\n    ...restProps\n  } = props;\n\n  const name = nameProp.trim();\n\n  const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAvatarTestIds);\n\n  useEffect(() => {\n    setHasBrokenImage(undefined);\n  }, [imageSrc]);\n\n  const content = useMemo(() => {\n    if (icon) {\n      return <Icon name={icon} />;\n    }\n    if (imageSrc && !hasBrokenImage) {\n      return (\n        <StyledAvatarImage\n          src={imageSrc}\n          alt={name}\n          onError={(e: SyntheticEvent<HTMLImageElement>) => {\n            setHasBrokenImage(true);\n            onImageError?.(e);\n          }}\n          onLoad={() => {\n            setHasBrokenImage(false);\n          }}\n        />\n      );\n    }\n    return getInitials(name, size);\n  }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n  return (\n    <StyledAvatar\n      data-testid={testIds.root}\n      role='img'\n      hasSrc={!!imageSrc}\n      hasBrokenImage={hasBrokenImage}\n      shape={shape}\n      size={size}\n      ref={ref}\n      aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n      {...restProps}\n    >\n      {content}\n      {status === 'active' && <StyledStatus size={size} variant='success' />}\n    </StyledAvatar>\n  );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}

package/lib/components/Banner/Banner.js

@@ -115,7 +115,7 @@ const prepareMessages = (messages, testId) => {
         if (typeof msg === 'string') {
             return [_jsx(BannerMessageItem, { label: msg })];
         }
-        if (msg.items) {
+        if (msg.items && msg.items.length > 0) {
             const { items, ...restMsg } = msg;
             const subMessages = prepareMessages(items, testId);
             return [_jsx(BannerMessageItem, { ...restMsg, testId: testId }), subMessages];

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';\nimport Flex from '../Flex';\nimport Text, { StyledText } from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\nimport { readableColor } from '../../styles';\n\nimport { getBannerTestIds } from './Banner.test-ids';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkIcon,\n  aiIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: string;\n      /**\n       * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n       * @default 'h2'\n       */\n      headingTag?: HeadingTag;\n      /** Pass one or more descriptive messages to inform the user. */\n      messages: (string | BannerMessage)[];\n      /** Callback when user explicitly dismisses the Banner. */\n      onDismiss?: MouseEventHandler;\n      /** Ref that can be used to access the imperative handle. */\n      handle?: Ref<BannerHandleValue>;\n    }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n      min-inline-size: 100%;\n      inline-size: 0;\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n\n      ${headingTag}${StyledText} {\n        word-break: break-word;\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    let heading = headingText;\n    let icon: string;\n    let role: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading ??= t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading ??= t('warning');\n        icon = 'diamond-minus';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading ??= t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading ??= t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 && !firstMessageHasChildren && headingText === undefined ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent expandable>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n            >\n              <Grid\n                data-testid={testIds.heading}\n                container={{\n                  cols: 'fit-content(100%) max-content',\n                  gap: 0.5,\n                  alignItems: 'center'\n                }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  data-testid={testIds.expandCollapse}\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                  aria-expanded={!collapsed}\n                  variant='simple'\n                  icon\n                  ref={expandCollapseBtnRef}\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    data-testid={testIds.dismiss}\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef, Fragment, useMemo, useImperativeHandle, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  ForwardProps,\n  HeadingTag,\n  NoChildrenProp,\n  OmitStrict,\n  RefElement,\n  TestIdProp,\n  WithAttributes\n} from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds } from '../../hooks';\nimport Flex from '../Flex';\nimport Text, { StyledText } from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as aiIcon from '../Icon/icons/polaris-solid.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\nimport { readableColor } from '../../styles';\n\nimport { getBannerTestIds } from './Banner.test-ids';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  diamondMinusIcon,\n  informationSolidIcon,\n  checkIcon,\n  aiIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\ntype Label =\n  | string\n  | {\n      text: string;\n      onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n      href?: string;\n    };\n\nexport interface BannerMessage {\n  label: Label | Label[];\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport type BannerProps = WithAttributes<\n  'div',\n  TestIdProp &\n    NoChildrenProp & {\n      /** Controls the styling of the Banner. */\n      variant: 'urgent' | 'warning' | 'success' | 'info' | 'ai';\n      /** Custom heading text. Default varies by variant. */\n      headingText?: string;\n      /**\n       * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n       * @default 'h2'\n       */\n      headingTag?: HeadingTag;\n      /** Pass one or more descriptive messages to inform the user. */\n      messages: (string | BannerMessage)[];\n      /** Callback when user explicitly dismisses the Banner. */\n      onDismiss?: MouseEventHandler;\n      /** Ref that can be used to access the imperative handle. */\n      handle?: Ref<BannerHandleValue>;\n    }\n>;\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n      min-inline-size: 100%;\n      inline-size: 0;\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n\n      ${headingTag}${StyledText} {\n        word-break: break-word;\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2.125rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ expandable?: boolean }>(({ expandable, theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(${expandable ? 0.5 : 2} * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  TestIdProp & OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(function BannerMessageItem({ testId, label, description, action, ...restProps }, ref) {\n  const testIds = useTestIds(testId, getBannerTestIds);\n\n  const labelArray = Array.isArray(label) ? label : [label];\n\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span data-testid={testIds.messageLabel}>\n        {labelArray.map((item, idx) =>\n          typeof item === 'string' ? (\n            // eslint-disable-next-line react/no-array-index-key\n            <Fragment key={idx}>{item}</Fragment>\n          ) : (\n            // eslint-disable-next-line react/no-array-index-key\n            <Button variant='link' href={item.href} onClick={item.onClick} key={idx}>\n              {item.text}\n            </Button>\n          )\n        )}\n      </span>\n      {description && (\n        <>\n          {' '}\n          <Text data-testid={testIds.messageDescription} variant='secondary'>\n            {description}\n          </Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button\n              data-testid={testIds.messageAction}\n              variant='link'\n              href={action.href}\n              onClick={action.onClick}\n              {...action}\n            >\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[],\n  testId: TestIdProp['testId']\n): ReactNode[] => {\n  return messages.flatMap(msg => {\n    if (typeof msg === 'string') {\n      return [<BannerMessageItem label={msg} />];\n    }\n\n    if (msg.items && msg.items.length > 0) {\n      const { items, ...restMsg } = msg;\n      const subMessages = prepareMessages(items, testId);\n      return [<BannerMessageItem {...restMsg} testId={testId} />, subMessages];\n    }\n\n    return [<BannerMessageItem {...msg} testId={testId} />];\n  });\n};\n\nexport default withTestIds(\n  forwardRef<RefElement<BannerProps>, PropsWithoutRef<BannerProps>>(function Banner(\n    { testId, variant, headingText, headingTag = 'h2', messages, onDismiss, handle, ...restProps },\n    ref\n  ) {\n    const testIds = useTestIds(testId, getBannerTestIds);\n    const messagesToRender = useMemo(() => prepareMessages(messages, testId), [messages]);\n    const firstMessageHasChildren =\n      messages.length > 0 &&\n      typeof messages[0] === 'object' &&\n      Array.isArray(messages[0].items) &&\n      messages[0].items.length > 0;\n    const count = messages.length;\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n\n    let heading = headingText;\n    let icon: string;\n    let role: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading ??= t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading ??= t('warning');\n        icon = 'diamond-minus';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading ??= t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'ai':\n        heading ??= t('ai_generated');\n        icon = 'polaris-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading ??= t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          // Empty timeout ensures that the banner will take focus after any other programmatic focus events\n          setTimeout(() => {\n            if (expandCollapseBtnRef.current) {\n              expandCollapseBtnRef.current.focus();\n            } else if (bannerRef.current) {\n              focusHeadingOrContainer(bannerRef.current, heading);\n            }\n          });\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 && !firstMessageHasChildren && headingText === undefined ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem testId={testId} label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} testId={testId} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                data-testid={testIds.dismiss}\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent expandable>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 0.5 }}\n            >\n              <Grid\n                data-testid={testIds.heading}\n                container={{\n                  cols: 'fit-content(100%) max-content',\n                  gap: 0.5,\n                  alignItems: 'center'\n                }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  data-testid={testIds.expandCollapse}\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [heading])}\n                  aria-expanded={!collapsed}\n                  variant='simple'\n                  icon\n                  ref={expandCollapseBtnRef}\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    data-testid={testIds.dismiss}\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }),\n  getBannerTestIds\n);\n"]}

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

@@ -30,9 +30,16 @@ export interface DrawerProps extends AsProp, BaseProps {
     transitionSpeed?: string;
     /**
      * The width or height that the Drawer will open to, depending on its placement.
+     * If `resizeable`, is true this value will be overridden by the width set by the user.
      * @default '100%'
      */
     size?: string;
+    /**
+     * If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.
+     * @default false
+     * @internal Can only be used with one drawer at a time.
+     */
+    resizeable?: boolean;
     /** Callback fired after Drawer opens. */
     onAfterOpen?: () => void;
     /** Callback fired after Drawer closes. */
@@ -53,6 +60,6 @@ type State = 'open' | 'closed' | 'opening' | 'closing';
 export declare const StyledDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DrawerProps & {
     state: State;
 }>, never>;
-declare const Drawer: FunctionComponent<DrawerProps & ForwardProps>;
+export declare const Drawer: FunctionComponent<DrawerProps & ForwardProps>;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,iBAAiB,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAInE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAkCzE,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA2ExD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAuCzE,CAAC;AAIH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+J/D,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/Drawer.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useCallback, forwardRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useOuterEvent, useConsolidatedRef, usePrevious } from '../../hooks';
-import { reflow } from '../../utils';
+import { remToPx } from 'polished';
+import { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';
+import { getChildOfRootNode, reflow } from '../../utils';
 import { defaultThemeProp } from '../../theme';
+import { resizeDrawerKeyboardStep, resizeDrawerMaxWidth, resizeDrawerMinWidth } from '../../styles/constants';
+import ResizeHandle from './ResizeHandle';
+const drawerMinWidth = remToPx(resizeDrawerMinWidth);
 export const StyledDrawer = styled.div(props => {
-    const { state, shadow, position, placement, transitionSpeed, size, theme } = props;
+    const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;
     let dimension = 'horizontal';
     let axis = 'X';
     let anchor = 'top';
@@ -34,12 +38,18 @@ export const StyledDrawer = styled.div(props => {
         css `
       box-shadow: ${theme.base.shadow.high};
     `}
+
+    ${resizeable &&
+        css `
+      width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};
+    `}
   `;
 });
 StyledDrawer.defaultProps = defaultThemeProp;
-const Drawer = forwardRef(function Drawer(props, ref) {
-    const { open = false, shadow = false, position = 'absolute', children, placement = 'right', transitionSpeed, size = '100%', onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, onOuterClick, nullWhenClosed = false, ...restProps } = props;
+export const Drawer = forwardRef(function Drawer(props, ref) {
+    const { open = false, shadow = false, position = 'absolute', children, placement = 'right', transitionSpeed, size = '100%', resizeable = false, onAfterOpen, onAfterClose, onBeforeOpen, onBeforeClose, onOuterClick, nullWhenClosed = false, ...restProps } = props;
     const drawerRef = useConsolidatedRef(ref);
+    const { ltr, rtl } = useDirection();
     const [state, setState] = useState(open ? 'open' : 'closed');
     let prevState = usePrevious(state);
     if (!prevState)
@@ -70,7 +80,56 @@ const Drawer = forwardRef(function Drawer(props, ref) {
             return;
         setState(open ? 'open' : 'closed');
     }, [open]);
-    return state === 'closed' && !open && nullWhenClosed ? null : (_jsx(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: children }));
+    const dragStartXRef = useRef();
+    useEffect(() => {
+        if (!resizeable || !drawerRef.current)
+            return;
+        const targetNode = getChildOfRootNode(drawerRef);
+        if (!targetNode)
+            return;
+        if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {
+            targetNode.style.setProperty('--resize-drawer-width', size);
+        }
+    }, [drawerRef.current]);
+    const handleResize = useCallback((e) => {
+        const targetNode = getChildOfRootNode(drawerRef);
+        const rect = drawerRef.current?.getBoundingClientRect();
+        if (!rect || !targetNode)
+            return;
+        dragStartXRef.current = e.clientX;
+        const ac = new AbortController();
+        targetNode.addEventListener('mousemove', moveEvent => {
+            if (!dragStartXRef.current || !rect.width)
+                return;
+            const initialX = dragStartXRef.current;
+            const widthDiff = placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;
+            const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));
+            // Set root-level CSS variable to communicate width to AppShell
+            targetNode.style.setProperty('--resize-drawer-width', `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`);
+        }, { passive: true, signal: ac.signal });
+        targetNode.addEventListener('mouseup', () => {
+            ac.abort();
+        }, { once: true });
+    }, [placement]);
+    const keyboardResize = useCallback((e, grabbed) => {
+        if (!grabbed)
+            return;
+        const targetNode = getChildOfRootNode(drawerRef);
+        const resizeStep = document.documentElement.clientWidth * resizeDrawerKeyboardStep;
+        const rect = drawerRef.current?.getBoundingClientRect();
+        if (!rect || !targetNode)
+            return;
+        if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight')
+            return;
+        e.preventDefault();
+        const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);
+        const newWidth = Math.max(rect.width + resizeDirection * resizeStep, parseInt(drawerMinWidth, 10));
+        targetNode.style.setProperty('--resize-drawer-width', `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`);
+    }, [placement]);
+    const renderResizeHandle = resizeable &&
+        state === 'open' &&
+        ((placement === 'left' && rtl) || (placement === 'right' && ltr));
+    return state === 'closed' && !open && nullWhenClosed ? null : (_jsxs(StyledDrawer, { ref: drawerRef, position: position, shadow: shadow && open, transitionSpeed: transitionSpeed, placement: placement, size: size, resizeable: resizeable, open: open, state: state, onTransitionEnd: onTransitionEnd, ...restProps, children: [children, renderResizeHandle && _jsx(ResizeHandle, { onMouseDown: handleResize, onKeyDown: keyboardResize })] }));
 });
 export default Drawer;
 //# sourceMappingURL=Drawer.js.map