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

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

package/es/im/IMAttachmentHandler/IMAttachmentHandler.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';
 /** ** Components *** */
@@ -36,15 +34,16 @@ export default function IMAttachmentHandler(props) {
     attachmentType,
     integrationService
   });
-  return /*#__PURE__*/React.createElement(AttachmentHandler, _extends({
+  return /*#__PURE__*/React.createElement(AttachmentHandler, {
     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: 20px;
-  --integrationIcon-small_width: 20px;
-  --integrationIcon-medium_height: 26px;
-  --integrationIcon-medium_width: 26px;
+  --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 {
@@ -64,9 +64,9 @@
 }
 
 .fontIcon :global .path1::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
 }
 
 .fontIcon :global .path2::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
 }

package/es/im/IMMessage/IMMessage.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, useMemo } from 'react';
 /** ** Hooks *** */
@@ -99,18 +97,19 @@ export default function IMMessage(props) {
       displayDateTime,
       tooltip
     } = dateTimeDetails || {};
-    return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
+    return /*#__PURE__*/React.createElement(IMMessageMeta, {
       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, _extends({
+  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, {
     deleteMessageText: deleteMessageText,
     isFailed: isFailedMessage,
     isSending: isSendingMessage,
@@ -122,8 +121,9 @@ 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,19 +136,21 @@ export default function IMMessage(props) {
     const customStyle = {
       text: imTicketLinkClass
     };
-    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
+    return /*#__PURE__*/React.createElement(IMPermaLink, {
       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, _extends({
-    integrationName: isShowIntegrationIcon ? integrationName : ''
-  }, imIntegrationIconProps)), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, {
+    integrationName: isShowIntegrationIcon ? integrationName : '',
+    ...imIntegrationIconProps
+  }), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
   /** ** Construct Owner Details *** */
 
   const ownerDetails = useMemo(() => ({
@@ -174,7 +176,7 @@ export default function IMMessage(props) {
       }
     };
   }, [messageProps, handleRenderMessageBoxFooter]);
-  return /*#__PURE__*/React.createElement(Message, _extends({
+  return /*#__PURE__*/React.createElement(Message, {
     actions: actions,
     direction: direction,
     isActive: isHighlightMessage,
@@ -189,8 +191,9 @@ export default function IMMessage(props) {
     renderOwnerStatusIcon: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
     status: messageStatus,
-    statusTooltip: messageStatusTitle
-  }, messageCustomProps));
+    statusTooltip: messageStatusTitle,
+    ...messageCustomProps
+  });
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

package/es/im/IMMessage/css/IMMessage.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --imTicketLink-top_gap: 5px;
-  --imTicketLink-font_size: 12px;
-  --imTicketLink-max_width: 150px;
+  --imTicketLink-top_gap: var(--zd_size5);
+  --imTicketLink-font_size: var(--zd_font_size12);
+  --imTicketLink-max_width: var(--zd_size150);
 }
 
 .ticketLink {

package/es/im/IMMessageContent/IMMessageContent.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); }
-
 /* eslint-disable react/jsx-indent */
 
 /** ** Libraries *** */
@@ -86,42 +84,56 @@ export default function IMMessageContent(props) {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.deleteBubble
-  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
+  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(IMReplyBubble, {
     isFailed: isFailed,
     messageDetails: replyToMessage,
     onClick: onClickReply,
-    replyText: replyText
-  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    replyText: replyText,
+    ...imReplyBubbleProps
+  })) : null, isShowCustomBubble ? renderCustomMessage({
     messageDetails,
     isFailed
-  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(ImageBubble, {
     imageDetails: attachmentDetails,
     isFailed: isFailed,
     isSending: isSending,
-    onClick: onImageBubbleClick
-  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    onClick: onImageBubbleClick,
+    ...imageBubbleProps
+  })) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(VideoBubble, {
     isFailed: isFailed,
-    videoDetails: attachmentDetails
-  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AudioBubble, _extends({
+    videoDetails: attachmentDetails,
+    ...videoBubbleProps
+  })) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(AudioBubble, {
     audioDetails: attachmentDetails,
-    isFailed: isFailed
-  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
+    isFailed: isFailed,
+    ...audioBubbleProps
+  })) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(AttachmentBubble, {
     attachmentBubbleTitle: attachmentBubbleTitle,
     attachmentDetails: attachmentDetails,
     isFailed: isFailed,
     isSending: isSending,
-    onClick: onAttachmentBubbleClick
-  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    onClick: onAttachmentBubbleClick,
+    ...attachmentBubbleProps
+  })) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(LocationBubble, {
     isFailed: isFailed,
-    locationUrl: locationUrl
-  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
+    locationUrl: locationUrl,
+    ...locationBubbleProps
+  })) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(IMTextBubble, {
     isFailed: isFailed,
     isShowFullContent: isShowFullContent,
     messageDetails: messageDetails,
     moreText: seeMoreText,
     onLoadFullMessage: onLoadFullMessage,
-    sessionDetails: sessionDetails
-  }, imTextBubbleProps))) : null);
+    sessionDetails: sessionDetails,
+    ...imTextBubbleProps
+  })) : null);
 }
 IMMessageContent.propTypes = imMessageContentPropTypes;
 IMMessageContent.defaultProps = imMessageContentDefaultProps;

