@pega/cosmos-react-tools 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/lib/components/Clipboard/Clipboard.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ClipboardProps } from './Clipboard.types';
+declare const Clipboard: FunctionComponent<ClipboardProps & ForwardProps>;
+export default Clipboard;
+//# sourceMappingURL=Clipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AAyD7E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAuB9D,CAAC;AACH,eAAe,SAAS,CAAC"}

package/lib/components/Clipboard/Clipboard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useEffect, useRef } from 'react';
+import { Button, Flex, MetaList, Progress, StandardTree, SummaryItem, Text, Table, useI18n, EmptyState } from '@pega/cosmos-react-core';
+import { StyledClipboardFooter, StyledContainer, StyledContent, StyledMain, StyledTitle, StyledTreeContainer } from './Clipboard.styles';
+const FieldRenderer = (cell) => {
+    return cell.onClick ? (_jsx(Button, { variant: 'link', onClick: (e) => cell.onClick?.(cell.id, e), children: cell.name })) : (_jsx(_Fragment, { children: cell.name }));
+};
+const FieldSummary = ({ primary, secondary, fields, actions }) => {
+    const headingRef = useRef(null);
+    const t = useI18n();
+    const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);
+    const columns = [
+        {
+            renderer: FieldRenderer,
+            label: t('condition_builder_field_label')
+        },
+        { renderer: 'value', label: t('condition_builder_value_label') }
+    ];
+    useEffect(() => headingRef.current?.focus(), []);
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: _jsx(StyledTitle, { tabIndex: -1, variant: 'h3', ref: headingRef, children: primary }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }), _jsx(Table, { title: primary, columns: columns, data: fields })] }));
+};
+const Clipboard = forwardRef(function Clipboard({ navigation, content, lastUpdated }, ref) {
+    const t = useI18n();
+    const navContent = useMemo(() => _jsx(StandardTree, { ...navigation }), [navigation]);
+    return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsxs(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: [!content && _jsx(EmptyState, {}), content && content.loading && _jsx(Progress, { placement: 'local', message: t('loading') }), content && !content.loading && _jsx(FieldSummary, { ...content })] })] }), _jsx(Flex, { as: StyledClipboardFooter, container: { alignItems: 'center' }, children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
+});
+export default Clipboard;
+//# sourceMappingURL=Clipboard.js.map

