@pega/cosmos-react-wss 9.0.0-build.27.7 → 9.0.0-build.27.9

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAO/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAyT3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CA0Y3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -1,17 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Avatar, Backdrop, Button, ThemeOverride, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent, useTheme, VisuallyHiddenText, ThemeSwitcher, MenuButton } from '@pega/cosmos-react-core';
+import { Avatar, Backdrop, Button, ThemeOverride, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent, useTheme, VisuallyHiddenText, MenuButton, ThemeSwitcher } from '@pega/cosmos-react-core';
 import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
 import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';
 import useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';
-import { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock, StyledBannerRegion } from './AppShell.styles';
+import Footer from '../Footer';
+import { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledModernAppHeaderOperator, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock, StyledBannerRegion } from './AppShell.styles';
 import Notifications from './Notifications';
 import MobileHeaderContent from './MobileHeaderContent';
 import NavLinks from './NavLinks';
 const AppShell = forwardRef(function AppShell(props, ref) {
-    const { main, banners, appInfo, navLinks, operator, notifications, contextSwitcher = {}, navAlignment = 'end', navPosition = 'inline', helpMenu } = props;
+    const { main, banners, appInfo, navLinks, operator, notifications, contextSwitcher = {}, navAlignment = 'end', navPosition = 'inline', isDefaultWSS = true, helpMenu, footer } = props;
     const t = useI18n();
     const { contexts, onContextClick, label: contextSwitcherLabel = t('switch_to') } = contextSwitcher;
     const [backdropOpen, setBackdropOpen] = useState(false);
@@ -26,8 +27,8 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const [notificationsButtonEl, setNotificationsButtonEl] = useElement();
     const minInlineWidth = useRef(0);
     const theme = useTheme();
-    const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
     const { themeMode, onThemeModeChange } = useThemeMode();
+    const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
     const headerRef = useConsolidatedRef(setHeaderEl, ref);
     const isSmallOrAbove = useBreakpoint('sm');
     const { end } = useDirection();
@@ -100,7 +101,8 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             openDrawer('notifications');
         }
     }, [hasMobileNav, drawerOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'end', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(_Fragment, { children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
+    const hasFooter = !!footer?.length;
+    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [isDefaultWSS ? (_jsxs(_Fragment, { children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, item: navPosition === 'inline' ? { grow: 1 } : undefined, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), navPosition !== 'below' && (_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }))] })), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
                                                         if (!hasMobileNav) {
                                                             if (notificationsPopover) {
                                                                 setNotificationsPopover(false);
@@ -114,9 +116,11 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                                                         else {
                                                             openDrawer('notifications');
                                                         }
-                                                    }, children: _jsxs(StyledNotificationCount, { children: [_jsx(Icon, { name: 'bell' }), !!notifications.count && (_jsx(StyledCountIcon, { variant: 'urgent', children: notifications.count }))] }) }), _jsx(Popover, { ref: setPopoverEl, show: notificationsPopover, target: notificationsButtonEl, placement: 'bottom-end', children: _jsx(Notifications, { ...notifications, popover: true }) })] })), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
+                                                    }, children: _jsxs(StyledNotificationCount, { children: [_jsx(Icon, { name: 'bell' }), !!notifications.count && (_jsx(StyledCountIcon, { variant: 'urgent', children: notifications.count }))] }) }), _jsx(Popover, { ref: setPopoverEl, show: notificationsPopover, target: notificationsButtonEl, placement: 'bottom-end', children: _jsx(Notifications, { ...notifications, popover: true }) })] })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
                                                 items: helpMenu
