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

package/lib/components/Email/Email.js

@@ -1,180 +1,153 @@
-import React, { forwardRef, Fragment, useState } from 'react';
-import { Text, SummaryItem, Avatar, Flex, EmailDisplay, Button, Icon, MenuButton, Sentiment, Tag, useOuterEvent, Popover, useElement, CardContent, useI18n, FileDisplay, Selectable } from '@pega/cosmos-react-core';
-import { StyledEmail, StyledEmailDisplay, StyledEmailHeader, StyledFromEmailDisplay, StyledEmailMoreInfoButton, StyledEmailMoreInfoPopover, StyledEmailPrimaryFieldValueList, StyledEmailBody, StyledEmailSecondaryFieldValueList } from './Email.styles';
-const renderEmailUserList = ({ emailUsers, showEmailAddress, showShortName }) => {
-    return (React.createElement(React.Fragment, null, emailUsers.map(({ emailAddress, fullName, shortName }, i) => (React.createElement(Fragment, { key: emailAddress },
-        i === 0 ? '' : ', ',
-        React.createElement(EmailDisplay, { value: emailAddress, displayText: `${showShortName ? shortName : fullName}${showEmailAddress ? ` <${emailAddress}>` : ''}`, variant: 'text', as: StyledEmailDisplay }))))));
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, Fragment, useRef, useState } from 'react';
+import { Text, SummaryItem, Avatar, Flex, EmailDisplay, Button, Icon, Sentiment, useOuterEvent, Popover, useElement, CardContent, useI18n, FileDisplay, useBreakpoint, DateTimeDisplay, useConfiguration, MetaList } from '@pega/cosmos-react-core';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import EmailEntity from './EmailEntity';
+import { StyledEmail, StyledEmailDisplay, StyledEmailHeader, StyledFromEmailDisplay, StyledEmailMoreInfoButton, StyledEmailMoreInfoPopover, StyledEmailPrimaryFieldValueList, StyledEmailBody, StyledEmailSecondaryFieldValueList, StyledSuggestedRepliesButton, StyledSuggestedRepliesMenuButton } from './Email.styles';
+const EmailDisplayList = ({ emailUsers, showEmailAddress, showShortName }) => {
+    return (_jsx(_Fragment, { children: emailUsers.map(({ emailAddress, fullName, shortName }, i) => (_jsxs(Fragment, { children: [i === 0 ? '' : '; ', _jsx(EmailDisplay, { value: emailAddress, displayText: `${showShortName ? shortName : fullName}${showEmailAddress ? ` <${emailAddress}>` : ''}`, variant: 'text', as: StyledEmailDisplay }, void 0)] }, emailAddress))) }, void 0));
 };
 const OVERFLOW_TO_EMAIL_COUNT = 2;
 const OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;
 const Email = forwardRef((props, ref) => {
-    const { id, from, to = [], cc = [], bcc = [], actions = [], timeStamp, sentiment, subject, body, attachments = [], tags, suggestions = [], onReply, onForward, onReplyAll, onSuggestionClick, ...restProps } = props;
+    const { id, from, to = [], cc = [], bcc = [], actions = [], timeStamp, sentiment, subject, body, attachments = [], suggestions = [], entityHighlightMapping = [], onReply, onForward, onReplyAll, onSuggestionClick, ...restProps } = props;
     const t = useI18n();
     const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement(null);
     const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);
     const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement(null);
     const emailMoreInfoFields = [];
+    const headerRef = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });
+    const { locale } = useConfiguration();
+    if (from) {
+        emailMoreInfoFields.push({
+            id: 'from',
+            name: t('from'),
+            value: from.emailAddress
+        });
+    }
     if (to.length > 0) {
         emailMoreInfoFields.push({
             id: 'to',
             name: t('to'),
-            value: renderEmailUserList({ emailUsers: to, showEmailAddress: true })
+            value: _jsx(EmailDisplayList, { emailUsers: to, showEmailAddress: true }, void 0)
         });
     }
     if (cc.length > 0) {
         emailMoreInfoFields.push({
             id: 'cc',
             name: 'CC',
-            value: renderEmailUserList({ emailUsers: cc, showEmailAddress: true })
+            value: _jsx(EmailDisplayList, { emailUsers: cc, showEmailAddress: true }, void 0)
         });
     }
     if (bcc.length > 0) {
         emailMoreInfoFields.push({
             id: 'BCC',
             name: 'BCC',
-            value: renderEmailUserList({ emailUsers: bcc, showEmailAddress: true })
+            value: _jsx(EmailDisplayList, { emailUsers: bcc, showEmailAddress: true }, void 0)
         });
     }
     if (timeStamp) {
         emailMoreInfoFields.push({
             id: 'date',
             name: t('date'),
-            value: timeStamp
+            value: (_jsxs(Text, { children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0))
         });
     }
     useOuterEvent('mousedown', [emailMoreInfoPopover], () => {
         setShowEmailMoreInfo(false);
     });
-    const primaryFields = [];
-    if (subject) {
-        primaryFields.push({
-            id: 'subject',
-            name: t('subject'),
-            value: subject
-        });
-    }
     const secondaryFields = [];
-    if (tags) {
+    if (attachments.length > 0) {
         secondaryFields.push({
-            id: 'tags',
-            name: tags.label,
-            value: (React.createElement(Flex, { container: { itemGap: 1, wrap: 'wrap' } }, tags.dismissable
-                ? tags.items.map(tag => (React.createElement(Selectable, { id: tag, key: tag, readOnly: true, onRemove: tags.onRemove }, tag)))
-                : tags.items.map(tag => React.createElement(Tag, null, tag))))
+            id: 'attachments',
+            name: '',
+            value: (_jsx(Flex, { container: { gap: 1, wrap: 'wrap' }, children: attachments.map(attachmentProps => (_createElement(FileDisplay, { ...attachmentProps, key: attachmentProps.value }))) }, void 0))
         });
     }
     if (suggestions.length > 0) {
         secondaryFields.push({
             id: 'suggested_replies',
-            name: t('suggested_replies'),
-            value: (React.createElement(Flex, { container: { itemGap: 1, wrap: 'wrap' } },
-                suggestions
-                    .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)
-                    .map(({ id: suggestionId, title }) => (React.createElement(Button, { variant: 'secondary', key: suggestionId, onClick: () => {
-                        onSuggestionClick === null || onSuggestionClick === void 0 ? void 0 : onSuggestionClick(id, suggestionId);
-                    } }, title))),
-                suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (React.createElement(MenuButton, { text: 'other responses...', key: 'other_responses', variant: 'secondary', menu: {
-                        items: suggestions
-                            .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)
-                            .map(({ id: suggestionId, title }) => {
-                            return {
-                                primary: title,
-                                id: suggestionId,
-                                onClick: () => {
-                                    onSuggestionClick === null || onSuggestionClick === void 0 ? void 0 : onSuggestionClick(id, suggestionId);
-                                }
-                            };
-                        })
-                    } }))))
+            name: '',
+            value: (_jsxs(Flex, { container: { wrap: 'wrap' }, children: [suggestions
+                        .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)
+                        .map(({ id: suggestionId, title }) => (_jsx(StyledSuggestedRepliesButton, { variant: 'secondary', onClick: () => {
+                            onSuggestionClick?.(id, suggestionId);
+                        }, children: title }, suggestionId))), suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (_jsx(StyledSuggestedRepliesMenuButton, { text: 'Other responses', variant: 'secondary', menu: {
+                            items: suggestions
+                                .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)
+                                .map(({ id: suggestionId, title }) => {
+                                return {
+                                    primary: title,
+                                    id: suggestionId,
+                                    onClick: () => {
+                                        onSuggestionClick?.(id, suggestionId);
+                                    }
+                                };
+                            })
+                        } }, 'other_responses'))] }, void 0))
         });
     }
