npm - @pega/cosmos-react-wss - Versions diffs - 7.0.0-build.2.2 → 7.0.0-build.20.1 - Mend

@pega/cosmos-react-wss 7.0.0-build.2.2 → 7.0.0-build.20.1

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 (16) 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":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAmB,MAAM,OAAO,CAAC;~~AAsB7E~~,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;~~AAK5E~~,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CAuR5D~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAwB7E,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAM5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0R5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -1,9 +1,10 @@
 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, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { Avatar, Backdrop, Button, Configuration, ContextSwitcher, debounce, Drawer, Flex, Icon, Image, Popover, SkipLinks, Text, useBreakpoint, useConsolidatedRef, useDirection, useElement, useI18n, useOuterEvent, useTheme } 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 { StyledAppHeader, StyledCountIcon, StyledHamburgerMenu, StyledMain, StyledNotificationCount, StyledPrimaryName, StyledEndNavBlock } from './AppShell.styles';
 import Notifications from './Notifications';
 import MobileHeaderContent from './MobileHeaderContent';
@@ -23,6 +24,8 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const [popoverEl, setPopoverEl] = useElement();
     const [notificationsButtonEl, setNotificationsButtonEl] = useElement();
     const minInlineWidth = useRef(0);
+    const theme = useTheme();
+    const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
     const headerRef = useConsolidatedRef(setHeaderEl, ref);
     const isSmallOrAbove = useBreakpoint('sm');
     const { end } = useDirection();
@@ -67,7 +70,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             else if (navSectionEl)
                 navSectionEl.style.visibility = 'visible';
         }, { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 });
-        if (headerEl && navSectionEl && navSectionEl.firstChild && navSectionEl.lastChild) {
+        if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {
             intersectionObserver.observe(navAlignment === 'start'
                 ? navSectionEl.lastChild
                 : navSectionEl.firstChild);
@@ -95,21 +98,21 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             openDrawer('notifications');
         }
     }, [hasMobileNav, drawerOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: appInfo.appName }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [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);
