@pega/cosmos-react-build 8.8.0 → 9.0.0-build.10.0

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":"AAqBA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAU/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;;;AAmJlE,wBAAqE"}

package/lib/components/AuthoringPanel/AuthoringPanel.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, forwardRef, useRef, useContext } from 'react';
+import { Icon, Button, Flex, useTestIds, withTestIds, OneColumnPage, useConsolidatedRef, useI18n, Progress, useEscape, useDirection, AppShellContext, useBreakpoint, useFocusTrap, ErrorState, Drawer } from '@pega/cosmos-react-core';
+import { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';
+import { StyledPanelPage, StyledAuthoringPanel, StyledProgressContainer, StyledPreviewDrawer } from './AuthoringPanel.styles';
+import AuthoringPanelHeader from './AuthoringPanelHeader';
+const AuthoringPanel = forwardRef(({ testId, content, header, open, onDismiss, progress, actions, target, error, onErrorRetry }, ref) => {
+    const contentRef = useConsolidatedRef(ref);
+    const dismissButtonRef = useRef(null);
+    const t = useI18n();
+    const testIds = useTestIds(testId, getAuthoringPanelTestIds);
+    const previewRef = useConsolidatedRef(ref);
+    const direction = useDirection();
+    const { setPreviewActive } = useContext(AppShellContext);
+    const isSmallOrAbove = useBreakpoint('sm');
+    useEffect(() => {
+        if (open && dismissButtonRef.current && !progress) {
+            dismissButtonRef.current.focus();
+        }
+    }, [open, progress]);
+    const dismissPanel = () => {
+        if (onDismiss) {
+            onDismiss(target);
+        }
+    };
+    useEscape(() => {
+        if (open && onDismiss) {
+            dismissPanel();
+        }
+    });
+    useEffect(() => {
+        if (open) {
+            setPreviewActive(true);
+        }
+        else {
+            setPreviewActive(false);
+        }
+    }, [open]);
+    useEffect(() => {
+        return () => {
+            setPreviewActive(false);
+        };
+    }, []);
+    useFocusTrap(previewRef, true, [], false);
+    return (_jsx(Drawer, { "data-testid": testIds.root, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: previewRef, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [header.primary.title]), shadow: true, nullWhenClosed: true, resizeable: true, size: resizeDrawerDefaultWidth, children: open && (_jsx(Flex, { item: { shrink: 0 }, as: StyledAuthoringPanel, open: open, "aria-label": header.primary, 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(Flex, { container: { gap: 1 }, as: OneColumnPage, ref: contentRef, title: header.primary.title, forwardedAs: StyledPanelPage, header: _jsx(AuthoringPanelHeader, { header: header, actions: actions, onDismiss: dismissPanel, dismissButtonRef: dismissButtonRef, testId: testId, error: error }), scrollContent: true, a: error ? (_jsx(ErrorState, { message: t('preview_error'), onRetry: onErrorRetry })) : (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, useContext } 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  useDirection,\n  AppShellContext,\n  useBreakpoint,\n  useFocusTrap,\n  ErrorState,\n  Drawer\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport { resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';\n\nimport { getAuthoringPanelTestIds } from './AuthoringPanel.test-ids';\nimport {\n  StyledPanelPage,\n  StyledAuthoringPanel,\n  StyledProgressContainer,\n  StyledPreviewDrawer\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      error,\n      onErrorRetry\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    const previewRef = useConsolidatedRef(ref);\n    const direction = useDirection();\n\n    const { setPreviewActive } = useContext(AppShellContext);\n    const isSmallOrAbove = useBreakpoint('sm');\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    useEffect(() => {\n      if (open) {\n        setPreviewActive(true);\n      } else {\n        setPreviewActive(false);\n      }\n    }, [open]);\n\n    useEffect(() => {\n      return () => {\n        setPreviewActive(false);\n      };\n    }, []);\n\n    useFocusTrap(previewRef, true, [], false);\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={previewRef}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [header.primary.title])}\n        shadow\n        nullWhenClosed\n        resizeable\n        size={resizeDrawerDefaultWidth}\n      >\n        {open && (\n          <Flex\n            item={{ shrink: 0 }}\n            as={StyledAuthoringPanel}\n            open={open}\n            aria-label={header.primary}\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              <Flex\n                container={{ gap: 1 }}\n                as={OneColumnPage}\n                ref={contentRef}\n                title={header.primary.title}\n                forwardedAs={StyledPanelPage}\n                header={\n                  <AuthoringPanelHeader\n                    header={header}\n                    actions={actions}\n                    onDismiss={dismissPanel}\n                    dismissButtonRef={dismissButtonRef}\n                    testId={testId}\n                    error={error}\n                  />\n                }\n                scrollContent\n                a={\n                  error ? (\n                    <ErrorState message={t('preview_error')} onRetry={onErrorRetry} />\n                  ) : (\n                    content\n                  )\n                }\n              />\n            )}\n          </Flex>\n        )}\n      </Drawer>\n    );\n  }\n);\n\nexport default withTestIds(AuthoringPanel, getAuthoringPanelTestIds);\n"]}

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

@@ -0,0 +1,18 @@
+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>;
+export declare const StyledPreviewDrawer: 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":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe,yGA0B1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,wIAchC,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;2BA/CtB,CAAC;uDA0DX,CAAC;AAGH,eAAO,MAAM,qBAAqB,kNAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAsB9B,CAAC"}

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

@@ -0,0 +1,133 @@
+import styled, { css } from 'styled-components';
+import { Button, Text, StyledPageHeader, Link, defaultThemeProp, StyledButton, StyledVisual, Flex, readableHue } from '@pega/cosmos-react-core';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+import { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
+import { resizeDrawerMaxWidth, resizeDrawerMinWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledPage } from '../PageTemplates/PageTemplates';
+export const StyledPanelPage = styled(StyledPage)(({ theme }) => {
+    const { spacing } = theme.base;
+    return css `
+    width: 100%;
+
+    ${StyledPageHeader} {
+      padding: calc(2 * ${spacing});
+      padding-block-end: 0;
+    }
+    ${StyledVisual} {
+      align-self: start;
+    }
+
+    ${StyledRegions} {
+      padding: 0;
+
+      & ${StyledPageHeader} {
+        border-bottom: none;
+        padding-block: 0;
+      }
+
+      ${StyledTabPanel} {
+        padding-inline: calc(2 * ${spacing});
+      }
+    }
+  `;
+});
+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;
+      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;
+export const StyledPreviewDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: ${resizeDrawerMinWidth};
+    max-width: ${resizeDrawerMaxWidth};
+    width: var(--resize-drawer-width);
+    background: ${theme.base.palette['primary-background']};
+    height: calc(100vh - var(--appshell-offset, 0rem));
+    top: var(--appshell-offset, 0);
+    z-index: calc(${theme.base['z-index'].drawer} + 500);
+    transition-property: transform, box-shadow, opacity, border-inline-start;
+    transition-duration: max(${theme.base.animation.speed}, 0.0001s);
+    transition-timing-function: ${theme.base.animation.timing.ease};
+
+    @media (min-width: ${theme.base.breakpoints.xl}) {
+      box-shadow: none;
+      border-inline-start: 0.0625rem solid
+        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {
+        mode: 'both',
+        level: 'AANonText'
+    })};
+    }
+  `;
+});
+StyledPreviewDrawer.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  readableHue\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport {\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({ theme }) => {\n  const { spacing } = theme.base;\n  return css`\n    width: 100%;\n\n    ${StyledPageHeader} {\n      padding: calc(2 * ${spacing});\n      padding-block-end: 0;\n    }\n    ${StyledVisual} {\n      align-self: start;\n    }\n\n    ${StyledRegions} {\n      padding: 0;\n\n      & ${StyledPageHeader} {\n        border-bottom: none;\n        padding-block: 0;\n      }\n\n      ${StyledTabPanel} {\n        padding-inline: calc(2 * ${spacing});\n      }\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      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\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background: ${theme.base.palette['primary-background']};\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.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,81 @@
+import type { Ref, ReactNode, MouseEvent, KeyboardEvent, RefObject } from 'react';
+import type { FieldValueListProps, ProgressProps, TestIdProp, BaseProps, TextProps, OmitStrict, Action, ErrorStateProps } 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;
+    /** If true, the authoring panel will render in an error state. */
+    error?: boolean;
+    /** Callback fired when "Try again" button is clicked in an error state. */
+    onErrorRetry?: ErrorStateProps['onRetry'];
+}
+interface PaneltestIdsProps {
+    testIds: Partial<ReturnType<typeof getAuthoringPanelTestIds>>;
+}
+export interface AuthoringPanelHeaderProps extends Pick<AuthoringPanelProps, 'error'>, 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":"AAeA,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  ErrorStateProps\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  /** If true, the authoring panel will render in an error state. */\n  error?: boolean;\n  /** Callback fired when \"Try again\" button is clicked in an error state. */\n  onErrorRetry?: ErrorStateProps['onRetry'];\n}\n\ninterface PaneltestIdsProps {\n  testIds: Partial<ReturnType<typeof getAuthoringPanelTestIds>>;\n}\n\nexport interface AuthoringPanelHeaderProps extends Pick<AuthoringPanelProps, 'error'>, 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, error }: 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;2FAsG7B,yBAAyB;;;AA8F5B,wBAA2E"}

package/lib/components/AuthoringPanel/AuthoringPanelHeader.js

@@ -0,0 +1,41 @@
+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, error }) => {
+    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, set: visual.set, size: 'xl' })) : undefined, [visual]);
+    return (_jsxs(Flex, { container: {
+            direction: 'row',
+            alignItems: 'center',
+            justify: error ? 'end' : 'between',
+            colGap: 0.5
+        }, children: [!error && (_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: [!error && (_jsxs(_Fragment, { children: [additionalInfo && _jsx(AdditionalInfoContainer, { ...additionalInfo, testIds: testIds }), actions && actions.length > 0 && (_jsx(Actions, { "data-testid": testIds.actions, iconOnly: true, compact: true, menuAt: 2, 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  error\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          set={visual.set}\n          size='xl'\n        />\n      ) : undefined,\n    [visual]\n  );\n  return (\n    <Flex\n      container={{\n        direction: 'row',\n        alignItems: 'center',\n        justify: error ? 'end' : 'between',\n        colGap: 0.5\n      }}\n    >\n      {!error && (\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      )}\n      {(actions || onDismiss) && (\n        <StyledActions container={{ alignItems: 'end', colGap: 1 }}>\n          {!error && (\n            <>\n              {additionalInfo && <AdditionalInfoContainer {...additionalInfo} testIds={testIds} />}\n              {actions && actions.length > 0 && (\n                <Actions\n                  data-testid={testIds.actions}\n                  iconOnly\n                  compact\n                  menuAt={2}\n                  items={actions}\n                />\n              )}\n            </>\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/Automation/Automation.d.ts

@@ -0,0 +1,7 @@
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type { AutomationProps } from './Automation.types';
+declare const _default: ForwardRefForwardPropsComponent<AutomationProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expand-all", "collapse-all", "generate-comments", "steps"]>;
+};
+export default _default;
+//# sourceMappingURL=Automation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Automation.d.ts","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAa,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAS1F,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,oBAAoB,CAAC;;;;AAyL5E,wBAA6D"}