npm - @pega/cosmos-react-wss - Versions diffs - 9.5.4 → 9.5.5-2 - Mend

@pega/cosmos-react-wss 9.5.4 → 9.5.5-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

	@@ -1 +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;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;~~AAgBtD~~,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,~~CA+Z3D~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAkb3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js CHANGED Viewed

@@ -1,13 +1,13 @@
 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, MenuButton, ThemeSwitcher } from '@pega/cosmos-react-core';
+import { Avatar, Backdrop, Button, ThemeOverride, ContextSwitcher, debounce, Drawer, Flex, getChildOfRootNode, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent, usePreviewManager, 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 Footer from '../Footer';
-import { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledModernAppHeaderOperator, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock, StyledBannerRegion } from './AppShell.styles';
+import { headerHeight, StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock, StyledBannerRegion, tallHeaderHeight } from './AppShell.styles';
 import Notifications from './Notifications';
 import MobileHeaderContent from './MobileHeaderContent';
 import NavLinks from './NavLinks';
@@ -27,6 +27,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const [notificationsButtonEl, setNotificationsButtonEl] = useElement();
     const minInlineWidth = useRef(0);
     const theme = useTheme();
+    const { previewActive } = usePreviewManager();
     const { themeMode, onThemeModeChange } = useThemeMode();
     const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
     const headerRef = useConsolidatedRef(setHeaderEl, ref);
@@ -89,6 +90,16 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     useEffect(() => {
         setHasMobileNav(!isSmallOrAbove || linksCollapsed);
     }, [isSmallOrAbove, linksCollapsed]);
+    useEffect(() => {
+        if (!headerRef.current)
+            return;
+        const targetNode = getChildOfRootNode(headerRef);
+        if (!targetNode)
+            return;
+        if (!targetNode.style.getPropertyValue('--app-header-height')) {
+            targetNode.style.setProperty('--app-header-height', navPosition === 'below' ? tallHeaderHeight : headerHeight);
+        }
+    }, [headerEl, navPosition]);
     useEffect(() => {
         if (!hasMobileNav && drawerOpen) {
             if (drawerContent === 'notifications' && notifications) {
@@ -102,7 +113,12 @@ const AppShell = forwardRef(function AppShell(props, ref) {
         }
     }, [hasMobileNav, drawerOpen]);
     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 && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, 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, 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 && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, 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: [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: () => {
+    const useDefaultInlineLayout = isDefaultWSS || navPosition === 'inline';
+    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": useDefaultInlineLayout, children: [_jsxs(Flex, { container: {
+                                alignItems: 'center',
+                                justify: 'between',
+                                pad: navPosition === 'below' ? [1, 0] : 0
+                            }, children: [useDefaultInlineLayout ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center' }, 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 && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, 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, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), navPosition !== 'below' || hasMobileNav ? (_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 && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })) : null] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center', gap: 1 }, 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);
@@ -118,9 +134,9 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                                                         }
                                                     }, 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 && (_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 && (_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' }) }))] })] }), 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 }), _jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] })] }), _jsx(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 => {
+                            (useDefaultInlineLayout ? (_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 }), _jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] })] }), _jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: 'below' })] })))] }) }), _jsxs(StyledMain, { navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, "$hasFooter": hasFooter, previewActive: previewActive, 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 CHANGED Viewed

	@@ -1 +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 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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\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 </Flex>\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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\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 </Flex>\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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\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 </Flex>\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"]}
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 getChildOfRootNode,\n Icon,\n Image,\n Popover,\n SkipLinks,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useI18n,\n useOuterEvent,\n usePreviewManager,\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 headerHeight,\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock,\n StyledBannerRegion,\n tallHeaderHeight\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 { previewActive } = usePreviewManager();\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 (!headerRef.current) return;\n const targetNode = getChildOfRootNode(headerRef);\n if (!targetNode) return;\n if (!targetNode.style.getPropertyValue('--app-header-height')) {\n targetNode.style.setProperty(\n '--app-header-height',\n navPosition === 'below' ? tallHeaderHeight : headerHeight\n );\n }\n }, [headerEl, navPosition]);\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 const useDefaultInlineLayout = isDefaultWSS \|\| navPosition === 'inline';\n\n return (\n <>\n <SkipLinks items={skipLinks} />\n <ThemeOverride theme={headerTheme}>\n <StyledAppHeader\n ref={headerRef}\n navPosition={navPosition}\n $isDefaultWSS={useDefaultInlineLayout}\n >\n <Flex\n container={{\n alignItems: 'center',\n justify: 'between',\n pad: navPosition === 'below' ? [1, 0] : 0\n }}\n >\n {useDefaultInlineLayout ? (\n <>\n <Flex container={{ alignItems: 'center' }}>\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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\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 </Flex>\n )}\n </Flex>\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 container={{ alignItems: 'center' }}>\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' \|\| hasMobileNav ? (\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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\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 </Flex>\n )}\n </Flex>\n ) : null}\n </Flex>\n )}\n\n <Flex\n as={StyledEndNavBlock}\n container={{ alignItems: 'center', gap: 1 }}\n mobile={hasMobileNav}\n >\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\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\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\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 {navPosition === 'below' &&\n !hasMobileNav &&\n (useDefaultInlineLayout ? (\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 <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'center' }}>\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 </Flex>\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\n navPosition={navPosition}\n $isDefaultWSS={isDefaultWSS}\n $hasFooter={hasFooter}\n previewActive={previewActive}\n >\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 CHANGED Viewed

@@ -1,11 +1,13 @@
 import type { AppShellProps } from './AppShell.types';
+export declare const headerHeight = "3rem";
+export declare const tallHeaderHeight = "6rem";
 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 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 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>, {
     mobile: boolean;
 }>> & string;
@@ -14,6 +16,7 @@ export declare const StyledMain: import("styled-components/dist/types").IStyledC
     navPosition: AppShellProps["navPosition"];
     $isDefaultWSS: boolean;
     $hasFooter: boolean;
+    previewActive: 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;

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

	@@ -1 +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;~~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"}
1	+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAGvC,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,eAAO,MAAM,SAAS,uNAUrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+NAY5B,CAAC;AAIH,eAAO,MAAM,eAAe;iBACb,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;YAwGvB,CAAC;AAIF,eAAO,MAAM,iBAAiB;YAAwB,OAAO;YAS3D,CAAC;AAEH,eAAO,MAAM,UAAU,yOA0CrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBACR,aAAa,CAAC,aAAa,CAAC;mBAC1B,OAAO;gBACV,OAAO;mBACJ,OAAO;YAwDtB,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;;;2BAjW0B,CAAC;iDAsWtD,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 CHANGED Viewed

@@ -4,10 +4,11 @@ import { calculateFontSize, calculateForegroundColor, Count, defaultThemeProp, S
 import { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
 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';
+import { resizeDrawerMaxWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+export const headerHeight = '3rem';
+export const tallHeaderHeight = '6rem';
+const topBarHeight = '2.75rem';
+const navBarHeight = '3.25rem';
 export const footerHeight = '2.25rem';
 export const StyledNav = styled.nav `
   white-space: nowrap;
@@ -20,15 +21,29 @@ export const StyledNav = styled.nav `
     text-decoration: none;
   }
 `;
-export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor } } } } }) => {
+export const StyledPrimaryName = styled.span(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    font-size: ${fontSize.xxl};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    max-width: 50ch;
+  `;
+});
+StyledPrimaryName.defaultProps = defaultThemeProp;
+export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, theme: { base, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor, 'border-color': headerBorderColor }, nav: { background: navBg, 'foreground-color': navFgColor } } } } }) => {
     const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
     const isModernStacked = !$isDefaultWSS && navPosition === 'below';
+    const navForeground = calculateForegroundColor(navBg, navFgColor);
     return css `
       position: sticky;
       inset-block-start: 0;
       height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};
       width: 100%;
-      background: ${isModernStacked ? base.palette['primary-background'] : headerBg};
+      background: ${isModernStacked ? 'transparent' : headerBg};
       z-index: calc(${base['z-index'].popover} + 1);
       border-bottom: 0.0625rem solid
         ${$isDefaultWSS ? base.palette['border-line'] : headerBorderColor};
@@ -38,6 +53,10 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
         height: 1.625rem;
       }
+      ${StyledPrimaryName} {
+        max-width: min(50ch, 50vw);
+      }
       & > ${StyledFlex} {
         height: ${headerHeight};
@@ -65,12 +84,14 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
       ${isModernStacked &&
         css `
+        border-bottom: none;
         & > ${StyledFlex}:first-child {
           height: ${topBarHeight};
-          max-width: 80rem;
-          margin-inline: auto;
           width: 100%;
-          padding-inline: calc(${base.spacing} * 2);
+          background: ${navBg};
+          color: ${navForeground};
+          padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
           & > a,
           & > button {
@@ -80,53 +101,40 @@ export const StyledAppHeader = styled.header(({ navPosition, $isDefaultWSS, them
         & > ${StyledFlex}:nth-child(2) {
           height: ${navBarHeight};
-          max-width: 80rem;
-          margin-inline: auto;
           width: 100%;
-          padding-inline: calc(${base.spacing} * 2);
+          background: ${headerBg};
+          color: ${foregroundColor};
+          padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));
+          ${StyledPrimaryName} {
+            color: ${foregroundColor};
+          }
         }
         @media screen and (min-width: ${base.breakpoints.md}) {
           & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {
-            padding-inline: calc(${base.spacing} * 2.5);
+            padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));
           }
         }
-        &::after {
-          content: '';
-          position: absolute;
-          top: ${topBarHeight};
-          left: 0;
-          right: 0;
-          border-bottom: 0.0625rem solid ${base.palette['border-line']};
-        }
       `}
     `;
 });
 StyledAppHeader.defaultProps = defaultThemeProp;
