@pega/cosmos-react-cs 2.0.0-dev.11.0 → 2.0.0-dev.14.0

package/lib/components/Article/Article.js

@@ -40,17 +40,9 @@ const Locale = {
 };
 const Article = (props) => {
     const { meta, title, navigation, content, primaryActions, secondaryActions, footer, skeletonize, ...restProps } = props;
-    return (_jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper }, restProps, { children: [(navigation || primaryActions || secondaryActions) && (_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Flex, Object.assign({ container: true, item: { grow: 1 } }, { children: navigation }), void 0),
-                    _jsxs(Flex, Object.assign({ container: { alignItems: 'center' } }, { children: [primaryActions,
-                            secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
+    return (_jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper }, restProps, { children: [(navigation || primaryActions || secondaryActions) && (_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Flex, Object.assign({ container: true, item: { grow: 1 } }, { children: navigation }), void 0), _jsxs(Flex, Object.assign({ container: { alignItems: 'center' } }, { children: [primaryActions, secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
                                     items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                                } }, void 0))] }), void 0)] }), void 0)),
-            title ? (_jsx(Flex, Object.assign({ container: true, as: StyledArticleHeader }, { children: _jsx(Text, Object.assign({ variant: 'h3' }, { children: title }), void 0) }), void 0)) : (skeletonize && _jsx(LineSkeleton, { width: 'l' }, void 0)),
-            meta && meta.length > 0 ? (_jsx(Flex, Object.assign({ container: true, item: { shrink: 0 } }, { children: _jsx(MetaList, { items: meta }, void 0) }), void 0)) : (skeletonize && (_jsxs(Flex, Object.assign({ container: true }, { children: [_jsx(LineSkeleton, { width: 's' }, void 0),
-                    _jsx(LineSkeleton, { width: 's' }, void 0),
-                    _jsx(LineSkeleton, { width: 's' }, void 0)] }), void 0))),
-            skeletonize ? (_jsx(StyledArticleContent, { children: _jsx(ArticleSkeleton, {}, void 0) }, void 0)) : (_jsx(StyledArticleContent, { children: content }, void 0)),
-            footer] }), void 0));
+                                } }, void 0))] }), void 0)] }), void 0)), title ? (_jsx(Flex, Object.assign({ container: true, as: StyledArticleHeader }, { children: _jsx(Text, Object.assign({ variant: 'h3' }, { children: title }), void 0) }), void 0)) : (skeletonize && _jsx(LineSkeleton, { width: 'l' }, void 0)), meta && meta.length > 0 ? (_jsx(Flex, Object.assign({ container: true, item: { shrink: 0 } }, { children: _jsx(MetaList, { items: meta }, void 0) }), void 0)) : (skeletonize && (_jsxs(Flex, Object.assign({ container: true }, { children: [_jsx(LineSkeleton, { width: 's' }, void 0), _jsx(LineSkeleton, { width: 's' }, void 0), _jsx(LineSkeleton, { width: 's' }, void 0)] }), void 0))), skeletonize ? (_jsx(StyledArticleContent, { children: _jsx(ArticleSkeleton, {}, void 0) }, void 0)) : (_jsx(StyledArticleContent, { children: content }, void 0)), footer] }), void 0));
 };
 Article.defaultProps = {
     skeletonize: false

package/lib/components/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactElement, ReactNode, FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  MenuItemProps,\n  Flex,\n  LineSkeleton,\n  MenuButton,\n  MetaList,\n  Text,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport ArticleFooter from './ArticleFooter';\nimport ArticleSkeleton from './ArticleSkeleton';\n\nexport interface BaseArticleProps extends BaseProps {\n  /** Navigation elements */\n  navigation?: ReactNode;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: ReactNode;\n  /** Secondary actions that needs to be pushed under more icon */\n  secondaryActions?: {\n    id: MenuItemProps['id'];\n    text: MenuItemProps['primary'];\n  }[];\n  /** Article title */\n  title: string;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  /** Article content */\n  content: ReactNode;\n  /** Footer */\n  footer?: ReactElement<typeof ArticleFooter>;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n}\n\nexport type ArticleProps =\n  | (BaseArticleProps & { skeletonize?: false })\n  | (Partial<BaseArticleProps> & { skeletonize: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n  const { theme } = props;\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    max-height: inherit;\n  `;\n});\n\nconst StyledArticleHeader = styled.header`\n  flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n  const {\n    theme,\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: 0 calc(1.5 * ${spacing});\n    margin: 0 calc(-1.5 * ${spacing});\n\n    /* TODO -  We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */\n    ul,\n    ol {\n      padding-left: calc(3 * ${spacing});\n    }\n    a {\n      color: ${theme.components.link.color};\n    }\n  `;\n});\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n  const {\n    meta,\n    title,\n    navigation,\n    content,\n    primaryActions,\n    secondaryActions,\n    footer,\n    skeletonize,\n    ...restProps\n  } = props;\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} as={StyledArticleWrapper} {...restProps}>\n      {(navigation || primaryActions || secondaryActions) && (\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Flex container item={{ grow: 1 }}>\n            {navigation}\n          </Flex>\n          <Flex container={{ alignItems: 'center' }}>\n            {primaryActions}\n            {secondaryActions && (\n              <MenuButton\n                variant='simple'\n                text={Locale.moreActions}\n                icon='more'\n                iconOnly\n                menu={{\n                  items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n                }}\n              />\n            )}\n          </Flex>\n        </Flex>\n      )}\n      {title ? (\n        <Flex container as={StyledArticleHeader}>\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n      ) : (\n        skeletonize && <LineSkeleton width='l' />\n      )}\n      {meta && meta.length > 0 ? (\n        <Flex container item={{ shrink: 0 }}>\n          <MetaList items={meta} />\n        </Flex>\n      ) : (\n        skeletonize && (\n          <Flex container>\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n          </Flex>\n        )\n      )}\n      {skeletonize ? (\n        <StyledArticleContent>\n          <ArticleSkeleton />\n        </StyledArticleContent>\n      ) : (\n        <StyledArticleContent>{content}</StyledArticleContent>\n      )}\n      {footer}\n    </Flex>\n  );\n};\n\nArticle.defaultProps = {\n  skeletonize: false\n};\n\nexport default Article;\n"]}
+{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactElement, ReactNode, FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  MenuItemProps,\n  Flex,\n  LineSkeleton,\n  MenuButton,\n  MetaList,\n  Text,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport ArticleFooter from './ArticleFooter';\nimport ArticleSkeleton from './ArticleSkeleton';\n\nexport interface BaseArticleProps extends BaseProps {\n  /** Navigation elements */\n  navigation?: ReactNode;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: ReactNode;\n  /** Secondary actions that needs to be pushed under more icon */\n  secondaryActions?: {\n    id: MenuItemProps['id'];\n    text: MenuItemProps['primary'];\n  }[];\n  /** Article title */\n  title: string;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  /** Article content */\n  content: ReactNode;\n  /** Footer */\n  footer?: ReactElement<typeof ArticleFooter>;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n}\n\nexport type ArticleProps =\n  | (BaseArticleProps & { skeletonize?: false })\n  | (Partial<BaseArticleProps> & { skeletonize: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n  const { theme } = props;\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    max-height: inherit;\n  `;\n});\n\nconst StyledArticleHeader = styled.header`\n  flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n  const {\n    theme,\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: 0 calc(1.5 * ${spacing});\n    margin: 0 calc(-1.5 * ${spacing});\n\n    /* TODO -  We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */\n    ul,\n    ol {\n      padding-left: calc(3 * ${spacing});\n    }\n    a {\n      color: ${theme.components.link.color};\n    }\n  `;\n});\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n  const {\n    meta,\n    title,\n    navigation,\n    content,\n    primaryActions,\n    secondaryActions,\n    footer,\n    skeletonize,\n    ...restProps\n  } = props;\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} as={StyledArticleWrapper} {...restProps}>\n      {(navigation || primaryActions || secondaryActions) && (\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Flex container item={{ grow: 1 }}>\n            {navigation}\n          </Flex>\n          <Flex container={{ alignItems: 'center' }}>\n            {primaryActions}\n            {secondaryActions && (\n              <MenuButton\n                variant='simple'\n                text={Locale.moreActions}\n                icon='more'\n                iconOnly\n                menu={{\n                  items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n                }}\n              />\n            )}\n          </Flex>\n        </Flex>\n      )}\n      {title ? (\n        <Flex container as={StyledArticleHeader}>\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n      ) : (\n        skeletonize && <LineSkeleton width='l' />\n      )}\n      {meta && meta.length > 0 ? (\n        <Flex container item={{ shrink: 0 }}>\n          <MetaList items={meta} />\n        </Flex>\n      ) : (\n        skeletonize && (\n          <Flex container>\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n            <LineSkeleton width='s' />\n          </Flex>\n        )\n      )}\n      {skeletonize ? (\n        <StyledArticleContent>\n          <ArticleSkeleton />\n        </StyledArticleContent>\n      ) : (\n        <StyledArticleContent>{content}</StyledArticleContent>\n      )}\n      {footer}\n    </Flex>\n  );\n};\n\nArticle.defaultProps = {\n  skeletonize: false\n};\n\nexport default Article;\n"]}

