@pega/cosmos-react-wss 9.0.0-build.9.8 → 9.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/components/Footer/index.js

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

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

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

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

@@ -18,6 +18,21 @@ export interface BannerOptions {
      * @default true
      */
     tintImage?: boolean;
+    /** Controls how the banner fills vertical space.
+     * - 'fixed': preset height based on the spacing token
+     * - 'content': shrinks to fit content
+     * - 'full': fills the visible viewport below the app shell
+     * @default 'fixed'
+     */
+    height?: 'content' | 'fixed' | 'full';
+    /** Horizontal alignment of the banner text content.
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /** Vertical alignment of the banner text content.
+     * @default 'center'
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
 }
 export interface BannerPageProps extends BaseProps {
     banner: BannerOptions;
@@ -31,9 +46,15 @@ export interface BannerPageProps extends BaseProps {
     /** Utilities as the last column */
     utilities?: ReactNode;
 }
-export declare const StyledBannerPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerOptions, "backgroundColor" | "backgroundImage">, never>;
-export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "variant" | "tintImage">, never>;
-export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+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 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">>> & 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"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledBannerMessage: 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"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps>;
 //# sourceMappingURL=BannerPage.d.ts.map

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;CACrB;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;AAED,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,iKAoBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAyBlC,CAAC;AAsBF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA4HvE,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;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;CAC7C;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;AAED,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,0SA8BhC,CAAC;AAIH,eAAO,MAAM,YAAY,mUAgCxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAoBlC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAkCF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAmIvE,CAAC"}

package/lib/components/PageTemplates/BannerPage.js

@@ -10,10 +10,19 @@ export const StyledBannerPage = styled.div(({ theme }) => {
   `;
 });
 StyledBannerPage.defaultProps = defaultThemeProp;
-export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, theme }) => {
+export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {
+    const heightValue = {
+        content: 'auto',
+        fixed: `calc(${theme.base.spacing} * 38)`,
+        full: 'calc(100dvh - var(--appshell-offset, 0rem))'
+    }[height];
     return css `
     width: 100%;
-    height: calc(${theme.base.spacing} * 38);
+    height: ${heightValue};
+    ${height !== 'content' &&
+        css `
+      overflow: hidden;
+    `}
 
     ${backgroundImage &&
         css `
@@ -30,7 +39,7 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
   `;
 });
 StyledBannerContainer.defaultProps = defaultThemeProp;
-export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = true, theme: { base: { palette: { light, dark } } } }) => {
+export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', theme: { base: { palette: { light, dark } } } }) => {
     let textColor = variant === 'light' ? dark : light;
     let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);
     if (backgroundColor && !backgroundImage) {
@@ -46,7 +55,7 @@ export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, ba
       color: ${textColor};
       width: 100%;
       height: 100%;
-      text-align: center;
+      text-align: ${align};
     `;
 });
 StyledBanner.defaultProps = defaultThemeProp;
@@ -56,11 +65,6 @@ export const StyledContentContainer = styled.div(({ theme: { base: { breakpoints
       width: 100%;
       margin: 0 auto;
 
-      h1 {
-        font-size: 3rem;
-        word-break: break-word;
-      }
-
       @media screen and (min-width: ${breakpoints.md}) {
         width: 100%;
         padding: calc(${spacing} * 2.5);
@@ -71,12 +75,31 @@ export const StyledContentContainer = styled.div(({ theme: { base: { breakpoints
     `;
 });
 StyledContentContainer.defaultProps = defaultThemeProp;
+export const StyledBannerHeading = styled(Text)(({ theme: { base: { 'font-size': fontSize } } }) => css `
+    font-size: calc(${fontSize} * 3);
+    word-break: break-word;
+  `);
+StyledBannerHeading.defaultProps = defaultThemeProp;
+export const StyledBannerMessage = styled(Text)(({ theme: { base: { 'font-size': fontSize } } }) => css `
+    font-size: calc(${fontSize} * 1.5);
+  `);
+StyledBannerMessage.defaultProps = defaultThemeProp;
 const variantMap = {
-    'two-column': '1fr 1fr',
-    'narrow-wide': '3fr 7fr',
-    'wide-narrow': '7fr 3fr'
+    'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',
+    'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',
+    'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'
+};
+const verticalAlignMap = {
+    top: 'start',
+    center: 'center',
+    bottom: 'end'
+};
+const horizontalAlignMap = {
+    left: 'start',
+    center: 'center',
+    right: 'end'
 };