-export const StyledPrimaryName = styled.span(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    color: ${theme.base.palette['foreground-color']};
-    font-size: ${fontSize.xxl};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    max-width: 50ch;
-  `;
-});
-StyledPrimaryName.defaultProps = defaultThemeProp;
 export const StyledEndNavBlock = styled.div(({ mobile }) => {
-    return (mobile &&
+    return css `
+    flex-shrink: 0;
+    ${mobile &&
         css `
       margin-inline-start: auto;
-    `);
+    `}
+  `;
 });
 export const StyledLink = styled.a(({ theme }) => {
     const hoverColor = lighten(0.2, theme.base.palette.interactive);
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
+    color: inherit;
     margin: 0 calc(0.5 * ${theme.base.spacing});
     padding: 0 calc(0.5 * ${theme.base.spacing});
     font-size: ${fontSize.m};
@@ -165,14 +173,14 @@ export const StyledLink = styled.a(({ theme }) => {
   `;
 });
 StyledLink.defaultProps = defaultThemeProp;
-export const StyledMain = styled.main(({ navPosition, theme, $isDefaultWSS, $hasFooter }) => {
+export const StyledMain = styled.main(({ navPosition, theme, $isDefaultWSS, $hasFooter, previewActive }) => {
     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']};
+    background: ${theme.base.palette['app-background']};
     :focus {
       outline: none;
@@ -207,6 +215,17 @@ export const StyledMain = styled.main(({ navPosition, theme, $isDefaultWSS, $has
         css `
       --footer-height: ${footerHeight};
     `}
+    @media (min-width: ${theme.base.breakpoints.md}) {
+      transition: margin-inline-end ${theme.base.animation.speed}
+        ${theme.base.animation.timing.ease};
+      ${previewActive &&
+        css `
+        transition: none;
+        margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
+      `}
+    }
   `;
 });
 StyledMain.defaultProps = defaultThemeProp;

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

	@@ -1 +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';\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"]}
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';\nimport { resizeDrawerMaxWidth } from '@pega/cosmos-react-core/lib/styles/constants';\n\nimport type { AppShellProps } from './AppShell.types';\n\nexport const headerHeight = '3rem';\nexport const tallHeaderHeight = '6rem';\nconst topBarHeight = '2.75rem';\nconst navBarHeight = '3.25rem';\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 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 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 nav: { background: navBg, 'foreground-color': navFgColor }\n }\n }\n }\n }) => {\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n const isModernStacked = !$isDefaultWSS && navPosition === 'below';\n const navForeground = calculateForegroundColor(navBg, navFgColor);\n\n return css`\n position: sticky;\n inset-block-start: 0;\n height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n width: 100%;\n background: ${isModernStacked ? 'transparent' : 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 ${StyledPrimaryName} {\n max-width: min(50ch, 50vw);\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 border-bottom: none;\n\n & > ${StyledFlex}:first-child {\n height: ${topBarHeight};\n width: 100%;\n background: ${navBg};\n color: ${navForeground};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n & > a,\n & > button {\n min-height: ${topBarHeight};\n }\n }\n\n & > ${StyledFlex}:nth-child(2) {\n height: ${navBarHeight};\n width: 100%;\n background: ${headerBg};\n color: ${foregroundColor};\n padding-inline: max(calc(${base.spacing} * 2), calc((100% - 80rem) / 2));\n\n ${StyledPrimaryName} {\n color: ${foregroundColor};\n }\n }\n\n @media screen and (min-width: ${base.breakpoints.md}) {\n & > ${StyledFlex}:first-child, & > ${StyledFlex}:nth-child(2) {\n padding-inline: max(calc(${base.spacing} * 2.5), calc((100% - 80rem) / 2));\n }\n }\n `}\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return css`\n flex-shrink: 0;\n\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 color: inherit;\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 previewActive: boolean;\n}>(({ navPosition, theme, $isDefaultWSS, $hasFooter, previewActive }) => {\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: ${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 @media (min-width: ${theme.base.breakpoints.md}) {\n transition: margin-inline-end ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease};\n\n ${previewActive &&\n css`\n transition: none;\n margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});\n `}\n }\n `;\n});\n\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/PageTemplates/BannerPage.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export interface BannerOptions {
     /** An image url for the banner */
     backgroundImage?: string;
     /** A title for the banner */
-    title: string;
+    title?: string;
     /** A fallback background color if the background image is not provided */
     backgroundColor?: string;
     /** Text that will appear below the title */
@@ -19,12 +19,17 @@ export interface BannerOptions {
      */
     tintImage?: boolean;
     /** Controls how the banner fills vertical space.
-     * - 'fixed': preset height based on the spacing token
+     * - 'fixed': percentage-based height configured in authoring
      * - 'content': shrinks to fit content
      * - 'full': fills the visible viewport below the app shell
      * @default 'fixed'
      */
     height?: 'content' | 'fixed' | 'full';
+    /** Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.
+     * Falls back to 25 if invalid.
+     * @default 25
+     */
+    heightValue?: number;
     /** Horizontal alignment of the banner text content.
      * @default 'center'
      */
@@ -40,10 +45,14 @@ export interface BannerOptions {
 }
 export interface BannerPageProps extends BaseProps {
     banner: BannerOptions;
+    /** Title for the page, rendered invisibly as h1 if banner title is not provided. */
+    title: string;
     /** Content for the first column */
     a: ReactNode[];
     /** Content for the second column. If not provided the first column will stretch. */
     b?: ReactNode[];
+    /** Widget content rendered within the banner region, below the heading and message. */
+    bannerRegion?: ReactNode[];
     ref?: Ref<HTMLDivElement>;
     /** Variants for the sizing of the content columns. Two column will make the columns equal in size. */
     variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';
@@ -51,7 +60,10 @@ export interface BannerPageProps extends BaseProps {
     utilities?: ReactNode;
 }
 export declare const StyledBannerPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "height">>> & string;
+export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "height"> & {
+    $hasContent?: boolean;
+    $heightValue?: number;
+}>> & string;
 export declare const StyledBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "align" | "variant" | "tintImage" | "enableContentOverlap">>> & string;
 export declare const StyledContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledBannerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {

package/lib/components/PageTemplates/BannerPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAgB7D~~,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;~~IACd~~,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;~~AAID~~,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,~~0SA8BhC~~,CAAC;AAIH,eAAO,MAAM,YAAY,4VA+CxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAoBlC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;YAQlF,CAAC;~~AAkCF~~,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,~~CAuJvE~~,CAAC"}
1	+ {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;kBAEhB,OAAO;mBACN,MAAM;YA+EvB,CAAC;AAIH,eAAO,MAAM,YAAY,4VA+CxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAoBlC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;YAQlF,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAgOvE,CAAC"}

package/lib/components/PageTemplates/BannerPage.js CHANGED Viewed

@@ -2,29 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transparentize } from 'polished';
 import { forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName } from '@pega/cosmos-react-core';
-const BANNER_OVERLAP_MULTIPLIER = 12;
+import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName, VisuallyHiddenText, useTheme, readableHue, ThemeOverride } from '@pega/cosmos-react-core';
+const BANNER_OVERLAP_MULTIPLIER = 8;
+const DEFAULT_FIXED_HEIGHT_DVH = 25;
+const CONTENT_PADDING_MULTIPLIER = 2.5;
+// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.
+const getFixedHeightDvh = (value) => {
+    const clamped = value !== undefined && Number.isFinite(value)
+        ? Math.min(100, Math.max(1, value))
+        : DEFAULT_FIXED_HEIGHT_DVH;
+    return `${clamped}dvh`;
+};
 export const StyledBannerPage = styled.div(({ theme }) => {
     return css `
     min-height: calc(100vh - var(--appshell-offset));
-    background-color: ${theme.base.palette['app-background']};
+    background: ${theme.base.palette['app-background']};
   `;
 });
 StyledBannerPage.defaultProps = defaultThemeProp;
-export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {
+export const StyledBannerContainer = styled.div(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {
+    const fixedHeight = getFixedHeightDvh($heightValue);
     const heightValue = {
         content: 'auto',
-        fixed: `calc(${theme.base.spacing} * 38)`,
+        fixed: fixedHeight,
         full: 'calc(100dvh - var(--appshell-offset, 0rem))'
     }[height];
-    return css `
-    width: 100%;
-    height: ${heightValue};
-    ${height !== 'content' &&
-        css `
-      overflow: hidden;
-    `}
+    const backgroundStyles = css `
     ${backgroundImage &&
         css `
       background-image: url('${backgroundImage}');
@@ -38,6 +41,60 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
       background-color: ${backgroundColor};
     `}
   `;
+    const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;
+    let layoutStyles;
+    if (fixedHeightBannerWithContent) {
+        layoutStyles = css `
+      min-height: ${fixedHeight};
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline: 0;
+        height: ${fixedHeight};
+        z-index: 0;
+        ${backgroundStyles}
+      }
+      > * {
+        position: relative;
+        flex: 1;
+      }
+    `;
+    }
+    else if ($hasContent) {
+        layoutStyles = css `
+      ${height === 'full' &&
+            css `
+        min-height: ${heightValue};
+      `}
+      display: flex;
+      flex-direction: column;
+      > * {
+        flex: 1;
+      }
+      ${backgroundStyles}
+    `;
+    }
+    else {
+        layoutStyles = css `
+      height: ${heightValue};
+      ${backgroundStyles}
+    `;
+    }
+    return css `
+    width: 100%;
+    ${layoutStyles}
+    --content-height-in-agent: calc(
+        100dvh - var(--appshell-top-offset, var(--appshell-offset, 0rem)) - calc(${theme.base
+        .spacing} * ${CONTENT_PADDING_MULTIPLIER})
+      );
+  `;
 });
 StyledBannerContainer.defaultProps = defaultThemeProp;
 export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', enableContentOverlap, theme: { base: { palette: { light, dark }, spacing } } }) => {
@@ -72,11 +129,11 @@ export const StyledContentContainer = styled.div(({ theme: { base: { breakpoints
       margin: 0 auto;
       @media screen and (min-width: ${breakpoints.md}) {
-        width: 100%;
-        padding: calc(${spacing} * 2.5);
+        width: 85%;
+        padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});
       }
       @media screen and (min-width: ${breakpoints.lg}) {
-        max-width: 93.75rem;
+        max-width: 80rem;
       }
     `;
 });
@@ -113,6 +170,9 @@ const horizontalAlignMap = {
     center: 'center',
     right: 'end'
 };
+const StyledBannerContentArea = styled.div `
+  text-align: start;
+`;
 const StyledPageTabContent = styled.div(({ theme }) => {
     return css `
     padding-block: calc(2 * ${theme.base.spacing});
@@ -123,7 +183,7 @@ const StyledPageTabContent = styled.div(({ theme }) => {
   `;
 });
 StyledPageTabContent.defaultProps = defaultThemeProp;
-export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
+export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b, bannerRegion, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const [panel, setPanel] = useState('content');
@@ -131,13 +191,59 @@ export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant
     const className = createClassName('banner-page', classNameProp, { variant });
     const gridCols = variantMap[variant];
     const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';
+    const hasBannerRegionContent = !!bannerRegion?.length;
+    const theme = useTheme();
+    const { light: paletteLight, dark: paletteDark } = theme.base.palette;
+    const isDarkBanner = (banner.variant ?? 'light') === 'dark';
+    const bgColor = banner.backgroundColor;
+    let effectiveBackground;
+    if (bgColor && bgColor.trim() !== '') {
+        effectiveBackground = bgColor;
+    }
+    else {
+        effectiveBackground = isDarkBanner ? paletteDark : paletteLight;
+    }
+    const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;
+    const secondaryBackground = tryCatch(() => transparentize(0.7, readableColor(effectiveForeground)));
     const pageContent = (_jsxs(Grid, { container: { gap: 2 }, md: { container: { cols: 'minmax(0, 1fr)' } }, lg: { container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }, as: StyledContentContainer, className: createClassName('banner-page-content'), children: [!!a.length && _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: a.map(el => el) }), b && !!b.length && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: b.map(el => el) }))] }));
