@pega/cosmos-react-cs 2.0.0-dev.2.1 → 2.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EACL,aAAa,EAOb,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KAChC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAC5C,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAiDxD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkE3D,CAAC;AAMF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,aAAa,EAOb,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KAChC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAC5C,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAiDxD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkE3D,CAAC;AAMF,eAAe,OAAO,CAAC"}

package/lib/components/Article/Article.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Flex, LineSkeleton, MenuButton, MetaList, Text, defaultThemeProp } from '@pega/cosmos-react-core';
 import ArticleSkeleton from './ArticleSkeleton';
@@ -40,24 +40,9 @@ const Locale = {
 };
 const Article = (props) => {
     const { meta, title, navigation, content, primaryActions, secondaryActions, footer, skeletonize, ...restProps } = props;
-    return (React.createElement(Flex, { container: { direction: 'column', itemGap: 1 }, as: StyledArticleWrapper, ...restProps },
-        (navigation || primaryActions || secondaryActions) && (React.createElement(Flex, { container: { itemGap: 1, alignItems: 'center' } },
-            React.createElement(Flex, { container: true, item: { grow: 1 } }, navigation),
-            React.createElement(Flex, { container: { alignItems: 'center' } },
-                primaryActions,
-                secondaryActions && (React.createElement(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
-                        items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                    } }))))),
-        title ? (React.createElement(Flex, { container: true, as: StyledArticleHeader },
-            React.createElement(Text, { variant: 'h3' }, title))) : (skeletonize && React.createElement(LineSkeleton, { width: 'l' })),
-        meta && meta.length > 0 ? (React.createElement(Flex, { container: true, item: { shrink: 0 } },
-            React.createElement(MetaList, { items: meta }))) : (skeletonize && (React.createElement(Flex, { container: true },
-            React.createElement(LineSkeleton, { width: 's' }),
-            React.createElement(LineSkeleton, { width: 's' }),
-            React.createElement(LineSkeleton, { width: 's' })))),
-        skeletonize ? (React.createElement(StyledArticleContent, null,
-            React.createElement(ArticleSkeleton, null))) : (React.createElement(StyledArticleContent, null, content)),
-        footer));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper, ...restProps, children: [(navigation || primaryActions || secondaryActions) && (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Flex, { container: true, item: { grow: 1 }, children: navigation }, void 0), _jsxs(Flex, { 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, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h3', children: title }, void 0) }, void 0)) : (skeletonize && _jsx(LineSkeleton, { width: 'l' }, void 0)), meta && meta.length > 0 ? (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(MetaList, { items: meta }, void 0) }, void 0)) : (skeletonize && (_jsxs(Flex, { 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 React, { 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', itemGap: 1 }} as={StyledArticleWrapper} {...restProps}>\n      {(navigation || primaryActions || secondaryActions) && (\n        <Flex container={{ itemGap: 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAGrF,OAAO,EAA+B,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG/F,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6BD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0CvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAG9E,OAAO,EAA+B,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG/F,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6BD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAyCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Article/ArticleFooter.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, Tag, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
@@ -28,14 +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 (React.createElement(Flex, { as: StyledArticleFooter, container: {
+    return (_jsxs(Flex, { as: StyledArticleFooter, container: {
             direction: 'column',
-            itemGap: 2
-        }, ...restProps },
-        content,
-        tags && (React.createElement(Flex, { container: { wrap: 'wrap' }, as: StyledTags }, tags.map(tag => (React.createElement(Tag, { tabIndex: 0, type: 'pill', variant: 'light', key: tag.id, "data-tag-id": tag.id, title: tag.tagName, onClick: onTagClickHandler, rel: 'tag' }, tag.tagName)))))));
+            gap: 2
+        }, ...restProps, children: [content, tags && (_jsx(Flex, { container: { wrap: 'wrap' }, as: StyledTags, children: tags.map(tag => (_jsx(Tag, { tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, 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,KAAK,EAAE,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AACrF,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,oBAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,CAAC;SACX,KACG,SAAS;QAEZ,OAAO;QACP,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,IAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,oBAAC,GAAG,IACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,EACf,GAAG,EAAE,GAAG,CAAC,EAAE,iBACE,GAAG,CAAC,EAAE,EACnB,KAAK,EAAE,GAAG,CAAC,OAAO,EAClB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,IAER,GAAG,CAAC,OAAO,CACR,CACP,CAAC,CACG,CACR,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { 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        itemGap: 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,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,KACG,SAAS,aAEZ,OAAO,EACP,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,YAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,IACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,YAER,GAAG,CAAC,OAAO,IALP,GAAG,CAAC,EAAE,CAMP,CACP,CAAC,WACG,CACR,YACI,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              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/Article/ArticleSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAKL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ArticleSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAKL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Article/ArticleSkeleton.js

@@ -1,16 +1,15 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
 export const StyledArticleSkeleton = styled.div ``;
 const ArticleSkeleton = (props) => {
     const numberOfLines = 18;
-    return (React.createElement(StyledArticleSkeleton, { ...props, "aria-disabled": 'true' },
-        React.createElement(ParagraphSkeleton, null, Array.from({ length: numberOfLines }, (_, i) => {
-            const lines = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];
-            return (React.createElement(Flex, { container: { alignItems: 'center' }, key: i }, lines.map((size, j) => (
-            // eslint-disable-next-line react/no-array-index-key
-            React.createElement(LineSkeleton, { width: size, key: j })))));
-        }))));
+    return (_jsx(StyledArticleSkeleton, { ...props, "aria-disabled": 'true', children: _jsx(ParagraphSkeleton, { children: Array.from({ length: numberOfLines }, (_, i) => {
+                const lines = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];
+                return (_jsx(Flex, { container: { alignItems: 'center' }, children: lines.map((size, j) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    _jsx(LineSkeleton, { width: size }, j))) }, i));
+            }) }, void 0) }, void 0));
 };
 export default ArticleSkeleton;
 //# sourceMappingURL=ArticleSkeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,YAAY,EAEZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,qBAAqB,OAAK,KAAK,mBAAgB,MAAM;QACpD,oBAAC,iBAAiB,QACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC9C,MAAM,KAAK,GAAiC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACvF,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,IAC9C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;YACtB,oDAAoD;YACpD,oBAAC,YAAY,IAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,GAAI,CACtC,CAAC,CACG,CACR,CAAC;QACJ,CAAC,CAAC,CACgB,CACE,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  LineSkeleton,\n  LineSkeletonProps,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleSkeletonProps extends BaseProps {}\n\nexport const StyledArticleSkeleton = styled.div``;\n\nconst ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps> = (\n  props: ArticleSkeletonProps\n) => {\n  const numberOfLines = 18;\n  return (\n    <StyledArticleSkeleton {...props} aria-disabled='true'>\n      <ParagraphSkeleton>\n        {Array.from({ length: numberOfLines }, (_, i) => {\n          const lines: LineSkeletonProps['width'][] = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];\n          return (\n            <Flex container={{ alignItems: 'center' }} key={i}>\n              {lines.map((size, j) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <LineSkeleton width={size} key={j} />\n              ))}\n            </Flex>\n          );\n        })}\n      </ParagraphSkeleton>\n    </StyledArticleSkeleton>\n  );\n};\n\nexport default ArticleSkeleton;\n"]}
+{"version":3,"file":"ArticleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,YAAY,EAEZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,mBAAgB,MAAM,YACpD,KAAC,iBAAiB,cACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC9C,MAAM,KAAK,GAAiC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBACvF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtB,oDAAoD;oBACpD,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,IAAO,CAAC,CAAI,CACtC,CAAC,IAJ4C,CAAC,CAK1C,CACR,CAAC;YACJ,CAAC,CAAC,WACgB,WACE,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  LineSkeleton,\n  LineSkeletonProps,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleSkeletonProps extends BaseProps {}\n\nexport const StyledArticleSkeleton = styled.div``;\n\nconst ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps> = (\n  props: ArticleSkeletonProps\n) => {\n  const numberOfLines = 18;\n  return (\n    <StyledArticleSkeleton {...props} aria-disabled='true'>\n      <ParagraphSkeleton>\n        {Array.from({ length: numberOfLines }, (_, i) => {\n          const lines: LineSkeletonProps['width'][] = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];\n          return (\n            <Flex container={{ alignItems: 'center' }} key={i}>\n              {lines.map((size, j) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <LineSkeleton width={size} key={j} />\n              ))}\n            </Flex>\n          );\n        })}\n      </ParagraphSkeleton>\n    </StyledArticleSkeleton>\n  );\n};\n\nexport default ArticleSkeleton;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EACjB,SAAS,EACT,YAAY,EAEZ,GAAG,EAEJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmC,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGnG,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,iDAAiD;IACjD,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA0DD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,YAAY,EAEZ,GAAG,EAEJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmC,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGnG,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,iDAAiD;IACjD,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA2DD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/lib/components/ArticleList/ArticleList.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
@@ -12,12 +13,13 @@ const StyledArticleList = styled.div(props => {
     overflow: auto;
     padding: 0 calc(2 * ${theme.base.spacing});
     background: ${theme.base.palette['primary-background']};
+    border-radius: ${theme.components.card['border-radius']};
     ${StyledCard} {
       margin-bottom: calc(2 * ${theme.base.spacing});
     }
     ${StyledSummaryList} {
       flex-grow: 1;
-      margin: ${theme.base.spacing} 0;
+      margin: 0 0 ${theme.base.spacing} 0;
       list-style-type: none;
       > li:not(:last-child) {
         border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
@@ -36,7 +38,7 @@ const StyledArticleListHeader = styled.div(props => {
     position: sticky;
     top: 0;
     background: ${theme.base.palette['primary-background']};
-    padding: calc(2 * ${theme.base.spacing}) 0 ${theme.base.spacing} 0;
+    padding: calc(2 * ${theme.base.spacing}) 0 0 0;
     z-index: 2;
   `;
 });
@@ -56,13 +58,7 @@ StyledArticleListFooter.defaultProps = defaultThemeProp;
 const ArticleList = forwardRef((props, ref) => {
     const { header, children, skeletonize, footer, ...restProps } = props;
     const t = useI18n();
-    return (React.createElement(Flex, { container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y').toString(), ref: ref, ...restProps },
-        header && (React.createElement(Flex, { container: true, as: StyledArticleListHeader, "aria-label": t('article_list_filter_label_a11y').toString() }, header)),
-        React.createElement(Flex, { container: { direction: 'column' }, as: StyledSummaryList, role: 'feed' }, skeletonize ? (React.createElement(React.Fragment, null,
-            React.createElement(SummarySkeleton, null),
-            React.createElement(SummarySkeleton, null),
-            React.createElement(SummarySkeleton, null))) : (children)),
-        footer && (React.createElement(Flex, { container: true, as: StyledArticleListFooter }, footer))));
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y').toString(), ref: ref, ...restProps, children: [header && (_jsx(Flex, { container: true, as: StyledArticleListHeader, "aria-label": t('article_list_filter_label_a11y').toString(), children: header }, void 0)), _jsx(Flex, { 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, { 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 React, {\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: ${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 ${theme.base.spacing} 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    border-radius: ${theme.components.card['border-radius']};\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.d.ts

@@ -1,6 +1,9 @@
 import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';
-import { SearchInput, BaseProps, AsProp, Action } from '@pega/cosmos-react-core';
+import { SearchInput, BaseProps, AsProp, Action, Icon } from '@pega/cosmos-react-core';
 export interface ArticleListHeaderProps extends BaseProps, AsProp {
+    /** Header Icon and Text */
+    icon?: ReactElement<typeof Icon>;
+    headerText: string;
     /** Primary data: Drop in elements related to search or filtering of articles */
     primary: {
         search: ReactElement<typeof SearchInput>;

package/lib/components/ArticleList/ArticleListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AAyCD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CA6ChE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAGL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA2DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CA+ChE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -1,27 +1,36 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button, Flex, Form, MenuButton, useI18n } from '@pega/cosmos-react-core';
-const StyledArticleHeader = styled.div `
-  width: 100%;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';
+const StyledArticleHeader = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    gap: 0;
 
-  button[type='submit'] {
-    height: 0;
-    min-height: 0;
-    width: 0.0625rem;
-    clip-path: inset(50%);
-    clip: rect(0, 0, 0, 0);
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    border: 0;
-  }
-  > div:last-child {
-    margin: 0;
-  }
-  .secondary {
-    margin: 0.5rem 0;
-  }
-  .secondary > * {
+    button[type='submit'] {
+      height: 0;
+      min-height: 0;
+      width: 0.0625rem;
+      clip-path: inset(50%);
+      clip: rect(0, 0, 0, 0);
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+      border: 0;
+    }
+    > div:last-child {
+      margin: 0;
+    }
+
+    ${StyledFormContent} {
+      gap: ${theme.base.spacing};
+    }
+  `;
+});
+StyledArticleHeader.defaultProps = defaultThemeProp;
+const StyledSecondaryContainer = styled(Flex) `
+  margin: 0.5rem 0;
+  & > * {
     flex-grow: 1;
   }
 `;
@@ -34,26 +43,26 @@ const StyledHeaderActions = styled.div `
     margin: 0;
   }
 `;
+const StyledArticleListHeaderText = styled(Text) `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
+`;
 const Locale = {
     // FIXME: TR
     moreActions: 'More actions'
 };
 const ArticleListHeader = (props) => {
-    const { as = Form, primary, secondary, onSubmit, ...restProps } = props;
+    const { as = Form, primary, secondary, onSubmit, icon, headerText, ...restProps } = props;
     const t = useI18n();
-    return (React.createElement(StyledArticleHeader, { as: as, actions: React.createElement(Button, { type: 'submit', "aria-hidden": 'true', tabIndex: '-1' }, t('article_list_header_submit_label')), role: 'search', onSubmit: (ev) => {
+    return (_jsxs(StyledArticleHeader, { as: as, actions: _jsx(Button, { type: 'submit', "aria-hidden": 'true', tabIndex: '-1', children: t('article_list_header_submit_label') }, void 0), role: 'search', onSubmit: (ev) => {
             ev.preventDefault();
             if (onSubmit)
                 onSubmit(ev);
-        }, ...restProps },
-        React.createElement(Flex, { container: { alignItems: 'center', itemGap: 1 } },
-            React.createElement(Flex, { item: { grow: 1 } }, primary.search),
-            React.createElement(Flex, { container: true, as: StyledHeaderActions },
-                primary.followedFilter,
-                primary.actions && (React.createElement(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
-                        items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                    } })))),
-        secondary && (React.createElement(Flex, { container: { itemGap: 1 }, className: 'secondary' }, secondary))));
+        }, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon, _jsx(StyledArticleListHeaderText, { 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, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }, void 0), _jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter }, void 0)] }, void 0), secondary && (_jsx(StyledSecondaryContainer, { 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":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,UAAU,EAEV,OAAO,EAIR,MAAM,yBAAyB,CAAC;AAejC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBrC,CAAC;AACF;YACY;AACZ,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMrC,CAAC;AAEF,MAAM,MAAM,GAAG;IACb,YAAY;IACZ,WAAW,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,iBAAiB,GAA8C,CACnE,KAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,oBAAC,mBAAmB,IAClB,EAAE,EAAE,EAAE,EACN,OAAO,EACL,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,QAAQ,EAAC,IAAI,IACnD,CAAC,CAAC,kCAAkC,CAAC,CAC/B,EAEX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAc,EAAE,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,QAAQ;gBAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC,KACG,SAAS;QAEb,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE;YACnD,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAG,OAAO,CAAC,MAAM,CAAQ;YAChD,oBAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,mBAAmB;gBACpC,OAAO,CAAC,cAAc;gBACtB,OAAO,CAAC,OAAO,IAAI,CAClB,oBAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,MAAM,CAAC,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;wBACJ,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;qBAChF,GACD,CACH,CACI,CACF;QACN,SAAS,IAAI,CACZ,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,SAAS,EAAC,WAAW,IACnD,SAAS,CACL,CACR,CACmB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import React, { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\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`\n  width: 100%;\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  .secondary {\n    margin: 0.5rem 0;\n  }\n  .secondary > * {\n    flex-grow: 1;\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 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, ...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', itemGap: 1 }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        <Flex container as={StyledHeaderActions}>\n          {primary.followedFilter}\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>\n      {secondary && (\n        <Flex container={{ itemGap: 1 }} className='secondary'>\n          {secondary}\n        </Flex>\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAIL,IAAI,EAEJ,IAAI,EACJ,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IAC/D,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAaD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAezE,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAIL,IAAI,EAEJ,IAAI,EACJ,SAAS,EACT,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IAC/D,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAezE,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/components/ArticleList/ArticleSummary.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { CardContent, CardFooter, CardHeader, MetaList } from '@pega/cosmos-react-core';
+import { CardContent, CardFooter, CardHeader, MetaList, StyledText } from '@pega/cosmos-react-core';
 import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
@@ -12,15 +12,18 @@ const ArticleCard = styled(StyledCard) `
       padding-left: 0;
       padding-right: 0;
     }
+
+    > ${StyledCardContent} > ${StyledText} {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
   }
 `;
 const ArticleSummary = (props) => {
     const { header, content, meta, articleID, ...restProps } = props;
-    return (React.createElement(ArticleCard, { as: 'li', role: 'article', key: articleID, ...restProps },
-        header ? React.createElement(CardHeader, null, header) : null,
-        React.createElement(CardContent, null, content),
-        meta && (React.createElement(CardFooter, null,
-            React.createElement(MetaList, { items: meta })))));
+    return (_jsxs(ArticleCard, { 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":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAEV,QAAQ,EAIT,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;;;;;CAKtE,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,oBAAC,WAAW,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,KAAM,SAAS;QAC9D,MAAM,CAAC,CAAC,CAAC,oBAAC,UAAU,QAAE,MAAM,CAAc,CAAC,CAAC,CAAC,IAAI;QAClD,oBAAC,WAAW,QAAE,OAAO,CAAe;QACnC,IAAI,IAAI,CACP,oBAAC,UAAU;YACT,oBAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,CACd,CACd,CACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import React, { 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} 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`;\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,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,KAAqB,SAAS,aAC9D,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,KAPsC,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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummarySkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAIL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAwB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SummarySkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAIL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAwB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/ArticleList/SummarySkeleton.js

@@ -1,17 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
 const SummarySkeleton = (props) => {
-    return (React.createElement(Flex, { as: 'li', container: {
+    return (_jsxs(Flex, { as: 'li', container: {
             direction: 'column'
-        }, ...props, "aria-disabled": 'true' },
-        React.createElement(LineSkeleton, { variant: 'link', width: 'l' }),
-        React.createElement(ParagraphSkeleton, null,
-            React.createElement(LineSkeleton, null),
-            React.createElement(LineSkeleton, { width: 's' })),
-        React.createElement(Flex, { container: { alignItems: 'center' } },
-            React.createElement(LineSkeleton, { width: 's' }),
-            React.createElement(LineSkeleton, { width: 's' }),
-            React.createElement(LineSkeleton, { width: 's' }))));
+        }, ...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, { 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":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,OAAO,CACL,oBAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,KAAK,mBACK,MAAM;QAEpB,oBAAC,YAAY,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,GAAG,GAAG;QACzC,oBAAC,iBAAiB;YAChB,oBAAC,YAAY,OAAG;YAChB,oBAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,CACR;QACpB,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YACvC,oBAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG;YAC1B,oBAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG;YAC1B,oBAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,CACrB,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { 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,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,KAAK,mBACK,MAAM,aAEpB,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,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,WAAG,YACrB,YACF,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.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { CaseViewProps } from '@pega/cosmos-react-work';
+export interface CSCaseViewProps extends CaseViewProps {
+    intelligentGuidance?: JSX.Element;
+}
+declare const CSCaseView: FC<CSCaseViewProps & ForwardProps>;
+export default CSCaseView;
+//# sourceMappingURL=CSCaseView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CSCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CSCaseView/CSCaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAY,aAAa,EAAuB,MAAM,yBAAyB,CAAC;AAEvF,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACnC;AAUD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAYlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CSCaseView/CSCaseView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { CaseView, StyledSummaryRegion } from '@pega/cosmos-react-work';
+const StyledCSCaseView = styled(CaseView)(({ theme }) => {
+    return css `
+    ${StyledSummaryRegion} {
+      padding-block-end: calc(${theme.base.spacing} + 3rem);
+    }
+  `;
+});
+const CSCaseView = forwardRef(({ intelligentGuidance, ...restProps }, ref) => {
+    return (_jsxs(_Fragment, { children: [_jsx(StyledCSCaseView, { ...restProps, ref: ref }, void 0), intelligentGuidance] }, void 0));
+});
+export default CSCaseView;
+//# sourceMappingURL=CSCaseView.js.map

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

@@ -0,0 +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,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,WAAI,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/CSCaseView/index.d.ts

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

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

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

package/lib/components/CSCaseView/index.js

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