@pega/cosmos-react-build 2.0.0-dev.9.4 → 2.0.0-rc.4

package/lib/components/PageTemplates/PageTemplates.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledLabel } from '@pega/cosmos-react-core';
+import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+import { StyledRegions, StyledRegion, StyledContent } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+registerIcon(nodesDownIcon, informationIcon);
+const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const StyledInfoPopover = styled(Popover) `
+  max-width: 60ch;
+  overflow-wrap: break-word;
+`;
+const StyledMetaFields = styled.dl `
+  dd,
+  dt {
+    display: inline;
+  }
+`;
+export const StyledBranch = styled.div(({ theme }) => {
+    return css `
+    border: 0.0625rem solid ${theme.base.colors.gray.light};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    padding: calc(0.5 * ${theme.base.spacing});
+    max-width: 100%;
+    overflow: hidden;
+  `;
+});
+StyledBranch.defaultProps = defaultThemeProp;
+const StyledHeaderContent = styled(SummaryItem) `
+  ${StyledSummaryItemActions} {
+    align-self: start;
+  }
+`;
+export const StyledPage = styled.div(({ theme }) => {
+    return css `
+    ${StyledContent} {
+      margin: 0 calc(2 * ${theme.base.spacing});
+    }
+    ${StyledRegions} {
+      overflow: hidden;
+      padding: 0;
+      grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+      ${StyledRegion} {
+        height: 100%;
+      }
+    }
+
+    ${StyledTabPanel} {
+      height: 100%;
+    }
+  `;
+});
+const MetaFields = ({ metadata }) => {
+    return (_jsx(Flex, { container: { wrap: 'wrap', colGap: 1, rowGap: 0.25 }, as: StyledMetaFields, children: metadata.map(meta => {
+            return (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'dt', children: [meta.name, _jsx("span", { "aria-hidden": 'true', children: ": " }, void 0)] }, void 0), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value }, void 0)] }, meta.id));
+        }) }, void 0));
+};
+const Branch = ({ branchName, status }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledBranch, children: [status && (_jsx(Flex, { item: { shrink: 0 }, as: Status, variant: status.type, children: status.label }, void 0)), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }, void 0), branchName && _jsx(StyledTextWithEllipsis, { children: branchName }, void 0)] }, void 0));
+};
+const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, status }) => {
+    const [open, setOpen] = useState(false);
+    const [popoverEl, setPopoverRef] = useElement();
+    const [buttonEl, setButtonEl] = useElement();
+    const t = useI18n();
+    const { rtl } = useDirection();
+    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
+        if (open)
+            setOpen(false);
+    });
+    useEffect(() => {
+        const closePopover = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setOpen(false);
+                if (e.currentTarget === popoverEl) {
+                    e.stopPropagation();
+                    buttonEl?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', closePopover);
+        popoverEl?.addEventListener('keydown', closePopover);
+        return () => {
+            document.removeEventListener('keydown', closePopover);
+            popoverEl?.removeEventListener('keydown', closePopover);
+        };
+    }, [popoverEl]);
+    return (_jsx(StyledHeaderContent, { container: { rowGap: 0.5 }, primary: _jsxs(Flex, { container: { alignItems: 'start', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', children: title }, void 0), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }, void 0), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description }, void 0)), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields }, void 0)] }, void 0), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+                                                    setOpen(false);
+                                                    additionalInfo.onEdit?.(e);
+                                                }, children: t('edit_details') }, void 0))] }, void 0) }, void 0)] }, void 0))] }, void 0), branchName && status && _jsx(Branch, { branchName: branchName, status: status }, void 0)] }, void 0), secondary: metadata && _jsx(MetaFields, { metadata: metadata }, void 0), actions: actions }, void 0));
+};
+export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
+    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), tabs: tabs, ref: ref, scrollContent: true, a: a }, void 0));
+});
+export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
+    return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), scrollContent: true, a: a, ref: ref }, void 0));
+});
+//# sourceMappingURL=PageTemplates.js.map