package/lib/components/Clipboard/Clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  useMemo,\n  FC,\n  useEffect,\n  useRef\n} from 'react';\n\nimport {\n  Button,\n  ColumnProps,\n  Flex,\n  ForwardProps,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Text,\n  Table,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\n\nimport { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTitle,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return cell.onClick ? (\n    <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n      {cell.name}\n    </Button>\n  ) : (\n    <>{cell.name}</>\n  );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n  primary,\n  secondary,\n  fields,\n  actions\n}: FieldSummaryProps) => {\n  const headingRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n  const columns: ColumnProps<Field>[] = [\n    {\n      renderer: FieldRenderer,\n      label: t('condition_builder_field_label')\n    },\n    { renderer: 'value', label: t('condition_builder_value_label') }\n  ];\n\n  useEffect(() => headingRef.current?.focus(), []);\n\n  return (\n    <>\n      <SummaryItem\n        primary={\n          <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n            {primary}\n          </StyledTitle>\n        }\n        secondary={metaListItems && <MetaList items={metaListItems} />}\n        actions={actions}\n      />\n      <Table title={primary} columns={columns} data={fields} />\n    </>\n  );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(function Clipboard(\n  { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n  ref: ClipboardProps['ref']\n) {\n  const t = useI18n();\n  const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n  return (\n    <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n      <Flex as={StyledMain} container>\n        <StyledTreeContainer>{navContent}</StyledTreeContainer>\n        <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n          {!content && <EmptyState />}\n          {content && content.loading && <Progress placement='local' message={t('loading')} />}\n          {content && !content.loading && <FieldSummary {...content} />}\n        </Flex>\n      </Flex>\n\n      <Flex as={StyledClipboardFooter} container={{ alignItems: 'center' }}>\n        {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Clipboard;\n"]}

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

@@ -0,0 +1,7 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTreeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledClipboardFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Clipboard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAc/B,CAAC;AAIF,eAAO,MAAM,UAAU,yGAgBtB,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAgBjC,CAAC;AAIF,eAAO,MAAM,WAAW,mOAIvB,CAAC;AAEF,eAAO,MAAM,aAAa,yGAgBxB,CAAC"}

package/lib/components/Clipboard/Clipboard.styles.js

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
+import { defaultThemeProp, StyledCard, StyledText, Text } from '@pega/cosmos-react-core';
+import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+export const StyledContainer = styled.div `
+  height: 100%;
+`;
+export const StyledTreeContainer = styled.div(({ theme: { base, base: { palette } } }) => {
+    return css `
+      width: ${base['content-width'].sm};
+      border-inline-end: 0.0625rem solid ${palette['border-line']};
+      overflow: auto;
+      background-color: ${palette['primary-background']};
+    `;
+});
+StyledTreeContainer.defaultProps = defaultThemeProp;
+export const StyledMain = styled.div(({ theme: { base: { shadow } } }) => {
+    return css `
+      height: 100%;
+      overflow: hidden;
+
+      ${StyledNodeInteraction}:focus,
+      ${StyledNodeInteraction}:focus-within {
+        box-shadow: ${shadow['focus-inset']};
+      }
+    `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledClipboardFooter = styled.div(({ theme: { base: { shadow, spacing, palette } } }) => {
+    return css `
+      height: 1.75rem;
+      box-shadow: ${shadow.low};
+      padding-inline: calc(2 * ${spacing});
+      border-top: 0.0625rem solid ${palette['border-line']};
+      background-color: ${palette['primary-background']};
+      overflow: hidden;
+      width: 100%;
+    `;
+});
+StyledClipboardFooter.defaultProps = defaultThemeProp;
+export const StyledTitle = styled(Text) `
+  &:focus-visible {
+    outline: none;
+  }
+`;
+export const StyledContent = styled.div(({ theme }) => {
+    return css `
+    overflow: auto;
+    position: relative;
+    margin: ${theme.base.spacing};
+    background-color: ${theme.base.palette['primary-background']};
+    width: calc(100% - ${theme.base['content-width'].sm});
+
+    && ${StyledCard} ${StyledCardContent} {
+      padding: 0;
+
+      ${StyledText} {
+        ${hideVisually}
+      }
+    }
+  `;
+});
+StyledContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Clipboard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.styles.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;2CACI,OAAO,CAAC,aAAa,CAAC;;0BAEvC,OAAO,CAAC,oBAAoB,CAAC;KAClD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,qBAAqB;QACrB,qBAAqB;sBACP,MAAM,CAAC,aAAa,CAAC;;KAEtC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EACnC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oBAEM,MAAM,CAAC,GAAG;iCACG,OAAO;oCACJ,OAAO,CAAC,aAAa,CAAC;0BAChC,OAAO,CAAC,oBAAoB,CAAC;;;KAGlD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;cAGE,KAAK,CAAC,IAAI,CAAC,OAAO;wBACR,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;yBACvC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;SAE9C,UAAU,IAAI,iBAAiB;;;QAGhC,UAAU;UACR,YAAY;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp, StyledCard, StyledText, Text } from '@pega/cosmos-react-core';\nimport { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport const StyledContainer = styled.div`\n  height: 100%;\n`;\n\nexport const StyledTreeContainer = styled.div(\n  ({\n    theme: {\n      base,\n      base: { palette }\n    }\n  }) => {\n    return css`\n      width: ${base['content-width'].sm};\n      border-inline-end: 0.0625rem solid ${palette['border-line']};\n      overflow: auto;\n      background-color: ${palette['primary-background']};\n    `;\n  }\n);\n\nStyledTreeContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n  ({\n    theme: {\n      base: { shadow }\n    }\n  }) => {\n    return css`\n      height: 100%;\n      overflow: hidden;\n\n      ${StyledNodeInteraction}:focus,\n      ${StyledNodeInteraction}:focus-within {\n        box-shadow: ${shadow['focus-inset']};\n      }\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledClipboardFooter = styled.div(\n  ({\n    theme: {\n      base: { shadow, spacing, palette }\n    }\n  }) => {\n    return css`\n      height: 1.75rem;\n      box-shadow: ${shadow.low};\n      padding-inline: calc(2 * ${spacing});\n      border-top: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      overflow: hidden;\n      width: 100%;\n    `;\n  }\n);\n\nStyledClipboardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled(Text)`\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    overflow: auto;\n    position: relative;\n    margin: ${theme.base.spacing};\n    background-color: ${theme.base.palette['primary-background']};\n    width: calc(100% - ${theme.base['content-width'].sm});\n\n    && ${StyledCard} ${StyledCardContent} {\n      padding: 0;\n\n      ${StyledText} {\n        ${hideVisually}\n      }\n    }\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,38 @@
+import { Ref } from 'react';
+import { StandardTreeProps, BaseProps, SummaryItemProps, FieldValueListProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';
+export interface Field {
+    /** Unique id for the field */
+    id: string;
+    /** label for the field */
+    name: string;
+    /** value for the field */
+    value?: string;
+    /**
+     * callback to be invoked on click of the field name
+     * if passed, field name will be rendered as a simple button
+     */
+    onClick?: (id: string, e: MouseEvent) => void;
+}
+export interface FieldSummaryProps {
+    /** Title the field list */
+    primary: SummaryItemProps['primary'];
+    /** Metadata for field list */
+    secondary?: FieldValueListProps['fields'];
+    /** Action buttons for field list */
+    actions?: SummaryItemProps['actions'];
+    /** content for the Field list */
+    fields: Field[];
+    /** Boolean to show loading indicator in field list */
+    loading?: boolean;
+}
+export interface ClipboardProps extends BaseProps {
+    /** content for tree navigation */
+    navigation: StandardTreeProps;
+    /** content for the field list */
+    content?: FieldSummaryProps;
+    /** content for footer info */
+    lastUpdated?: DateTimeDisplayProps['value'];
+    /** Ref for the component */
+    ref?: Ref<HTMLUListElement>;
+}
+//# sourceMappingURL=Clipboard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.types.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACrC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC1C,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,kCAAkC;IAClC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC5C,4BAA4B;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/components/Clipboard/Clipboard.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.types.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  StandardTreeProps,\n  BaseProps,\n  SummaryItemProps,\n  FieldValueListProps,\n  DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport interface Field {\n  /** Unique id for the field */\n  id: string;\n  /** label for the field */\n  name: string;\n  /** value for the field */\n  value?: string;\n  /**\n   * callback to be invoked on click of the field name\n   * if passed, field name will be rendered as a simple button\n   */\n  onClick?: (id: string, e: MouseEvent) => void;\n}\n\nexport interface FieldSummaryProps {\n  /** Title the field list */\n  primary: SummaryItemProps['primary'];\n  /** Metadata for field list */\n  secondary?: FieldValueListProps['fields'];\n  /** Action buttons for field list */\n  actions?: SummaryItemProps['actions'];\n  /** content for the Field list */\n  fields: Field[];\n  /** Boolean to show loading indicator in field list */\n  loading?: boolean;\n}\n\nexport interface ClipboardProps extends BaseProps {\n  /** content for tree navigation */\n  navigation: StandardTreeProps;\n  /** content for the field list */\n  content?: FieldSummaryProps;\n  // TODO: Make it a separate component and accept timestamp or standard date format\n  /** content for footer info */\n  lastUpdated?: DateTimeDisplayProps['value'];\n  /** Ref for the component */\n  ref?: Ref<HTMLUListElement>;\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Clipboard/index.js

@@ -0,0 +1,2 @@
+export { default } from './Clipboard';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Clipboard';\nexport type { ClipboardProps, FieldSummaryProps } from './Clipboard.types';\n"]}

package/lib/components/DevTools/DevTools.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithoutRef } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { DevToolsProps } from './DevTools.types';
+declare const DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>>;
+export default DevTools;
+//# sourceMappingURL=DevTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAsB9D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/DevTools/DevTools.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Flex, registerIcon, TabPanel } from '@pega/cosmos-react-core';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import { StyledDevTools, StyledToolsContent } from './DevTools.styles';
+import Header from './Header';
+registerIcon(bugIcon);
+const DevTools = forwardRef(function DevTools({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref) {
+    return (_jsxs(Flex, { as: StyledDevTools, container: { direction: 'column' }, ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id))) })] }));
+});
+export default DevTools;
+//# sourceMappingURL=DevTools.js.map

package/lib/components/DevTools/DevTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAAC,SAAS,QAAQ,CAC9F,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAC1D,GAAyB;IAEzB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACpE,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC5C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,YAChD,GAAG,CAAC,OAAO,IAD4C,GAAG,CAAC,EAAE,CAErD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, registerIcon, TabPanel } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools, StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(function DevTools(\n  { tabs, currentTabId, onTabClick, onContinueDebug, utils },\n  ref: DevToolsProps['ref']\n) {\n  return (\n    <Flex as={StyledDevTools} container={{ direction: 'column' }} ref={ref}>\n      <Header\n        tabs={tabs}\n        onTabClick={onTabClick}\n        onContinueDebug={onContinueDebug}\n        currentTabId={currentTabId}\n        utils={utils}\n      />\n      <Flex as={StyledToolsContent} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n            {tab.content}\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n});\n\nexport default DevTools;\n"]}

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

@@ -0,0 +1,6 @@
+import { DevToolsProps } from './DevTools.types';
+export declare const StyledDevTools: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DevToolsProps>, never>;
+export declare const StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledToolsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=DevTools.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,6HAMzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,eAAO,MAAM,UAAU,0LAGtB,CAAC"}

package/lib/components/DevTools/DevTools.styles.js

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Icon } from '@pega/cosmos-react-core';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
+export const StyledDevTools = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    overflow: hidden;
+    height: 100vh;
+  `;
+});
+StyledDevTools.defaultProps = defaultThemeProp;
+export const StyledTabContainer = styled.div(({ theme: { base: { palette } } }) => {
+    return css `
+      height: 2.5rem;
+      border-top: 0.0625rem solid ${palette['border-line']};
+      border-bottom: 0.0625rem solid ${palette['border-line']};
+      text-decoration: none;
+      background-color: ${palette['primary-background']};
+
+      & ${StyledTabs} {
+        height: 100%;
+        border-bottom: none;
+
+        button {
+          height: 100%;
+        }
+      }
+    `;
+});
+StyledTabContainer.defaultProps = defaultThemeProp;
+export const StyledToolsContent = styled.div `
+  padding: 0;
+  overflow: auto;
+
+  ${StyledTabPanel} {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const StyledIcon = styled(Icon) `
+  height: 100%;
+  width: 1.5em;
+`;
+//# sourceMappingURL=DevTools.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.styles.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oCAEsB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;0BAEnC,OAAO,CAAC,oBAAoB,CAAC;;UAE7C,UAAU;;;;;;;;KAQf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAIxC,cAAc;;;;CAIjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGrC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Icon } from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { DevToolsProps } from './DevTools.types';\n\nexport const StyledDevTools = styled.div<Partial<DevToolsProps>>(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    overflow: hidden;\n    height: 100vh;\n  `;\n});\n\nStyledDevTools.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      height: 2.5rem;\n      border-top: 0.0625rem solid ${palette['border-line']};\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      text-decoration: none;\n      background-color: ${palette['primary-background']};\n\n      & ${StyledTabs} {\n        height: 100%;\n        border-bottom: none;\n\n        button {\n          height: 100%;\n        }\n      }\n    `;\n  }\n);\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContent = styled.div`\n  padding: 0;\n  overflow: auto;\n\n  ${StyledTabPanel} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const StyledIcon = styled(Icon)`\n  height: 100%;\n  width: 1.5em;\n`;\n"]}

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

@@ -0,0 +1,21 @@
+import { ReactNode, Ref, MouseEvent } from 'react';
+import { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';
+export interface DevToolsProps extends BaseProps {
+    /** An array of Tab data used to render the individual footer tabs. */
+    tabs: DevToolsTab[];
+    /** ID for making the corresponding tab active */
+    currentTabId: TabsProps['currentTabId'];
+    /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */
+    onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Callback to shift the focus to the newly opened window. */
+    onContinueDebug?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /** Actions on the tools header */
+    utils?: ReactNode;
+    /** Ref for the footer */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface DevToolsTab extends Tab {
+    /** Content for the tabs. */
+    content: ReactNode;
+}
+//# sourceMappingURL=DevTools.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.types.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,sEAAsE;IACtE,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,uGAAuG;IACvG,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACxF,8DAA8D;IAC9D,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,GAAG;IACtC,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;CACpB"}

package/lib/components/DevTools/DevTools.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.types.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref, MouseEvent } from 'react';\n\nimport { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';\n\nexport interface DevToolsProps extends BaseProps {\n  /** An array of Tab data used to render the individual footer tabs. */\n  tabs: DevToolsTab[];\n  /** ID for making the corresponding tab active */\n  currentTabId: TabsProps['currentTabId'];\n  /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Callback to shift the focus to the newly opened window. */\n  onContinueDebug?: (e?: MouseEvent<HTMLButtonElement>) => void;\n  /** Actions on the tools header */\n  utils?: ReactNode;\n  /** Ref for the footer */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DevToolsTab extends Tab {\n  /** Content for the tabs. */\n  content: ReactNode;\n}\n"]}

package/lib/components/DevTools/Header.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { DevToolsProps } from './DevTools.types';
+interface HeaderProps extends Pick<DevToolsProps, 'tabs' | 'currentTabId' | 'onTabClick' | 'onContinueDebug'> {
+    utils?: ReactNode;
+}
+declare const Header: FC<HeaderProps>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

package/lib/components/DevTools/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,WACR,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,iBAAiB,CAAC;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAiC3B,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/DevTools/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import { StyledTabContainer, StyledIcon } from './DevTools.styles';
+registerIcon(bugIcon);
+const Header = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { as: StyledTabContainer, item: { shrink: 0 }, container: { justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }, children: [_jsx(Flex, { container: { pad: [0, 1], alignItems: 'center' }, children: _jsx(StyledIcon, { name: 'bug' }) }), onContinueDebug ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: t('active_session_info') }), _jsx(Button, { variant: 'link', onClick: onContinueDebug, children: t('continue_debugging') })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: onTabClick }), utils] }))] }));
+};
+export default Header;
+//# sourceMappingURL=Header.js.map

