npm - @pega/cosmos-react-social - Versions diffs - 9.6.1 → 9.8.0 - Mend

@pega/cosmos-react-social 9.6.1 → 9.8.0

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

Files changed (17) hide show

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

@@ -7,8 +7,8 @@ const StyledAutopilotButton = styled(Button)(({ theme }) => {
     return css `
     color: ${theme.base.palette.ai};
-    &:enabled:focus,
-    &:not([disabled]):focus {
+    &:enabled:focus-visible,
+    &:not([disabled]):focus-visible {
       box-shadow: none;
       text-decoration: underline;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Autopilot.js","sourceRoot":"","sources":["../../../src/components/Autopilot/Autopilot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;;;;;;;;;sCASI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAmC,EAC3D,GAA2B;IAE3B,MAAM,EACJ,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACxC,gBAAgB,EACjB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAA2B,CAAC;IACpF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,gBAAgB,EAAE,CAAC;YAC9B,MAAM,EAAE,CAAC,CAAC,aAAa;YACvB,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;SACjC,CAAC,CAAC;QACH,IAAI,IAAI;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,qBAAqB,OAChB,SAAS,EACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,KAAK,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,EAC5B,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAC/B,EACvB,MAAM,IAAI,gBAAgB,IAC1B,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,2BAA2B;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, useContext, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactElement, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Icon,\n defaultThemeProp,\n useConsolidatedRef,\n useElement,\n isValidElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface AutopilotProps {\n children: Record<string, string> \| ReactElement;\n}\n\nconst StyledAutopilotButton = styled(Button)(({ theme }) => {\n return css`\n color: ${theme.base.palette.ai};\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n\n svg {\n margin-inline-end: calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAutopilotButton.defaultProps = defaultThemeProp;\n\nconst serializer = new XMLSerializer();\n\nconst Autopilot: FunctionComponent<AutopilotProps & ForwardProps> = forwardRef(function Autopilot(\n { children, ...restProps }: PropsWithoutRef<AutopilotProps>,\n ref: Ref<HTMLButtonElement>\n) {\n const {\n autopilotInfo: { label: autopilotLabel },\n onAutopilotClick\n } = useContext(FeedContext);\n const [autopilotContent, setAutopilotContent] = useState<JSX.Element \| undefined>();\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const mentionRef = useConsolidatedRef(ref);\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n const comp = onAutopilotClick?.({\n target: e.currentTarget,\n onDismiss: () => setTarget(null)\n });\n if (comp) setAutopilotContent(comp);\n };\n\n return (\n <>\n <StyledAutopilotButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n <Icon name='polaris-solid' />\n {isValidElement(children) ? children : autopilotLabel}\n </StyledAutopilotButton>\n {target && autopilotContent}\n </>\n );\n});\n\nexport const AutopilotConfig = {\n type: 'autopilot',\n xmlElement: 'pega-autopilot',\n regexPattern: /(?:^\|)<pega-autopilot\\/>/g,\n component: Autopilot,\n inject: () => {\n const element = document.createElementNS(null, 'pega-autopilot');\n return serializer.serializeToString(element);\n }\n};\n\nexport default Autopilot;\n"]}
1	+ {"version":3,"file":"Autopilot.js","sourceRoot":"","sources":["../../../src/components/Autopilot/Autopilot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;;;;;;;;;sCASI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAmC,EAC3D,GAA2B;IAE3B,MAAM,EACJ,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACxC,gBAAgB,EACjB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAA2B,CAAC;IACpF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,gBAAgB,EAAE,CAAC;YAC9B,MAAM,EAAE,CAAC,CAAC,aAAa;YACvB,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;SACjC,CAAC,CAAC;QACH,IAAI,IAAI;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,qBAAqB,OAChB,SAAS,EACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,KAAK,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,EAC5B,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAC/B,EACvB,MAAM,IAAI,gBAAgB,IAC1B,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,2BAA2B;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, useContext, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactElement, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Icon,\n defaultThemeProp,\n useConsolidatedRef,\n useElement,\n isValidElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface AutopilotProps {\n children: Record<string, string> \| ReactElement;\n}\n\nconst StyledAutopilotButton = styled(Button)(({ theme }) => {\n return css`\n color: ${theme.base.palette.ai};\n\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n\n svg {\n margin-inline-end: calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAutopilotButton.defaultProps = defaultThemeProp;\n\nconst serializer = new XMLSerializer();\n\nconst Autopilot: FunctionComponent<AutopilotProps & ForwardProps> = forwardRef(function Autopilot(\n { children, ...restProps }: PropsWithoutRef<AutopilotProps>,\n ref: Ref<HTMLButtonElement>\n) {\n const {\n autopilotInfo: { label: autopilotLabel },\n onAutopilotClick\n } = useContext(FeedContext);\n const [autopilotContent, setAutopilotContent] = useState<JSX.Element \| undefined>();\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const mentionRef = useConsolidatedRef(ref);\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n const comp = onAutopilotClick?.({\n target: e.currentTarget,\n onDismiss: () => setTarget(null)\n });\n if (comp) setAutopilotContent(comp);\n };\n\n return (\n <>\n <StyledAutopilotButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n <Icon name='polaris-solid' />\n {isValidElement(children) ? children : autopilotLabel}\n </StyledAutopilotButton>\n {target && autopilotContent}\n </>\n );\n});\n\nexport const AutopilotConfig = {\n type: 'autopilot',\n xmlElement: 'pega-autopilot',\n regexPattern: /(?:^\|)<pega-autopilot\\/>/g,\n component: Autopilot,\n inject: () => {\n const element = document.createElementNS(null, 'pega-autopilot');\n return serializer.serializeToString(element);\n }\n};\n\nexport default Autopilot;\n"]}

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

@@ -244,7 +244,7 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
           &:visited {
             color: ${contrastContentColor};
           }
-          &:focus {
+          &:focus-visible {
             box-shadow: ${theme.base.shadow.focus};
           }
         }

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

	@@ -1 +1 @@
1	- {"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 type { DefaultTheme } from 'styled-components';\nimport { rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize,\n Link,\n StyledLink,\n readableColor\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport type { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div`\n ${StyledEditorContainer} {\n padding: 0;\n\n a {\n color: inherit;\n }\n\n pre {\n margin: 0;\n background-color: inherit;\n color: inherit;\n }\n\n pre > code {\n background-color: inherit;\n color: inherit;\n box-shadow: none;\n margin-block: 0;\n padding: 0;\n }\n\n pre > code > span {\n color: inherit;\n }\n }\n`;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledMediaMessage = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img`\n cursor: pointer;\n`;\n\nexport const StyledMediaLink = styled(Link)``;\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 StyledStatusInfo = 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\nexport const StyledHeadsetIconBackground = styled.div``;\n\nexport const StyledMediaContent = styled.div``;\n\nexport const StyledMediaButton = styled(BareButton)`\n text-align: start;\n`;\n\ninterface StyledMessageContainerProps {\n senderType: 'customer' \| 'agent' \| 'bot';\n direction: 'in' \| 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n &:first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: min(calc(3 * ${borderRadius}), 1.5rem) min(${borderRadius}, 0.5rem)\n min(calc(3 * ${borderRadius}), 1.5rem) min(calc(3 * ${borderRadius}), 1.5rem);\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\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 ${StyledMediaMessage} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledMediaMessage}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledMediaMessage}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n ${StyledLink} {\n color: ${contrastContentColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledMediaMessage}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n\n ${StyledMediaContent} {\n padding-block-end: calc(0.5 * ${spacing});\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n word-break: break-word;\n white-space: pre-wrap;\n }\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\nexport const StyledUndeliveredIcon = styled(Icon)(({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n}) => {\n return css`\n color: ${urgent};\n `;\n});\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}
1	+ {"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 type { DefaultTheme } from 'styled-components';\nimport { rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize,\n Link,\n StyledLink,\n readableColor\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport type { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div`\n ${StyledEditorContainer} {\n padding: 0;\n\n a {\n color: inherit;\n }\n\n pre {\n margin: 0;\n background-color: inherit;\n color: inherit;\n }\n\n pre > code {\n background-color: inherit;\n color: inherit;\n box-shadow: none;\n margin-block: 0;\n padding: 0;\n }\n\n pre > code > span {\n color: inherit;\n }\n }\n`;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledMediaMessage = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img`\n cursor: pointer;\n`;\n\nexport const StyledMediaLink = styled(Link)``;\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 StyledStatusInfo = 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\nexport const StyledHeadsetIconBackground = styled.div``;\n\nexport const StyledMediaContent = styled.div``;\n\nexport const StyledMediaButton = styled(BareButton)`\n text-align: start;\n`;\n\ninterface StyledMessageContainerProps {\n senderType: 'customer' \| 'agent' \| 'bot';\n direction: 'in' \| 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n &:first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: min(calc(3 * ${borderRadius}), 1.5rem) min(${borderRadius}, 0.5rem)\n min(calc(3 * ${borderRadius}), 1.5rem) min(calc(3 * ${borderRadius}), 1.5rem);\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\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 ${StyledMediaMessage} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledMediaMessage}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledMediaMessage}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n ${StyledLink} {\n color: ${contrastContentColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledMediaMessage}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n\n ${StyledMediaContent} {\n padding-block-end: calc(0.5 * ${spacing});\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n word-break: break-word;\n white-space: pre-wrap;\n }\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\nexport const StyledUndeliveredIcon = styled(Icon)(({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n}) => {\n return css`\n color: ${urgent};\n `;\n});\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGvE,eAAO,MAAM,yBAAyB,yOAIrC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;yLAI9B,CAAC;AAIH,eAAO,MAAM,sBAAsB;;2LAIjC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAW5B,CAAC;AAIH,eAAO,MAAM,4BAA4B;;2LAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC;;;2BAFH,CAAA;iDAYxC,CAAC;AAIH,eAAO,MAAM,eAAe,6NAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB;;iMAMjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,+NAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC;2BAWvC,CAAH;iDATF,CAAC;AAEF,eAAO,MAAM,kCAAkC;2BAOzC,CAAH;iDAMD,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,6NAInC,CAAC;AAIH,eAAO,MAAM,iBAAiB,+OAc5B,CAAC;AAIH,eAAO,MAAM,gBAAgB;2BA1CvB,CAAH;iDAoDD,CAAC;AAIH,eAAO,MAAM,4BAA4B;;2LAExC,CAAC;AAEF,eAAO,MAAM,cAAc,6NAMzB,CAAC;AAIH,eAAO,MAAM,8BAA8B;eAC9B,OAAO;YAkBlB,CAAC;AAIH,eAAO,MAAM,sBAAsB,uNAAkB,CAAC;AACtD,eAAO,MAAM,2BAA2B,iOAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB;yBAAuD,OAAO;YA6B1F,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,YAAY,uNAKvB,CAAC;AAIH,eAAO,MAAM,UAAU,6NAarB,CAAC;AAIH,eAAO,MAAM,yBAAyB,uNAMpC,CAAC;AAEH,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;YAelF,CAAC;AAEF,eAAO,MAAM,mBAAmB;4BACN,OAAO;~~YAiB~~/B,CAAC;AAIH,eAAO,MAAM,8BAA8B,yOAKzC,CAAC;AAIH,eAAO,MAAM,6BAA6B,yOAOxC,CAAC;AAIH,eAAO,MAAM,2BAA2B,yOAMtC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAAuC,OAAO;YAUjF,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAS7B,CAAC;AAEH,eAAO,MAAM,eAAe;2BAAuC,OAAO;YAUzE,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAgBrC,CAAC;AAEH,eAAO,MAAM,yBAAyB,6NAUpC,CAAC;AAIH,eAAO,MAAM,4BAA4B,6NAIvC,CAAC;AAIH,eAAO,MAAM,2BAA2B,6NAQtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAejC,CAAC;AAGH,eAAO,MAAM,2BAA2B;;mBAoBtC,CAAC"}
1	+ {"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGvE,eAAO,MAAM,yBAAyB,yOAIrC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;yLAI9B,CAAC;AAIH,eAAO,MAAM,sBAAsB;;2LAIjC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAW5B,CAAC;AAIH,eAAO,MAAM,4BAA4B;;2LAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC;;;2BAFH,CAAA;iDAYxC,CAAC;AAIH,eAAO,MAAM,eAAe,6NAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB;;iMAMjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,+NAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC;2BAWvC,CAAH;iDATF,CAAC;AAEF,eAAO,MAAM,kCAAkC;2BAOzC,CAAH;iDAMD,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,6NAInC,CAAC;AAIH,eAAO,MAAM,iBAAiB,+OAc5B,CAAC;AAIH,eAAO,MAAM,gBAAgB;2BA1CvB,CAAH;iDAoDD,CAAC;AAIH,eAAO,MAAM,4BAA4B;;2LAExC,CAAC;AAEF,eAAO,MAAM,cAAc,6NAMzB,CAAC;AAIH,eAAO,MAAM,8BAA8B;eAC9B,OAAO;YAkBlB,CAAC;AAIH,eAAO,MAAM,sBAAsB,uNAAkB,CAAC;AACtD,eAAO,MAAM,2BAA2B,iOAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB;yBAAuD,OAAO;YA6B1F,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,YAAY,uNAKvB,CAAC;AAIH,eAAO,MAAM,UAAU,6NAarB,CAAC;AAIH,eAAO,MAAM,yBAAyB,uNAMpC,CAAC;AAEH,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;YAelF,CAAC;AAEF,eAAO,MAAM,mBAAmB;4BACN,OAAO;YAkB/B,CAAC;AAIH,eAAO,MAAM,8BAA8B,yOAKzC,CAAC;AAIH,eAAO,MAAM,6BAA6B,yOAOxC,CAAC;AAIH,eAAO,MAAM,2BAA2B,yOAMtC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAAuC,OAAO;YAUjF,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAS7B,CAAC;AAEH,eAAO,MAAM,eAAe;2BAAuC,OAAO;YAUzE,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAgBrC,CAAC;AAEH,eAAO,MAAM,yBAAyB,6NAUpC,CAAC;AAIH,eAAO,MAAM,4BAA4B,6NAIvC,CAAC;AAIH,eAAO,MAAM,2BAA2B,6NAQtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAejC,CAAC;AAGH,eAAO,MAAM,2BAA2B;;mBAoBtC,CAAC"}

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

@@ -235,8 +235,9 @@ export const StyledGridContainer = styled.div(({ theme, showExpandedUtilities })
     min-height: calc(
       100vh - var(--appshell-offset, 0rem) - calc(2 * var(--email-container-padding))
     );
-    background-color: ${theme.base.palette['app-background']};
+    background: ${theme.base.palette['app-background']};
     inset-block-start: var(--appshell-offset);
     ${!showExpandedUtilities &&
         css `
       width: auto;

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

	@@ -1 +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';\nimport { mix } from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n EmailDisplay,\n FieldValueList,\n MenuButton,\n StyledFieldName,\n StyledFieldValue,\n StyledInlineFieldValueRow,\n StyledSecondary,\n StyledSummaryItemActions,\n StyledVisual,\n tryCatch,\n readableColor,\n readableHue,\n nlpColors,\n StyledPopover,\n StyledButton,\n StyledEmptyState,\n calculateBackgroundAndContrastColor,\n Text\n} from '@pega/cosmos-react-core';\n\nimport type { EmailEntityProps, EmailShellProps } from './Email.types';\nimport { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n min-height: 0.5rem;\n min-width: 0.5rem;\n flex-shrink: 0;\n`;\n\nexport const StyledImportantText = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n `;\n});\n\nStyledImportantText.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: calc(4 * ${theme.base.spacing});\n `;\n});\n\nStyledAttachmentButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n return css`\n grid-column-gap: ${theme.base.spacing};\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 ${StyledInlineFieldValueRow}:not(:last-child) > ${StyledFieldValue},\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\nStyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n return css`\n margin: 0 calc(${theme.base.spacing} / 2);\n `;\n});\n\nStyledSecondarySeparator.defaultProps = defaultThemeProp;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n const variant = entity.variant;\n const backgroundColor = readableHue(\n nlpColors[variant % nlpColors.length],\n theme.base.palette['primary-background']\n );\n const textColor = tryCatch(() => readableColor(backgroundColor));\n return css`\n border-radius: calc(${theme.base['border-radius']} / 3);\n padding: 0 calc(0.5 * ${theme.base.spacing});\n background-color: ${backgroundColor};\n color: ${textColor};\n display: inline-block;\n `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nexport const StyledEntityList = styled(FieldValueList)(({ theme }) => {\n const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));\n return css`\n ${StyledFieldName} {\n color: ${textColor};\n }\n ${StyledEmailEntity} {\n padding: 0 calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledEntityList.defaultProps = defaultThemeProp;\n\nexport const StyledForwardedContentToggle = styled(Button)`\n align-self: flex-start;\n`;\n\nexport const StyledLoadMore = styled.div(({ theme }) => {\n return css`\n margin: ${theme.base.spacing} 0;\n min-height: 2rem;\n min-width: 2rem;\n `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenuFieldSelector = styled.div<{\n selected?: boolean;\n}>(({ theme, selected }) => {\n const background = selected\n ? theme.base.colors.green.medium\n : theme.base.palette['primary-background'];\n const borderColor = selected\n ? theme.base.colors.green['extra-light']\n : theme.base.palette['primary-background'];\n return css`\n background-color: ${background};\n border: 0.0625rem solid ${borderColor};\n border-radius: 100%;\n display: inline-block;\n height: 0.625rem;\n width: 0.625rem;\n background-clip: content-box;\n padding: 0.0625rem;\n `;\n});\n\nStyledContextMenuFieldSelector.defaultProps = defaultThemeProp;\n\nexport const StyledEmailShellHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps & { singleConversation?: boolean }>(\n props => {\n const {\n theme: { base },\n singleConversation\n } = props;\n return css`\n min-width: 25rem;\n height: 100%;\n border-radius: ${base['border-radius']};\n > ${StyledEmailShellHeader} {\n padding-inline: calc(2 * ${base.spacing}) ${base.spacing};\n padding-block: ${base.spacing};\n background: ${base.palette['primary-background']};\n border-radius: ${base['border-radius']};\n\n ${singleConversation &&\n `\n border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n `}\n }\n > ${StyledEmailConversationList} {\n height: 100%;\n overflow-y: auto;\n list-style-type: none;\n }\n `;\n }\n);\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenu = styled.div(({ theme }) => {\n return css`\n header {\n background-color: ${theme.base.palette['secondary-background']};\n }\n `;\n});\n\nStyledContextMenu.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: var(--header-height);\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(() => {\n return css`\n --list-height: calc(100vh - var(--appshell-offset));\n position: sticky;\n inset-block-start: var(--appshell-offset);\n height: calc(\n var(--list-height) - var(--header-height, 0rem) - calc(2 * var(--email-container-padding))\n );\n\n &:has(${StyledHeader}) {\n --header-height: 3rem;\n }\n `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewHeader = styled.header(() => {\n return css`\n top: var(--appshell-offset);\n height: 4rem;\n padding-inline-start: 0;\n `;\n});\n\nexport const StyledUtilitiesContainer = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities }) => {\n return css`\n ${showExpandedUtilities\n ? css`\n flex-shrink: 0;\n max-width: 23rem;\n `\n : css`\n position: sticky;\n top: calc(var(--appshell-offset));\n height: fit-content;\n `}\n `;\n }\n);\n\nexport const StyledGridContainer = styled.div<{\n showExpandedUtilities?: boolean;\n}>(({ theme, showExpandedUtilities }) => {\n return css`\n min-height: calc(\n 100vh - var(--appshell-offset, 0rem) - calc(2 * var(--email-container-padding))\n );\n background-color: ${theme.base.palette['app-background']};\n inset-block-start: var(--appshell-offset);\n ${!showExpandedUtilities &&\n css`\n width: auto;\n `}\n\n ${StyledUtilitiesContainer} {\n inset-block-start: var(--appshell-offset);\n }\n `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: center;\n `;\n});\n\nStyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: flex-end;\n margin-inline-end: 0.375rem;\n height: var(--case-view-header-height, 0);\n `;\n});\n\nStyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: end;\n margin-block-start: 3rem;\n `;\n});\n\nStyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities }) => {\n return css`\n width: inherit;\n ${!showExpandedUtilities &&\n css`\n display: none;\n `}\n `;\n }\n);\n\nexport const StyledEmailActions = styled.div(() => {\n return css`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n ${StyledButton} + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nexport const StyledUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities, theme }) => {\n return css`\n ${showExpandedUtilities &&\n css`\n width: 25rem;\n `}\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewColumns = styled.div(() => {\n return css`\n --case-view-header-height: 0;\n ${StyledEmptyState} {\n flex-grow: 1;\n }\n ${StyledEmailShell} {\n min-width: 0;\n }\n &:has(${StyledEmailCaseViewHeader}) {\n --case-view-header-height: 4rem;\n ${StyledUtilitiesContainer} {\n inset-inline-start: calc(var(--appshell-offset) + var(--case-view-header-height));\n }\n }\n `;\n});\n\nexport const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: calc(100vh - 3rem);\n z-index: ${theme.base['z-index'].drawer - 1};\n top: 3rem;\n `;\n});\n\nStyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewContainer = styled.div(({ theme }) => {\n return css`\n padding-inline: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledEmailCaseViewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailManagerContainer = styled.div(({ theme }) => {\n return css`\n --email-container-padding: calc(2 * ${theme.base.spacing});\n padding: var(--email-container-padding);\n ${StyledEmailCaseViewContainer} {\n padding-inline: 0;\n }\n `;\n});\n\nStyledEmailManagerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailSummaryList = styled.ol(({ theme }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n ${StyledEmailSummaryItem}[data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n }\n `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n ${StyledEmailSummaryItem} {\n background: ${backgroundColor};\n &:hover,\n &:focus-within {\n background-color: ${hoverColor};\n }\n }\n ${StyledMessageAndDate} {\n flex-wrap: wrap;\n }\n `;\n});\n\nStyledEmailNotificationList.defaultProps = defaultThemeProp;\n"]}
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';\nimport { mix } from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n EmailDisplay,\n FieldValueList,\n MenuButton,\n StyledFieldName,\n StyledFieldValue,\n StyledInlineFieldValueRow,\n StyledSecondary,\n StyledSummaryItemActions,\n StyledVisual,\n tryCatch,\n readableColor,\n readableHue,\n nlpColors,\n StyledPopover,\n StyledButton,\n StyledEmptyState,\n calculateBackgroundAndContrastColor,\n Text\n} from '@pega/cosmos-react-core';\n\nimport type { EmailEntityProps, EmailShellProps } from './Email.types';\nimport { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n min-height: 0.5rem;\n min-width: 0.5rem;\n flex-shrink: 0;\n`;\n\nexport const StyledImportantText = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n `;\n});\n\nStyledImportantText.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: calc(4 * ${theme.base.spacing});\n `;\n});\n\nStyledAttachmentButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n return css`\n grid-column-gap: ${theme.base.spacing};\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 ${StyledInlineFieldValueRow}:not(:last-child) > ${StyledFieldValue},\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\nStyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n return css`\n margin: 0 calc(${theme.base.spacing} / 2);\n `;\n});\n\nStyledSecondarySeparator.defaultProps = defaultThemeProp;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n const variant = entity.variant;\n const backgroundColor = readableHue(\n nlpColors[variant % nlpColors.length],\n theme.base.palette['primary-background']\n );\n const textColor = tryCatch(() => readableColor(backgroundColor));\n return css`\n border-radius: calc(${theme.base['border-radius']} / 3);\n padding: 0 calc(0.5 * ${theme.base.spacing});\n background-color: ${backgroundColor};\n color: ${textColor};\n display: inline-block;\n `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nexport const StyledEntityList = styled(FieldValueList)(({ theme }) => {\n const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));\n return css`\n ${StyledFieldName} {\n color: ${textColor};\n }\n ${StyledEmailEntity} {\n padding: 0 calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledEntityList.defaultProps = defaultThemeProp;\n\nexport const StyledForwardedContentToggle = styled(Button)`\n align-self: flex-start;\n`;\n\nexport const StyledLoadMore = styled.div(({ theme }) => {\n return css`\n margin: ${theme.base.spacing} 0;\n min-height: 2rem;\n min-width: 2rem;\n `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenuFieldSelector = styled.div<{\n selected?: boolean;\n}>(({ theme, selected }) => {\n const background = selected\n ? theme.base.colors.green.medium\n : theme.base.palette['primary-background'];\n const borderColor = selected\n ? theme.base.colors.green['extra-light']\n : theme.base.palette['primary-background'];\n return css`\n background-color: ${background};\n border: 0.0625rem solid ${borderColor};\n border-radius: 100%;\n display: inline-block;\n height: 0.625rem;\n width: 0.625rem;\n background-clip: content-box;\n padding: 0.0625rem;\n `;\n});\n\nStyledContextMenuFieldSelector.defaultProps = defaultThemeProp;\n\nexport const StyledEmailShellHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps & { singleConversation?: boolean }>(\n props => {\n const {\n theme: { base },\n singleConversation\n } = props;\n return css`\n min-width: 25rem;\n height: 100%;\n border-radius: ${base['border-radius']};\n > ${StyledEmailShellHeader} {\n padding-inline: calc(2 * ${base.spacing}) ${base.spacing};\n padding-block: ${base.spacing};\n background: ${base.palette['primary-background']};\n border-radius: ${base['border-radius']};\n\n ${singleConversation &&\n `\n border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n `}\n }\n > ${StyledEmailConversationList} {\n height: 100%;\n overflow-y: auto;\n list-style-type: none;\n }\n `;\n }\n);\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenu = styled.div(({ theme }) => {\n return css`\n header {\n background-color: ${theme.base.palette['secondary-background']};\n }\n `;\n});\n\nStyledContextMenu.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: var(--header-height);\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(() => {\n return css`\n --list-height: calc(100vh - var(--appshell-offset));\n position: sticky;\n inset-block-start: var(--appshell-offset);\n height: calc(\n var(--list-height) - var(--header-height, 0rem) - calc(2 * var(--email-container-padding))\n );\n\n &:has(${StyledHeader}) {\n --header-height: 3rem;\n }\n `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewHeader = styled.header(() => {\n return css`\n top: var(--appshell-offset);\n height: 4rem;\n padding-inline-start: 0;\n `;\n});\n\nexport const StyledUtilitiesContainer = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities }) => {\n return css`\n ${showExpandedUtilities\n ? css`\n flex-shrink: 0;\n max-width: 23rem;\n `\n : css`\n position: sticky;\n top: calc(var(--appshell-offset));\n height: fit-content;\n `}\n `;\n }\n);\n\nexport const StyledGridContainer = styled.div<{\n showExpandedUtilities?: boolean;\n}>(({ theme, showExpandedUtilities }) => {\n return css`\n min-height: calc(\n 100vh - var(--appshell-offset, 0rem) - calc(2 * var(--email-container-padding))\n );\n background: ${theme.base.palette['app-background']};\n inset-block-start: var(--appshell-offset);\n\n ${!showExpandedUtilities &&\n css`\n width: auto;\n `}\n\n ${StyledUtilitiesContainer} {\n inset-block-start: var(--appshell-offset);\n }\n `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: center;\n `;\n});\n\nStyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: flex-end;\n margin-inline-end: 0.375rem;\n height: var(--case-view-header-height, 0);\n `;\n});\n\nStyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n align-self: end;\n margin-block-start: 3rem;\n `;\n});\n\nStyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities }) => {\n return css`\n width: inherit;\n ${!showExpandedUtilities &&\n css`\n display: none;\n `}\n `;\n }\n);\n\nexport const StyledEmailActions = styled.div(() => {\n return css`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n ${StyledButton} + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nexport const StyledUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n ({ showExpandedUtilities, theme }) => {\n return css`\n ${showExpandedUtilities &&\n css`\n width: 25rem;\n `}\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewColumns = styled.div(() => {\n return css`\n --case-view-header-height: 0;\n ${StyledEmptyState} {\n flex-grow: 1;\n }\n ${StyledEmailShell} {\n min-width: 0;\n }\n &:has(${StyledEmailCaseViewHeader}) {\n --case-view-header-height: 4rem;\n ${StyledUtilitiesContainer} {\n inset-inline-start: calc(var(--appshell-offset) + var(--case-view-header-height));\n }\n }\n `;\n});\n\nexport const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: calc(100vh - 3rem);\n z-index: ${theme.base['z-index'].drawer - 1};\n top: 3rem;\n `;\n});\n\nStyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewContainer = styled.div(({ theme }) => {\n return css`\n padding-inline: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledEmailCaseViewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailManagerContainer = styled.div(({ theme }) => {\n return css`\n --email-container-padding: calc(2 * ${theme.base.spacing});\n padding: var(--email-container-padding);\n ${StyledEmailCaseViewContainer} {\n padding-inline: 0;\n }\n `;\n});\n\nStyledEmailManagerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailSummaryList = styled.ol(({ theme }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n ${StyledEmailSummaryItem}[data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n }\n `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {\n const navBg = theme.components['app-shell'].nav.background;\n const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n\n return css`\n ${StyledEmailSummaryItem} {\n background: ${backgroundColor};\n &:hover,\n &:focus-within {\n background-color: ${hoverColor};\n }\n }\n ${StyledMessageAndDate} {\n flex-wrap: wrap;\n }\n `;\n});\n\nStyledEmailNotificationList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Email/EmailNotificationPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailNotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAIjE,eAAO,MAAM,0BAA0B,EAAE,iBAAiB,CACxD,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,YAAY,~~CAalE~~,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,2BAA2B,GAAG,YAAY,CAazF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1	+ {"version":3,"file":"EmailNotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAIjE,eAAO,MAAM,0BAA0B,EAAE,iBAAiB,CACxD,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,YAAY,CASlE,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,2BAA2B,GAAG,YAAY,CAazF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Email/EmailNotificationPanel.js CHANGED Viewed

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, registerIcon, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
-import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';
+import { Icon, registerIcon, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';
 import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';
 import { StyledCountIcon } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
 registerIcon(mailIcon);
 export const EmailNotificationPanelIcon = ({ label, count }) => {
-    const { base: { colors } } = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Icon, { name: 'mail-solid', shape: 'circle', background: colors.white }), _jsx(VisuallyHiddenText, { children: label }), _jsx(StyledCountIcon, { variant: 'urgent', children: count })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Icon, { name: 'mail' }), _jsx(VisuallyHiddenText, { children: label }), _jsx(StyledCountIcon, { variant: 'urgent', children: count })] }));
 };
 const EmailNotificationPanel = ({ label, onClick, count, ...restProps }) => {
     return (_jsx(NavigationListItem, { primary: label, visual: _jsx(EmailNotificationPanelIcon, { ...restProps, count: count, label: label }), onClick: onClick }));

package/lib/components/Email/EmailNotificationPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailNotificationPanel.js","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,~~QAAQ,EAAE,~~kBAAkB,EAAE,MAAM,yBAAyB,CAAC;~~AAE3F~~,OAAO,KAAK,QAAQ,MAAM,~~mEAAmE~~,CAAC;~~AAC9F~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAIlG,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,~~MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,QAAQ,EAAE,CAAC;IAEf,~~OAAO,CACL,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,~~YAAY,EAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,EAAE,~~MAAM,~~CAAC~~,~~KAAK~~,~~GAAI,EACnE,~~KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAChD,KAAC,eAAe,IAAC,OAAO,EAAC,QAAQ,YAAE,KAAK,GAAmB,IAC1D,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAkE,CAAC,EAC7F,KAAK,EACL,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAC,0BAA0B,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EACjF,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, ~~useTheme,~~ VisuallyHiddenText } from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail~~-solid~~.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\nimport { StyledCountIcon } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport type { EmailNotificationPanelProps } from './Email.types';\n\nregisterIcon(mailIcon);\n\nexport const EmailNotificationPanelIcon: FunctionComponent<\n OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps\n> = ({ label, count }) => {\n ~~const {\n base: { colors }\n } = useTheme();\n\n~~ return (\n <>\n <Icon name='mail~~-solid~~' ~~shape='circle' background={colors.white}~~ />\n <VisuallyHiddenText>{label}</VisuallyHiddenText>\n <StyledCountIcon variant='urgent'>{count}</StyledCountIcon>\n </>\n );\n};\n\nconst EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps> = ({\n label,\n onClick,\n count,\n ...restProps\n}) => {\n return (\n <NavigationListItem\n primary={label}\n visual={<EmailNotificationPanelIcon {...restProps} count={count} label={label} />}\n onClick={onClick}\n />\n );\n};\n\nexport default EmailNotificationPanel;\n"]}
1	+ {"version":3,"file":"EmailNotificationPanel.js","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAIlG,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAChD,KAAC,eAAe,IAAC,OAAO,EAAC,QAAQ,YAAE,KAAK,GAAmB,IAC1D,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAkE,CAAC,EAC7F,KAAK,EACL,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAC,0BAA0B,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EACjF,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, VisuallyHiddenText } from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\nimport { StyledCountIcon } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport type { EmailNotificationPanelProps } from './Email.types';\n\nregisterIcon(mailIcon);\n\nexport const EmailNotificationPanelIcon: FunctionComponent<\n OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps\n> = ({ label, count }) => {\n return (\n <>\n <Icon name='mail' />\n <VisuallyHiddenText>{label}</VisuallyHiddenText>\n <StyledCountIcon variant='urgent'>{count}</StyledCountIcon>\n </>\n );\n};\n\nconst EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps> = ({\n label,\n onClick,\n count,\n ...restProps\n}) => {\n return (\n <NavigationListItem\n primary={label}\n visual={<EmailNotificationPanelIcon {...restProps} count={count} label={label} />}\n onClick={onClick}\n />\n );\n};\n\nexport default EmailNotificationPanel;\n"]}

