@pega/cosmos-react-wss 9.5.5-1 → 9.5.5-3

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/PageTemplates/BannerPage.d.ts

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

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

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

package/lib/components/PageTemplates/BannerPage.js

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

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

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

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

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

package/lib/components/QuickCreate/QuickCreate.js

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