package/lib/components/Article/ArticleFooter.js

@@ -29,13 +29,12 @@ StyledTags.defaultProps = defaultThemeProp;
 const ArticleFooter = (props) => {
     const { content, tags, onTagClick, ...restProps } = props;
     const onTagClickHandler = useCallback((event) => {
-        onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(event.currentTarget.dataset.tagId);
+        onTagClick?.(event.currentTarget.dataset.tagId);
     }, [onTagClick]);
     return (_jsxs(Flex, Object.assign({ as: StyledArticleFooter, container: {
             direction: 'column',
             gap: 2
-        } }, restProps, { children: [content,
-            tags && (_jsx(Flex, Object.assign({ container: { wrap: 'wrap' }, as: StyledTags }, { children: tags.map(tag => (_jsx(Tag, Object.assign({ tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, title: tag.tagName, onClick: onTagClickHandler, rel: 'tag' }, { children: tag.tagName }), tag.id))) }), void 0))] }), void 0));
+        } }, restProps, { children: [content, tags && (_jsx(Flex, Object.assign({ container: { wrap: 'wrap' }, as: StyledTags }, { children: tags.map(tag => (_jsx(Tag, Object.assign({ tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, title: tag.tagName, onClick: onTagClickHandler, rel: 'tag' }, { children: tag.tagName }), tag.id))) }), void 0))] }), void 0));
 };
 export default ArticleFooter;
 //# sourceMappingURL=ArticleFooter.js.map

