@pega/cosmos-react-social 2.0.0-dev.12.1 → 2.0.0-dev.14.2

package/lib/components/Chat/ChatHeader.js

@@ -6,7 +6,7 @@ const StyledChatPrimaryInfoContainer = styled.div ``;
 const StyledChatHeader = styled.header(({ theme: { base: { spacing, colors: { gray } } } }) => {
     return css `
       padding: ${spacing} calc(2 * ${spacing});
-      border-bottom: 0.0625rem solid ${gray.medium};
+      border-bottom: 0.0625rem solid ${gray.light};
       ${StyledChatPrimaryInfoContainer} {
         font-size: 1rem;
       }

package/lib/components/Chat/ChatHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAa3F,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO,aAAa,OAAO;uCACL,IAAI,CAAC,MAAM;QAC1C,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACL,MAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,gBAAgB,EACpB,SAAS,QACT,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,IACG,SAAS,eAEb,MAAC,IAAI,kBACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,QAAQ;iBACrB,EACD,EAAE,EAAE,8BAA8B,iBAEjC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,EAC7B,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,aAC5B,EACN,OAAO,aACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Text, Flex, Icon, defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nexport interface ChatHeaderProps {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show username || channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Primary actions: Used to show frequent user actions to be performed */\n  actions?: ReactNode;\n}\n\nconst StyledChatPrimaryInfoContainer = styled.div``;\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        colors: { gray }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing} calc(2 * ${spacing});\n      border-bottom: 0.0625rem solid ${gray.medium};\n      ${StyledChatPrimaryInfoContainer} {\n        font-size: 1rem;\n      }\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) => {\n    const { title, actions, icon, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatHeader}\n        container\n        item={{\n          shrink: 0\n        }}\n        {...restProps}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 2,\n            alignItems: 'center'\n          }}\n          as={StyledChatPrimaryInfoContainer}\n        >\n          {icon && <Icon name={icon} />}\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\n"]}
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAa3F,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO,aAAa,OAAO;uCACL,IAAI,CAAC,KAAK;QACzC,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACL,MAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,gBAAgB,EACpB,SAAS,QACT,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,IACG,SAAS,eAEb,MAAC,IAAI,kBACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,QAAQ;iBACrB,EACD,EAAE,EAAE,8BAA8B,iBAEjC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,EAC7B,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,KAAK,YAAQ,aAC5B,EACN,OAAO,aACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Text, Flex, Icon, defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nexport interface ChatHeaderProps {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show username || channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Primary actions: Used to show frequent user actions to be performed */\n  actions?: ReactNode;\n}\n\nconst StyledChatPrimaryInfoContainer = styled.div``;\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        colors: { gray }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing} calc(2 * ${spacing});\n      border-bottom: 0.0625rem solid ${gray.light};\n      ${StyledChatPrimaryInfoContainer} {\n        font-size: 1rem;\n      }\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) => {\n    const { title, actions, icon, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatHeader}\n        container\n        item={{\n          shrink: 0\n        }}\n        {...restProps}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 2,\n            alignItems: 'center'\n          }}\n          as={StyledChatPrimaryInfoContainer}\n        >\n          {icon && <Icon name={icon} />}\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\n"]}

package/lib/components/Chat/ChatTranscript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTranscript.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAA0B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAsB,EAAE,gBAAgB,EAA2B,MAAM,iBAAiB,CAAC;AAC3F,OAA0B,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAsB,EAAE,kBAAkB,EAAuB,MAAM,iBAAiB,CAAC;AAEzF,oBAAY,kBAAkB,GAC1B,CAAC,sBAAsB,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,GAC7E,CAAC,kBAAkB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,UAAU,EAAE,kBAAkB,EAAE,CAAC;CAClC;AAgCD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAoCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ChatTranscript.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAA0B,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAErF,OAAsB,EAAE,gBAAgB,EAA2B,MAAM,iBAAiB,CAAC;AAC3F,OAA0B,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAsB,EAAE,kBAAkB,EAAuB,MAAM,iBAAiB,CAAC;AAEzF,oBAAY,kBAAkB,GAC1B,CAAC,sBAAsB,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,GAC7E,CAAC,kBAAkB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,UAAU,EAAE,kBAAkB,EAAE,CAAC;CAClC;AAgCD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAwCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Chat/ChatTranscript.js

@@ -1,7 +1,7 @@
 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, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Text } from '@pega/cosmos-react-core';
 import RepeatingView, { StyledRepeatingViewItem } from './RepeatingView';
 import TranscriptMessage from './TranscriptMessage';
 import SystemMessage, { StyledSystemMessage } from './SystemMessage';
@@ -30,7 +30,7 @@ const ChatTranscript = forwardRef((props, ref) => {
     return (_jsxs(Flex, Object.assign({ ref: ref, as: StyledChatTranscriptContainer, container: {
             direction: 'column',
             gap: 0.5
-        } }, restProps, { children: [title && _jsx(StyledChatTranscriptHeading, { children: title }, void 0), _jsx(RepeatingView, Object.assign({ rows: transcriptItems }, { children: item => {
+        } }, restProps, { children: [title && (_jsx(Text, Object.assign({ variant: 'h4', as: StyledChatTranscriptHeading }, { children: title }), void 0)), _jsx(RepeatingView, Object.assign({ rows: transcriptItems }, { children: item => {
                     const { id, type, ...transcriptItemRestProps } = item;
                     if (type === 'transcript') {
                         return (_jsx(TranscriptMessage, Object.assign({}, transcriptItemRestProps), id));

package/lib/components/Chat/ChatTranscript.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTranscript.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAE/E,OAAO,aAAa,EAAE,EAAoB,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,iBAA6C,MAAM,qBAAqB,CAAC;AAChF,OAAO,aAAa,EAAE,EAAsB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAezF,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;;oBAKQ,WAAW;;MAEzB,2BAA2B,KAAK,uBAAuB,KAAK,mBAAmB;4BACzD,OAAO;6BACN,OAAO;;MAE9B,mBAAmB;;;GAGtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,GAA+B,EAAE,EAAE;IAC/E,MAAM,EAAE,UAAU,EAAE,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,IACG,SAAS,eAEZ,KAAK,IAAI,KAAC,2BAA2B,cAAE,KAAK,WAA+B,EAC5E,KAAC,aAAa,kBAAC,IAAI,EAAE,eAAe,gBACjC,IAAI,CAAC,EAAE;oBACN,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,uBAAuB,EAAE,GAAG,IAA0B,CAAC;oBAC5E,IAAI,IAAI,KAAK,YAAY,EAAE;wBACzB,OAAO,CACL,KAAC,iBAAiB,oBAEX,uBAAkD,GADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,oBAAe,uBAA8C,GAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,2BAAK,CAAC;gBACf,CAAC,YACa,aACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport RepeatingView, { RepeatingViewRow, StyledRepeatingViewItem } from './RepeatingView';\nimport TranscriptMessage, { TranscriptMessageProps } from './TranscriptMessage';\nimport SystemMessage, { SystemMessageProps, StyledSystemMessage } from './SystemMessage';\n\nexport type ChatTranscriptItem =\n  | (TranscriptMessageProps & { type: 'transcript'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] });\n\nexport interface ChatTranscriptProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for transcript's body */\n  title?: string;\n  /** Transcript messages array */\n  transcript: ChatTranscriptItem[];\n}\n\nconst StyledChatTranscriptHeading = styled.h4``;\n\nconst StyledChatTranscriptContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { focus: shadowFocus },\n        spacing\n      }\n    }\n  } = props;\n  return css`\n    width: 100%;\n    outline: none;\n    padding: 0 0.75rem 0.5rem;\n    &:focus {\n      box-shadow: ${shadowFocus};\n    }\n    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {\n      margin: calc(0.25 * ${spacing});\n      padding: calc(0.25 * ${spacing});\n    }\n    ${StyledSystemMessage} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledChatTranscriptContainer.defaultProps = defaultThemeProp;\n\nconst ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatTranscriptProps>, ref: ChatTranscriptProps['ref']) => {\n    const { transcript: transcriptItems = [], title, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatTranscriptContainer}\n        container={{\n          direction: 'column',\n          gap: 0.5\n        }}\n        {...restProps}\n      >\n        {title && <StyledChatTranscriptHeading>{title}</StyledChatTranscriptHeading>}\n        <RepeatingView rows={transcriptItems}>\n          {item => {\n            const { id, type, ...transcriptItemRestProps } = item as ChatTranscriptItem;\n            if (type === 'transcript') {\n              return (\n                <TranscriptMessage\n                  key={id}\n                  {...(transcriptItemRestProps as TranscriptMessageProps)}\n                />\n              );\n            }\n            if (type === 'system') {\n              return (\n                <SystemMessage key={id} {...(transcriptItemRestProps as SystemMessageProps)} />\n              );\n            }\n            return <></>;\n          }}\n        </RepeatingView>\n      </Flex>\n    );\n  }\n);\n\nexport default ChatTranscript;\n"]}
+{"version":3,"file":"ChatTranscript.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,aAAa,EAAE,EAAoB,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,iBAA6C,MAAM,qBAAqB,CAAC;AAChF,OAAO,aAAa,EAAE,EAAsB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAezF,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;;oBAKQ,WAAW;;MAEzB,2BAA2B,KAAK,uBAAuB,KAAK,mBAAmB;4BACzD,OAAO;6BACN,OAAO;;MAE9B,mBAAmB;;;GAGtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,GAA+B,EAAE,EAAE;IAC/E,MAAM,EAAE,UAAU,EAAE,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,kBACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,IACG,SAAS,eAEZ,KAAK,IAAI,CACR,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,2BAA2B,gBAC/C,KAAK,YACD,CACR,EACD,KAAC,aAAa,kBAAC,IAAI,EAAE,eAAe,gBACjC,IAAI,CAAC,EAAE;oBACN,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,uBAAuB,EAAE,GAAG,IAA0B,CAAC;oBAC5E,IAAI,IAAI,KAAK,YAAY,EAAE;wBACzB,OAAO,CACL,KAAC,iBAAiB,oBAEX,uBAAkD,GADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,oBAAe,uBAA8C,GAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,2BAAK,CAAC;gBACf,CAAC,YACa,aACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp, ForwardProps, Text } from '@pega/cosmos-react-core';\n\nimport RepeatingView, { RepeatingViewRow, StyledRepeatingViewItem } from './RepeatingView';\nimport TranscriptMessage, { TranscriptMessageProps } from './TranscriptMessage';\nimport SystemMessage, { SystemMessageProps, StyledSystemMessage } from './SystemMessage';\n\nexport type ChatTranscriptItem =\n  | (TranscriptMessageProps & { type: 'transcript'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] });\n\nexport interface ChatTranscriptProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for transcript's body */\n  title?: string;\n  /** Transcript messages array */\n  transcript: ChatTranscriptItem[];\n}\n\nconst StyledChatTranscriptHeading = styled.h4``;\n\nconst StyledChatTranscriptContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { focus: shadowFocus },\n        spacing\n      }\n    }\n  } = props;\n  return css`\n    width: 100%;\n    outline: none;\n    padding: 0 0.75rem 0.5rem;\n    &:focus {\n      box-shadow: ${shadowFocus};\n    }\n    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {\n      margin: calc(0.25 * ${spacing});\n      padding: calc(0.25 * ${spacing});\n    }\n    ${StyledSystemMessage} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledChatTranscriptContainer.defaultProps = defaultThemeProp;\n\nconst ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatTranscriptProps>, ref: ChatTranscriptProps['ref']) => {\n    const { transcript: transcriptItems = [], title, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatTranscriptContainer}\n        container={{\n          direction: 'column',\n          gap: 0.5\n        }}\n        {...restProps}\n      >\n        {title && (\n          <Text variant='h4' as={StyledChatTranscriptHeading}>\n            {title}\n          </Text>\n        )}\n        <RepeatingView rows={transcriptItems}>\n          {item => {\n            const { id, type, ...transcriptItemRestProps } = item as ChatTranscriptItem;\n            if (type === 'transcript') {\n              return (\n                <TranscriptMessage\n                  key={id}\n                  {...(transcriptItemRestProps as TranscriptMessageProps)}\n                />\n              );\n            }\n            if (type === 'system') {\n              return (\n                <SystemMessage key={id} {...(transcriptItemRestProps as SystemMessageProps)} />\n              );\n            }\n            return <></>;\n          }}\n        </RepeatingView>\n      </Flex>\n    );\n  }\n);\n\nexport default ChatTranscript;\n"]}