-    const pageBanner = banner && (_jsx(StyledBannerContainer, { backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, height: banner.height, className: createClassName('banner-page-banner'), children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: {
+    const pageBanner = banner && (_jsx(StyledBannerContainer, { backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, height: banner.height, "$hasContent": hasBannerRegionContent, "$heightValue": banner.heightValue, className: createClassName('banner-page-banner'), children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: {
                 justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',
                 alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
                 direction: 'column',
                 gap: 1
-            }, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { children: [_jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message }))] }) }) }));
+            }, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { children: [banner.title && _jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), !banner.title && (_jsx(Text, { variant: 'h1', children: _jsx(VisuallyHiddenText, { children: title }) })), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message })), _jsx(ThemeOverride, { theme: {
+                            components: {
+                                agent: {
+                                    background: 'transparent',
+                                    'foreground-color': effectiveForeground,
+                                    'user-message': {
+                                        background: secondaryBackground,
+                                        'foreground-color': effectiveForeground
+                                    },
+                                    history: {
+                                        background: secondaryBackground,
+                                        'foreground-color': effectiveForeground,
+                                        item: {
+                                            'selected-background': transparentize(0.7, theme.base.palette.interactive)
+                                        }
+                                    },
+                                    'coach-message': {
+                                        avatar: {
+                                            background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,
+                                            'foreground-color': effectiveForeground
+                                        }
+                                    },
+                                    questionnaire: {
+                                        background: theme.base.palette['primary-background'],
+                                        'foreground-color': 'auto'
+                                    },
+                                    ai: readableHue(theme.base.palette.ai, effectiveBackground)
+                                },
+                                link: {
+                                    color: readableHue(theme.base.palette.interactive, effectiveBackground)
+                                }
+                            }
+                        }, children: hasBannerRegionContent && (_jsx(Flex, { as: StyledBannerContentArea, container: { direction: 'column', gap: 2, pad: [1, 0, 0, 0] }, className: createClassName('banner-page-banner-content'), children: bannerRegion.map(el => el) })) })] }) }) }));
     const pageTabs = [
         { name: t('content'), id: 'content', content: pageContent },
         {

package/lib/components/PageTemplates/BannerPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner /\n backgroundImage?: string;\n /* A title for the banner /\n title: string;\n /* A fallback background color if the background image is not provided /\n backgroundColor?: string;\n /* Text that will appear below the title /\n message?: string;\n /* The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n /\n variant?: 'light' \| 'dark';\n /* Toggles the translucent filter provided by the variant\n * @default true\n /\n tintImage?: boolean;\n /* Controls how the banner fills vertical space.\n * - 'fixed': preset height based on the spacing token\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n /\n height?: 'content' \| 'fixed' \| 'full';\n /* Horizontal alignment of the banner text content.\n * @default 'center'\n /\n align?: 'left' \| 'center' \| 'right';\n /* Vertical alignment of the banner text content.\n * @default 'center'\n /\n verticalAlign?: 'top' \| 'center' \| 'bottom';\n /* When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n /\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /* Content for the first column /\n a: ReactNode[];\n /* Content for the second column. If not provided the first column will stretch. /\n b?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /* Variants for the sizing of the content columns. Two column will make the columns equal in size. /\n variant?: 'two-column' \| 'narrow-wide' \| 'wide-narrow';\n /* Utilities as the last column /\n utilities?: ReactNode;\n}\n\nconst BANNER_OVERLAP_MULTIPLIER = 12;\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-offset));\n background-color: ${theme.base.palette['app-background']};\n `;\n});\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' \| 'backgroundColor' \| 'height'>\n>(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {\n const heightValue = {\n content: 'auto',\n fixed: `calc(${theme.base.spacing} 38)`,\n full: 'calc(100dvh - var(--appshell-offset, 0rem))'\n }[height];\n\n return css`\n width: 100%;\n height: ${heightValue};\n ${height !== 'content' &&\n css`\n overflow: hidden;\n `}\n\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n \| 'variant'\n \| 'backgroundColor'\n \| 'backgroundImage'\n \| 'tintImage'\n \| 'align'\n \| 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: ${align};\n\n ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 100%;\n padding: calc(${spacing} * 2.5);\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 93.75rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledPageContentWrapper = styled.div<{ enableContentOverlap?: boolean }>(\n ({ theme, enableContentOverlap }) => css`\n ${enableContentOverlap &&\n css`\n margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});\n position: relative;\n `}\n `\n);\n\nStyledPageContentWrapper.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n a,\n b,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n\n const pageContent = (\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer>\n <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName,\n VisuallyHiddenText,\n useTheme,\n readableHue,\n ThemeOverride\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner /\n backgroundImage?: string;\n /* A title for the banner /\n title?: string;\n /* A fallback background color if the background image is not provided /\n backgroundColor?: string;\n /* Text that will appear below the title /\n message?: string;\n /* The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n /\n variant?: 'light' \| 'dark';\n /* Toggles the translucent filter provided by the variant\n * @default true\n /\n tintImage?: boolean;\n /* Controls how the banner fills vertical space.\n * - 'fixed': percentage-based height configured in authoring\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n /\n height?: 'content' \| 'fixed' \| 'full';\n /* Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.\n * Falls back to 25 if invalid.\n * @default 25\n /\n heightValue?: number;\n /* Horizontal alignment of the banner text content.\n * @default 'center'\n /\n align?: 'left' \| 'center' \| 'right';\n /* Vertical alignment of the banner text content.\n * @default 'center'\n /\n verticalAlign?: 'top' \| 'center' \| 'bottom';\n /* When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n /\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /* Title for the page, rendered invisibly as h1 if banner title is not provided. /\n title: string;\n /* Content for the first column /\n a: ReactNode[];\n /* Content for the second column. If not provided the first column will stretch. /\n b?: ReactNode[];\n /* Widget content rendered within the banner region, below the heading and message. /\n bannerRegion?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /* Variants for the sizing of the content columns. Two column will make the columns equal in size. /\n variant?: 'two-column' \| 'narrow-wide' \| 'wide-narrow';\n /* Utilities as the last column /\n utilities?: ReactNode;\n}\n\nconst BANNER_OVERLAP_MULTIPLIER = 8;\n\nconst DEFAULT_FIXED_HEIGHT_DVH = 25;\n\nconst CONTENT_PADDING_MULTIPLIER = 2.5;\n\n// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.\nconst getFixedHeightDvh = (value: number \| undefined): string => {\n const clamped =\n value !== undefined && Number.isFinite(value)\n ? Math.min(100, Math.max(1, value))\n : DEFAULT_FIXED_HEIGHT_DVH;\n return `${clamped}dvh`;\n};\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-offset));\n background: ${theme.base.palette['app-background']};\n `;\n});\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' \| 'backgroundColor' \| 'height'> & {\n $hasContent?: boolean;\n $heightValue?: number;\n }\n>(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {\n const fixedHeight = getFixedHeightDvh($heightValue);\n const heightValue = {\n content: 'auto',\n fixed: fixedHeight,\n full: 'calc(100dvh - var(--appshell-offset, 0rem))'\n }[height];\n\n const backgroundStyles = css`\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n\n const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;\n\n let layoutStyles;\n if (fixedHeightBannerWithContent) {\n layoutStyles = css`\n min-height: ${fixedHeight};\n position: relative;\n display: flex;\n flex-direction: column;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: ${fixedHeight};\n z-index: 0;\n ${backgroundStyles}\n }\n\n > {\n position: relative;\n flex: 1;\n }\n `;\n } else if ($hasContent) {\n layoutStyles = css`\n ${height === 'full' &&\n css`\n min-height: ${heightValue};\n `}\n display: flex;\n flex-direction: column;\n\n > * {\n flex: 1;\n }\n ${backgroundStyles}\n `;\n } else {\n layoutStyles = css`\n height: ${heightValue};\n ${backgroundStyles}\n `;\n }\n\n return css`\n width: 100%;\n ${layoutStyles}\n --content-height-in-agent: calc(\n 100dvh - var(--appshell-top-offset, var(--appshell-offset, 0rem)) - calc(${theme.base\n .spacing} * ${CONTENT_PADDING_MULTIPLIER})\n );\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n \| 'variant'\n \| 'backgroundColor'\n \| 'backgroundImage'\n \| 'tintImage'\n \| 'align'\n \| 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: ${align};\n\n ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 85%;\n padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 80rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledPageContentWrapper = styled.div<{ enableContentOverlap?: boolean }>(\n ({ theme, enableContentOverlap }) => css`\n ${enableContentOverlap &&\n css`\n margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});\n position: relative;\n `}\n `\n);\n\nStyledPageContentWrapper.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledBannerContentArea = styled.div`\n text-align: start;\n`;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n title,\n a,\n b,\n bannerRegion,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n const hasBannerRegionContent = !!bannerRegion?.length;\n\n const theme = useTheme();\n const { light: paletteLight, dark: paletteDark } = theme.base.palette;\n const isDarkBanner = (banner.variant ?? 'light') === 'dark';\n\n const bgColor = banner.backgroundColor;\n\n let effectiveBackground: string;\n if (bgColor && bgColor.trim() !== '') {\n effectiveBackground = bgColor;\n } else {\n effectiveBackground = isDarkBanner ? paletteDark : paletteLight;\n }\n\n const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;\n const secondaryBackground = tryCatch(() =>\n transparentize(0.7, readableColor(effectiveForeground))\n );\n\n const pageContent = (\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n $hasContent={hasBannerRegionContent}\n $heightValue={banner.heightValue}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer>\n {banner.title && <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>}\n {!banner.title && (\n <Text variant='h1'>\n <VisuallyHiddenText>{title}</VisuallyHiddenText>\n </Text>\n )}\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n <ThemeOverride\n theme={{\n components: {\n agent: {\n background: 'transparent',\n 'foreground-color': effectiveForeground,\n 'user-message': {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground\n },\n history: {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground,\n item: {\n 'selected-background': transparentize(0.7, theme.base.palette.interactive)\n }\n },\n 'coach-message': {\n avatar: {\n background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,\n 'foreground-color': effectiveForeground\n }\n },\n questionnaire: {\n background: theme.base.palette['primary-background'],\n 'foreground-color': 'auto'\n },\n ai: readableHue(theme.base.palette.ai, effectiveBackground)\n },\n link: {\n color: readableHue(theme.base.palette.interactive, effectiveBackground)\n }\n }\n }}\n >\n {hasBannerRegionContent && (\n <Flex\n as={StyledBannerContentArea}\n container={{ direction: 'column', gap: 2, pad: [1, 0, 0, 0] }}\n className={createClassName('banner-page-banner-content')}\n >\n {bannerRegion.map(el => el)}\n </Flex>\n )}\n </ThemeOverride>\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}

package/lib/components/QuickCreate/QuickCreate.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;kJAmBxB,CAAC;AAkDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;AAsBH,eAAO,MAAM,cAAc;oBAAkC,kBAAkB;0JAU7E,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,~~CA0KlE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAwBpD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,eAAO,MAAM,iBAAiB;iBAAsC,OAAO;0MAazE,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;oBAClB,kBAAkB;sBAChB,MAAM;kJAmBxB,CAAC;AAkDH,eAAO,MAAM,8BAA8B;;uJAIzC,CAAC;AAsBH,eAAO,MAAM,cAAc;oBAAkC,kBAAkB;0JAU7E,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsKlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/QuickCreate/QuickCreate.js CHANGED Viewed

@@ -127,20 +127,20 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
     const isStacked = displayVariant === 'stacked';
     const supplementalColorsList = supplementalColors(theme);
     const getActionColor = (actionColor, idx) => {
-        if (actionColor !== undefined && theme.base['case-type-colors'] !== 'ignored') {
+        const isColorIgnored = theme.base['case-type-colors'] === 'ignored';
+        if (isColorIgnored)
+            return undefined;
+        if (actionColor !== undefined) {
             const supplementalColor = resolveSupplementalColor(theme, actionColor);
-            if (supplementalColor !== undefined)
-                return supplementalColor;
-            if (isSolidColor(actionColor))
-                return actionColor;
+            return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);
         }
         return supplementalColorsList[idx % supplementalColorsList.length];
     };
     const getIconComp = (iconName, iconBackground) => {
-        return iconBackground !== undefined ? (_jsx(StyledCaseIcon, { size: 'm', name: iconName, foreground: readableColor(iconBackground, {
+        return iconBackground !== undefined ? (_jsx(StyledCaseIcon, { name: iconName, foreground: readableColor(iconBackground, {
                 mode: 'light',
                 level: 'AANonText'
-            }), background: iconBackground, shape: 'square', displayVariant: displayVariant })) : (_jsx(StyledCaseIcon, { size: 'm', name: iconName, displayVariant: displayVariant }));
+            }), background: iconBackground, displayVariant: displayVariant })) : (_jsx(StyledCaseIcon, { size: 'm', name: iconName, displayVariant: displayVariant }));
     };
     const getGridCols = () => {
         if (isMediumOrAbove)
@@ -160,7 +160,7 @@ const QuickCreate = forwardRef(function QuickCreate({ heading, actions, classNam
                                                         gap: 0.25,
                                                         alignItems: 'start',
                                                         justify: 'center'
-                                                    }, item: { grow: 1 }, children: [_jsx(StyledButtonText, { as: 'span', children: label }), description && (_jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }), _jsx(StyledArrowSection, { container: true, children: _jsx(Icon, { name: 'arrow-right', size: 'm', background: 'transparent', shape: 'square' }) })] })) }) }, label));
+                                                    }, item: { grow: 1 }, children: [_jsx(StyledButtonText, { as: 'span', children: label }), description && (_jsx(StyledQuickCreateSecondaryText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }), _jsx(StyledArrowSection, { container: true, children: _jsx(Icon, { name: 'arrow-right', size: 's' }) })] })) }) }, label));
                     }) }) })] }));
 });
 export default QuickCreate;

package/lib/components/QuickCreate/QuickCreate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' \| 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor \|\| theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(2)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n stroke-width: 50%;\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(2)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n min-width: 2rem;\n\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIcon = styled(Icon)<{ displayVariant: QuickCreateVariant }>(({\n displayVariant\n}) => {\n return css`\n ${displayVariant === 'stacked' &&\n css`\n height: 3rem;\n width: 3rem;\n `}\n `;\n});\n\nStyledCaseIcon.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string \| undefined, idx: number): string \| undefined => {\n if (actionColor !== undefined && theme.base['case-type-colors'] !== 'ignored') {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n if (supplementalColor !== undefined) return supplementalColor;\n if (isSolidColor(actionColor)) return actionColor;\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string \| undefined) => {\n return iconBackground !== undefined ? (\n <StyledCaseIcon\n size='m'\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n shape='square'\n displayVariant={displayVariant}\n />\n ) : (\n <StyledCaseIcon size='m' name={iconName} displayVariant={displayVariant} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) return 'repeat(4, minmax(0, 1fr))';\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex container={{ gap: 1.5, alignItems: 'center' }} item={{ grow: 1 }}>\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon\n name='arrow-right'\n size='m'\n background='transparent'\n shape='square'\n />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
1	+ {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n StyledIcon,\n Icon,\n Text,\n VisuallyHiddenText,\n useBreakpoint,\n useTheme,\n supplementalColors,\n resolveSupplementalColor,\n isSolidColor,\n readableColor,\n useConsolidatedRef,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledIconShape } from '@pega/cosmos-react-core/lib/components/Icon/Icon';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n description?: string;\n color?: string;\n onClick: MouseEventHandler;\n}\n\nexport type QuickCreateVariant = 'inline' \| 'stacked';\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n variant?: QuickCreateVariant;\n showHeader?: boolean;\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledQuickCreateCard = styled(Card)<{ showHeader?: boolean }>(({ theme, showHeader }) => {\n const background = showHeader ? theme.components.card.background : 'transparent';\n\n return css`\n background: ${background};\n\n ${!showHeader &&\n css`\n padding: 0;\n `}\n `;\n});\n\nStyledQuickCreateCard.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreate = styled(CardContent)<{ showHeader?: boolean }>(({ showHeader }) => {\n return css`\n ${!showHeader &&\n css`\n &&&& {\n padding: 0;\n }\n `}\n\n ul {\n list-style: none;\n }\n `;\n});\n\nStyledQuickCreate.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateButton = styled(Button)<{\n displayVariant: QuickCreateVariant;\n backgroundColor?: string;\n}>(({ theme, displayVariant, backgroundColor }) => {\n const background = backgroundColor \|\| theme.base.palette['primary-background'];\n\n return css`\n height: 100%;\n width: 100%;\n max-height: none;\n min-height: ${displayVariant === 'stacked' ? `calc(${theme.base.spacing} * 12.5)` : 'auto'};\n padding-block: calc(${theme.base.spacing} * 1.5);\n padding-inline: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n border-color: ${theme.base.palette['border-line']};\n justify-content: ${displayVariant === 'stacked' ? 'center' : 'start'};\n text-align: ${displayVariant === 'stacked' ? 'center' : 'start'};\n white-space: break-spaces;\n word-break: break-word;\n background: ${background};\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span(({ theme }) => {\n return css`\n ${lineClamp(2)}\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `;\n});\n\nStyledButtonText.defaultProps = defaultThemeProp;\n\nconst StyledQuickCreateContainer = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n width: 100%;\n\n ${variant === 'stacked' &&\n css`\n text-align: center;\n `}\n `;\n});\n\nStyledQuickCreateContainer.defaultProps = defaultThemeProp;\n\nconst StyledIconSection = styled(Flex)<{ variant: QuickCreateVariant }>(({ variant }) => {\n return css`\n min-width: ${variant === 'stacked' ? 'auto' : '2rem'};\n stroke-width: 50%;\n `;\n});\n\nStyledIconSection.defaultProps = defaultThemeProp;\n\nconst StyledMiddleSection = styled(Flex)``;\n\nStyledMiddleSection.defaultProps = defaultThemeProp;\n\nconst StyledStackedRow = styled(Flex)(() => {\n return css`\n width: 100%;\n justify-content: center;\n `;\n});\n\nStyledStackedRow.defaultProps = defaultThemeProp;\n\nexport const StyledQuickCreateSecondaryText = styled(Text)(() => {\n return css`\n ${lineClamp(2)}\n `;\n});\n\nStyledQuickCreateSecondaryText.defaultProps = defaultThemeProp;\n\nconst StyledArrowSection = styled(Flex)(() => {\n return css`\n min-width: 2rem;\n\n ${StyledIconShape} {\n height: 1rem;\n }\n\n ${StyledIcon} {\n fill: CanvasText;\n height: 100%;\n align-self: flex-end;\n }\n `;\n});\n\nStyledArrowSection.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIcon = styled(Icon)<{ displayVariant: QuickCreateVariant }>(({\n displayVariant\n}) => {\n return css`\n ${displayVariant === 'stacked' &&\n css`\n height: 3rem;\n width: 3rem;\n `}\n `;\n});\n\nStyledCaseIcon.defaultProps = defaultThemeProp;\n\nconst QuickCreate: ForwardRefForwardPropsComponent<QuickCreateProps> = forwardRef(\n function QuickCreate(\n {\n heading,\n actions,\n className,\n variant = 'inline',\n backgroundColor,\n showHeader = true,\n ...restProps\n }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n const consolidatedRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: consolidatedRef });\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: consolidatedRef });\n\n const displayVariant: QuickCreateVariant = variant === 'stacked' ? 'stacked' : 'inline';\n const isStacked = displayVariant === 'stacked';\n\n const supplementalColorsList = supplementalColors(theme);\n\n const getActionColor = (actionColor: string \| undefined, idx: number): string \| undefined => {\n const isColorIgnored = theme.base['case-type-colors'] === 'ignored';\n\n if (isColorIgnored) return undefined;\n\n if (actionColor !== undefined) {\n const supplementalColor = resolveSupplementalColor(theme, actionColor);\n\n return supplementalColor ?? (isSolidColor(actionColor) ? actionColor : undefined);\n }\n\n return supplementalColorsList[idx % supplementalColorsList.length];\n };\n\n const getIconComp = (iconName: string, iconBackground: string \| undefined) => {\n return iconBackground !== undefined ? (\n <StyledCaseIcon\n name={iconName}\n foreground={readableColor(iconBackground, {\n mode: 'light',\n level: 'AANonText'\n })}\n background={iconBackground}\n displayVariant={displayVariant}\n />\n ) : (\n <StyledCaseIcon size='m' name={iconName} displayVariant={displayVariant} />\n );\n };\n\n const getGridCols = () => {\n if (isMediumOrAbove) return 'repeat(4, minmax(0, 1fr))';\n if (isSmallOrAbove) return 'repeat(2, minmax(0, 1fr))';\n\n return `repeat(auto-fill, minmax(min(calc(${theme.base.spacing} * 30), 100%), 1fr))`;\n };\n\n return (\n <StyledQuickCreateCard\n {...restProps}\n ref={consolidatedRef}\n showHeader={showHeader}\n className={createClassName('quick-create', className)}\n >\n {showHeader ? (\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n ) : (\n <VisuallyHiddenText as='h2'>{heading}</VisuallyHiddenText>\n )}\n\n <StyledQuickCreate showHeader={showHeader}>\n <Grid\n as='ul'\n container={{\n gap: 1.5,\n cols: getGridCols(),\n ...(showHeader ? {} : { justifyContent: 'center' })\n }}\n >\n {actions.map(({ label, icon, description, color, onClick }, idx) => {\n const iconBackground = getActionColor(color, idx);\n\n return (\n <li key={label}>\n <StyledQuickCreateButton\n onClick={onClick}\n variant='secondary'\n displayVariant={displayVariant}\n backgroundColor={backgroundColor}\n >\n {isStacked ? (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0.75, alignItems: 'center', direction: 'column' }}\n >\n {icon && (\n <StyledStackedRow container>\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n </StyledStackedRow>\n )}\n\n <StyledStackedRow container>\n <StyledButtonText as='span'>{label}</StyledButtonText>\n </StyledStackedRow>\n\n {description && (\n <StyledStackedRow container>\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n </StyledStackedRow>\n )}\n </StyledQuickCreateContainer>\n ) : (\n <StyledQuickCreateContainer\n variant={displayVariant}\n container={{ gap: 0, alignItems: 'center' }}\n >\n <Flex container={{ gap: 1.5, alignItems: 'center' }} item={{ grow: 1 }}>\n {icon && (\n <StyledIconSection variant={displayVariant} container>\n {getIconComp(icon, iconBackground)}\n </StyledIconSection>\n )}\n\n <StyledMiddleSection\n container={{\n direction: 'column',\n gap: 0.25,\n alignItems: 'start',\n justify: 'center'\n }}\n item={{ grow: 1 }}\n >\n <StyledButtonText as='span'>{label}</StyledButtonText>\n\n {description && (\n <StyledQuickCreateSecondaryText variant='secondary' forwardedAs='p'>\n {description}\n </StyledQuickCreateSecondaryText>\n )}\n </StyledMiddleSection>\n </Flex>\n\n <StyledArrowSection container>\n <Icon name='arrow-right' size='s' />\n </StyledArrowSection>\n </StyledQuickCreateContainer>\n )}\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </StyledQuickCreateCard>\n );\n }\n);\n\nexport default QuickCreate;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "9.5.4",
+  "version": "9.5.5-2",
   "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.5.4",
-    "@pega/cosmos-react-work": "9.5.4",
+    "@pega/cosmos-react-core": "9.5.5-2",
+    "@pega/cosmos-react-work": "9.5.5-2",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",