@pega/cosmos-react-wss 9.0.0-build.9.9 → 9.0.0

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 { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  Count,\n  defaultThemeProp,\n  StyledFlex,\n  StyledImage,\n  StyledText,\n  StyledVisual,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\n\nexport const StyledNav = styled.nav`\n  white-space: nowrap;\n  overflow: visible;\n  visibility: hidden;\n  height: 100%;\n\n  a:hover,\n  button:hover {\n    text-decoration: none;\n  }\n`;\n\nexport const StyledAppHeader = styled.header<{ navPosition: AppShellProps['navPosition'] }>(\n  ({\n    navPosition,\n    theme: {\n      base,\n      components: {\n        'app-shell': {\n          header: { background: headerBg, 'foreground-color': headerFgColor }\n        }\n      }\n    }\n  }) => {\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n    return css`\n      position: sticky;\n      inset-block-start: 0;\n      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n      width: 100%;\n      background: ${headerBg};\n      z-index: calc(${base['z-index'].popover} + 1);\n      border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      color: ${foregroundColor};\n\n      ${StyledImage} {\n        height: 1.625rem;\n      }\n\n      & > ${StyledFlex} {\n        height: ${headerHeight};\n\n        ${StyledAppHeaderOperator} {\n          margin: ${base.spacing};\n        }\n\n        & > a,\n        & > button {\n          cursor: pointer;\n          text-decoration: none;\n          user-select: none;\n          -webkit-user-select: none;\n          min-height: ${headerHeight};\n\n          &:focus {\n            box-shadow: ${base.shadow.focus};\n          }\n        }\n      }\n\n      & > ${StyledNav} {\n        height: calc(${tallHeaderHeight} - ${headerHeight});\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    font-size: ${fontSize.xxl};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    max-width: 50ch;\n  `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n  return (\n    mobile &&\n    css`\n      margin-inline-start: auto;\n    `\n  );\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n  const hoverColor = lighten(0.2, theme.base.palette.interactive);\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    margin: 0 calc(0.5 * ${theme.base.spacing});\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSize.m};\n    position: relative;\n    height: 100%;\n    display: flex;\n    align-items: center;\n\n    &:last-of-type {\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    &[aria-current='page'] {\n      ::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-end: 0;\n        background-color: ${theme.base.palette.interactive};\n        height: 0.125rem;\n        width: 100%;\n      }\n    }\n\n    &:hover {\n      ::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-end: 0;\n        background-color: ${hoverColor};\n        height: 0.125rem;\n        width: 100%;\n      }\n    }\n  `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ navPosition: AppShellProps['navPosition'] }>(\n  ({ navPosition, theme }) => {\n    const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;\n    return css`\n      --appshell-offset: ${calculatedHeaderHeight};\n      --appshell-horizontal-offset: 0;\n      position: relative;\n      min-height: calc(100vh - ${calculatedHeaderHeight});\n      background-color: ${theme.base.palette['app-background']};\n\n      :focus {\n        outline: none;\n      }\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n  return css`\n    margin: ${theme.base.spacing};\n  `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n  return css`\n    height: 100vh;\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const activeColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  const hoverColor = tryCatch(() =>\n    mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  return css`\n    font-size: ${fontSize.m};\n    padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['primary-background']};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      text-decoration: none;\n    }\n\n    &[aria-current='page'] {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      background-color: ${activeColor};\n    }\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area'].finger};\n    }\n  `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n  overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n  position: sticky;\n  bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['border-line']};\n    height: 0.0625rem;\n    margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    & + ${StyledFlex} {\n      margin-inline-start: calc(3 * ${theme.base.spacing});\n    }\n  `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.span`\n  flex-shrink: 0;\n`;\n\nexport const StyledCountIcon = styled(Count)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    position: absolute;\n    inset-inline-start: calc(2 * ${spacing});\n    inset-block-start: calc(-0.25 * ${spacing});\n    padding: 0 calc(0.5 * ${spacing});\n\n    @media (pointer: coarse) {\n      inset-inline-start: calc(2.5 * ${spacing});\n      inset-block-start: calc(0.5 * ${spacing});\n    }\n  `;\n});\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n  return css`\n    min-height: ${popover ? '10rem' : '100vh'};\n    max-height: ${popover ? '50vh' : '100vh'};\n    background-color: ${theme.base.palette['primary-background']};\n\n    ${popover &&\n    css`\n      max-width: 80ch;\n    `}\n  `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n  return css`\n    overflow: auto;\n\n    & > li:not(:last-of-type) {\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n  const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n  return css`\n    width: 100%;\n    padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['primary-background']};\n    text-decoration: none;\n    cursor: pointer;\n    text-align: start;\n    white-space: normal;\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisual} {\n      align-self: flex-start;\n    }\n  `;\n});\n\nStyledNotification.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  return css`\n    position: relative;\n    ${StyledAlert} {\n      position: absolute;\n      inset-inline-start: 0.375rem;\n      inset-block-start: 1.625rem;\n      background-color: ${theme.base.palette.interactive};\n      height: 0.75rem;\n      width: 0.75rem;\n\n      ${!unread &&\n      css`\n        display: none;\n      `}\n    }\n  `;\n});\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.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"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  calculateForegroundColor,\n  Count,\n  defaultThemeProp,\n  StyledFlex,\n  StyledImage,\n  StyledText,\n  StyledVisual,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\nconst topBarHeight = '2.25rem';\nconst navBarHeight = '3.75rem';\nexport const footerHeight = '2.25rem';\n\nexport const StyledNav = styled.nav`\n  white-space: nowrap;\n  overflow: visible;\n  visibility: hidden;\n  height: 100%;\n\n  a:hover,\n  button:hover {\n    text-decoration: none;\n  }\n`;\n\nexport const StyledAppHeader = styled.header<{\n  navPosition: AppShellProps['navPosition'];\n  $isDefaultWSS: boolean;\n}>(\n  ({\n    navPosition,\n    $isDefaultWSS,\n    theme: {\n      base,\n      components: {\n        'app-shell': {\n          header: {\n            background: headerBg,\n            'foreground-color': headerFgColor,\n            'border-color': headerBorderColor\n          }\n        }\n      }\n    }\n  }) => {\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n    const isModernStacked = !$isDefaultWSS && navPosition === 'below';\n\n    return css`\n      position: sticky;\n      inset-block-start: 0;\n      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n      width: 100%;\n      background: ${isModernStacked ? base.palette['primary-background'] : headerBg};\n      z-index: calc(${base['z-index'].popover} + 1);\n      border-bottom: 0.0625rem solid\n        ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};\n      color: ${foregroundColor};\n\n      ${StyledImage} {\n        height: 1.625rem;\n      }\n\n      & > ${StyledFlex} {\n        height: ${headerHeight};\n\n        ${StyledAppHeaderOperator} {\n          margin: ${$isDefaultWSS ? base.spacing : 0};\n        }\n\n        & > a,\n        & > button {\n          cursor: pointer;\n          text-decoration: none;\n          user-select: none;\n          -webkit-user-select: none;\n          min-height: ${headerHeight};\n\n          &:focus {\n            box-shadow: ${base.shadow.focus};\n          }\n        }\n      }\n\n      & > ${StyledNav} {\n        height: calc(${tallHeaderHeight} - ${headerHeight});\n      }\n\n      ${isModernStacked &&\n      css`\n        & > ${StyledFlex}:first-child {\n          height: ${topBarHeight};\n          max-width: 80rem;\n          margin-inline: auto;\n          width: 100%;\n          padding-inline: calc(${base.spacing} * 2);\n\n          & > a,\n          & > button {\n            min-height: ${topBarHeight};\n          }\n        }\n\n        & > ${StyledFlex}:nth-child(2) {\n          height: ${navBarHeight};\n          max-width: 80rem;\n          margin-inline: auto;\n          width: 100%;\n          padding-inline: calc(${base.spacing} * 2);\n        }\n\n        @media screen and (min-width: ${base.breakpoints.md}) {\n          & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {\n            padding-inline: calc(${base.spacing} * 2.5);\n          }\n        }\n\n        &::after {\n          content: '';\n          position: absolute;\n          top: ${topBarHeight};\n          left: 0;\n          right: 0;\n          border-bottom: 0.0625rem solid ${base.palette['border-line']};\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    font-size: ${fontSize.xxl};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    max-width: 50ch;\n  `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n  return (\n    mobile &&\n    css`\n      margin-inline-start: auto;\n    `\n  );\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n  const hoverColor = lighten(0.2, theme.base.palette.interactive);\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    margin: 0 calc(0.5 * ${theme.base.spacing});\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSize.m};\n    position: relative;\n    height: 100%;\n    display: flex;\n    align-items: center;\n\n    &:last-of-type {\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    &[aria-current='page'] {\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-end: 0;\n        background-color: ${theme.base.palette.interactive};\n        height: 0.125rem;\n        width: 100%;\n      }\n    }\n\n    &:hover {\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-end: 0;\n        background-color: ${hoverColor};\n        height: 0.125rem;\n        width: 100%;\n      }\n    }\n  `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n  navPosition: AppShellProps['navPosition'];\n  $isDefaultWSS: boolean;\n  $hasFooter: boolean;\n}>(({ navPosition, theme, $isDefaultWSS, $hasFooter }) => {\n  const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;\n\n  return css`\n    --appshell-offset: ${calculatedHeaderHeight};\n    --appshell-horizontal-offset: 0;\n    position: relative;\n    min-height: calc(100vh - ${calculatedHeaderHeight});\n    background-color: ${theme.base.palette['app-background']};\n\n    :focus {\n      outline: none;\n    }\n\n    ${!$isDefaultWSS &&\n    css`\n      &:has([data-create-stage]) {\n        height: calc(100vh - ${calculatedHeaderHeight});\n        min-height: auto;\n        overflow: auto;\n      }\n\n      ${$hasFooter &&\n      css`\n        &:not(:has([data-create-stage])) {\n          --footer-height: ${footerHeight};\n          min-height: calc(100vh - ${calculatedHeaderHeight} - ${footerHeight});\n        }\n\n        &:has([data-create-stage]) + footer {\n          position: absolute;\n          inset-block-end: 0;\n          inset-inline: 0;\n          border-top: none;\n        }\n      `}\n    `}\n\n    ${$isDefaultWSS &&\n    $hasFooter &&\n    css`\n      --footer-height: ${footerHeight};\n    `}\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledModernAppHeaderOperator = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    display: flex;\n    align-items: center;\n    align-self: center;\n    gap: ${theme.base.spacing};\n    font-size: ${fontSize.m};\n    white-space: nowrap;\n    padding-inline: calc(0.75 * ${theme.base.spacing});\n\n    ${StyledImage} {\n      height: auto;\n    }\n  `;\n});\n\nStyledModernAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n  return css`\n    margin: ${theme.base.spacing};\n  `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n  return css`\n    height: 100vh;\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const activeColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  const hoverColor = tryCatch(() =>\n    mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  return css`\n    font-size: ${fontSize.m};\n    padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['primary-background']};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      text-decoration: none;\n    }\n\n    &[aria-current='page'] {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      background-color: ${activeColor};\n    }\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area'].finger};\n    }\n  `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n  overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n  position: sticky;\n  bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['border-line']};\n    height: 0.0625rem;\n    margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    & + ${StyledFlex} {\n      margin-inline-start: calc(3 * ${theme.base.spacing});\n    }\n  `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.div`\n  position: relative;\n  display: inline-flex;\n`;\n\nStyledNotificationCount.defaultProps = defaultThemeProp;\n\nexport const StyledCountIcon = styled(Count)`\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n`;\n\nStyledCountIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n  return css`\n    min-height: ${popover ? '10rem' : '100vh'};\n    max-height: ${popover ? '50vh' : '100vh'};\n    background-color: ${theme.base.palette['primary-background']};\n\n    ${popover &&\n    css`\n      max-width: 80ch;\n    `}\n  `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n  return css`\n    overflow: auto;\n\n    & > li:not(:last-of-type) {\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n  const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n  return css`\n    width: 100%;\n    padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['primary-background']};\n    text-decoration: none;\n    cursor: pointer;\n    text-align: start;\n    white-space: normal;\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${StyledVisual} {\n      align-self: flex-start;\n    }\n  `;\n});\n\nStyledNotification.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  return css`\n    position: relative;\n    ${StyledAlert} {\n      position: absolute;\n      inset-inline-start: 0.375rem;\n      inset-block-start: 1.625rem;\n      background-color: ${theme.base.palette.interactive};\n      height: 0.75rem;\n      width: 0.75rem;\n\n      ${!unread &&\n      css`\n        display: none;\n      `}\n    }\n  `;\n});\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div``;\n\nStyledBannerRegion.defaultProps = defaultThemeProp;\n\nexport const StyledVisuallyHiddenLabel = styled(StyledText)`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 0.0625rem;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 0.0625rem;\n`;\n\nStyledVisuallyHiddenLabel.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNavAction = styled(BareButton)`\n  display: inline-flex;\n  align-items: center;\n`;\n\nStyledNavAction.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityDot = styled(StyledAlert)`\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n`;\n\nStyledUtilityDot.defaultProps = defaultThemeProp;\n\nexport const StyledUtilityVisual = styled(StyledVisual)`\n  position: relative;\n`;\n\nStyledUtilityVisual.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppShell.types.d.ts

@@ -1,6 +1,7 @@
 import type { MouseEventHandler, ReactNode, Ref } from 'react';
-import type { AvatarProps, BaseProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { AvatarProps, BaseProps, ImageProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { ContextSwitcherProps, NavListItemProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+import type { FooterLink } from '../Footer';
 export type InteractionEvent = MouseEvent | KeyboardEvent;
 interface AppInfoProps {
     /** Name of the application. */
@@ -15,7 +16,7 @@ interface AppInfoProps {
     target?: string;
     /** If true, the appName will not be visibly displayed on screen. */
     appNameHidden?: boolean;
-    /** Portal name of the application. */
+    /** The secondary text to render in the header. */
     portalName?: string;
 }
 export interface NavLinkProps {
@@ -70,6 +71,7 @@ export interface NotificationProps {
     /** Callback that fires when the notification view closes. */
     onNotificationsClose?: () => void;
 }
+export type { FooterLink } from '../Footer';
 export interface AppShellProps extends BaseProps, NoChildrenProp {
     /** The content of the application. */
     main: ReactNode;
@@ -95,8 +97,13 @@ export interface AppShellProps extends BaseProps, NoChildrenProp {
      * @default 'inline'
      */
     navPosition?: 'inline' | 'below';
+    /** Whether the shell should render the default WSS layout. */
+    isDefaultWSS?: boolean;
+    /** Configuration for the help menu in the header */
+    helpMenu?: MenuItemProps[];
+    /** Footer links rendered at the bottom of the page. */
+    footer?: FooterLink[];
     /** Ref for the wrapping div element. */
     ref?: Ref<HTMLDivElement>;
 }
-export {};
 //# sourceMappingURL=AppShell.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport type { AvatarProps, BaseProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport type {\n  ContextSwitcherProps,\n  NavListItemProps\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nexport type InteractionEvent = MouseEvent | KeyboardEvent;\n\ninterface AppInfoProps {\n  /** Name of the application. */\n  appName: string;\n  /** URL source of the logo image. */\n  imageSrc: ImageProps['src'];\n  /** URL or DOM id to navigate to from the logo and appName. */\n  href?: string;\n  /** Click handler for the logo and appName. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** Portal name of the application. */\n  portalName?: string;\n}\n\nexport interface NavLinkProps {\n  /** Unique id for the link */\n  id: string;\n  /** Text that is displayed for the link. */\n  text: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** Click handler for the link. */\n  onClick?: (e: InteractionEvent) => void;\n  /** Indicates if the link represents the current view within the app. */\n  active?: boolean;\n}\n\ninterface OperatorProps {\n  /** Props for constructing the operator avatar. */\n  avatar: AvatarProps;\n  /** The title of the operator menu. */\n  title: string;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n}\n\nexport interface NotificationItem {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (event: InteractionEvent) => void;\n}\n\nexport interface NotificationProps {\n  /** The title of the notifications view. */\n  title: string;\n  /** The number of new notifications. */\n  count: number;\n  /** A list of notification items. */\n  items: NotificationItem[];\n  /** If true, a loading indicator will render in place of the list. */\n  loading?: boolean;\n  /** Click event for items within the list. */\n  onItemClick?: (id: string, event: InteractionEvent) => void;\n  /** Callback that fires when the notification view opens. */\n  onNotificationsOpen?: () => void;\n  /** Callback that fires when the notification view closes. */\n  onNotificationsClose?: () => void;\n}\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  /** Props related to the app name and logo. */\n  appInfo: AppInfoProps;\n  /** Context manager configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** A set of navigation links for the application. */\n  navLinks: NavLinkProps[];\n  /** Props for the operator menu. */\n  operator: OperatorProps;\n  /** Props related to notifications for the application. */\n  notifications?: NotificationProps;\n  /**\n   * The alignment of navigation links within the header.\n   * @default 'end'\n   */\n  navAlignment?: 'start' | 'center' | 'end';\n  /**\n   * The positioning of the navigation links relative to the other app header elements.\n   * @default 'inline'\n   */\n  navPosition?: 'inline' | 'below';\n  /** Ref for the wrapping div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport type {\n  AvatarProps,\n  BaseProps,\n  ImageProps,\n  MenuItemProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport type {\n  ContextSwitcherProps,\n  NavListItemProps\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport type { FooterLink } from '../Footer';\n\nexport type InteractionEvent = MouseEvent | KeyboardEvent;\n\ninterface AppInfoProps {\n  /** Name of the application. */\n  appName: string;\n  /** URL source of the logo image. */\n  imageSrc: ImageProps['src'];\n  /** URL or DOM id to navigate to from the logo and appName. */\n  href?: string;\n  /** Click handler for the logo and appName. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n}\n\nexport interface NavLinkProps {\n  /** Unique id for the link */\n  id: string;\n  /** Text that is displayed for the link. */\n  text: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** Click handler for the link. */\n  onClick?: (e: InteractionEvent) => void;\n  /** Indicates if the link represents the current view within the app. */\n  active?: boolean;\n}\n\ninterface OperatorProps {\n  /** Props for constructing the operator avatar. */\n  avatar: AvatarProps;\n  /** The title of the operator menu. */\n  title: string;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n}\n\nexport interface NotificationItem {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (event: InteractionEvent) => void;\n}\n\nexport interface NotificationProps {\n  /** The title of the notifications view. */\n  title: string;\n  /** The number of new notifications. */\n  count: number;\n  /** A list of notification items. */\n  items: NotificationItem[];\n  /** If true, a loading indicator will render in place of the list. */\n  loading?: boolean;\n  /** Click event for items within the list. */\n  onItemClick?: (id: string, event: InteractionEvent) => void;\n  /** Callback that fires when the notification view opens. */\n  onNotificationsOpen?: () => void;\n  /** Callback that fires when the notification view closes. */\n  onNotificationsClose?: () => void;\n}\n\nexport type { FooterLink } from '../Footer';\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  /** Props related to the app name and logo. */\n  appInfo: AppInfoProps;\n  /** Context manager configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** A set of navigation links for the application. */\n  navLinks: NavLinkProps[];\n  /** Props for the operator menu. */\n  operator: OperatorProps;\n  /** Props related to notifications for the application. */\n  notifications?: NotificationProps;\n  /**\n   * The alignment of navigation links within the header.\n   * @default 'end'\n   */\n  navAlignment?: 'start' | 'center' | 'end';\n  /**\n   * The positioning of the navigation links relative to the other app header elements.\n   * @default 'inline'\n   */\n  navPosition?: 'inline' | 'below';\n  /** Whether the shell should render the default WSS layout. */\n  isDefaultWSS?: boolean;\n  /** Configuration for the help menu in the header */\n  helpMenu?: MenuItemProps[];\n  /** Footer links rendered at the bottom of the page. */\n  footer?: FooterLink[];\n  /** Ref for the wrapping div element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeaderContent.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAY/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,UAAU,wBAAwB;IAChC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,CA0EpE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MobileHeaderContent.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAoB/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,UAAU,wBAAwB;IAChC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,CA+EpE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/AppShell/MobileHeaderContent.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Button, Avatar, Icon, Text, useI18n } from '@pega/cosmos-react-core';
+import { Flex, Button, Avatar, Icon, Text, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import { HorizontalBreak, StyledLinkSection, StyledMobileLink, StyledMobileNav, StyledOperatorSection, StyledPrimaryName } from './AppShell.styles';
 const MobileHeaderContent = ({ appInfo, navLinks, operator, onClose }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { as: StyledMobileNav, container: { direction: 'column' }, children: [_jsx(Flex, { container: { pad: 1 }, item: { alignSelf: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: onClose, label: t('close'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(Button, { as: StyledMobileLink, variant: 'text', href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: _jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: appInfo.appName }) }), _jsx(Flex, { as: StyledLinkSection, container: { direction: 'column', gap: 1, pad: [1, 0] }, item: { grow: 1 }, children: navLinks.map(navLink => (_jsx(Button, { as: StyledMobileLink, variant: 'text', "aria-current": navLink.active ? 'page' : undefined, href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id))) }), _jsxs(Flex, { as: StyledOperatorSection, container: { direction: 'column', gap: 2, pad: [0, 0, 2, 0] }, children: [_jsx(HorizontalBreak, {}), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Avatar, { ...operator.avatar }), _jsx(Text, { as: StyledPrimaryName, variant: 'h2', children: "Account" })] }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: operator.actions.map(action => (_jsx(Button, { as: StyledMobileLink, variant: 'text', href: action.href, onClick: action.onClick, children: action.primary }, action.id))) })] })] }));
+    return (_jsxs(Flex, { as: StyledMobileNav, container: { direction: 'column' }, children: [_jsx(Flex, { container: { pad: 1 }, item: { alignSelf: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: onClose, label: t('close'), children: _jsx(Icon, { name: 'times' }) }) }), _jsxs(Button, { as: StyledMobileLink, variant: 'text', href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }), _jsx(Flex, { as: StyledLinkSection, container: { direction: 'column', gap: 1, pad: [1, 0] }, item: { grow: 1 }, children: navLinks.map(navLink => (_jsx(Button, { as: StyledMobileLink, variant: 'text', "aria-current": navLink.active ? 'page' : undefined, href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id))) }), _jsxs(Flex, { as: StyledOperatorSection, container: { direction: 'column', gap: 2, pad: [0, 0, 2, 0] }, children: [_jsx(HorizontalBreak, {}), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Avatar, { ...operator.avatar }), _jsx(Text, { as: StyledPrimaryName, variant: 'h2', children: "Account" })] }), _jsx(Flex, { container: { direction: 'column', gap: 1 }, children: operator.actions.map(action => (_jsx(Button, { as: StyledMobileLink, variant: 'text', href: action.href, onClick: action.onClick, children: action.primary }, action.id))) })] })] }));
 };
 export default MobileHeaderContent;
 //# sourceMappingURL=MobileHeaderContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeaderContent.js","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Flex, Button, Avatar, Icon, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n  HorizontalBreak,\n  StyledLinkSection,\n  StyledMobileLink,\n  StyledMobileNav,\n  StyledOperatorSection,\n  StyledPrimaryName\n} from './AppShell.styles';\nimport type { AppShellProps } from './AppShell.types';\n\ninterface MobileHeaderContentProps {\n  appInfo: AppShellProps['appInfo'];\n  navLinks: AppShellProps['navLinks'];\n  operator: AppShellProps['operator'];\n  onClose: () => void;\n}\n\nconst MobileHeaderContent: FunctionComponent<MobileHeaderContentProps> = ({\n  appInfo,\n  navLinks,\n  operator,\n  onClose\n}: MobileHeaderContentProps) => {\n  const t = useI18n();\n\n  return (\n    <Flex as={StyledMobileNav} container={{ direction: 'column' }}>\n      <Flex container={{ pad: 1 }} item={{ alignSelf: 'end' }}>\n        <Button variant='simple' icon onClick={onClose} label={t('close')}>\n          <Icon name='times' />\n        </Button>\n      </Flex>\n\n      <Button\n        as={StyledMobileLink}\n        variant='text'\n        href={appInfo.href}\n        onClick={appInfo.onClick}\n        target={appInfo.target}\n      >\n        <Text as={StyledPrimaryName} variant='h1'>\n          {appInfo.appName}\n        </Text>\n      </Button>\n\n      <Flex\n        as={StyledLinkSection}\n        container={{ direction: 'column', gap: 1, pad: [1, 0] }}\n        item={{ grow: 1 }}\n      >\n        {navLinks.map(navLink => (\n          <Button\n            as={StyledMobileLink}\n            variant='text'\n            key={navLink.id}\n            aria-current={navLink.active ? 'page' : undefined}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </Button>\n        ))}\n      </Flex>\n\n      <Flex\n        as={StyledOperatorSection}\n        container={{ direction: 'column', gap: 2, pad: [0, 0, 2, 0] }}\n      >\n        <HorizontalBreak />\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Avatar {...operator.avatar} />\n          <Text as={StyledPrimaryName} variant='h2'>\n            Account\n          </Text>\n        </Flex>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {operator.actions.map(action => (\n            <Button\n              as={StyledMobileLink}\n              variant='text'\n              key={action.id}\n              href={action.href}\n              onClick={action.onClick}\n            >\n              {action.primary}\n            </Button>\n          ))}\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default MobileHeaderContent;\n"]}
+{"version":3,"file":"MobileHeaderContent.js","sourceRoot":"","sources":["../../../src/components/AppShell/MobileHeaderContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  Button,\n  Avatar,\n  Icon,\n  Text,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport {\n  HorizontalBreak,\n  StyledLinkSection,\n  StyledMobileLink,\n  StyledMobileNav,\n  StyledOperatorSection,\n  StyledPrimaryName\n} from './AppShell.styles';\nimport type { AppShellProps } from './AppShell.types';\n\ninterface MobileHeaderContentProps {\n  appInfo: AppShellProps['appInfo'];\n  navLinks: AppShellProps['navLinks'];\n  operator: AppShellProps['operator'];\n  onClose: () => void;\n}\n\nconst MobileHeaderContent: FunctionComponent<MobileHeaderContentProps> = ({\n  appInfo,\n  navLinks,\n  operator,\n  onClose\n}: MobileHeaderContentProps) => {\n  const t = useI18n();\n\n  return (\n    <Flex as={StyledMobileNav} container={{ direction: 'column' }}>\n      <Flex container={{ pad: 1 }} item={{ alignSelf: 'end' }}>\n        <Button variant='simple' icon onClick={onClose} label={t('close')}>\n          <Icon name='times' />\n        </Button>\n      </Flex>\n\n      <Button\n        as={StyledMobileLink}\n        variant='text'\n        href={appInfo.href}\n        onClick={appInfo.onClick}\n        target={appInfo.target}\n      >\n        <Text as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName} variant='h1'>\n          {appInfo.appName}\n        </Text>\n        {appInfo.portalName && (\n          <Text variant='h2' as='span'>\n            {appInfo.portalName}\n          </Text>\n        )}\n      </Button>\n\n      <Flex\n        as={StyledLinkSection}\n        container={{ direction: 'column', gap: 1, pad: [1, 0] }}\n        item={{ grow: 1 }}\n      >\n        {navLinks.map(navLink => (\n          <Button\n            as={StyledMobileLink}\n            variant='text'\n            key={navLink.id}\n            aria-current={navLink.active ? 'page' : undefined}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </Button>\n        ))}\n      </Flex>\n\n      <Flex\n        as={StyledOperatorSection}\n        container={{ direction: 'column', gap: 2, pad: [0, 0, 2, 0] }}\n      >\n        <HorizontalBreak />\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Avatar {...operator.avatar} />\n          <Text as={StyledPrimaryName} variant='h2'>\n            Account\n          </Text>\n        </Flex>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          {operator.actions.map(action => (\n            <Button\n              as={StyledMobileLink}\n              variant='text'\n              key={action.id}\n              href={action.href}\n              onClick={action.onClick}\n            >\n              {action.primary}\n            </Button>\n          ))}\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default MobileHeaderContent;\n"]}

package/lib/components/AppShell/NavLinks.d.ts

@@ -4,6 +4,7 @@ interface NavLinksProps {
     navLinks: AppShellProps['navLinks'];
     navAlignment: AppShellProps['navAlignment'];
     navPosition: AppShellProps['navPosition'];
+    isDefaultWSS?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 declare const NavLinks: import("react").ForwardRefExoticComponent<Omit<NavLinksProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"NavLinks.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,UAAU,aAAa;IACrB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,uHAgCZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"NavLinks.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,UAAU,aAAa;IACrB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,uHAgCZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/NavLinks.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Flex, Button } from '@pega/cosmos-react-core';
 import { StyledNav, StyledLink } from './AppShell.styles';
-const NavLinks = forwardRef(function NavLinks({ navLinks, navAlignment, navPosition }, ref) {
+const NavLinks = forwardRef(function NavLinks({ navLinks, navAlignment, navPosition, isDefaultWSS }, ref) {
     return (_jsx(Flex, { as: StyledNav, ref: ref, container: {
             alignItems: 'center',
             gap: 1,
             justify: navAlignment
-        }, item: { grow: 1 }, navPosition: navPosition, children: navLinks.map(navLink => {
+        }, item: isDefaultWSS ? { grow: 1 } : undefined, navPosition: navPosition, children: navLinks.map(navLink => {
             return (_jsx(StyledLink, { as: Button, "aria-current": navLink.active ? 'page' : undefined, variant: 'text', href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id));
         }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAU1D,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAkC,EACvE,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps } from './AppShell.types';\n\ninterface NavLinksProps {\n  navLinks: AppShellProps['navLinks'];\n  navAlignment: AppShellProps['navAlignment'];\n  navPosition: AppShellProps['navPosition'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavLinks = forwardRef(function NavLinks(\n  { navLinks, navAlignment, navPosition }: PropsWithoutRef<NavLinksProps>,\n  ref: NavLinksProps['ref']\n) {\n  return (\n    <Flex\n      as={StyledNav}\n      ref={ref}\n      container={{\n        alignItems: 'center',\n        gap: 1,\n        justify: navAlignment\n      }}\n      item={{ grow: 1 }}\n      navPosition={navPosition}\n    >\n      {navLinks.map(navLink => {\n        return (\n          <StyledLink\n            as={Button}\n            aria-current={navLink.active ? 'page' : undefined}\n            variant='text'\n            key={navLink.id}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </StyledLink>\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default NavLinks;\n"]}
+{"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW1D,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAkC,EACrF,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps } from './AppShell.types';\n\ninterface NavLinksProps {\n  navLinks: AppShellProps['navLinks'];\n  navAlignment: AppShellProps['navAlignment'];\n  navPosition: AppShellProps['navPosition'];\n  isDefaultWSS?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavLinks = forwardRef(function NavLinks(\n  { navLinks, navAlignment, navPosition, isDefaultWSS }: PropsWithoutRef<NavLinksProps>,\n  ref: NavLinksProps['ref']\n) {\n  return (\n    <Flex\n      as={StyledNav}\n      ref={ref}\n      container={{\n        alignItems: 'center',\n        gap: 1,\n        justify: navAlignment\n      }}\n      item={isDefaultWSS ? { grow: 1 } : undefined}\n      navPosition={navPosition}\n    >\n      {navLinks.map(navLink => {\n        return (\n          <StyledLink\n            as={Button}\n            aria-current={navLink.active ? 'page' : undefined}\n            variant='text'\n            key={navLink.id}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </StyledLink>\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default NavLinks;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAgB7D,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAUjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAE9D,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAoO9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAkB7D,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAUjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAE9D,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAmP9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CaseView/CaseView.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useBreakpoint, Flex, Tabs, TabPanel, Text, MenuButton, useI18n, Icon, useAfterInitialEffect, getEdge, useDirection, throttle } from '@pega/cosmos-react-core';
+import { useBreakpoint, Card, CardContent, Flex, Tabs, TabPanel, Text, MenuButton, useI18n, Icon, useAfterInitialEffect, getEdge, useDirection, throttle } from '@pega/cosmos-react-core';
 import { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
 import { StyledAside, StyledCaseHeader, StyledCaseView, StyledContentContainer, StyledContent } from './CaseView.styles';
-const CaseView = ({ caseId, heading, actions, stages, tasks, summary, feed, utility, promotedActions = [], ...restProps }) => {
+const CaseView = ({ caseId, heading, actions, stages, tasks, summary, details, feed, utility, promotedActions = [], ...restProps }) => {
     const isMediumOrAbove = useBreakpoint('md');
     const t = useI18n();
     const tabsRef = useRef(null);
@@ -16,6 +16,8 @@ const CaseView = ({ caseId, heading, actions, stages, tasks, summary, feed, util
                 name: 'Summary',
                 content: summary.content
             });
+        if (details)
+            tabsArr.push({ name: details.label, content: details.content });
         if (feed)
             tabsArr.push({ name: 'Feed', content: feed.content });
         if (utility)
@@ -24,7 +26,7 @@ const CaseView = ({ caseId, heading, actions, stages, tasks, summary, feed, util
                 content: utility.content
             });
         return tabsArr.map(tab => ({ ...tab, id: tab.name }));
-    }, [isMediumOrAbove, summary, feed, utility]);
+    }, [isMediumOrAbove, summary, details, feed, utility]);
     const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);
     const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
     const actionsContainerEl = useRef(null);
@@ -80,7 +82,7 @@ const CaseView = ({ caseId, heading, actions, stages, tasks, summary, feed, util
                     }, ref: contentEl, as: StyledContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'h1', ref: headerEl, children: heading }), (promotedActions.length > 0 || actions) && (_jsxs(Flex, { container: {
                                         gap: 1
                                     }, ref: actionsContainerEl, children: [!wrapPromotedActions &&
-                                            promotedActions.map(action => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), children: action.text }, action.id))), actions && (_jsx(MenuButton, { icon: promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined, iconOnly: promotedActions.length > 0 || !isMediumOrAbove, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {
+                                            promotedActions.map(action => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), children: action.text }, action.id))), actions && actions.length > 0 && (_jsx(MenuButton, { icon: promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined, iconOnly: promotedActions.length > 0 || !isMediumOrAbove, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {
                                                 items: actions.map(action => ({
                                                     ...action,
                                                     primary: action.text,
@@ -92,7 +94,7 @@ const CaseView = ({ caseId, heading, actions, stages, tasks, summary, feed, util
                                 gap: 1,
                                 alignItems: 'center',
                                 wrap: 'wrap'
-                            }, children: promotedActions.map(action => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), children: action.text }, action.id))) }))] }) }), _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, as: StyledContentContainer, children: [stages?.content, tabs.length > 0 && currentTabId && (_jsxs(_Fragment, { children: [tasks?.content, _jsxs("div", { children: [_jsx(Tabs, { tabs: tabs, onTabClick: setCurrentTabId, currentTabId: currentTabId, ref: tabsRef }), tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, tablistRef: tabsRef, children: _jsx(StyledContent, { children: tab.content }) }, tab.id)))] })] })), tabs.length === 0 && (_jsxs(Flex, { container: { gap: 2 }, children: [(utility || summary) && (_jsxs(Flex, { as: StyledAside, container: { direction: 'column', gap: 2 }, children: [summary?.content && (_jsx("div", { role: 'region', "aria-label": summary?.label, children: summary?.content })), utility?.content && (_jsx("div", { role: 'region', "aria-label": utility?.label, children: utility?.content }))] })), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx("div", { role: 'region', "aria-label": tasks?.label, children: tasks?.content }), _jsx("div", { role: 'region', "aria-label": feed?.label, children: feed?.content })] })] }))] })] }));
+                            }, children: promotedActions.map(action => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => action.onClick?.(action.id, e), children: action.text }, action.id))) }))] }) }), _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, as: StyledContentContainer, children: [stages?.content, tabs.length > 0 && currentTabId && (_jsxs(_Fragment, { children: [tasks?.content, _jsxs("div", { children: [_jsx(Tabs, { tabs: tabs, onTabClick: setCurrentTabId, currentTabId: currentTabId, ref: tabsRef }), tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, tablistRef: tabsRef, children: _jsx(StyledContent, { children: tab.content }) }, tab.id)))] })] })), tabs.length === 0 && (_jsxs(Flex, { container: { gap: 2 }, children: [(utility || summary) && (_jsxs(Flex, { as: StyledAside, container: { direction: 'column', gap: 2 }, children: [summary?.content && (_jsx("div", { role: 'region', "aria-label": summary?.label, children: summary?.content })), utility?.content && (_jsx("div", { role: 'region', "aria-label": utility?.label, children: utility?.content }))] })), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [tasks?.content && (_jsx("div", { role: 'region', "aria-label": tasks?.label, children: tasks.content })), details?.content && (_jsx("div", { role: 'region', "aria-label": details?.label, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(StyledContent, { children: details?.content }) }) }) })), feed?.content && (_jsx("div", { role: 'region', "aria-label": feed?.label, children: feed.content }))] })] }))] })] }));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map

package/lib/components/CaseView/CaseView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  useBreakpoint,\n  Flex,\n  Tabs,\n  TabPanel,\n  Text,\n  MenuButton,\n  useI18n,\n  Icon,\n  useAfterInitialEffect,\n  getEdge,\n  useDirection,\n  throttle\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport {\n  StyledAside,\n  StyledCaseHeader,\n  StyledCaseView,\n  StyledContentContainer,\n  StyledContent\n} from './CaseView.styles';\nimport type { CaseViewProps, Region } from './CaseView.types';\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n  caseId,\n  heading,\n  actions,\n  stages,\n  tasks,\n  summary,\n  feed,\n  utility,\n  promotedActions = [],\n  ...restProps\n}: PropsWithoutRef<CaseViewProps>) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n  const tabsRef = useRef<HTMLElement>(null);\n\n  const tabs = useMemo(() => {\n    if (isMediumOrAbove) return [];\n    const tabsArr: { name: Tab['name']; content: Region['content'] }[] = [];\n\n    if (summary)\n      tabsArr.push({\n        name: 'Summary',\n        content: summary.content\n      });\n    if (feed) tabsArr.push({ name: 'Feed', content: feed.content });\n    if (utility)\n      tabsArr.push({\n        name: 'Utility',\n        content: utility.content\n      });\n\n    return tabsArr.map(tab => ({ ...tab, id: tab.name }));\n  }, [isMediumOrAbove, summary, feed, utility]);\n\n  const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n  const contentEl = useRef<HTMLDivElement>(null);\n  const headerEl = useRef<HTMLDivElement>(null);\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n  const { ltr } = useDirection();\n\n  useAfterInitialEffect(() => {\n    if (tabs.length > 0) setCurrentTabId(cur => cur ?? tabs[0].id);\n  }, [tabs]);\n\n  useLayoutEffect(() => {\n    if (\n      !wrapPromotedActions &&\n      contentEl.current &&\n      actionsContainerEl.current &&\n      headerEl.current\n    ) {\n      const contentStart = getEdge({\n        el: contentEl.current,\n        side: 'leading',\n        ltr\n      });\n\n      const headerGroupEnd = getEdge({\n        el: headerEl.current,\n        side: 'trailing',\n        ltr\n      });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +\n        Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current && contentEl.current) {\n        const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;\n        setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n    promotedActionsWrapHandler();\n\n    if (contentEl.current) {\n      resizeObserver.observe(contentEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [contentEl, actionsContainerEl, headerEl, promotedActions, heading, wrapPromotedActions]);\n\n  return (\n    <StyledCaseView {...restProps}>\n      <StyledCaseHeader computeButtonFgColor={!isMediumOrAbove || promotedActions.length > 0}>\n        <Flex\n          container={{\n            direction: 'column',\n            justify: 'between',\n            pad: 2,\n            alignItems: 'center',\n            gap: 2\n          }}\n          ref={contentEl}\n          as={StyledContentContainer}\n        >\n          <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} item={{ grow: 1 }}>\n            <Text variant='h1' ref={headerEl}>\n              {heading}\n            </Text>\n\n            {(promotedActions.length > 0 || actions) && (\n              <Flex\n                container={{\n                  gap: 1\n                }}\n                ref={actionsContainerEl}\n              >\n                {!wrapPromotedActions &&\n                  promotedActions.map(action => (\n                    <StyledCaseHeaderPromotedAction\n                      variant='secondary'\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n                      key={action.id}\n                    >\n                      {action.text}\n                    </StyledCaseHeaderPromotedAction>\n                  ))}\n                {actions && (\n                  <MenuButton\n                    icon={promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined}\n                    iconOnly={promotedActions.length > 0 || !isMediumOrAbove}\n                    variant='simple'\n                    text={t('actions')}\n                    aria-label={t('actions_for', [caseId])}\n                    menu={{\n                      items: actions.map(action => ({\n                        ...action,\n                        primary: action.text,\n                        visual: action.icon ? <Icon name={action.icon} /> : undefined\n                      })),\n                      scrollAt: 20\n                    }}\n                  />\n                )}\n              </Flex>\n            )}\n          </Flex>\n\n          {wrapPromotedActions && promotedActions.length > 0 && (\n            <Flex\n              item={{ grow: 1 }}\n              container={{\n                justify: 'start',\n                gap: 1,\n                alignItems: 'center',\n                wrap: 'wrap'\n              }}\n            >\n              {promotedActions.map(action => (\n                <StyledCaseHeaderPromotedAction\n                  variant='secondary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n                  key={action.id}\n                >\n                  {action.text}\n                </StyledCaseHeaderPromotedAction>\n              ))}\n            </Flex>\n          )}\n        </Flex>\n      </StyledCaseHeader>\n\n      <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledContentContainer}>\n        {stages?.content}\n        {tabs.length > 0 && currentTabId && (\n          <>\n            {tasks?.content}\n            <div>\n              <Tabs\n                tabs={tabs}\n                onTabClick={setCurrentTabId}\n                currentTabId={currentTabId}\n                ref={tabsRef}\n              />\n\n              {tabs.map(tab => (\n                <TabPanel\n                  tabId={tab.id}\n                  currentTabId={currentTabId}\n                  key={tab.id}\n                  tablistRef={tabsRef}\n                >\n                  <StyledContent>{tab.content}</StyledContent>\n                </TabPanel>\n              ))}\n            </div>\n          </>\n        )}\n\n        {tabs.length === 0 && (\n          <Flex container={{ gap: 2 }}>\n            {(utility || summary) && (\n              <Flex as={StyledAside} container={{ direction: 'column', gap: 2 }}>\n                {summary?.content && (\n                  <div role='region' aria-label={summary?.label}>\n                    {summary?.content}\n                  </div>\n                )}\n                {utility?.content && (\n                  <div role='region' aria-label={utility?.label}>\n                    {utility?.content}\n                  </div>\n                )}\n              </Flex>\n            )}\n            <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n              <div role='region' aria-label={tasks?.label}>\n                {tasks?.content}\n              </div>\n              <div role='region' aria-label={feed?.label}>\n                {feed?.content}\n              </div>\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </StyledCaseView>\n  );\n};\n\nexport default CaseView;\n"]}
+{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  useBreakpoint,\n  Card,\n  CardContent,\n  Flex,\n  Tabs,\n  TabPanel,\n  Text,\n  MenuButton,\n  useI18n,\n  Icon,\n  useAfterInitialEffect,\n  getEdge,\n  useDirection,\n  throttle\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { StyledCaseHeaderPromotedAction } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport {\n  StyledAside,\n  StyledCaseHeader,\n  StyledCaseView,\n  StyledContentContainer,\n  StyledContent\n} from './CaseView.styles';\nimport type { CaseViewProps, Region } from './CaseView.types';\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n  caseId,\n  heading,\n  actions,\n  stages,\n  tasks,\n  summary,\n  details,\n  feed,\n  utility,\n  promotedActions = [],\n  ...restProps\n}: PropsWithoutRef<CaseViewProps>) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n  const tabsRef = useRef<HTMLElement>(null);\n\n  const tabs = useMemo(() => {\n    if (isMediumOrAbove) return [];\n    const tabsArr: { name: Tab['name']; content: Region['content'] }[] = [];\n\n    if (summary)\n      tabsArr.push({\n        name: 'Summary',\n        content: summary.content\n      });\n    if (details) tabsArr.push({ name: details.label, content: details.content });\n    if (feed) tabsArr.push({ name: 'Feed', content: feed.content });\n    if (utility)\n      tabsArr.push({\n        name: 'Utility',\n        content: utility.content\n      });\n\n    return tabsArr.map(tab => ({ ...tab, id: tab.name }));\n  }, [isMediumOrAbove, summary, details, feed, utility]);\n\n  const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n  const contentEl = useRef<HTMLDivElement>(null);\n  const headerEl = useRef<HTMLDivElement>(null);\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n  const { ltr } = useDirection();\n\n  useAfterInitialEffect(() => {\n    if (tabs.length > 0) setCurrentTabId(cur => cur ?? tabs[0].id);\n  }, [tabs]);\n\n  useLayoutEffect(() => {\n    if (\n      !wrapPromotedActions &&\n      contentEl.current &&\n      actionsContainerEl.current &&\n      headerEl.current\n    ) {\n      const contentStart = getEdge({\n        el: contentEl.current,\n        side: 'leading',\n        ltr\n      });\n\n      const headerGroupEnd = getEdge({\n        el: headerEl.current,\n        side: 'trailing',\n        ltr\n      });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +\n        Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current && contentEl.current) {\n        const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;\n        setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n    promotedActionsWrapHandler();\n\n    if (contentEl.current) {\n      resizeObserver.observe(contentEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [contentEl, actionsContainerEl, headerEl, promotedActions, heading, wrapPromotedActions]);\n\n  return (\n    <StyledCaseView {...restProps}>\n      <StyledCaseHeader computeButtonFgColor={!isMediumOrAbove || promotedActions.length > 0}>\n        <Flex\n          container={{\n            direction: 'column',\n            justify: 'between',\n            pad: 2,\n            alignItems: 'center',\n            gap: 2\n          }}\n          ref={contentEl}\n          as={StyledContentContainer}\n        >\n          <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} item={{ grow: 1 }}>\n            <Text variant='h1' ref={headerEl}>\n              {heading}\n            </Text>\n\n            {(promotedActions.length > 0 || actions) && (\n              <Flex\n                container={{\n                  gap: 1\n                }}\n                ref={actionsContainerEl}\n              >\n                {!wrapPromotedActions &&\n                  promotedActions.map(action => (\n                    <StyledCaseHeaderPromotedAction\n                      variant='secondary'\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n                      key={action.id}\n                    >\n                      {action.text}\n                    </StyledCaseHeaderPromotedAction>\n                  ))}\n                {actions && actions.length > 0 && (\n                  <MenuButton\n                    icon={promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined}\n                    iconOnly={promotedActions.length > 0 || !isMediumOrAbove}\n                    variant='simple'\n                    text={t('actions')}\n                    aria-label={t('actions_for', [caseId])}\n                    menu={{\n                      items: actions.map(action => ({\n                        ...action,\n                        primary: action.text,\n                        visual: action.icon ? <Icon name={action.icon} /> : undefined\n                      })),\n                      scrollAt: 20\n                    }}\n                  />\n                )}\n              </Flex>\n            )}\n          </Flex>\n\n          {wrapPromotedActions && promotedActions.length > 0 && (\n            <Flex\n              item={{ grow: 1 }}\n              container={{\n                justify: 'start',\n                gap: 1,\n                alignItems: 'center',\n                wrap: 'wrap'\n              }}\n            >\n              {promotedActions.map(action => (\n                <StyledCaseHeaderPromotedAction\n                  variant='secondary'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n                  key={action.id}\n                >\n                  {action.text}\n                </StyledCaseHeaderPromotedAction>\n              ))}\n            </Flex>\n          )}\n        </Flex>\n      </StyledCaseHeader>\n\n      <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledContentContainer}>\n        {stages?.content}\n        {tabs.length > 0 && currentTabId && (\n          <>\n            {tasks?.content}\n            <div>\n              <Tabs\n                tabs={tabs}\n                onTabClick={setCurrentTabId}\n                currentTabId={currentTabId}\n                ref={tabsRef}\n              />\n\n              {tabs.map(tab => (\n                <TabPanel\n                  tabId={tab.id}\n                  currentTabId={currentTabId}\n                  key={tab.id}\n                  tablistRef={tabsRef}\n                >\n                  <StyledContent>{tab.content}</StyledContent>\n                </TabPanel>\n              ))}\n            </div>\n          </>\n        )}\n\n        {tabs.length === 0 && (\n          <Flex container={{ gap: 2 }}>\n            {(utility || summary) && (\n              <Flex as={StyledAside} container={{ direction: 'column', gap: 2 }}>\n                {summary?.content && (\n                  <div role='region' aria-label={summary?.label}>\n                    {summary?.content}\n                  </div>\n                )}\n                {utility?.content && (\n                  <div role='region' aria-label={utility?.label}>\n                    {utility?.content}\n                  </div>\n                )}\n              </Flex>\n            )}\n            <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n              {tasks?.content && (\n                <div role='region' aria-label={tasks?.label}>\n                  {tasks.content}\n                </div>\n              )}\n              {details?.content && (\n                <div role='region' aria-label={details?.label}>\n                  <Card>\n                    <CardContent>\n                      <StyledContent>{details?.content}</StyledContent>\n                    </CardContent>\n                  </Card>\n                </div>\n              )}\n              {feed?.content && (\n                <div role='region' aria-label={feed?.label}>\n                  {feed.content}\n                </div>\n              )}\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </StyledCaseView>\n  );\n};\n\nexport default CaseView;\n"]}

package/lib/components/CaseView/CaseView.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+export declare const StyledCaseView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCaseHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     computeButtonFgColor: boolean;
-}, never>;
-export declare const StyledAside: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+}>> & string;
+export declare const StyledAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=CaseView.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,gBAAgB;0BAAyC,OAAO;SA2B5E,CAAC;AAIF,eAAO,MAAM,WAAW,yGAKtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAkBjC,CAAC;AAIH,eAAO,MAAM,aAAa,yGAaxB,CAAC"}
+{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,6NAAe,CAAC;AAE3C,eAAO,MAAM,gBAAgB;0BAAyC,OAAO;YA2B5E,CAAC;AAIF,eAAO,MAAM,WAAW,6NAKtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAkBjC,CAAC;AAIH,eAAO,MAAM,aAAa,6NAaxB,CAAC"}

package/lib/components/CaseView/CaseView.types.d.ts

@@ -11,6 +11,8 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
     heading: string;
     /** An icon to serve as a visual for the CaseView. */
     icon?: IconName;
+    /** A secondary text rendered below the heading. */
+    subheading?: string;
     /** Case level promoted actions available in the CaseView header. */
     promotedActions?: Action[];
     /** Case level actions available in an action menu. */
@@ -21,9 +23,17 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
     stages?: Region;
     /** A region to hold a Tasks component. */
     tasks?: Region;
+    /** A region to hold the main details/tabs content. */
+    details?: Region;
     /** A region to hold a Feed component. */
     feed?: Region;
     /** A region to hold a Utilities component. */
     utility?: Region;
+    /** Whether to show the Pulse region. */
+    showPulse?: boolean;
+    /** Whether to show the Utility region. */
+    showUtility?: boolean;
+    /** Whether the case is in a create stage. */
+    isCreateStage?: boolean;
 }
 //# sourceMappingURL=CaseView.types.d.ts.map

package/lib/components/CaseView/CaseView.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/lib/components/CaseView/CaseView.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { NoChildrenProp, Action, BaseProps, IconName } from '@pega/cosmos-react-core';\n\nexport interface Region {\n  label: string;\n  content: ReactNode;\n}\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: IconName;\n  /** Case level promoted actions available in the CaseView header. */\n  promotedActions?: Action[];\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n  /** A region to display any summary information about the CaseView. */\n  summary?: Region;\n  /** A region to hold a Stages component. */\n  stages?: Region;\n  /** A region to hold a Tasks component. */\n  tasks?: Region;\n  /** A region to hold a Feed component. */\n  feed?: Region;\n  /** A region to hold a Utilities component. */\n  utility?: Region;\n}\n"]}
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { NoChildrenProp, Action, BaseProps, IconName } from '@pega/cosmos-react-core';\n\nexport interface Region {\n  label: string;\n  content: ReactNode;\n}\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: IconName;\n  /** A secondary text rendered below the heading. */\n  subheading?: string;\n  /** Case level promoted actions available in the CaseView header. */\n  promotedActions?: Action[];\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n  /** A region to display any summary information about the CaseView. */\n  summary?: Region;\n  /** A region to hold a Stages component. */\n  stages?: Region;\n  /** A region to hold a Tasks component. */\n  tasks?: Region;\n  /** A region to hold the main details/tabs content. */\n  details?: Region;\n  /** A region to hold a Feed component. */\n  feed?: Region;\n  /** A region to hold a Utilities component. */\n  utility?: Region;\n  /** Whether to show the Pulse region. */\n  showPulse?: boolean;\n  /** Whether to show the Utility region. */\n  showUtility?: boolean;\n  /** Whether the case is in a create stage. */\n  isCreateStage?: boolean;\n}\n"]}

package/lib/components/Footer/Footer.d.ts

@@ -0,0 +1,4 @@
+import type { FooterProps } from './Footer.types';
+declare const Footer: ({ links }: FooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQlD,QAAA,MAAM,MAAM,GAAI,WAAW,WAAW,mDAuBrC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Footer/Footer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from '@pega/cosmos-react-core';
+import { StyledFooter, StyledFooterImage, StyledFooterLink, StyledFooterText } from './Footer.styles';
+const Footer = ({ links }) => {
+    if (links.length === 0)
+        return null;
+    return (_jsx(StyledFooter, { children: _jsx(Flex, { container: { alignItems: 'center', justify: 'center', gap: 3, wrap: 'wrap' }, children: links.map(item => item.url ? (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [item.imageLink && _jsx(StyledFooterImage, { src: item.imageLink, alt: '' }), _jsx(StyledFooterLink, { href: item.url, target: '_blank', rel: 'noopener noreferrer', children: item.text })] }, `${item.text}-${item.url}`)) : (_jsx(StyledFooterText, { children: item.text }, `${item.text}-${item.imageLink ?? ''}`))) }) }));
+};
+export default Footer;
+//# sourceMappingURL=Footer.js.map

package/lib/components/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAe,EAAE,EAAE;IACxC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpC,OAAO,CACL,KAAC,YAAY,cACX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAC/E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAChB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACT,MAAC,IAAI,IAAkC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aACjF,IAAI,CAAC,SAAS,IAAI,KAAC,iBAAiB,IAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG,EACpE,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YACxE,IAAI,CAAC,IAAI,GACO,KAJV,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAAE,CAK9B,CACR,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,cACd,IAAI,CAAC,IAAI,IADW,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,CAE1C,CACpB,CACF,GACI,GACM,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { Flex } from '@pega/cosmos-react-core';\n\nimport type { FooterProps } from './Footer.types';\nimport {\n  StyledFooter,\n  StyledFooterImage,\n  StyledFooterLink,\n  StyledFooterText\n} from './Footer.styles';\n\nconst Footer = ({ links }: FooterProps) => {\n  if (links.length === 0) return null;\n\n  return (\n    <StyledFooter>\n      <Flex container={{ alignItems: 'center', justify: 'center', gap: 3, wrap: 'wrap' }}>\n        {links.map(item =>\n          item.url ? (\n            <Flex key={`${item.text}-${item.url}`} container={{ alignItems: 'center', gap: 0.5 }}>\n              {item.imageLink && <StyledFooterImage src={item.imageLink} alt='' />}\n              <StyledFooterLink href={item.url} target='_blank' rel='noopener noreferrer'>\n                {item.text}\n              </StyledFooterLink>\n            </Flex>\n          ) : (\n            <StyledFooterText key={`${item.text}-${item.imageLink ?? ''}`}>\n              {item.text}\n            </StyledFooterText>\n          )\n        )}\n      </Flex>\n    </StyledFooter>\n  );\n};\n\nexport default Footer;\n"]}

package/lib/components/Footer/Footer.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledFooterLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").LinkProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFooterText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledFooterImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+//# sourceMappingURL=Footer.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,uNASvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;;2BA+BguF,CAAC;iDAxB5vF,CAAC;AAIH,eAAO,MAAM,gBAAgB,+NAQ3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,oOAK7B,CAAC"}

package/lib/components/Footer/Footer.styles.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import { Link, calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledFooter = styled.footer(({ theme }) => {
+    return css `
+    position: sticky;
+    inset-block-end: 0;
+    min-height: 2.25rem;
+    z-index: ${theme.base['z-index'].popover};
+    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledFooter.defaultProps = defaultThemeProp;
+export const StyledFooterLink = styled(Link)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize.s};
+    color: ${theme.base.palette['foreground-color']};
+  `;
+});
+StyledFooterLink.defaultProps = defaultThemeProp;
+export const StyledFooterText = styled.span(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize.s};
+    color: ${theme.base.palette['foreground-color']};
+    opacity: ${theme.base.transparency['transparent-3']};
+  `;
+});
+StyledFooterText.defaultProps = defaultThemeProp;
+export const StyledFooterImage = styled.img `
+  display: inline-block;
+  height: 2.25rem;
+  width: auto;
+  vertical-align: middle;
+`;
+StyledFooterImage.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Footer.styles.js.map