package/lib/components/DevTools/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnE,YAAY,CAAC,OAAO,CAAC,CAAC;AAOtB,MAAM,MAAM,GAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,SAAS,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEnF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpD,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,GACpB,EACN,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,YAC5C,CAAC,CAAC,oBAAoB,CAAC,GACjB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,KAAK,IACL,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\n\nimport { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledTabContainer, StyledIcon } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface HeaderProps\n  extends Pick<DevToolsProps, 'tabs' | 'currentTabId' | 'onTabClick' | 'onContinueDebug'> {\n  utils?: ReactNode;\n}\n\nconst Header: FC<HeaderProps> = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {\n  const t = useI18n();\n\n  return (\n    <Flex\n      as={StyledTabContainer}\n      item={{ shrink: 0 }}\n      container={{ justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }}\n    >\n      <Flex container={{ pad: [0, 1], alignItems: 'center' }}>\n        <StyledIcon name='bug' />\n      </Flex>\n      {onContinueDebug ? (\n        <Flex container={{ gap: 1 }}>\n          <Text variant='secondary'>{t('active_session_info')}</Text>\n          <Button variant='link' onClick={onContinueDebug}>\n            {t('continue_debugging')}\n          </Button>\n        </Flex>\n      ) : (\n        <>\n          <Flex\n            item={{ grow: 1 }}\n            as={Tabs}\n            tabs={tabs}\n            currentTabId={currentTabId}\n            onTabClick={onTabClick}\n          />\n          {utils}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport default Header;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/DevTools/index.js

@@ -0,0 +1,2 @@
+export { default } from './DevTools';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { FC, PropsWithoutRef } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FooterProps } from './PreviewShell.types';
+declare const Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>>;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAuB,MAAM,OAAO,CAAC;AAEzF,OAAO,EAEL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAmF1D,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Footer.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useMemo } from 'react';
+import { Flex, Button, Icon, MenuButton, useI18n, registerIcon, TabPanel } from '@pega/cosmos-react-core';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import Header from '../DevTools/Header';
+import { StyledToolsContent } from '../DevTools/DevTools.styles';
+import PreviewShellContext from './PreviewShellContext';
+import { StyledFooterContent } from './PreviewShell.styles';
+registerIcon(bugIcon);
+const Footer = forwardRef(function Footer({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) {
+    const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);
+    const t = useI18n();
+    const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');
+    const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);
+    const handleTabChange = (id, e) => {
+        if (!footerExpanded) {
+            toggleFooter(true);
+        }
+        onTabClick(id, e);
+    };
+    const utils = useMemo(() => {
+        return (_jsxs(Flex, { container: { alignItems: 'center', pad: [0, 2] }, children: [menu && (_jsx(MenuButton, { text: t('more_options'), variant: 'simple', icon: 'more', iconOnly: true, menu: menu })), onNewWindowClick && (_jsx(Button, { variant: 'simple', label: t('open_in_new_window_text'), icon: true, onClick: (e) => {
+                        if (footerExpanded) {
+                            toggleFooter(prev => !prev);
+                        }
+                        onNewWindowClick(e);
+                    }, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded, label: toggleButtonLabel, "aria-label": toggleButtonA11y, onClick: () => toggleFooter(prev => !prev), children: _jsx(Icon, { name: footerExpanded ? 'caret-down' : 'caret-up' }) })] }));
+    }, [
+        t,
+        toggleButtonLabel,
+        toggleButtonA11y,
+        menu,
+        onNewWindowClick,
+        footerExpanded,
+        toggleFooter
+    ]);
+    return (_jsxs(Flex, { as: StyledFooterContent, container: { direction: 'column' }, children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, ref: ref, container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, current: currentTabId && tab.id ? currentTabId === tab.id : true, children: tab.content }, tab.id))) })] }));
+});
+export default Footer;
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, MouseEvent, PropsWithoutRef, useContext, useMemo } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  Icon,\n  MenuButton,\n  useI18n,\n  registerIcon,\n  TabPanel\n} from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport { StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\nimport { StyledFooterContent } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(function Footer(\n  { tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu },\n  ref: FooterProps['ref']\n) {\n  const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);\n  const t = useI18n();\n\n  const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');\n  const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);\n\n  const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    if (!footerExpanded) {\n      toggleFooter(true);\n    }\n    onTabClick(id, e);\n  };\n\n  const utils = useMemo(() => {\n    return (\n      <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n        {menu && (\n          <MenuButton text={t('more_options')} variant='simple' icon='more' iconOnly menu={menu} />\n        )}\n        {onNewWindowClick && (\n          <Button\n            variant='simple'\n            label={t('open_in_new_window_text')}\n            icon\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              if (footerExpanded) {\n                toggleFooter(prev => !prev);\n              }\n              onNewWindowClick(e);\n            }}\n          >\n            <Icon name='open' />\n          </Button>\n        )}\n        <Button\n          variant='simple'\n          icon\n          aria-expanded={footerExpanded}\n          label={toggleButtonLabel}\n          aria-label={toggleButtonA11y}\n          onClick={() => toggleFooter(prev => !prev)}\n        >\n          <Icon name={footerExpanded ? 'caret-down' : 'caret-up'} />\n        </Button>\n      </Flex>\n    );\n  }, [\n    t,\n    toggleButtonLabel,\n    toggleButtonA11y,\n    menu,\n    onNewWindowClick,\n    footerExpanded,\n    toggleFooter\n  ]);\n\n  return (\n    <Flex as={StyledFooterContent} container={{ direction: 'column' }}>\n      <Header\n        tabs={tabs}\n        onTabClick={handleTabChange}\n        onContinueDebug={onContinueDebug}\n        currentTabId={currentTabId}\n        utils={utils}\n      />\n      <Flex as={StyledToolsContent} ref={ref} container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel\n            tabId={tab.id}\n            currentTabId={currentTabId}\n            current={currentTabId && tab.id ? currentTabId === tab.id : true}\n            key={tab.id}\n          >\n            {tab.content}\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Footer;\n"]}

package/lib/components/PreviewShell/Header.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { HeaderProps } from './PreviewShell.types';
+declare const Header: FC<HeaderProps & ForwardProps>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

package/lib/components/PreviewShell/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAAoC,MAAM,yBAAyB,CAAC;AAI/F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CA8CzC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Flex, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';
+import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
+import { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';
+const Header = forwardRef(function Header({ appName, onClick, href, status, operator, channels, onChannelClick }, ref) {
+    const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];
+    return (_jsxs(Flex, { as: StyledHeader, container: { justify: 'between', alignItems: 'center' }, ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(StyledTitle, { onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBareButton : Text, children: appName }), status && _jsx(Status, { variant: status.variant, children: status.children }), channels && (_jsx(MenuButton, { text: selectedChannel.primary, icon: selectedChannel.icon, showIcon: true, menu: {
+                            mode: 'single-select',
+                            items: channels,
+                            onItemClick: onChannelClick
+                        } }))] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
+});
+export default Header;
+//# sourceMappingURL=Header.js.map

package/lib/components/PreviewShell/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAmC,UAAU,CAAC,SAAS,MAAM,CACvE,EACE,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACe,EAC/B,GAAuB;IAEvB,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,EACrE,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,OAAO,EAC7B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,QAAQ,QACR,IAAI,EAAE;4BACJ,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,QAAQ;4BACf,WAAW,EAAE,cAAc;yBAC5B,GACD,CACH,IACI,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport { HeaderProps } from './PreviewShell.types';\n\nconst Header: FC<HeaderProps & ForwardProps> = forwardRef(function Header(\n  {\n    appName,\n    onClick,\n    href,\n    status,\n    operator,\n    channels,\n    onChannelClick\n  }: PropsWithoutRef<HeaderProps>,\n  ref: HeaderProps['ref']\n) {\n  const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];\n  return (\n    <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <StyledTitle\n          onClick={onClick}\n          href={href}\n          forwardedAs={onClick || href ? StyledBareButton : Text}\n        >\n          {appName}\n        </StyledTitle>\n        {status && <Status variant={status.variant}>{status.children}</Status>}\n        {channels && (\n          <MenuButton\n            text={selectedChannel.primary}\n            icon={selectedChannel.icon}\n            showIcon\n            menu={{\n              mode: 'single-select',\n              items: channels,\n              onItemClick: onChannelClick\n            }}\n          />\n        )}\n      </Flex>\n      <Operator\n        as={StyledOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n      >\n        <Avatar {...operator.avatar} />\n      </Operator>\n    </Flex>\n  );\n});\n\nexport default Header;\n"]}

package/lib/components/PreviewShell/PreviewShell.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { PreviewShellProps } from './PreviewShell.types';
+declare const PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps>;
+export default PreviewShell;
+//# sourceMappingURL=PreviewShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/PreviewShell/PreviewShell.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';
+import { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';
+import Header from './Header';
+import PreviewShellContext from './PreviewShellContext';
+import Footer from './Footer';
+const PreviewShell = forwardRef(function PreviewShell({ header, children, footer }, ref) {
+    const [expanded, setExpanded] = useState(!!footer?.expanded);
+    const t = useI18n();
+    useEffect(() => {
+        setExpanded(!!footer?.expanded);
+    }, [footer?.expanded]);
+    const skipLinks = useMemo(() => {
+        const skipLinksItems = [
+            {
+                label: t('go_to_main_content'),
+                target: {
+                    ariaLabel: t('main_content'),
+                    selector: 'main'
+                }
+            }
+        ];
+        if (footer) {
+            skipLinksItems.push({
+                label: t('go_to_noun', [t('dev_tools')]),
+                target: {
+                    ariaLabel: t('dev_tools'),
+                    selector: 'footer'
+                }
+            });
+        }
+        return skipLinksItems;
+    }, [t, header?.channels]);
+    return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
+            footerExpanded: expanded,
+            toggleFooter: setExpanded
+        }), [expanded]), children: [_jsx(SkipLinks, { items: skipLinks }), header && _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, footer: !!footer, header: !!header, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: children }) }), _jsx(ExpandCollapse, { as: StyledFooter, min: footer ? '2.5rem' : '0rem', max: '50vh', collapsed: footer ? !expanded : true, children: footer && _jsx(Footer, { ...footer }) })] }));
+});
+export default PreviewShell;
+//# sourceMappingURL=PreviewShell.js.map