package/lib/components/PageTemplates/PageTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  FC,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport {\n  StyledRegions,\n  StyledRegion,\n  StyledContent\n} from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  branchName?: string;\n  status?: { type?: StatusProps['variant']; label: string };\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledMetaFields = styled.dl`\n  dd,\n  dt {\n    display: inline;\n  }\n`;\n\nexport const StyledBranch = styled.div(({ theme }) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.colors.gray.light};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(0.5 * ${theme.base.spacing});\n    max-width: 100%;\n    overflow: hidden;\n  `;\n});\n\nStyledBranch.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(({ theme }) => {\n  return css`\n    ${StyledContent} {\n      margin: 0 calc(2 * ${theme.base.spacing});\n    }\n    ${StyledRegions} {\n      overflow: hidden;\n      padding: 0;\n      grid-template-rows: repeat(auto-fit, minmax(0, 1fr));\n      ${StyledRegion} {\n        height: 100%;\n      }\n    }\n\n    ${StyledTabPanel} {\n      height: 100%;\n    }\n  `;\n});\n\nconst MetaFields: FC<{ metadata: NonNullable<PageHeaderProps['metadata']> }> = ({ metadata }) => {\n  return (\n    <Flex container={{ wrap: 'wrap', colGap: 1, rowGap: 0.25 }} as={StyledMetaFields}>\n      {metadata.map(meta => {\n        return (\n          <div key={meta.id}>\n            <StyledLabel as='dt'>\n              {meta.name}\n              <span aria-hidden='true'>: </span>\n            </StyledLabel>\n            <Text variant='secondary' as='dd'>\n              {meta.value}\n            </Text>\n          </div>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst Branch: FC<Pick<PageHeaderProps, 'branchName' | 'status'>> = ({ branchName, status }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledBranch}>\n      {status && (\n        <Flex item={{ shrink: 0 }} as={Status} variant={status.type}>\n          {status.label}\n        </Flex>\n      )}\n      <Flex item={{ shrink: 0 }} as={Icon} name='nodes-down' />\n      {branchName && <StyledTextWithEllipsis>{branchName}</StyledTextWithEllipsis>}\n    </Flex>\n  );\n};\n\nconst PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  branchName,\n  status\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  return (\n    <StyledHeaderContent\n      container={{ rowGap: 0.5 }}\n      primary={\n        <Flex container={{ alignItems: 'start', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1'>{title}</StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <Text variant='h3'>{additionalInfo.title}</Text>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {branchName && status && <Branch branchName={branchName} status={status} />}\n        </Flex>\n      }\n      secondary={metadata && <MetaFields metadata={metadata} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n        a={a}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}

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

@@ -0,0 +1,5 @@
+export { OneColumnPage } from './PageTemplates';
+export { TabbedPage } from './PageTemplates';
+export { default as GalleryPage } from './GalleryPage';
+export { GalleryPageProps } from './GalleryPage';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -0,0 +1,4 @@
+export { OneColumnPage } from './PageTemplates';
+export { TabbedPage } from './PageTemplates';
+export { default as GalleryPage } from './GalleryPage';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { default as GalleryPage } from './GalleryPage';\nexport { GalleryPageProps } from './GalleryPage';\n"]}

package/lib/components/SummaryCard/SummaryCard.d.ts

@@ -0,0 +1,16 @@
+import { FC, MouseEvent } from 'react';
+import { Text, Card, MetaListProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { VisualProps } from '../Visual';
+export interface SummaryCardProps extends NoChildrenProp {
+    id: string;
+    title: string;
+    description?: string;
+    onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;
+    meta: MetaListProps['items'];
+    visual?: VisualProps;
+}
+export declare const StyledTitle: typeof Text;
+export declare const StyledSummaryCard: typeof Card;
+declare const SummaryCard: FC<SummaryCardProps>;
+export default SummaryCard;
+//# sourceMappingURL=SummaryCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAarC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryCard/SummaryCard.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Text, Flex, MetaList, Card, defaultThemeProp } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
+import { StyledDescription } from '../PageTemplates/GalleryPage.styles';
+import Visual, { StyledVisualContainer } from '../Visual';
+export const StyledTitle = styled(Text) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const StyledSummaryCard = styled(Card)(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    &:hover,
+    &:focus {
+      cursor: pointer;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    ${StyledVisualContainer} {
+      flex-shrink: 0;
+    }
+  `;
+});
+StyledSummaryCard.defaultProps = defaultThemeProp;
+const SummaryCard = ({ id, title, description, visual, meta, onClick }) => {
+    return (_jsxs(BareRoleButton, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledTitle, { variant: 'h3', children: title }, void 0)] }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }, void 0) }, void 0), _jsx(MetaList, { items: meta, wrapItems: false }, void 0)] }, id));
+};
+export default SummaryCard;
+//# sourceMappingURL=SummaryCard.js.map