-                                                            notifications.onNotificationsClose?.();
+    return (_jsxs(_Fragment, { children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(Configuration, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsx(Text, { as: StyledPrimaryName, variant: 'h1', children: appInfo.appName }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [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);
+                                                                notifications.onNotificationsClose?.();
+                                                            }
+                                                            else {
+                                                                setNotificationsPopover(true);
+                                                                notifications.onNotificationsOpen?.();
+                                                            }
                                                         }
                                                         else {
-                                                            setNotificationsPopover(true);
-                                                            notifications.onNotificationsOpen?.();
+                                                            openDrawer('notifications');
                                                         }
-                                                    }
-                                                    else {
-                                                        openDrawer('notifications');
-                                                    }
-                                                }, children: _jsxs(StyledNotificationCount, { children: [_jsx(Icon, { name: 'bell' }), !!notifications.count && (_jsx(StyledCountIcon, { variant: 'urgent', children: notifications.count }))] }) }), _jsx(Popover, { ref: setPopoverEl, show: notificationsPopover, target: notificationsButtonEl, placement: 'bottom-end', children: _jsx(Notifications, { ...notifications, popover: true }) })] })), !hasMobileNav && (_jsx(Operator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), !hasMobileNav && navPosition === 'below' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] }), _jsx(StyledMain, { navPosition: navPosition, children: main }), _jsx(Backdrop, { open: backdropOpen, transitionSpeed: 'none', onAfterTransitionIn: () => setDrawerOpen(true), onBeforeTransitionOut: () => setDrawerOpen(false), onClick: e => {
+                                                    }, 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 }) })] })), !hasMobileNav && (_jsx(Operator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })), hasMobileNav && (_jsx(Button, { as: StyledHamburgerMenu, label: t('open_app_header_drawer'), variant: 'simple', icon: true, onClick: () => openDrawer('navigationOperator'), children: _jsx(Icon, { name: 'bars' }) }))] })] }), !hasMobileNav && navPosition === 'below' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] }) }), _jsx(StyledMain, { navPosition: navPosition, children: main }), _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, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\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} from '@pega/cosmos-react-core';\nimport type { ForwardProps, 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';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline'\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\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 && navSectionEl.firstChild && navSectionEl.lastChild) {\n intersectionObserver.observe(\n navAlignment === 'start'\n ? (navSectionEl.lastChild as Element)\n : (navSectionEl.firstChild as Element)\n );\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n if (!headerEl) {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n }\n };\n }, [headerEl, navSectionEl, navLinks]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove \|\| linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n return (\n <>\n <SkipLinks items={skipLinks} />\n <StyledAppHeader ref={headerRef} navPosition={navPosition}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Text as={StyledPrimaryName} variant='h1'>\n {appInfo.appName}\n </Text>\n )}\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n\n <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\n\n {!hasMobileNav && (\n <Operator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n <Avatar {...operator.avatar} />\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {!hasMobileNav && navPosition === 'below' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n </StyledAppHeader>\n\n <StyledMain navPosition={navPosition}>{main}</StyledMain>\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}
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, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n Configuration,\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} from '@pega/cosmos-react-core';\nimport type { ForwardProps, 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';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline'\n } = props;\n const t = useI18n();\n const {\n contexts,\n onContextClick,\n label: contextSwitcherLabel = t('switch_to')\n } = contextSwitcher;\n const [backdropOpen, setBackdropOpen] = useState(false);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerContent, setDrawerContent] = useState('');\n const [notificationsPopover, setNotificationsPopover] = useState(false);\n const [linksCollapsed, setLinksCollapsed] = useState(false);\n const [hasMobileNav, setHasMobileNav] = useState(true);\n\n const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n const minInlineWidth = useRef(0);\n const theme = useTheme();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const { end } = useDirection();\n\n let appInfoAs: ElementType = 'div';\n if (appInfo.href) appInfoAs = 'a';\n else if (appInfo.onClick) appInfoAs = BareButton;\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const closeDrawer = () => {\n setDrawerContent('');\n setBackdropOpen(false);\n };\n\n const openDrawer = (content: 'notifications' \| 'navigationOperator') => {\n setDrawerContent(content);\n setBackdropOpen(true);\n };\n\n useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n setNotificationsPopover(false);\n notifications?.onNotificationsClose?.();\n });\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setLinksCollapsed(false);\n }\n }, 100);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (\n entries[0].intersectionRatio > 0 &&\n entries[0].intersectionRatio < 1 &&\n !linksCollapsed\n ) {\n if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n setLinksCollapsed(true);\n } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n },\n { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n );\n\n if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n intersectionObserver.observe(\n navAlignment === 'start'\n ? (navSectionEl.lastChild as Element)\n : (navSectionEl.firstChild as Element)\n );\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n if (!headerEl) {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n }\n };\n }, [headerEl, navSectionEl, navLinks]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove \|\| linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n return (\n <>\n <SkipLinks items={skipLinks} />\n <Configuration theme={headerTheme}>\n <StyledAppHeader ref={headerRef} navPosition={navPosition}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Text as={StyledPrimaryName} variant='h1'>\n {appInfo.appName}\n </Text>\n )}\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n\n <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\n\n {!hasMobileNav && (\n <Operator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n <Avatar {...operator.avatar} />\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {!hasMobileNav && navPosition === 'below' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n </StyledAppHeader>\n </Configuration>\n <StyledMain navPosition={navPosition}>{main}</StyledMain>\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}

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":";AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,SAAS,yGAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;~~SAyCvF~~,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAY5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;SAO3D,CAAC;AAEH,eAAO,MAAM,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,4GAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uGAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,yGAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAEF,eAAO,MAAM,eAAe;;~~uDAkB3B~~,CAAC;~~AAEF~~,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;SAiBnC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;SAMpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC"}
1	+ {"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,SAAS,yGAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;iBAAgC,aAAa,CAAC,aAAa,CAAC;SA0CvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAY5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;YAAwB,OAAO;SAO3D,CAAC;AAEH,eAAO,MAAM,UAAU,uGAyCrB,CAAC;AAIH,eAAO,MAAM,UAAU;iBAA8B,aAAa,CAAC,aAAa,CAAC;SAehF,CAAC;AAIF,eAAO,MAAM,mBAAmB,4GAI9B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAK1B,CAAC;AAIH,eAAO,MAAM,gBAAgB,uGAmC3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,yGAU1B,CAAC;AAIH,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAEF,eAAO,MAAM,eAAe;;uDAgB1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;SAW9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAQjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;SAiBnC,CAAC;AAIH,eAAO,MAAM,yBAAyB;;SAMpC,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAUvC,CAAC"}

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

@@ -26,6 +26,7 @@ export const StyledAppHeader = styled.header(({ navPosition, theme }) => {
       background-color: ${theme.base.palette['primary-background']};
       z-index: calc(${theme.base['z-index'].popover} + 1);
       border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      color: ${theme.base.palette['foreground-color']};
       ${StyledImage} {
         height: 1.625rem;
@@ -201,16 +202,16 @@ export const StyledNotificationCount = styled.span `
 `;
 export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing } } }) => {
     return css `
-      position: absolute;
-      inset-inline-start: calc(2 * ${spacing});
-      inset-block-start: calc(-0.25 * ${spacing});
-      padding: 0 calc(0.5 * ${spacing});
+    position: absolute;
+    inset-inline-start: calc(2 * ${spacing});
+    inset-block-start: calc(-0.25 * ${spacing});
+    padding: 0 calc(0.5 * ${spacing});
-      @media (pointer: coarse) {
-        inset-inline-start: calc(2.5 * ${spacing});
-        inset-block-start: calc(0.5 * ${spacing});
-      }
-    `;
+    @media (pointer: coarse) {
+      inset-inline-start: calc(2.5 * ${spacing});
+      inset-block-start: calc(0.5 * ${spacing});
+    }
+  `;
 });
 export const StyledNotifications = styled.div(({ popover, theme }) => {
     return css `

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 Count,\n defaultThemeProp,\n StyledFlex,\n StyledImage,\n StyledText,\n StyledVisual,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\n\nexport const StyledNav = styled.nav`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n height: 100%;\n\n a:hover,\n button:hover {\n text-decoration: none;\n }\n`;\n\nexport const StyledAppHeader = styled.header<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n return css`\n position: sticky;\n inset-block-start: 0;\n height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: calc(${theme.base['z-index'].popover} + 1);\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n ${StyledImage} {\n height: 1.625rem;\n }\n\n & > ${StyledFlex} {\n height: ${headerHeight};\n\n ${StyledAppHeaderOperator} {\n margin: ${theme.base.spacing};\n }\n\n & > a,\n & > button {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n min-height: ${headerHeight};\n\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n & > ${StyledNav} {\n height: calc(${tallHeaderHeight} - ${headerHeight});\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${theme.base.palette['foreground-color']};\n font-size: ${fontSize.xxl};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n max-width: 50ch;\n `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return (\n mobile &&\n css`\n margin-inline-start: auto;\n `\n );\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n const hoverColor = lighten(0.2, theme.base.palette.interactive);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n margin: 0 calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSize.m};\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n\n &:last-of-type {\n margin-inline-end: ${theme.base.spacing};\n }\n\n &[aria-current='page'] {\n ::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${theme.base.palette.interactive};\n height: 0.125rem;\n width: 100%;\n }\n }\n\n &:hover {\n ::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${hoverColor};\n height: 0.125rem;\n width: 100%;\n }\n }\n `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;\n return css`\n --appshell-offset: ${calculatedHeaderHeight};\n --appshell-horizontal-offset: 0;\n position: relative;\n min-height: calc(100vh - ${calculatedHeaderHeight});\n background-color: ${theme.base.palette['primary-background']};\n\n :focus {\n outline: none;\n }\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n return css`\n margin: ${theme.base.spacing};\n `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n return css`\n height: 100vh;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n font-size: ${fontSize.m};\n padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n text-decoration: none;\n }\n\n &[aria-current='page'] {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${activeColor};\n }\n\n @media (pointer: coarse) {\n height: ${theme.base['hit-area'].finger};\n }\n `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n position: sticky;\n bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n & + ${StyledFlex} {\n margin-inline-start: calc(3 * ${theme.base.spacing});\n }\n `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.span`\n flex-shrink: 0;\n`;\n\nexport const StyledCountIcon = styled(Count)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n position: absolute;\n inset-inline-start: calc(2 * ${spacing});\n inset-block-start: calc(-0.25 * ${spacing});\n padding: 0 calc(0.5 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(2.5 * ${spacing});\n inset-block-start: calc(0.5 * ${spacing});\n }\n `;\n }\n);\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n return css`\n min-height: ${popover ? '10rem' : '100vh'};\n max-height: ${popover ? '50vh' : '100vh'};\n background-color: ${theme.base.palette['primary-background']};\n\n ${popover &&\n css`\n max-width: 80ch;\n `}\n `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n return css`\n overflow: auto;\n\n & > li:not(:last-of-type) {\n border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n return css`\n width: 100%;\n padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n text-decoration: none;\n cursor: pointer;\n text-align: start;\n white-space: normal;\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n }\n\n &:focus {\n outline: none;\n box-shadow: ${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"]}
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 Count,\n defaultThemeProp,\n StyledFlex,\n StyledImage,\n StyledText,\n StyledVisual,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { AppShellProps } from './AppShell.types';\n\nconst headerHeight = '3rem';\nconst tallHeaderHeight = '6rem';\n\nexport const StyledNav = styled.nav`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n height: 100%;\n\n a:hover,\n button:hover {\n text-decoration: none;\n }\n`;\n\nexport const StyledAppHeader = styled.header<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n return css`\n position: sticky;\n inset-block-start: 0;\n height: ${navPosition === 'below' ? tallHeaderHeight : headerHeight};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: calc(${theme.base['z-index'].popover} + 1);\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n color: ${theme.base.palette['foreground-color']};\n\n ${StyledImage} {\n height: 1.625rem;\n }\n\n & > ${StyledFlex} {\n height: ${headerHeight};\n\n ${StyledAppHeaderOperator} {\n margin: ${theme.base.spacing};\n }\n\n & > a,\n & > button {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n min-height: ${headerHeight};\n\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n & > ${StyledNav} {\n height: calc(${tallHeaderHeight} - ${headerHeight});\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryName = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n color: ${theme.base.palette['foreground-color']};\n font-size: ${fontSize.xxl};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n max-width: 50ch;\n `;\n});\n\nStyledPrimaryName.defaultProps = defaultThemeProp;\n\nexport const StyledEndNavBlock = styled.div<{ mobile: boolean }>(({ mobile }) => {\n return (\n mobile &&\n css`\n margin-inline-start: auto;\n `\n );\n});\n\nexport const StyledLink = styled.a(({ theme }) => {\n const hoverColor = lighten(0.2, theme.base.palette.interactive);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n margin: 0 calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSize.m};\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n\n &:last-of-type {\n margin-inline-end: ${theme.base.spacing};\n }\n\n &[aria-current='page'] {\n ::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${theme.base.palette.interactive};\n height: 0.125rem;\n width: 100%;\n }\n }\n\n &:hover {\n ::after {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n background-color: ${hoverColor};\n height: 0.125rem;\n width: 100%;\n }\n }\n `;\n});\n\nStyledLink.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ navPosition: AppShellProps['navPosition'] }>(\n ({ navPosition, theme }) => {\n const calculatedHeaderHeight = navPosition === 'below' ? tallHeaderHeight : headerHeight;\n return css`\n --appshell-offset: ${calculatedHeaderHeight};\n --appshell-horizontal-offset: 0;\n position: relative;\n min-height: calc(100vh - ${calculatedHeaderHeight});\n background-color: ${theme.base.palette['primary-background']};\n\n :focus {\n outline: none;\n }\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledHamburgerMenu = styled.button(({ theme }) => {\n return css`\n margin: ${theme.base.spacing};\n `;\n});\n\nStyledHamburgerMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled.nav(({ theme }) => {\n return css`\n height: 100vh;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileLink = styled.a(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n font-size: ${fontSize.m};\n padding: ${theme.base.spacing} calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n text-decoration: none;\n }\n\n &[aria-current='page'] {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${activeColor};\n }\n\n @media (pointer: coarse) {\n height: ${theme.base['hit-area'].finger};\n }\n `;\n});\n\nStyledMobileLink.defaultProps = defaultThemeProp;\n\nexport const StyledLinkSection = styled.div`\n overflow: auto;\n`;\n\nexport const StyledOperatorSection = styled.div`\n position: sticky;\n bottom: 0;\n`;\n\nexport const HorizontalBreak = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin: ${theme.base.spacing} calc(6 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n & + ${StyledFlex} {\n margin-inline-start: calc(3 * ${theme.base.spacing});\n }\n `;\n});\n\nHorizontalBreak.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationCount = styled.span`\n flex-shrink: 0;\n`;\n\nexport const StyledCountIcon = styled(Count)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n position: absolute;\n inset-inline-start: calc(2 * ${spacing});\n inset-block-start: calc(-0.25 * ${spacing});\n padding: 0 calc(0.5 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(2.5 * ${spacing});\n inset-block-start: calc(0.5 * ${spacing});\n }\n `;\n});\n\nexport const StyledNotifications = styled.div<{ popover?: boolean }>(({ popover, theme }) => {\n return css`\n min-height: ${popover ? '10rem' : '100vh'};\n max-height: ${popover ? '50vh' : '100vh'};\n background-color: ${theme.base.palette['primary-background']};\n\n ${popover &&\n css`\n max-width: 80ch;\n `}\n `;\n});\n\nStyledNotifications.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationList = styled.ul(({ theme }) => {\n return css`\n overflow: auto;\n\n & > li:not(:last-of-type) {\n border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n }\n `;\n});\n\nStyledNotificationList.defaultProps = defaultThemeProp;\n\nexport const StyledNotification = styled(BareButton)(({ theme }) => {\n const hoverColor = lighten(0.55, theme.base.palette.interactive);\n\n return css`\n width: 100%;\n padding: calc(2 * ${theme.base.spacing}) calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['primary-background']};\n text-decoration: none;\n cursor: pointer;\n text-align: start;\n white-space: normal;\n\n &:hover,\n &:focus {\n background-color: ${hoverColor};\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledVisual} {\n align-self: flex-start;\n }\n `;\n});\n\nStyledNotification.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n position: relative;\n ${StyledAlert} {\n position: absolute;\n inset-inline-start: 0.375rem;\n inset-block-start: 1.625rem;\n background-color: ${theme.base.palette.interactive};\n height: 0.75rem;\n width: 0.75rem;\n\n ${!unread &&\n css`\n display: none;\n `}\n }\n `;\n});\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n return css`\n font-weight: ${unread\n ? theme.base['font-weight'].bold\n : theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n ({ theme, unread }) => {\n return css`\n ${StyledText} {\n opacity: ${unread\n ? theme.base.transparency['transparent-1']\n : theme.base.transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n"]}

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

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

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

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { defaultThemeProp, StyledCard, tryCatch, useBreakpoint } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledCard, tryCatch, useBreakpoint, readableColor } from '@pega/cosmos-react-core';
 import { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
 import { StyledFeedPost } from '@pega/cosmos-react-social/lib/components/Feed/FeedPost';
 import { StyledCaseSummaryFields } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';

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

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

package/lib/components/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,EAAE,EAAE,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAIjE~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,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;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,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;CACxD;AAED,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,iKAoBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAoBlC,CAAC;AAUF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAwDxD,CAAC"}
1	+ {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,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;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,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;CACxD;AAED,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,iKAoBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAoBlC,CAAC;AAUF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAwDxD,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { readableColor, transparentize } from 'polished';
+import { transparentize } from 'polished';
 import { forwardRef, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Grid, Text, tryCatch } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor } from '@pega/cosmos-react-core';
 export const StyledBannerPage = styled.div(({ theme }) => {
     return css `
     min-height: calc(100vh - var(--appshell-offset));
@@ -34,7 +34,7 @@ export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, ba
     let textColor = variant === 'light' ? dark : light;
     let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);
     if (backgroundColor && !backgroundImage) {
-        textColor = tryCatch(() => readableColor(backgroundColor, light, dark)) ?? dark;
+        textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;
         overlayColor = 'transparent';
     }
     else if (!backgroundColor && !backgroundImage) {

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":";AAAA,OAAO,EAAE,~~aAAa,EAAE,~~cAAc,EAAE,MAAM,UAAU,CAAC;~~AACzD~~,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,~~EAAE~~,gBAAgB,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,QAAQ,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAkCvF~~,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE7C,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;;mBAEO,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE/B,eAAe;QACjB,GAAG,CAAA;+BACwB,eAAe;;;;KAIzC;;MAEC,eAAe;QACjB,GAAG,CAAA;0BACmB,eAAe;KACpC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAGpC,CAAC,EACC,OAAO,GAAG,OAAO,EACjB,eAAe,EACf,eAAe,EACf,SAAS,GAAG,IAAI,EAChB,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EACzB,EACF,EACF,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,IAAI,YAAY,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAChG,IAAI,eAAe,IAAI,CAAC,eAAe,EAAE;QACvC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,~~EAAE,KAAK,EAAE,IAAI,~~CAAC,CAAC,IAAI,IAAI,CAAC;~~QAChF~~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","sourcesContent":["import { ~~readableColor,~~ transparentize } from 'polished';\nimport { forwardRef, Fragment } from 'react';\nimport type { FC, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Grid, Text, tryCatch } from '@pega/cosmos-react-core';\nimport type { ForwardProps } 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}\n\nexport interface BannerPageProps {\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}\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'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n return css`\n width: 100%;\n height: calc(${theme.base.spacing} 38);\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<BannerOptions, 'variant' \| 'backgroundColor' \| 'backgroundImage' \| 'tintImage'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n theme: {\n base: {\n palette: { light, dark }\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~~, light, dark~~)) ?? 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: center;\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\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nexport const BannerPage: FC<BannerPageProps & ForwardProps> = forwardRef(function BannerPage(\n { banner, a, b, variant = 'two-column', ...restProps }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n) {\n const gridCols = variantMap[variant];\n return (\n <StyledBannerPage ref={ref} {...restProps}>\n {banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n tintImage={banner.tintImage}\n >\n <StyledContentContainer>\n <Text variant='h1'>{banner.title}</Text>\n {banner.message && (\n <Text variant='primary' as='p'>\n {banner.message}\n </Text>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n )}\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n >\n {!!a.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {a.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {b.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n </Grid>\n </StyledBannerPage>\n );\n});\n"]}
1	+ {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACd,MAAM,yBAAyB,CAAC;AAkCjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE7C,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;;mBAEO,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE/B,eAAe;QACjB,GAAG,CAAA;+BACwB,eAAe;;;;KAIzC;;MAEC,eAAe;QACjB,GAAG,CAAA;0BACmB,eAAe;KACpC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAGpC,CAAC,EACC,OAAO,GAAG,OAAO,EACjB,eAAe,EACf,eAAe,EACf,SAAS,GAAG,IAAI,EAChB,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EACzB,EACF,EACF,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,IAAI,YAAY,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAChG,IAAI,eAAe,IAAI,CAAC,eAAe,EAAE;QACvC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC;QACnE,YAAY,GAAG,aAAa,CAAC;KAC9B;SAAM,IAAI,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE;QAC/C,YAAY,GAAG,aAAa,CAAC;QAC7B,SAAS,GAAG,IAAI,CAAC;KAClB;IACD,OAAO,GAAG,CAAA;0BACY,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;eACnD,SAAS;;;;KAInB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;sBACQ,OAAO;;;;sCAIS,WAAW,CAAC,EAAE;;wBAE5B,OAAO;;sCAEO,WAAW,CAAC,EAAE;;;KAG/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,UAAU,GAAG;IACjB,YAAY,EAAE,SAAS;IACvB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAuC,UAAU,CAAC,SAAS,UAAU,CAC1F,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,YAAY,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B;IAE3B,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACrC,OAAO,CACL,MAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aACtC,MAAM,IAAI,CACT,KAAC,qBAAqB,IACpB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,YAEvC,KAAC,IAAI,IACH,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACnF,SAAS,EAAE,MAAM,CAAC,SAAS,YAE3B,MAAC,sBAAsB,eACrB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAQ,EACvC,MAAM,CAAC,OAAO,IAAI,CACjB,KAAC,IAAI,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,YAC3B,MAAM,CAAC,OAAO,GACV,CACR,IACsB,GACpB,GACe,CACzB,EACD,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EACrB,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAClC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,EACtD,EAAE,EAAE,sBAAsB,aAEzB,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CACb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;wBACpB,oDAAoD;wBACpD,KAAC,QAAQ,cAAc,EAAE,IAAV,KAAK,CAAiB,CACtC,CAAC,GACG,CACR,EACA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAClB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAC7C,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;wBACpB,oDAAoD;wBACpD,KAAC,QAAQ,cAAc,EAAE,IAAV,KAAK,CAAiB,CACtC,CAAC,GACG,CACR,IACI,IACU,CACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, Fragment } from 'react';\nimport type { FC, 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} from '@pega/cosmos-react-core';\nimport type { ForwardProps } 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}\n\nexport interface BannerPageProps {\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}\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'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n return css`\n width: 100%;\n height: calc(${theme.base.spacing} 38);\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<BannerOptions, 'variant' \| 'backgroundColor' \| 'backgroundImage' \| 'tintImage'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n theme: {\n base: {\n palette: { light, dark }\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: center;\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\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nexport const BannerPage: FC<BannerPageProps & ForwardProps> = forwardRef(function BannerPage(\n { banner, a, b, variant = 'two-column', ...restProps }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n) {\n const gridCols = variantMap[variant];\n return (\n <StyledBannerPage ref={ref} {...restProps}>\n {banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n tintImage={banner.tintImage}\n >\n <StyledContentContainer>\n <Text variant='h1'>{banner.title}</Text>\n {banner.message && (\n <Text variant='primary' as='p'>\n {banner.message}\n </Text>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n )}\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n >\n {!!a.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {a.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {b.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n </Grid>\n </StyledBannerPage>\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,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBvE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,wLAI7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,~~gNAgBnC~~,CAAC;~~AAWF~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoCnE,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,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBvE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,wLAI7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAiBlC,CAAC;AAWH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -9,18 +9,18 @@ export const StyledQuickCreate = styled(CardContent) `
 `;
 export const StyledQuickCreateButton = styled(Button)(({ icon, theme }) => {
     return css `
