@pega/cosmos-react-wss 9.10.0 → 9.11.0

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

@@ -24,12 +24,14 @@ export interface NavLinkProps {
     id: string;
     /** Text that is displayed for the link. */
     text: string;
-    /** URL or DOM id to navigate to. */
-    href: string;
+    /** URL or DOM id to navigate to. Omit when `links` is provided. */
+    href?: string;
     /** Click handler for the link. */
     onClick?: (e: InteractionEvent) => void;
     /** Indicates if the link represents the current view within the app. */
     active?: boolean;
+    /** Nested child links. When present, the link renders as an expandable group instead of a direct link. */
+    links?: NavLinkProps[];
 }
 interface OperatorProps {
     /** Props for constructing the operator avatar. */

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

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

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

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

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

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

package/lib/components/AppShell/NavLinks.js

@@ -1,13 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Flex, Button } from '@pega/cosmos-react-core';
+import { Flex, Button, MenuButton } from '@pega/cosmos-react-core';
 import { StyledNav, StyledLink } from './AppShell.styles';
+// Converts a nested NavLinkProps into the MenuItemProps shape expected by MenuButton's menu.
+const navLinkToMenuItem = (link) => {
+    const hasChildren = Boolean(link.links && link.links.length > 0);
+    return {
+        id: link.id,
+        primary: link.text,
+        href: hasChildren ? undefined : link.href,
+        selected: hasChildren ? undefined : link.active || undefined,
+        onClick: link.onClick
+            ? (_id, e) => {
+                link.onClick?.(e.nativeEvent);
+            }
+            : undefined,
+        items: hasChildren ? link.links?.map(navLinkToMenuItem) : undefined
+    };
+};
 const NavLinks = forwardRef(function NavLinks({ navLinks, navAlignment, navPosition, isDefaultWSS }, ref) {
     return (_jsx(Flex, { as: StyledNav, ref: ref, container: {
             alignItems: 'center',
             gap: 1,
             justify: navAlignment
         }, item: isDefaultWSS ? { grow: 1 } : undefined, navPosition: navPosition, children: navLinks.map(navLink => {
+            if (navLink.links && navLink.links.length > 0) {
+                return (_jsx(StyledLink, { as: MenuButton, variant: 'text', text: navLink.text, menu: { items: navLink.links.map(navLinkToMenuItem) } }, navLink.id));
+            }
             return (_jsx(StyledLink, { as: Button, "aria-current": navLink.active ? 'page' : undefined, variant: 'text', href: navLink.href, onClick: navLink.onClick, children: navLink.text }, navLink.id));
         }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW1D,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAkC,EACrF,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps } from './AppShell.types';\n\ninterface NavLinksProps {\n  navLinks: AppShellProps['navLinks'];\n  navAlignment: AppShellProps['navAlignment'];\n  navPosition: AppShellProps['navPosition'];\n  isDefaultWSS?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavLinks = forwardRef(function NavLinks(\n  { navLinks, navAlignment, navPosition, isDefaultWSS }: PropsWithoutRef<NavLinksProps>,\n  ref: NavLinksProps['ref']\n) {\n  return (\n    <Flex\n      as={StyledNav}\n      ref={ref}\n      container={{\n        alignItems: 'center',\n        gap: 1,\n        justify: navAlignment\n      }}\n      item={isDefaultWSS ? { grow: 1 } : undefined}\n      navPosition={navPosition}\n    >\n      {navLinks.map(navLink => {\n        return (\n          <StyledLink\n            as={Button}\n            aria-current={navLink.active ? 'page' : undefined}\n            variant='text'\n            key={navLink.id}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </StyledLink>\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default NavLinks;\n"]}
+{"version":3,"file":"NavLinks.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavLinks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW1D,6FAA6F;AAC7F,MAAM,iBAAiB,GAAG,CAAC,IAAkB,EAAiB,EAAE;IAC9D,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,IAAI;QAClB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;QACzC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS;QAC5D,OAAO,EAAE,IAAI,CAAC,OAAO;YACnB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACT,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;YAChC,CAAC;YACH,CAAC,CAAC,SAAS;QACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS;KACpE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAkC,EACrF,GAAyB;IAEzB,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,YAAY;SACtB,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,WAAW,EAAE,WAAW,YAEvB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACtB,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9C,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,IAFhD,OAAO,CAAC,EAAE,CAGf,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAE,MAAM,kBACI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAC,MAAM,EAEd,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,YAEvB,OAAO,CAAC,IAAI,IAJR,OAAO,CAAC,EAAE,CAKJ,CACd,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport { Flex, Button, MenuButton } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledNav, StyledLink } from './AppShell.styles';\nimport type { AppShellProps, NavLinkProps } from './AppShell.types';\n\ninterface NavLinksProps {\n  navLinks: AppShellProps['navLinks'];\n  navAlignment: AppShellProps['navAlignment'];\n  navPosition: AppShellProps['navPosition'];\n  isDefaultWSS?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n// Converts a nested NavLinkProps into the MenuItemProps shape expected by MenuButton's menu.\nconst navLinkToMenuItem = (link: NavLinkProps): MenuItemProps => {\n  const hasChildren = Boolean(link.links && link.links.length > 0);\n\n  return {\n    id: link.id,\n    primary: link.text,\n    href: hasChildren ? undefined : link.href,\n    selected: hasChildren ? undefined : link.active || undefined,\n    onClick: link.onClick\n      ? (_id, e) => {\n          link.onClick?.(e.nativeEvent);\n        }\n      : undefined,\n    items: hasChildren ? link.links?.map(navLinkToMenuItem) : undefined\n  };\n};\n\nconst NavLinks = forwardRef(function NavLinks(\n  { navLinks, navAlignment, navPosition, isDefaultWSS }: PropsWithoutRef<NavLinksProps>,\n  ref: NavLinksProps['ref']\n) {\n  return (\n    <Flex\n      as={StyledNav}\n      ref={ref}\n      container={{\n        alignItems: 'center',\n        gap: 1,\n        justify: navAlignment\n      }}\n      item={isDefaultWSS ? { grow: 1 } : undefined}\n      navPosition={navPosition}\n    >\n      {navLinks.map(navLink => {\n        if (navLink.links && navLink.links.length > 0) {\n          return (\n            <StyledLink\n              as={MenuButton}\n              variant='text'\n              key={navLink.id}\n              text={navLink.text}\n              menu={{ items: navLink.links.map(navLinkToMenuItem) }}\n            />\n          );\n        }\n\n        return (\n          <StyledLink\n            as={Button}\n            aria-current={navLink.active ? 'page' : undefined}\n            variant='text'\n            key={navLink.id}\n            href={navLink.href}\n            onClick={navLink.onClick}\n          >\n            {navLink.text}\n          </StyledLink>\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default NavLinks;\n"]}

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

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

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

@@ -1,7 +1,9 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, StyledButton, calculateForegroundColor, StyledCard } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
 import { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
+import { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
 export const StyledCaseView = styled.div ``;
 export const StyledCaseHeader = styled.header(({ theme, computeButtonFgColor }) => {
     const { components: { 'case-view': { header: { background, 'foreground-color': foregroundColor } } } } = theme;
@@ -47,6 +49,12 @@ export const StyledContentContainer = styled.div(({ theme }) => {
     ${StyledButton} {
       margin-inline-start: 0;
     }
+
+    &:has(${StyledTabs}) {
+      ${StyledStagesWrapper} {
+        --stages-wrapper-bottom-radius: 0;
+      }
+    }
   `;
 });
 StyledContentContainer.defaultProps = defaultThemeProp;

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

@@ -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;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,iEAAiE,CAAC;AAE3G,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE;IAClC,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC5D,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;oBAEM,UAAU;;;iBAGb,KAAK;;;QAGd,oBAAoB;QACtB,GAAG,CAAA;;mBAEU,KAAK;;OAEjB;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;;;;mBAMO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;MAO3C,YAAY;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,wBAAwB;;6BAED,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEzC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ;QAChC,GAAG,CAAA;WACI,UAAU,MAAM,gBAAgB;;;KAGtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledButton,\n  calculateForegroundColor,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nexport const StyledCaseView = styled.div``;\n\nexport const StyledCaseHeader = styled.header<{ computeButtonFgColor: boolean }>(\n  ({ theme, computeButtonFgColor }) => {\n    const {\n      components: {\n        'case-view': {\n          header: { background, 'foreground-color': foregroundColor }\n        }\n      }\n    } = theme;\n    const color = calculateForegroundColor(background, foregroundColor);\n\n    return css`\n      position: relative;\n      background: ${background};\n\n      h1 {\n        color: ${color};\n      }\n\n      ${computeButtonFgColor &&\n      css`\n        button {\n          color: ${color};\n        }\n      `}\n    `;\n  }\n);\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAside = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].sm};\n    max-width: 40%;\n  `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    max-width: 75rem;\n    margin-inline: auto;\n\n    h1 {\n      min-width: ${theme.base['content-width'].xs};\n    }\n\n    & > div {\n      width: 100%;\n    }\n\n    ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    ${StyledSummaryPrimaryList} {\n      grid-template-columns: auto 1fr;\n      column-gap: calc(2 * ${theme.base.spacing});\n    }\n    ${theme.components.tabs.detached &&\n    css`\n      && ${StyledCard} > ${StyledCardHeader} {\n        padding-inline: 0;\n      }\n    `}\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}
+{"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,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iEAAiE,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAC;AAElG,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE;IAClC,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC5D,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;oBAEM,UAAU;;;iBAGb,KAAK;;;QAGd,oBAAoB;QACtB,GAAG,CAAA;;mBAEU,KAAK;;OAEjB;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;;;;mBAMO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;MAO3C,YAAY;;;;YAIN,UAAU;QACd,mBAAmB;;;;GAIxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,wBAAwB;;6BAED,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEzC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ;QAChC,GAAG,CAAA;WACI,UAAU,MAAM,gBAAgB;;;KAGtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledButton,\n  calculateForegroundColor,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\nexport const StyledCaseView = styled.div``;\n\nexport const StyledCaseHeader = styled.header<{ computeButtonFgColor: boolean }>(\n  ({ theme, computeButtonFgColor }) => {\n    const {\n      components: {\n        'case-view': {\n          header: { background, 'foreground-color': foregroundColor }\n        }\n      }\n    } = theme;\n    const color = calculateForegroundColor(background, foregroundColor);\n\n    return css`\n      position: relative;\n      background: ${background};\n\n      h1 {\n        color: ${color};\n      }\n\n      ${computeButtonFgColor &&\n      css`\n        button {\n          color: ${color};\n        }\n      `}\n    `;\n  }\n);\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAside = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].sm};\n    max-width: 40%;\n  `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    max-width: 75rem;\n    margin-inline: auto;\n\n    h1 {\n      min-width: ${theme.base['content-width'].xs};\n    }\n\n    & > div {\n      width: 100%;\n    }\n\n    ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    &:has(${StyledTabs}) {\n      ${StyledStagesWrapper} {\n        --stages-wrapper-bottom-radius: 0;\n      }\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    ${StyledSummaryPrimaryList} {\n      grid-template-columns: auto 1fr;\n      column-gap: calc(2 * ${theme.base.spacing});\n    }\n    ${theme.components.tabs.detached &&\n    css`\n      && ${StyledCard} > ${StyledCardHeader} {\n        padding-inline: 0;\n      }\n    `}\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/BannerPage.js

@@ -91,7 +91,7 @@ export const StyledBannerContainer = styled.div(({ theme, backgroundImage, backg
     width: 100%;
     ${layoutStyles}
     --content-height-in-agent: calc(
-        100dvh - var(--appshell-top-offset, 0rem) - calc(${theme.base
+        100dvh - var(--appshell-top-offset, var(--appshell-offset, 0rem)) - calc(${theme.base
         .spacing} * ${CONTENT_PADDING_MULTIPLIER})
       );
   `;

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

@@ -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  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, 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"]}
+{"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/package.json

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