package/es/im/IMMessageMeta/IMMessageMeta.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';
 /** ** Hooks *** */
@@ -57,10 +55,11 @@ export default function IMMessageMeta(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
+  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, {
     imMessageMetaInfoContent: imMessageMetaInfoContent,
-    imMessageMetaInfoTitle: imMessageMetaInfoTitle
-  }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
+    imMessageMetaInfoTitle: imMessageMetaInfoTitle,
+    ...imMessageMetaInfoProps
+  }) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
     className: dotClass
   }, "\u22C5") : null, time ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.dateTime,

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --imMessageMeta-gap: 5px;
-  --imMessageMeta-separator_gap: 5px;
-  --imMessageMeta-time_padding: 45px;
+  --imMessageMeta-gap: var(--zd_size5);
+  --imMessageMeta-separator_gap: var(--zd_size5);
+  --imMessageMeta-time_padding: var(--zd_size45);
 }
 
 .imMessageMeta {

package/es/im/IMMessageMetaInfo/css/IMMessageMetaInfo.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --imMessageMetaInfo-font_size: 13px;
-  --imMessageMetaInfo-max_width: 150px;
+  --imMessageMetaInfo-font_size: var(--zd_font_size13);
+  --imMessageMetaInfo-max_width: var(--zd_size150);
   --imMessageMetaInfo-letter_spacing: 0.2px;
 }
 

package/es/im/IMReplyBubble/IMReplyBubble.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';
 /** ** Hooks *** */
@@ -35,17 +33,17 @@ export default function IMReplyBubble(props) {
     messageDetails,
     onClick: propOnClick
   });
-  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+  return /*#__PURE__*/React.createElement(ReplyBubble, {
     attachmentDetails: attachmentDetails,
     dateTimeDetails: dateTimeDetails,
     locationUrl: locationUrl,
     message: message,
     onClick: onClick,
     replyText: replyText,
-    senderName: senderName
-  }, replyBubbleProps, {
+    senderName: senderName,
+    ...replyBubbleProps,
     isFailed: isFailed
-  }));
+  });
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;
 IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;

package/es/im/IMTextBubble/IMTextBubble.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';
 /** ** Constants *** */
@@ -27,13 +25,13 @@ export default function IMTextBubble(props) {
     sanitizedDisplayMessage,
     isShowSeeMore
   } = useIMTextBubble(props);
-  return /*#__PURE__*/React.createElement(TextBubble, _extends({
+  return /*#__PURE__*/React.createElement(TextBubble, {
     message: sanitizedDisplayMessage,
     moreText: isShowSeeMore ? moreText : '',
-    onClickMore: onLoadFullMessage
-  }, textBubbleProps, {
+    onClickMore: onLoadFullMessage,
+    ...textBubbleProps,
     isFailed: isFailed
-  }));
+  });
 }
 IMTextBubble.propTypes = imTextBubblePropTypes;
 IMTextBubble.defaultProps = imTextBubbleDefaultProps;

package/es/im/ReplyComposer/ReplyComposer.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, { useMemo } from 'react';
 /** ** Components *** */