package/lib/components/Article/ArticleFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAkB9E,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;gCAErB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,SAAS;4BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAA8B,EAAE,EAAE;QACjC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,IACG,SAAS,eAEZ,OAAO;YACP,IAAI,IAAI,CACP,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,gBAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,kBACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,KAAK,EAAE,GAAG,CAAC,OAAO,EAClB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,gBAER,GAAG,CAAC,OAAO,KANP,GAAG,CAAC,EAAE,CAOP,CACP,CAAC,YACG,CACR,aACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Tag, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nexport interface ArticleTag {\n  /** Tag name */\n  tagName: string;\n  /** Tag id. If not set tagName is treated as id */\n  id: string;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n  /** Article tags */\n  tags?: ArticleTag[];\n  /** Callback that triggers on click of tag */\n  onTagClick?: (id: ArticleTag['id']) => void;\n  /** Footer content */\n  content?: ReactNode;\n}\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    &::before {\n      content: '';\n      display: block;\n      background: ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n  return css`\n    padding: calc(0.25 * ${theme.base.spacing});\n    margin: 0 calc(-0.5 * ${theme.base.spacing});\n    & > ${StyledTag} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n  props: ArticleFooterProps\n) => {\n  const { content, tags, onTagClick, ...restProps } = props;\n\n  const onTagClickHandler = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      onTagClick?.(event.currentTarget.dataset.tagId!);\n    },\n    [onTagClick]\n  );\n\n  return (\n    <Flex\n      as={StyledArticleFooter}\n      container={{\n        direction: 'column',\n        gap: 2\n      }}\n      {...restProps}\n    >\n      {content}\n      {tags && (\n        <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n          {tags.map(tag => (\n            <Tag\n              tabIndex={0}\n              type='pill'\n              variant='light'\n              key={tag.id}\n              data-tag-id={tag.id}\n              title={tag.tagName}\n              onClick={onTagClickHandler}\n              rel='tag'\n            >\n              {tag.tagName}\n            </Tag>\n          ))}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default ArticleFooter;\n"]}
+{"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAkB9E,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;gCAErB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,SAAS;4BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAA8B,EAAE,EAAE;QACjC,UAAU,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,IACG,SAAS,eAEZ,OAAO,EACP,IAAI,IAAI,CACP,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,gBAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,kBACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,KAAK,EAAE,GAAG,CAAC,OAAO,EAClB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,gBAER,GAAG,CAAC,OAAO,KANP,GAAG,CAAC,EAAE,CAOP,CACP,CAAC,YACG,CACR,aACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Tag, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nexport interface ArticleTag {\n  /** Tag name */\n  tagName: string;\n  /** Tag id. If not set tagName is treated as id */\n  id: string;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n  /** Article tags */\n  tags?: ArticleTag[];\n  /** Callback that triggers on click of tag */\n  onTagClick?: (id: ArticleTag['id']) => void;\n  /** Footer content */\n  content?: ReactNode;\n}\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    &::before {\n      content: '';\n      display: block;\n      background: ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n  return css`\n    padding: calc(0.25 * ${theme.base.spacing});\n    margin: 0 calc(-0.5 * ${theme.base.spacing});\n    & > ${StyledTag} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n  props: ArticleFooterProps\n) => {\n  const { content, tags, onTagClick, ...restProps } = props;\n\n  const onTagClickHandler = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      onTagClick?.(event.currentTarget.dataset.tagId!);\n    },\n    [onTagClick]\n  );\n\n  return (\n    <Flex\n      as={StyledArticleFooter}\n      container={{\n        direction: 'column',\n        gap: 2\n      }}\n      {...restProps}\n    >\n      {content}\n      {tags && (\n        <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n          {tags.map(tag => (\n            <Tag\n              tabIndex={0}\n              type='pill'\n              variant='light'\n              key={tag.id}\n              data-tag-id={tag.id}\n              title={tag.tagName}\n              onClick={onTagClickHandler}\n              rel='tag'\n            >\n              {tag.tagName}\n            </Tag>\n          ))}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default ArticleFooter;\n"]}

package/lib/components/ArticleList/ArticleList.js

@@ -57,11 +57,7 @@ StyledArticleListFooter.defaultProps = defaultThemeProp;
 const ArticleList = forwardRef((props, ref) => {
     const { header, children, skeletonize, footer, ...restProps } = props;
     const t = useI18n();
-    return (_jsxs(Flex, Object.assign({ container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y').toString(), ref: ref }, restProps, { children: [header && (_jsx(Flex, Object.assign({ container: true, as: StyledArticleListHeader, "aria-label": t('article_list_filter_label_a11y').toString() }, { children: header }), void 0)),
-            _jsx(Flex, Object.assign({ container: { direction: 'column' }, as: StyledSummaryList, role: 'feed' }, { children: skeletonize ? (_jsxs(_Fragment, { children: [_jsx(SummarySkeleton, {}, void 0),
-                        _jsx(SummarySkeleton, {}, void 0),
-                        _jsx(SummarySkeleton, {}, void 0)] }, void 0)) : (children) }), void 0),
-            footer && (_jsx(Flex, Object.assign({ container: true, as: StyledArticleListFooter }, { children: footer }), void 0))] }), void 0));
+    return (_jsxs(Flex, Object.assign({ container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y').toString(), ref: ref }, restProps, { children: [header && (_jsx(Flex, Object.assign({ container: true, as: StyledArticleListHeader, "aria-label": t('article_list_filter_label_a11y').toString() }, { children: header }), void 0)), _jsx(Flex, Object.assign({ container: { direction: 'column' }, as: StyledSummaryList, role: 'feed' }, { children: skeletonize ? (_jsxs(_Fragment, { children: [_jsx(SummarySkeleton, {}, void 0), _jsx(SummarySkeleton, {}, void 0), _jsx(SummarySkeleton, {}, void 0)] }, void 0)) : (children) }), void 0), footer && (_jsx(Flex, Object.assign({ container: true, as: StyledArticleListFooter }, { children: footer }), void 0))] }), void 0));
 });
 ArticleList.defaultProps = defaultProps;
 export default ArticleList;

package/lib/components/ArticleList/ArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  ReactElement,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, useI18n, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\n\nimport ArticleListHeader from './ArticleListHeader';\nimport SummarySkeleton from './SummarySkeleton';\n\nexport interface ArticleListProps extends BaseProps {\n  /** Search/filtering criteria for article list */\n  header?: ReactElement<typeof ArticleListHeader>;\n  /** Content for article list */\n  children?: ReactNode;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n  /** Footer for article list */\n  footer?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<ArticleListProps> = {};\nconst StyledSummaryList = styled.ul``;\nconst StyledArticleList = styled.div(props => {\n  const { theme } = props;\n  return css`\n    max-height: inherit;\n    overflow: auto;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    background: ${theme.base.palette['primary-background']};\n    ${StyledCard} {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledSummaryList} {\n      flex-grow: 1;\n      margin: 0 0 ${theme.base.spacing} 0;\n      list-style-type: none;\n      > li:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: 0;\n        padding-bottom: ${theme.base.spacing};\n        margin-bottom: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst StyledArticleListHeader = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(2 * ${theme.base.spacing}) 0 0 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListHeader.defaultProps = defaultThemeProp;\n\nconst StyledArticleListFooter = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    bottom: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: ${theme.base.spacing} 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListFooter.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n    const { header, children, skeletonize, footer, ...restProps } = props;\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y').toString()}\n        ref={ref}\n        {...restProps}\n      >\n        {header && (\n          <Flex\n            container\n            as={StyledArticleListHeader}\n            aria-label={t('article_list_filter_label_a11y').toString()}\n          >\n            {header}\n          </Flex>\n        )}\n        <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n          {skeletonize ? (\n            <>\n              <SummarySkeleton />\n              <SummarySkeleton />\n              <SummarySkeleton />\n            </>\n          ) : (\n            children\n          )}\n        </Flex>\n        {footer && (\n          <Flex container as={StyledArticleListFooter}>\n            {footer}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nArticleList.defaultProps = defaultProps;\n\nexport default ArticleList;\n"]}
+{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  ReactElement,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, useI18n, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\n\nimport ArticleListHeader from './ArticleListHeader';\nimport SummarySkeleton from './SummarySkeleton';\n\nexport interface ArticleListProps extends BaseProps {\n  /** Search/filtering criteria for article list */\n  header?: ReactElement<typeof ArticleListHeader>;\n  /** Content for article list */\n  children?: ReactNode;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n  /** Footer for article list */\n  footer?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<ArticleListProps> = {};\nconst StyledSummaryList = styled.ul``;\nconst StyledArticleList = styled.div(props => {\n  const { theme } = props;\n  return css`\n    max-height: inherit;\n    overflow: auto;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    background: ${theme.base.palette['primary-background']};\n    ${StyledCard} {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledSummaryList} {\n      flex-grow: 1;\n      margin: 0 0 ${theme.base.spacing} 0;\n      list-style-type: none;\n      > li:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: 0;\n        padding-bottom: ${theme.base.spacing};\n        margin-bottom: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst StyledArticleListHeader = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(2 * ${theme.base.spacing}) 0 0 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListHeader.defaultProps = defaultThemeProp;\n\nconst StyledArticleListFooter = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    bottom: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: ${theme.base.spacing} 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListFooter.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n    const { header, children, skeletonize, footer, ...restProps } = props;\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y').toString()}\n        ref={ref}\n        {...restProps}\n      >\n        {header && (\n          <Flex\n            container\n            as={StyledArticleListHeader}\n            aria-label={t('article_list_filter_label_a11y').toString()}\n          >\n            {header}\n          </Flex>\n        )}\n        <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n          {skeletonize ? (\n            <>\n              <SummarySkeleton />\n              <SummarySkeleton />\n              <SummarySkeleton />\n            </>\n          ) : (\n            children\n          )}\n        </Flex>\n        {footer && (\n          <Flex container as={StyledArticleListFooter}>\n            {footer}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nArticleList.defaultProps = defaultProps;\n\nexport default ArticleList;\n"]}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -60,14 +60,9 @@ const ArticleListHeader = (props) => {
             ev.preventDefault();
             if (onSubmit)
                 onSubmit(ev);
-        } }, restProps, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [icon && icon,
-                    _jsx(StyledArticleListHeaderText, Object.assign({ variant: 'h2' }, { children: headerText }), void 0),
-                    primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
+        } }, restProps, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [icon, _jsx(StyledArticleListHeaderText, Object.assign({ variant: 'h2' }, { children: headerText }), void 0), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
                             items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                        } }, void 0))] }), void 0),
-            _jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [_jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: primary.search }), void 0),
-                    _jsx(Flex, Object.assign({ container: true, as: StyledHeaderActions }, { children: primary.followedFilter }), void 0)] }), void 0),
-            secondary && (_jsx(StyledSecondaryContainer, Object.assign({ container: { gap: 1 } }, { children: secondary }), void 0))] }), void 0));
+                        } }, void 0))] }), void 0), _jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [_jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: primary.search }), void 0), _jsx(Flex, Object.assign({ container: true, as: StyledHeaderActions }, { children: primary.followedFilter }), void 0)] }), void 0), secondary && (_jsx(StyledSecondaryContainer, Object.assign({ container: { gap: 1 } }, { children: secondary }), void 0))] }), void 0));
 };
 export default ArticleListHeader;
 //# sourceMappingURL=ArticleListHeader.js.map

package/lib/components/ArticleList/ArticleListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        {icon && icon}\n        <StyledArticleListHeaderText variant='h2'>{headerText}</StyledArticleListHeaderText>\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        <Flex container as={StyledHeaderActions}>\n          {primary.followedFilter}\n        </Flex>\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}
+{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        {icon}\n        <StyledArticleListHeaderText variant='h2'>{headerText}</StyledArticleListHeaderText>\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        <Flex container as={StyledHeaderActions}>\n          {primary.followedFilter}\n        </Flex>\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}

package/lib/components/ArticleList/ArticleSummary.js