-                                            } })), !hasMobileNav && (_jsx(Operator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.avatar.name, children: _jsx(Avatar, { ...operator.avatar }) })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), !hasMobileNav && navPosition === 'below' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] }) }), _jsxs(StyledMain, { navPosition: navPosition, children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
+                                            } })), !hasMobileNav && (_jsxs(Operator, { as: isDefaultWSS ? StyledAppHeaderOperator : StyledModernAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.avatar.name, children: [isDefaultWSS ? (_jsx(Avatar, { ...operator.avatar })) : (_jsx(Avatar, { ...operator.avatar, size: 's' })), !isDefaultWSS && operator.avatar.name && (_jsx(Text, { variant: 'secondary', children: t('hello_name', [operator.avatar.name]) }))] })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), navPosition === 'below' &&
+                            !hasMobileNav &&
+                            (isDefaultWSS ? (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true })) : (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), _jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName })] }), _jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: 'below' })] })))] }) }), _jsxs(StyledMain, { navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, "$hasFooter": hasFooter, children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }), footer && footer.length > 0 && _jsx(Footer, { links: footer }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
                     if (e.currentTarget === e.target)
                         setDrawerOpen(false);
                 }, children: _jsxs(Drawer, { open: drawerOpen, onAfterClose: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n  Avatar,\n  Backdrop,\n  Button,\n  ThemeOverride,\n  ContextSwitcher,\n  debounce,\n  Drawer,\n  Flex,\n  Icon,\n  Image,\n  Popover,\n  SkipLinks,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useTheme,\n  VisuallyHiddenText,\n  ThemeSwitcher,\n  MenuButton\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n  StyledAppHeader,\n  StyledCountIcon,\n  StyledHamburgerMenu,\n  StyledMain,\n  StyledNotificationCount,\n  StyledPrimaryName,\n  StyledEndNavBlock,\n  StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n  props: PropsWithoutRef<AppShellProps>,\n  ref: AppShellProps['ref']\n) {\n  const {\n    main,\n    banners,\n    appInfo,\n    navLinks,\n    operator,\n    notifications,\n    contextSwitcher = {},\n    navAlignment = 'end',\n    navPosition = 'inline',\n    helpMenu\n  } = props;\n  const t = useI18n();\n  const {\n    contexts,\n    onContextClick,\n    label: contextSwitcherLabel = t('switch_to')\n  } = contextSwitcher;\n  const [backdropOpen, setBackdropOpen] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [drawerContent, setDrawerContent] = useState('');\n  const [notificationsPopover, setNotificationsPopover] = useState(false);\n  const [linksCollapsed, setLinksCollapsed] = useState(false);\n  const [hasMobileNav, setHasMobileNav] = useState(true);\n\n  const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n  const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n  const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n  const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n  const minInlineWidth = useRef(0);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const { end } = useDirection();\n\n  let appInfoAs: ElementType = 'div';\n  if (appInfo.href) appInfoAs = 'a';\n  else if (appInfo.onClick) appInfoAs = BareButton;\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const closeDrawer = () => {\n    setDrawerContent('');\n    setBackdropOpen(false);\n  };\n\n  const openDrawer = (content: 'notifications' | 'navigationOperator') => {\n    setDrawerContent(content);\n    setBackdropOpen(true);\n  };\n\n  useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n    setNotificationsPopover(false);\n    notifications?.onNotificationsClose?.();\n  });\n\n  const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n    if (entries[0].contentRect.width > minInlineWidth.current) {\n      setLinksCollapsed(false);\n    }\n  }, 100);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (\n          entries[0].intersectionRatio > 0 &&\n          entries[0].intersectionRatio < 1 &&\n          !linksCollapsed\n        ) {\n          if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n          setLinksCollapsed(true);\n        } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n      },\n      { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n    );\n\n    if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n      intersectionObserver.observe(\n        navAlignment === 'start'\n          ? (navSectionEl.lastChild as Element)\n          : (navSectionEl.firstChild as Element)\n      );\n      resizeObserver.observe(headerEl);\n    }\n\n    return () => {\n      if (!headerEl) {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      }\n    };\n  }, [headerEl, navSectionEl, navLinks]);\n\n  useEffect(() => {\n    setHasMobileNav(!isSmallOrAbove || linksCollapsed);\n  }, [isSmallOrAbove, linksCollapsed]);\n\n  useEffect(() => {\n    if (!hasMobileNav && drawerOpen) {\n      if (drawerContent === 'notifications' && notifications) {\n        setNotificationsPopover(true);\n      }\n      setDrawerOpen(false);\n    } else if (hasMobileNav && notificationsPopover) {\n      setNotificationsPopover(false);\n      openDrawer('notifications');\n    }\n  }, [hasMobileNav, drawerOpen]);\n\n  return (\n    <>\n      <SkipLinks items={skipLinks} />\n      <ThemeOverride theme={headerTheme}>\n        <StyledAppHeader ref={headerRef} navPosition={navPosition}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\n            {contexts && onContextClick && contexts.length > 1 && (\n              <ContextSwitcher\n                contexts={contexts}\n                onContextClick={onContextClick}\n                label={contextSwitcherLabel}\n                container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n              />\n            )}\n\n            <Flex\n              as={appInfoAs}\n              container={{ alignItems: 'end', pad: [1, 4, 1, 1], gap: 1 }}\n              href={appInfo.href}\n              onClick={appInfo.onClick}\n              target={appInfo.target}\n            >\n              <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n              {!hasMobileNav && (\n                <>\n                  <Text\n                    as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n                    variant='h1'\n                  >\n                    {appInfo.appName}\n                  </Text>\n                  {appInfo.portalName && (\n                    <Text variant='h2' as='span'>\n                      {appInfo.portalName}\n                    </Text>\n                  )}\n                </>\n              )}\n            </Flex>\n\n            {!hasMobileNav && navPosition === 'inline' && (\n              <NavLinks\n                ref={setNavSectionEl}\n                navLinks={navLinks}\n                navAlignment={navAlignment}\n                navPosition={navPosition}\n              />\n            )}\n\n            <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n              {notifications && (\n                <>\n                  <Button\n                    ref={setNotificationsButtonEl}\n                    variant='simple'\n                    label={t('open_app_header_notifications')}\n                    icon\n                    onClick={() => {\n                      if (!hasMobileNav) {\n                        if (notificationsPopover) {\n                          setNotificationsPopover(false);\n                          notifications.onNotificationsClose?.();\n                        } else {\n                          setNotificationsPopover(true);\n                          notifications.onNotificationsOpen?.();\n                        }\n                      } else {\n                        openDrawer('notifications');\n                      }\n                    }}\n                  >\n                    <StyledNotificationCount>\n                      <Icon name='bell' />\n                      {!!notifications.count && (\n                        <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n                      )}\n                    </StyledNotificationCount>\n                  </Button>\n                  <Popover\n                    ref={setPopoverEl}\n                    show={notificationsPopover}\n                    target={notificationsButtonEl}\n                    placement='bottom-end'\n                  >\n                    <Notifications {...notifications} popover />\n                  </Popover>\n                </>\n              )}\n              {onThemeModeChange && (\n                <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n              )}\n              {helpMenu && (\n                <MenuButton\n                  variant='simple'\n                  icon='help'\n                  text={t('app_header_help')}\n                  iconOnly\n                  menu={{\n                    items: helpMenu\n                  }}\n                />\n              )}\n              {!hasMobileNav && (\n                <Operator\n                  as={StyledAppHeaderOperator}\n                  actions={operator.actions}\n                  popover={{ placement: 'bottom-start' }}\n                  name={operator.avatar.name}\n                >\n                  <Avatar {...operator.avatar} />\n                </Operator>\n              )}\n\n              {hasMobileNav && (\n                <Button\n                  as={StyledHamburgerMenu}\n                  label={t('open_app_header_drawer')}\n                  variant='simple'\n                  icon\n                  onClick={() => openDrawer('navigationOperator')}\n                >\n                  <Icon name='bars' />\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          {!hasMobileNav && navPosition === 'below' && (\n            <NavLinks\n              ref={setNavSectionEl}\n              navLinks={navLinks}\n              navAlignment={navAlignment}\n              navPosition={navPosition}\n            />\n          )}\n        </StyledAppHeader>\n      </ThemeOverride>\n\n      <StyledMain navPosition={navPosition}>\n        {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n        {main}\n      </StyledMain>\n\n      <Backdrop\n        open={backdropOpen}\n        transitionSpeed='none'\n        onAfterTransitionIn={() => setDrawerOpen(true)}\n        onBeforeTransitionOut={() => setDrawerOpen(false)}\n        onClick={e => {\n          if (e.currentTarget === e.target) setDrawerOpen(false);\n        }}\n      >\n        <Drawer\n          open={drawerOpen}\n          onAfterClose={() => {\n            closeDrawer();\n            if (drawerContent === 'notifications') {\n              notifications?.onNotificationsClose?.();\n            }\n          }}\n          onAfterOpen={() => {\n            if (drawerContent === 'notifications') {\n              notifications?.onNotificationsOpen?.();\n            }\n          }}\n          position='fixed'\n          placement={end}\n          size='min(26rem, calc(100vw - 5rem))'\n          nullWhenClosed\n        >\n          {drawerContent === 'notifications' && notifications && (\n            <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n          )}\n          {drawerContent === 'navigationOperator' && (\n            <MobileHeaderContent\n              appInfo={appInfo}\n              navLinks={navLinks}\n              operator={operator}\n              onClose={() => setDrawerOpen(false)}\n            />\n          )}\n        </Drawer>\n      </Backdrop>\n    </>\n  );\n});\n\nexport default AppShell;\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n  Avatar,\n  Backdrop,\n  Button,\n  ThemeOverride,\n  ContextSwitcher,\n  debounce,\n  Drawer,\n  Flex,\n  Icon,\n  Image,\n  Popover,\n  SkipLinks,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useTheme,\n  VisuallyHiddenText,\n  MenuButton,\n  ThemeSwitcher\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport Footer from '../Footer';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n  StyledAppHeader,\n  StyledCountIcon,\n  StyledHamburgerMenu,\n  StyledMain,\n  StyledModernAppHeaderOperator,\n  StyledNotificationCount,\n  StyledPrimaryName,\n  StyledEndNavBlock,\n  StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n  props: PropsWithoutRef<AppShellProps>,\n  ref: AppShellProps['ref']\n) {\n  const {\n    main,\n    banners,\n    appInfo,\n    navLinks,\n    operator,\n    notifications,\n    contextSwitcher = {},\n    navAlignment = 'end',\n    navPosition = 'inline',\n    isDefaultWSS = true,\n    helpMenu,\n    footer\n  } = props;\n  const t = useI18n();\n  const {\n    contexts,\n    onContextClick,\n    label: contextSwitcherLabel = t('switch_to')\n  } = contextSwitcher;\n  const [backdropOpen, setBackdropOpen] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [drawerContent, setDrawerContent] = useState('');\n  const [notificationsPopover, setNotificationsPopover] = useState(false);\n  const [linksCollapsed, setLinksCollapsed] = useState(false);\n  const [hasMobileNav, setHasMobileNav] = useState(true);\n\n  const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n  const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n  const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n  const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n  const minInlineWidth = useRef(0);\n  const theme = useTheme();\n  const { themeMode, onThemeModeChange } = useThemeMode();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n  const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const { end } = useDirection();\n\n  let appInfoAs: ElementType = 'div';\n  if (appInfo.href) appInfoAs = 'a';\n  else if (appInfo.onClick) appInfoAs = BareButton;\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const closeDrawer = () => {\n    setDrawerContent('');\n    setBackdropOpen(false);\n  };\n\n  const openDrawer = (content: 'notifications' | 'navigationOperator') => {\n    setDrawerContent(content);\n    setBackdropOpen(true);\n  };\n\n  useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n    setNotificationsPopover(false);\n    notifications?.onNotificationsClose?.();\n  });\n\n  const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n    if (entries[0].contentRect.width > minInlineWidth.current) {\n      setLinksCollapsed(false);\n    }\n  }, 100);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (\n          entries[0].intersectionRatio > 0 &&\n          entries[0].intersectionRatio < 1 &&\n          !linksCollapsed\n        ) {\n          if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n          setLinksCollapsed(true);\n        } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n      },\n      { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n    );\n\n    if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n      intersectionObserver.observe(\n        navAlignment === 'start'\n          ? (navSectionEl.lastChild as Element)\n          : (navSectionEl.firstChild as Element)\n      );\n      resizeObserver.observe(headerEl);\n    }\n\n    return () => {\n      if (!headerEl) {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      }\n    };\n  }, [headerEl, navSectionEl, navLinks]);\n\n  useEffect(() => {\n    setHasMobileNav(!isSmallOrAbove || linksCollapsed);\n  }, [isSmallOrAbove, linksCollapsed]);\n\n  useEffect(() => {\n    if (!hasMobileNav && drawerOpen) {\n      if (drawerContent === 'notifications' && notifications) {\n        setNotificationsPopover(true);\n      }\n      setDrawerOpen(false);\n    } else if (hasMobileNav && notificationsPopover) {\n      setNotificationsPopover(false);\n      openDrawer('notifications');\n    }\n  }, [hasMobileNav, drawerOpen]);\n\n  const hasFooter = !!footer?.length;\n\n  return (\n    <>\n      <SkipLinks items={skipLinks} />\n      <ThemeOverride theme={headerTheme}>\n        <StyledAppHeader ref={headerRef} navPosition={navPosition} $isDefaultWSS={isDefaultWSS}>\n          <Flex container={{ alignItems: 'center', justify: 'between' }}>\n            {isDefaultWSS ? (\n              <>\n                {contexts && onContextClick && contexts.length > 1 && (\n                  <ContextSwitcher\n                    contexts={contexts}\n                    onContextClick={onContextClick}\n                    label={contextSwitcherLabel}\n                    container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n                  />\n                )}\n\n                <Flex\n                  as={appInfoAs}\n                  container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n                  href={appInfo.href}\n                  onClick={appInfo.onClick}\n                  target={appInfo.target}\n                >\n                  <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n                  {!hasMobileNav && (\n                    <Text\n                      as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n                      variant='h1'\n                    >\n                      {appInfo.appName}\n                    </Text>\n                  )}\n                </Flex>\n\n                {!hasMobileNav && navPosition === 'inline' && (\n                  <NavLinks\n                    ref={setNavSectionEl}\n                    navLinks={navLinks}\n                    navAlignment={navAlignment}\n                    navPosition={navPosition}\n                    isDefaultWSS\n                  />\n                )}\n              </>\n            ) : (\n              <Flex\n                container={{ alignItems: 'center' }}\n                item={navPosition === 'inline' ? { grow: 1 } : undefined}\n              >\n                {contexts && onContextClick && contexts.length > 1 && (\n                  <ContextSwitcher\n                    contexts={contexts}\n                    onContextClick={onContextClick}\n                    label={contextSwitcherLabel}\n                    container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n                  />\n                )}\n\n                {navPosition !== 'below' && (\n                  <Flex\n                    as={appInfoAs}\n                    container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n                    href={appInfo.href}\n                    onClick={appInfo.onClick}\n                    target={appInfo.target}\n                  >\n                    <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n                    {!hasMobileNav && (\n                      <Text\n                        as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n                        variant='h1'\n                      >\n                        {appInfo.appName}\n                      </Text>\n                    )}\n                  </Flex>\n                )}\n\n                {!hasMobileNav && navPosition === 'inline' && (\n                  <NavLinks\n                    ref={setNavSectionEl}\n                    navLinks={navLinks}\n                    navAlignment={navAlignment}\n                    navPosition={navPosition}\n                  />\n                )}\n              </Flex>\n            )}\n\n            <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n              {onThemeModeChange && (\n                <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n              )}\n              {notifications && (\n                <>\n                  <Button\n                    ref={setNotificationsButtonEl}\n                    variant='simple'\n                    label={t('open_app_header_notifications')}\n                    icon\n                    onClick={() => {\n                      if (!hasMobileNav) {\n                        if (notificationsPopover) {\n                          setNotificationsPopover(false);\n                          notifications.onNotificationsClose?.();\n                        } else {\n                          setNotificationsPopover(true);\n                          notifications.onNotificationsOpen?.();\n                        }\n                      } else {\n                        openDrawer('notifications');\n                      }\n                    }}\n                  >\n                    <StyledNotificationCount>\n                      <Icon name='bell' />\n                      {!!notifications.count && (\n                        <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n                      )}\n                    </StyledNotificationCount>\n                  </Button>\n                  <Popover\n                    ref={setPopoverEl}\n                    show={notificationsPopover}\n                    target={notificationsButtonEl}\n                    placement='bottom-end'\n                  >\n                    <Notifications {...notifications} popover />\n                  </Popover>\n                </>\n              )}\n              {helpMenu && (\n                <MenuButton\n                  variant='simple'\n                  icon='help'\n                  text={t('app_header_help')}\n                  iconOnly\n                  menu={{\n                    items: helpMenu\n                  }}\n                />\n              )}\n              {!hasMobileNav && (\n                <Operator\n                  as={isDefaultWSS ? StyledAppHeaderOperator : StyledModernAppHeaderOperator}\n                  actions={operator.actions}\n                  popover={{ placement: 'bottom-start' }}\n                  name={operator.avatar.name}\n                >\n                  {isDefaultWSS ? (\n                    <Avatar {...operator.avatar} />\n                  ) : (\n                    <Avatar {...operator.avatar} size='s' />\n                  )}\n                  {!isDefaultWSS && operator.avatar.name && (\n                    <Text variant='secondary'>{t('hello_name', [operator.avatar.name])}</Text>\n                  )}\n                </Operator>\n              )}\n\n              {hasMobileNav && (\n                <Button\n                  as={StyledHamburgerMenu}\n                  label={t('open_app_header_drawer')}\n                  variant='simple'\n                  icon\n                  onClick={() => openDrawer('navigationOperator')}\n                >\n                  <Icon name='bars' />\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          {navPosition === 'below' &&\n            !hasMobileNav &&\n            (isDefaultWSS ? (\n              <NavLinks\n                ref={setNavSectionEl}\n                navLinks={navLinks}\n                navAlignment={navAlignment}\n                navPosition={navPosition}\n                isDefaultWSS\n              />\n            ) : (\n              <Flex container={{ alignItems: 'center', gap: 1 }}>\n                <Flex\n                  as={appInfoAs}\n                  container={{ alignItems: 'center', gap: 1 }}\n                  href={appInfo.href}\n                  onClick={appInfo.onClick}\n                  target={appInfo.target}\n                >\n                  <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n                  <Text\n                    as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n                    variant='h1'\n                  >\n                    {appInfo.appName}\n                  </Text>\n                </Flex>\n                <NavLinks\n                  ref={setNavSectionEl}\n                  navLinks={navLinks}\n                  navAlignment={navAlignment}\n                  navPosition='below'\n                />\n              </Flex>\n            ))}\n        </StyledAppHeader>\n      </ThemeOverride>\n\n      <StyledMain navPosition={navPosition} $isDefaultWSS={isDefaultWSS} $hasFooter={hasFooter}>\n        {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n        {main}\n      </StyledMain>\n\n      {footer && footer.length > 0 && <Footer links={footer} />}\n\n      <Backdrop\n        open={backdropOpen}\n        transitionSpeed='none'\n        onAfterTransitionIn={() => setDrawerOpen(true)}\n        onBeforeTransitionOut={() => setDrawerOpen(false)}\n        onClick={e => {\n          if (e.currentTarget === e.target) setDrawerOpen(false);\n        }}\n      >\n        <Drawer\n          open={drawerOpen}\n          onAfterClose={() => {\n            closeDrawer();\n            if (drawerContent === 'notifications') {\n              notifications?.onNotificationsClose?.();\n            }\n          }}\n          onAfterOpen={() => {\n            if (drawerContent === 'notifications') {\n              notifications?.onNotificationsOpen?.();\n            }\n          }}\n          position='fixed'\n          placement={end}\n          size='min(26rem, calc(100vw - 5rem))'\n          nullWhenClosed\n        >\n          {drawerContent === 'notifications' && notifications && (\n            <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n          )}\n          {drawerContent === 'navigationOperator' && (\n            <MobileHeaderContent\n              appInfo={appInfo}\n              navLinks={navLinks}\n              operator={operator}\n              onClose={() => setDrawerOpen(false)}\n            />\n          )}\n        </Drawer>\n      </Backdrop>\n    </>\n  );\n});\n\nexport default AppShell;\n"]}

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

@@ -1,7 +1,9 @@
 import type { AppShellProps } from './AppShell.types';
+export declare const footerHeight = "2.25rem";
 export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledAppHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     navPosition: AppShellProps["navPosition"];
+    $isDefaultWSS: boolean;
 }>> & string;
 export declare const StyledPrimaryName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledEndNavBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -10,14 +12,17 @@ export declare const StyledEndNavBlock: import("styled-components/dist/types").I
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const StyledMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     navPosition: AppShellProps["navPosition"];
+    $isDefaultWSS: boolean;
+    $hasFooter: boolean;
 }>> & string;
