@pega/cosmos-react-wss 3.0.0-dev.28.0 → 3.0.0-rc.1

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AppShellProps } from './AppShell.types';
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,SAAS,yGAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;SAyCvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAY5B,CAAC;AAIH,eAAO,MAAM,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,4GAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uGAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,yGAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAEF,eAAO,MAAM,eAAe,0GAkB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;SAiBnC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;SAMpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAiBA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,SAAS,yGAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;SAyCvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAY5B,CAAC;AAIH,eAAO,MAAM,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,4GAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uGAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,yGAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAEF,eAAO,MAAM,eAAe,0GAkB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;SAiBnC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;SAMpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC"}

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

@@ -120,7 +120,7 @@ export const StyledMain = styled.main(({ navPosition, theme }) => {
       --appshell-horizontal-offset: 0;
       position: relative;
       min-height: calc(100vh - ${calculatedHeaderHeight});
-      background-color: ${theme.base.palette['app-background']};
+      background-color: ${theme.base.palette['primary-background']};
 
       :focus {
         outline: none;

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  defaultThemeProp,\n  StyledFlex,\n  StyledImage,\n  StyledText,\n  StyledVisual,\n  tryCatch,\n  useDirection\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 { 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  ({ navPosition, theme }) => {\n    return css`\n      position: sticky;\n      inset-block-start: 0;\n      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n      width: 100%;\n      background-color: ${theme.base.palette['primary-background']};\n      z-index: calc(${theme.base['z-index'].popover} + 1);\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n      ${StyledImage} {\n        height: 1.625rem;\n      }\n\n      & > ${StyledFlex} {\n        height: ${headerHeight};\n\n        ${StyledAppHeaderOperator} {\n          margin: ${theme.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: ${theme.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 StyledLink = styled.a(({ theme }) => {\n  const { start } = useDirection();\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\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        ${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        ${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.span(\n  ({\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);\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: inset ${theme.base.shadow.focus};\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"]}
+{"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  defaultThemeProp,\n  StyledFlex,\n  StyledImage,\n  StyledText,\n  StyledVisual,\n  tryCatch,\n  useDirection\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 { 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  ({ navPosition, theme }) => {\n    return css`\n      position: sticky;\n      inset-block-start: 0;\n      height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n      width: 100%;\n      background-color: ${theme.base.palette['primary-background']};\n      z-index: calc(${theme.base['z-index'].popover} + 1);\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n      ${StyledImage} {\n        height: 1.625rem;\n      }\n\n      & > ${StyledFlex} {\n        height: ${headerHeight};\n\n        ${StyledAppHeaderOperator} {\n          margin: ${theme.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: ${theme.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 StyledLink = styled.a(({ theme }) => {\n  const { start } = useDirection();\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\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        ${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        ${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['primary-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.span(\n  ({\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);\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: inset ${theme.base.shadow.focus};\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"]}

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { CaseViewProps } from './CaseView.types';
+declare const CaseView: FC<CaseViewProps & ForwardProps>;
+export default CaseView;
+//# sourceMappingURL=CaseView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAsC,MAAM,OAAO,CAAC;AAE/D,OAAO,EACL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAAE,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAEzD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAuG9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CaseView/CaseView.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useBreakpoint, Flex, Tabs, TabPanel, Text, MenuButton, useI18n, Icon, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { StyledAside, StyledCaseHeader, StyledCaseView, StyledContentContainer } from './CaseView.styles';
+const CaseView = ({ heading, actions, stages, tasks, summary, feed, utility, ...restProps }) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const t = useI18n();
+    const tabs = useMemo(() => {
+        if (isMediumOrAbove)
+            return null;
+        const tabsArr = [];
+        if (summary)
+            tabsArr.push({ name: 'Summary', content: summary.content });
+        if (feed)
+            tabsArr.push({ name: 'Feed', content: feed.content });
+        if (utility)
+            tabsArr.push({ name: 'Utility', content: utility.content });
+        return tabsArr.map(tab => ({ ...tab, id: tab.name }));
+    }, [isMediumOrAbove, summary, feed, utility]);
+    const [currentTabId, setCurrentTabId] = useState(tabs && tabs.length > 0 ? tabs[0].id : null);
+    useAfterInitialEffect(() => {
+        if (tabs && tabs.length > 0)
+            setCurrentTabId(cur => cur ?? tabs[0].id);
+    }, [tabs]);
+    return (_jsxs(StyledCaseView, { ...restProps, children: [_jsx(StyledCaseHeader, { children: _jsxs(Flex, { container: { justify: 'between', pad: 2, alignItems: 'center' }, as: StyledContentContainer, children: [_jsx(Text, { variant: 'h1', children: heading }), actions && (_jsx("div", { children: _jsx(MenuButton, { icon: !isMediumOrAbove ? 'more' : undefined, iconOnly: !isMediumOrAbove, variant: 'simple', text: t('actions'), menu: {
+                                    items: actions.map(action => ({
+                                        ...action,
+                                        primary: action.text,
+                                        visual: action.icon ? _jsx(Icon, { name: action.icon }) : undefined
+                                    })),
+                                    scrollAt: 20
+                                } }) }))] }) }), _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, as: StyledContentContainer, children: [stages?.content, tabs && currentTabId && (_jsxs(_Fragment, { children: [tasks?.content, _jsx(Tabs, { tabs: tabs, onTabClick: setCurrentTabId, currentTabId: currentTabId }), tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id)))] })), !tabs && (_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 })] })] }))] })] }));
+};
+export default CaseView;
+//# sourceMappingURL=CaseView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, useMemo, useState } from 'react';\n\nimport {\n  ForwardProps,\n  useBreakpoint,\n  Flex,\n  Tabs,\n  TabPanel,\n  Tab,\n  Text,\n  MenuButton,\n  useI18n,\n  Icon,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledAside,\n  StyledCaseHeader,\n  StyledCaseView,\n  StyledContentContainer\n} from './CaseView.styles';\nimport { CaseViewProps, Region } from './CaseView.types';\n\nconst CaseView: FC<CaseViewProps & ForwardProps> = ({\n  heading,\n  actions,\n  stages,\n  tasks,\n  summary,\n  feed,\n  utility,\n  ...restProps\n}: PropsWithoutRef<CaseViewProps>) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const tabs = useMemo(() => {\n    if (isMediumOrAbove) return null;\n    const tabsArr: { name: Tab['name']; content: Region['content'] }[] = [];\n\n    if (summary) tabsArr.push({ name: 'Summary', content: summary.content });\n    if (feed) tabsArr.push({ name: 'Feed', content: feed.content });\n    if (utility) tabsArr.push({ name: 'Utility', content: utility.content });\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  useAfterInitialEffect(() => {\n    if (tabs && tabs.length > 0) setCurrentTabId(cur => cur ?? tabs[0].id);\n  }, [tabs]);\n\n  return (\n    <StyledCaseView {...restProps}>\n      <StyledCaseHeader>\n        <Flex\n          container={{ justify: 'between', pad: 2, alignItems: 'center' }}\n          as={StyledContentContainer}\n        >\n          <Text variant='h1'>{heading}</Text>\n          {actions && (\n            <div>\n              <MenuButton\n                icon={!isMediumOrAbove ? 'more' : undefined}\n                iconOnly={!isMediumOrAbove}\n                variant='simple'\n                text={t('actions')}\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            </div>\n          )}\n        </Flex>\n      </StyledCaseHeader>\n\n      <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledContentContainer}>\n        {stages?.content}\n\n        {tabs && currentTabId && (\n          <>\n            {tasks?.content}\n            <Tabs tabs={tabs} onTabClick={setCurrentTabId} currentTabId={currentTabId} />\n\n            {tabs.map(tab => (\n              <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n                {tab.content}\n              </TabPanel>\n            ))}\n          </>\n        )}\n\n        {!tabs && (\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"]}

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