-const StylePageTabContent = styled.div(({ theme }) => {
+const StyledPageTabContent = styled.div(({ theme }) => {
     return css `
     padding-block: calc(2 * ${theme.base.spacing});
 
@@ -85,12 +108,17 @@ const StylePageTabContent = styled.div(({ theme }) => {
     }
   `;
 });
-StylePageTabContent.defaultProps = defaultThemeProp;
+StyledPageTabContent.defaultProps = defaultThemeProp;
 export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
     const className = createClassName('banner-page', classNameProp, { variant });
     const gridCols = variantMap[variant];
-    const pageContent = (_jsxs(Grid, { container: { gap: 2 }, md: { container: { cols: '1fr' } }, lg: { container: { cols: b ? `${gridCols}` : '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, className: createClassName('banner-page-banner'), children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: { justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }, tintImage: banner.tintImage, children: _jsxs(StyledContentContainer, { children: [_jsx(Text, { variant: 'h1', children: banner.title }), banner.message && (_jsx(Text, { variant: 'primary', as: 'p', children: banner.message }))] }) }) }));
+    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: {
+                justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',
+                alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
+                direction: 'column',
+                gap: 1
+            }, tintImage: banner.tintImage, align: banner.align, children: _jsxs(StyledContentContainer, { children: [_jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message }))] }) }) }));
     const isMediumOrAbove = useBreakpoint('md');
     const [panel, setPanel] = useState('content');
     const pageTabsRef = useRef(null);
@@ -110,7 +138,7 @@ export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant
         if (isMediumOrAbove) {
             return (_jsxs(Flex, { as: StyledBannerPage, container: { gap: 2 }, ref: ref, ...restProps, className: className, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [pageBanner, pageContent] }), _jsx("div", { children: utilities })] }));
         }