-    if (attachments.length > 0) {
-        secondaryFields.push({
-            id: 'attachments',
-            name: t('attachments'),
-            value: (React.createElement(Flex, { container: { itemGap: 1, wrap: 'wrap' } }, attachments.map(attachmentProps => (React.createElement(FileDisplay, { ...attachmentProps, key: attachmentProps.value })))))
+    let renderedBody = body;
+    // Apply entity highlighting only on string body
+    if (typeof body === 'string') {
+        const entityConfigs = entityHighlightMapping.map(entity => {
+            const regExp = RegExp(entity.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+            return {
+                type: 'entity',
+                regexPattern: regExp,
+                component: () => _jsx(EmailEntity, { entity: entity }, void 0)
+            };
         });
+        renderedBody = (_jsx(RichTextViewer, { content: body, type: 'html', interactionRenderers: entityConfigs }, void 0));
     }
-    return (React.createElement(Flex, { as: StyledEmail, container: {
+    const emailMetaListItems = [
+        _jsxs(Text, { variant: 'secondary', children: [`${t('to')}: `, _jsx(EmailDisplayList, { emailUsers: to.slice(0, OVERFLOW_TO_EMAIL_COUNT), showShortName: true }, void 0), to.length > OVERFLOW_TO_EMAIL_COUNT &&
+                    `; +${to.length - OVERFLOW_TO_EMAIL_COUNT} ${t('more')} `] }, void 0),
+        _jsxs(Text, { variant: 'secondary', children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0)
+    ];
+    return (_jsxs(Flex, { as: StyledEmail, container: {
             direction: 'column',
-            itemGap: 1
-        }, ref: ref, ...restProps },
-        React.createElement(SummaryItem, { as: StyledEmailHeader, visual: React.createElement(Avatar, { ...from.avatarProps, name: from.fullName }), primary: React.createElement(Flex, { container: {
-                    itemGap: 1,
-                    alignItems: 'center'
-                } },
-                React.createElement(EmailDisplay, { value: from.emailAddress, displayText: from.fullName, variant: 'text', as: StyledFromEmailDisplay }),
-                sentiment && React.createElement(Sentiment, { ...sentiment, hideLabel: true })), secondary: React.createElement(Flex, { container: {
-                    itemGap: 1,
-                    alignItems: 'start'
-                } },
-                React.createElement(Text, { variant: 'secondary' },
-                    t('to'),
-                    ":",
-                    ' ',
-                    renderEmailUserList({
-                        emailUsers: to.slice(0, OVERFLOW_TO_EMAIL_COUNT),
-                        showShortName: true
-                    }),
-                    ' ',
-                    to.length > OVERFLOW_TO_EMAIL_COUNT
-                        ? `, ${to.length - OVERFLOW_TO_EMAIL_COUNT} ${t('more')}, `
-                        : '',
-                    timeStamp ? `${t('on')} ${timeStamp}` : ''),
-                React.createElement(Button, { icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
-                        setShowEmailMoreInfo(true);
-                    }, "aria-label": t('show_more'), title: t('show_more') },
-                    React.createElement(Icon, { name: 'arrow-micro-down' })),
-                React.createElement(Popover, { as: StyledEmailMoreInfoPopover, show: showEmailMoreInfo, ref: setEmailMoreInfoPopover, target: emailMoreInfoBtnRef, placement: 'bottom' },
-                    React.createElement(CardContent, null,
-                        React.createElement(StyledEmailPrimaryFieldValueList, { fields: emailMoreInfoFields })))), actions: React.createElement(Flex, { container: {
-                    itemGap: 1
-                } },
-                React.createElement(Button, { icon: true, variant: 'simple', onClick: () => {
-                        onReply === null || onReply === void 0 ? void 0 : onReply(id);
-                    }, "aria-label": t('reply'), title: t('reply') },
-                    React.createElement(Icon, { name: 'reply' })),
-                actions) }),
-        React.createElement(Flex, { container: {
-                direction: 'column',
-                itemGap: 1
-            } },
-            React.createElement(StyledEmailPrimaryFieldValueList, { fields: primaryFields }),
-            React.createElement(StyledEmailBody, null, body)),
-        React.createElement(Flex, { container: {
-                direction: 'column',
-                itemGap: 1
-            } },
-            React.createElement(StyledEmailSecondaryFieldValueList, { fields: secondaryFields }),
-            React.createElement("div", null,
-                React.createElement(Button, { variant: 'simple', onClick: () => {
-                        onReply === null || onReply === void 0 ? void 0 : onReply(id);
-                    } },
-                    React.createElement(Flex, { container: {
-                            itemGap: 1,
-                            alignItems: 'center'
-                        } },
-                        React.createElement(Icon, { name: 'reply' }),
-                        React.createElement("span", null, t('reply')))),
-                onReplyAll && (React.createElement(Button, { variant: 'simple', onClick: () => {
-                        onReplyAll(id);
-                    } },
-                    React.createElement(Flex, { container: {
-                            itemGap: 1,
-                            alignItems: 'center'
-                        } },
-                        React.createElement(Icon, { name: 'reply-all' }),
-                        React.createElement("span", null, t('reply_all'))))),
-                onForward && (React.createElement(Button, { variant: 'simple', onClick: () => {
-                        onForward(id);
-                    } },
-                    React.createElement(Flex, { container: {
-                            itemGap: 1,
-                            alignItems: 'center'
-                        } },
-                        React.createElement(Icon, { name: 'forward' }),
-                        React.createElement("span", null, t('forward')))))))));
+            gap: 1
+        }, ref: ref, ...restProps, children: [_jsx(SummaryItem, { as: StyledEmailHeader, visual: _jsx(Avatar, { ...from.avatarProps, name: from.fullName }, void 0), ref: headerRef, primary: _jsxs(Flex, { container: {
+                        gap: 1,
+                        alignItems: 'center'
+                    }, children: [_jsx(StyledFromEmailDisplay, { value: from.emailAddress, displayText: from.fullName, variant: 'text' }, void 0), sentiment && _jsx(Sentiment, { ...sentiment, labelHidden: true }, void 0)] }, void 0), secondary: _jsxs(Flex, { container: {
+                        gap: 0,
+                        alignItems: 'start',
+                        direction: 'column'
+                    }, children: [_jsxs(Flex, { container: {
+                                gap: 0,
+                                alignItems: 'start'
+                            }, children: [_jsx(MetaList, { items: isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]] }, void 0), _jsx(Button, { icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
+                                        setShowEmailMoreInfo(true);
+                                    }, label: t('show_more'), children: _jsx(Icon, { name: 'arrow-micro-down' }, void 0) }, void 0), _jsx(Popover, { as: StyledEmailMoreInfoPopover, show: showEmailMoreInfo, ref: setEmailMoreInfoPopover, target: emailMoreInfoBtnRef, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(StyledEmailPrimaryFieldValueList, { fields: emailMoreInfoFields }, void 0) }, void 0) }, void 0)] }, void 0), !isSmallOrAbove && timeStamp && emailMetaListItems[1]] }, void 0), actions: _jsx(Flex, { container: {
+                        gap: 1
+                    }, children: actions }, void 0) }, void 0), _jsxs(Flex, { container: {
+                    direction: 'column',
+                    gap: 2,
+                    pad: [0, 2]
+                }, children: [subject && (_jsxs(Text, { variant: 'primary', children: [t('subject'), ": ", subject] }, void 0)), _jsx(StyledEmailBody, { children: renderedBody }, void 0)] }, void 0), _jsxs(Flex, { container: {
+                    direction: 'column',
+                    gap: 1,
+                    pad: [0, 2]
+                }, children: [_jsx(StyledEmailSecondaryFieldValueList, { fields: secondaryFields }, void 0), _jsxs("div", { children: [_jsx(Button, { variant: 'simple', onClick: () => {
+                                    onReply?.(id);
+                                }, children: _jsxs(Flex, { container: {
+                                        gap: 1,
+                                        alignItems: 'center'
+                                    }, children: [_jsx(Icon, { name: 'reply' }, void 0), _jsx("span", { children: t('reply') }, void 0)] }, void 0) }, void 0), onReplyAll && (_jsx(Button, { variant: 'simple', onClick: () => {
+                                    onReplyAll(id);
+                                }, children: _jsxs(Flex, { container: {
+                                        gap: 1,
+                                        alignItems: 'center'
+                                    }, children: [_jsx(Icon, { name: 'reply-all' }, void 0), _jsx("span", { children: t('reply_all') }, void 0)] }, void 0) }, void 0)), onForward && (_jsx(Button, { variant: 'simple', onClick: () => {
+                                    onForward(id);
+                                }, children: _jsxs(Flex, { container: {
+                                        gap: 1,
+                                        alignItems: 'center'
+                                    }, children: [_jsx(Icon, { name: 'forward' }, void 0), _jsx("span", { children: t('forward') }, void 0)] }, void 0) }, void 0))] }, void 0)] }, void 0)] }, void 0));
 });
 export default Email;
 //# sourceMappingURL=Email.js.map