@@ -0,0 +1,5 @@
+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 StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CaseView.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,yGAItB,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAMjC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAmB3B,CAAC;AAIH,eAAO,MAAM,cAAc,yGAOzB,CAAC"}

package/lib/components/CaseView/CaseView.styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { defaultThemeProp, StyledCard, tryCatch, useBreakpoint } from '@pega/cosmos-react-core';
+import { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
+import { StyledFeedPost } from '@pega/cosmos-react-social/lib/components/Feed/FeedPost';
+import { StyledCaseSummaryFields } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
+export const StyledAside = styled.div(() => {
+    return css `
+    max-width: 40%;
+  `;
+});
+StyledAside.defaultProps = defaultThemeProp;
+export const StyledContentContainer = styled.div(() => {
+    return css `
+    width: 100%;
+    max-width: 75rem;
+    margin-inline: auto;
+  `;
+});
+export const StyledCaseHeader = styled.header(({ theme }) => {
+    const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
+    const isMediumOrAbove = useBreakpoint('md');
+    return css `
+    position: relative;
+    background-color: ${theme.base.palette['brand-primary']};
+
+    h1 {
+      color: ${color};
+    }
+
+    ${!isMediumOrAbove &&
+        css `
+      button {
+        color: ${color};
+      }
+    `}
+  `;
+});
+StyledCaseHeader.defaultProps = defaultThemeProp;
+export const StyledCaseView = styled.div(({ theme }) => {
+    return css `
+    ${StyledStages}, ${StyledCaseSummaryFields}, ${StyledFeedPost}, ${StyledCard} {
+      border: ${theme.components.button['border-width']} solid ${theme.base.palette['border-line']};
+      border-radius: ${theme.base['border-radius']};
+    }
+  `;
+});
+StyledCaseView.defaultProps = defaultThemeProp;
+//# sourceMappingURL=CaseView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAE1G,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACzC,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IACjF,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;;;eAG5C,KAAK;;;MAGd,CAAC,eAAe;QAClB,GAAG,CAAA;;iBAEU,KAAK;;KAEjB;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;MACN,YAAY,KAAK,uBAAuB,KAAK,cAAc,KAAK,UAAU;gBAChE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;uBAC3E,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp, StyledCard, tryCatch, useBreakpoint } from '@pega/cosmos-react-core';\nimport { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\nimport { StyledFeedPost } from '@pega/cosmos-react-social/lib/components/Feed/FeedPost';\nimport { StyledCaseSummaryFields } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nexport const StyledAside = styled.div(() => {\n  return css`\n    max-width: 40%;\n  `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(() => {\n  return css`\n    width: 100%;\n    max-width: 75rem;\n    margin-inline: auto;\n  `;\n});\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n  const isMediumOrAbove = useBreakpoint('md');\n\n  return css`\n    position: relative;\n    background-color: ${theme.base.palette['brand-primary']};\n\n    h1 {\n      color: ${color};\n    }\n\n    ${!isMediumOrAbove &&\n    css`\n      button {\n        color: ${color};\n      }\n    `}\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n  return css`\n    ${StyledStages}, ${StyledCaseSummaryFields}, ${StyledFeedPost}, ${StyledCard} {\n      border: ${theme.components.button['border-width']} solid ${theme.base.palette['border-line']};\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { NoChildrenProp, Action, BaseProps, IconName } from '@pega/cosmos-react-core';
+export interface Region {
+    label: string;
+    content: ReactNode;
+}
+export interface CaseViewProps extends NoChildrenProp, BaseProps {
+    /** A text region for the title of the CaseView. */
+    heading: string;
+    /** An icon to serve as a visual for the CaseView. */
+    icon?: IconName;
+    /** Case level actions available in an action menu. */
+    actions?: Action[];
+    /** A region to display any summary information about the CaseView. */
+    summary?: Region;
+    /** A region to hold a Stages component. */
+    stages?: Region;
+    /** A region to hold a Tasks component. */
+    tasks?: Region;
+    /** A region to hold a Feed component. */
+    feed?: Region;
+    /** A region to hold a Utilities component. */
+    utility?: Region;
+}
+//# sourceMappingURL=CaseView.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEtF,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS;IAC9D,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CaseView.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { 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 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 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"]}

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

@@ -0,0 +1,3 @@
+export { default } from './CaseView';
+export { CaseViewProps } from './CaseView.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/CaseView/index.js

@@ -0,0 +1,2 @@
+export { default } from './CaseView';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView.types';\n"]}

package/lib/index.d.ts

@@ -1,5 +1,7 @@
 export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
+export { default as CaseView } from './components/CaseView';
+export * from './components/CaseView';
 export * from './components/PageTemplates';
 export { default as QuickCreate } from './components/QuickCreate';
 export * from './components/QuickCreate';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -1,6 +1,8 @@
 // This file is autogenerated. Any changes will be overwritten.
 export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
+export { default as CaseView } from './components/CaseView';
+export * from './components/CaseView';
 export * from './components/PageTemplates';
 export { default as QuickCreate } from './components/QuickCreate';
 export * from './components/QuickCreate';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport * from './components/PageTemplates';\nexport { default as QuickCreate } from './components/QuickCreate';\nexport * from './components/QuickCreate';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport * from './components/PageTemplates';\nexport { default as QuickCreate } from './components/QuickCreate';\nexport * from './components/QuickCreate';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "3.0.0-dev.28.0",
+  "version": "3.0.0-rc.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.28.0",
+    "@pega/cosmos-react-core": "3.0.0-rc.1",
+    "@pega/cosmos-react-social": "3.0.0-rc.1",
+    "@pega/cosmos-react-work": "3.0.0-rc.1",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",