package/lib/components/Chat/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,SAAS,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,WAAW,EAIX,SAAS,EAMT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAqBnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAC7D,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,kBAAkB,GAAG;IAC/B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,mCAAmC;IACnC,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IACjC,wFAAwF;IACxF,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACpD,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IACzC,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsL3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,SAAS,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,WAAW,EAIX,SAAS,EAMT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAqBnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAC7D,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,kBAAkB,GAAG;IAC/B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,mCAAmC;IACnC,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IACjC,wFAAwF;IACxF,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACpD,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IACzC,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAqL3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Chat/Message.js

@@ -30,7 +30,7 @@ const Message = forwardRef((props, ref) => {
                                                         e.preventDefault();
                                                         e.stopPropagation();
                                                         onPreview?.(id);
-                                                    }, alt: name }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, Object.assign({ title: name, onClick: (e) => {
+                                                    }, alt: name }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, Object.assign({ onClick: (e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             onPreview?.(id);
@@ -43,7 +43,7 @@ const Message = forwardRef((props, ref) => {
                                         const { id, href, title, thumbnail } = pagePushLink;
                                         return (_jsxs(Flex, Object.assign({ as: StyledMediaListItem, container: {
                                                 direction: 'column'
-                                            } }, { children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title || href }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaLink, Object.assign({ title: title, href: href, target: '_blank', rel: 'noreferrer' }, { children: href }), void 0), visual: _jsx(Icon, { name: 'chain-up' }, void 0) }, void 0)] }), id));
+                                            } }, { children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title || href }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaLink, Object.assign({ "aria-label": title, href: href, target: '_blank', rel: 'noreferrer' }, { children: href }), void 0), visual: _jsx(Icon, { name: 'chain-up' }, void 0) }, void 0)] }), id));
                                     })] }, void 0))] }, void 0), !typing && (_jsxs(Flex, Object.assign({ as: StyledMetaInfoContainer, container: {
                             justify: messageMetaJustify,
                             gap: 1.5

package/lib/components/Chat/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, ReactNode, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport {\n  AvatarProps,\n  Avatar,\n  Flex,\n  Icon,\n  LinkProps,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledSummaryItem,\n  StyledMediaLink,\n  StyledMediaDownloadButton,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta\n} from './Message.styles';\n\nexport interface MediaPageLinks extends Pick<LinkProps, 'href'> {\n  /** Unique id for this push link */\n  id: string;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n  /** Additional information about the linked resource. */\n  title?: string;\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLDivElement>;\n  /** Message to be displayed */\n  message?: ReactNode;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  pagePushLinks?: MediaPageLinks[];\n  /** 3 themes supported by default to differentiate between sender, receiver and other */\n  variant: 'sender' | 'receiver' | 'other';\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Content type */\n  contentType?: 'rich-text' | 'plain-text';\n  /** Message status */\n  status?: string;\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n}\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n    const {\n      message,\n      direction,\n      variant,\n      avatarInfo,\n      timeStamp,\n      attachments = [],\n      pagePushLinks = [],\n      status,\n      typing,\n      messageHeader,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n    if (timeStamp && !status) {\n      messageMetaJustify = 'start';\n    } else if (!timeStamp && status) {\n      messageMetaJustify = 'end';\n    }\n\n    return (\n      <Flex\n        as={StyledMessageContainer}\n        ref={ref}\n        container={{\n          gap: 0.5,\n          direction: direction === 'in' ? 'row' : 'row-reverse'\n        }}\n        item={{\n          shrink: 0\n        }}\n        messageDirection={direction}\n        variant={variant}\n        typing={typing}\n        messageHeader={messageHeader}\n        {...restProps}\n      >\n        {avatarInfo && (\n          <Avatar name={avatarInfo.name} size='m' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        )}\n        <Flex\n          container={{\n            direction: 'column',\n            alignItems: direction === 'in' ? 'start' : 'end',\n            justify: 'center'\n          }}\n          as={StyledMessageMain}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n            {(attachments.length > 0 || pagePushLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  const { id, icon, name, meta, onDownload, onPreview, thumbnail } = attachment;\n                  return (\n                    <Flex\n                      key={id}\n                      as={StyledMediaListItem}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image\n                          as={StyledMediaThumbNail}\n                          src={thumbnail}\n                          onClick={(e: MouseEvent) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onPreview?.(id);\n                          }}\n                          alt={name}\n                        />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaButton\n                            title={name}\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onPreview?.(id);\n                            }}\n                          >\n                            {name}\n                          </StyledMediaButton>\n                        }\n                        secondary={meta}\n                        visual={<Icon name={icon || 'document-doc'} />}\n                        actions={\n                          <BareButton\n                            aria-label={t('download')}\n                            as={StyledMediaDownloadButton}\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onDownload?.(id);\n                            }}\n                          >\n                            <Icon name='download' />\n                          </BareButton>\n                        }\n                      />\n                    </Flex>\n                  );\n                })}\n                {pagePushLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaLink\n                            title={title}\n                            href={href}\n                            target='_blank'\n                            rel='noreferrer'\n                          >\n                            {href}\n                          </StyledMediaLink>\n                        }\n                        visual={<Icon name='chain-up' />}\n                      />\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n          {!typing && (\n            <Flex\n              as={StyledMetaInfoContainer}\n              container={{\n                justify: messageMetaJustify,\n                gap: 1.5\n              }}\n            >\n              {timeStamp && <StyledMetaInfo>{timeStamp}</StyledMetaInfo>}\n              {status && <StyledMetaInfo>{status}</StyledMetaInfo>}\n            </Flex>\n          )}\n          {typing && (\n            <Flex\n              container={{\n                gap: 0.25\n              }}\n            >\n              <StyledBlinkingDot delay={0} />\n              <StyledBlinkingDot delay={0.25} />\n              <StyledBlinkingDot delay={0.5} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Message;\n"]}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAA+C,MAAM,OAAO,CAAC;AAEnG,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,IAAI,EAEJ,WAAW,EACX,KAAK,EAEL,YAAY,EACZ,OAAO,EAER,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAGlF,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,uBAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,kBAAkB,CAAC;AA6C1B,MAAM,OAAO,GAAmD,UAAU,CACxE,CAAC,KAAoC,EAAE,GAAwB,EAAE,EAAE;IACjE,MAAM,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAW,GAAG,EAAE,EAChB,aAAa,GAAG,EAAE,EAClB,MAAM,EACN,MAAM,EACN,aAAa,EACb,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,kBAAkB,GAAkC,SAAS,CAAC;IAClE,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE;QACxB,kBAAkB,GAAG,OAAO,CAAC;KAC9B;SAAM,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;QAC/B,kBAAkB,GAAG,KAAK,CAAC;KAC5B;IAED,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;SACtD,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,gBAAgB,EAAE,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,IACxB,SAAS,eAEZ,UAAU,IAAI,CACb,KAAC,MAAM,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,WAAI,CACzF,EACD,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBAChD,OAAO,EAAE,QAAQ;iBAClB,EACD,EAAE,EAAE,iBAAiB,iBAErB,MAAC,mBAAmB,eACjB,aAAa,IAAI,CAChB,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,mBAAmB,iBACxE,KAAC,0BAA0B,cAAE,aAAa,CAAC,OAAO,WAA8B,EAChF,KAAC,uBAAuB,cAAE,aAAa,CAAC,IAAI,WAA2B,aAClE,CACR,EACA,OAAO,IAAI,CACV,KAAC,0BAA0B,cACzB,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAI,WACjB,CAC9B,EACA,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACvD,MAAC,eAAe,eACb,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;wCAC5B,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC;wCAC9E,OAAO,CACL,MAAC,IAAI,kBAEH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;gDACT,SAAS,EAAE,QAAQ;6CACpB,iBAEA,SAAS,IAAI,CACZ,KAAC,KAAK,IACJ,EAAE,EAAE,oBAAoB,EACxB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;wDACzB,CAAC,CAAC,cAAc,EAAE,CAAC;wDACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wDACpB,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;oDAClB,CAAC,EACD,GAAG,EAAE,IAAI,WACT,CACH,EACD,KAAC,WAAW,IACV,EAAE,EAAE,iBAAiB,EACrB,OAAO,EACL,KAAC,iBAAiB,kBAChB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;4DACzB,CAAC,CAAC,cAAc,EAAE,CAAC;4DACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4DACpB,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;wDAClB,CAAC,gBAEA,IAAI,YACa,EAEtB,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,cAAc,WAAI,EAC9C,OAAO,EACL,KAAC,UAAU,gCACG,CAAC,CAAC,UAAU,CAAC,EACzB,EAAE,EAAE,yBAAyB,EAC7B,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;4DACzB,CAAC,CAAC,cAAc,EAAE,CAAC;4DACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4DACpB,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;wDACnB,CAAC,gBAED,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,YACb,WAEf,MA9CG,EAAE,CA+CF,CACR,CAAC;oCACJ,CAAC,CAAC,EACD,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;wCAChC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC;wCACpD,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EAEvB,SAAS,EAAE;gDACT,SAAS,EAAE,QAAQ;6CACpB,iBAEA,SAAS,IAAI,CACZ,KAAC,KAAK,IAAC,EAAE,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,IAAI,WAAI,CACxE,EACD,KAAC,WAAW,IACV,EAAE,EAAE,iBAAiB,EACrB,OAAO,EACL,KAAC,eAAe,gCACF,KAAK,EACjB,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,gBAEf,IAAI,YACW,EAEpB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,WAChC,MArBG,EAAE,CAsBF,CACR,CAAC;oCACJ,CAAC,CAAC,YACc,CACnB,YACmB,EACrB,CAAC,MAAM,IAAI,CACV,MAAC,IAAI,kBACH,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;4BACT,OAAO,EAAE,kBAAkB;4BAC3B,GAAG,EAAE,GAAG;yBACT,iBAEA,SAAS,IAAI,KAAC,cAAc,cAAE,SAAS,WAAkB,EACzD,MAAM,IAAI,KAAC,cAAc,cAAE,MAAM,WAAkB,aAC/C,CACR,EACA,MAAM,IAAI,CACT,MAAC,IAAI,kBACH,SAAS,EAAE;4BACT,GAAG,EAAE,IAAI;yBACV,iBAED,KAAC,iBAAiB,IAAC,KAAK,EAAE,CAAC,WAAI,EAC/B,KAAC,iBAAiB,IAAC,KAAK,EAAE,IAAI,WAAI,EAClC,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,WAAI,aAC5B,CACR,aACI,aACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, ReactNode, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport {\n  AvatarProps,\n  Avatar,\n  Flex,\n  Icon,\n  LinkProps,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledSummaryItem,\n  StyledMediaLink,\n  StyledMediaDownloadButton,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta\n} from './Message.styles';\n\nexport interface MediaPageLinks extends Pick<LinkProps, 'href'> {\n  /** Unique id for this push link */\n  id: string;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n  /** Additional information about the linked resource. */\n  title?: string;\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLDivElement>;\n  /** Message to be displayed */\n  message?: ReactNode;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  pagePushLinks?: MediaPageLinks[];\n  /** 3 themes supported by default to differentiate between sender, receiver and other */\n  variant: 'sender' | 'receiver' | 'other';\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Content type */\n  contentType?: 'rich-text' | 'plain-text';\n  /** Message status */\n  status?: string;\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n}\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n    const {\n      message,\n      direction,\n      variant,\n      avatarInfo,\n      timeStamp,\n      attachments = [],\n      pagePushLinks = [],\n      status,\n      typing,\n      messageHeader,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n    if (timeStamp && !status) {\n      messageMetaJustify = 'start';\n    } else if (!timeStamp && status) {\n      messageMetaJustify = 'end';\n    }\n\n    return (\n      <Flex\n        as={StyledMessageContainer}\n        ref={ref}\n        container={{\n          gap: 0.5,\n          direction: direction === 'in' ? 'row' : 'row-reverse'\n        }}\n        item={{\n          shrink: 0\n        }}\n        messageDirection={direction}\n        variant={variant}\n        typing={typing}\n        messageHeader={messageHeader}\n        {...restProps}\n      >\n        {avatarInfo && (\n          <Avatar name={avatarInfo.name} size='m' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        )}\n        <Flex\n          container={{\n            direction: 'column',\n            alignItems: direction === 'in' ? 'start' : 'end',\n            justify: 'center'\n          }}\n          as={StyledMessageMain}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n            {(attachments.length > 0 || pagePushLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  const { id, icon, name, meta, onDownload, onPreview, thumbnail } = attachment;\n                  return (\n                    <Flex\n                      key={id}\n                      as={StyledMediaListItem}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image\n                          as={StyledMediaThumbNail}\n                          src={thumbnail}\n                          onClick={(e: MouseEvent) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onPreview?.(id);\n                          }}\n                          alt={name}\n                        />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaButton\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onPreview?.(id);\n                            }}\n                          >\n                            {name}\n                          </StyledMediaButton>\n                        }\n                        secondary={meta}\n                        visual={<Icon name={icon || 'document-doc'} />}\n                        actions={\n                          <BareButton\n                            aria-label={t('download')}\n                            as={StyledMediaDownloadButton}\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onDownload?.(id);\n                            }}\n                          >\n                            <Icon name='download' />\n                          </BareButton>\n                        }\n                      />\n                    </Flex>\n                  );\n                })}\n                {pagePushLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaLink\n                            aria-label={title}\n                            href={href}\n                            target='_blank'\n                            rel='noreferrer'\n                          >\n                            {href}\n                          </StyledMediaLink>\n                        }\n                        visual={<Icon name='chain-up' />}\n                      />\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n          {!typing && (\n            <Flex\n              as={StyledMetaInfoContainer}\n              container={{\n                justify: messageMetaJustify,\n                gap: 1.5\n              }}\n            >\n              {timeStamp && <StyledMetaInfo>{timeStamp}</StyledMetaInfo>}\n              {status && <StyledMetaInfo>{status}</StyledMetaInfo>}\n            </Flex>\n          )}\n          {typing && (\n            <Flex\n              container={{\n                gap: 0.25\n              }}\n            >\n              <StyledBlinkingDot delay={0} />\n              <StyledBlinkingDot delay={0.25} />\n              <StyledBlinkingDot delay={0.5} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Message;\n"]}