@@ -23,9 +23,7 @@ const ArticleCard = styled(StyledCard) `
 `;
 const ArticleSummary = (props) => {
     const { header, content, meta, articleID, ...restProps } = props;
-    return (_jsxs(ArticleCard, Object.assign({ as: 'li', role: 'article' }, restProps, { children: [header ? _jsx(CardHeader, { children: header }, void 0) : null,
-            _jsx(CardContent, { children: content }, void 0),
-            meta && (_jsx(CardFooter, { children: _jsx(MetaList, { items: meta }, void 0) }, void 0))] }), articleID));
+    return (_jsxs(ArticleCard, Object.assign({ as: 'li', role: 'article' }, restProps, { children: [header ? _jsx(CardHeader, { children: header }, void 0) : null, _jsx(CardContent, { children: content }, void 0), meta && (_jsx(CardFooter, { children: _jsx(MetaList, { items: meta }, void 0) }, void 0))] }), articleID));
 };
 ArticleSummary.defaultProps = defaultProps;
 export default ArticleSummary;

package/lib/components/ArticleList/ArticleSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAEV,QAAQ,EAIR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAY1F,MAAM,YAAY,GAAiC,EAAE,CAAC;AAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;QAE9B,gBAAgB,OAAO,iBAAiB,OAAO,gBAAgB;;;;;QAK/D,iBAAiB,MAAM,UAAU;;;;;;;CAOxC,CAAC;AAEF,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjE,OAAO,CACL,MAAC,WAAW,kBAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,IAAqB,SAAS,eAC9D,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,MAAM,WAAc,CAAC,CAAC,CAAC,IAAI;YAClD,KAAC,WAAW,cAAE,OAAO,WAAe;YACnC,IAAI,IAAI,CACP,KAAC,UAAU,cACT,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,WACd,CACd,MAPsC,SAAS,CAQpC,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Link,\n  MetaList,\n  Text,\n  BaseProps,\n  ForwardProps,\n  StyledText\n} from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Article summary title */\n  header?: ReactElement<typeof Text> | ReactElement<typeof Link>;\n  /** Summary of the article */\n  content: ReactNode;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  articleID: string;\n}\n\nconst defaultProps: Partial<ArticleSummaryProps> = {};\n\nconst ArticleCard = styled(StyledCard)`\n  &&& {\n    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    > ${StyledCardContent} > ${StyledText} {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  }\n`;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const { header, content, meta, articleID, ...restProps } = props;\n  return (\n    <ArticleCard as='li' role='article' key={articleID} {...restProps}>\n      {header ? <CardHeader>{header}</CardHeader> : null}\n      <CardContent>{content}</CardContent>\n      {meta && (\n        <CardFooter>\n          <MetaList items={meta} />\n        </CardFooter>\n      )}\n    </ArticleCard>\n  );\n};\n\nArticleSummary.defaultProps = defaultProps;\n\nexport default ArticleSummary;\n"]}
+{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAEV,QAAQ,EAIR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAY1F,MAAM,YAAY,GAAiC,EAAE,CAAC;AAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;QAE9B,gBAAgB,OAAO,iBAAiB,OAAO,gBAAgB;;;;;QAK/D,iBAAiB,MAAM,UAAU;;;;;;;CAOxC,CAAC;AAEF,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjE,OAAO,CACL,MAAC,WAAW,kBAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,IAAqB,SAAS,eAC9D,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,MAAM,WAAc,CAAC,CAAC,CAAC,IAAI,EAClD,KAAC,WAAW,cAAE,OAAO,WAAe,EACnC,IAAI,IAAI,CACP,KAAC,UAAU,cACT,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,WACd,CACd,MAPsC,SAAS,CAQpC,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Link,\n  MetaList,\n  Text,\n  BaseProps,\n  ForwardProps,\n  StyledText\n} from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Article summary title */\n  header?: ReactElement<typeof Text> | ReactElement<typeof Link>;\n  /** Summary of the article */\n  content: ReactNode;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  articleID: string;\n}\n\nconst defaultProps: Partial<ArticleSummaryProps> = {};\n\nconst ArticleCard = styled(StyledCard)`\n  &&& {\n    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    > ${StyledCardContent} > ${StyledText} {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  }\n`;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const { header, content, meta, articleID, ...restProps } = props;\n  return (\n    <ArticleCard as='li' role='article' key={articleID} {...restProps}>\n      {header ? <CardHeader>{header}</CardHeader> : null}\n      <CardContent>{content}</CardContent>\n      {meta && (\n        <CardFooter>\n          <MetaList items={meta} />\n        </CardFooter>\n      )}\n    </ArticleCard>\n  );\n};\n\nArticleSummary.defaultProps = defaultProps;\n\nexport default ArticleSummary;\n"]}

package/lib/components/ArticleList/SummarySkeleton.js

@@ -3,12 +3,7 @@ import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
 const SummarySkeleton = (props) => {
     return (_jsxs(Flex, Object.assign({ as: 'li', container: {
             direction: 'column'
-        } }, props, { "aria-disabled": 'true' }, { children: [_jsx(LineSkeleton, { variant: 'link', width: 'l' }, void 0),
-            _jsxs(ParagraphSkeleton, { children: [_jsx(LineSkeleton, {}, void 0),
-                    _jsx(LineSkeleton, { width: 's' }, void 0)] }, void 0),
-            _jsxs(Flex, Object.assign({ container: { alignItems: 'center' } }, { children: [_jsx(LineSkeleton, { width: 's' }, void 0),
-                    _jsx(LineSkeleton, { width: 's' }, void 0),
-                    _jsx(LineSkeleton, { width: 's' }, void 0)] }), void 0)] }), void 0));
+        } }, props, { "aria-disabled": 'true' }, { children: [_jsx(LineSkeleton, { variant: 'link', width: 'l' }, void 0), _jsxs(ParagraphSkeleton, { children: [_jsx(LineSkeleton, {}, void 0), _jsx(LineSkeleton, { width: 's' }, void 0)] }, void 0), _jsxs(Flex, Object.assign({ container: { alignItems: 'center' } }, { children: [_jsx(LineSkeleton, { width: 's' }, void 0), _jsx(LineSkeleton, { width: 's' }, void 0), _jsx(LineSkeleton, { width: 's' }, void 0)] }), void 0)] }), void 0));
 };
 export default SummarySkeleton;
 //# sourceMappingURL=SummarySkeleton.js.map