package/lib/components/Email/Email.js.map

@@ -1 +1 @@
-{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, Fragment, FunctionComponent, PropsWithoutRef, useState } from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  SummaryItem,\n  Avatar,\n  Flex,\n  EmailDisplay,\n  Button,\n  Icon,\n  MenuButton,\n  FieldValueListProps,\n  Sentiment,\n  Tag,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  Selectable\n} from '@pega/cosmos-react-core';\n\nimport { EmailUser, EmailProps } from './Email.types';\nimport {\n  StyledEmail,\n  StyledEmailDisplay,\n  StyledEmailHeader,\n  StyledFromEmailDisplay,\n  StyledEmailMoreInfoButton,\n  StyledEmailMoreInfoPopover,\n  StyledEmailPrimaryFieldValueList,\n  StyledEmailBody,\n  StyledEmailSecondaryFieldValueList\n} from './Email.styles';\n\nconst renderEmailUserList = ({\n  emailUsers,\n  showEmailAddress,\n  showShortName\n}: {\n  emailUsers: EmailUser[];\n  showEmailAddress?: boolean;\n  showShortName?: boolean;\n}) => {\n  return (\n    <>\n      {emailUsers.map(({ emailAddress, fullName, shortName }, i) => (\n        <Fragment key={emailAddress}>\n          {i === 0 ? '' : ', '}\n          <EmailDisplay\n            value={emailAddress}\n            displayText={`${showShortName ? shortName : fullName}${\n              showEmailAddress ? ` <${emailAddress}>` : ''\n            }`}\n            variant='text'\n            as={StyledEmailDisplay}\n          />\n        </Fragment>\n      ))}\n    </>\n  );\n};\n\nconst OVERFLOW_TO_EMAIL_COUNT = 2;\nconst OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;\n\nconst Email: FunctionComponent<EmailProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailProps>, ref: EmailProps['ref']) => {\n    const {\n      id,\n      from,\n      to = [],\n      cc = [],\n      bcc = [],\n      actions = [],\n      timeStamp,\n      sentiment,\n      subject,\n      body,\n      attachments = [],\n      tags,\n      suggestions = [],\n      onReply,\n      onForward,\n      onReplyAll,\n      onSuggestionClick,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement<HTMLButtonElement>(null);\n    const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);\n    const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement<HTMLDivElement>(null);\n    const emailMoreInfoFields: FieldValueListProps['fields'] = [];\n    if (to.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'to',\n        name: t('to'),\n        value: renderEmailUserList({ emailUsers: to, showEmailAddress: true })\n      });\n    }\n\n    if (cc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'cc',\n        name: 'CC',\n        value: renderEmailUserList({ emailUsers: cc, showEmailAddress: true })\n      });\n    }\n\n    if (bcc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'BCC',\n        name: 'BCC',\n        value: renderEmailUserList({ emailUsers: bcc, showEmailAddress: true })\n      });\n    }\n\n    if (timeStamp) {\n      emailMoreInfoFields.push({\n        id: 'date',\n        name: t('date'),\n        value: timeStamp\n      });\n    }\n\n    useOuterEvent('mousedown', [emailMoreInfoPopover], () => {\n      setShowEmailMoreInfo(false);\n    });\n\n    const primaryFields: FieldValueListProps['fields'] = [];\n    if (subject) {\n      primaryFields.push({\n        id: 'subject',\n        name: t('subject'),\n        value: subject\n      });\n    }\n\n    const secondaryFields: FieldValueListProps['fields'] = [];\n    if (tags) {\n      secondaryFields.push({\n        id: 'tags',\n        name: tags.label,\n        value: (\n          <Flex container={{ itemGap: 1, wrap: 'wrap' }}>\n            {tags.dismissable\n              ? tags.items.map(tag => (\n                  <Selectable id={tag} key={tag} readOnly onRemove={tags.onRemove}>\n                    {tag}\n                  </Selectable>\n                ))\n              : tags.items.map(tag => <Tag>{tag}</Tag>)}\n          </Flex>\n        )\n      });\n    }\n\n    if (suggestions.length > 0) {\n      secondaryFields.push({\n        id: 'suggested_replies',\n        name: t('suggested_replies'),\n        value: (\n          <Flex container={{ itemGap: 1, wrap: 'wrap' }}>\n            {suggestions\n              .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)\n              .map(({ id: suggestionId, title }) => (\n                <Button\n                  variant='secondary'\n                  key={suggestionId}\n                  onClick={() => {\n                    onSuggestionClick?.(id, suggestionId);\n                  }}\n                >\n                  {title}\n                </Button>\n              ))}\n            {suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (\n              <MenuButton\n                text='other responses...'\n                key='other_responses'\n                variant='secondary'\n                menu={{\n                  items: suggestions\n                    .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)\n                    .map(({ id: suggestionId, title }) => {\n                      return {\n                        primary: title,\n                        id: suggestionId,\n                        onClick: () => {\n                          onSuggestionClick?.(id, suggestionId);\n                        }\n                      };\n                    })\n                }}\n              />\n            )}\n          </Flex>\n        )\n      });\n    }\n\n    if (attachments.length > 0) {\n      secondaryFields.push({\n        id: 'attachments',\n        name: t('attachments'),\n        value: (\n          <Flex container={{ itemGap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachmentProps => (\n              <FileDisplay {...attachmentProps} key={attachmentProps.value} />\n            ))}\n          </Flex>\n        )\n      });\n    }\n\n    return (\n      <Flex\n        as={StyledEmail}\n        container={{\n          direction: 'column',\n          itemGap: 1\n        }}\n        ref={ref}\n        {...restProps}\n      >\n        <SummaryItem\n          as={StyledEmailHeader}\n          visual={<Avatar {...from.avatarProps} name={from.fullName} />}\n          primary={\n            <Flex\n              container={{\n                itemGap: 1,\n                alignItems: 'center'\n              }}\n            >\n              <EmailDisplay\n                value={from.emailAddress}\n                displayText={from.fullName}\n                variant='text'\n                as={StyledFromEmailDisplay}\n              />\n              {sentiment && <Sentiment {...sentiment} hideLabel />}\n            </Flex>\n          }\n          secondary={\n            <Flex\n              container={{\n                itemGap: 1,\n                alignItems: 'start'\n              }}\n            >\n              <Text variant='secondary'>\n                {t('to')}:{' '}\n                {renderEmailUserList({\n                  emailUsers: to.slice(0, OVERFLOW_TO_EMAIL_COUNT),\n                  showShortName: true\n                })}{' '}\n                {to.length > OVERFLOW_TO_EMAIL_COUNT\n                  ? `, ${to.length - OVERFLOW_TO_EMAIL_COUNT} ${t('more')}, `\n                  : ''}\n                {timeStamp ? `${t('on')} ${timeStamp}` : ''}\n              </Text>\n              <Button\n                icon\n                variant='simple'\n                as={StyledEmailMoreInfoButton}\n                ref={setEmailMoreInfoBtnRef}\n                onClick={() => {\n                  setShowEmailMoreInfo(true);\n                }}\n                aria-label={t('show_more')}\n                title={t('show_more')}\n              >\n                <Icon name='arrow-micro-down' />\n              </Button>\n              <Popover\n                as={StyledEmailMoreInfoPopover}\n                show={showEmailMoreInfo}\n                ref={setEmailMoreInfoPopover}\n                target={emailMoreInfoBtnRef}\n                placement='bottom'\n              >\n                <CardContent>\n                  <StyledEmailPrimaryFieldValueList fields={emailMoreInfoFields} />\n                </CardContent>\n              </Popover>\n            </Flex>\n          }\n          actions={\n            <Flex\n              container={{\n                itemGap: 1\n              }}\n            >\n              <Button\n                icon\n                variant='simple'\n                onClick={() => {\n                  onReply?.(id);\n                }}\n                aria-label={t('reply')}\n                title={t('reply')}\n              >\n                <Icon name='reply' />\n              </Button>\n              {actions}\n            </Flex>\n          }\n        />\n        <Flex\n          container={{\n            direction: 'column',\n            itemGap: 1\n          }}\n        >\n          <StyledEmailPrimaryFieldValueList fields={primaryFields} />\n          <StyledEmailBody>{body}</StyledEmailBody>\n        </Flex>\n        <Flex\n          container={{\n            direction: 'column',\n            itemGap: 1\n          }}\n        >\n          <StyledEmailSecondaryFieldValueList fields={secondaryFields} />\n          <div>\n            <Button\n              variant='simple'\n              onClick={() => {\n                onReply?.(id);\n              }}\n            >\n              <Flex\n                container={{\n                  itemGap: 1,\n                  alignItems: 'center'\n                }}\n              >\n                <Icon name='reply' />\n                <span>{t('reply')}</span>\n              </Flex>\n            </Button>\n            {onReplyAll && (\n              <Button\n                variant='simple'\n                onClick={() => {\n                  onReplyAll(id);\n                }}\n              >\n                <Flex\n                  container={{\n                    itemGap: 1,\n                    alignItems: 'center'\n                  }}\n                >\n                  <Icon name='reply-all' />\n                  <span>{t('reply_all')}</span>\n                </Flex>\n              </Button>\n            )}\n            {onForward && (\n              <Button\n                variant='simple'\n                onClick={() => {\n                  onForward(id);\n                }}\n              >\n                <Flex\n                  container={{\n                    itemGap: 1,\n                    alignItems: 'center'\n                  }}\n                >\n                  <Icon name='forward' />\n                  <span>{t('forward')}</span>\n                </Flex>\n              </Button>\n            )}\n          </div>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Email;\n"]}
+{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  SummaryItem,\n  Avatar,\n  Flex,\n  EmailDisplay,\n  Button,\n  Icon,\n  FieldValueListProps,\n  Sentiment,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  useBreakpoint,\n  DateTimeDisplay,\n  useConfiguration,\n  MetaList,\n  MetaListProps\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport EmailEntity from './EmailEntity';\nimport { EmailUser, EmailProps } from './Email.types';\nimport {\n  StyledEmail,\n  StyledEmailDisplay,\n  StyledEmailHeader,\n  StyledFromEmailDisplay,\n  StyledEmailMoreInfoButton,\n  StyledEmailMoreInfoPopover,\n  StyledEmailPrimaryFieldValueList,\n  StyledEmailBody,\n  StyledEmailSecondaryFieldValueList,\n  StyledSuggestedRepliesButton,\n  StyledSuggestedRepliesMenuButton\n} from './Email.styles';\n\nconst EmailDisplayList = ({\n  emailUsers,\n  showEmailAddress,\n  showShortName\n}: {\n  emailUsers: EmailUser[];\n  showEmailAddress?: boolean;\n  showShortName?: boolean;\n}) => {\n  return (\n    <>\n      {emailUsers.map(({ emailAddress, fullName, shortName }, i) => (\n        <Fragment key={emailAddress}>\n          {i === 0 ? '' : '; '}\n          <EmailDisplay\n            value={emailAddress}\n            displayText={`${showShortName ? shortName : fullName}${\n              showEmailAddress ? ` <${emailAddress}>` : ''\n            }`}\n            variant='text'\n            as={StyledEmailDisplay}\n          />\n        </Fragment>\n      ))}\n    </>\n  );\n};\n\nconst OVERFLOW_TO_EMAIL_COUNT = 2;\nconst OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;\n\nconst Email: FunctionComponent<EmailProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailProps>, ref: EmailProps['ref']) => {\n    const {\n      id,\n      from,\n      to = [],\n      cc = [],\n      bcc = [],\n      actions = [],\n      timeStamp,\n      sentiment,\n      subject,\n      body,\n      attachments = [],\n      suggestions = [],\n      entityHighlightMapping = [],\n      onReply,\n      onForward,\n      onReplyAll,\n      onSuggestionClick,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement<HTMLButtonElement>(null);\n    const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);\n    const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement<HTMLDivElement>(null);\n    const emailMoreInfoFields: FieldValueListProps['fields'] = [];\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });\n    const { locale } = useConfiguration();\n\n    if (from) {\n      emailMoreInfoFields.push({\n        id: 'from',\n        name: t('from'),\n        value: from.emailAddress\n      });\n    }\n\n    if (to.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'to',\n        name: t('to'),\n        value: <EmailDisplayList emailUsers={to} showEmailAddress />\n      });\n    }\n\n    if (cc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'cc',\n        name: 'CC',\n        value: <EmailDisplayList emailUsers={cc} showEmailAddress />\n      });\n    }\n\n    if (bcc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'BCC',\n        name: 'BCC',\n        value: <EmailDisplayList emailUsers={bcc} showEmailAddress />\n      });\n    }\n\n    if (timeStamp) {\n      emailMoreInfoFields.push({\n        id: 'date',\n        name: t('date'),\n        value: (\n          <Text>\n            {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n              new Date(timeStamp)\n            )}, `}\n            <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n          </Text>\n        )\n      });\n    }\n\n    useOuterEvent('mousedown', [emailMoreInfoPopover], () => {\n      setShowEmailMoreInfo(false);\n    });\n\n    const secondaryFields: FieldValueListProps['fields'] = [];\n\n    if (attachments.length > 0) {\n      secondaryFields.push({\n        id: 'attachments',\n        name: '',\n        value: (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachmentProps => (\n              <FileDisplay {...attachmentProps} key={attachmentProps.value} />\n            ))}\n          </Flex>\n        )\n      });\n    }\n\n    if (suggestions.length > 0) {\n      secondaryFields.push({\n        id: 'suggested_replies',\n        name: '',\n        value: (\n          <Flex container={{ wrap: 'wrap' }}>\n            {suggestions\n              .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)\n              .map(({ id: suggestionId, title }) => (\n                <StyledSuggestedRepliesButton\n                  variant='secondary'\n                  key={suggestionId}\n                  onClick={() => {\n                    onSuggestionClick?.(id, suggestionId);\n                  }}\n                >\n                  {title}\n                </StyledSuggestedRepliesButton>\n              ))}\n            {suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (\n              <StyledSuggestedRepliesMenuButton\n                text='Other responses'\n                key='other_responses'\n                variant='secondary'\n                menu={{\n                  items: suggestions\n                    .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)\n                    .map(({ id: suggestionId, title }) => {\n                      return {\n                        primary: title,\n                        id: suggestionId,\n                        onClick: () => {\n                          onSuggestionClick?.(id, suggestionId);\n                        }\n                      };\n                    })\n                }}\n              />\n            )}\n          </Flex>\n        )\n      });\n    }\n\n    let renderedBody = body;\n    // Apply entity highlighting only on string body\n    if (typeof body === 'string') {\n      const entityConfigs = entityHighlightMapping.map(entity => {\n        const regExp = RegExp(entity.value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'gi');\n\n        return {\n          type: 'entity',\n          regexPattern: regExp,\n          component: () => <EmailEntity entity={entity} />\n        };\n      });\n\n      renderedBody = (\n        <RichTextViewer content={body} type='html' interactionRenderers={entityConfigs} />\n      );\n    }\n\n    const emailMetaListItems: MetaListProps['items'] = [\n      <Text variant='secondary'>\n        {`${t('to')}: `}\n        <EmailDisplayList emailUsers={to.slice(0, OVERFLOW_TO_EMAIL_COUNT)} showShortName />\n        {to.length > OVERFLOW_TO_EMAIL_COUNT &&\n          `; +${to.length - OVERFLOW_TO_EMAIL_COUNT} ${t('more')} `}\n      </Text>,\n      <Text variant='secondary'>\n        {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n        <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n      </Text>\n    ];\n\n    return (\n      <Flex\n        as={StyledEmail}\n        container={{\n          direction: 'column',\n          gap: 1\n        }}\n        ref={ref}\n        {...restProps}\n      >\n        <SummaryItem\n          as={StyledEmailHeader}\n          visual={<Avatar {...from.avatarProps} name={from.fullName} />}\n          ref={headerRef}\n          primary={\n            <Flex\n              container={{\n                gap: 1,\n                alignItems: 'center'\n              }}\n            >\n              <StyledFromEmailDisplay\n                value={from.emailAddress}\n                displayText={from.fullName}\n                variant='text'\n              />\n              {sentiment && <Sentiment {...sentiment} labelHidden />}\n            </Flex>\n          }\n          secondary={\n            <Flex\n              container={{\n                gap: 0,\n                alignItems: 'start',\n                direction: 'column'\n              }}\n            >\n              <Flex\n                container={{\n                  gap: 0,\n                  alignItems: 'start'\n                }}\n              >\n                <MetaList items={isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]]} />\n\n                <Button\n                  icon\n                  variant='simple'\n                  as={StyledEmailMoreInfoButton}\n                  ref={setEmailMoreInfoBtnRef}\n                  onClick={() => {\n                    setShowEmailMoreInfo(true);\n                  }}\n                  label={t('show_more')}\n                >\n                  <Icon name='arrow-micro-down' />\n                </Button>\n                <Popover\n                  as={StyledEmailMoreInfoPopover}\n                  show={showEmailMoreInfo}\n                  ref={setEmailMoreInfoPopover}\n                  target={emailMoreInfoBtnRef}\n                  placement='bottom'\n                >\n                  <CardContent>\n                    <StyledEmailPrimaryFieldValueList fields={emailMoreInfoFields} />\n                  </CardContent>\n                </Popover>\n              </Flex>\n              {!isSmallOrAbove && timeStamp && emailMetaListItems[1]}\n            </Flex>\n          }\n          actions={\n            <Flex\n              container={{\n                gap: 1\n              }}\n            >\n              {actions}\n            </Flex>\n          }\n        />\n        <Flex\n          container={{\n            direction: 'column',\n            gap: 2,\n            pad: [0, 2]\n          }}\n        >\n          {subject && (\n            <Text variant='primary'>\n              {t('subject')}: {subject}\n            </Text>\n          )}\n          <StyledEmailBody>{renderedBody}</StyledEmailBody>\n        </Flex>\n        <Flex\n          container={{\n            direction: 'column',\n            gap: 1,\n            pad: [0, 2]\n          }}\n        >\n          <StyledEmailSecondaryFieldValueList fields={secondaryFields} />\n          <div>\n            <Button\n              variant='simple'\n              onClick={() => {\n                onReply?.(id);\n              }}\n            >\n              <Flex\n                container={{\n                  gap: 1,\n                  alignItems: 'center'\n                }}\n              >\n                <Icon name='reply' />\n                <span>{t('reply')}</span>\n              </Flex>\n            </Button>\n            {onReplyAll && (\n              <Button\n                variant='simple'\n                onClick={() => {\n                  onReplyAll(id);\n                }}\n              >\n                <Flex\n                  container={{\n                    gap: 1,\n                    alignItems: 'center'\n                  }}\n                >\n                  <Icon name='reply-all' />\n                  <span>{t('reply_all')}</span>\n                </Flex>\n              </Button>\n            )}\n            {onForward && (\n              <Button\n                variant='simple'\n                onClick={() => {\n                  onForward(id);\n                }}\n              >\n                <Flex\n                  container={{\n                    gap: 1,\n                    alignItems: 'center'\n                  }}\n                >\n                  <Icon name='forward' />\n                  <span>{t('forward')}</span>\n                </Flex>\n              </Button>\n            )}\n          </div>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Email;\n"]}

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

@@ -1,10 +1,16 @@
+import { EmailEntityProps } from './Email.types';
 export declare const StyledEmailMoreInfoButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedRepliesButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFromEmailDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFromEmailDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").EmailDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailSecondaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailMoreInfoPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSecondarySeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const emailEntityBackgroundColors: string[];
 export declare const StyledEmail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailEntity: import("styled-components").StyledComponent<"mark", import("styled-components").DefaultTheme, EmailEntityProps, never>;
 //# sourceMappingURL=Email.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB,0GAIjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0GAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC,6OAE5C,CAAC;AAEF,eAAO,MAAM,kCAAkC,6OAW7C,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAEtC,CAAC;AAEF,eAAO,MAAM,WAAW,yGAAe,CAAC"}
+{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAY5B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC,yOAU3C,CAAC;AAIH,eAAO,MAAM,eAAe,yGAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB,2OAMjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0GAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC,6OAE5C,CAAC;AAEF,eAAO,MAAM,kCAAkC,6OAY7C,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAEtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAInC,CAAC;AACH,eAAO,MAAM,2BAA2B,UAqBvC,CAAC;AAEF,eAAO,MAAM,WAAW,yGAAe,CAAC;AAExC,eAAO,MAAM,iBAAiB,wHAe5B,CAAC"}

package/lib/components/Email/Email.styles.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, FieldValueList, StyledFieldName, StyledFieldValue, StyledSecondary, StyledSummaryItemActions, StyledVisual } from '@pega/cosmos-react-core';
+import { readableColor } from 'polished';
+import { Button, calculateFontSize, defaultThemeProp, EmailDisplay, FieldValueList, MenuButton, StyledFieldName, StyledFieldValue, StyledSecondary, StyledSummaryItemActions, StyledVisual, tryCatch, readableHue } from '@pega/cosmos-react-core';
 export const StyledEmailMoreInfoButton = styled.button `
   min-height: 0.5rem;
   min-width: 0.5rem;
@@ -7,7 +8,9 @@ export const StyledEmailMoreInfoButton = styled.button `
 `;
 export const StyledEmailHeader = styled.div(({ theme }) => {
     return css `
-    grid-column-gap: calc(1 * ${theme.base.spacing});
+    grid-column-gap: ${theme.base.spacing};
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
     ${StyledVisual},${StyledSummaryItemActions} {
       align-self: flex-start;
     }
@@ -17,10 +20,36 @@ export const StyledEmailHeader = styled.div(({ theme }) => {
   `;
 });
 StyledEmailHeader.defaultProps = defaultThemeProp;
+export const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {
+    return css `
+    & + & {
+      margin-inline-start: 0;
+    }
+    margin-block-start: ${theme.base.spacing};
+    :not(:last-child) {
+      margin-inline-end: ${theme.base.spacing};
+    }
+  `;
+});
+StyledSuggestedRepliesButton.defaultProps = defaultThemeProp;
+export const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {
+    return css `
+    &&& {
+      margin-inline-start: 0;
+    }
+    margin-block-start: ${theme.base.spacing};
+    :not(:last-child) {
+      margin-inline-end: ${theme.base.spacing};
+    }
+  `;
+});
+StyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;
 export const StyledEmailBody = styled.div ``;
-export const StyledFromEmailDisplay = styled.span(({ theme }) => {
+export const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     font-weight: ${theme.base['font-weight']['semi-bold']};
+    font-size: ${fontSize.m};
   `;
 });
 StyledFromEmailDisplay.defaultProps = defaultThemeProp;
@@ -34,8 +63,9 @@ export const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ them
     return css `
     grid-template-columns: 1fr;
     gap: 0;
+    padding: ${theme.base.spacing} 0;
     ${StyledFieldValue}:not(:last-child) {
-      margin-bottom: ${theme.base.spacing};
+      margin-bottom: calc(2 * ${theme.base.spacing});
     }
     ${StyledFieldName} {
       margin-bottom: calc(0.25 * ${theme.base.spacing});
@@ -46,5 +76,44 @@ StyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;
 export const StyledEmailMoreInfoPopover = styled.div `
   max-width: 30rem;
 `;
+export const StyledSecondarySeparator = styled.div(({ theme }) => {
+    return css `
+    margin: 0 calc(${theme.base.spacing} / 2);
+  `;
+});
+export const emailEntityBackgroundColors = [
+    '#00428B',
+    '#008C80',
+    '#53336F',
+    '#005FA7',
+    '#7C421B',
+    '#BC1513',
+    '#DE4342',
+    '#661D34',
+    '#8B479E',
+    '#4B3380',
+    '#10A5AC',
+    '#5F67B9',
+    '#1D447A',
+    '#988CC4',
+    '#AC1361',
+    '#1B6B2E',
+    '#4064B3',
+    '#4D4D4D',
+    '#0F5F5D',
+    '#7F375B'
+];
 export const StyledEmail = styled.div ``;
+export const StyledEmailEntity = styled.mark(({ entity, theme }) => {
+    const variant = entity.variant;
+    const backgroundColor = readableHue(emailEntityBackgroundColors[(Number.isFinite(variant) && variant > 0 ? variant : 0) % emailEntityBackgroundColors.length], theme.base.palette['primary-background']);
+    const textColor = tryCatch(() => readableColor(backgroundColor));
+    return css `
+    border-radius: calc(${theme.base['border-radius']} / 3);
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    background-color: ${backgroundColor};
+    color: ${textColor};
+  `;
+});
+StyledEmailEntity.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Email.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Email.styles.js","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;CAIrD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;gCACoB,KAAK,CAAC,IAAI,CAAC,OAAO;MAC5C,YAAY,IAAI,wBAAwB;;;MAGxC,eAAe;+BACU,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;mBACO,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;;CAErE,CAAC;AAEF,MAAM,CAAC,MAAM,kCAAkC,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;;;MAGN,gBAAgB;uBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEnC,eAAe;mCACc,KAAK,CAAC,IAAI,CAAC,OAAO;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kCAAkC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnE,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '@pega/cosmos-react-core';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n  min-height: 0.5rem;\n  min-width: 0.5rem;\n  flex-shrink: 0;\n`;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n  return css`\n    grid-column-gap: calc(1 * ${theme.base.spacing});\n    ${StyledVisual},${StyledSummaryItemActions} {\n      align-self: flex-start;\n    }\n    ${StyledSecondary} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailHeader.defaultProps = defaultThemeProp;\n\nexport const StyledEmailBody = styled.div``;\n\nexport const StyledFromEmailDisplay = styled.span(({ theme }) => {\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledFromEmailDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledEmailDisplay = styled.span`\n  font-size: inherit;\n`;\n\nexport const StyledEmailPrimaryFieldValueList = styled(FieldValueList)`\n  grid-template-columns: auto 1fr;\n`;\n\nexport const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    grid-template-columns: 1fr;\n    gap: 0;\n    ${StyledFieldValue}:not(:last-child) {\n      margin-bottom: ${theme.base.spacing};\n    }\n    ${StyledFieldName} {\n      margin-bottom: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailMoreInfoPopover = styled.div`\n  max-width: 30rem;\n`;\n\nexport const StyledEmail = styled.div``;\n"]}
+{"version":3,"file":"Email.styles.js","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  EmailDisplay,\n  FieldValueList,\n  MenuButton,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual,\n  tryCatch,\n  readableHue\n} from '@pega/cosmos-react-core';\n\nimport { EmailEntityProps } from './Email.types';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n  min-height: 0.5rem;\n  min-width: 0.5rem;\n  flex-shrink: 0;\n`;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n  return css`\n    grid-column-gap: ${theme.base.spacing};\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n    ${StyledVisual},${StyledSummaryItemActions} {\n      align-self: flex-start;\n    }\n    ${StyledSecondary} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {\n  return css`\n    & + & {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {\n  return css`\n    &&& {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailBody = styled.div``;\n\nexport const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSize.m};\n  `;\n});\n\nStyledFromEmailDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledEmailDisplay = styled.span`\n  font-size: inherit;\n`;\n\nexport const StyledEmailPrimaryFieldValueList = styled(FieldValueList)`\n  grid-template-columns: auto 1fr;\n`;\n\nexport const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    grid-template-columns: 1fr;\n    gap: 0;\n    padding: ${theme.base.spacing} 0;\n    ${StyledFieldValue}:not(:last-child) {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledFieldName} {\n      margin-bottom: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailMoreInfoPopover = styled.div`\n  max-width: 30rem;\n`;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n  return css`\n    margin: 0 calc(${theme.base.spacing} / 2);\n  `;\n});\nexport const emailEntityBackgroundColors = [\n  '#00428B',\n  '#008C80',\n  '#53336F',\n  '#005FA7',\n  '#7C421B',\n  '#BC1513',\n  '#DE4342',\n  '#661D34',\n  '#8B479E',\n  '#4B3380',\n  '#10A5AC',\n  '#5F67B9',\n  '#1D447A',\n  '#988CC4',\n  '#AC1361',\n  '#1B6B2E',\n  '#4064B3',\n  '#4D4D4D',\n  '#0F5F5D',\n  '#7F375B'\n];\n\nexport const StyledEmail = styled.div``;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const variant = entity.variant;\n  const backgroundColor = readableHue(\n    emailEntityBackgroundColors[\n      (Number.isFinite(variant) && variant > 0 ? variant : 0) % emailEntityBackgroundColors.length\n    ],\n    theme.base.palette['primary-background']\n  );\n  const textColor = tryCatch(() => readableColor(backgroundColor));\n  return css`\n    border-radius: calc(${theme.base['border-radius']} / 3);\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${backgroundColor};\n    color: ${textColor};\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n"]}