package/lib/components/Feed/FeedAttachments.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const StyledImagePreview = styled(BareButton)(({ theme }) => {
       margin: 0;
     }
-    &:focus {
+    &:focus-visible {
       box-shadow: ${theme.components.button['focus-shadow']};
     }

package/lib/components/Feed/FeedAttachments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AACpF,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAInD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;gCAGoB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;oBAOvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;kCAIzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAK1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;6CACiC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;MAEjE,qBAAqB;+BACI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,OAAO,aAAa,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/C,MAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,aACzD,aAAa,IAAI,KAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,GAAI,EACvF,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,GACR,IACsB,CAC3B,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { RefElement } from '@pega/cosmos-react-core';\nimport { defaultThemeProp, FileList, useConsolidatedRef } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { StyledOpenGraphAnchor } from '../OpenGraphPreview/OpenGraphPreview.styles';\nimport OpenGraphPreview from '../OpenGraphPreview';\n\nimport type { FeedAttachmentsProps } from './Feed.types';\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n return css`\n line-height: 0;\n width: fit-content;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n & + & {\n margin: 0;\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n img {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n object-fit: contain;\n max-height: 10rem;\n max-width: 100%;\n }\n `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div<FeedAttachmentsProps>(({ variant, theme }) => {\n return css`\n margin: 0.5rem calc(5 * 0.5rem) 0 calc(${variant === 'post' ? 6 : 5} * 0.5rem);\n\n ${StyledOpenGraphAnchor} {\n margin-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments = forwardRef<\n RefElement<FeedAttachmentsProps>,\n PropsWithoutRef<FeedAttachmentsProps>\n>(function FeedAttachments(props, ref) {\n const { variant, attachments = [], openGraphData, disabled, onDownloadAll } = props;\n\n const containerRef = useConsolidatedRef(ref);\n\n return openGraphData \|\| attachments.length > 0 ? (\n <StyledAttachmentsRegion variant={variant} ref={containerRef}>\n {openGraphData && <OpenGraphPreview data={openGraphData} containerRef={containerRef} />}\n <FileList\n type='item'\n items={attachments}\n disabled={disabled}\n onDownloadAll={onDownloadAll}\n ref={ref}\n />\n </StyledAttachmentsRegion>\n ) : null;\n});\n\nexport default FeedAttachments;\n"]}
1	+ {"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AACpF,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAInD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;gCAGoB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;oBAOvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;kCAIzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAK1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;6CACiC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;MAEjE,qBAAqB;+BACI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,OAAO,aAAa,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/C,MAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,aACzD,aAAa,IAAI,KAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,GAAI,EACvF,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,GACR,IACsB,CAC3B,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { RefElement } from '@pega/cosmos-react-core';\nimport { defaultThemeProp, FileList, useConsolidatedRef } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { StyledOpenGraphAnchor } from '../OpenGraphPreview/OpenGraphPreview.styles';\nimport OpenGraphPreview from '../OpenGraphPreview';\n\nimport type { FeedAttachmentsProps } from './Feed.types';\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n return css`\n line-height: 0;\n width: fit-content;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n & + & {\n margin: 0;\n }\n\n &:focus-visible {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n img {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n object-fit: contain;\n max-height: 10rem;\n max-width: 100%;\n }\n `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div<FeedAttachmentsProps>(({ variant, theme }) => {\n return css`\n margin: 0.5rem calc(5 * 0.5rem) 0 calc(${variant === 'post' ? 6 : 5} * 0.5rem);\n\n ${StyledOpenGraphAnchor} {\n margin-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments = forwardRef<\n RefElement<FeedAttachmentsProps>,\n PropsWithoutRef<FeedAttachmentsProps>\n>(function FeedAttachments(props, ref) {\n const { variant, attachments = [], openGraphData, disabled, onDownloadAll } = props;\n\n const containerRef = useConsolidatedRef(ref);\n\n return openGraphData \|\| attachments.length > 0 ? (\n <StyledAttachmentsRegion variant={variant} ref={containerRef}>\n {openGraphData && <OpenGraphPreview data={openGraphData} containerRef={containerRef} />}\n <FileList\n type='item'\n items={attachments}\n disabled={disabled}\n onDownloadAll={onDownloadAll}\n ref={ref}\n />\n </StyledAttachmentsRegion>\n ) : null;\n});\n\nexport default FeedAttachments;\n"]}

package/lib/components/Feed/FeedLikeButton.js CHANGED Viewed

@@ -28,7 +28,7 @@ const InlineBareButton = styled(BareRoleButton)(({ theme }) => {
       }
     }
-    &:focus {
+    &:focus-visible {
       box-shadow: ${theme.components.button['focus-shadow']};
     }
   `;

package/lib/components/Feed/FeedLikeButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';\nimport type { FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Icon,\n Avatar,\n Count,\n Tooltip,\n useModalManager,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString,\n Flex,\n defaultThemeProp,\n useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport type { FeedPostBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n line-height: 1;\n outline: none;\n border-radius: calc(${theme.base['border-radius']} * 9999);\n\n &:hover {\n &::before {\n content: '';\n position: absolute;\n top: calc(${theme.components.button['border-width']} * -1);\n bottom: calc(${theme.components.button['border-width']} * -1);\n left: calc(${theme.components.button['border-width']} * -1);\n right: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n FeedPostBaseProps,\n \| 'id'\n \| 'liked'\n \| 'likeCount'\n \| 'likes'\n \| 'onLikeClick'\n \| 'onLikeCountInteraction'\n \| 'onLoadMoreLikes'\n \| 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(function FeedLikeButton(\n props,\n ref: Ref<HTMLButtonElement>\n) {\n const {\n id,\n liked,\n likeCount = 0,\n likes = [],\n onLikeClick,\n onLikeCountInteraction,\n onLoadMoreLikes,\n likesLoading\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useModalManager();\n const { userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n const likeCountId = useUID();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: t('feed_liked_by'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: formatListToLocaleString(likesList, t, locale, {\n count: likeCount,\n separator: '\\n'\n })\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_liked_by'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n return (\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <Button\n variant='simple'\n icon\n compact\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta,\n visual: (\n <Avatar size='m' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n onLikeClick({\n id,\n user\n });\n }}\n emphasized={liked}\n label={liked ? t('feed_unlike_label') : t('feed_like_label')}\n aria-describedby={likeCount > 0 ? likeCountId : undefined}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n </Button>\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n >\n <Count\n id={likeCountId}\n aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n >\n {likeCount}\n </Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {likesAttributes.label \|\| t('feed_post_likes', [likeCount], { count: likeCount })}\n </Tooltip>\n </>\n )}\n </Flex>\n );\n});\n\nexport default FeedLikeButton;\n"]}
1	+ {"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;0BAKc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;oBAMjC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;uBACpC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;qBACzC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;sBACtC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;oBAQzC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;GAExD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAcjD,MAAM,cAAc,GAA2C,UAAU,CAAC,SAAS,cAAc,CAC/F,KAAK,EACL,GAA2B;IAE3B,MAAM,EACJ,EAAE,EACF,KAAK,EACL,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,EAAE,EACV,WAAW,EACX,sBAAsB,EACtB,eAAe,EACf,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAM,EAAoC,CAAC;IACjE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;YAC5B,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;YAC3B,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,eAAe;YAC3B,OAAO,EAAE,YAAY;SACtB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvD,OAAO;YACL,SAAS,EAAE,SAAS;gBAClB,CAAC,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,IAAI,wBAAwB,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE;oBACtE,KAAK,EAAE,SAAS;iBACjB,CAAC,EAAE;gBACN,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YAC3D,KAAK,EAAE,wBAAwB,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE;gBACpD,KAAK,EAAE,SAAS;gBAChB,SAAS,EAAE,IAAI;aAChB,CAAC;SACH,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,aAAa,EAAE;gBAC5C,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC;gBAC3B,SAAS,EAAE,KAAK;gBAChB,UAAU,EAAE,eAAe;gBAC3B,OAAO,EAAE,YAAY;aACtB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,sBAAsB,EAAE,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aACjD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,QACP,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,IAAI,GAAG;wBACX,EAAE,EAAE,YAAY,CAAC,QAAQ;wBACzB,OAAO,EAAE,YAAY,CAAC,QAAQ;wBAC9B,SAAS,EAAE,YAAY,CAAC,IAAI;wBAC5B,MAAM,EAAE,CACN,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,QAAQ,GAAI,CACnF;qBACF,CAAC;oBACF,WAAW,CAAC;wBACV,EAAE;wBACF,IAAI;qBACL,CAAC,CAAC;gBACL,CAAC,EACD,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,sBAC1C,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,GAAG,YAER,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,GAAI,GAChD,EACR,SAAS,GAAG,CAAC,IAAI,CAChB,8BACE,KAAC,gBAAgB,IACf,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACzC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAE,sBAAsB,gBACvB,eAAe,CAAC,SAAS,EACrC,QAAQ,EAAE,CAAC,YAEX,KAAC,KAAK,IACJ,EAAE,EAAE,WAAW,gBACH,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,YAElE,SAAS,GACJ,GACS,EACnB,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAE,KAAK,YAC9E,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,GACzE,IACT,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';\nimport type { FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Icon,\n Avatar,\n Count,\n Tooltip,\n useModalManager,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString,\n Flex,\n defaultThemeProp,\n useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport type { FeedPostBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n line-height: 1;\n outline: none;\n border-radius: calc(${theme.base['border-radius']} * 9999);\n\n &:hover {\n &::before {\n content: '';\n position: absolute;\n top: calc(${theme.components.button['border-width']} * -1);\n bottom: calc(${theme.components.button['border-width']} * -1);\n left: calc(${theme.components.button['border-width']} * -1);\n right: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n }\n\n &:focus-visible {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n FeedPostBaseProps,\n \| 'id'\n \| 'liked'\n \| 'likeCount'\n \| 'likes'\n \| 'onLikeClick'\n \| 'onLikeCountInteraction'\n \| 'onLoadMoreLikes'\n \| 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(function FeedLikeButton(\n props,\n ref: Ref<HTMLButtonElement>\n) {\n const {\n id,\n liked,\n likeCount = 0,\n likes = [],\n onLikeClick,\n onLikeCountInteraction,\n onLoadMoreLikes,\n likesLoading\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useModalManager();\n const { userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n const likeCountId = useUID();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: t('feed_liked_by'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: formatListToLocaleString(likesList, t, locale, {\n count: likeCount,\n separator: '\\n'\n })\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_liked_by'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n return (\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <Button\n variant='simple'\n icon\n compact\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta,\n visual: (\n <Avatar size='m' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n onLikeClick({\n id,\n user\n });\n }}\n emphasized={liked}\n label={liked ? t('feed_unlike_label') : t('feed_like_label')}\n aria-describedby={likeCount > 0 ? likeCountId : undefined}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n </Button>\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n >\n <Count\n id={likeCountId}\n aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n >\n {likeCount}\n </Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {likesAttributes.label \|\| t('feed_post_likes', [likeCount], { count: likeCount })}\n </Tooltip>\n </>\n )}\n </Flex>\n );\n});\n\nexport default FeedLikeButton;\n"]}

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

@@ -5,15 +5,15 @@ import { Button, Link, useConsolidatedRef, useElement, isValidElement } from '@p
 import { getXMLAttributes } from '@pega/cosmos-react-rte';
 import { FeedContext } from '../Feed/Feed.context';
 const StyledButton = styled(Button) `
-  &:enabled:focus,
-  &:not([disabled]):focus {
+  &:enabled:focus-visible,
+  &:not([disabled]):focus-visible {
     box-shadow: none;
     text-decoration: underline;
   }
 `;
 const StyledLink = styled(Link) `
-  &:enabled:focus,
-  &:not([disabled]):focus {
+  &:enabled:focus-visible,
+  &:not([disabled]):focus-visible {
     box-shadow: none;
     text-decoration: underline;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactElement, Ref, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Link,\n useConsolidatedRef,\n useElement,\n isValidElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n /** Text for the button, or an object containing all necessary props. /\n children: Record<string, string \| boolean> \| ReactElement;\n /* The id of the mention. /\n id?: string;\n /* The text of the mention button. /\n text?: string;\n /* Designates the type of the mention for proper handling on click. /\n type?: string;\n /* If an href is provided, render a link. Otherwise, render a button. */\n href?: string;\n}\n\nconst StyledButton = styled(Button)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst StyledLink = styled(Link)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst serializer = new XMLSerializer();\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n function MentionButton(\n {\n children,\n id: idProp = '',\n text: textProp = '',\n type: typeProp = '',\n href: hrefProp = '',\n ...restProps\n }: PropsWithoutRef<MentionButtonProps>,\n ref: Ref<HTMLButtonElement \| HTMLAnchorElement>\n ) {\n const { onMentionClick, onMentionPreview } = useContext(FeedContext);\n const [mentionContent, setMentionContent] = useState<JSX.Element \| undefined>();\n const [target, setTarget] = useElement<HTMLButtonElement \| HTMLAnchorElement>(null);\n const mentionRef = useConsolidatedRef(ref);\n\n let id = '';\n let text = '';\n let type = '';\n let href = '';\n let bold = false;\n let italic = false;\n let lineThrough = false;\n let code = false;\n\n if (!isValidElement(children)) {\n if (!children.id \|\| !children.text \|\| !children.type) return <span>{children.rawText}</span>;\n id = String(children.id);\n text = String(children.text);\n type = String(children.type);\n href = String(children.href \|\| '');\n bold = !!children.bold;\n italic = !!children.italic;\n lineThrough = !!children['line-through'];\n code = !!children.code;\n } else {\n id = idProp;\n text = textProp;\n type = typeProp;\n href = hrefProp;\n }\n\n let formattedText: string \| JSX.Element = text;\n if (code) formattedText = <code>{formattedText}</code>;\n if (lineThrough) formattedText = <del>{formattedText}</del>;\n if (italic) formattedText = <em>{formattedText}</em>;\n if (bold) formattedText = <strong>{formattedText}</strong>;\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n const comp = onMentionClick?.({\n id,\n text,\n type,\n target: e.currentTarget,\n closeGlimpse: () => setTarget(null)\n });\n if (comp) setMentionContent(comp);\n };\n\n return (\n <>\n {href ? (\n <StyledLink\n {...restProps}\n ref={mentionRef as Ref<HTMLAnchorElement>}\n href={href}\n previewable={!!onMentionPreview}\n onPreview={\n onMentionPreview\n ? () =>\n onMentionPreview({\n id,\n text,\n type\n })\n : undefined\n }\n spellCheck={false}\n >\n {isValidElement(children) ? children : formattedText}\n </StyledLink>\n ) : (\n <StyledButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n {isValidElement(children) ? children : formattedText}\n </StyledButton>\n )}\n {target && mentionContent}\n </>\n );\n }\n);\n\nexport const MentionButtonConfig = {\n type: 'mention',\n xmlElement: 'pega-mention',\n regexPattern: /(?:^\|)<pega-mention (?:[^\\n/]\|\\/(?!>))+\\/>/g,\n component: MentionButton,\n inject: ({ id, type, text, href }: { id: string; type: string; text: string; href?: string }) => {\n if (!id \|\| !type \|\| !text) return;\n\n const element = document.createElementNS(null, 'pega-mention');\n element.setAttribute('id', id);\n element.setAttribute('text', text);\n element.setAttribute('type', type);\n if (href) element.setAttribute('href', href);\n\n return serializer.serializeToString(element);\n },\n extract: (element: string) => {\n const attributes = getXMLAttributes(element);\n\n if (!attributes \|\| !attributes.id \|\| !attributes.text \|\| !attributes.type) return undefined;\n return {\n id: attributes.id,\n text: attributes.text,\n type: attributes.type,\n href: attributes.href\n };\n }\n};\n\nexport default MentionButton;\n"]}
1	+ {"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactElement, Ref, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Link,\n useConsolidatedRef,\n useElement,\n isValidElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n /** Text for the button, or an object containing all necessary props. /\n children: Record<string, string \| boolean> \| ReactElement;\n /* The id of the mention. /\n id?: string;\n /* The text of the mention button. /\n text?: string;\n /* Designates the type of the mention for proper handling on click. /\n type?: string;\n /* If an href is provided, render a link. Otherwise, render a button. */\n href?: string;\n}\n\nconst StyledButton = styled(Button)`\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst StyledLink = styled(Link)`\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst serializer = new XMLSerializer();\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n function MentionButton(\n {\n children,\n id: idProp = '',\n text: textProp = '',\n type: typeProp = '',\n href: hrefProp = '',\n ...restProps\n }: PropsWithoutRef<MentionButtonProps>,\n ref: Ref<HTMLButtonElement \| HTMLAnchorElement>\n ) {\n const { onMentionClick, onMentionPreview } = useContext(FeedContext);\n const [mentionContent, setMentionContent] = useState<JSX.Element \| undefined>();\n const [target, setTarget] = useElement<HTMLButtonElement \| HTMLAnchorElement>(null);\n const mentionRef = useConsolidatedRef(ref);\n\n let id = '';\n let text = '';\n let type = '';\n let href = '';\n let bold = false;\n let italic = false;\n let lineThrough = false;\n let code = false;\n\n if (!isValidElement(children)) {\n if (!children.id \|\| !children.text \|\| !children.type) return <span>{children.rawText}</span>;\n id = String(children.id);\n text = String(children.text);\n type = String(children.type);\n href = String(children.href \|\| '');\n bold = !!children.bold;\n italic = !!children.italic;\n lineThrough = !!children['line-through'];\n code = !!children.code;\n } else {\n id = idProp;\n text = textProp;\n type = typeProp;\n href = hrefProp;\n }\n\n let formattedText: string \| JSX.Element = text;\n if (code) formattedText = <code>{formattedText}</code>;\n if (lineThrough) formattedText = <del>{formattedText}</del>;\n if (italic) formattedText = <em>{formattedText}</em>;\n if (bold) formattedText = <strong>{formattedText}</strong>;\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n const comp = onMentionClick?.({\n id,\n text,\n type,\n target: e.currentTarget,\n closeGlimpse: () => setTarget(null)\n });\n if (comp) setMentionContent(comp);\n };\n\n return (\n <>\n {href ? (\n <StyledLink\n {...restProps}\n ref={mentionRef as Ref<HTMLAnchorElement>}\n href={href}\n previewable={!!onMentionPreview}\n onPreview={\n onMentionPreview\n ? () =>\n onMentionPreview({\n id,\n text,\n type\n })\n : undefined\n }\n spellCheck={false}\n >\n {isValidElement(children) ? children : formattedText}\n </StyledLink>\n ) : (\n <StyledButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n {isValidElement(children) ? children : formattedText}\n </StyledButton>\n )}\n {target && mentionContent}\n </>\n );\n }\n);\n\nexport const MentionButtonConfig = {\n type: 'mention',\n xmlElement: 'pega-mention',\n regexPattern: /(?:^\|)<pega-mention (?:[^\\n/]\|\\/(?!>))+\\/>/g,\n component: MentionButton,\n inject: ({ id, type, text, href }: { id: string; type: string; text: string; href?: string }) => {\n if (!id \|\| !type \|\| !text) return;\n\n const element = document.createElementNS(null, 'pega-mention');\n element.setAttribute('id', id);\n element.setAttribute('text', text);\n element.setAttribute('type', type);\n if (href) element.setAttribute('href', href);\n\n return serializer.serializeToString(element);\n },\n extract: (element: string) => {\n const attributes = getXMLAttributes(element);\n\n if (!attributes \|\| !attributes.id \|\| !attributes.text \|\| !attributes.type) return undefined;\n return {\n id: attributes.id,\n text: attributes.text,\n type: attributes.type,\n href: attributes.href\n };\n }\n};\n\nexport default MentionButton;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "9.6.1",
+  "version": "9.8.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": [
@@ -17,9 +17,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.6.1",
-    "@pega/cosmos-react-rte": "9.6.1",
-    "@pega/cosmos-react-work": "9.6.1",
+    "@pega/cosmos-react-core": "9.8.0",
+    "@pega/cosmos-react-rte": "9.8.0",
+    "@pega/cosmos-react-work": "9.8.0",
     "@types/parse5": "^6.0.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",