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

package/es/MessageBubble/css/MessageBubble.module.css

@@ -1,9 +1,9 @@
 .varClass {
-  --messageBubble-bubble_footer_gap: var(--zd_size5);
+  --messageBubble-bubble_footer_gap: 5px;
   --messageBubble-message_owner_gap: 13px;
   --messageBox-max_width: 410px;
-  --messageBox-footer_fontSize: var(--zd_font_size11);
-  --messageBox-owner_width: var(--zd_size32);
+  --messageBox-footer_fontSize: 11px;
+  --messageBox-owner_width: 32px;
 }
 
 .messageBubble {

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --moreActionItem-content_padding: var(--zd_size10);
-  --moreActionItem-content_size: var(--zd_font_size14);
+  --moreActionItem-content_padding: 10px;
+  --moreActionItem-content_size: 14px;
 }
 
 .listItem {

package/es/ReplyBubble/ReplyBubble.js

@@ -1,3 +1,5 @@
+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, { useMemo, useCallback } from 'react';
 /** ** Hooks *** */
@@ -89,30 +91,27 @@ export default function ReplyBubble(props) {
     }
 
     if (fileFormat) {
-      return /*#__PURE__*/React.createElement(AttachmentIcon, {
+      return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
         customStyle: iconStyle,
         fileFormat: fileFormat,
         isValidAttachment: isValidAttachment,
-        mediaType: mediaType,
-        ...iconProps
-      });
+        mediaType: mediaType
+      }, iconProps));
     }
 
     return null;
   }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
     dateTimeDetails: dateTimeDetails,
     isFailed: isFailed,
-    replyText: replyText,
-    ...headerProps
-  }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
+    replyText: replyText
+  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
     isFailed: isFailed,
     onClick: onClick,
     renderIcon: renderIcon,
     renderMessage: renderMessage,
-    senderName: senderName,
-    ...contentProps
-  }));
+    senderName: senderName
+  }, contentProps)));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;
 ReplyBubble.defaultProps = replyBubbleDefaultProps;

package/es/Theme/ThemeAssets.js

@@ -67,6 +67,24 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import "../../assets/Appearance/dark/mode/General_DarkMode.module.css";
+import "../../assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css";
+import "../../assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css";
+import "../../assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css";
+import "../../assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css";
+import "../../assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css";
+import "../../assets/Appearance/light/mode/General_LightMode.module.css";
+import "../../assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css";
+import "../../assets/Appearance/light/themes/green/green_General_LightTheme.module.css";
+import "../../assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css";
+import "../../assets/Appearance/light/themes/red/red_General_LightTheme.module.css";
+import "../../assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css";
+import "../../assets/Appearance/pureDark/mode/General_PureDarkMode.module.css";
+import "../../assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css";
+import "../../assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css";
+import "../../assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css";
+import "../../assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css";
+import "../../assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css";
 export default function DeskAssets(props) {
   const {
     children

package/es/Theme/ThemeWrapper.js

@@ -1,3 +1,5 @@
+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, { useMemo, useCallback } from 'react';
 /** ** Providers *** */
@@ -42,20 +44,22 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
-    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations || themeConfigurations;
+  const configurations = propThemeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const customizedVariables = useMemo(() => {
+    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
+    return cssVariables;
+  }, [configuration, prefix, propThemeConfigurations]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -71,9 +75,9 @@ export default function ThemeWrapper(props) {
   }), /*#__PURE__*/React.createElement("div", {
     "data-portal": EDITOR_POPUP_TARGET_PORTAL
   })), []);
-  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
   const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,
@@ -84,14 +88,14 @@ export default function ThemeWrapper(props) {
       mode: propMode,
       direction
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    id: styleTagId,
-    ...wrapperDivProps,
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    id: styleTagId
+  }, wrapperDivProps, {
     style: {
       width: '100%',
       height: '100%'
     }
-  }, renderStyle(), /*#__PURE__*/React.createElement(Container, {
+  }), renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
   }, children), renderPortal(), renderAssets()));
 }

package/es/Theme/TooltipWrapper.js

@@ -1,3 +1,5 @@
+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 from 'react';
 import PropTypes from 'prop-types';
@@ -73,10 +75,9 @@ export default function TooltipWrapper(props) {
   const newStyle = useMergeStyle(style, customStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: newStyle.tooltipWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    ref: tooltipRef,
-    ...props
-  }));
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: tooltipRef
+  }, props)));
 }
 TooltipWrapper.propTypes = {
   customStyle: PropTypes.object,

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,19 +1,4 @@
 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',
@@ -26,56 +11,17 @@ 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,
-    themeConfigurations
+    theme
   };
 }

package/es/VideoBubble/VideoBubble.js

@@ -1,3 +1,5 @@
+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 *** */
@@ -47,18 +49,17 @@ export default function VideoBubble(props) {
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
       className: videoBubbleClass
-    }, /*#__PURE__*/React.createElement(Video, {
+    }, /*#__PURE__*/React.createElement(Video, _extends({
       fileType: fileType,
-      fileURL: fileURL,
-      ...videoProps
-    }));
+      fileURL: fileURL
+    }, videoProps)));
   }, [videoProps, videoBubbleClass]);
-  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, {
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: videoDetails,
-    renderMedia: renderMedia,
-    ...mediaBubbleWrapperProps,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
     isFailed: isFailed
-  });
+  }));
 }
 VideoBubble.propTypes = videoBubblePropTypes;
 VideoBubble.defaultProps = videoBubbleDefaultProps;

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

@@ -2,8 +2,7 @@
 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,8 +2,7 @@
 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/Image.js

@@ -2,8 +2,7 @@
 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/Pdf.js

@@ -2,8 +2,7 @@
 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/Ppt.js