package/lib/components/PreviewShell/PreviewShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EAEP,SAAS,EACT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B;IAE7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE;YACV,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAEnC,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,GAClB,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  useI18n,\n  SkipLinksProps,\n  SkipLinks,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  function PreviewShell(\n    { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) {\n    const [expanded, setExpanded] = useState(!!footer?.expanded);\n    const t = useI18n();\n\n    useEffect(() => {\n      setExpanded(!!footer?.expanded);\n    }, [footer?.expanded]);\n\n    const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n      const skipLinksItems = [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        }\n      ];\n\n      if (footer) {\n        skipLinksItems.push({\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        });\n      }\n      return skipLinksItems;\n    }, [t, header?.channels]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerExpanded: expanded,\n            toggleFooter: setExpanded\n          }),\n          [expanded]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        {header && <Header {...header} />}\n        <StyledMain ref={ref} footer={!!footer} header={!!header}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            {children}\n          </StyledPreviewContainer>\n        </StyledMain>\n        <ExpandCollapse\n          as={StyledFooter}\n          min={footer ? '2.5rem' : '0rem'}\n          max='50vh'\n          collapsed={footer ? !expanded : true}\n        >\n          {footer && <Footer {...footer} />}\n        </ExpandCollapse>\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}

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

@@ -0,0 +1,13 @@
+import { Text } from '@pega/cosmos-react-core';
+export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitle: typeof Text;
+export declare const StyledBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
+    header: boolean;
+    footer: boolean;
+}, never>;
+export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFooterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=PreviewShell.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAQjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU;YAAyB,OAAO;YAAU,OAAO;SAkBvE,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAejC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIvB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC"}

