npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-build 3.0.0-dev.3.0 → 3.0.0-dev.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (274) hide show

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

	@@ -1 +1 @@
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 StyledRegion\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 { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\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(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n ${StyledRegion} > ${StyledWorkbench},\n ${StyledTabPanel} > ${StyledWorkbench} {\n position: absolute;\n width: calc(100% - calc(4 * ${spacing}));\n }\n `;\n }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\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"]}
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 MouseEvent,\n useMemo,\n useRef\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 StyledRegion,\n MetaList,\n StyledBreadcrumbs,\n StyledPageHeader,\n useAfterInitialEffect\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 { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' \| 'actions'> {\n metadata?: FieldValueListProps['fields'];\n status?: { type: StatusProps['variant']; label: string };\n titleTag?: 'h1' \| 'h2';\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 line-height: 1.15;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n max-width: 60ch;\n overflow-wrap: break-word;\n`;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n ${StyledSummaryItemActions} {\n align-self: start;\n }\n`;\n\nexport const StyledPage = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n }\n }\n }) => {\n return css`\n background: ${primaryBackground};\n height: 100%;\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${StyledRegion} ${StyledWorkbench} {\n position: absolute;\n width: 100%;\n margin: 0 calc(-2 * ${spacing});\n }\n\n ${StyledRegion} ${StyledForm} {\n max-width: 80ch;\n }\n\n ${StyledPageHeader} > ${StyledBreadcrumbs} {\n margin-block-end: 0;\n }\n `;\n }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n title,\n metadata,\n additionalInfo,\n actions,\n status,\n titleTag\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 const popoverTitleRef = useRef<HTMLSpanElement>(null);\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 useAfterInitialEffect(() => {\n if (open && popoverEl) {\n if (popoverTitleRef.current) {\n popoverTitleRef.current.focus();\n } else {\n buttonEl?.focus();\n }\n }\n }, [open, popoverEl]);\n\n const metaListItems = useMemo(\n () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n [metadata]\n );\n\n return (\n <StyledHeaderContent\n container\n primary={\n <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n {title}\n </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 <StyledDialogTitle variant='h3' tabIndex={-1} ref={popoverTitleRef}>\n {additionalInfo.title}\n </StyledDialogTitle>\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 {status && <Status variant={status.type}>{status.label}</Status>}\n </Flex>\n }\n secondary={metaListItems && <MetaList items={metaListItems} />}\n actions={actions}\n />\n );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, ...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 />\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/SummaryCard/SummaryCard.d.ts CHANGED Viewed

@@ -1,13 +1,12 @@
 import { FC, MouseEvent } from 'react';
-import { Text, Card, MetaListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { VisualProps } from '../Visual';
+import { Text, Card, MetaListProps, NoChildrenProp, OmitStrict, AvatarProps } from '@pega/cosmos-react-core';
 export interface SummaryCardProps extends NoChildrenProp {
     id: string;
     title: string;
     description?: string;
     onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;
     meta: MetaListProps['items'];
-    visual?: VisualProps;
+    visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;
 }
 export declare const StyledTitle: typeof Text;
 export declare const StyledSummaryCard: typeof Card;

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

	@@ -1 +1 @@
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"}
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,EAGJ,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAKjC,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,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxE;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 CHANGED Viewed

@@ -1,9 +1,8 @@
 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 { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, StyledAvatar } 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;
@@ -18,14 +17,14 @@ export const StyledSummaryCard = styled(Card)(({ theme }) => {
       box-shadow: ${theme.base.shadow.focus};
     }
-    ${StyledVisualContainer} {
+    ${StyledAvatar} {
       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));
+    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(Avatar, { ...visual, shape: 'squircle', name: title }), _jsx(StyledTitle, { variant: 'h3', children: title })] }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }) }), _jsx(MetaList, { items: meta, wrapItems: false })] }, id));
 };
 export default SummaryCard;
 //# sourceMappingURL=SummaryCard.js.map

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

	@@ -1 +1 @@
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"]}
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,MAAM,EACN,gBAAgB,EAKhB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAWxE,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,YAAY;;;GAGf,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,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,GAAI,EAC/D,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAe,IAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,iBAAiB,cAAE,WAAW,GAAqB,GAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,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 Avatar,\n defaultThemeProp,\n MetaListProps,\n NoChildrenProp,\n OmitStrict,\n AvatarProps,\n StyledAvatar\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\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?: OmitStrict<AvatarProps, 'name' \| 'shape' \| 'size' \| 'status'>;\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 ${StyledAvatar} {\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 && <Avatar {...visual} shape='squircle' name={title} />}\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/Workbench/ConfigurationPanel.d.ts.map CHANGED Viewed

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

package/lib/components/Workbench/ConfigurationPanel.js CHANGED Viewed

@@ -1,21 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { Flex, Button, Icon, useElement, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
-import { StyledPanel, StyledTextWithEllipsis } from './Workbench.styles';
+import { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';
+import { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } 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(StyledTextWithEllipsis, { variant: 'h3', children: header }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, ref: setButtonEl, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content] }, void 0) }, void 0));
+    useEscape(onDismiss);
+    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, children: _jsxs(Flex, { as: StyledPanelContent, container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: header }), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, label: t('close_configuration_panel'), children: _jsx(Icon, { name: 'times' }) })] }), content] }) }));
 };
 export default ConfigurationPanel;
 //# sourceMappingURL=ConfigurationPanel.js.map

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

	@@ -1 +1 @@
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,EAAE,~~IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,~~UAAU~~,EAAE,~~OAAO~~,EAAE,~~cAAc~~,EAAE,MAAM,yBAAyB,CAAC;~~AAElG~~,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;~~AAGzE~~,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,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,~~WAA0B~~,EACtE,KAAC,MAAM,~~IACL~~,OAAO,EAAC,QAAQ,~~EAChB~~,IAAI,~~QACJ~~,OAAO,EAAE,SAAS,~~EAClB,GAAG,~~EAAE,~~WAAW,EAChB,~~KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,~~YAErC~~,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 { Flex, Button, Icon, ~~useElement,~~ useI18n, ExpandCollapse } from '@pega/cosmos-react-core';\n\nimport { StyledPanel, StyledTextWithEllipsis } 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 <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n <Button\n variant='simple'\n icon\n onClick={onDismiss}~~\n ref={setButtonEl}\n~~ label={t('close_configuration_panel')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n </Flex>\n </ExpandCollapse>\n );\n};\n\nexport default ConfigurationPanel;\n"]}
1	+ {"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAG7F,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,SAAS,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,cAAc,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,IAAI,YACjE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9E,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,sBAAsB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,GAA0B,EACtE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,YACrF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,OAAO,IACH,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Button, Icon, useI18n, ExpandCollapse, useEscape } from '@pega/cosmos-react-core';\n\nimport { StyledPanel, StyledPanelContent, StyledTextWithEllipsis } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n const t = useI18n();\n\n useEscape(onDismiss);\n\n return (\n <ExpandCollapse as={StyledPanel} dimension='width' collapsed={!open}>\n <Flex as={StyledPanelContent} container={{ pad: 2, direction: 'column', gap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <StyledTextWithEllipsis variant='h3'>{header}</StyledTextWithEllipsis>\n <Button variant='simple' icon onClick={onDismiss} label={t('close_configuration_panel')}>\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 CHANGED Viewed

@@ -5,10 +5,6 @@ interface UtilityPanelSelectorProps {
     onToggle: (panelId?: UtilityPanelProps['id']) => void;
     currentPanelId: UtilityPanelProps['id'] | undefined;
 }
-interface ZoomProps {
-    zoomLevel: number;
-    onZoomLevelChange: (value: number) => void;
-}
-declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps>;
+declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps>;
 export default Toolbar;
 //# sourceMappingURL=Toolbar.d.ts.map

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

	@@ -1 +1 @@
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"}
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,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,yBAAyB,CAwDzD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Workbench/Toolbar.js CHANGED Viewed

@@ -1,14 +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 { Flex, Icon, 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 Toolbar = ({ 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));
+    return (_jsx(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 }) }, panelDef.id));
+                    }) }), undo && (_jsx(Button, { label: t('undo'), variant: 'simple', icon: true, onClick: undo.onClick, disabled: undo.disabled, children: _jsx(Icon, { name: 'arrow-bend-left' }) })), redo && (_jsx(Button, { label: t('redo'), variant: 'simple', icon: true, onClick: redo.onClick, disabled: redo.disabled, children: _jsx(Icon, { name: 'arrow-bend-right' }) }))] }) }));
 };
 export default Toolbar;
 //# sourceMappingURL=Toolbar.js.map

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AASjG,MAAM,OAAO,GAAiD,CAAC,EAC7D,OAAO,EACP,cAAc,EACd,QAAQ,EACR,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EACM,EAAE,EAAE;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACxD,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;wBACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,cAAc,CAAC;wBAChD,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,kBAAkB,EACtB,IAAI,yBACW,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;4BAC/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,GAAI,IAFxB,QAAQ,CAAC,EAAE,CAGT,CACV,CAAC;oBACJ,CAAC,CAAC,GACG,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,GAAG,GACxB,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,GAAG,GACzB,CACV,IACI,GACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Icon, 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\nconst Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps> = ({\n options,\n currentPanelId,\n onToggle,\n toolbarActions: { undo, redo } = {}\n}: ToolbarProps & UtilityPanelSelectorProps) => {\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>\n );\n};\n\nexport default Toolbar;\n"]}

package/lib/components/Workbench/UtilityPanel.js CHANGED Viewed

@@ -6,7 +6,7 @@ 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));
+        }, children: _jsxs(Flex, { container: { pad: 2, gap: 1, direction: 'column' }, ref: ref, children: [_jsx(Text, { variant: 'h3', children: title }), content] }) }));
 };
 export default UtilityPanel;
 //# sourceMappingURL=UtilityPanel.js.map

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

	@@ -1 +1 @@
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"]}
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,GAAQ,EAChC,OAAO,IACH,GACQ,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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,~~EAAgE~~,MAAM,OAAO,CAAC;~~AAEzF~~,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,~~CA+DhD~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
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,EAAQ,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAInE,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA2DhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Workbench/Workbench.js CHANGED Viewed

@@ -1,12 +1,11 @@
 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 { Flex, Grid } from '@pega/cosmos-react-core';
 import Toolbar from './Toolbar';
-import { StyledMain, StyledWorkbench, ZoomContainer } from './Workbench.styles';
+import { StyledMain, StyledWorkbench } 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) => {
@@ -18,7 +17,7 @@ const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel
             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, { style: { '--workbench-zoom-level': 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));
+        }, as: StyledWorkbench, ref: ref, children: [(toolbar ?? utilityPanels.length > 0) && (_jsx(Grid, { item: { area: 'header' }, children: _jsx(Toolbar, { ...toolbar, options: utilityPanels, onToggle: onToggle, currentPanelId: currentlyOpenPanelId }) })), panelContentRef.current && (_jsx(Grid, { item: { area: 'utility' }, children: _jsx(UtilityPanel, { ...panelContentRef.current, open: !!currentlyOpenPanelId }) })), _jsx(Grid, { item: { area: 'main' }, children: _jsx(Flex, { as: StyledMain, container: { pad: 2 }, children: children }) }), _jsx(Grid, { item: { area: 'configuration' }, children: _jsx(ConfigurationPanel, { ...configurationPanel }) })] }));
 });
 export default Workbench;
 //# sourceMappingURL=Workbench.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAmB,MAAM,~~EAAiB~~,MAAM,OAAO,CAAC;~~AAEzF~~,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,~~KAAK,~~EAAE,EAAE,~~wBAAwB~~,EAAE,SAAS,~~GAAG~~,GAAG,~~EAAmB~~,~~YACjF~~,QAAQ,~~WACK~~,~~WACL~~,~~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, ~~CSSProperties~~ } 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~~ ~~style~~={{ ~~'--workbench-zoom-level'~~: ~~zoomValue~~ ~~/ 100~~ } ~~as CSSProperties~~}>\n {children}\n ~~</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"]}
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,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEjE,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,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,aAEP,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACxC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,OAAO,OACF,OAAO,EACX,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,oBAAoB,GACpC,GACG,CACR,EACA,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,GAAI,GACtE,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YACxC,QAAQ,GACJ,GACF,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,YACnC,KAAC,kBAAkB,OAAK,kBAAkB,GAAI,GACzC,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useState, forwardRef, PropsWithoutRef, useRef } from 'react';\n\nimport { Flex, ForwardProps, Grid } from '@pega/cosmos-react-core';\n\nimport Toolbar from './Toolbar';\nimport { StyledMain, StyledWorkbench } 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 [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 {(toolbar ?? utilityPanels.length > 0) && (\n <Grid item={{ area: 'header' }}>\n <Toolbar\n {...toolbar}\n options={utilityPanels}\n onToggle={onToggle}\n currentPanelId={currentlyOpenPanelId}\n />\n </Grid>\n )}\n {panelContentRef.current && (\n <Grid item={{ area: 'utility' }}>\n <UtilityPanel {...panelContentRef.current} open={!!currentlyOpenPanelId} />\n </Grid>\n )}\n <Grid item={{ area: 'main' }}>\n <Flex as={StyledMain} container={{ pad: 2 }}>\n {children}\n </Flex>\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 CHANGED Viewed

@@ -5,6 +5,6 @@ export declare const StyledToolbar: import("styled-components").StyledComponent<
 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, {}, never>;
+export declare const StyledPanelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Workbench.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":";~~AAMA~~,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,kBAAkB,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,~~yGA8BzB~~,CAAC;AAIF,eAAO,MAAM,UAAU,~~yGAGtB~~,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,~~aAAa~~,~~yGAEzB~~,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}
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,qOAqB7B,CAAC;AAIH,eAAO,MAAM,aAAa,yGA2BzB,CAAC;AAIF,eAAO,MAAM,UAAU,yGAYtB,CAAC;AAIF,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAIF,eAAO,MAAM,WAAW,yGAMtB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';
-import { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';
 export const StyledPanelToggleWrapper = styled.div `
   height: 100%;
 `;
@@ -20,16 +19,13 @@ export const UtilityPanelToggle = styled(Button)(props => {
   `;
 });
 UtilityPanelToggle.defaultProps = defaultThemeProp;
