@pega/cosmos-react-social 8.16.1 → 8.17.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAiBtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,0BAA0B,
|
|
1
|
+
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAiBtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,0BAA0B,6EA0BtC,CAAC;AAEF,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,eAAO,MAAM,oBAAoB,6EAEhC,CAAC;AAEF,eAAO,MAAM,eAAe;2BAoCrB,CAAC;2BApCqC,CAAC;AAE9C,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AAExD,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,eAAO,MAAM,iBAAiB,6NAE7B,CAAC;AAEF,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGA+LlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,8JAUhC,CAAC;AAIH,eAAO,MAAM,cAAc,8JAKzB,CAAC"}
|
|
@@ -6,9 +6,28 @@ import { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/Ric
|
|
|
6
6
|
export const StyledMessageBubbleContent = styled.div `
|
|
7
7
|
${StyledEditorContainer} {
|
|
8
8
|
padding: 0;
|
|
9
|
+
|
|
9
10
|
a {
|
|
10
11
|
color: inherit;
|
|
11
12
|
}
|
|
13
|
+
|
|
14
|
+
pre {
|
|
15
|
+
margin: 0;
|
|
16
|
+
background-color: inherit;
|
|
17
|
+
color: inherit;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
pre > code {
|
|
21
|
+
background-color: inherit;
|
|
22
|
+
color: inherit;
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
margin-block: 0;
|
|
25
|
+
padding: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
pre > code > span {
|
|
29
|
+
color: inherit;
|
|
30
|
+
}
|
|
12
31
|
}
|
|
13
32
|
`;
|
|
14
33
|
export const StyledMediaList = styled.ul ``;
|
|
@@ -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 a {\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 {\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.17.1",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": [
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"build": "tsc -b tsconfig.build.json"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@pega/cosmos-react-core": "8.
|
|
21
|
-
"@pega/cosmos-react-rte": "8.
|
|
22
|
-
"@pega/cosmos-react-work": "8.
|
|
20
|
+
"@pega/cosmos-react-core": "8.17.1",
|
|
21
|
+
"@pega/cosmos-react-rte": "8.17.1",
|
|
22
|
+
"@pega/cosmos-react-work": "8.17.1",
|
|
23
23
|
"@types/parse5": "^6.0.0",
|
|
24
24
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
25
25
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|