+export declare const StyledModernAppHeaderOperator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledHamburgerMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledMobileNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledMobileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const StyledLinkSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledOperatorSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const HorizontalBreak: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledNotificationCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledNotificationCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledCountIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@pega/cosmos-react-core").CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
@@ -40,4 +45,15 @@ export declare const StyledNotificationSecondary: import("styled-components/dist
     unread?: boolean;
 }>> & string;
 export declare const StyledBannerRegion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledVisuallyHiddenLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "className" | "children" | "as" | "status" | "forwardedAs" | "variant"> & Pick<import("@pega/cosmos-react-core").TextProps, "ref" | "className" | "children" | "as" | "status" | "forwardedAs"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>> & string;
+export declare const StyledNavList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledNavAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | 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 | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledUtilityDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "color" | "content" | "style" | "translate" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "variant" | "testId"> & import("@pega/cosmos-react-core").NoChildrenProp & import("@pega/cosmos-react-core").TestIdProp<undefined> & {
+    variant: "urgent" | "success";
+} & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "children" | "variant" | "testId">, never>> & string;
+export declare const StyledUtilityVisual: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
+}, never>> & string;
 //# sourceMappingURL=AppShell.styles.d.ts.map

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":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,SAAS,uNAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;YAsDvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,+NAY5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;YAO3D,CAAC;AAEH,eAAO,MAAM,UAAU,yOAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;YAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,yOAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,uNAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yOAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,6NAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,+NAEnC,CAAC;AAEF,eAAO,MAAM,eAAe;;;2BA/N6C,CAAC;iDA+OxE,CAAC;AAEH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAW/D,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;gOA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;YAiBpE,CAAC;AAIH,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YAMrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,6NAI7B,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,eAAO,MAAM,SAAS,uNAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBACb,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;YAqGvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,+NAY5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;YAO3D,CAAC;AAEH,eAAO,MAAM,UAAU,yOAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBACR,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;gBACV,OAAO;YA6CnB,CAAC;AAIH,eAAO,MAAM,6BAA6B,6NAgBxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,uNAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yOAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,6NAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAGnC,CAAC;AAIF,eAAO,MAAM,eAAe;;;2BAzUnB,CAAC;iDA8UT,CAAC;AAIF,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAW/D,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;gOA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;YAiBpE,CAAC;AAIH,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YAMrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,kBAAkB,6NAAe,CAAC;AAI/C,eAAO,MAAM,yBAAyB,shBAQrC,CAAC;AAIF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAIF,eAAO,MAAM,eAAe;;gOAG3B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;kHAK5B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;mBAE/B,CAAC"}

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

