@zohoim/chat-components 0.0.18 → 0.0.20

package/es/Theme/themeVariables/light/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -19,7 +19,7 @@ export default {
       fileName_color: black,
       fileName_color_failed: failedColor,
       fileSize_color: '#5a616f',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -39,8 +39,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
     imMessageMeta: {
       time_color: '#5a616f'
     },
@@ -53,7 +56,9 @@ export default {
       bg_color: white,
       bg_color_failed: failedBg,
       alt_text_color: black,
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -90,7 +95,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: white,
       bg_color_failed: failedBg,
@@ -116,8 +124,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryRed,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/light/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -19,7 +19,7 @@ export default {
       fileName_color: black,
       fileName_color_failed: failedColor,
       fileSize_color: '#5a616f',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -39,8 +39,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
     imMessageMeta: {
       time_color: '#5a616f'
     },
@@ -53,7 +56,9 @@ export default {
       bg_color: white,
       bg_color_failed: failedBg,
       alt_text_color: black,
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -90,7 +95,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: white,
       bg_color_failed: failedBg,
@@ -116,8 +124,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryYellow,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/blueTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
@@ -54,7 +57,9 @@ export default {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/greenTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
@@ -54,7 +57,9 @@ export default {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
@@ -54,7 +57,9 @@ export default {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
@@ -54,7 +57,9 @@ export default {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryRed,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
@@ -54,7 +57,9 @@ export default {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryYellow,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Video/css/Video.module.css

@@ -1,4 +1,5 @@
 .video {
   max-height: 100% ;
   width: 100% ;
+  border-radius: 3px;
 }

package/es/VideoBubble/VideoBubble.js

@@ -18,6 +18,9 @@ import style from './css/VideoBubble.module.css';
 import { Box } from '@zohodesk/components/es/Layout';
 import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Video from '../Video/Video';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function VideoBubble(props) {
   const {
     customStyle,
@@ -32,18 +35,25 @@ export default function VideoBubble(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    videoBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const renderMedia = useCallback(_ref => {
     let {
       fileURL,
       fileType
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
-      className: newStyle.videoBubble
+      className: videoBubbleClass
     }, /*#__PURE__*/React.createElement(Video, _extends({
       fileType: fileType,
       fileURL: fileURL
     }, videoProps)));
-  }, [videoProps, newStyle.videoBubble]);
+  }, [videoProps, videoBubbleClass]);
   return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: videoDetails,
     renderMedia: renderMedia

package/es/VideoBubble/css/VideoBubble.module.css

@@ -1,4 +1,12 @@
-.videoBubble {
+.videoWrapper {
   width: var(--zd_size360) ;
   max-width: 100% ;
+  height: var(--zd_size193) ;
+  background-color: #000;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_videoBubble_border_color);
+}
+
+.videoWrapperFailed{
+  border-color: var(--imlib_chat_components_videoBubble_border_color_failed);
 }

package/es/VideoBubble/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const videoBubbleClass = compileClassNames({
+    [style.videoWrapper]: true,
+    [style.videoWrapperFailed]: isFailed
+  });
+  return {
+    videoBubbleClass
+  };
+}

package/es/im/ArticleBubble/css/ArticleBubble.module.css

@@ -49,11 +49,11 @@
 }
 
 .articleIcon :global(.path-0) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+  fill: var(--imlib_chat_components_imTtIcon_path0_color);
 }
 
 .articleIcon :global(.path-1) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+  fill: var(--imlib_chat_components_imTtIcon_path1_color);
 }
 
 .content{

package/es/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -1,15 +1,6 @@
 /** ** Libraries *** */
-import React, { useCallback, useMemo } from 'react';
-/** ** Icons *** */
-
-import WhatsappIcon from '../../icons/iconSrc/integrations/ChWhatsApp';
-import TelegramIcon from '../../icons/iconSrc/integrations/TtTelegram';
-import InstagramIcon from '../../icons/iconSrc/integrations/ChInstagram';
-import ASAPIcon from '../../icons/iconSrc/integrations/TtASAP';
-import WeChatIcon from '../../icons/iconSrc/integrations/TtWechat';
-import TwillioIcon from '../../icons/iconSrc/integrations/TtTwillio';
-import LineIcon from '../../icons/iconSrc/integrations/TtLine'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
-
+import React, { useCallback } from 'react';
+import Icon from '@zohodesk/icons/es/Icon';
 /** ** CSS *** */
 
 import style from './css/IMIntegrationIcon.module.css';
@@ -25,21 +16,18 @@ import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/const
 const {
   WHATSAPP,
   TELEGRAM,
-  INSTAGRAM,
   ASAP,
   WECHAT,
   TWILLIO,
   LINE
 } = integrationConstants;
-const integrationIconMapping = {
-  [WHATSAPP]: WhatsappIcon,
-  [TELEGRAM]: TelegramIcon,
-  [INSTAGRAM]: InstagramIcon,
-  [ASAP]: ASAPIcon,
-  [WECHAT]: WeChatIcon,
-  [TWILLIO]: TwillioIcon,
-  [LINE]: LineIcon // [TWITTER]: TwitterIcon
-
+const fontIconMap = {
+  [TWILLIO]: 'ZD-TT-imtwillio',
+  [WHATSAPP]: 'ZD-TT-whatsApp',
+  [TELEGRAM]: 'ZD-TT-imTelegram',
+  [WECHAT]: 'ZD-TT-imWeChat',
+  [LINE]: 'ZD-TT-imLine',
+  [ASAP]: 'ZD-TT-imASAP'
 };
 export default function IMIntegrationIcon(props) {
   const {
@@ -56,25 +44,23 @@ export default function IMIntegrationIcon(props) {
   /* css classnames added based on logic */
 
   const {
-    iconWrapperClass,
-    iconClass
+    iconWrapperClass
   } = cssJSLogic({
     integrationName,
     size
   }, newStyle);
-  const iconStyle = useMemo(() => ({
-    base: iconClass
-  }), [iconClass]);
   const renderDefaultIcon = useCallback(() => {
-    const IntegrationIcon = integrationIconMapping[integrationName] || null;
-    return IntegrationIcon ? /*#__PURE__*/React.createElement("div", {
+    const iconName = fontIconMap[integrationName];
+    return iconName ? /*#__PURE__*/React.createElement("div", {
       className: iconWrapperClass,
       "data-title": title,
       onClick: onClick
-    }, /*#__PURE__*/React.createElement(IntegrationIcon, {
-      customStyle: iconStyle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      iconClass: newStyle.fontIcon,
+      name: iconName,
+      size: "12"
     })) : null;
-  }, [integrationName, title, onClick, iconWrapperClass, iconStyle]);
+  }, [integrationName, title, onClick, iconWrapperClass, newStyle.fontIcon]);
   return renderCustomIcon ? renderCustomIcon({
     integrationName
   }) : renderDefaultIcon();

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --integrationIcon-small_height: var(--zd_size22);
-  --integrationIcon-small_width: var(--zd_size22);
+  --integrationIcon-small_height: var(--zd_size20);
+  --integrationIcon-small_width: var(--zd_size20);
   --integrationIcon-medium_height: var(--zd_size26);
   --integrationIcon-medium_width: var(--zd_size26);
 }
@@ -87,4 +87,12 @@
 
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
+}
+
+.fontIcon :global .path1::before {
+  color:  var(--imlib_chat_components_imIntegrationIcon_path0_color);;
+}
+
+.fontIcon :global .path2::before {
+  color:var(--imlib_chat_components_imIntegrationIcon_path1_color);
 }