-export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, colors } } }) => {
+export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette } } }) => {
     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;
-      }
+      border-top: 0.0625rem solid ${palette['border-line']};
+      border-bottom: 0.0625rem solid ${palette['border-line']};
       ${StyledPanelToggleWrapper}:empty {
         display: none;
@@ -39,17 +35,20 @@ export const StyledToolbar = styled.div(({ theme: { base: { spacing, palette, co
         ::after {
           content: '';
           margin: 0 calc(2 * ${spacing});
-          height: 80%;
-          border: 0.0625rem solid ${colors.gray['extra-light']};
+          height: 100%;
+          border: 0.0625rem solid ${palette['border-line']};
         }
       }
     `;
 });
 StyledToolbar.defaultProps = defaultThemeProp;
-export const StyledMain = styled.div `
-  height: 100%;
-  overflow: auto;
-`;
+export const StyledMain = styled.div(({ theme: { base: { palette } } }) => {
+    return css `
+      height: 100%;
+      overflow: auto;
+      background-color: ${palette['app-background']};
+    `;
+});
 StyledMain.defaultProps = defaultThemeProp;
 export const StyledWorkbench = styled.div `
   height: 100%;
@@ -63,10 +62,10 @@ export const StyledPanel = styled.div(({ theme }) => {
   `;
 });
 StyledPanel.defaultProps = defaultThemeProp;
-export const ZoomContainer = styled.div `
-  transform: scale(var(--workbench-zoom-level));
+export const StyledPanelContent = styled.div `
+  width: 25rem;
 `;
-ZoomContainer.defaultProps = defaultThemeProp;
+StyledPanelContent.defaultProps = defaultThemeProp;
 export const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;

package/lib/components/Workbench/Workbench.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;~~AACnF~~,~~OAAO,EAAE,kBAAkB,EAAE,~~MAAM,~~kEAAkE,~~CAAC~~;AAEtG~~,MAAM,~~CAAC,MAAM,~~wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,~~MAAM~~,~~EAAE,EACnC,~~EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;~~uCAChB~~,~~MAAM~~,CAAC,~~IAAI~~,CAAC,aAAa,CAAC;;~~QAEzD~~,~~kBAAkB;;;;QAIlB,~~wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,~~MAAM~~,CAAC,~~IAAI,CAAC,~~aAAa,CAAC;;;~~KAGzD~~,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;~~CAGnC~~,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,~~aAAa~~,GAAG,MAAM,CAAC,GAAG,CAAA;;~~CAEtC~~,CAAC;AAEF,~~aAAa~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAE9C~~,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\~~nimport { StyledStepperInput } from '@pega/cosmos-react-core/lib/components/Number/NumberInput.styles';\~~n\nexport const StyledPanelToggleWrapper = styled.div`\n height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n const {\n theme: {\n base: { colors, palette },\n components: {\n link: { color: linkColor }\n }\n }\n } = props;\n\n const color = tryCatch(() => readableColor(palette['primary-background']));\n\n return css`\n background-color: transparent;\n color: ${color};\n\n &[aria-selected='true'] {\n background-color: ${colors.blue['extra-light']};\n color: ${linkColor};\n }\n `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n ({\n theme: {\n base: { spacing, palette, ~~colors~~ }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-~~bottom~~: 0.0625rem solid ${~~colors.gray~~['~~extra~~-~~light~~']};\n\n ${~~StyledStepperInput~~} ~~{\n width: 8rem~~;\n }\n\n ${StyledPanelToggleWrapper}:empty {\n display: none;\n }\n\n ${StyledPanelToggleWrapper}:not(:last-child) {\n ::after {\n content: '';\n margin: 0 calc(2 * ${spacing});\n height: 80%;\n border: 0.0625rem solid ${~~colors.gray~~['~~extra~~-~~light~~']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div`\n height: 100%;\n overflow: auto;\n`;\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const ~~ZoomContainer~~ = styled.div`\n ~~transform~~: ~~scale(var(--workbench-zoom-level))~~;\n`;\n\~~nZoomContainer~~.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Workbench.styles.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,GAAG,CAAA;;aAEC,KAAK;;;0BAGQ,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;eACrC,SAAS;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;4BAEc,OAAO;0BACT,OAAO,CAAC,oBAAoB,CAAC;oCACnB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;QAErD,wBAAwB;;;;QAIxB,wBAAwB;;;+BAGD,OAAO;;oCAEF,OAAO,CAAC,aAAa,CAAC;;;KAGrD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Button, Text, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledPanelToggleWrapper = styled.div`\n height: 100%;\n`;\n\nStyledPanelToggleWrapper.defaultProps = defaultThemeProp;\n\nexport const UtilityPanelToggle = styled(Button)(props => {\n const {\n theme: {\n base: { colors, palette },\n components: {\n link: { color: linkColor }\n }\n }\n } = props;\n\n const color = tryCatch(() => readableColor(palette['primary-background']));\n\n return css`\n background-color: transparent;\n color: ${color};\n\n &[aria-selected='true'] {\n background-color: ${colors.blue['extra-light']};\n color: ${linkColor};\n }\n `;\n});\n\nUtilityPanelToggle.defaultProps = defaultThemeProp;\n\nexport const StyledToolbar = styled.div(\n ({\n theme: {\n base: { spacing, palette }\n }\n }) => {\n return css`\n height: 2.5rem;\n padding: 0 calc(2 * ${spacing});\n background-color: ${palette['primary-background']};\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\n\n ${StyledPanelToggleWrapper}:empty {\n display: none;\n }\n\n ${StyledPanelToggleWrapper}:not(:last-child) {\n ::after {\n content: '';\n margin: 0 calc(2 * ${spacing});\n height: 100%;\n border: 0.0625rem solid ${palette['border-line']};\n }\n }\n `;\n }\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 100%;\n overflow: auto;\n background-color: ${palette['app-background']};\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledWorkbench = styled.div`\n height: 100%;\n`;\n\nStyledWorkbench.defaultProps = defaultThemeProp;\n\nexport const StyledPanel = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPanelContent = styled.div`\n width: 25rem;\n`;\n\nStyledPanelContent.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Workbench/Workbench.types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
 import type { Action } from '@pega/cosmos-react-core';
-import { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';
+import { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';
 export declare type ActionName = 'undo' | 'redo';
 export declare type ToolbarAction = Pick<Action, 'id' | 'onClick' | 'disabled'>;
 export interface UtilityPanelProps {
@@ -9,7 +9,7 @@ export interface UtilityPanelProps {
     /** Utility panel title. */
     title: string;
     /** Icon of side panel in toolbar. */
-    icon: IconNames;
+    icon: IconName;
     /** Content of the side panel. */
     content: NonNullable<ReactNode>;
 }
@@ -24,8 +24,6 @@ export interface ConfigurationPanelProps {
     onDismiss: () => void;
 }
 export interface ToolbarProps {
-    /** Whether zoom gadget should be available. */
-    zoom?: boolean;
     /** Toolbar actions available. */
     toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;
 }

package/lib/components/Workbench/Workbench.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.types.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,uDAAuD,CAAC;~~AAElF~~,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,IAAI,EAAE,~~SAAS~~,CAAC;~~IAChB~~,iCAAiC;IACjC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,IAAI,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B~~,+CAA+C;IAC/C~~,~~IAAI,CAAC,EAAE,OAAO,CAAC;IACf,~~iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,sCAAsC;IACtC,uBAAuB,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,iCAAiC;IACjC,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
1	+ {"version":3,"file":"Workbench.types.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAEjF,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,IAAI,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACpC,sCAAsC;IACtC,uBAAuB,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,iCAAiC;IACjC,kBAAkB,EAAE,uBAAuB,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Workbench/Workbench.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Workbench.types.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { Action } from '@pega/cosmos-react-core';\nimport { ~~IconNames~~ } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nexport type ActionName = 'undo' \| 'redo';\nexport type ToolbarAction = Pick<Action, 'id' \| 'onClick' \| 'disabled'>;\n\nexport interface UtilityPanelProps {\n /** Utility panel id. /\n id: string;\n /* Utility panel title. /\n title: string;\n /* Icon of side panel in toolbar. /\n icon: ~~IconNames~~;\n /* Content of the side panel. /\n content: NonNullable<ReactNode>;\n}\n\nexport interface ConfigurationPanelProps {\n /* If true, the Configuration Panel will be visible. /\n open: boolean;\n /* Header inside Configuration Panel. /\n header: string;\n /* A region to display configuration content. /\n content: ReactNode;\n /* Callback fired when user wants to close the panel. /\n onDismiss: () => void;\n}\n\nexport interface ToolbarProps {\n /* Whether zoom gadget should be available. /\n zoom?: boolean;\n /* Toolbar actions available. /\n toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;\n}\n\nexport interface WorkbenchProps {\n /* A region to display main content. /\n children: NonNullable<ReactNode>;\n /\n An array of Panel data used to render the individual panels.\n * @default []\n /\n utilityPanels?: UtilityPanelProps[];\n /* Initially opened utility panel. /\n initiallyVisiblePanelId: UtilityPanelProps['id'] \| undefined;\n /* Configuration panel props. /\n configurationPanel: ConfigurationPanelProps;\n /* Toolbar configuration. /\n toolbar?: ToolbarProps;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"Workbench.types.js","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { Action } from '@pega/cosmos-react-core';\nimport { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nexport type ActionName = 'undo' \| 'redo';\nexport type ToolbarAction = Pick<Action, 'id' \| 'onClick' \| 'disabled'>;\n\nexport interface UtilityPanelProps {\n /** Utility panel id. /\n id: string;\n /* Utility panel title. /\n title: string;\n /* Icon of side panel in toolbar. /\n icon: IconName;\n /* Content of the side panel. /\n content: NonNullable<ReactNode>;\n}\n\nexport interface ConfigurationPanelProps {\n /* If true, the Configuration Panel will be visible. /\n open: boolean;\n /* Header inside Configuration Panel. /\n header: string;\n /* A region to display configuration content. /\n content: ReactNode;\n /* Callback fired when user wants to close the panel. /\n onDismiss: () => void;\n}\n\nexport interface ToolbarProps {\n /* Toolbar actions available. /\n toolbarActions?: Partial<Record<ActionName, ToolbarAction>>;\n}\n\nexport interface WorkbenchProps {\n /* A region to display main content. /\n children: NonNullable<ReactNode>;\n /\n An array of Panel data used to render the individual panels.\n * @default []\n /\n utilityPanels?: UtilityPanelProps[];\n /* Initially opened utility panel. /\n initiallyVisiblePanelId: UtilityPanelProps['id'] \| undefined;\n /* Configuration panel props. /\n configurationPanel: ConfigurationPanelProps;\n /* Toolbar configuration. /\n toolbar?: ToolbarProps;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/index.d.ts CHANGED Viewed

@@ -4,13 +4,18 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as DynamicContentEditor } from './components/DynamicContentEditor';
 export * from './components/DynamicContentEditor';
+export { default as ExpressionBuilder } from './components/ExpressionBuilder';
+export * from './components/ExpressionBuilder';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export * from './components/ObjectPreview';
+export { default as ObjectSelect } from './components/ObjectSelect';
+export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
-export * from './components/Visual';
 export { default as Workbench } from './components/Workbench';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map CHANGED Viewed

	@@ -1 +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,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,~~0BAA0B~~,CAAC;~~AACzC~~,cAAc,~~qBAAqB~~,CAAC;~~AACpC~~,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}

package/lib/index.js CHANGED Viewed

@@ -5,13 +5,18 @@ export { default as AppShell } from './components/AppShell';
 export * from './components/AppShell';
 export { default as DynamicContentEditor } from './components/DynamicContentEditor';
 export * from './components/DynamicContentEditor';
+export { default as ExpressionBuilder } from './components/ExpressionBuilder';
+export * from './components/ExpressionBuilder';
 export { default as FlowModeller } from './components/FlowModeller';
 export * from './components/FlowModeller';
 export * from './components/ItemLibrary';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
+export * from './components/ObjectPreview';
+export { default as ObjectSelect } from './components/ObjectSelect';
+export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
 export * from './components/SummaryCard';
-export * from './components/Visual';
 export { default as Workbench } from './components/Workbench';
+export * from './utils';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map CHANGED Viewed

	@@ -1 +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,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,~~0BAA0B~~,CAAC;~~AACzC~~,cAAc,~~qBAAqB~~,CAAC;~~AACpC~~,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/~~PageTemplates~~';\nexport * from './components/~~SummaryCard~~';\nexport * from './components/~~Visual~~';\nexport { default as Workbench } from './components/Workbench';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as ExpressionBuilder } from './components/ExpressionBuilder';\nexport * from './components/ExpressionBuilder';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/ObjectPreview';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}

package/lib/utils/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './utils';
2	+ //# sourceMappingURL=index.d.ts.map