-      width: 100%;
-      height: 4rem;
-      padding: calc(${theme.base.spacing} * 2);
-      border-radius: ${theme.base['border-radius']};
-      justify-content: ${icon ? 'start' : 'center'};
-      text-align: start;
+    width: 100%;
+    height: 4rem;
+    padding: calc(${theme.base.spacing} * 2);
+    border-radius: ${theme.base['border-radius']};
+    justify-content: ${icon ? 'start' : 'center'};
+    text-align: start;
-      & ${StyledIcon} {
-        width: 1em;
-        height: 1em;
-      }
-    `;
+    & ${StyledIcon} {
+      width: 1em;
+      height: 1em;
+    }
+  `;
 });
 StyledQuickCreateButton.defaultProps = defaultThemeProp;
 const StyledButtonText = styled.span `

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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAejC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,~~CACnD~~,CAAC,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,EAAE,EAAE;~~IAClB~~,OAAO,GAAG,CAAA;;;~~sBAGQ~~,KAAK,CAAC,IAAI,CAAC,OAAO;~~uBACjB~~,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;~~yBACzB~~,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;~~UAGxC~~,UAAU;;;;~~KAIf~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKnC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoB,EACpD,GAA4B;IAE5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,GACxB,EACb,KAAC,iBAAiB,cAChB,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;wBACT,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,gCAAgC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB;qBACrF,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;wBACxC,OAAO,CACL,uBACE,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,YACvE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,KAAC,gBAAgB,cAAE,KAAK,GAAoB,IACvC,GACiB,IANnB,KAAK,CAOT,CACN,CAAC;oBACJ,CAAC,CAAC,GACG,GACW,IACf,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, FunctionComponent, 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 Icon,\n StyledIcon,\n Text,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n onClick: MouseEventHandler;\n}\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledQuickCreate = styled(CardContent)`\n ul {\n list-style: none;\n }\n`;\n\nexport const StyledQuickCreateButton = styled(Button)<Pick<QuickCreateAction, 'icon'>>(\n ({ icon, theme }) => {\n return css`\n width: 100%;\n height: 4rem;\n padding: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n justify-content: ${icon ? 'start' : 'center'};\n text-align: start;\n\n & ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n }\n);\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps> = forwardRef(\n function QuickCreate(\n { heading, actions, ...restProps }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n return (\n <Card {...restProps} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n <StyledQuickCreate>\n <Grid\n as='ul'\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`\n }}\n >\n {actions.map(({ label, icon, onClick }) => {\n return (\n <li key={label}>\n <StyledQuickCreateButton onClick={onClick} variant='secondary' icon={icon}>\n <Flex container={{ gap: 2, alignItems: 'center' }} as='span'>\n {icon && <Icon name={icon} />}\n <StyledButtonText>{label}</StyledButtonText>\n </Flex>\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </Card>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
1	+ {"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAejC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAkC,CAAC,EACtF,IAAI,EACJ,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,OAAO;qBACjB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;uBACzB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;QAGxC,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKnC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoB,EACpD,GAA4B;IAE5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,GACxB,EACb,KAAC,iBAAiB,cAChB,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;wBACT,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,gCAAgC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB;qBACrF,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;wBACxC,OAAO,CACL,uBACE,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,YACvE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,KAAC,gBAAgB,cAAE,KAAK,GAAoB,IACvC,GACiB,IANnB,KAAK,CAOT,CACN,CAAC;oBACJ,CAAC,CAAC,GACG,GACW,IACf,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, FunctionComponent, 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 Icon,\n StyledIcon,\n Text,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n onClick: MouseEventHandler;\n}\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledQuickCreate = styled(CardContent)`\n ul {\n list-style: none;\n }\n`;\n\nexport const StyledQuickCreateButton = styled(Button)<Pick<QuickCreateAction, 'icon'>>(({\n icon,\n theme\n}) => {\n return css`\n width: 100%;\n height: 4rem;\n padding: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n justify-content: ${icon ? 'start' : 'center'};\n text-align: start;\n\n & ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps> = forwardRef(\n function QuickCreate(\n { heading, actions, ...restProps }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n return (\n <Card {...restProps} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n <StyledQuickCreate>\n <Grid\n as='ul'\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`\n }}\n >\n {actions.map(({ label, icon, onClick }) => {\n return (\n <li key={label}>\n <StyledQuickCreateButton onClick={onClick} variant='secondary' icon={icon}>\n <Flex container={{ gap: 2, alignItems: 'center' }} as='span'>\n {icon && <Icon name={icon} />}\n <StyledButtonText>{label}</StyledButtonText>\n </Flex>\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </Card>\n );\n }\n);\n\nexport default QuickCreate;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "7.0.0-build.2.2",
+  "version": "7.0.0-build.20.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,9 +19,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "7.0.0-build.2.2",
-    "@pega/cosmos-react-social": "7.0.0-build.2.2",
-    "@pega/cosmos-react-work": "7.0.0-build.2.2",
+    "@pega/cosmos-react-core": "7.0.0-build.20.1",
+    "@pega/cosmos-react-social": "7.0.0-build.20.1",
+    "@pega/cosmos-react-work": "7.0.0-build.20.1",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",