package/lib/components/Chat/Message.styles.js

@@ -175,14 +175,14 @@ export const StyledBlinkingDot = styled.div(({ delay = 0, theme }) => {
     return css `
     @keyframes Blinking {
       0% {
-        background: ${theme.base.colors.gray.dark};
+        background: ${theme.base.colors.gray.medium};
       }
       100% {
         background: ${theme.base.colors.gray['extra-light']};
       }
     }
     animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;
-    background: ${theme.base.colors.gray.light};
+    background: ${theme.base.colors.gray['extra-light']};
     border-radius: 50%;
     animation-delay: ${delay}s;
     height: 0.4rem;

package/lib/components/Chat/Message.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEvD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAEzD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AACnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAQpD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EACP,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EAAE,mBAAmB,EAC5C,EACD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,EACvB,EACF,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAC/E,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;IACjF,MAAM,OAAO,GAAG,gBAAgB,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;IACxE,MAAM,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;iBACG,OAAO;uBACD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QACtC,iBAAiB;;;QAGjB,mBAAmB;;;sBAGL,mBAAmB,CAAC,kBAAkB,CAAC;kCAC3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;qBACxE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;iBAExE,mBAAmB,CAAC,kBAAkB,CAAC;;;;;;;;;UAS9C,gBAAgB,KAAK,IAAI;QAC3B,GAAG,CAAA;2BACgB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;uBACvE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;SAClF;;YAEG,0BAA0B;;;;;;;YAO1B,eAAe;mBACR,mBAAmB,CAAC,kBAAkB,CAAC;;;YAG9C,yBAAyB;;;;qBAIhB,mBAAmB,CAAC,kBAAkB,CAAC;qBACvC,MAAM,CAAC,MAAM;sBACZ,MAAM,CAAC,MAAM;;;;4BAIP,mBAAmB,CAAC,kBAAkB,CAAC;uBAC5C,mBAAmB,CAAC,kBAAkB,CAAC;wCACtB,mBAAmB,CAAC,kBAAkB,CAAC;;;;;;;;;cASjE,mBAAmB;;cAEnB,oBAAoB;;;;kCAIA,mBAAmB;;cAEvC,iBAAiB;;;;;cAKjB,iBAAiB;;;4CAGa,mBAAmB,CAAC,kBAAkB,CAAC;;;;;;cAMrE,oBAAoB,MAAM,iBAAiB;;;;;;;;;UAS/C,mBAAmB;;mBAEV,kBAAkB,CAAC,kBAAkB,CAAC;8BAC3B,kBAAkB,CAAC,kBAAkB,CAAC;;;UAG1D,0BAA0B;mBACjB,kBAAkB,CAAC,kBAAkB,CAAC;+BAC1B,KAAK,CAAC,IAAI,CAAC,OAAO;;UAEvC,uBAAuB;;qBAEZ,kBAAkB,CAAC,kBAAkB,CAAC;;;;UAIjD,eAAe,KAAK,iBAAiB;mBAC5B,mBAAmB,CAAC,kBAAkB,CAAC;;;;;;;;;;;qBAWrC,mBAAmB,CAAC,kBAAkB,CAAC;;;;qBAIvC,mBAAmB,CAAC,kBAAkB,CAAC;;;0BAGlC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;QAKzC,uBAAuB;;;UAGrB,cAAc;;;mBAGL,mBAAmB;;;QAG9B,qBAAqB;;;;;KAKxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAKvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;;;sBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;;;sBAG3B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;mCAGxB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kBAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;uBAEvB,KAAK;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport { defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaDownloadButton = styled.button``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\ninterface StyledMessageContainerProps {\n  variant: 'sender' | 'receiver' | 'other';\n  messageDirection: 'in' | 'out' | string;\n  typing: boolean;\n}\n\nexport const StyledMessageContainer = styled.div<StyledMessageContainerProps>(\n  ({\n    messageDirection,\n    variant,\n    typing,\n    theme,\n    theme: {\n      base: {\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      },\n      components: { button }\n    }\n  }) => {\n    const messageHeaderTheme = theme.components.chat.messageBubble[variant].header;\n    const messageContentTheme = theme.components.chat.messageBubble[variant].content;\n    const padding = messageDirection === 'in' ? '0 2rem 0 0' : '0 0 0 2rem';\n    const metaForegroundColor = tryCatch(() => polishedRgba(foregroundColor, foregroundAlpha));\n\n    return css`\n      padding: ${padding};\n      margin-bottom: ${typing ? '0.5rem' : '0'};\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        max-width: 100%;\n        min-width: 100%;\n        background: ${messageContentTheme['background-color']};\n        border-radius: calc(3 * ${theme.base['border-radius']}) ${theme.base['border-radius']}\n          calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        overflow: hidden;\n        color: ${messageContentTheme['foreground-color']};\n        display: inline-block;\n        width: auto;\n        margin-bottom: 0.25rem;\n\n        label {\n          color: inherit;\n        }\n\n        ${messageDirection === 'in' &&\n        css`\n          border-radius: ${theme.base['border-radius']} calc(3 * ${theme.base['border-radius']})\n            calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: 0.5rem 1rem;\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${messageContentTheme['foreground-color']};\n          max-width: 100%;\n\n          ${StyledMediaDownloadButton} {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            color: ${messageContentTheme['foreground-color']};\n            width: ${button.height};\n            height: ${button.height};\n            border: 0.0625rem solid transparent;\n            &:enabled:hover,\n            &:enabled:focus {\n              background: ${messageContentTheme['background-color']};\n              color: ${messageContentTheme['foreground-color']};\n              border: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              border-radius: 50%;\n            }\n            svg {\n              width: 50%;\n              height: 50%;\n            }\n          }\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: 0.5rem 1.5rem;\n              font-size: 0.75rem;\n              margin-top: 0.25rem;\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: 0.5rem 0;\n              border-top: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              position: absolute;\n              width: calc(100% - 2rem);\n              left: 1rem;\n              top: 0;\n            }\n            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n              content: none;\n            }\n            svg {\n              font-size: 1.6rem;\n            }\n          }\n        }\n\n        ${StyledMessageHeader} {\n          padding: 0.5rem 1rem;\n          color: ${messageHeaderTheme['foreground-color']};\n          background-color: ${messageHeaderTheme['background-color']};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${messageHeaderTheme['foreground-color']};\n          margin-inline-end: ${theme.base.spacing};\n        }\n        ${StyledMessageHeaderMeta} {\n          > a {\n            color: ${messageHeaderTheme['foreground-color']};\n          }\n        }\n\n        ${StyledMediaLink}, ${StyledMediaButton} {\n          color: ${messageContentTheme['foreground-color']};\n          font-size: inherit;\n          text-decoration: none;\n          font-weight: 700;\n          overflow-x: hidden;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: inline-block;\n          max-width: 100%;\n          &:hover {\n            color: ${messageContentTheme['foreground-color']};\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ${messageContentTheme['foreground-color']};\n          }\n          &:focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      ${StyledMetaInfoContainer} {\n        width: 100%;\n        padding: 0 0.5rem;\n        ${StyledMetaInfo} {\n          margin-bottom: 0.5rem;\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.dark};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray.light};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport { defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaDownloadButton = styled.button``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\ninterface StyledMessageContainerProps {\n  variant: 'sender' | 'receiver' | 'other';\n  messageDirection: 'in' | 'out' | string;\n  typing: boolean;\n}\n\nexport const StyledMessageContainer = styled.div<StyledMessageContainerProps>(\n  ({\n    messageDirection,\n    variant,\n    typing,\n    theme,\n    theme: {\n      base: {\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      },\n      components: { button }\n    }\n  }) => {\n    const messageHeaderTheme = theme.components.chat.messageBubble[variant].header;\n    const messageContentTheme = theme.components.chat.messageBubble[variant].content;\n    const padding = messageDirection === 'in' ? '0 2rem 0 0' : '0 0 0 2rem';\n    const metaForegroundColor = tryCatch(() => polishedRgba(foregroundColor, foregroundAlpha));\n\n    return css`\n      padding: ${padding};\n      margin-bottom: ${typing ? '0.5rem' : '0'};\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        max-width: 100%;\n        min-width: 100%;\n        background: ${messageContentTheme['background-color']};\n        border-radius: calc(3 * ${theme.base['border-radius']}) ${theme.base['border-radius']}\n          calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        overflow: hidden;\n        color: ${messageContentTheme['foreground-color']};\n        display: inline-block;\n        width: auto;\n        margin-bottom: 0.25rem;\n\n        label {\n          color: inherit;\n        }\n\n        ${messageDirection === 'in' &&\n        css`\n          border-radius: ${theme.base['border-radius']} calc(3 * ${theme.base['border-radius']})\n            calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: 0.5rem 1rem;\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${messageContentTheme['foreground-color']};\n          max-width: 100%;\n\n          ${StyledMediaDownloadButton} {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            color: ${messageContentTheme['foreground-color']};\n            width: ${button.height};\n            height: ${button.height};\n            border: 0.0625rem solid transparent;\n            &:enabled:hover,\n            &:enabled:focus {\n              background: ${messageContentTheme['background-color']};\n              color: ${messageContentTheme['foreground-color']};\n              border: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              border-radius: 50%;\n            }\n            svg {\n              width: 50%;\n              height: 50%;\n            }\n          }\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: 0.5rem 1.5rem;\n              font-size: 0.75rem;\n              margin-top: 0.25rem;\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: 0.5rem 0;\n              border-top: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              position: absolute;\n              width: calc(100% - 2rem);\n              left: 1rem;\n              top: 0;\n            }\n            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n              content: none;\n            }\n            svg {\n              font-size: 1.6rem;\n            }\n          }\n        }\n\n        ${StyledMessageHeader} {\n          padding: 0.5rem 1rem;\n          color: ${messageHeaderTheme['foreground-color']};\n          background-color: ${messageHeaderTheme['background-color']};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${messageHeaderTheme['foreground-color']};\n          margin-inline-end: ${theme.base.spacing};\n        }\n        ${StyledMessageHeaderMeta} {\n          > a {\n            color: ${messageHeaderTheme['foreground-color']};\n          }\n        }\n\n        ${StyledMediaLink}, ${StyledMediaButton} {\n          color: ${messageContentTheme['foreground-color']};\n          font-size: inherit;\n          text-decoration: none;\n          font-weight: 700;\n          overflow-x: hidden;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: inline-block;\n          max-width: 100%;\n          &:hover {\n            color: ${messageContentTheme['foreground-color']};\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ${messageContentTheme['foreground-color']};\n          }\n          &:focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      ${StyledMetaInfoContainer} {\n        width: 100%;\n        padding: 0 0.5rem;\n        ${StyledMetaInfo} {\n          margin-bottom: 0.5rem;\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.medium};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray['extra-light']};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,YAAY,EAoBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AA6CtD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAqWvD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,YAAY,EAqBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AA8CtD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAiVvD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Email/Email.js

@@ -1,11 +1,11 @@
 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, MenuButton, Sentiment, useOuterEvent, Popover, useElement, CardContent, useI18n, FileDisplay, useBreakpoint, DateTimeDisplay, useConfiguration } from '@pega/cosmos-react-core';
+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, StyledSecondarySeparator } from './Email.styles';
-const renderEmailUserList = ({ emailUsers, showEmailAddress, showShortName }) => {
+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;
@@ -31,21 +31,21 @@ const Email = forwardRef((props, ref) => {
         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) {
@@ -70,11 +70,11 @@ const Email = forwardRef((props, ref) => {
         secondaryFields.push({
             id: 'suggested_replies',
             name: '',
-            value: (_jsxs(Flex, Object.assign({ container: { gap: 1, wrap: 'wrap' } }, { children: [suggestions
+            value: (_jsxs(Flex, Object.assign({ container: { wrap: 'wrap' } }, { children: [suggestions
                         .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)
-                        .map(({ id: suggestionId, title }) => (_jsx(Button, Object.assign({ variant: 'secondary', onClick: () => {
+                        .map(({ id: suggestionId, title }) => (_jsx(StyledSuggestedRepliesButton, Object.assign({ variant: 'secondary', onClick: () => {
                             onSuggestionClick?.(id, suggestionId);
-                        } }, { children: title }), suggestionId))), suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (_jsx(MenuButton, { text: 'Other responses', variant: 'secondary', menu: {
+                        } }, { 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 }) => {
@@ -102,30 +102,27 @@ const Email = forwardRef((props, ref) => {
         });
         renderedBody = (_jsx(RichTextViewer, { content: body, type: 'html', interactionRenderers: entityConfigs }, void 0));
     }
+    const emailMetaListItems = [
+        _jsxs(Text, Object.assign({ 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, Object.assign({ 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, Object.assign({ as: StyledEmail, container: {
             direction: 'column',
             gap: 1
         }, ref: ref }, restProps, { children: [_jsx(SummaryItem, { as: StyledEmailHeader, visual: _jsx(Avatar, Object.assign({}, from.avatarProps, { name: from.fullName }), void 0), ref: headerRef, primary: _jsxs(Flex, Object.assign({ container: {
                         gap: 1,
                         alignItems: 'center'
-                    } }, { children: [_jsx(EmailDisplay, { value: from.emailAddress, displayText: from.fullName, variant: 'text', as: StyledFromEmailDisplay }, void 0), sentiment && _jsx(Sentiment, Object.assign({}, sentiment, { labelHidden: true }), void 0)] }), void 0), secondary: _jsxs(Flex, Object.assign({ container: {
+                    } }, { children: [_jsx(StyledFromEmailDisplay, { value: from.emailAddress, displayText: from.fullName, variant: 'text' }, void 0), sentiment && _jsx(Sentiment, Object.assign({}, sentiment, { labelHidden: true }), void 0)] }), void 0), secondary: _jsxs(Flex, Object.assign({ container: {
                         gap: 0,
                         alignItems: 'start',
                         direction: 'column'
                     } }, { children: [_jsxs(Flex, Object.assign({ container: {
                                 gap: 0,
                                 alignItems: 'start'
-                            } }, { children: [_jsxs(Text, Object.assign({ variant: 'secondary' }, { children: [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')}, `
-                                            : ''] }), void 0), isSmallOrAbove && timeStamp && (_jsxs(Flex, Object.assign({ container: {
-                                        gap: 0,
-                                        alignItems: 'center'
-                                    } }, { children: [_jsx(StyledSecondarySeparator, {}, void 0), _jsxs(Text, Object.assign({ 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)] }), void 0)), _jsx(Button, Object.assign({ icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
+                            } }, { children: [_jsx(MetaList, { items: isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]] }, void 0), _jsx(Button, Object.assign({ icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
                                         setShowEmailMoreInfo(true);
-                                    }, "aria-label": t('show_more'), title: t('show_more') }, { children: _jsx(Icon, { name: 'arrow-micro-down' }, void 0) }), void 0), _jsx(Popover, Object.assign({ 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 && (_jsxs(Text, Object.assign({ 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))] }), void 0), actions: _jsx(Flex, Object.assign({ container: {
+                                    }, label: t('show_more') }, { children: _jsx(Icon, { name: 'arrow-micro-down' }, void 0) }), void 0), _jsx(Popover, Object.assign({ 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, Object.assign({ container: {
                         gap: 1
                     } }, { children: actions }), void 0) }, void 0), _jsxs(Flex, Object.assign({ container: {
                     direction: 'column',

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 { 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  MenuButton,\n  FieldValueListProps,\n  Sentiment,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  useBreakpoint,\n  DateTimeDisplay,\n  useConfiguration\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  StyledSecondarySeparator\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      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: 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: (\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={{ gap: 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    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.entityValue.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    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              <EmailDisplay\n                value={from.emailAddress}\n                displayText={from.fullName}\n                variant='text'\n                as={StyledFromEmailDisplay}\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                <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                </Text>\n                {isSmallOrAbove && timeStamp && (\n                  <Flex\n                    container={{\n                      gap: 0,\n                      alignItems: 'center'\n                    }}\n                  >\n                    <StyledSecondarySeparator />\n                    <Text variant='secondary'>\n                      {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                        new Date(timeStamp)\n                      )}, `}\n                      <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n                    </Text>\n                  </Flex>\n                )}\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              {!isSmallOrAbove && timeStamp && (\n                <Text variant='secondary'>\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            </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"]}
+{"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.entityValue.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,7 +1,9 @@
 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>;

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.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAY5B,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,6OAY7C,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAEtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAcnC,CAAC;AACH,eAAO,MAAM,2BAA2B,UAiBvC,CAAC;AAEF,eAAO,MAAM,WAAW,yGAAe,CAAC"}
+{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"AAgBA,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,UAiBvC,CAAC;AAEF,eAAO,MAAM,WAAW,yGAAe,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, FieldValueList, readableHue, StyledFieldName, StyledFieldValue, StyledSecondary, StyledSummaryItemActions, StyledVisual } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, defaultThemeProp, EmailDisplay, FieldValueList, MenuButton, StyledFieldName, StyledFieldValue, StyledSecondary, StyledSummaryItemActions, StyledVisual } from '@pega/cosmos-react-core';
 export const StyledEmailMoreInfoButton = styled.button `
   min-height: 0.5rem;
   min-width: 0.5rem;
@@ -9,7 +9,7 @@ export const StyledEmailHeader = styled.div(({ theme }) => {
     return css `
     grid-column-gap: ${theme.base.spacing};
     border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    padding: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
+    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
     ${StyledVisual},${StyledSummaryItemActions} {
       align-self: flex-start;
     }
@@ -19,10 +19,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;
@@ -50,14 +76,8 @@ export const StyledEmailMoreInfoPopover = styled.div `
   max-width: 30rem;
 `;
 export const StyledSecondarySeparator = styled.div(({ theme }) => {
-    const readableBackground = readableHue(theme.base.palette['border-line'], theme.base.palette['primary-background'], { level: 'AANonText' });
     return css `
-    width: 0.3em;
-    height: 0.3em;
-    border-radius: 50%;
-    background: ${readableBackground};
     margin: 0 calc(${theme.base.spacing} / 2);
-    flex: 0 0 auto;
   `;
 });
 export const EmailEntityBackgroundColors = [

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

@@ -1 +1 @@
-{"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';\n\nimport {\n  defaultThemeProp,\n  FieldValueList,\n  readableHue,\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: ${theme.base.spacing};\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: 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 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    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  const readableBackground = readableHue(\n    theme.base.palette['border-line'],\n    theme.base.palette['primary-background'],\n    { level: 'AANonText' }\n  );\n  return css`\n    width: 0.3em;\n    height: 0.3em;\n    border-radius: 50%;\n    background: ${readableBackground};\n    margin: 0 calc(${theme.base.spacing} / 2);\n    flex: 0 0 auto;\n  `;\n});\nexport const EmailEntityBackgroundColors = [\n  '#2E9FCC',\n  '#F49C00',\n  '#9B55B7',\n  '#19AE5C',\n  '#94A4A5',\n  '#E84A34',\n  '#32C6AA',\n  '#32485E',\n  '#E77D03',\n  '#00A084',\n  '#24619D',\n  '#F1C400',\n  '#7E8B8C',\n  '#D45300',\n  '#BCC2C6',\n  '#1ECD6C'\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';\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} 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: ${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  '#2E9FCC',\n  '#F49C00',\n  '#9B55B7',\n  '#19AE5C',\n  '#94A4A5',\n  '#E84A34',\n  '#32C6AA',\n  '#32485E',\n  '#E77D03',\n  '#00A084',\n  '#24619D',\n  '#F1C400',\n  '#7E8B8C',\n  '#D45300',\n  '#BCC2C6',\n  '#1ECD6C'\n];\n\nexport const StyledEmail = styled.div``;\n"]}