package/lib/components/ArticleList/SummarySkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummarySkeleton.js","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,IACG,KAAK,qBACK,MAAM,iBAEpB,KAAC,YAAY,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,GAAG,WAAG;YACzC,MAAC,iBAAiB,eAChB,KAAC,YAAY,aAAG;oBAChB,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,YACR;YACpB,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBACvC,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG;oBAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG;oBAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,aACrB,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  LineSkeleton,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface SummarySkeletonProps extends BaseProps {}\n\nconst SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps> = (\n  props: SummarySkeletonProps\n) => {\n  return (\n    <Flex\n      as='li'\n      container={{\n        direction: 'column'\n      }}\n      {...props}\n      aria-disabled='true'\n    >\n      <LineSkeleton variant='link' width='l' />\n      <ParagraphSkeleton>\n        <LineSkeleton />\n        <LineSkeleton width='s' />\n      </ParagraphSkeleton>\n      <Flex container={{ alignItems: 'center' }}>\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default SummarySkeleton;\n"]}
+{"version":3,"file":"SummarySkeleton.js","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,IACG,KAAK,qBACK,MAAM,iBAEpB,KAAC,YAAY,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,GAAG,WAAG,EACzC,MAAC,iBAAiB,eAChB,KAAC,YAAY,aAAG,EAChB,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,YACR,EACpB,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBACvC,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,aACrB,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  LineSkeleton,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface SummarySkeletonProps extends BaseProps {}\n\nconst SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps> = (\n  props: SummarySkeletonProps\n) => {\n  return (\n    <Flex\n      as='li'\n      container={{\n        direction: 'column'\n      }}\n      {...props}\n      aria-disabled='true'\n    >\n      <LineSkeleton variant='link' width='l' />\n      <ParagraphSkeleton>\n        <LineSkeleton />\n        <LineSkeleton width='s' />\n      </ParagraphSkeleton>\n      <Flex container={{ alignItems: 'center' }}>\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default SummarySkeleton;\n"]}

package/lib/components/CSCaseView/CSCaseView.js

@@ -10,8 +10,7 @@ const StyledCSCaseView = styled(CaseView)(({ theme }) => {
   `;
 });
 const CSCaseView = forwardRef(({ intelligentGuidance, ...restProps }, ref) => {
-    return (_jsxs(_Fragment, { children: [_jsx(StyledCSCaseView, Object.assign({}, restProps, { ref: ref }), void 0),
-            intelligentGuidance] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledCSCaseView, Object.assign({}, restProps, { ref: ref }), void 0), intelligentGuidance] }, void 0));
 });
 export default CSCaseView;
 //# sourceMappingURL=CSCaseView.js.map

package/lib/components/CSCaseView/CSCaseView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CSCaseView.js","sourceRoot":"","sources":["../../../src/components/CSCaseView/CSCaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAMvF,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,mBAAmB;gCACO,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAuC,UAAU,CAC/D,CACE,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAoC,EACvE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,8BACE,KAAC,gBAAgB,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,YAAI;YAC5C,mBAAmB,YACnB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '@pega/cosmos-react-core';\nimport { CaseView, CaseViewProps, StyledSummaryRegion } from '@pega/cosmos-react-work';\n\nexport interface CSCaseViewProps extends CaseViewProps {\n  intelligentGuidance?: JSX.Element;\n}\n\nconst StyledCSCaseView = styled(CaseView)(({ theme }) => {\n  return css`\n    ${StyledSummaryRegion} {\n      padding-block-end: calc(${theme.base.spacing} + 3rem);\n    }\n  `;\n});\n\nconst CSCaseView: FC<CSCaseViewProps & ForwardProps> = forwardRef(\n  (\n    { intelligentGuidance, ...restProps }: PropsWithoutRef<CSCaseViewProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <>\n        <StyledCSCaseView {...restProps} ref={ref} />\n        {intelligentGuidance}\n      </>\n    );\n  }\n);\n\nexport default CSCaseView;\n"]}
+{"version":3,"file":"CSCaseView.js","sourceRoot":"","sources":["../../../src/components/CSCaseView/CSCaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAMvF,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,mBAAmB;gCACO,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAuC,UAAU,CAC/D,CACE,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAoC,EACvE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,8BACE,KAAC,gBAAgB,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,YAAI,EAC5C,mBAAmB,YACnB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '@pega/cosmos-react-core';\nimport { CaseView, CaseViewProps, StyledSummaryRegion } from '@pega/cosmos-react-work';\n\nexport interface CSCaseViewProps extends CaseViewProps {\n  intelligentGuidance?: JSX.Element;\n}\n\nconst StyledCSCaseView = styled(CaseView)(({ theme }) => {\n  return css`\n    ${StyledSummaryRegion} {\n      padding-block-end: calc(${theme.base.spacing} + 3rem);\n    }\n  `;\n});\n\nconst CSCaseView: FC<CSCaseViewProps & ForwardProps> = forwardRef(\n  (\n    { intelligentGuidance, ...restProps }: PropsWithoutRef<CSCaseViewProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <>\n        <StyledCSCaseView {...restProps} ref={ref} />\n        {intelligentGuidance}\n      </>\n    );\n  }\n);\n\nexport default CSCaseView;\n"]}

package/lib/components/CallControlPanel/Call.d.ts

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

package/lib/components/CallControlPanel/Call.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAExF,OAAO,EAKL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAmB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAOtE,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8QrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/CallControlPanel/Call.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Actions, Button, Flex, Icon, Popover, Status, SummaryItem, Text, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { StyledHoldInfo, StyledProgressContainer, StyledSLAProgress } from './CallControlPanel.styles';
+import CalleePicker from './CalleePicker';
+import CallTransfer from './CallTransfer';
+import DTMFKeypad from './DTMFKeypad';
+import StopWatch from './StopWatch';
+import { calculateSla } from './utils';
+const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, transferOptions }) => {
+    const t = useI18n();
+    const moreActionsButtonRef = useRef(null);
+    const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
+    const [popoverEl, setPopoverRef] = useElement();
+    const [slaLevel, setSlaLevel] = useState(undefined);
+    const [showConsultPopover, setShowConsultPopover] = useState(false);
+    const [showConferencePopover, setShowConferencePopover] = useState(false);
+    const [showTransferPopover, setShowTransferPopover] = useState(false);
+    const [showSendDTMF, setShowSendDTMF] = useState(false);
+    const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);
+    const appendConferenceAction = (actionItems) => {
+        actionItems.splice(1, 0, {
+            id: 'conference',
+            text: t('call_panel_conference_call_menu_item'),
+            onClick: () => setShowConferencePopover(true)
+        });
+    };
+    const calculateCurrentSlaLevel = () => {
+        const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);
+        setSlaLevel(currentSlaLevel);
+    };
+    const getActionItems = (item) => {
+        const actionItems = [
+            {
+                id: 'consult',
+                text: t('call_panel_consult_call_menu_item'),
+                onClick: () => setShowConsultPopover(true)
+            },
+            {
+                id: 'transfer',
+                text: t('call_panel_transfer_call_menu_item'),
+                onClick: () => setShowTransferPopover(true)
+            },
+            {
+                id: 'dtmf',
+                text: t('call_panel_send_dtmf_menu_item'),
+                onClick: () => setShowSendDTMF(true)
+            },
+            {
+                id: 'hang_up',
+                text: t('call_panel_hangup_call_menu_item'),
+                disabled: !item.onEndCall,
+                onClick: () => {
+                    if (item.onEndCall)
+                        item.onEndCall(callId, item.id);
+                }
+            }
+        ];
+        if (onConferenceAction) {
+            appendConferenceAction(actionItems);
+        }
+        return actionItems;
+    };
+    useLayoutEffect(() => {
+        calculateCurrentSlaLevel();
+        const slaDurationInMillis = slaDuration && slaDuration * 1000;
+        const timer = setTimeout(() => {
+            calculateCurrentSlaLevel();
+        }, slaDurationInMillis);
+        return () => clearTimeout(timer);
+    }, [inCallSince, slaLevel]);
+    useOuterEvent('mousedown', [popoverEl], () => {
+        setShowConsultPopover(false);
+        setShowTransferPopover(false);
+        setShowConferencePopover(false);
+        setShowSendDTMF(false);
+    });
+    const onKeyDown = ({ key }) => {
+        if (key === 'Escape') {
+            setShowConsultPopover(false);
+            setShowTransferPopover(false);
+            setShowConferencePopover(false);
+            setShowSendDTMF(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [popoverEl]);
+    let popoverContent;
+    // eslint-disable-next-line default-case
+    switch (true) {
+        case showConsultPopover:
+            popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_consult_with_heading'), onClose: () => setShowConsultPopover(false), onCall: phoneNumber => {
+                    onConsultAction?.(callId, phoneNumber);
+                    setShowConsultPopover(false);
+                } }, void 0));
+            break;
+        case showConferencePopover:
+            popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_conference_heading'), onClose: () => setShowConferencePopover(false), onCall: phoneNumber => {
+                    onConferenceAction?.(callId, phoneNumber);
+                    setShowConferencePopover(false);
+                } }, void 0));
+            break;
+        case showTransferPopover:
+            popoverContent = (_jsx(CallTransfer, { onClose: () => setShowTransferPopover(false), onTransferCall: transferData => {
+                    onTransferAction?.(callId, transferData);
+                    setShowTransferPopover(false);
+                }, transferOptions: transferOptions }, void 0));
+            break;
+        case showSendDTMF:
+            popoverContent = (_jsx(DTMFKeypad, { onClose: () => setShowSendDTMF(false), onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)) }, void 0));
+            break;
+    }
+    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }, void 0), participants.map((item, index) => {
+                return (_jsx(SummaryItem, { container: index === 0
+                        ? {
+                            areas: '"primary secondary actions"',
+                            cols: 'auto minmax(0, 2fr) auto'
+                        }
+                        : {
+                            areas: '"visual primary secondary actions"',
+                            cols: 'auto auto minmax(0, 2fr) auto'
+                        }, overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }, void 0), primary: item.name, secondary: item.info && _jsx(Text, Object.assign({ variant: 'secondary' }, { children: item.info }), void 0), actions: _jsxs(Flex, Object.assign({ container: { wrap: 'nowrap' } }, { children: [slaConfig && index === 0 && (_jsx(Flex, Object.assign({ container: { alignItems: 'center' } }, { children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }, void 0) }), void 0)), index === 0 && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item') }, { children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }, void 0) }), void 0), _jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: () => onPauseToggle(callId), label: t(onHoldSince !== undefined
+                                            ? 'call_panel_resume_call_menu_item'
+                                            : 'call_panel_pause_call_menu_item') }, { children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }, void 0) }), void 0)] }, void 0)), index === 0 && slaConfig && (_jsx(Actions, { ref: moreActionsButtonRef, items: getActionItems(item) }, void 0)), onMergeCall && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item') }, { children: _jsx(Icon, { name: 'phone-split-solid' }, void 0) }), 'merge')), (!slaConfig || index !== 0) && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: () => {
+                                    if (item.onEndCall)
+                                        item.onEndCall(callId, item.id);
+                                }, label: t('call_panel_hangup_call_menu_item') }, { children: _jsx(Icon, { name: 'phone-hangup-solid' }, void 0) }), 'hang_up'))] }), void 0) }, item.id));
+            }), onHoldSince !== undefined && (_jsx(Status, Object.assign({ as: StyledHoldInfo, variant: 'pending' }, { children: t('call_panel_call_on_hold', (_jsx(StopWatch, { startTime: onHoldSince }, void 0))) }), void 0)), _jsx(Popover, Object.assign({ target: moreActionsButtonRef.current, ref: setPopoverRef, placement: 'top-end', show: showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover }, { children: popoverContent }), void 0)] }, void 0));
+};
+export default Call;
+//# sourceMappingURL=Call.js.map

package/lib/components/CallControlPanel/Call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,EAEL,OAAO,EACP,MAAM,EACN,IAAI,EAEJ,IAAI,EACJ,OAAO,EACP,MAAM,EACN,WAAW,EACX,IAAI,EACJ,UAAU,EACV,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,IAAI,GAAgD,CAAC,EACzD,EAAE,EAAE,MAAM,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,EACb,KAAK,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,eAAe,EACU,EAAE,EAAE;IAC7B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACxE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtF,MAAM,sBAAsB,GAAG,CAAC,WAAqB,EAAE,EAAE;QACvD,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YACvB,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC;YAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC;SAC9C,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAS,EAAE;QAC1C,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;QAC9E,WAAW,CAAC,eAAe,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAY,EAAE;QACzD,MAAM,WAAW,GAAG;YAClB;gBACE,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,CAAC,CAAC,mCAAmC,CAAC;gBAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC;aAC3C;YAED;gBACE,EAAE,EAAE,UAAU;gBACd,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;gBAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC;aAC5C;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,CAAC,CAAC,gCAAgC,CAAC;gBACzC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;aACrC;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;gBAC3C,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,IAAI,CAAC,SAAS;wBAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtD,CAAC;aACF;SACF,CAAC;QACF,IAAI,kBAAkB,EAAE;YACtB,sBAAsB,CAAC,WAAW,CAAC,CAAC;SACrC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,wBAAwB,EAAE,CAAC;QAC3B,MAAM,mBAAmB,GAAG,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;QAE9D,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,wBAAwB,EAAE,CAAC;QAC7B,CAAC,EAAE,mBAAmB,CAAC,CAAC;QAExB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QAC3C,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,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,IAAI,cAAc,CAAC;IACnB,wCAAwC;IACxC,QAAQ,IAAI,EAAE;QACZ,KAAK,kBAAkB;YACrB,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,CAAC,CAAC,iCAAiC,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,WAAW,CAAC,EAAE;oBACpB,eAAe,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;oBACvC,qBAAqB,CAAC,KAAK,CAAC,CAAC;gBAC/B,CAAC,WACD,CACH,CAAC;YACF,MAAM;QACR,KAAK,qBAAqB;YACxB,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,CAAC,CAAC,+BAA+B,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC9C,MAAM,EAAE,WAAW,CAAC,EAAE;oBACpB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;oBAC1C,wBAAwB,CAAC,KAAK,CAAC,CAAC;gBAClC,CAAC,WACD,CACH,CAAC;YACF,MAAM;QACR,KAAK,mBAAmB;YACtB,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC5C,cAAc,EAAE,YAAY,CAAC,EAAE;oBAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;oBACzC,sBAAsB,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC,EACD,eAAe,EAAE,eAAe,WAChC,CACH,CAAC;YACF,MAAM;QACR,KAAK,YAAY;YACf,cAAc,GAAG,CACf,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,iBAAiB,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,WACnF,CACH,CAAC;YACF,MAAM;KACT;IAED,OAAO,CACL,MAAC,uBAAuB,eACtB,KAAC,iBAAiB,IAChB,WAAW,QACX,SAAS,EAAC,OAAO,EACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,WAClB,EACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EACP,KAAK,KAAK,CAAC;wBACT,CAAC,CAAC;4BACE,KAAK,EAAE,6BAA6B;4BACpC,IAAI,EAAE,0BAA0B;yBACjC;wBACH,CAAC,CAAC;4BACE,KAAK,EAAE,oCAAoC;4BAC3C,IAAI,EAAE,+BAA+B;yBACtC,EAEP,gBAAgB,EAAC,UAAU,EAC3B,MAAM,EAAE,KAAK,KAAK,CAAC,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,EAC/C,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,kBAAC,OAAO,EAAC,WAAW,gBAAE,IAAI,CAAC,IAAI,YAAQ,EAEpE,OAAO,EACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAChC,SAAS,IAAI,KAAK,KAAK,CAAC,IAAI,CAC3B,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,gBACvC,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,WAAI,YACnD,CACR,EACA,KAAK,KAAK,CAAC,IAAI,CACd,8BACE,KAAC,MAAM,kBACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,WAAW,KAAK,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,CAAC,CACN,KAAK,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,+BAA+B,CAC5E,gBAED,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,WAAI,YAC9C,EACT,KAAC,MAAM,kBACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,CAAC,CACN,WAAW,KAAK,SAAS;4CACvB,CAAC,CAAC,kCAAkC;4CACpC,CAAC,CAAC,iCAAiC,CACtC,gBAED,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,WAAI,YACjE,YACR,CACJ,EACA,KAAK,KAAK,CAAC,IAAI,SAAS,IAAI,CAC3B,KAAC,OAAO,IAAC,GAAG,EAAE,oBAAoB,EAAE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAI,CACpE,EAEA,WAAW,IAAI,CACd,KAAC,MAAM,kBACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,CAAC,CAAC,iCAAiC,CAAC,gBAE3C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,KAJ7B,OAAO,CAKJ,CACV,EAEA,CAAC,CAAC,SAAS,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,CAC9B,KAAC,MAAM,kBACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,IAAI,CAAC,SAAS;wCAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gCACtD,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,gBAE5C,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,WAAG,KAN9B,SAAS,CAON,CACV,aACI,IAhEJ,IAAI,CAAC,EAAE,CAkEZ,CACH,CAAC;YACJ,CAAC,CAAC,EACD,WAAW,KAAK,SAAS,IAAI,CAC5B,KAAC,MAAM,kBAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,SAAS,gBAC1C,CAAC,CACA,yBAAyB,EACzB,CAAC,KAAC,SAAS,IAAC,SAAS,EAAE,WAAW,WAAI,CAAsB,CAC7D,YACM,CACV,EAED,KAAC,OAAO,kBACN,MAAM,EAAE,oBAAoB,CAAC,OAAO,EACpC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAE,kBAAkB,IAAI,mBAAmB,IAAI,YAAY,IAAI,qBAAqB,gBAEvF,cAAc,YACP,YACc,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Action,\n  Actions,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  Popover,\n  Status,\n  SummaryItem,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledHoldInfo,\n  StyledProgressContainer,\n  StyledSLAProgress\n} from './CallControlPanel.styles';\nimport { CallParticipant, CallProps } from './CallControlPanel.types';\nimport CalleePicker from './CalleePicker';\nimport CallTransfer from './CallTransfer';\nimport DTMFKeypad from './DTMFKeypad';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n  id: callId,\n  startedAt,\n  onHoldSince,\n  slaConfig,\n  participants,\n  onPauseToggle,\n  muted,\n  onMuteToggle,\n  onDTMFPress,\n  onConsultAction,\n  onConferenceAction,\n  onTransferAction,\n  onMergeCall,\n  transferOptions\n}: CallProps & ForwardProps) => {\n  const t = useI18n();\n  const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n  const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n  const [showConsultPopover, setShowConsultPopover] = useState(false);\n  const [showConferencePopover, setShowConferencePopover] = useState(false);\n  const [showTransferPopover, setShowTransferPopover] = useState(false);\n  const [showSendDTMF, setShowSendDTMF] = useState(false);\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const appendConferenceAction = (actionItems: Action[]) => {\n    actionItems.splice(1, 0, {\n      id: 'conference',\n      text: t('call_panel_conference_call_menu_item'),\n      onClick: () => setShowConferencePopover(true)\n    });\n  };\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\n  };\n\n  const getActionItems = (item: CallParticipant): Action[] => {\n    const actionItems = [\n      {\n        id: 'consult',\n        text: t('call_panel_consult_call_menu_item'),\n        onClick: () => setShowConsultPopover(true)\n      },\n\n      {\n        id: 'transfer',\n        text: t('call_panel_transfer_call_menu_item'),\n        onClick: () => setShowTransferPopover(true)\n      },\n      {\n        id: 'dtmf',\n        text: t('call_panel_send_dtmf_menu_item'),\n        onClick: () => setShowSendDTMF(true)\n      },\n      {\n        id: 'hang_up',\n        text: t('call_panel_hangup_call_menu_item'),\n        disabled: !item.onEndCall,\n        onClick: () => {\n          if (item.onEndCall) item.onEndCall(callId, item.id);\n        }\n      }\n    ];\n    if (onConferenceAction) {\n      appendConferenceAction(actionItems);\n    }\n    return actionItems;\n  };\n\n  useLayoutEffect(() => {\n    calculateCurrentSlaLevel();\n    const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n    const timer = setTimeout(() => {\n      calculateCurrentSlaLevel();\n    }, slaDurationInMillis);\n\n    return () => clearTimeout(timer);\n  }, [inCallSince, slaLevel]);\n\n  useOuterEvent('mousedown', [popoverEl], () => {\n    setShowConsultPopover(false);\n    setShowTransferPopover(false);\n    setShowConferencePopover(false);\n    setShowSendDTMF(false);\n  });\n\n  const onKeyDown = ({ key }: KeyboardEvent) => {\n    if (key === 'Escape') {\n      setShowConsultPopover(false);\n      setShowTransferPopover(false);\n      setShowConferencePopover(false);\n      setShowSendDTMF(false);\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [popoverEl]);\n\n  let popoverContent;\n  // eslint-disable-next-line default-case\n  switch (true) {\n    case showConsultPopover:\n      popoverContent = (\n        <CalleePicker\n          heading={t('call_panel_consult_with_heading')}\n          onClose={() => setShowConsultPopover(false)}\n          onCall={phoneNumber => {\n            onConsultAction?.(callId, phoneNumber);\n            setShowConsultPopover(false);\n          }}\n        />\n      );\n      break;\n    case showConferencePopover:\n      popoverContent = (\n        <CalleePicker\n          heading={t('call_panel_conference_heading')}\n          onClose={() => setShowConferencePopover(false)}\n          onCall={phoneNumber => {\n            onConferenceAction?.(callId, phoneNumber);\n            setShowConferencePopover(false);\n          }}\n        />\n      );\n      break;\n    case showTransferPopover:\n      popoverContent = (\n        <CallTransfer\n          onClose={() => setShowTransferPopover(false)}\n          onTransferCall={transferData => {\n            onTransferAction?.(callId, transferData);\n            setShowTransferPopover(false);\n          }}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case showSendDTMF:\n      popoverContent = (\n        <DTMFKeypad\n          onClose={() => setShowSendDTMF(false)}\n          onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n        />\n      );\n      break;\n  }\n\n  return (\n    <StyledProgressContainer>\n      <StyledSLAProgress\n        determinate\n        placement='local'\n        slaDuration={slaDuration}\n        slaLevel={slaLevel}\n      />\n      {participants.map((item, index) => {\n        return (\n          <SummaryItem\n            container={\n              index === 0\n                ? {\n                    areas: '\"primary secondary actions\"',\n                    cols: 'auto minmax(0, 2fr) auto'\n                  }\n                : {\n                    areas: '\"visual primary secondary actions\"',\n                    cols: 'auto auto minmax(0, 2fr) auto'\n                  }\n            }\n            overflowStrategy='ellipsis'\n            visual={index !== 0 && <Icon name='arrow-up' />}\n            primary={item.name}\n            secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n            key={item.id}\n            actions={\n              <Flex container={{ wrap: 'nowrap' }}>\n                {slaConfig && index === 0 && (\n                  <Flex container={{ alignItems: 'center' }}>\n                    <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                  </Flex>\n                )}\n                {index === 0 && (\n                  <>\n                    <Button\n                      icon\n                      variant='simple'\n                      disabled={onHoldSince !== undefined}\n                      onClick={() => onMuteToggle(callId)}\n                      label={t(\n                        muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n                      )}\n                    >\n                      <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n                    </Button>\n                    <Button\n                      icon\n                      variant='simple'\n                      onClick={() => onPauseToggle(callId)}\n                      label={t(\n                        onHoldSince !== undefined\n                          ? 'call_panel_resume_call_menu_item'\n                          : 'call_panel_pause_call_menu_item'\n                      )}\n                    >\n                      <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n                    </Button>\n                  </>\n                )}\n                {index === 0 && slaConfig && (\n                  <Actions ref={moreActionsButtonRef} items={getActionItems(item)} />\n                )}\n\n                {onMergeCall && (\n                  <Button\n                    icon\n                    variant='simple'\n                    key='merge'\n                    onClick={() => onMergeCall(callId)}\n                    label={t('call_panel_merge_call_menu_item')}\n                  >\n                    <Icon name='phone-split-solid' />\n                  </Button>\n                )}\n\n                {(!slaConfig || index !== 0) && (\n                  <Button\n                    icon\n                    variant='simple'\n                    key='hang_up'\n                    onClick={() => {\n                      if (item.onEndCall) item.onEndCall(callId, item.id);\n                    }}\n                    label={t('call_panel_hangup_call_menu_item')}\n                  >\n                    <Icon name='phone-hangup-solid' />\n                  </Button>\n                )}\n              </Flex>\n            }\n          />\n        );\n      })}\n      {onHoldSince !== undefined && (\n        <Status as={StyledHoldInfo} variant='pending'>\n          {t(\n            'call_panel_call_on_hold',\n            (<StopWatch startTime={onHoldSince} />) as unknown as string\n          )}\n        </Status>\n      )}\n\n      <Popover\n        target={moreActionsButtonRef.current}\n        ref={setPopoverRef}\n        placement='top-end'\n        show={showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover}\n      >\n        {popoverContent}\n      </Popover>\n    </StyledProgressContainer>\n  );\n};\n\nexport default Call;\n"]}

package/lib/components/CallControlPanel/CallControlPanel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAYL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAMtE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAwI7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { CardHeader, CardContent, Button, useI18n, Icon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef } from '@pega/cosmos-react-core';
+import CalleePicker, { ContactsContext } from './CalleePicker';
+import Call from './Call';
+import StopWatch from './StopWatch';
+import { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';
+import { UserStatusIcon } from './CallControlPanelIcon';
+const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
+    const t = useI18n();
+    const addButtonRef = useRef(null);
+    const [showPopover, setShowPopover] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const containerRef = useConsolidatedRef(ref);
+    const [popoverEl, setPopoverRef] = useElement();
+    const actionItems = useMemo(() => {
+        return statusOptions.map(({ id, label }) => {
+            return { id, primary: label, selected: id === status };
+        });
+    }, [status, statusOptions]);
+    useOuterEvent('mousedown', [popoverEl], () => {
+        setShowPopover(false);
+    });
+    const onKeyDown = ({ key }) => {
+        if (key === 'Escape')
+            setShowPopover(false);
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [popoverEl]);
+    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;
+    const selectedStatusOption = statusOptions.find(s => s.id === status);
+    return (_jsx(ContactsContext.Provider, Object.assign({ value: {
+            contacts: contactsList,
+            onFavoriteToggle
+        } }, { children: _jsxs(StyledCallControlPanel, Object.assign({ ref: containerRef }, restProps, { isCollapsed: collapsed, style: { '--headerHeight': `${headerHeight}px` } }, { children: [_jsx(CardHeader, Object.assign({ actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('call_panel_make_new_call'), ref: addButtonRef, onClick: () => {
+                                    setShowPopover(true);
+                                } }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), 'new-call'), _jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun'), onClick: () => setCollapsed(state => !state) }, { children: _jsx(Icon, { name: 'caret-down' }, void 0) }), 'expand-collapse')] }, void 0) }, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', itemGap: 1 } }, { children: [_jsx(Icon, { name: 'phone-solid' }, void 0), _jsx(Text, Object.assign({ variant: 'h3' }, { children: heading }), void 0)] }), void 0) }), void 0), _jsxs(CardContent, Object.assign({ container: { itemGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 } }, { children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }, void 0), _jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
+                                            items: {
+                                                id: status,
+                                                text: selectedStatusOption?.label || ''
+                                            }
+                                        }, menu: {
+                                            items: actionItems,
+                                            onItemClick: id => onStatusChange(id)
+                                        }, info: message }, void 0) }), void 0), _jsx(StopWatch, { startTime: inStatusSince }, void 0)] }), void 0), calls.map(callProps => (_jsx(Call, Object.assign({}, callProps), callProps.id)))] }), void 0), showPopover && (_jsx(Popover, Object.assign({ target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end' }, { children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
+                            onAddCall(phoneNumber);
+                            setShowPopover(false);
+                        } }, void 0) }), void 0))] }), void 0) }), void 0));
+});
+export default CallControlPanel;
+//# sourceMappingURL=CallControlPanel.js.map

package/lib/components/CallControlPanel/CallControlPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  CardHeader,\n  CardContent,\n  Button,\n  useI18n,\n  Icon,\n  Flex,\n  ComboBox,\n  Text,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      status,\n      statusOptions,\n      onStatusChange,\n      inStatusSince,\n      message,\n      calls,\n      onAddCall,\n      contactsList,\n      onFavoriteToggle,\n      ...restProps\n    }: PropsWithoutRef<CallControlPanelProps>,\n    ref: CallControlPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const addButtonRef = useRef<HTMLButtonElement>(null);\n    const [showPopover, setShowPopover] = useState(false);\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n    const actionItems = useMemo(() => {\n      return statusOptions.map(({ id, label }) => {\n        return { id, primary: label, selected: id === status };\n      });\n    }, [status, statusOptions]);\n\n    useOuterEvent('mousedown', [popoverEl], () => {\n      setShowPopover(false);\n    });\n\n    const onKeyDown = ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') setShowPopover(false);\n    };\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [popoverEl]);\n\n    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;\n\n    const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n    return (\n      <ContactsContext.Provider\n        value={{\n          contacts: contactsList,\n          onFavoriteToggle\n        }}\n      >\n        <StyledCallControlPanel\n          ref={containerRef}\n          {...restProps}\n          isCollapsed={collapsed}\n          style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n        >\n          <CardHeader\n            actions={\n              <>\n                <Button\n                  icon\n                  variant='simple'\n                  key='new-call'\n                  aria-label={t('call_panel_make_new_call')}\n                  ref={addButtonRef}\n                  onClick={() => {\n                    setShowPopover(true);\n                  }}\n                >\n                  <Icon name='plus' />\n                </Button>\n                <Button\n                  icon\n                  variant='simple'\n                  key='expand-collapse'\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun')}\n                  onClick={() => setCollapsed(state => !state)}\n                >\n                  <Icon name='caret-down' />\n                </Button>\n              </>\n            }\n          >\n            <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n              <Icon name='phone-solid' />\n              <Text variant='h3'>{heading}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent container={{ itemGap: 2 }}>\n            <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n              <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n              <Flex item={{ grow: 1 }}>\n                <ComboBox\n                  label={t('call_panel_agent_status')}\n                  labelHidden\n                  selected={{\n                    items: {\n                      id: status,\n                      text: selectedStatusOption?.label || ''\n                    }\n                  }}\n                  menu={{\n                    items: actionItems,\n                    onItemClick: id => onStatusChange(id)\n                  }}\n                  info={message}\n                />\n              </Flex>\n              <StopWatch startTime={inStatusSince} />\n            </Flex>\n            {calls.map(callProps => (\n              <Call key={callProps.id} {...callProps} />\n            ))}\n          </CardContent>\n          {showPopover && (\n            <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n              <CalleePicker\n                heading={t('call_panel_new_call_heading')}\n                onClose={() => setShowPopover(false)}\n                onCall={phoneNumber => {\n                  onAddCall(phoneNumber);\n                  setShowPopover(false);\n                }}\n              />\n            </Popover>\n          )}\n        </StyledCallControlPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -0,0 +1,14 @@
+import { ProgressProps } from '@pega/cosmos-react-core';
+export declare const StyledProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHoldInfo: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").StatusProps, never>;
+export declare const StyledStatusRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSLAProgress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps & {
+    determinate: boolean;
+} & {
+    slaDuration?: number | undefined;
+    slaLevel?: number | undefined;
+}, never>;
+export declare const StyledCallControlPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
+    isCollapsed: boolean;
+}, never>;
+//# sourceMappingURL=CallControlPanel.styles.d.ts.map