@zohoim/chat-components 1.0.4 → 1.0.6

package/es/Theme/TooltipWrapper.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 from 'react';
 import PropTypes from 'prop-types';
@@ -17,7 +15,7 @@ import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Pro
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Styles *** */
 
-import style from './css/TooltipWrapper.module.css';
+import style from "./css/TooltipWrapper.module.css";
 export default function TooltipWrapper(props) {
   const {
     getContainerRef,
@@ -75,9 +73,10 @@ export default function TooltipWrapper(props) {
   const newStyle = useMergeStyle(style, customStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: newStyle.tooltipWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    ref: tooltipRef
-  }, props)));
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tooltipRef,
+    ...props
+  }));
 }
 TooltipWrapper.propTypes = {
   customStyle: PropTypes.object,

package/es/Theme/index.js

@@ -1 +1 @@
-export { default as ThemeWrapper } from './ThemeWrapper';
+export { default as ThemeWrapper } from "./ThemeWrapper";

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -7,7 +7,7 @@ export const imIntegrationIcon = {
   line_color: '#01b901',
   twillio_color: '#f22f46',
   instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
-  asap_color: '#0a73eb',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
   fb_color: '#006aff'
 };
 export const imTtIcon = {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -26,7 +26,7 @@ export const imIntegrationIcon = {
   line_color: '#01b901',
   twillio_color: '#f22f46',
   instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
-  asap_color: '#0a73eb',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
   fb_color: '#006aff'
 };
 export const imTtIcon = {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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, imTtIcon } 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: {

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, imTtIcon } 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: {

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, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

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, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
   variables: {

package/es/Theme/utils/combineConfigurations.js

@@ -1,4 +1,4 @@
-import flatVariables from './flatVariables';
+import flatVariables from "./flatVariables";
 export default function combineConfigurations(configurations) {
   const configs = configurations.map(configuration => ({
     library: configuration.library,

package/es/Theme/utils/getCustomizedCssVariables.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 
 /** ** Methods *** */
-import combineConfigurations from './combineConfigurations';
+import combineConfigurations from "./combineConfigurations";
 export default function getCustomizedCssVariables(cssVariableConfigs) {
   let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '--lib_';
   const newConfiguration = combineConfigurations(cssVariableConfigs);

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,19 +1,19 @@
-import { modeConstants, themeConstants } from '../constants';
-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';
+import { modeConstants, themeConstants } from "../constants";
+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',

package/es/Video/Video.js

@@ -6,11 +6,11 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useMedia from '@zohoim/chat-components-hooks/es/Media/useMedia';
 /** ** Constants *** */
 
-import videoDefaultProps from './props/defaultProps';
-import videoPropTypes from './props/propTypes';
+import videoDefaultProps from "./props/defaultProps";
+import videoPropTypes from "./props/propTypes";
 /** ** Styles *** */
 
-import style from './css/Video.module.css';
+import style from "./css/Video.module.css";
 export default function Video(props) {
   const {
     customStyle,
@@ -19,7 +19,9 @@ export default function Video(props) {
   } = props;
   const {
     mediaElementRef
-  } = useMedia(props);
+  } = useMedia({
+    src: fileURL
+  });
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);

package/es/Video/index.js

@@ -1 +1 @@
-export { default as Video } from './Video';
+export { default as Video } from "./Video";

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 *** */
@@ -7,20 +5,20 @@ import React, { useCallback } from 'react';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
 
-import videoBubbleDefaultProps from './props/defaultProps';
-import videoBubblePropTypes from './props/propTypes';
+import videoBubbleDefaultProps from "./props/defaultProps";
+import videoBubblePropTypes from "./props/propTypes";
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Styles *** */
 
-import style from './css/VideoBubble.module.css';
+import style from "./css/VideoBubble.module.css";
 /** ** Components *** */
 
 import { Box } from '@zohodesk/components/es/Layout';
-import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
-import Video from '../Video/Video';
+import MediaBubbleWrapper from "../MediaBubbleWrapper/MediaBubbleWrapper";
+import Video from "../Video/Video";
 /** ** Methods *** */
 
-import cssJSLogic from './css/cssJSLogic';
+import cssJSLogic from "./css/cssJSLogic";
 export default function VideoBubble(props) {
   const {
     customStyle,
@@ -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/VideoBubble/index.js

@@ -1 +1 @@
-export { default as VideoBubble } from './VideoBubble';
+export { default as VideoBubble } from "./VideoBubble";

package/es/icons/create-icon-components.js

@@ -5,7 +5,7 @@ const path = require('path');
 
 const fs = require('fs');
 
-const templateList = require('./icon.template');
+const templateList = require("./icon.template");
 
 const jsdom = require('jsdom');
 

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",

package/es/icons/iconSrc/attachments/Image.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/Pdf.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/Ppt.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",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30.52 30.27"

package/es/icons/iconSrc/attachments/Text.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/Txt.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/Unknown.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/Video.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/Xls.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",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30 30.27"

package/es/icons/iconSrc/attachments/Zip.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/index.js

@@ -1,10 +1,10 @@
-export { default as Audio } from './Audio';
-export { default as Code } from './Code';
-export { default as Image } from './Image';
-export { default as Pdf } from './Pdf';
-export { default as Ppt } from './Ppt';
-export { default as Text } from './Text';
-export { default as Unknown } from './Unknown';
-export { default as Video } from './Video';
-export { default as Xls } from './Xls';
-export { default as Zip } from './Zip';
+export { default as Audio } from "./Audio";
+export { default as Code } from "./Code";
+export { default as Image } from "./Image";
+export { default as Pdf } from "./Pdf";
+export { default as Ppt } from "./Ppt";
+export { default as Text } from "./Text";
+export { default as Unknown } from "./Unknown";
+export { default as Video } from "./Video";
+export { default as Xls } from "./Xls";
+export { default as Zip } from "./Zip";

package/es/icons/iconSrc/common/AlertTriangle.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", {
     viewBox: "0 0 29 29",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/es/icons/iconSrc/common/Article.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: "article",
     viewBox: "0 0 32 32"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/common/Reply.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: "reply",
     viewBox: "0 0 40 40"
   }, " ", /*#__PURE__*/React.createElement("path", {

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

@@ -1,3 +1,3 @@
-export { default as AlertTriangle } from './AlertTriangle';
-export { default as Article } from './Article';
-export { default as Reply } from './Reply';
+export { default as AlertTriangle } from "./AlertTriangle";
+export { default as Article } from "./Article";
+export { default as Reply } from "./Reply";

package/es/icons/iconSrc/messageStatus/Clock.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: "IM_clock",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/DoubleTick.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: "IM_doubleTick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {

package/es/icons/iconSrc/messageStatus/Failed.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: "IM_failed",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/Tick.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: "IM_tick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {