@pega/cosmos-react-build 9.0.0-build.2.5 → 9.0.0-build.2.7

package/lib/components/AuthoringPanel/AuthoringPanel.d.ts

@@ -0,0 +1,7 @@
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type { AuthoringPanelProps } from './AuthoringPanel.types';
+declare const _default: ForwardRefForwardPropsComponent<AuthoringPanelProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["additional-info", "dismiss", "interactive-title", "actions", "progress", "title", "primary-action", "visual", "secondary", "visual", "secondary", "info-edit"]>;
+};
+export default _default;
+//# sourceMappingURL=AuthoringPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAQ/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;;;AAsGlE,wBAAqE"}

package/lib/components/AuthoringPanel/AuthoringPanel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, forwardRef, useRef } from 'react';
+import { Icon, Button, Flex, useTestIds, withTestIds, OneColumnPage, useConsolidatedRef, useI18n, Progress, useEscape } from '@pega/cosmos-react-core';
+import { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';
+import { StyledPanelPage, StyledAuthoringPanel, StyledProgressContainer } from './AuthoringPanel.styles';
+import AuthoringPanelHeader from './AuthoringPanelHeader';
+const AuthoringPanel = forwardRef(({ testId, content, header, open, onDismiss, progress, actions, target }, ref) => {
+    const contentRef = useConsolidatedRef(ref);
+    const dismissButtonRef = useRef(null);
+    const t = useI18n();
+    const testIds = useTestIds(testId, getAuthoringPanelTestIds);
+    useEffect(() => {
+        if (open && dismissButtonRef.current && !progress) {
+            dismissButtonRef.current.focus();
+        }
+    }, [open, progress]);
+    const dismissPanel = () => {
+        if (onDismiss) {
+            onDismiss(target);
+        }
+    };
+    useEscape(() => {
+        if (open && onDismiss) {
+            dismissPanel();
+        }
+    });
+    return (_jsx(_Fragment, { children: open && (_jsx(Flex, { item: { shrink: 0 }, as: StyledAuthoringPanel, "data-testid": testIds.root, open: open, "aria-label": header.primary, role: 'complementary', children: progress ? (_jsxs(Flex, { container: { direction: 'column' }, as: StyledProgressContainer, children: [onDismiss && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { "data-testid": testIds.dismiss, icon: true, variant: 'simple', compact: true, ref: dismissButtonRef, label: t('dismiss_label_a11y', ['panel']), onClick: dismissPanel, children: _jsx(Icon, { name: 'times' }) }) })), _jsx(Progress, { "data-testid": testIds.progress, visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] })) : (_jsx(OneColumnPage, { ref: contentRef, title: header.primary.title, as: StyledPanelPage, header: _jsx(AuthoringPanelHeader, { header: header, actions: actions, onDismiss: dismissPanel, dismissButtonRef: dismissButtonRef, testId: testId }), scrollContent: true, a: content })) })) }));
+});
+export default withTestIds(AuthoringPanel, getAuthoringPanelTestIds);
+//# sourceMappingURL=AuthoringPanel.js.map

package/lib/components/AuthoringPanel/AuthoringPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, forwardRef, useRef } from 'react';\nimport type { PropsWithoutRef, RefObject } from 'react';\n\nimport {\n  Icon,\n  Button,\n  Flex,\n  useTestIds,\n  withTestIds,\n  OneColumnPage,\n  useConsolidatedRef,\n  useI18n,\n  Progress,\n  useEscape\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';\nimport {\n  StyledPanelPage,\n  StyledAuthoringPanel,\n  StyledProgressContainer\n} from './AuthoringPanel.styles';\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\nimport AuthoringPanelHeader from './AuthoringPanelHeader';\n\nconst AuthoringPanel: ForwardRefForwardPropsComponent<AuthoringPanelProps> = forwardRef(\n  (\n    {\n      testId,\n      content,\n      header,\n      open,\n      onDismiss,\n      progress,\n      actions,\n      target\n    }: PropsWithoutRef<AuthoringPanelProps>,\n    ref: AuthoringPanelProps['ref']\n  ) => {\n    const contentRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const dismissButtonRef: RefObject<HTMLButtonElement> = useRef<HTMLButtonElement>(null);\n    const t = useI18n();\n    const testIds = useTestIds(testId, getAuthoringPanelTestIds);\n\n    useEffect(() => {\n      if (open && dismissButtonRef.current && !progress) {\n        dismissButtonRef.current.focus();\n      }\n    }, [open, progress]);\n\n    const dismissPanel = () => {\n      if (onDismiss) {\n        onDismiss(target);\n      }\n    };\n\n    useEscape(() => {\n      if (open && onDismiss) {\n        dismissPanel();\n      }\n    });\n\n    return (\n      <>\n        {open && (\n          <Flex\n            item={{ shrink: 0 }}\n            as={StyledAuthoringPanel}\n            data-testid={testIds.root}\n            open={open}\n            aria-label={header.primary}\n            role='complementary'\n          >\n            {progress ? (\n              <Flex container={{ direction: 'column' }} as={StyledProgressContainer}>\n                {onDismiss && (\n                  <Flex container={{ justify: 'end' }}>\n                    <Button\n                      data-testid={testIds.dismiss}\n                      icon\n                      variant='simple'\n                      compact\n                      ref={dismissButtonRef}\n                      label={t('dismiss_label_a11y', ['panel'])}\n                      onClick={dismissPanel}\n                    >\n                      <Icon name='times' />\n                    </Button>\n                  </Flex>\n                )}\n\n                <Progress\n                  data-testid={testIds.progress}\n                  visible={!!progress}\n                  focusOnVisible\n                  placement='local'\n                  message={typeof progress === 'string' ? progress : undefined}\n                />\n              </Flex>\n            ) : (\n              <OneColumnPage\n                ref={contentRef}\n                title={header.primary.title}\n                as={StyledPanelPage}\n                header={\n                  <AuthoringPanelHeader\n                    header={header}\n                    actions={actions}\n                    onDismiss={dismissPanel}\n                    dismissButtonRef={dismissButtonRef}\n                    testId={testId}\n                  />\n                }\n                scrollContent\n                a={content}\n              />\n            )}\n          </Flex>\n        )}\n      </>\n    );\n  }\n);\n\nexport default withTestIds(AuthoringPanel, getAuthoringPanelTestIds);\n"]}

package/lib/components/AuthoringPanel/AuthoringPanel.styles.d.ts

@@ -0,0 +1,17 @@
+import type { AuthoringPanelProps } from './AuthoringPanel.types';
+export declare const StyledPanelPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAuthoringPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<AuthoringPanelProps, "open">, never>;
+export declare const StyledHeaderContent: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitleContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledActions: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {
+    isLink: boolean;
+}, never>;
+export declare const StyledPrimaryTextButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPrimaryTextLink: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").LinkProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitlesContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPrimaryContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AuthoringPanel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,wIAehC,CAAC;AAGF,eAAO,MAAM,mBAAmB,kNAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kNAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAGH,eAAO,MAAM,aAAa,kNAIzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;YAA0B,OAAO;SAalE,CAAC;AAGH,eAAO,MAAM,uBAAuB,oNAYlC,CAAC;AAGH,eAAO,MAAM,qBAAqB;2BA5BhC,CAAA;uDAuCA,CAAC;AAGH,eAAO,MAAM,qBAAqB,kNAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAIjC,CAAC"}

package/lib/components/AuthoringPanel/AuthoringPanel.styles.js

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+import { Button, Text, StyledPageHeader, Link, defaultThemeProp, StyledButton, StyledVisual, Flex } from '@pega/cosmos-react-core';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+import { StyledPage } from '../PageTemplates/PageTemplates';
+export const StyledPanelPage = styled(StyledPage)(({ theme }) => {
+    const { spacing, palette } = theme.base;
+    return css `
+    width: 100%;
+    ${StyledPageHeader} {
+      border-bottom: solid calc(0.125 * ${spacing}) ${palette['border-line']};
+      padding: calc(2 * ${spacing});
+    }
+    ${StyledVisual} {
+      align-self: start;
+    }
+  `;
+});
+StyledPanelPage.defaultProps = defaultThemeProp;
+export const StyledAuthoringPanel = styled.div(({ open, theme }) => {
+    const { animation, palette, spacing } = theme.base;
+    const translate = open ? 0 : '100%';
+    return css `
+      height: calc(100vh - 3rem);
+      position: relative;
+      width: calc(${theme.base['content-width'].md} - 10ch);
+      border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};
+      transition-property: transform, opacity;
+      transition-duration: calc(2 * ${animation.speed});
+      transition-timing-function: ${animation.timing.ease};
+      transform: ${open ? 'none' : `translateX(${translate})`};
+    `;
+});
+StyledAuthoringPanel.defaultProps = defaultThemeProp;
+export const StyledHeaderContent = styled(Flex) `
+  overflow: hidden;
+`;
+export const StyledTitleContainer = styled(Flex) `
+  overflow: hidden;
+`;
+export const StyledProgressContainer = styled.div(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    width: 100%;
+    ${StyledButton} {
+      z-index: ${theme.base['z-index'].drawer};
+    }
+  `;
+});
+StyledProgressContainer.defaultProps = defaultThemeProp;
+export const StyledActions = styled(Flex) `
+  ${StyledButton} {
+    margin-inline-start: 0;
+  }
+`;
+export const StyledTextWithEllipsis = styled(Text)(({ theme: { base: { spacing } }, isLink }) => {
+    return css `
+    ${ellipsisOverflow}
+    ${isLink === false &&
+        `
+      margin: calc(0.5 * ${spacing});
+    `}
+  `;
+});
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+export const StyledPrimaryTextButton = styled(Button)(({ theme: { base: { spacing } } }) => {
+    return css `
+    overflow: hidden;
+    height: 100%;
+    max-width: fit-content;
+    text-overflow: ellipsis;
+    margin: calc(0.5 * ${spacing});
+  `;
+});
+StyledPrimaryTextButton.defaultProps = defaultThemeProp;
+export const StyledPrimaryTextLink = styled(Link)(({ theme: { base: { spacing } } }) => {
+    return css `
+    margin: calc(0.5 * ${spacing});
+    overflow: hidden;
+    max-width: fit-content;
+    ${ellipsisOverflow}
+  `;
+});
+StyledPrimaryTextLink.defaultProps = defaultThemeProp;
+export const StyledTitlesContainer = styled(Flex) `
+  overflow: hidden;
+`;
+export const StyledPrimaryContainer = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: calc(-1 * ${theme.base.spacing});
+  `;
+});
+StyledPrimaryContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AuthoringPanel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.styles.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Text,\n  StyledPageHeader,\n  Link,\n  defaultThemeProp,\n  StyledButton,\n  StyledVisual,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({ theme }) => {\n  const { spacing, palette } = theme.base;\n  return css`\n    width: 100%;\n    ${StyledPageHeader} {\n      border-bottom: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n      padding: calc(2 * ${spacing});\n    }\n    ${StyledVisual} {\n      align-self: start;\n    }\n  `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledAuthoringPanel = styled.div<Pick<AuthoringPanelProps, 'open'>>(\n  ({ open, theme }) => {\n    const { animation, palette, spacing } = theme.base;\n    const translate = open ? 0 : '100%';\n    return css`\n      height: calc(100vh - 3rem);\n      position: relative;\n      width: calc(${theme.base['content-width'].md} - 10ch);\n      border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n      transition-property: transform, opacity;\n      transition-duration: calc(2 * ${animation.speed});\n      transition-timing-function: ${animation.timing.ease};\n      transform: ${open ? 'none' : `translateX(${translate})`};\n    `;\n  }\n);\nStyledAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContent = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledTitleContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    width: 100%;\n    ${StyledButton} {\n      z-index: ${theme.base['z-index'].drawer};\n    }\n  `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n  ${StyledButton} {\n    margin-inline-start: 0;\n  }\n`;\n\nexport const StyledTextWithEllipsis = styled(Text)<{ isLink: boolean }>(({\n  theme: {\n    base: { spacing }\n  },\n  isLink\n}) => {\n  return css`\n    ${ellipsisOverflow}\n    ${isLink === false &&\n    `\n      margin: calc(0.5 * ${spacing});\n    `}\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextButton = styled(Button)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    overflow: hidden;\n    height: 100%;\n    max-width: fit-content;\n    text-overflow: ellipsis;\n    margin: calc(0.5 * ${spacing});\n  `;\n});\nStyledPrimaryTextButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextLink = styled(Link)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    margin: calc(0.5 * ${spacing});\n    overflow: hidden;\n    max-width: fit-content;\n    ${ellipsisOverflow}\n  `;\n});\nStyledPrimaryTextLink.defaultProps = defaultThemeProp;\n\nexport const StyledTitlesContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledPrimaryContainer = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(-1 * ${theme.base.spacing});\n  `;\n});\nStyledPrimaryContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AuthoringPanel/AuthoringPanel.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getAuthoringPanelTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["additional-info", "dismiss", "interactive-title", "actions", "progress", "title", "primary-action", "visual", "secondary", "visual", "secondary", "info-edit"]>;
+//# sourceMappingURL=AuthoringPanel.test-ids.d.ts.map

package/lib/components/AuthoringPanel/AuthoringPanel.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,qSAa1B,CAAC"}

package/lib/components/AuthoringPanel/AuthoringPanel.test-ids.js

@@ -0,0 +1,16 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getAuthoringPanelTestIds = createTestIds('authoring-panel', [
+    'additional-info',
+    'dismiss',
+    'interactive-title',
+    'actions',
+    'progress',
+    'title',
+    'primary-action',
+    'visual',
+    'secondary',
+    'visual',
+    'secondary',
+    'info-edit'
+]);
+//# sourceMappingURL=AuthoringPanel.test-ids.js.map

package/lib/components/AuthoringPanel/AuthoringPanel.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.test-ids.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,iBAAiB,EAAE;IACvE,iBAAiB;IACjB,SAAS;IACT,mBAAmB;IACnB,SAAS;IACT,UAAU;IACV,OAAO;IACP,gBAAgB;IAChB,QAAQ;IACR,WAAW;IACX,QAAQ;IACR,WAAW;IACX,WAAW;CACH,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getAuthoringPanelTestIds = createTestIds('authoring-panel', [\n  'additional-info',\n  'dismiss',\n  'interactive-title',\n  'actions',\n  'progress',\n  'title',\n  'primary-action',\n  'visual',\n  'secondary',\n  'visual',\n  'secondary',\n  'info-edit'\n] as const);\n"]}

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

@@ -0,0 +1,77 @@
+import type { Ref, ReactNode, MouseEvent, KeyboardEvent, RefObject } from 'react';
+import type { FieldValueListProps, ProgressProps, TestIdProp, BaseProps, TextProps, OmitStrict, Action } from '@pega/cosmos-react-core';
+import type { IconTileProps } from '../IconTile';
+import { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';
+interface AdditionalInfoProps {
+    /** Title text in the Additional info dialog. */
+    title: string;
+    /** Description text in the Additional info dialog. */
+    description?: string;
+    /** Metadata for field list in the Additional info dialog. */
+    fields: FieldValueListProps['fields'];
+    /** Click handler for Edit button in the Additional info dialog. */
+    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export interface AuthoringPanelProps extends BaseProps, TestIdProp {
+    /**
+     * If true, the Panel will be visible.
+     */
+    open: boolean;
+    progress?: boolean | ProgressProps['message'];
+    header: {
+        primary: {
+            /** The primary header text on the panel. */
+            title: string;
+            /** URL to navigate to. This will render the primary header text as a link. */
+            href?: string;
+            /** Click handler for the link. If no href if passed, this will render the primary header text as a button. */
+            onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+        };
+        secondary?: {
+            /** The secondary header text on the panel containing rule type information. */
+            title: string;
+            /** URL to navigate to. This will render the secondary header text as a link. */
+            href?: string;
+            /** Click handler for the link. If no href if passed, this will render the secondary header text as a button. */
+            onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+        };
+        /** Pass a title and fields to show additional information icon. */
+        additionalInfo?: AdditionalInfoProps;
+        /** A visual associated with the panel header. */
+        visual?: OmitStrict<IconTileProps, 'size'>;
+    };
+    /** Dismiss handler for the authoring panel. */
+    onDismiss?: (el: HTMLElement | null) => void;
+    /**
+     * A set of Action Buttons to render on the panel header.
+     * If array contains one object, then a single button will be rendered.
+     * If array contains multiple objects, then a menu button will be rendered with each button as menu item.
+     */
+    actions?: Action[];
+    /** Ref to the element. */
+    ref?: Ref<HTMLDivElement>;
+    /** A region to display panel content. */
+    content: ReactNode;
+    /**
+     * An element the panel is contextually and visually associated with. Normally a triggering button.
+     * On dismiss, focus is returned back to this element.
+     */
+    target: HTMLElement | null;
+}
+interface PaneltestIdsProps {
+    testIds: Partial<ReturnType<typeof getAuthoringPanelTestIds>>;
+}
+export interface AuthoringPanelHeaderProps extends TestIdProp {
+    header: AuthoringPanelProps['header'];
+    actions: AuthoringPanelProps['actions'];
+    onDismiss: AuthoringPanelProps['onDismiss'];
+    dismissButtonRef: RefObject<HTMLButtonElement>;
+}
+export interface HeaderTextProps extends Pick<AuthoringPanelProps['header']['primary'], 'href' | 'onClick'>, Pick<TextProps, 'variant'>, PaneltestIdsProps {
+    title: string;
+    titleTestId?: string;
+}
+export interface AdditionalInfoContainerProps extends AdditionalInfoProps, PaneltestIdsProps {
+}
+export {};
+//# sourceMappingURL=AuthoringPanel.types.d.ts.map

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

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

package/lib/components/AuthoringPanel/AuthoringPanel.types.js

@@ -0,0 +1,2 @@
+import { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';
+//# sourceMappingURL=AuthoringPanel.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanel.types.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.types.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["import type { Ref, ReactNode, MouseEvent, KeyboardEvent, RefObject } from 'react';\n\nimport type {\n  FieldValueListProps,\n  ProgressProps,\n  TestIdProp,\n  BaseProps,\n  TextProps,\n  OmitStrict,\n  Action\n} from '@pega/cosmos-react-core';\n\nimport type { IconTileProps } from '../IconTile';\n\nimport { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';\n\ninterface AdditionalInfoProps {\n  /** Title text in the Additional info dialog. */\n  title: string;\n  /** Description text in the Additional info dialog. */\n  description?: string;\n  /** Metadata for field list in the Additional info dialog. */\n  fields: FieldValueListProps['fields'];\n  /** Click handler for Edit button in the Additional info dialog. */\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface AuthoringPanelProps extends BaseProps, TestIdProp {\n  /**\n   * If true, the Panel will be visible.\n   */\n  open: boolean;\n  /* If true, the Panel will render a progress loader. */\n  progress?: boolean | ProgressProps['message'];\n  header: {\n    primary: {\n      /** The primary header text on the panel. */\n      title: string;\n      /** URL to navigate to. This will render the primary header text as a link. */\n      href?: string;\n      /** Click handler for the link. If no href if passed, this will render the primary header text as a button. */\n      onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n    };\n    secondary?: {\n      /** The secondary header text on the panel containing rule type information. */\n      title: string;\n      /** URL to navigate to. This will render the secondary header text as a link. */\n      href?: string;\n      /** Click handler for the link. If no href if passed, this will render the secondary header text as a button. */\n      onClick?: (e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n    };\n    /** Pass a title and fields to show additional information icon. */\n    additionalInfo?: AdditionalInfoProps;\n    /** A visual associated with the panel header. */\n    visual?: OmitStrict<IconTileProps, 'size'>;\n  };\n  /** Dismiss handler for the authoring panel. */\n  onDismiss?: (el: HTMLElement | null) => void;\n  /**\n   * A set of Action Buttons to render on the panel header.\n   * If array contains one object, then a single button will be rendered.\n   * If array contains multiple objects, then a menu button will be rendered with each button as menu item.\n   */\n  actions?: Action[];\n  /** Ref to the element. */\n  ref?: Ref<HTMLDivElement>;\n  /** A region to display panel content. */\n  content: ReactNode;\n  /**\n   * An element the panel is contextually and visually associated with. Normally a triggering button.\n   * On dismiss, focus is returned back to this element.\n   */\n  target: HTMLElement | null;\n}\n\ninterface PaneltestIdsProps {\n  testIds: Partial<ReturnType<typeof getAuthoringPanelTestIds>>;\n}\n\nexport interface AuthoringPanelHeaderProps extends TestIdProp {\n  header: AuthoringPanelProps['header'];\n  actions: AuthoringPanelProps['actions'];\n  onDismiss: AuthoringPanelProps['onDismiss'];\n  dismissButtonRef: RefObject<HTMLButtonElement>;\n}\n\nexport interface HeaderTextProps\n  extends Pick<AuthoringPanelProps['header']['primary'], 'href' | 'onClick'>,\n    Pick<TextProps, 'variant'>,\n    PaneltestIdsProps {\n  title: string;\n  titleTestId?: string;\n}\n\nexport interface AdditionalInfoContainerProps extends AdditionalInfoProps, PaneltestIdsProps {}\n"]}

package/lib/components/AuthoringPanel/AuthoringPanelHeader.d.ts

@@ -0,0 +1,6 @@
+import type { AuthoringPanelHeaderProps } from './AuthoringPanel.types';
+declare const _default: (({ header, actions, onDismiss, testId, dismissButtonRef }: AuthoringPanelHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["additional-info", "dismiss", "interactive-title", "actions", "progress", "title", "primary-action", "visual", "secondary", "visual", "secondary", "info-edit"]>;
+};
+export default _default;
+//# sourceMappingURL=AuthoringPanelHeader.d.ts.map

package/lib/components/AuthoringPanel/AuthoringPanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanelHeader.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,wBAAwB,CAAC;oFAqG7B,yBAAyB;;;AA0E5B,wBAA2E"}

package/lib/components/AuthoringPanel/AuthoringPanelHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { Icon, Button, Flex, AdditionalInfo, Actions, FieldValueList, useI18n, Tooltip, useElement, Text, withTestIds, useTestIds } from '@pega/cosmos-react-core';
+import IconTile from '../IconTile/IconTile';
+import { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';
+import { StyledTextWithEllipsis, StyledPrimaryTextButton, StyledPrimaryTextLink, StyledPrimaryContainer, StyledTitlesContainer, StyledActions } from './AuthoringPanel.styles';
+const HeaderTitleText = ({ title, href, onClick, testIds, variant, titleTestId }) => {
+    const [el, setEl] = useElement();
+    const getHeaderText = () => {
+        if (onClick) {
+            return (_jsx(StyledPrimaryTextButton, { variant: 'link', onClick: onClick, "data-testid": testIds.interactiveTitle, children: _jsx(StyledTextWithEllipsis, { "data-testid": titleTestId, variant: variant, ref: setEl, children: title }) }));
+        }
+        if (href) {
+            return (_jsx(StyledPrimaryTextLink, { href: href, variant: 'link', "data-testid": testIds.interactiveTitle, children: _jsx(StyledTextWithEllipsis, { "data-testid": titleTestId, variant: variant, ref: setEl, children: title }) }));
+        }
+        return (_jsx(StyledTextWithEllipsis, { "data-testid": titleTestId, variant: variant, ref: setEl, isLink: false, children: title }));
+    };
+    return (_jsxs(_Fragment, { children: [getHeaderText(), el && (_jsx(Tooltip, { target: el, smart: true, showDelay: 'none', hideDelay: 'none', children: title }))] }));
+};
+const AdditionalInfoContainer = ({ title, description, fields, onEdit, testIds }) => {
+    const t = useI18n();
+    const infoDialogHandle = useRef(null);
+    return (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: title, dialogHandle: infoDialogHandle, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1 }, children: [description && _jsx(Text, { as: 'p', children: description }), _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onEdit && (_jsx(Button, { "data-testid": testIds.infoEdit, onClick: (e) => {
+                        infoDialogHandle.current?.close();
+                        onEdit?.(e);
+                    }, children: t('edit_details') }))] }) }));
+};
+const AuthoringPanelHeader = ({ header, actions, onDismiss, testId, dismissButtonRef }) => {
+    const { additionalInfo, primary, secondary, visual, ...restHeaderProps } = header;
+    const t = useI18n();
+    const testIds = useTestIds(testId, getAuthoringPanelTestIds);
+    const visualNode = useMemo(() => visual ? (_jsx(Flex, { item: { shrink: 0 }, as: IconTile, testId: testIds.visual, name: visual.name, label: visual.label, category: visual.category, inverted: visual.inverted, size: 'xl' })) : undefined, [visual]);
+    return (_jsxs(Flex, { container: { direction: 'row', alignItems: 'center', justify: 'between', colGap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 0.5 }, as: StyledTitlesContainer, children: [visualNode, _jsxs(Flex, { container: { direction: 'column' }, as: StyledTitlesContainer, children: [secondary?.title && (_jsx(HeaderTitleText, { ...restHeaderProps, title: secondary.title, onClick: secondary.onClick, href: secondary.href, variant: 'primary', titleTestId: testIds.secondary, testIds: testIds })), _jsx(Flex, { as: secondary ? StyledPrimaryContainer : undefined, container: { wrap: 'wrap' }, children: _jsx(HeaderTitleText, { ...restHeaderProps, title: primary.title, onClick: primary.onClick, href: primary.href, variant: 'h2', titleTestId: testIds.title, testIds: testIds }) })] })] }), (actions || onDismiss) && (_jsxs(StyledActions, { container: { alignItems: 'end', colGap: 1 }, children: [additionalInfo && _jsx(AdditionalInfoContainer, { ...additionalInfo, testIds: testIds }), actions && actions.length > 0 && (_jsx(Actions, { "data-testid": testIds.actions, iconOnly: true, compact: true, menuAt: 3, items: actions })), onDismiss && (_jsx(Button, { "data-testid": testIds.dismiss, icon: true, variant: 'simple', compact: true, ref: dismissButtonRef, label: t('dismiss_label_a11y', ['panel']), onClick: onDismiss, children: _jsx(Icon, { name: 'times' }) }))] }))] }));
+};
+export default withTestIds(AuthoringPanelHeader, getAuthoringPanelTestIds);
+//# sourceMappingURL=AuthoringPanelHeader.js.map

package/lib/components/AuthoringPanel/AuthoringPanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthoringPanelHeader.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanelHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport {\n  Icon,\n  Button,\n  Flex,\n  AdditionalInfo,\n  Actions,\n  FieldValueList,\n  useI18n,\n  Tooltip,\n  useElement,\n  Text,\n  withTestIds,\n  useTestIds\n} from '@pega/cosmos-react-core';\nimport type { DialogHandleValue } from '@pega/cosmos-react-core';\n\nimport IconTile from '../IconTile/IconTile';\n\nimport { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';\nimport {\n  StyledTextWithEllipsis,\n  StyledPrimaryTextButton,\n  StyledPrimaryTextLink,\n  StyledPrimaryContainer,\n  StyledTitlesContainer,\n  StyledActions\n} from './AuthoringPanel.styles';\nimport type {\n  AuthoringPanelHeaderProps,\n  HeaderTextProps,\n  AdditionalInfoContainerProps\n} from './AuthoringPanel.types';\n\nconst HeaderTitleText = ({\n  title,\n  href,\n  onClick,\n  testIds,\n  variant,\n  titleTestId\n}: HeaderTextProps) => {\n  const [el, setEl] = useElement();\n  const getHeaderText = () => {\n    if (onClick) {\n      return (\n        <StyledPrimaryTextButton\n          variant='link'\n          onClick={onClick}\n          data-testid={testIds.interactiveTitle}\n        >\n          <StyledTextWithEllipsis data-testid={titleTestId} variant={variant} ref={setEl}>\n            {title}\n          </StyledTextWithEllipsis>\n        </StyledPrimaryTextButton>\n      );\n    }\n    if (href) {\n      return (\n        <StyledPrimaryTextLink href={href} variant='link' data-testid={testIds.interactiveTitle}>\n          <StyledTextWithEllipsis data-testid={titleTestId} variant={variant} ref={setEl}>\n            {title}\n          </StyledTextWithEllipsis>\n        </StyledPrimaryTextLink>\n      );\n    }\n    return (\n      <StyledTextWithEllipsis\n        data-testid={titleTestId}\n        variant={variant}\n        ref={setEl}\n        isLink={false}\n      >\n        {title}\n      </StyledTextWithEllipsis>\n    );\n  };\n\n  return (\n    <>\n      {getHeaderText()}\n\n      {el && (\n        <Tooltip target={el} smart showDelay='none' hideDelay='none'>\n          {title}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst AdditionalInfoContainer = ({\n  title,\n  description,\n  fields,\n  onEdit,\n  testIds\n}: AdditionalInfoContainerProps) => {\n  const t = useI18n();\n  const infoDialogHandle = useRef<DialogHandleValue>(null);\n  return (\n    <AdditionalInfo\n      data-testid={testIds.additionalInfo}\n      heading={title}\n      dialogHandle={infoDialogHandle}\n    >\n      <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n        <Flex container={{ direction: 'column', gap: 1 }} item={{ grow: 1 }}>\n          {description && <Text as='p'>{description}</Text>}\n          <FieldValueList variant='inline' fields={fields} />\n        </Flex>\n        {onEdit && (\n          <Button\n            data-testid={testIds.infoEdit}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              infoDialogHandle.current?.close();\n              onEdit?.(e);\n            }}\n          >\n            {t('edit_details')}\n          </Button>\n        )}\n      </Flex>\n    </AdditionalInfo>\n  );\n};\n\nconst AuthoringPanelHeader = ({\n  header,\n  actions,\n  onDismiss,\n  testId,\n  dismissButtonRef\n}: AuthoringPanelHeaderProps) => {\n  const { additionalInfo, primary, secondary, visual, ...restHeaderProps } = header;\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAuthoringPanelTestIds);\n  const visualNode = useMemo(\n    () =>\n      visual ? (\n        <Flex\n          item={{ shrink: 0 }}\n          as={IconTile}\n          testId={testIds.visual}\n          name={visual.name}\n          label={visual.label}\n          category={visual.category}\n          inverted={visual.inverted}\n          size='xl'\n        />\n      ) : undefined,\n    [visual]\n  );\n  return (\n    <Flex container={{ direction: 'row', alignItems: 'center', justify: 'between', colGap: 0.5 }}>\n      <Flex container={{ alignItems: 'center', colGap: 0.5 }} as={StyledTitlesContainer}>\n        {visualNode}\n        <Flex container={{ direction: 'column' }} as={StyledTitlesContainer}>\n          {secondary?.title && (\n            <HeaderTitleText\n              {...restHeaderProps}\n              title={secondary.title}\n              onClick={secondary.onClick}\n              href={secondary.href}\n              variant='primary'\n              titleTestId={testIds.secondary}\n              testIds={testIds}\n            />\n          )}\n          <Flex as={secondary ? StyledPrimaryContainer : undefined} container={{ wrap: 'wrap' }}>\n            <HeaderTitleText\n              {...restHeaderProps}\n              title={primary.title}\n              onClick={primary.onClick}\n              href={primary.href}\n              variant='h2'\n              titleTestId={testIds.title}\n              testIds={testIds}\n            />\n          </Flex>\n        </Flex>\n      </Flex>\n      {(actions || onDismiss) && (\n        <StyledActions container={{ alignItems: 'end', colGap: 1 }}>\n          {additionalInfo && <AdditionalInfoContainer {...additionalInfo} testIds={testIds} />}\n          {actions && actions.length > 0 && (\n            <Actions data-testid={testIds.actions} iconOnly compact menuAt={3} items={actions} />\n          )}\n          {onDismiss && (\n            <Button\n              data-testid={testIds.dismiss}\n              icon\n              variant='simple'\n              compact\n              ref={dismissButtonRef}\n              label={t('dismiss_label_a11y', ['panel'])}\n              onClick={onDismiss}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </StyledActions>\n      )}\n    </Flex>\n  );\n};\n\nexport default withTestIds(AuthoringPanelHeader, getAuthoringPanelTestIds);\n"]}

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

@@ -0,0 +1,4 @@
+export { default as AuthoringPanel } from './AuthoringPanel';
+export type { AuthoringPanelProps } from './AuthoringPanel.types';
+export { StyledAuthoringPanel } from './AuthoringPanel.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/AuthoringPanel/index.js

@@ -0,0 +1,3 @@
+export { default as AuthoringPanel } from './AuthoringPanel';
+export { StyledAuthoringPanel } from './AuthoringPanel.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default as AuthoringPanel } from './AuthoringPanel';\nexport type { AuthoringPanelProps } from './AuthoringPanel.types';\nexport { StyledAuthoringPanel } from './AuthoringPanel.styles';\n"]}

package/lib/components/PageBanner/PageBanner.d.ts

@@ -1,10 +1,10 @@
 import type { FunctionComponent, MouseEventHandler } from 'react';
-import type { ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { ImageProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 interface Action {
     label: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
 }
-export interface PageBannerProps extends NoChildrenProp {
+export interface PageBannerProps extends NoChildrenProp, TestIdProp {
     title: string;
     description: string;
     image?: ImageProps;
@@ -17,6 +17,8 @@ export interface PageBannerProps extends NoChildrenProp {
 export declare const StyledPageBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const PageBanner: FunctionComponent<PageBannerProps>;
-export default PageBanner;
+declare const _default: FunctionComponent<PageBannerProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "description", "link", "actions", "image"]>;
+};
+export default _default;
 //# sourceMappingURL=PageBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAmBlE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,yGAqC3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAOhC,CAAC;AAEF,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAqDlD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqBlE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAItF,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,UAAU;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,yGAqC3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAOhC,CAAC;AAEF,eAAO,MAAM,aAAa,yGAEzB,CAAC;;;;AAiEF,wBAA6D"}

package/lib/components/PageBanner/PageBanner.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Grid, Image, Text, Button, defaultThemeProp, tryCatch, StyledButton, Link, StyledLink, useBreakpoint, ShowMoreLess, StyledShowMoreLessButton, readableColor } from '@pega/cosmos-react-core';
+import { readableColor } from 'polished';
+import { Flex, Grid, Image, Text, Button, defaultThemeProp, tryCatch, StyledButton, Link, StyledLink, useBreakpoint, ShowMoreLess, StyledShowMoreLessButton, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { getPageBannerTestIds } from './PageBanner.test-ids';
 export const StyledPageBanner = styled.div(({ theme }) => {
     const { base: { palette: { 'brand-primary': brandBackground }, 'font-weight': fontWeight, 'content-width': contentWidth } } = theme;
     const color = tryCatch(() => readableColor(brandBackground));
@@ -44,15 +45,15 @@ export const StyledImageContainer = styled.div `
 export const StyledActions = styled.div `
   margin-block-start: auto;
 `;
-const PageBanner = ({ title, description, image, actions, link }) => {
-    const bannerRef = useRef(null);
-    const isMediumOrAbove = useBreakpoint('md', { breakpointRef: bannerRef });
-    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: bannerRef });
+const PageBanner = ({ testId, title, description, image, actions, link }) => {
+    const testIds = useTestIds(testId, getPageBannerTestIds);
+    const isMediumOrAbove = useBreakpoint('md');
+    const isSmallOrAbove = useBreakpoint('sm');
     return (_jsxs(Grid, { container: {
             cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',
-            pad: isMediumOrAbove ? [0, 8, 0, 4] : [0, 4],
+            pad: isMediumOrAbove ? [0, 8, 0, 3] : [0, 3],
             gap: isMediumOrAbove ? 8 : 4
-        }, as: StyledPageBanner, ref: bannerRef, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 0], gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: title }), _jsx(ShowMoreLess, { lines: 3, children: _jsx(Text, { as: 'p', children: description }) }), !isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'center', alignItems: 'center' }, children: _jsx(Image, { ...image }) })), !!actions?.length && (_jsxs(Flex, { as: StyledActions, container: { alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }, children: [actions.map(action => (_jsx(Button, { onClick: action.onClick, children: action.label }, action.label))), link && _jsx(Link, { href: link.href, children: link.label })] }))] }), isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'end', alignItems: 'center' }, children: _jsx(Image, { ...image }) }))] }));
+        }, as: StyledPageBanner, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 0], gap: 1 }, children: [_jsx(Text, { "data-testid": testIds.title, variant: 'h1', children: title }), _jsx(ShowMoreLess, { lines: 3, children: _jsx(Text, { "data-testid": testIds.description, as: 'p', children: description }) }), !isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'center', alignItems: 'center' }, children: _jsx(Image, { ...image }) })), (actions || link) && (_jsxs(Flex, { "data-testid": testIds.actions, as: StyledActions, container: { alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }, children: [actions?.map(action => (_jsx(Button, { onClick: action.onClick, children: action.label }, action.label))), link && (_jsx(Link, { "data-testid": testIds.link, href: link.href, children: link.label }))] }))] }), isSmallOrAbove && image && (_jsx(Flex, { as: StyledImageContainer, container: { justify: 'end', alignItems: 'center' }, children: _jsx(Image, { ...image, "data-testId": testIds.image }) }))] }));
 };
-export default PageBanner;
+export default withTestIds(PageBanner, getPageBannerTestIds);
 //# sourceMappingURL=PageBanner.js.map

package/lib/components/PageBanner/PageBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Grid,\n  Image,\n  Text,\n  Button,\n  defaultThemeProp,\n  tryCatch,\n  StyledButton,\n  Link,\n  StyledLink,\n  useBreakpoint,\n  ShowMoreLess,\n  StyledShowMoreLessButton,\n  readableColor\n} from '@pega/cosmos-react-core';\nimport type { ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\ninterface Action {\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp {\n  title: string;\n  description: string;\n  image?: ImageProps;\n  actions?: [Action] | [Action, Action];\n  link?: {\n    label: string;\n    href: string;\n  };\n}\n\nexport const StyledPageBanner = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandBackground },\n      'font-weight': fontWeight,\n      'content-width': contentWidth\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    background: ${brandBackground};\n    color: ${color};\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledButton} {\n      width: max-content;\n    }\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledLink}, ${StyledShowMoreLessButton} {\n      font-weight: ${fontWeight['semi-bold']};\n      color: ${color};\n    }\n\n    p {\n      max-width: ${contentWidth.xl};\n    }\n  `;\n});\n\nStyledPageBanner.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n  min-width: 100%;\n\n  img {\n    object-fit: contain;\n    max-height: 10rem;\n  }\n`;\n\nexport const StyledActions = styled.div`\n  margin-block-start: auto;\n`;\n\nconst PageBanner: FunctionComponent<PageBannerProps> = ({\n  title,\n  description,\n  image,\n  actions,\n  link\n}) => {\n  const bannerRef = useRef<HTMLDivElement>(null);\n\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: bannerRef });\n  const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: bannerRef });\n\n  return (\n    <Grid\n      container={{\n        cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n        pad: isMediumOrAbove ? [0, 8, 0, 4] : [0, 4],\n        gap: isMediumOrAbove ? 8 : 4\n      }}\n      as={StyledPageBanner}\n      ref={bannerRef}\n    >\n      <Flex container={{ direction: 'column', pad: [2, 0], gap: 1 }}>\n        <Text variant='h1'>{title}</Text>\n        <ShowMoreLess lines={3}>\n          <Text as='p'>{description}</Text>\n        </ShowMoreLess>\n        {!isSmallOrAbove && image && (\n          <Flex as={StyledImageContainer} container={{ justify: 'center', alignItems: 'center' }}>\n            <Image {...image} />\n          </Flex>\n        )}\n        {!!actions?.length && (\n          <Flex\n            as={StyledActions}\n            container={{ alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }}\n          >\n            {actions.map(action => (\n              <Button key={action.label} onClick={action.onClick}>\n                {action.label}\n              </Button>\n            ))}\n            {link && <Link href={link.href}>{link.label}</Link>}\n          </Flex>\n        )}\n      </Flex>\n      {isSmallOrAbove && image && (\n        <Flex as={StyledImageContainer} container={{ justify: 'end', alignItems: 'center' }}>\n          <Image {...image} />\n        </Flex>\n      )}\n    </Grid>\n  );\n};\n\nexport default PageBanner;\n"]}
+{"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  Grid,\n  Image,\n  Text,\n  Button,\n  defaultThemeProp,\n  tryCatch,\n  StyledButton,\n  Link,\n  StyledLink,\n  useBreakpoint,\n  ShowMoreLess,\n  StyledShowMoreLessButton,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ImageProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getPageBannerTestIds } from './PageBanner.test-ids';\n\ninterface Action {\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp, TestIdProp {\n  title: string;\n  description: string;\n  image?: ImageProps;\n  actions?: [Action] | [Action, Action];\n  link?: {\n    label: string;\n    href: string;\n  };\n}\n\nexport const StyledPageBanner = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandBackground },\n      'font-weight': fontWeight,\n      'content-width': contentWidth\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    background: ${brandBackground};\n    color: ${color};\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledButton} {\n      width: max-content;\n    }\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledLink}, ${StyledShowMoreLessButton} {\n      font-weight: ${fontWeight['semi-bold']};\n      color: ${color};\n    }\n\n    p {\n      max-width: ${contentWidth.xl};\n    }\n  `;\n});\n\nStyledPageBanner.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n  min-width: 100%;\n\n  img {\n    object-fit: contain;\n    max-height: 10rem;\n  }\n`;\n\nexport const StyledActions = styled.div`\n  margin-block-start: auto;\n`;\n\nconst PageBanner: FunctionComponent<PageBannerProps> = ({\n  testId,\n  title,\n  description,\n  image,\n  actions,\n  link\n}) => {\n  const testIds = useTestIds(testId, getPageBannerTestIds);\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  return (\n    <Grid\n      container={{\n        cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n        pad: isMediumOrAbove ? [0, 8, 0, 3] : [0, 3],\n        gap: isMediumOrAbove ? 8 : 4\n      }}\n      as={StyledPageBanner}\n    >\n      <Flex container={{ direction: 'column', pad: [2, 0], gap: 1 }}>\n        <Text data-testid={testIds.title} variant='h1'>\n          {title}\n        </Text>\n        <ShowMoreLess lines={3}>\n          <Text data-testid={testIds.description} as='p'>\n            {description}\n          </Text>\n        </ShowMoreLess>\n        {!isSmallOrAbove && image && (\n          <Flex as={StyledImageContainer} container={{ justify: 'center', alignItems: 'center' }}>\n            <Image {...image} />\n          </Flex>\n        )}\n        {(actions || link) && (\n          <Flex\n            data-testid={testIds.actions}\n            as={StyledActions}\n            container={{ alignItems: 'center', pad: [1, 0, 0, 0], gap: 1, wrap: 'wrap' }}\n          >\n            {actions?.map(action => (\n              <Button key={action.label} onClick={action.onClick}>\n                {action.label}\n              </Button>\n            ))}\n            {link && (\n              <Link data-testid={testIds.link} href={link.href}>\n                {link.label}\n              </Link>\n            )}\n          </Flex>\n        )}\n      </Flex>\n      {isSmallOrAbove && image && (\n        <Flex as={StyledImageContainer} container={{ justify: 'end', alignItems: 'center' }}>\n          <Image {...image} data-testId={testIds.image} />\n        </Flex>\n      )}\n    </Grid>\n  );\n};\n\nexport default withTestIds(PageBanner, getPageBannerTestIds);\n"]}

package/lib/components/PageBanner/PageBanner.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getPageBannerTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "description", "link", "actions", "image"]>;
+//# sourceMappingURL=PageBanner.test-ids.d.ts.map

package/lib/components/PageBanner/PageBanner.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,yLAMtB,CAAC"}

package/lib/components/PageBanner/PageBanner.test-ids.js

@@ -0,0 +1,9 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getPageBannerTestIds = createTestIds('page-banner', [
+    'title',
+    'description',
+    'link',
+    'actions',
+    'image'
+]);
+//# sourceMappingURL=PageBanner.test-ids.js.map

package/lib/components/PageBanner/PageBanner.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.test-ids.js","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,EAAE;IAC/D,OAAO;IACP,aAAa;IACb,MAAM;IACN,SAAS;IACT,OAAO;CACC,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getPageBannerTestIds = createTestIds('page-banner', [\n  'title',\n  'description',\n  'link',\n  'actions',\n  'image'\n] as const);\n"]}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.d.ts

@@ -0,0 +1,12 @@
+import { type TestIdProp } from '@pega/cosmos-react-core';
+import type { ConstructPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';
+type ConstructPageHeaderProps = ConstructPageTemplateProps['header'] & Pick<PageTemplateProps, 'progress'> & TestIdProp;
+export declare const PrimaryHeaderText: ({ type: { href, onClick, name }, testId }: {
+    type: ConstructPageHeaderProps["type"];
+    testId?: TestIdProp["testId"];
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (({ testId, title, primaryAction, additionalActions, metadata, visual, type, description, secondaryAction, progress }: ConstructPageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "status", "edit-details", "additional-info-icon", "type", "meta-data", "primary-meta-data", "secondary-meta-data", "visual", "primary-action", "secondary-action", "additional-actions", "banner-description", "banner-link", "banner-actions", "banner-image"]>;
+};
+export default _default;
+//# sourceMappingURL=ConstructPageHeader.d.ts.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstructPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAgBL,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAU3F,KAAK,wBAAwB,GAAG,0BAA0B,CAAC,QAAQ,CAAC,GAClE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GACnC,UAAU,CAAC;AAEb,eAAO,MAAM,iBAAiB,GAAI,2CAG/B;IACD,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,4CASA,CAAC;+IAaC,wBAAwB;;;AAkT3B,wBAAsE"}