package/lib/components/SummaryCard/SummaryCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,MAAM,EAAE,EAAe,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAWvE,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;oBAItB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,qBAAqB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAe,YAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,iBAAiB,cAAE,WAAW,WAAqB,WAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,WAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  defaultThemeProp,\n  MetaListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\nimport Visual, { VisualProps, StyledVisualContainer } from '../Visual';\n\nexport interface SummaryCardProps extends NoChildrenProp {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: VisualProps;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledVisualContainer} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <BareRoleButton\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Visual {...visual} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }}>\n        <StyledDescription>{description}</StyledDescription>\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </BareRoleButton>\n  );\n};\n\nexport default SummaryCard;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './SummaryCard';
+export * from './SummaryCard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/lib/components/SummaryCard/index.js

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

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

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

package/lib/components/Visual/Visual.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ImageProps, IconProps, RequiredByKey } from '@pega/cosmos-react-core';
+interface IconWithColor extends IconProps {
+    bgColor?: string;
+    color?: string;
+}
+interface VisualPropsInterface {
+    /** displays the image */
+    image?: ImageProps;
+    /** displays icon if image is not available */
+    icon?: IconWithColor;
+}
+export declare type VisualProps = RequiredByKey<VisualPropsInterface, 'icon'> | RequiredByKey<VisualPropsInterface, 'image'>;
+export declare const StyledVisualContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Visual: FC<VisualProps>;
+export default Visual;
+//# sourceMappingURL=Visual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.d.ts","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAEL,UAAU,EACV,SAAS,EAMT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,UAAU,aAAc,SAAQ,SAAS;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAE5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,oBAAY,WAAW,GACnB,aAAa,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAC3C,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAWhC,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAmB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Visual/Visual.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Image, Icon, Flex, useTheme, StyledIcon, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledVisualContainer = styled.div(({ theme }) => {
+    return css `
+    width: 2rem;
+    height: 2rem;
+    border-radius: ${theme.base['border-radius']};
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    ${StyledIcon} {
+      color: var(--fg-color);
+    }
+  `;
+});
+StyledVisualContainer.defaultProps = defaultThemeProp;
+const Visual = ({ image, icon }) => {
+    const theme = useTheme();
+    const color = (icon && icon.color) || theme.base.colors.white;
+    const bgColor = (icon && icon.bgColor) || readableColor(color);
+    return (_jsxs(Flex, { as: StyledVisualContainer, container: { justify: 'center', alignItems: 'center' }, style: {
+            '--bg-color': bgColor,
+            '--fg-color': color
+        }, children: [image && image.src && _jsx(Image, { src: image.src, alt: image.alt }, void 0), icon && icon.name && _jsx(Icon, { name: icon.name }, void 0)] }, void 0));
+};
+export default Visual;
+//# sourceMappingURL=Visual.js.map