-        return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StylePageTabContent, { children: tab.content }) }, tab.id)))] })] }));
+        return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StyledPageTabContent, { children: tab.content }) }, tab.id)))] })] }));
     }
     return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, children: [pageBanner, 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}\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\nexport const StyledBannerPage = styled.div(({ theme }) => {\n  return css`\n    min-height: calc(100vh - var(--appshell-offset));\n    background-color: ${theme.base.palette['app-background']};\n  `;\n});\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n  Pick<BannerOptions, 'backgroundImage' | 'backgroundColor'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n  return css`\n    width: 100%;\n    height: calc(${theme.base.spacing} * 38);\n\n    ${backgroundImage &&\n    css`\n      background-image: url('${backgroundImage}');\n      background-size: cover;\n      background-position: center;\n      background-repeat: no-repeat;\n    `}\n\n    ${backgroundColor &&\n    css`\n      background-color: ${backgroundColor};\n    `}\n  `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n  Pick<BannerOptions, 'variant' | 'backgroundColor' | 'backgroundImage' | 'tintImage'>\n>(\n  ({\n    variant = 'light',\n    backgroundColor,\n    backgroundImage,\n    tintImage = true,\n    theme: {\n      base: {\n        palette: { light, dark }\n      }\n    }\n  }) => {\n    let textColor = variant === 'light' ? dark : light;\n    let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n    if (backgroundColor && !backgroundImage) {\n      textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n      overlayColor = 'transparent';\n    } else if (!backgroundColor && !backgroundImage) {\n      overlayColor = 'transparent';\n      textColor = dark;\n    }\n    return css`\n      background-color: ${tintImage ? overlayColor : 'transparent'};\n      color: ${textColor};\n      width: 100%;\n      height: 100%;\n      text-align: center;\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n  ({\n    theme: {\n      base: { breakpoints, spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(${spacing} * 2);\n      width: 100%;\n      margin: 0 auto;\n\n      h1 {\n        font-size: 3rem;\n        word-break: break-word;\n      }\n\n      @media screen and (min-width: ${breakpoints.md}) {\n        width: 100%;\n        padding: calc(${spacing} * 2.5);\n      }\n      @media screen and (min-width: ${breakpoints.lg}) {\n        max-width: 93.75rem;\n      }\n    `;\n  }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n  'two-column': '1fr 1fr',\n  'narrow-wide': '3fr 7fr',\n  'wide-narrow': '7fr 3fr'\n};\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n  return css`\n    padding-block: calc(2 * ${theme.base.spacing});\n\n    ${StyledContentContainer} {\n      padding: 0;\n    }\n  `;\n});\n\nStylePageTabContent.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 className = createClassName('banner-page', classNameProp, { variant });\n    const gridCols = variantMap[variant];\n    const pageContent = (\n      <Grid\n        container={{ gap: 2 }}\n        md={{ container: { cols: '1fr' } }}\n        lg={{ container: { cols: b ? `${gridCols}` : '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        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={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n          tintImage={banner.tintImage}\n        >\n          <StyledContentContainer>\n            <Text variant='h1'>{banner.title}</Text>\n            {banner.message && (\n              <Text variant='primary' as='p'>\n                {banner.message}\n              </Text>\n            )}\n          </StyledContentContainer>\n        </Flex>\n      </StyledBannerContainer>\n    );\n\n    const isMediumOrAbove = useBreakpoint('md');\n    const [panel, setPanel] = useState('content');\n    const pageTabsRef = useRef<HTMLElement>(null);\n    const t = useI18n();\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              {pageContent}\n            </Flex>\n            <div>{utilities}</div>\n          </Flex>\n        );\n      }\n\n      return (\n        <Flex\n          container={{ direction: 'column', gap: 2 }}\n          as={StyledBannerPage}\n          className={className}\n        >\n          {pageBanner}\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                <StylePageTabContent>{tab.content}</StylePageTabContent>\n              </TabPanel>\n            ))}\n          </Flex>\n        </Flex>\n      );\n    }\n\n    return (\n      <StyledBannerPage ref={ref} {...restProps} className={className}>\n        {pageBanner}\n        {pageContent}\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} 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}\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\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<BannerOptions, 'variant' | 'backgroundColor' | 'backgroundImage' | 'tintImage' | 'align'>\n>(\n  ({\n    variant = 'light',\n    backgroundColor,\n    backgroundImage,\n    tintImage = false,\n    align = 'center',\n    theme: {\n      base: {\n        palette: { light, dark }\n      }\n    }\n  }) => {\n    let textColor = variant === 'light' ? dark : light;\n    let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n    if (backgroundColor && !backgroundImage) {\n      textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n      overlayColor = 'transparent';\n    } else if (!backgroundColor && !backgroundImage) {\n      overlayColor = 'transparent';\n      textColor = dark;\n    }\n    return css`\n      background-color: ${tintImage ? overlayColor : 'transparent'};\n      color: ${textColor};\n      width: 100%;\n      height: 100%;\n      text-align: ${align};\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\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 className = createClassName('banner-page', classNameProp, { variant });\n    const gridCols = variantMap[variant];\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        >\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 isMediumOrAbove = useBreakpoint('md');\n    const [panel, setPanel] = useState('content');\n    const pageTabsRef = useRef<HTMLElement>(null);\n    const t = useI18n();\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              {pageContent}\n            </Flex>\n            <div>{utilities}</div>\n          </Flex>\n        );\n      }\n\n      return (\n        <Flex\n          container={{ direction: 'column', gap: 2 }}\n          as={StyledBannerPage}\n          className={className}\n        >\n          {pageBanner}\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        </Flex>\n      );\n    }\n\n    return (\n      <StyledBannerPage ref={ref} {...restProps} className={className}>\n        {pageBanner}\n        {pageContent}\n      </StyledBannerPage>\n    );\n  }\n);\n"]}