@@ -2,8 +2,7 @@
 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",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30.52 30.27"

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

@@ -2,8 +2,7 @@
 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/Txt.js

@@ -2,8 +2,7 @@
 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/Unknown.js

@@ -2,8 +2,7 @@
 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/Video.js

@@ -2,8 +2,7 @@
 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/Xls.js

@@ -2,8 +2,7 @@
 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",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30 30.27"

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

@@ -2,8 +2,7 @@
 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/common/AlertTriangle.js

@@ -2,8 +2,7 @@
 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", {
     viewBox: "0 0 29 29",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/es/icons/iconSrc/common/Article.js

@@ -2,8 +2,7 @@
 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: "article",
     viewBox: "0 0 32 32"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/common/Reply.js

@@ -2,8 +2,7 @@
 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: "reply",
     viewBox: "0 0 40 40"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/Clock.js

@@ -2,8 +2,7 @@
 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: "IM_clock",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/DoubleTick.js

@@ -2,8 +2,7 @@
 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: "IM_doubleTick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {

package/es/icons/iconSrc/messageStatus/Failed.js

@@ -2,8 +2,7 @@
 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: "IM_failed",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/Tick.js

@@ -2,8 +2,7 @@
 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: "IM_tick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {

package/es/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -1,3 +1,5 @@
+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 from 'react';
 /** ** Components *** */
@@ -34,16 +36,15 @@ export default function IMAttachmentHandler(props) {
     attachmentType,
     integrationService
   });
-  return /*#__PURE__*/React.createElement(AttachmentHandler, {
+  return /*#__PURE__*/React.createElement(AttachmentHandler, _extends({
     iconName: iconName,
     iconSize: iconSize,
     iconTitle: iconTitle,
     isMultiAttachment: isMultiAttachment,
     onAttach: onAttach,
     renderCustomIcon: renderCustomIcon,
-    supportedFileTypes: supportedTypes,
-    ...attachmentHandlerProps
-  });
+    supportedFileTypes: supportedTypes
+  }, attachmentHandlerProps));
 }
 IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
 IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;

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

@@ -1,8 +1,8 @@
 .varClass {
-  --integrationIcon-small_height: var(--zd_size20);
-  --integrationIcon-small_width: var(--zd_size20);
-  --integrationIcon-medium_height: var(--zd_size26);
-  --integrationIcon-medium_width: var(--zd_size26);
+  --integrationIcon-small_height: 20px;
+  --integrationIcon-small_width: 20px;
+  --integrationIcon-medium_height: 26px;
+  --integrationIcon-medium_width: 26px;
 }
 
 .integrationIcon {
@@ -64,9 +64,9 @@
 }
 
 .fontIcon :global .path1::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
 }
 
 .fontIcon :global .path2::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
 }

package/es/im/IMMessage/IMMessage.js

@@ -1,3 +1,5 @@
+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, useMemo } from 'react';
 /** ** Hooks *** */
@@ -97,19 +99,18 @@ export default function IMMessage(props) {
       displayDateTime,
       tooltip
     } = dateTimeDetails || {};
-    return /*#__PURE__*/React.createElement(IMMessageMeta, {
+    return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
       autoMessageType: autoMessageType,
       direction: direction,
       isValidAttachment: isValidAttachment,
       messageMetaInfoI18N: messageMetaInfoI18N,
       time: isShowMessageTime ? displayDateTime : '',
-      timeTooltip: tooltip,
-      ...imMessageMetaProps
-    });
+      timeTooltip: tooltip
+    }, imMessageMetaProps));
   }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
   /** ** Render Message Content *** */
 
-  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, {
+  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
     deleteMessageText: deleteMessageText,
     isFailed: isFailedMessage,
     isSending: isSendingMessage,
@@ -121,9 +122,8 @@ export default function IMMessage(props) {
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
-    sessionDetails: sessionDetails,
-    ...imMessageContentProps
-  }), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
+    sessionDetails: sessionDetails
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
   /** ** Render Secondary Actions - TicketId *** */
 
   const handleRenderSecondaryActions = useCallback(() => {
@@ -136,21 +136,19 @@ export default function IMMessage(props) {
     const customStyle = {
       text: imTicketLinkClass
     };
-    return /*#__PURE__*/React.createElement(IMPermaLink, {
+    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
       customStyle: customStyle,
       href: ticketUrl,
       id: ticketId,
       onClick: onTicketClick,
-      text: ticketNumber ? `#${ticketNumber}` : '',
-      ...imTicketLinkProps
-    });
+      text: ticketNumber ? `#${ticketNumber}` : ''
+    }, imTicketLinkProps));
   }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, newStyle, isIncoming, isOutgoing]);
   /** ** Render Owner Status Icon *** */
 
-  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, {
-    integrationName: isShowIntegrationIcon ? integrationName : '',
-    ...imIntegrationIconProps
-  }), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
+    integrationName: isShowIntegrationIcon ? integrationName : ''
+  }, imIntegrationIconProps)), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
   /** ** Construct Owner Details *** */
 
   const ownerDetails = useMemo(() => ({
@@ -176,7 +174,7 @@ export default function IMMessage(props) {
       }
     };
   }, [messageProps, handleRenderMessageBoxFooter]);
-  return /*#__PURE__*/React.createElement(Message, {
+  return /*#__PURE__*/React.createElement(Message, _extends({
     actions: actions,
     direction: direction,
     isActive: isHighlightMessage,
@@ -191,9 +189,8 @@ export default function IMMessage(props) {
     renderOwnerStatusIcon: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
     status: messageStatus,
-    statusTooltip: messageStatusTitle,
-    ...messageCustomProps
-  });
+    statusTooltip: messageStatusTitle
+  }, messageCustomProps));
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;