package/lib/components/Visual/Visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.js","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,KAAK,EAGL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAoBjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;qBAGS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;MAG1C,UAAU;;;GAGb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,GAAoB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,KAAK,EACH;YACE,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,KAAK;SACH,aAGnB,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,WAAI,EAC/D,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAI,YAC1C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { CSSProperties, FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Image,\n  ImageProps,\n  IconProps,\n  Icon,\n  Flex,\n  useTheme,\n  StyledIcon,\n  defaultThemeProp,\n  RequiredByKey\n} from '@pega/cosmos-react-core';\n\ninterface IconWithColor extends IconProps {\n  bgColor?: string;\n  color?: string;\n}\n\ninterface VisualPropsInterface {\n  // visual: ImageProps | (IconProps & { color?: string; bgColor?: string });\n  /** displays the image */\n  image?: ImageProps;\n\n  /** displays icon if image is not available */\n  icon?: IconWithColor;\n}\n\nexport type VisualProps =\n  | RequiredByKey<VisualPropsInterface, 'icon'>\n  | RequiredByKey<VisualPropsInterface, 'image'>;\n\nexport const StyledVisualContainer = styled.div(({ theme }) => {\n  return css`\n    width: 2rem;\n    height: 2rem;\n    border-radius: ${theme.base['border-radius']};\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    ${StyledIcon} {\n      color: var(--fg-color);\n    }\n  `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nconst Visual: FC<VisualProps> = ({ image, icon }) => {\n  const theme = useTheme();\n  const color = (icon && icon.color) || theme.base.colors.white;\n  const bgColor = (icon && icon.bgColor) || readableColor(color);\n  return (\n    <Flex\n      as={StyledVisualContainer}\n      container={{ justify: 'center', alignItems: 'center' }}\n      style={\n        {\n          '--bg-color': bgColor,\n          '--fg-color': color\n        } as CSSProperties\n      }\n    >\n      {image && image.src && <Image src={image.src} alt={image.alt} />}\n      {icon && icon.name && <Icon name={icon.name} />}\n    </Flex>\n  );\n};\n\nexport default Visual;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Visual';
+export * from './Visual';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Visual/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC"}

package/lib/components/Visual/index.js

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

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

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

package/lib/components/Workbench/ConfigurationPanel.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfigurationPanelProps } from './Workbench.types';
+declare const ConfigurationPanel: FC<ConfigurationPanelProps>;
+export default ConfigurationPanel;
+//# sourceMappingURL=ConfigurationPanel.d.ts.map

package/lib/components/Workbench/ConfigurationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,MAAM,OAAO,CAAC;AAanD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA4CnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/Workbench/ConfigurationPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { Flex, Text, Button, Icon, useElement, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
+import { StyledPanel } from './Workbench.styles';
+const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
+    const [buttonEl, setButtonEl] = useElement();
+    const t = useI18n();
+    const onKeyDown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            onDismiss();
+    }, [onDismiss]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
+    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, min: '0', max: '25rem', onAfterExpand: () => buttonEl?.focus(), children: _jsxs(Flex, { container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: header }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, ref: setButtonEl, "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content] }, void 0) }, void 0));
+};
+export default ConfigurationPanel;
+//# sourceMappingURL=ConfigurationPanel.js.map

package/lib/components/Workbench/ConfigurationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ;YAAE,SAAS,EAAE,CAAC;IACpC,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,KAAC,cAAc,IACb,EAAE,EAAE,WAAW,EACf,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,OAAO,EACX,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,YAEtC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,WAAQ,EAClC,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,EAClB,GAAG,EAAE,WAAW,gBACJ,CAAC,CAAC,OAAO,CAAC,YAEtB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YACJ,EACN,OAAO,YACH,WACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC, useCallback, useEffect } from 'react';\n\nimport {\n  Flex,\n  Text,\n  Button,\n  Icon,\n  useElement,\n  useI18n,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledPanel } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') onDismiss();\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  return (\n    <ExpandCollapse\n      as={StyledPanel}\n      dimension='width'\n      collapsed={!open}\n      min='0'\n      max='25rem'\n      onAfterExpand={() => buttonEl?.focus()}\n    >\n      <Flex container={{ pad: 2, direction: 'column', gap: 1 }}>\n        <Flex container={{ justify: 'between', alignItems: 'center' }}>\n          <Text variant='h3'>{header}</Text>\n          <Button\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            ref={setButtonEl}\n            aria-label={t('close')}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default ConfigurationPanel;\n"]}

