@zohoim/chat-components 1.1.2-beta.2 → 1.1.2-beta.4

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

@@ -0,0 +1,37 @@
+export const incomingBubbleBgColor = '#2e2e2e';
+export const outgoingBubbleBgColor = '#2e2e2e';
+export const bubbleActiveBgColor = '#202821';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messagetextColor = '#e2e4e6';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#6b323f';
+export const failedBg = '#362530';
+export const failedBdr = '#290000';
+export const failedLine = '#290000';
+export const failedColor = '#e2e4e6';
+export const failedUrlColor = '#479dff';
+export const emojiPopup = {
+  bg: '#f1f4f9',
+  border: '#f1f4f9',
+  titleColor: '#aaa'
+};
+export const replyEditor = {
+  bg: '#212121',
+  color: '#e2e4e6',
+  placeholder: '#585858'
+};
+export const emojisHeader = {
+  bg_color: '#171717',
+  border_color: '#161515'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#212121',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#252e27',
+      border_color: '#2c4732'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#45a159'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryGreen,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryGreen,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#45a159'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312821',
+      border_color: '#4d3421'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryOrange,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2f2424',
+      border_color: '#492A29'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryRed,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#e94f4f'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2e2922',
+      border_color: '#453925'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#d79835'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryYellow,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
+  }
+};

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,4 +1,19 @@
 import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import lightBlue from "../themeVariables/light/blueTheme";
+import lightGreen from "../themeVariables/light/greenTheme";
+import lightOrange from "../themeVariables/light/orangeTheme";
+import lightRed from "../themeVariables/light/redTheme";
+import lightYellow from "../themeVariables/light/yellowTheme";
+import darkBlue from "../themeVariables/dark/blueTheme";
+import darkGreen from "../themeVariables/dark/greenTheme";
+import darkOrange from "../themeVariables/dark/orangeTheme";
+import darkRed from "../themeVariables/dark/redTheme";
+import darkYellow from "../themeVariables/dark/yellowTheme";
+import pureDarkBlue from "../themeVariables/pureDark/blueTheme";
+import pureDarkGreen from "../themeVariables/pureDark/greenTheme";
+import pureDarkOrange from "../themeVariables/pureDark/orangeTheme";
+import pureDarkRed from "../themeVariables/pureDark/redTheme";
+import pureDarkYellow from "../themeVariables/pureDark/yellowTheme";
 const modeMapping = {
   [modeConstants.LIGHT]: 'light',
   [modeConstants.DARK]: 'dark',
@@ -11,17 +26,56 @@ const themeMapping = {
   [themeConstants.RED]: 'red',
   [themeConstants.YELLOW]: 'yellow'
 };
+const concatString = '_';
 const defaultTheme = themeMapping[themeConstants.BLUE];
 const defaultMode = modeMapping[modeConstants.LIGHT];
+const defaultThemeConfiguration = lightBlue;
+const themeConfigMapping = {
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
+  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
+  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
+  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
+  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
+  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
+};
+
+function getThemeName() {
+  let {
+    mode = modeConstants.LIGHT,
+    theme = themeConstants.BLUE
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const themeName = `${mode}${concatString}${theme}`;
+  return {
+    themeName
+  };
+}
+
 export default function getThemeConfigurations(_ref) {
   let {
     mode: propMode,
     theme: propTheme
   } = _ref;
+  const {
+    themeName
+  } = getThemeName({
+    mode: propMode,
+    theme: propTheme
+  });
   const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
   const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
+  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
   return {
     mode,
-    theme
+    theme,
+    themeConfigurations
   };
 }

package/es/VideoBubble/VideoBubble.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
 /** ** Hooks *** */
@@ -49,17 +47,18 @@ export default function VideoBubble(props) {
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
       className: videoBubbleClass
-    }, /*#__PURE__*/React.createElement(Video, _extends({
+    }, /*#__PURE__*/React.createElement(Video, {
       fileType: fileType,
-      fileURL: fileURL
-    }, videoProps)));
+      fileURL: fileURL,
+      ...videoProps
+    }));
   }, [videoProps, videoBubbleClass]);
-  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, {
     mediaDetails: videoDetails,
-    renderMedia: renderMedia
-  }, mediaBubbleWrapperProps, {
+    renderMedia: renderMedia,
+    ...mediaBubbleWrapperProps,
     isFailed: isFailed
-  }));
+  });
 }
 VideoBubble.propTypes = videoBubblePropTypes;
 VideoBubble.defaultProps = videoBubbleDefaultProps;

package/es/icons/iconSrc/attachments/Audio.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Code.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",