@pega/cosmos-react-tools 3.0.0-dev.28.0 → 3.0.0-dev.29.0

package/lib/components/Clipboard/Clipboard.js

@@ -22,7 +22,7 @@ const FieldSummary = ({ primary, secondary, fields, actions }) => {
 const Clipboard = forwardRef(({ 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(StyledClipboardFooter, { children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
+    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

@@ -1 +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 (\n    <>\n      {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  );\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(\n  (\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        <StyledClipboardFooter>\n          {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n        </StyledClipboardFooter>\n      </Flex>\n    );\n  }\n);\nexport default Clipboard;\n"]}
+{"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 (\n    <>\n      {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  );\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(\n  (\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  }\n);\nexport default Clipboard;\n"]}

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

@@ -0,0 +1,9 @@
+import { FC, PropsWithoutRef, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { DevToolsProps } from './DevTools.types';
+interface ContentProps extends Pick<DevToolsProps, 'tabContent' | 'currentTabId'> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Content: FC<ForwardProps & PropsWithoutRef<ContentProps>>;
+export default Content;
+//# sourceMappingURL=Content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAkB,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,cAAc,CAAC;IAC/E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAkB7D,CAAC;AACF,eAAe,OAAO,CAAC"}

package/lib/components/DevTools/Content.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TabPanel, Flex, registerIcon } from '@pega/cosmos-react-core';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import { StyledToolsContent } from './DevTools.styles';
+registerIcon(bugIcon);
+const Content = forwardRef(({ currentTabId, tabContent }, ref) => {
+    return (_jsx(Flex, { as: StyledToolsContent, ref: ref, "aria-hidden": !tabContent, container: { pad: [1, 2] }, item: { grow: 1 }, children: tabContent && currentTabId && (_jsx(TabPanel, { tabId: currentTabId, currentTabId: currentTabId, children: tabContent })) }));
+});
+export default Content;
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/components/DevTools/Content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAgB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,YAAY,CAAC,OAAO,CAAC,CAAC;AAMtB,MAAM,OAAO,GAAqD,UAAU,CAC1E,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,GAAwB,EAAE,EAAE;IACzD,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,GAAG,iBACK,CAAC,UAAU,EACxB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAEhB,UAAU,IAAI,YAAY,IAAI,CAC7B,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,YACtD,UAAU,GACF,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,OAAO,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\n\nimport { TabPanel, Flex, ForwardProps, registerIcon } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface ContentProps extends Pick<DevToolsProps, 'tabContent' | 'currentTabId'> {\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Content: FC<ForwardProps & PropsWithoutRef<ContentProps>> = forwardRef(\n  ({ currentTabId, tabContent }, ref: ContentProps['ref']) => {\n    return (\n      <Flex\n        as={StyledToolsContent}\n        ref={ref}\n        aria-hidden={!tabContent}\n        container={{ pad: [1, 2] }}\n        item={{ grow: 1 }}\n      >\n        {tabContent && currentTabId && (\n          <TabPanel tabId={currentTabId} currentTabId={currentTabId}>\n            {tabContent}\n          </TabPanel>\n        )}\n      </Flex>\n    );\n  }\n);\nexport default Content;\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,EAAE,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAIrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAkB/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/DevTools/DevTools.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { registerIcon } from '@pega/cosmos-react-core';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import { StyledDevTools } from './DevTools.styles';
+import Header from './Header';
+import Content from './Content';
+registerIcon(bugIcon);
+const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug, tabContent, utils }, ref) => {
+    return (_jsxs(StyledDevTools, { ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Content, { tabContent: tabContent, currentTabId: currentTabId })] }));
+});
+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,EAAgB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAC5E,CACE,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,EAAE,EACtE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,MAAC,cAAc,IAAC,GAAG,EAAE,GAAG,aACtB,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,OAAO,IAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,GAAI,IAChD,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, registerIcon } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\nimport Content from './Content';\n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(\n  (\n    { tabs, currentTabId, onTabClick, onContinueDebug, tabContent, utils },\n    ref: DevToolsProps['ref']\n  ) => {\n    return (\n      <StyledDevTools ref={ref}>\n        <Header\n          tabs={tabs}\n          onTabClick={onTabClick}\n          onContinueDebug={onContinueDebug}\n          currentTabId={currentTabId}\n          utils={utils}\n        />\n        <Content tabContent={tabContent} currentTabId={currentTabId} />\n      </StyledDevTools>\n    );\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, Partial<DevToolsProps>, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, 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,6HAiB9B,CAAC;AAIF,eAAO,MAAM,UAAU,mOAGtB,CAAC"}

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

@@ -0,0 +1,49 @@
+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(({ theme: { base: { palette } } }) => {
+    return css `
+      height: calc(100% - 2.5rem);
+      padding: 0;
+      overflow: auto;
+      background-color: ${palette['primary-background']};
+
+      ${StyledTabPanel} {
+        width: 100%;
+      }
+    `;
+});
+StyledToolsContent.defaultProps = defaultThemeProp;
+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,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;0BAIY,OAAO,CAAC,oBAAoB,CAAC;;QAE/C,cAAc;;;KAGjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,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<Partial<DevToolsProps>>(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      height: calc(100% - 2.5rem);\n      padding: 0;\n      overflow: auto;\n      background-color: ${palette['primary-background']};\n\n      ${StyledTabPanel} {\n        width: 100%;\n      }\n    `;\n  }\n);\n\nStyledToolsContent.defaultProps = defaultThemeProp;\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,19 @@
+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: Tab[];
+    /** optional ID for making the corresponding tab active */
+    currentTabId?: TabsProps['currentTabId'];
+    /**  Content for the tabs.  */
+    tabContent: ReactNode;
+    /** 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>;
+}
+//# 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,GAAG,EAAE,CAAC;IACZ,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,8BAA8B;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,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"}

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: Tab[];\n  /** optional ID for making the corresponding tab active */\n  currentTabId?: TabsProps['currentTabId'];\n  /**  Content for the tabs.  */\n  tabContent: ReactNode;\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"]}

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,CAgC3B,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, 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,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      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 { 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,OAAO,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 { DevToolsProps } from './DevTools.types';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAwB,MAAM,OAAO,CAAC;AAE1F,OAAO,EAIL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAmF3D,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"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,EAMb,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAkF3D,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Footer.js

@@ -1,29 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useState } from 'react';
-import { TabPanel, Tabs, Flex, Button, Icon, MenuButton, useI18n } from '@pega/cosmos-react-core';
+import { forwardRef, useContext, useMemo } from 'react';
+import { Flex, Button, Icon, MenuButton, useI18n, registerIcon } from '@pega/cosmos-react-core';
 import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
-import { StyledTabContainer, StyledToolsContainer, StyledFooter } from './PreviewShell.styles';
-import { footerExpanded } from './utils';
+import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
+import Header from '../DevTools/Header';
+import Content from '../DevTools/Content';
 import PreviewShellContext from './PreviewShellContext';
-const Footer = forwardRef(({ tabs, tabContent, onTabClick, newTabHref, menu }, ref) => {
+import { footerExpanded } from './utils';
+import { StyledFooter } from './PreviewShell.styles';
+registerIcon(bugIcon);
+const Footer = forwardRef(({ tabs, currentTabId, tabContent, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
     const { footerState, toggleFooter } = useContext(PreviewShellContext);
-    const [currentTabId, setCurrentTabId] = useState(tabs[0].id);
     const t = useI18n();
     const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');
     const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [
-        t('debug_tools')
+        t('dev_tools')
     ]);
     const handleTabChange = (id, e) => {
         if (!footerExpanded(footerState)) {
             toggleFooter();
         }
-        setCurrentTabId(id);
         onTabClick(id, e);
     };
-    return (_jsxs(Flex, { as: StyledFooter, container: { direction: 'column' }, children: [_jsxs(Flex, { as: StyledTabContainer, container: { justify: 'between' }, children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: handleTabChange }), _jsxs(Flex, { container: { alignItems: 'center', pad: [0, 2] }, children: [menu && (_jsx(MenuButton, { text: t('more_options'), variant: 'simple', icon: 'more', iconOnly: true, menu: menu })), newTabHref && (_jsx(Button, { variant: 'simple', href: newTabHref, target: '_blank', label: t('open_in_new_window_text'), icon: true, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded(footerState), label: footerState === expandCollapseStates.high ||
-                                    footerState === expandCollapseStates.low
-                                    ? toggleButtonLabel
-                                    : undefined, "aria-label": toggleButtonA11y, onClick: toggleFooter, children: _jsx(Icon, { name: footerExpanded(footerState) ? 'caret-down' : 'caret-up' }) })] })] }), _jsx(Flex, { as: StyledToolsContainer, ref: ref, "aria-hidden": !footerExpanded(footerState), container: { pad: [1, 2] }, item: { grow: 1 }, children: footerState !== expandCollapseStates.low && (_jsx(TabPanel, { tabId: currentTabId, currentTabId: currentTabId, children: tabContent })) })] }));
+    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(footerState)) {
+                            toggleFooter();
+                        }
+                        onNewWindowClick(e);
+                    }, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded(footerState), label: footerState === expandCollapseStates.high || footerState === expandCollapseStates.low
+                        ? toggleButtonLabel
+                        : undefined, "aria-label": toggleButtonA11y, onClick: toggleFooter, children: _jsx(Icon, { name: footerExpanded(footerState) ? 'caret-down' : 'caret-up' }) })] }));
+    }, [t, toggleButtonLabel, toggleButtonA11y, menu, onNewWindowClick, footerState, toggleFooter]);
+    return (_jsxs(StyledFooter, { children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Content, { tabContent: footerState !== expandCollapseStates.low ? tabContent : undefined, currentTabId: currentTabId, ref: ref })] }));
 });
 export default Footer;
 //# sourceMappingURL=Footer.js.map

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

@@ -1 +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, useState } from 'react';\n\nimport {\n  TabPanel,\n  Tabs,\n  Flex,\n  ForwardProps,\n  Button,\n  Icon,\n  MenuButton,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledTabContainer, StyledToolsContainer, StyledFooter } from './PreviewShell.styles';\nimport { footerExpanded } from './utils';\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n  ({ tabs, tabContent, onTabClick, newTabHref, menu }, ref: FooterProps['ref']) => {\n    const { footerState, toggleFooter } = useContext(PreviewShellContext);\n    const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n    const t = useI18n();\n\n    const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [\n      t('debug_tools')\n    ]);\n\n    const handleTabChange = (id: string, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!footerExpanded(footerState)) {\n        toggleFooter();\n      }\n      setCurrentTabId(id);\n      onTabClick(id, e);\n    };\n\n    return (\n      <Flex as={StyledFooter} container={{ direction: 'column' }}>\n        <Flex as={StyledTabContainer} container={{ justify: 'between' }}>\n          <Flex\n            item={{ grow: 1 }}\n            as={Tabs}\n            tabs={tabs}\n            currentTabId={currentTabId}\n            onTabClick={handleTabChange}\n          />\n          <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n            {menu && (\n              <MenuButton\n                text={t('more_options')}\n                variant='simple'\n                icon='more'\n                iconOnly\n                menu={menu}\n              />\n            )}\n            {newTabHref && (\n              <Button\n                variant='simple'\n                href={newTabHref}\n                target='_blank'\n                label={t('open_in_new_window_text')}\n                icon\n              >\n                <Icon name='open' />\n              </Button>\n            )}\n            <Button\n              variant='simple'\n              icon\n              aria-expanded={footerExpanded(footerState)}\n              label={\n                footerState === expandCollapseStates.high ||\n                footerState === expandCollapseStates.low\n                  ? toggleButtonLabel\n                  : undefined\n              }\n              aria-label={toggleButtonA11y}\n              onClick={toggleFooter}\n            >\n              <Icon name={footerExpanded(footerState) ? 'caret-down' : 'caret-up'} />\n            </Button>\n          </Flex>\n        </Flex>\n        <Flex\n          as={StyledToolsContainer}\n          ref={ref}\n          aria-hidden={!footerExpanded(footerState)}\n          container={{ pad: [1, 2] }}\n          item={{ grow: 1 }}\n        >\n          {footerState !== expandCollapseStates.low && (\n            <TabPanel tabId={currentTabId} currentTabId={currentTabId}>\n              {tabContent}\n            </TabPanel>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\nexport default Footer;\n"]}
+{"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} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport Content from '../DevTools/Content';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { footerExpanded } from './utils';\nimport { FooterProps } from './PreviewShell.types';\nimport { StyledFooter } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n  (\n    { tabs, currentTabId, tabContent, onTabClick, onNewWindowClick, onContinueDebug, menu },\n    ref: FooterProps['ref']\n  ) => {\n    const { footerState, toggleFooter } = useContext(PreviewShellContext);\n    const t = useI18n();\n\n    const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [\n      t('dev_tools')\n    ]);\n\n    const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!footerExpanded(footerState)) {\n        toggleFooter();\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\n              text={t('more_options')}\n              variant='simple'\n              icon='more'\n              iconOnly\n              menu={menu}\n            />\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(footerState)) {\n                  toggleFooter();\n                }\n                onNewWindowClick(e);\n              }}\n            >\n              <Icon name='open' />\n            </Button>\n          )}\n          <Button\n            variant='simple'\n            icon\n            aria-expanded={footerExpanded(footerState)}\n            label={\n              footerState === expandCollapseStates.high || footerState === expandCollapseStates.low\n                ? toggleButtonLabel\n                : undefined\n            }\n            aria-label={toggleButtonA11y}\n            onClick={toggleFooter}\n          >\n            <Icon name={footerExpanded(footerState) ? 'caret-down' : 'caret-up'} />\n          </Button>\n        </Flex>\n      );\n    }, [t, toggleButtonLabel, toggleButtonA11y, menu, onNewWindowClick, footerState, toggleFooter]);\n\n    return (\n      <StyledFooter>\n        <Header\n          tabs={tabs}\n          onTabClick={handleTabChange}\n          onContinueDebug={onContinueDebug}\n          currentTabId={currentTabId}\n          utils={utils}\n        />\n        <Content\n          tabContent={footerState !== expandCollapseStates.low ? tabContent : undefined}\n          currentTabId={currentTabId}\n          ref={ref}\n        />\n      </StyledFooter>\n    );\n  }\n);\nexport default Footer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiGrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAsFrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/PreviewShell/PreviewShell.js

@@ -3,10 +3,10 @@ import { forwardRef, useRef, useEffect, useMemo } from 'react';
 import { useI18n, useTransitionState, SkipLinks } from '@pega/cosmos-react-core';
 import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
 import { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';
-import Footer from './Footer';
-import PreviewShellContext from './PreviewShellContext';
 import Header from './Header';
-const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent, onTabClick, newTabHref, menu, expanded, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse } }, ref) => {
+import PreviewShellContext from './PreviewShellContext';
+import Footer from './Footer';
+const PreviewShell = forwardRef(({ header, frameurl, footer: { expanded, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse, ...footerRestProps } }, ref) => {
     const footerEl = useRef(null);
     const t = useI18n();
     const skipLinks = useMemo(() => [
@@ -18,9 +18,9 @@ const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent,
             }
         },
         {
-            label: t('go_to_noun', [t('debug_tools')]),
+            label: t('go_to_noun', [t('dev_tools')]),
             target: {
-                ariaLabel: t('debug_tools'),
+                ariaLabel: t('dev_tools'),
                 selector: 'footer'
             }
         }
@@ -51,7 +51,7 @@ const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent,
     return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
             footerState,
             toggleFooter
-        }), [footerState, toggleFooter]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: _jsx(StyledIframe, { src: frameurl, title: t('preview_frame') }) }) }), _jsx(Footer, { tabs: tabs, newTabHref: newTabHref, menu: menu, tabContent: tabContent, onTabClick: onTabClick, ref: footerEl })] }));
+        }), [footerState, toggleFooter]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: _jsx(StyledIframe, { src: frameurl, title: t('preview_frame') }) }) }), _jsx(Footer, { ...footerRestProps, ref: footerEl })] }));
 });
 export default PreviewShell;
 //# sourceMappingURL=PreviewShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FunctionComponent, useRef, useEffect, useMemo } from 'react';\n\nimport {\n  ForwardProps,\n  useI18n,\n  useTransitionState,\n  SkipLinksProps,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';\nimport Footer from './Footer';\nimport PreviewShellContext from './PreviewShellContext';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  (\n    {\n      header,\n      frameurl,\n      footer: {\n        tabs,\n        tabContent,\n        onTabClick,\n        newTabHref,\n        menu,\n        expanded,\n        onBeforeExpand,\n        onAfterExpand,\n        onBeforeCollapse,\n        onAfterCollapse\n      }\n    }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) => {\n    const footerEl = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n    const skipLinks: SkipLinksProps['items'] = useMemo(\n      () => [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        },\n        {\n          label: t('go_to_noun', [t('debug_tools')]),\n          target: {\n            ariaLabel: t('debug_tools'),\n            selector: 'footer'\n          }\n        }\n      ],\n      [t]\n    );\n\n    const {\n      state: footerState,\n      toggle: toggleFooter,\n      set: setFooterState\n    } = useTransitionState({\n      ref: footerEl,\n      property: 'height',\n      states: expandCollapseStates,\n      defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low\n    });\n\n    useEffect(() => {\n      setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);\n    }, [expanded]);\n\n    useEffect(() => {\n      if (footerState === expandCollapseStates.rising) {\n        onBeforeExpand?.();\n      } else if (footerState === expandCollapseStates.falling) {\n        onBeforeCollapse?.();\n      } else if (footerState === expandCollapseStates.low) {\n        onAfterCollapse?.();\n      } else {\n        onAfterExpand?.();\n      }\n    }, [footerState]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerState,\n            toggleFooter\n          }),\n          [footerState, toggleFooter]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        <Header {...header} />\n        <StyledMain ref={ref}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            <StyledIframe src={frameurl} title={t('preview_frame')} />\n          </StyledPreviewContainer>\n        </StyledMain>\n        <Footer\n          tabs={tabs}\n          newTabHref={newTabHref}\n          menu={menu}\n          tabContent={tabContent}\n          onTabClick={onTabClick}\n          ref={footerEl}\n        />\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}
+{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FunctionComponent, useRef, useEffect, useMemo } from 'react';\n\nimport {\n  ForwardProps,\n  useI18n,\n  useTransitionState,\n  SkipLinksProps,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledIframe, StyledMain, StyledPreviewContainer } 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  (\n    {\n      header,\n      frameurl,\n      footer: {\n        expanded,\n        onBeforeExpand,\n        onAfterExpand,\n        onBeforeCollapse,\n        onAfterCollapse,\n        ...footerRestProps\n      }\n    }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) => {\n    const footerEl = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n    const skipLinks: SkipLinksProps['items'] = useMemo(\n      () => [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        },\n        {\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        }\n      ],\n      [t]\n    );\n\n    const {\n      state: footerState,\n      toggle: toggleFooter,\n      set: setFooterState\n    } = useTransitionState({\n      ref: footerEl,\n      property: 'height',\n      states: expandCollapseStates,\n      defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low\n    });\n\n    useEffect(() => {\n      setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);\n    }, [expanded]);\n\n    useEffect(() => {\n      if (footerState === expandCollapseStates.rising) {\n        onBeforeExpand?.();\n      } else if (footerState === expandCollapseStates.falling) {\n        onBeforeCollapse?.();\n      } else if (footerState === expandCollapseStates.low) {\n        onAfterCollapse?.();\n      } else {\n        onAfterExpand?.();\n      }\n    }, [footerState]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerState,\n            toggleFooter\n          }),\n          [footerState, toggleFooter]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        <Header {...header} />\n        <StyledMain ref={ref}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            <StyledIframe src={frameurl} title={t('preview_frame')} />\n          </StyledPreviewContainer>\n        </StyledMain>\n        <Footer {...footerRestProps} ref={footerEl} />\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}

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

@@ -7,6 +7,4 @@ export declare const StyledMain: import("styled-components").StyledComponent<"ma
 export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, 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 StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledToolsContainer: 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

@@ -1 +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;AAYjE,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,0GAcrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAKvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAgB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAsBhC,CAAC"}
+{"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;AAYjE,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,0GAcrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAsBxB,CAAC"}

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

@@ -1,9 +1,8 @@
 import styled, { css } from 'styled-components';
 import { useContext } from 'react';
 import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
-import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledToolsContent } from '../DevTools/DevTools.styles';
 import PreviewShellContext from './PreviewShellContext';
 import footerexpanded from './utils';
 const footerExpandedHeight = '50vh';
@@ -77,46 +76,21 @@ export const StyledPreviewContainer = styled.div(({ theme }) => {
   `;
 });
 StyledPreviewContainer.defaultProps = defaultThemeProp;
-export const StyledFooter = styled.footer(({ theme }) => {
-    return css `
-    background-color: ${theme.base.palette['primary-background']};
-    overflow: hidden;
-  `;
-});
-StyledFooter.defaultProps = defaultThemeProp;
-export const StyledTabContainer = styled.div(({ theme }) => {
-    return css `
-    height: ${footerOffset};
-    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    text-decoration: none;
-
-    & ${StyledTabs} {
-      height: 100%;
-      border-bottom: none;
-
-      button {
-        height: 100%;
-      }
-    }
-  `;
-});
-StyledTabContainer.defaultProps = defaultThemeProp;
-export const StyledToolsContainer = styled.div(({ theme: { base: { animation } } }) => {
+export const StyledFooter = styled.footer(({ theme: { base: { palette, animation } } }) => {
     const { footerState } = useContext(PreviewShellContext);
     const containerHeight = footerexpanded(footerState)
         ? `calc(${footerExpandedHeight} - ${footerOffset})`
         : 0;
     return css `
-      height: ${containerHeight};
-      padding: 0;
-      transition: height ${animation.speed} ${animation.timing.ease};
-      overflow: auto;
+      background-color: ${palette['primary-background']};
+      overflow: hidden;
+      height: auto;
 
-      ${StyledTabPanel} {
-        width: 100%;
+      ${StyledToolsContent} {
+        height: ${containerHeight};
+        transition: height ${animation.speed} ${animation.timing.ease};
       }
     `;
 });
-StyledToolsContainer.defaultProps = defaultThemeProp;
+StyledFooter.defaultProps = defaultThemeProp;
 //# sourceMappingURL=PreviewShell.styles.js.map

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

@@ -1 +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 { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport footerexpanded from './utils';\n\nconst footerExpandedHeight = '50vh';\nconst footerOffset = '2.5rem';\nconst headerHeight = '3rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: ${headerHeight};\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(({ theme }) => {\n  const { footerState } = useContext(PreviewShellContext);\n  const heightDelta = footerexpanded(footerState)\n    ? `${footerExpandedHeight} - ${headerHeight}`\n    : `${footerOffset} - ${headerHeight}`;\n\n  return css`\n    height: calc(100vh - ${heightDelta});\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    width: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.colors.slate.medium};\n    overflow: hidden;\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  border: none;\n`;\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  `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    overflow: hidden;\n  `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(({ theme }) => {\n  return css`\n    height: ${footerOffset};\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    text-decoration: none;\n\n    & ${StyledTabs} {\n      height: 100%;\n      border-bottom: none;\n\n      button {\n        height: 100%;\n      }\n    }\n  `;\n});\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContainer = styled.div(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { footerState } = useContext(PreviewShellContext);\n    const containerHeight = footerexpanded(footerState)\n      ? `calc(${footerExpandedHeight} - ${footerOffset})`\n      : 0;\n\n    return css`\n      height: ${containerHeight};\n      padding: 0;\n      transition: height ${animation.speed} ${animation.timing.ease};\n      overflow: auto;\n\n      ${StyledTabPanel} {\n        width: 100%;\n      }\n    `;\n  }\n);\n\nStyledToolsContainer.defaultProps = defaultThemeProp;\n"]}
+{"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 { StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport footerexpanded from './utils';\n\nconst footerExpandedHeight = '50vh';\nconst footerOffset = '2.5rem';\nconst headerHeight = '3rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: ${headerHeight};\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(({ theme }) => {\n  const { footerState } = useContext(PreviewShellContext);\n  const heightDelta = footerexpanded(footerState)\n    ? `${footerExpandedHeight} - ${headerHeight}`\n    : `${footerOffset} - ${headerHeight}`;\n\n  return css`\n    height: calc(100vh - ${heightDelta});\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    width: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.colors.slate.medium};\n    overflow: hidden;\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  border: none;\n`;\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  `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(\n  ({\n    theme: {\n      base: { palette, animation }\n    }\n  }) => {\n    const { footerState } = useContext(PreviewShellContext);\n    const containerHeight = footerexpanded(footerState)\n      ? `calc(${footerExpandedHeight} - ${footerOffset})`\n      : 0;\n\n    return css`\n      background-color: ${palette['primary-background']};\n      overflow: hidden;\n      height: auto;\n\n      ${StyledToolsContent} {\n        height: ${containerHeight};\n        transition: height ${animation.speed} ${animation.timing.ease};\n      }\n    `;\n  }\n);\n\nStyledFooter.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,6 +1,7 @@
-import { MouseEvent, ReactNode, Ref } from 'react';
-import { AppShellProps, AvatarProps, BaseProps, LinkProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps, Tab } from '@pega/cosmos-react-core';
+import { MouseEvent, Ref } from 'react';
+import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps } 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;
 }
@@ -12,22 +13,12 @@ export interface HeaderProps extends BaseProps, NoChildrenProp, Pick<AppInfoProp
     /** Ref for the header */
     ref?: Ref<HTMLDivElement>;
 }
-export interface FooterProps {
+export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
     /**
      * If true, the footer will be expanded.
      * @default false
      */
     expanded?: boolean;
-    /** An array of Tab data used to render the individual footer tabs.
-     * @default []
-     */
-    tabs: Tab[];
-    /**  Content for the tabs.  */
-    tabContent: ReactNode;
-    /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */
-    onTabClick: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-    /** URL to open footer in a new window. */
-    newTabHref?: LinkProps['href'];
     /** Menu items to be shown on more options button */
     menu?: MenuProps;
     /**  Callback fired before footer expands.  */
@@ -38,8 +29,8 @@ export interface FooterProps {
     onBeforeCollapse?: () => void;
     /** Callback fired after footer collapses.  */
     onAfterCollapse?: () => void;
-    /** Ref for the footer */
-    ref?: Ref<HTMLDivElement>;
+    /** Callback to open footer in a new window. */
+    onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
 }
 export interface PreviewShellProps {
     /** Header of the shell */

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,GAAG,EACJ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,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;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,8BAA8B;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC5F,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
+{"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,EACZ,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;CAC3B;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,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,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,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.types.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactNode, Ref } from 'react';\n\nimport {\n  AppShellProps,\n  AvatarProps,\n  BaseProps,\n  LinkProps,\n  MenuProps,\n  NoChildrenProp,\n  OmitStrict,\n  StatusProps,\n  Tab\n} from '@pega/cosmos-react-core';\nimport { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\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}\n\nexport interface FooterProps {\n  /**\n   * If true, the footer will be expanded.\n   * @default false\n   */\n  expanded?: boolean;\n  /** An array of Tab data used to render the individual footer tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /**  Content for the tabs.  */\n  tabContent: ReactNode;\n  /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** URL to open footer in a new window. */\n  newTabHref?: LinkProps['href'];\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  /** Ref for the footer */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface PreviewShellProps {\n  /** Header of the shell */\n  header: HeaderProps;\n  /** src for the main content iframe */\n  frameurl: string;\n  /** Footer of the shell */\n  footer: FooterProps;\n  /** Ref for the shell */\n  ref?: Ref<HTMLElement>;\n}\n"]}
+{"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} 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}\n\nexport interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {\n  /**\n   * If true, the footer will be expanded.\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  /** src for the main content iframe */\n  frameurl: string;\n  /** Footer of the shell */\n  footer: FooterProps;\n  /** Ref for the shell */\n  ref?: Ref<HTMLElement>;\n}\n"]}

package/lib/index.d.ts

@@ -1,5 +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

@@ -1 +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,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC"}
+{"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

@@ -1,6 +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

@@ -1 +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,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 PreviewShell } from './components/PreviewShell';\nexport * from './components/PreviewShell';\n"]}
+{"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": "3.0.0-dev.28.0",
+  "version": "3.0.0-dev.29.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.28.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.29.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",