package/lib/components/PreviewShell/PreviewShell.styles.js

@@ -0,0 +1,89 @@
+import styled, { css } from 'styled-components';
+import { useContext } from 'react';
+import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import PreviewShellContext from './PreviewShellContext';
+const footerExpandedHeight = '50vh';
+const footerCollapsedHeight = '2.5rem';
+export const StyledHeader = styled.header(({ theme }) => {
+    return css `
+    height: 3rem;
+    padding: 0 calc(2 * ${theme.base.spacing});
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledHeader.defaultProps = defaultThemeProp;
+export const StyledTitle = styled(Text)(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].xs};
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${theme.base.palette['foreground-color']};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+  `;
+});
+StyledTitle.defaultProps = defaultThemeProp;
+export const StyledBareButton = styled(BareButton)(({ theme }) => {
+    return css `
+    &:not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledBareButton.defaultProps = defaultThemeProp;
+export const StyledOperator = styled.button(({ theme }) => css `
+    border-radius: 50%;
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `);
+StyledOperator.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ theme, header, footer }) => {
+    const { footerExpanded } = useContext(PreviewShellContext);
+    const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;
+    return css `
+      height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});
+      transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      width: 100%;
+      background-color: ${theme.base.colors.slate.medium};
+      overflow: hidden;
+
+      ${header &&
+        css `
+        padding: calc(2 * ${theme.base.spacing});
+      `}
+    `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledPreviewContainer = styled.div(({ theme }) => {
+    return css `
+    height: 100%;
+    width: 100%;
+    &:focus,
+    &:focus-visible {
+      box-shadow: ${theme.base.shadow.focus};
+      outline: none;
+    }
+    > iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  `;
+});
+StyledPreviewContainer.defaultProps = defaultThemeProp;
+export const StyledFooter = styled.footer(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledFooter.defaultProps = defaultThemeProp;
+export const StyledFooterContent = styled.div `
+  height: 100%;
+  overflow: hidden;
+`;
+StyledFooterContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=PreviewShell.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport PreviewShellContext from './PreviewShellContext';\n\nconst footerExpandedHeight = '50vh';\nconst footerCollapsedHeight = '2.5rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: 3rem;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n  return css`\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ header: boolean; footer: boolean }>(\n  ({ theme, header, footer }) => {\n    const { footerExpanded } = useContext(PreviewShellContext);\n    const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;\n\n    return css`\n      height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});\n      transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      width: 100%;\n      background-color: ${theme.base.colors.slate.medium};\n      overflow: hidden;\n\n      ${header &&\n      css`\n        padding: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    width: 100%;\n    &:focus,\n    &:focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n    > iframe {\n      width: 100%;\n      height: 100%;\n      border: none;\n    }\n  `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledFooterContent = styled.div`\n  height: 100%;\n  overflow: hidden;\n`;\n\nStyledFooterContent.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,52 @@
+import { MouseEvent, Ref } from 'react';
+import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps, MenuItemProps } from '@pega/cosmos-react-core';
+import { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+import { DevToolsProps } from '../DevTools';
+interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
+    avatar: AvatarProps;
+}
+export interface HeaderProps extends BaseProps, NoChildrenProp, Pick<AppInfoProps, 'appName' | 'href' | 'onClick'> {
+    /** Represents the current status of the application */
+    status?: StatusProps;
+    /** The active user of the application. */
+    operator: OperatorProps;
+    /** Ref for the header */
+    ref?: Ref<HTMLDivElement>;
+    /** Application channels like Browser, mobile */
+    channels: (Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'selected'> & {
+        icon?: string;
+    })[];
+    /** Click action on selected channel */
+    onChannelClick: MenuProps['onItemClick'];
+}
+export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
+    /**
+     * If true, the footer will be expanded by default on render.
+     * @default false
+     */
+    expanded?: boolean;
+    /** Menu items to be shown on more options button */
+    menu?: MenuProps;
+    /** Callback fired before footer expands. */
+    onBeforeExpand?: () => void;
+    /** Callback fired after footer expands. */
+    onAfterExpand?: () => void;
+    /** Callback fired before footer collapses. */
+    onBeforeCollapse?: () => void;
+    /** Callback fired after footer collapses. */
+    onAfterCollapse?: () => void;
+    /** Callback to open footer in a new window. */
+    onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+}
+export interface PreviewShellProps {
+    /** Header of the shell */
+    header?: HeaderProps;
+    /** A region to display main content. */
+    children: JSX.Element;
+    /** Footer of the shell */
+    footer?: FooterProps;
+    /** Ref for the shell */
+    ref?: Ref<HTMLElement>;
+}
+export {};
+//# sourceMappingURL=PreviewShell.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IAC7E,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAC9F,uCAAuC;IACvC,cAAc,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC;IACrE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

package/lib/components/PreviewShell/PreviewShell.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.types.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref } from 'react';\n\nimport {\n  AppShellProps,\n  AvatarProps,\n  BaseProps,\n  MenuProps,\n  NoChildrenProp,\n  OmitStrict,\n  StatusProps,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { DevToolsProps } from '../DevTools';\n\ninterface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: AvatarProps;\n}\n\nexport interface HeaderProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<AppInfoProps, 'appName' | 'href' | 'onClick'> {\n  /** Represents the current status of the application */\n  status?: StatusProps;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** Ref for the header */\n  ref?: Ref<HTMLDivElement>;\n  /** Application channels like Browser, mobile */\n  channels: (Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'selected'> & { icon?: string })[];\n  /** Click action on selected channel */\n  onChannelClick: MenuProps['onItemClick'];\n}\n\nexport interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {\n  /**\n   * If true, the footer will be expanded by default on render.\n   * @default false\n   */\n  expanded?: boolean;\n  /** Menu items to be shown on more options button */\n  menu?: MenuProps;\n  /** Callback fired before footer expands. */\n  onBeforeExpand?: () => void;\n  /** Callback fired after footer expands. */\n  onAfterExpand?: () => void;\n  /** Callback fired before footer collapses. */\n  onBeforeCollapse?: () => void;\n  /** Callback fired after footer collapses. */\n  onAfterCollapse?: () => void;\n  /** Callback to open footer in a new window. */\n  onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface PreviewShellProps {\n  /** Header of the shell */\n  header?: HeaderProps;\n  /** A region to display main content. */\n  children: JSX.Element;\n  /** Footer of the shell */\n  footer?: FooterProps;\n  /** Ref for the shell */\n  ref?: Ref<HTMLElement>;\n}\n"]}

package/lib/components/PreviewShell/PreviewShellContext.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface PreviewShellContextValue {
+    footerExpanded: boolean;
+    toggleFooter: Dispatch<SetStateAction<boolean>>;
+}
+declare const PreviewShellContext: import("react").Context<PreviewShellContextValue>;
+export default PreviewShellContext;
+//# sourceMappingURL=PreviewShellContext.d.ts.map

package/lib/components/PreviewShell/PreviewShellContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,QAAA,MAAM,mBAAmB,mDAGvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/components/PreviewShell/PreviewShellContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+const PreviewShellContext = createContext({
+    footerExpanded: false,
+    toggleFooter: () => { }
+});
+export default PreviewShellContext;
+//# sourceMappingURL=PreviewShellContext.js.map

package/lib/components/PreviewShell/PreviewShellContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShellContext.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAOhE,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,cAAc,EAAE,KAAK;IACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;CACvB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nexport interface PreviewShellContextValue {\n  footerExpanded: boolean;\n  toggleFooter: Dispatch<SetStateAction<boolean>>;\n}\n\nconst PreviewShellContext = createContext<PreviewShellContextValue>({\n  footerExpanded: false,\n  toggleFooter: () => {}\n});\n\nexport default PreviewShellContext;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/PreviewShell/index.js

@@ -0,0 +1,2 @@
+export { default } from './PreviewShell';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/PreviewShell/utils.d.ts

@@ -0,0 +1,4 @@
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+export declare const footerExpanded: (transitionState: (typeof expandCollapseStates)[keyof typeof expandCollapseStates]) => boolean;
+export default footerExpanded;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/PreviewShell/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,eAAO,MAAM,cAAc,oBACR,CAAC,2BAA2B,CAAC,CAAC,MAAM,2BAA2B,CAAC,YAEe,CAAC;AAEnG,eAAe,cAAc,CAAC"}

package/lib/components/PreviewShell/utils.js

@@ -0,0 +1,4 @@
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+export const footerExpanded = (transitionState) => transitionState === expandCollapseStates.rising || transitionState === expandCollapseStates.high;
+export default footerExpanded;
+//# sourceMappingURL=utils.js.map

package/lib/components/PreviewShell/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAAiF,EACjF,EAAE,CACF,eAAe,KAAK,oBAAoB,CAAC,MAAM,IAAI,eAAe,KAAK,oBAAoB,CAAC,IAAI,CAAC;AAEnG,eAAe,cAAc,CAAC","sourcesContent":["import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nexport const footerExpanded = (\n  transitionState: (typeof expandCollapseStates)[keyof typeof expandCollapseStates]\n) =>\n  transitionState === expandCollapseStates.rising || transitionState === expandCollapseStates.high;\n\nexport default footerExpanded;\n"]}

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Clipboard } from './components/Clipboard';
+export * from './components/Clipboard';
+export { default as DevTools } from './components/DevTools';
+export * from './components/DevTools';
+export { default as PreviewShell } from './components/PreviewShell';
+export * from './components/PreviewShell';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -0,0 +1,8 @@
+// This file is autogenerated. Any changes will be overwritten.
+export { default as Clipboard } from './components/Clipboard';
+export * from './components/Clipboard';
+export { default as DevTools } from './components/DevTools';
+export * from './components/DevTools';
+export { default as PreviewShell } from './components/PreviewShell';
+export * from './components/PreviewShell';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Clipboard } from './components/Clipboard';\nexport * from './components/Clipboard';\nexport { default as DevTools } from './components/DevTools';\nexport * from './components/DevTools';\nexport { default as PreviewShell } from './components/PreviewShell';\nexport * from './components/PreviewShell';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-tools",
-  "version": "5.0.0-dev.4.8",
+  "version": "5.0.0-dev.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "5.0.0-dev.4.8",
+    "@pega/cosmos-react-core": "5.0.0-dev.5.0",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",