@@ -49,6 +47,7 @@ export default function ReplyComposer(props) {
     onFileSubmit: propOnFileSubmit,
     attachmentPreviewTexts,
     renderHeader,
+    renderBody,
     renderFooter,
     renderStencils,
     getEditorState: propGetEditorState,
@@ -104,19 +103,21 @@ export default function ReplyComposer(props) {
     isLoaded
   }, newStyle);
   const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
+  const bodyElement = useMemo(() => renderBody ? renderHandler(renderBody)() : null, [renderBody]);
   const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
     needFooter
   }) : null, [renderStencils, needFooter, isLoading]);
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.replyComposer,
     isCover: false
-  }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, _extends({
+  }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, {
     getMethods: getSuggetPopupMethods,
     onClose: onHideSuggestions,
     onSelect: onSelectSuggestion,
     suggestionDetails: suggestionDetails,
-    suggestionsMapping: suggestionsMapping
-  }, replyEditorSuggestionsProps)) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, _extends({
+    suggestionsMapping: suggestionsMapping,
+    ...replyEditorSuggestionsProps
+  }) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, {
     descriptionDetails: filesDescription,
     files: files,
     isDescriptionNeeded: true,
@@ -124,10 +125,11 @@ export default function ReplyComposer(props) {
     onCancel: onFileCancel,
     onDescriptionChange: onChangeFileDescription,
     onSubmit: onFileSubmit,
-    texts: attachmentPreviewTexts
-  }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
+    texts: attachmentPreviewTexts,
+    ...attachmentPreviewCustomProps
+  }) : null, isLoaded ? headerElement : null, stencilsElement || null, bodyElement || /*#__PURE__*/React.createElement("div", {
     className: replEditorWrapperClass
-  }, /*#__PURE__*/React.createElement(ReplyEditor, _extends({
+  }, /*#__PURE__*/React.createElement(ReplyEditor, {
     content: content,
     EDITORURL: EDITORURL,
     features: allFeatures,
@@ -138,13 +140,15 @@ export default function ReplyComposer(props) {
     onChange: onChange,
     onKeyDown: onKeyDown,
     onPaste: onPaste,
-    placeHolder: placeHolder
-  }, replyEditorCustomProps))), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, _extends({
+    placeHolder: placeHolder,
+    ...replyEditorCustomProps
+  })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
     editor: editor,
     extensions: extensions,
     isHTMLContent: isHTMLContent,
-    renderButtons: renderFooter
-  }, replyComposerFooterProps)) : null);
+    renderButtons: renderFooter,
+    ...replyComposerFooterProps
+  }) : null);
 }
 ReplyComposer.propTypes = replyComposerPropTypes;
 ReplyComposer.defaultProps = replyComposerDefaultProps;

package/es/im/ReplyEditor/ReplyEditor.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, { useMemo } from 'react';
 /** ** Components *** */
@@ -81,7 +79,7 @@ export default function ReplyEditor(props) {
     className: newStyle.replyEditor
   }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
     className: editorClass
-  }, /*#__PURE__*/React.createElement(Editor, _extends({
+  }, /*#__PURE__*/React.createElement(Editor, {
     appearance: appearance,
     content: content,
     customStyle: editorNewCustomStyle,
@@ -96,8 +94,9 @@ export default function ReplyEditor(props) {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     onReadyCallback: onReadyCallback,
-    placeHolder: placeHolder
-  }, editorProps))) : null);
+    placeHolder: placeHolder,
+    ...editorProps
+  })) : null);
 }
 ReplyEditor.propTypes = replyEditorPropTypes;
 ReplyEditor.defaultProps = replyEditorDefaultProps;

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -24,10 +24,10 @@
   font-family: var(--zd_regular) !important;
   line-height: 22px !important;
 
-  --rte-text-color: var(--imlib_chat_components_reply_editor_color) !important;
-  --rte-bg-color: var(--imlib_chat_components_reply_editor_bg) !important;
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
   --rte-placeholder-color: var(
-    --imlib_chat_components_reply_editor_placeholder_color
+    --imlib_chat_components_replyEditor_placeholder
   ) !important;
   --rte-link-text-color: var(
     --imlib_chat_components_replyEditor_color
@@ -35,7 +35,7 @@
 
   padding: var(--zd_size16)  !important;
   cursor: text !important;
-}	
+}
 
 .editorWrapper {
   /** ** Use this class for css customisations *** */