package/lib/components/Workbench/Toolbar.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ToolbarProps, UtilityPanelProps } from './Workbench.types';
+interface UtilityPanelSelectorProps {
+    options: Pick<UtilityPanelProps, 'id' | 'title' | 'icon'>[];
+    onToggle: (panelId?: UtilityPanelProps['id']) => void;
+    currentPanelId: UtilityPanelProps['id'] | undefined;
+}
+interface ZoomProps {
+    zoomLevel: number;
+    onZoomLevelChange: (value: number) => void;
+}
+declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps>;
+export default Toolbar;
+//# sourceMappingURL=Toolbar.d.ts.map

package/lib/components/Workbench/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,UAAU,yBAAyB;IACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5D,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,yBAAyB,GAAG,SAAS,CA6ErE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Workbench/Toolbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, NumberInput, Button, useI18n } from '@pega/cosmos-react-core';
+import { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';
+const Toolbar = ({ zoom = false, zoomLevel, onZoomLevelChange, options, currentPanelId, onToggle, toolbarActions: { undo, redo } = {} }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { as: StyledToolbar, container: { justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, as: StyledPanelToggleWrapper, children: options.map(panelDef => {
+                            const selected = panelDef.id === currentPanelId;
+                            return (_jsx(Button, { variant: 'simple', as: UtilityPanelToggle, icon: true, "aria-selected": selected, onClick: () => {
+                                    onToggle(selected ? undefined : panelDef.id);
+                                }, label: t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title]), children: _jsx(Icon, { name: panelDef.icon }, void 0) }, panelDef.id));
+                        }) }, void 0), undo && (_jsx(Button, { label: t('undo'), variant: 'simple', icon: true, onClick: undo.onClick, disabled: undo.disabled, children: _jsx(Icon, { name: 'arrow-bend-left' }, void 0) }, void 0)), redo && (_jsx(Button, { label: t('redo'), variant: 'simple', icon: true, onClick: redo.onClick, disabled: redo.disabled, children: _jsx(Icon, { name: 'arrow-bend-right' }, void 0) }, void 0))] }, void 0), _jsx(Flex, { container: { alignItems: 'center' }, children: zoom && (_jsx(NumberInput, { variant: 'stepper', label: t('zoom_level'), labelHidden: true, value: zoomLevel.toString(), onChange: value => onZoomLevelChange(Number(value)), showDecimal: false, showGroupSeparators: false, step: 25, unit: '%', unitPlacement: 'after', min: 25, max: 300 }, void 0)) }, void 0)] }, void 0));
+};
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/lib/components/Workbench/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEnF,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAcjG,MAAM,OAAO,GAA6D,CAAC,EACzE,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,cAAc,EACd,QAAQ,EACR,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EACkB,EAAE,EAAE;IACzD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACxD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,wBAAwB,YACpE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;4BACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,cAAc,CAAC;4BAChD,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,kBAAkB,EACtB,IAAI,yBACW,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;oCACZ,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gCAC/C,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAGtE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,WAAI,IAFxB,QAAQ,CAAC,EAAE,CAGT,CACV,CAAC;wBACJ,CAAC,CAAC,WACG,EACN,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,WAAG,WACxB,CACV,EACA,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,WACzB,CACV,YACI,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,IAAI,IAAI,CACP,KAAC,WAAW,IACV,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,WAAW,QACX,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACnD,WAAW,EAAE,KAAK,EAClB,mBAAmB,EAAE,KAAK,EAC1B,IAAI,EAAE,EAAE,EACR,IAAI,EAAC,GAAG,EACR,aAAa,EAAC,OAAO,EACrB,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,WACR,CACH,WACI,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Icon, NumberInput, Button, useI18n } from '@pega/cosmos-react-core';\n\nimport { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';\nimport { ToolbarProps, UtilityPanelProps } from './Workbench.types';\n\ninterface UtilityPanelSelectorProps {\n  options: Pick<UtilityPanelProps, 'id' | 'title' | 'icon'>[];\n  onToggle: (panelId?: UtilityPanelProps['id']) => void;\n  currentPanelId: UtilityPanelProps['id'] | undefined;\n}\n\ninterface ZoomProps {\n  zoomLevel: number;\n  onZoomLevelChange: (value: number) => void;\n}\n\nconst Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps> = ({\n  zoom = false,\n  zoomLevel,\n  onZoomLevelChange,\n  options,\n  currentPanelId,\n  onToggle,\n  toolbarActions: { undo, redo } = {}\n}: ToolbarProps & UtilityPanelSelectorProps & ZoomProps) => {\n  const t = useI18n();\n\n  return (\n    <Flex as={StyledToolbar} container={{ justify: 'between' }}>\n      <Flex container={{ alignItems: 'center' }}>\n        <Flex container={{ alignItems: 'center' }} as={StyledPanelToggleWrapper}>\n          {options.map(panelDef => {\n            const selected = panelDef.id === currentPanelId;\n            return (\n              <Button\n                variant='simple'\n                as={UtilityPanelToggle}\n                icon\n                aria-selected={selected}\n                onClick={() => {\n                  onToggle(selected ? undefined : panelDef.id);\n                }}\n                label={t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title])}\n                key={panelDef.id}\n              >\n                <Icon name={panelDef.icon} />\n              </Button>\n            );\n          })}\n        </Flex>\n        {undo && (\n          <Button\n            label={t('undo')}\n            variant='simple'\n            icon\n            onClick={undo.onClick}\n            disabled={undo.disabled}\n          >\n            <Icon name='arrow-bend-left' />\n          </Button>\n        )}\n        {redo && (\n          <Button\n            label={t('redo')}\n            variant='simple'\n            icon\n            onClick={redo.onClick}\n            disabled={redo.disabled}\n          >\n            <Icon name='arrow-bend-right' />\n          </Button>\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center' }}>\n        {zoom && (\n          <NumberInput\n            variant='stepper'\n            label={t('zoom_level')}\n            labelHidden\n            value={zoomLevel.toString()}\n            onChange={value => onZoomLevelChange(Number(value))}\n            showDecimal={false}\n            showGroupSeparators={false}\n            step={25}\n            unit='%'\n            unitPlacement='after'\n            min={25}\n            max={300}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Toolbar;\n"]}

package/lib/components/Workbench/UtilityPanel.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { UtilityPanelProps } from './Workbench.types';
+declare const UtilityPanel: FC<UtilityPanelProps & {
+    open: boolean;
+}>;
+export default UtilityPanel;
+//# sourceMappingURL=UtilityPanel.d.ts.map

package/lib/components/Workbench/UtilityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/UtilityPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAU,MAAM,OAAO,CAAC;AAKnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAuB3D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Workbench/UtilityPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { ExpandCollapse, Text, Flex, getFocusables } from '@pega/cosmos-react-core';
+import { StyledPanel } from './Workbench.styles';
+const UtilityPanel = ({ content, title, open }) => {
+    const ref = useRef(null);
+    return (_jsx(ExpandCollapse, { dimension: 'width', collapsed: !open, as: StyledPanel, min: '0', max: '14rem', onBeforeExpand: () => {
+            getFocusables(ref)[0]?.focus();
+        }, children: _jsxs(Flex, { container: { pad: 2, gap: 1, direction: 'column' }, ref: ref, children: [_jsx(Text, { variant: 'h3', children: title }, void 0), content] }, void 0) }, void 0));
+};
+export default UtilityPanel;
+//# sourceMappingURL=UtilityPanel.js.map

package/lib/components/Workbench/UtilityPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/UtilityPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,MAAM,YAAY,GAA8C,CAAC,EAC/D,OAAO,EACP,KAAK,EACL,IAAI,EACkC,EAAE,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAChB,EAAE,EAAE,WAAW,EACf,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,OAAO,EACX,cAAc,EAAE,GAAG,EAAE;YACnB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aAChE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EAChC,OAAO,YACH,WACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, useRef } from 'react';\n\nimport { ExpandCollapse, Text, Flex, getFocusables } from '@pega/cosmos-react-core';\n\nimport { StyledPanel } from './Workbench.styles';\nimport { UtilityPanelProps } from './Workbench.types';\n\nconst UtilityPanel: FC<UtilityPanelProps & { open: boolean }> = ({\n  content,\n  title,\n  open\n}: UtilityPanelProps & { open: boolean }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  return (\n    <ExpandCollapse\n      dimension='width'\n      collapsed={!open}\n      as={StyledPanel}\n      min='0'\n      max='14rem'\n      onBeforeExpand={() => {\n        getFocusables(ref)[0]?.focus();\n      }}\n    >\n      <Flex container={{ pad: 2, gap: 1, direction: 'column' }} ref={ref}>\n        <Text variant='h3'>{title}</Text>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default UtilityPanel;\n"]}

package/lib/components/Workbench/Workbench.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAI7D,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA6DhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Workbench/Workbench.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useRef } from 'react';
+import { Grid } from '@pega/cosmos-react-core';
+import Toolbar from './Toolbar';
+import { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';
+import ConfigurationPanel from './ConfigurationPanel';
+import UtilityPanel from './UtilityPanel';
+const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel, toolbar, initiallyVisiblePanelId }, ref) => {
+    const [zoomValue, setZoomValue] = useState(100);
+    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState(initiallyVisiblePanelId);
+    const panelContentRef = useRef(utilityPanels.find(panel => panel.id === initiallyVisiblePanelId));
+    const onToggle = (panelId) => {
+        setCurrentlyOpenPanelId(panelId);
+        if (panelId)
+            panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);
+    };
+    return (_jsxs(Grid, { container: {
+            cols: 'min-content minmax(10rem, 1fr) min-content',
+            rows: 'auto minmax(0, 1fr)',
+            areas: '"header header header" "utility main configuration"'
+        }, as: StyledWorkbench, ref: ref, children: [_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, zoomLevel: zoomValue, onZoomLevelChange: setZoomValue, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }, void 0) }, void 0), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }, void 0) }, void 0)), _jsx(Grid, { item: { area: 'main' }, children: _jsx(StyledMain, { children: _jsx(ZoomContainer, { zoomLevel: zoomValue / 100, children: children }, void 0) }, void 0) }, void 0), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }, void 0) }, void 0)] }, void 0));
+});
+export default Workbench;
+//# sourceMappingURL=Workbench.js.map

