npm - @pega/cosmos-react-wss - Versions diffs - 10.0.0-build.2.3 → 10.0.0-build.2.5 - Mend

@pega/cosmos-react-wss 10.0.0-build.2.3 → 10.0.0-build.2.5

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

Files changed (8) hide show

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

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

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

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

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

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

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

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

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

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

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

@@ -2,8 +2,16 @@ 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';
+import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName, VisuallyHiddenText } from '@pega/cosmos-react-core';
 const BANNER_OVERLAP_MULTIPLIER = 8;
+const DEFAULT_FIXED_HEIGHT_DVH = 25;
+// 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-top-offset, 0rem));
@@ -11,20 +19,14 @@ export const StyledBannerPage = styled.div(({ theme }) => {
   `;
 });
 StyledBannerPage.defaultProps = defaultThemeProp;
-export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {
+export const StyledBannerContainer = styled.div(({ 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-top-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 +40,56 @@ 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}
+  `;
 });
 StyledBannerContainer.defaultProps = defaultThemeProp;
 export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', enableContentOverlap, theme: { base: { palette: { light, dark }, spacing } } }) => {
@@ -123,7 +175,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 +183,14 @@ 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 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 })), hasBannerRegionContent && (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: [1, 0, 0, 0] }, className: createClassName('banner-page-banner-content'), children: bannerRegion.map(el => el) }))] }) }) }));
     const pageTabs = [
         { name: t('content'), id: 'content', content: pageContent },
         {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner /\n backgroundImage?: string;\n /* A title for the banner /\n title: string;\n /* A fallback background color if the background image is not provided /\n backgroundColor?: string;\n /* Text that will appear below the title /\n message?: string;\n /* The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n /\n variant?: 'light' \| 'dark';\n /* Toggles the translucent filter provided by the variant\n * @default true\n /\n tintImage?: boolean;\n /* Controls how the banner fills vertical space.\n * - 'fixed': preset height based on the spacing token\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n /\n height?: 'content' \| 'fixed' \| 'full';\n /* Horizontal alignment of the banner text content.\n * @default 'center'\n /\n align?: 'left' \| 'center' \| 'right';\n /* Vertical alignment of the banner text content.\n * @default 'center'\n /\n verticalAlign?: 'top' \| 'center' \| 'bottom';\n /* When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n /\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /* Content for the first column /\n a: ReactNode[];\n /* Content for the second column. If not provided the first column will stretch. /\n b?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /* Variants for the sizing of the content columns. Two column will make the columns equal in size. /\n variant?: 'two-column' \| 'narrow-wide' \| 'wide-narrow';\n /* Utilities as the last column /\n utilities?: ReactNode;\n}\n\nconst BANNER_OVERLAP_MULTIPLIER = 8;\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\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-top-offset, 0rem))'\n }[height];\n\n return css`\n width: 100%;\n height: ${heightValue};\n ${height !== 'content' &&\n css`\n overflow: hidden;\n `}\n\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n \| 'variant'\n \| 'backgroundColor'\n \| 'backgroundImage'\n \| 'tintImage'\n \| 'align'\n \| 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: ${align};\n\n ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 100%;\n padding: calc(${spacing} * 2.5);\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 93.75rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledPageContentWrapper = styled.div<{ enableContentOverlap?: boolean }>(\n ({ theme, enableContentOverlap }) => css`\n ${enableContentOverlap &&\n css`\n margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});\n position: relative;\n `}\n `\n);\n\nStyledPageContentWrapper.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n a,\n b,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n\n const pageContent = (\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer>\n <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAgEjC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAEpC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAEpC,qGAAqG;AACrG,MAAM,iBAAiB,GAAG,CAAC,KAAyB,EAAU,EAAE;IAC9D,MAAM,OAAO,GACX,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC3C,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC,wBAAwB,CAAC;IAC/B,OAAO,GAAG,OAAO,KAAK,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAK7C,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,GAAG,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG;QAClB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,iDAAiD;KACxD,CAAC,MAAM,CAAC,CAAC;IAEV,MAAM,gBAAgB,GAAG,GAAG,CAAA;MACxB,eAAe;QACjB,GAAG,CAAA;+BACwB,eAAe;;;;KAIzC;;MAEC,eAAe;QACjB,GAAG,CAAA;0BACmB,eAAe;KACpC;GACF,CAAC;IAEF,MAAM,4BAA4B,GAAG,MAAM,KAAK,OAAO,IAAI,WAAW,CAAC;IAEvE,IAAI,YAAY,CAAC;IACjB,IAAI,4BAA4B,EAAE,CAAC;QACjC,YAAY,GAAG,GAAG,CAAA;oBACF,WAAW;;;;;;;;;;kBAUb,WAAW;;UAEnB,gBAAgB;;;;;;;KAOrB,CAAC;IACJ,CAAC;SAAM,IAAI,WAAW,EAAE,CAAC;QACvB,YAAY,GAAG,GAAG,CAAA;QACd,MAAM,KAAK,MAAM;YACnB,GAAG,CAAA;sBACa,WAAW;OAC1B;;;;;;;QAOC,gBAAgB;KACnB,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,YAAY,GAAG,GAAG,CAAA;gBACN,WAAW;QACnB,gBAAgB;KACnB,CAAC;IACJ,CAAC;IAED,OAAO,GAAG,CAAA;;MAEN,YAAY;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAWpC,CAAC,EACC,OAAO,GAAG,OAAO,EACjB,eAAe,EACf,eAAe,EACf,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,QAAQ,EAChB,oBAAoB,EACpB,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EACxB,OAAO,EACR,EACF,EACF,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,IAAI,YAAY,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAChG,IAAI,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC;QACnE,YAAY,GAAG,aAAa,CAAC;IAC/B,CAAC;SAAM,IAAI,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;QAChD,YAAY,GAAG,aAAa,CAAC;QAC7B,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;IACD,OAAO,GAAG,CAAA;0BACY,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;eACnD,SAAS;;;oBAGJ,KAAK;;QAEjB,oBAAoB;QACtB,GAAG,CAAA;kCACyB,OAAO,MAAM,yBAAyB;OACjE;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;sBACQ,OAAO;;;;sCAIS,WAAW,CAAC,EAAE;;wBAE5B,OAAO;;sCAEO,WAAW,CAAC,EAAE;;;KAG/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAChC,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;sBACW,QAAQ;;GAE3B,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAChC,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;sBACW,QAAQ;GAC3B,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACpC,oBAAoB;IACtB,GAAG,CAAA;iCAC0B,KAAK,CAAC,IAAI,CAAC,OAAO,OAAO,yBAAyB;;KAE9E;GACF,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,UAAU,GAAG;IACjB,YAAY,EAAE,+BAA+B;IAC7C,aAAa,EAAE,+BAA+B;IAC9C,aAAa,EAAE,+BAA+B;CAC/C,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,GAAG,EAAE,OAAO;IACZ,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,KAAK;CACL,CAAC;AAEX,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,KAAK;CACJ,CAAC;AAEX,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1C,sBAAsB;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAqD,UAAU,CACpF,SAAS,UAAU,CACjB,EACE,MAAM,EACN,KAAK,EACL,CAAC,EACD,CAAC,EACD,YAAY,EACZ,OAAO,GAAG,YAAY,EACtB,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACqB,EACnC,GAA2B;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7E,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAErC,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,oBAAoB,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC;IACnF,MAAM,sBAAsB,GAAG,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC;IAEtD,MAAM,WAAW,GAAG,CAClB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EACrB,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAC7C,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,EACjE,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,eAAe,CAAC,qBAAqB,CAAC,aAEhD,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAQ,EACxF,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAClB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAQ,CAC3E,IACI,CACR,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,IAAI,CAC3B,KAAC,qBAAqB,IACpB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,MAAM,EAAE,MAAM,CAAC,MAAM,iBACR,sBAAsB,kBACrB,MAAM,CAAC,WAAW,EAChC,SAAS,EAAE,eAAe,CAAC,oBAAoB,CAAC,YAEhD,KAAC,IAAI,IACH,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE;gBACT,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,aAAa,IAAI,QAAQ,CAAC,IAAI,QAAQ;gBACvE,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,QAAQ;gBACpE,SAAS,EAAE,QAAQ;gBACnB,GAAG,EAAE,CAAC;aACP,EACD,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,oBAAoB,EAAE,gBAAgB,YAEtC,MAAC,sBAAsB,eACpB,MAAM,CAAC,KAAK,IAAI,KAAC,mBAAmB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAuB,EACtF,CAAC,MAAM,CAAC,KAAK,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,kBAAkB,cAAE,KAAK,GAAsB,GAC3C,CACR,EACA,MAAM,CAAC,OAAO,IAAI,CACjB,KAAC,mBAAmB,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,YAC1C,MAAM,CAAC,OAAO,GACK,CACvB,EACA,sBAAsB,IAAI,CACzB,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC7D,SAAS,EAAE,eAAe,CAAC,4BAA4B,CAAC,YAEvD,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GACtB,CACR,IACsB,GACpB,GACe,CACzB,CAAC;IAEF,MAAM,QAAQ,GAAG;QACf,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE;QAC3D;YACE,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;YACvB,EAAE,EAAE,cAAc;YAClB,OAAO,EAAE,SAAS;SACnB;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EACrB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,SAAS,EAAE,SAAS,aAEpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACxD,UAAU,EACX,KAAC,wBAAwB,IACvB,oBAAoB,EAAE,gBAAgB,EACtC,SAAS,EAAE,eAAe,CAAC,6BAA6B,CAAC,YAExD,WAAW,GACa,IACtB,EACP,wBAAM,SAAS,GAAO,IACjB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACjE,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,SAAS,aAEnB,UAAU,EACX,KAAC,wBAAwB,IACvB,oBAAoB,EAAE,gBAAgB,EACtC,SAAS,EAAE,eAAe,CAAC,6BAA6B,CAAC,YAEzD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,aACtE,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,KAAK,EACnB,GAAG,EAAE,WAAW,GAChB,EACD,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,YACnE,KAAC,oBAAoB,cAAE,GAAG,CAAC,OAAO,GAAwB,IADgB,GAAG,CAAC,EAAE,CAEvE,CACZ,CAAC,IACG,GACkB,IACtB,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,SAAS,EAAE,SAAS,aAC5D,UAAU,EACX,KAAC,wBAAwB,IACvB,oBAAoB,EAAE,gBAAgB,EACtC,SAAS,EAAE,eAAe,CAAC,6BAA6B,CAAC,YAExD,WAAW,GACa,IACV,CACpB,CAAC;AACJ,CAAC,CACF,CAAC","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} 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\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-top-offset, 0rem));\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 $hasContent?: boolean;\n $heightValue?: number;\n }\n>(({ 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-top-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 `;\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 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 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 {hasBannerRegionContent && (\n <Flex\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 </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "10.0.0-build.2.3",
+  "version": "10.0.0-build.2.5",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.2.3",
-    "@pega/cosmos-react-work": "10.0.0-build.2.3",
+    "@pega/cosmos-react-core": "10.0.0-build.2.5",
+    "@pega/cosmos-react-work": "10.0.0-build.2.5",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",