@@ -6,6 +6,9 @@ import { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 const headerHeight = '3rem';
 const tallHeaderHeight = '6rem';
+const topBarHeight = '2.25rem';
+const navBarHeight = '3.75rem';
+export const footerHeight = '2.25rem';
 export const StyledNav = styled.nav `
   white-space: nowrap;
   overflow: visible;
@@ -17,16 +20,18 @@ export const StyledNav = styled.nav `
     text-decoration: none;
   }
 `;
-export const StyledAppHeader = styled.header(({ navPosition, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor } } } } }) => {
+export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor } } } } }) => {
     const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
+    const isModernStacked = !$isDefaultWSS && navPosition === 'below';
     return css `
       position: sticky;
       inset-block-start: 0;
       height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};
       width: 100%;
-      background: ${headerBg};
+      background: ${isModernStacked ? base.palette['primary-background'] : headerBg};
       z-index: calc(${base['z-index'].popover} + 1);
-      border-bottom: 0.0625rem solid ${base.palette['border-line']};
+      border-bottom: 0.0625rem solid
+        ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};
       color: ${foregroundColor};
 
       ${StyledImage} {
@@ -37,7 +42,7 @@ export const StyledAppHeader = styled.header(({ navPosition, theme: { base, comp
         height: ${headerHeight};
 
         ${StyledAppHeaderOperator} {
-          margin: ${base.spacing};
+          margin: ${$isDefaultWSS ? base.spacing : 0};
         }
 
         & > a,
@@ -57,6 +62,45 @@ export const StyledAppHeader = styled.header(({ navPosition, theme: { base, comp
       & > ${StyledNav} {
         height: calc(${tallHeaderHeight} - ${headerHeight});
       }
+
+      ${isModernStacked &&
+        css `
+        & > ${StyledFlex}:first-child {
+          height: ${topBarHeight};
+          max-width: 80rem;
+          margin-inline: auto;
+          width: 100%;
+          padding-inline: calc(${base.spacing} * 2);
+
+          & > a,
+          & > button {
+            min-height: ${topBarHeight};
+          }
+        }
+
+        & > ${StyledFlex}:nth-child(2) {
+          height: ${navBarHeight};
+          max-width: 80rem;
+          margin-inline: auto;
+          width: 100%;
+          padding-inline: calc(${base.spacing} * 2);
+        }
+
+        @media screen and (min-width: ${base.breakpoints.md}) {
+          & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {
+            padding-inline: calc(${base.spacing} * 2.5);
+          }
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: ${topBarHeight};
+          left: 0;
+          right: 0;
+          border-bottom: 0.0625rem solid ${base.palette['border-line']};
+        }
+      `}
     `;
 });
 StyledAppHeader.defaultProps = defaultThemeProp;
@@ -121,21 +165,68 @@ export const StyledLink = styled.a(({ theme }) => {
   `;
 });
 StyledLink.defaultProps = defaultThemeProp;
-export const StyledMain = styled.main(({ navPosition, theme }) => {
+export const StyledMain = styled.main(({ navPosition, theme, $isDefaultWSS, $hasFooter }) => {
     const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;
     return css `
-      --appshell-offset: ${calculatedHeaderHeight};
-      --appshell-horizontal-offset: 0;
-      position: relative;
-      min-height: calc(100vh - ${calculatedHeaderHeight});
-      background-color: ${theme.base.palette['app-background']};
-
-      :focus {
-        outline: none;
+    --appshell-offset: ${calculatedHeaderHeight};
+    --appshell-horizontal-offset: 0;
+    position: relative;
+    min-height: calc(100vh - ${calculatedHeaderHeight});
+    background-color: ${theme.base.palette['app-background']};
+
+    :focus {
+      outline: none;
+    }
+
+    ${!$isDefaultWSS &&
+        css `
+      &:has([data-create-stage]) {
+        height: calc(100vh - ${calculatedHeaderHeight});
+        min-height: auto;
+        overflow: auto;
       }
-    `;
+
+      ${$hasFooter &&
+            css `
+        &:not(:has([data-create-stage])) {
+          --footer-height: ${footerHeight};
+          min-height: calc(100vh - ${calculatedHeaderHeight} - ${footerHeight});
+        }
+
+        &:has([data-create-stage]) + footer {
+          position: absolute;
+          inset-block-end: 0;
+          inset-inline: 0;
+          border-top: none;
+        }
+      `}
+    `}
+
+    ${$isDefaultWSS &&
+        $hasFooter &&
+        css `
+      --footer-height: ${footerHeight};
+    `}
+  `;
 });
 StyledMain.defaultProps = defaultThemeProp;
+export const StyledModernAppHeaderOperator = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: ${theme.base.spacing};
+    font-size: ${fontSize.m};
+    white-space: nowrap;
+    padding-inline: calc(0.75 * ${theme.base.spacing});
+
+    ${StyledImage} {
+      height: auto;
+    }
+  `;
+});
+StyledModernAppHeaderOperator.defaultProps = defaultThemeProp;
 export const StyledHamburgerMenu = styled.button(({ theme }) => {
     return css `
     margin: ${theme.base.spacing};
@@ -198,22 +289,18 @@ export const HorizontalBreak = styled.div(({ theme }) => {
   `;
 });
 HorizontalBreak.defaultProps = defaultThemeProp;
-export const StyledNotificationCount = styled.span `
-  flex-shrink: 0;
+export const StyledNotificationCount = styled.div `
+  position: relative;
+  display: inline-flex;
 `;
-export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing } } }) => {
-    return css `
-    position: absolute;
-    inset-inline-start: calc(2 * ${spacing});
-    inset-block-start: calc(-0.25 * ${spacing});
-    padding: 0 calc(0.5 * ${spacing});
-
-    @media (pointer: coarse) {
-      inset-inline-start: calc(2.5 * ${spacing});
-      inset-block-start: calc(0.5 * ${spacing});
-    }
-  `;
-});
+StyledNotificationCount.defaultProps = defaultThemeProp;
+export const StyledCountIcon = styled(Count) `
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  transform: translate(50%, -50%);
+`;
+StyledCountIcon.defaultProps = defaultThemeProp;
 export const StyledNotifications = styled.div(({ popover, theme }) => {
     return css `
     min-height: ${popover ? '10rem' : '100vh'};
@@ -301,10 +388,37 @@ export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
     `;
 });
 StyledNotificationSecondary.defaultProps = defaultThemeProp;
-export const StyledBannerRegion = styled.div(({ theme }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-  `;
-});
+export const StyledBannerRegion = styled.div ``;
 StyledBannerRegion.defaultProps = defaultThemeProp;
+export const StyledVisuallyHiddenLabel = styled(StyledText) `
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 0.0625rem;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 0.0625rem;
+`;
+StyledVisuallyHiddenLabel.defaultProps = defaultThemeProp;
+export const StyledNavList = styled.div `
+  display: flex;
+  align-items: center;
+`;
+StyledNavList.defaultProps = defaultThemeProp;
+export const StyledNavAction = styled(BareButton) `
+  display: inline-flex;
+  align-items: center;
+`;
+StyledNavAction.defaultProps = defaultThemeProp;
+export const StyledUtilityDot = styled(StyledAlert) `
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  transform: translate(50%, -50%);
+`;
+StyledUtilityDot.defaultProps = defaultThemeProp;
+export const StyledUtilityVisual = styled(StyledVisual) `
+  position: relative;
+`;
+StyledUtilityVisual.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppShell.styles.js.map

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, 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. */
@@ -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,10 +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 {\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\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 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  /** Configuration for the help menu in the header */\n  helpMenu?: MenuItemProps[];\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/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);
@@ -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 && 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              <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.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.styles.js","sourceRoot":"","sources":["../../../src/components/Footer/Footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEpF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;;;;eAIG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;kCACV,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,CAAC;aACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,CAAC;aACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;eACpC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Link, calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n  return css`\n    position: sticky;\n    inset-block-end: 0;\n    min-height: 2.25rem;\n    z-index: ${theme.base['z-index'].popover};\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledFooterLink = styled(Link)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize.s};\n    color: ${theme.base.palette['foreground-color']};\n  `;\n});\n\nStyledFooterLink.defaultProps = defaultThemeProp;\n\nexport const StyledFooterText = styled.span(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize.s};\n    color: ${theme.base.palette['foreground-color']};\n    opacity: ${theme.base.transparency['transparent-3']};\n  `;\n});\n\nStyledFooterText.defaultProps = defaultThemeProp;\n\nexport const StyledFooterImage = styled.img`\n  display: inline-block;\n  height: 2.25rem;\n  width: auto;\n  vertical-align: middle;\n`;\n\nStyledFooterImage.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,13 @@
+export interface FooterLink {
+    /** Display text for the footer link. */
+    text: string;
+    /** URL the link navigates to. */
+    url?: string;
+    /** Optional image URL displayed before the text. */
+    imageLink?: string;
+}
+export interface FooterProps {
+    /** Footer links rendered at the bottom of the page. */
+    links: FooterLink[];
+}
+//# sourceMappingURL=Footer.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB"}

package/lib/components/Footer/Footer.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.types.js","sourceRoot":"","sources":["../../../src/components/Footer/Footer.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface FooterLink {\n  /** Display text for the footer link. */\n  text: string;\n  /** URL the link navigates to. */\n  url?: string;\n  /** Optional image URL displayed before the text. */\n  imageLink?: string;\n}\n\nexport interface FooterProps {\n  /** Footer links rendered at the bottom of the page. */\n  links: FooterLink[];\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/lib/components/Footer/index.js

@@ -0,0 +1,3 @@
+export { default } from './Footer';
+export * from './Footer.types';
+//# sourceMappingURL=index.js.map

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

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

package/lib/index.d.ts

@@ -2,6 +2,8 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as CaseView } from './components/CaseView';
 export * from './components/CaseView';
+export { default as Footer } from './components/Footer';
+export * from './components/Footer';
 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,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,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -3,6 +3,8 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as CaseView } from './components/CaseView';
 export * from './components/CaseView';
+export { default as Footer } from './components/Footer';
+export * from './components/Footer';
 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,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"]}
+{"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,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,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 { default as Footer } from './components/Footer';\nexport * from './components/Footer';\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": "9.0.0-build.27.7",
+  "version": "9.0.0-build.27.9",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.0.0-build.27.7",
-    "@pega/cosmos-react-work": "9.0.0-build.27.7",
+    "@pega/cosmos-react-core": "9.0.0-build.27.9",
+    "@pega/cosmos-react-work": "9.0.0-build.27.9",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",