package/lib/components/Workbench/Workbench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,SAAS,GAAsC,UAAU,CAC7D,CACE,EACE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,kBAAkB,EAClB,OAAO,EACP,uBAAuB,EACS,EAClC,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,uBAAuB,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,CAC5B,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,uBAAuB,CAAC,CAClE,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,OAAO;YAAE,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAC3F,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4CAA4C;YAClD,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qDAAqD;SAC7D,EACD,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,YAAY,EAC/B,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,WACpC,WACG,EACN,eAAe,CAAC,OAAO,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAC7B,KAAC,YAAY,OAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,oBAAoB,WAAI,WACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,UAAU,cACT,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAG,GAAG,YAAG,QAAQ,WAAiB,WAC1D,WACR,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,WAAI,WACzC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef } from 'react';\n\nimport { ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';\nimport { UtilityPanelProps, WorkbenchProps } from './Workbench.types';\nimport ConfigurationPanel from './ConfigurationPanel';\nimport UtilityPanel from './UtilityPanel';\n\nconst Workbench: FC<WorkbenchProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      utilityPanels = [],\n      configurationPanel,\n      toolbar,\n      initiallyVisiblePanelId\n    }: PropsWithoutRef<WorkbenchProps>,\n    ref: WorkbenchProps['ref']\n  ) => {\n    const [zoomValue, setZoomValue] = useState(100);\n\n    const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState<\n      UtilityPanelProps['id'] | undefined\n    >(initiallyVisiblePanelId);\n\n    const panelContentRef = useRef<UtilityPanelProps | undefined>(\n      utilityPanels.find(panel => panel.id === initiallyVisiblePanelId)\n    );\n    const onToggle = (panelId?: UtilityPanelProps['id']) => {\n      setCurrentlyOpenPanelId(panelId);\n      if (panelId) panelContentRef.current = utilityPanels.find(panel => panel.id === panelId);\n    };\n\n    return (\n      <Grid\n        container={{\n          cols: 'min-content minmax(10rem, 1fr) min-content',\n          rows: 'auto minmax(0, 1fr)',\n          areas: '\"header header header\" \"utility main configuration\"'\n        }}\n        as={StyledWorkbench}\n        ref={ref}\n      >\n        <Grid item={{ area: 'header' }}>\n          <Toolbar\n            {...toolbar}\n            zoomLevel={zoomValue}\n            onZoomLevelChange={setZoomValue}\n            options={utilityPanels}\n            onToggle={onToggle}\n            currentPanelId={currentlyOpenPanelId}\n          />\n        </Grid>\n        {panelContentRef.current && (\n          <Grid item={{ area: 'utility' }}>\n            <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n          </Grid>\n        )}\n        <Grid item={{ area: 'main' }}>\n          <StyledMain>\n            <ZoomContainer zoomLevel={zoomValue / 100}>{children}</ZoomContainer>\n          </StyledMain>\n        </Grid>\n        <Grid item={{ area: 'configuration' }}>\n          <ConfigurationPanel {...configurationPanel} />\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default Workbench;\n"]}

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

@@ -0,0 +1,10 @@
+export declare const StyledPanelToggleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const UtilityPanelToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledToolbar: 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 StyledWorkbench: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ZoomContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    zoomLevel: number;
+}, never>;
+//# sourceMappingURL=Workbench.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAmB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA8BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAItB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,aAAa;eAA2B,MAAM;SAIzD,CAAC"}

package/lib/components/Workbench/Workbench.styles.js

@@ -0,0 +1,72 @@
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';
+export const StyledPanelToggleWrapper = styled.div `
+  height: 100%;
+`;
+StyledPanelToggleWrapper.defaultProps = defaultThemeProp;
+export const UtilityPanelToggle = styled(Button)(props => {
+    const { theme: { base: { colors }, components: { link: { color: linkColor } } } } = props;
+    return css `
+    background-color: transparent;
+    color: ${colors.slate['extra-dark']};
+
+    &[aria-selected='true'] {
+      background-color: ${colors.blue['extra-light']};
+      color: ${linkColor};
+    }
+  `;
+});
+UtilityPanelToggle.defaultProps = defaultThemeProp;
+export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, colors } } }) => {
+    return css `
+      height: 2.5rem;
+      padding: 0 calc(2 * ${spacing});
+      background-color: ${palette['primary-background']};
+      border-bottom: 0.0625rem solid ${colors.gray['extra-light']};
+
+      ${StyledStepperInput} {
+        width: 8rem;
+      }
+
+      ${StyledPanelToggleWrapper}:empty {
+        display: none;
+      }
+
+      ${StyledPanelToggleWrapper}:not(:last-child) {
+        ::after {
+          content: '';
+          margin: 0 calc(2 * ${spacing});
+          height: 80%;
+          border: 0.0625rem solid ${colors.gray['extra-light']};
+        }
+      }
+    `;
+});
+StyledToolbar.defaultProps = defaultThemeProp;
+export const StyledMain = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledWorkbench = styled.div `
+  height: 100%;
+  min-width: 50rem;
+`;
+StyledWorkbench.defaultProps = defaultThemeProp;
+export const StyledPanel = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    height: 100%;
+    overflow-y: auto;
+  `;
+});
+StyledPanel.defaultProps = defaultThemeProp;
+export const ZoomContainer = styled.div(({ zoomLevel }) => {
+    return css `
+    transform: scale(${zoomLevel});
+  `;
+});
+ZoomContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Workbench.styles.js.map