@zohoim/chat-components 0.0.13 → 0.0.15

package/es/MessageAvatar/MessageAvatar.js

@@ -1,20 +1,19 @@
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Components *** */
-import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 /** ** CSS *** */
-import style from './css/MessageAvatar.module.css';
 
+import style from './css/MessageAvatar.module.css';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
 
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 /** ** Constants *** */
+
 import messageAvatarDefaultProps from './props/defaultProps';
 import messageAvatarPropTypes from './props/propTypes';
 export default function MessageAvatar(props) {
@@ -28,30 +27,23 @@ export default function MessageAvatar(props) {
     iconTitle,
     renderIcon
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   const icon = renderHandler(renderIcon)();
-
-  /* css classnames added based on logic */
-  const {
-    avatarWrapperClass,
-    iconClass,
-    avatarClass
-  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("div", {
-    className: avatarWrapperClass
+    className: newStyle.msgAvatar
   }, /*#__PURE__*/React.createElement(Avatar, {
     alternateSrc: alternateSrc,
-    customClass: avatarClass,
+    customClass: newStyle.avatar,
     name: name,
     size: size,
     src: src,
     title: title
-  }), /*#__PURE__*/React.createElement("span", {
-    className: iconClass,
+  }), icon ? /*#__PURE__*/React.createElement("span", {
+    className: newStyle.icon,
     "data-title": iconTitle
-  }, icon));
+  }, icon) : null);
 }
 MessageAvatar.defaultProps = messageAvatarDefaultProps;
 MessageAvatar.propTypes = messageAvatarPropTypes;

package/es/MessageAvatar/css/MessageAvatar.module.css

@@ -5,15 +5,15 @@
 
 .icon {
   position: absolute;
-  bottom: calc(-1*var(--imlib_size_6));
+  bottom: calc( var(--zd_size6) * -1 ) ;
 }
 
 [dir=ltr] .icon {
-  right: calc(-1*var(--imlib_size_7));
+  right: calc( var(--zd_size7) * -1 ) ;
 }
 
 [dir=rtl] .icon {
-  left: calc(-1*var(--imlib_size_7));
+  left: calc( var(--zd_size7) * -1 ) ;
 }
 
 .avatar {

package/es/MessageAvatar/props/defaultProps.js

@@ -1,11 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageAvatarDefaultProps = {
   customStyle: dummyObject,
-  name: '',
-  // 'RAVI KUMAR',
-  size: 'medium',
-  iconTitle: '' // 'RAVI KUMAR',
+  size: 'medium'
 };
-
 export default messageAvatarDefaultProps;

package/es/MessageAvatar/props/propTypes.js

@@ -1,13 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const messageAvatarPropTypes = {
-  src: PropTypes.string,
+  src: PropTypes.string.isRequired,
   alternateSrc: PropTypes.string,
-  title: PropTypes.string,
-  size: PropTypes.string,
-  name: PropTypes.string,
+  customStyle: PropTypes.object,
   iconTitle: PropTypes.string,
+  name: PropTypes.string,
   renderIcon: PropTypes.func,
-  customStyle: PropTypes.object
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  title: PropTypes.string
 };
 export default messageAvatarPropTypes;

package/es/MessageBox/MessageBox.js

@@ -1,63 +1,66 @@
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import messageBoxDefaultProps from './props/defaultProps';
 import messageBoxPropTypes from './props/propTypes';
-
 /** ** Methods *** */
+
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
 
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
+
 import style from './css/MessageBox.module.css';
-function MessageBox(props) {
+export default function MessageBox(props) {
   const {
     renderMessage: renderMessageContent,
     renderMessageFooter,
     renderMessageHeader,
     customStyle,
-    renderMessageStatus
+    renderMessageStatus,
+    isFailed,
+    isIncoming,
+    isOutgoing
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
-
   /* css classnames added based on logic */
-  const {
-    messageBoxClass,
-    messageBoxInner,
-    messageContentWrapperClass,
-    messageHeaderWrapperClass,
-    messageFooterWrapperClass,
-    messageStatusWrapperClass
-  } = cssJSLogic(props, newStyle);
 
+  const {
+    messageBoxClass
+  } = cssJSLogic({
+    isFailed,
+    isIncoming,
+    isOutgoing
+  }, newStyle);
   /* Render Childrens */
+
   const messageHeader = renderHandler(renderMessageHeader)();
   const messageConent = renderHandler(renderMessageContent)();
   const messageFooter = renderHandler(renderMessageFooter)();
   const messageStatus = renderHandler(renderMessageStatus)();
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Container, {
     className: messageBoxClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: messageBoxInner
-  }, messageHeader ? /*#__PURE__*/React.createElement("div", {
-    className: messageHeaderWrapperClass
-  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
-    className: messageContentWrapperClass
-  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement("div", {
-    className: messageFooterWrapperClass
-  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement("div", {
-    className: messageStatusWrapperClass
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageHeaderWrapper
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageContentWrapper
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageFooterWrapper
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageStatusWrapper
   }, messageStatus) : null);
 }
 MessageBox.propTypes = messageBoxPropTypes;
 MessageBox.defaultProps = messageBoxDefaultProps;
-MessageBox.displayName = 'MessageBox';
-export default MessageBox;
+MessageBox.displayName = 'MessageBox';

package/es/MessageBox/css/MessageBox.module.css

@@ -1,16 +1,15 @@
 .varClass {
-  --messageBox-content_padding: var(--imlib_size_14);
-  --messageBox-content_size: var(--imlib_size_14);
-  --messageBox-border_radius: var(--imlib_size_9);
-  --messageBox-message_status_gap: var(--imlib_size_12);
-  --messageBox-message_header_gap: var(--imlib_size_1);
-  --messageBox-message_footer_gap: var(--imlib_size_1);
-  /* --messageBox-max_width: var(--imlib_size_410); */
+  --messageBox-content_padding: var(--zd_size14);
+  --messageBox-content_size: var(--zd_font_size14);
+  --messageBox-border_radius: 9px;
+  --messageBox-message_status_gap: var(--zd_size12);
+  --messageBox-message_header_gap: var(--zd_size1);
+  --messageBox-message_footer_gap: var(--zd_size1);
+  /* --messageBox-max_width: 410px; */
 }
 
 .messageBoxContainer {
   composes: varClass;
-
   display: grid;
   /* flex-direction: row; */
   grid-template-columns: 1fr auto;
@@ -19,20 +18,14 @@
   /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
   font-size: var(--messageBox-content_size);
-
+  box-sizing: border-box;
   background-color: var(--imlib_chat_components_messageBox_bg_color);
   padding: var(--messageBox-content_padding);
   border-radius: var(--messageBox-border_radius);
 }
 
-.messageBoxInner{
-  flex:1;
-  min-width: 0;
-  min-height: 0;
-}
-
 .messageContentWrapper {
-  /*Use this class for message content customization*/
+  /* Use this class for message content customization */
   line-height: 150%;
 }
 

package/es/MessageBox/css/cssJSLogic.js

@@ -12,27 +12,7 @@ export default function cssJSLogic(props, style) {
     [style.incomingMessageBox]: isIncoming && !isFailed,
     [style.outgoingMessageBox]: isOutgoing && !isFailed
   });
-  const messageBoxInner = compileClassNames({
-    [style.messageBoxInner]: true
-  });
-  const messageContentWrapperClass = compileClassNames({
-    [style.messageContentWrapper]: true
-  });
-  const messageHeaderWrapperClass = compileClassNames({
-    [style.messageHeaderWrapper]: true
-  });
-  const messageFooterWrapperClass = compileClassNames({
-    [style.messageFooterWrapper]: true
-  });
-  const messageStatusWrapperClass = compileClassNames({
-    [style.messageStatusWrapper]: true
-  });
   return {
-    messageBoxClass,
-    messageBoxInner,
-    messageContentWrapperClass,
-    messageHeaderWrapperClass,
-    messageFooterWrapperClass,
-    messageStatusWrapperClass
+    messageBoxClass
   };
 }

package/es/MessageBox/props/defaultProps.js

@@ -1,8 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 export default {
   customStyle: dummyObject,
-  isFailed: false,
-  isIncoming: false,
   isOutgoing: true
 };

package/es/MessageBox/props/propTypes.js

@@ -1,12 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-export default {
-  renderMessageFooter: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  renderMessageStatus: PropTypes.func,
+const messageBoxPropTypes = {
+  isIncoming: PropTypes.bool.isRequired,
+  isOutgoing: PropTypes.bool.isRequired,
   renderMessage: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
   isFailed: PropTypes.bool,
-  isIncoming: PropTypes.bool,
-  isOutgoing: PropTypes.bool
-};
+  renderMessageFooter: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
+  renderMessageStatus: PropTypes.func
+};
+export default messageBoxPropTypes;

package/es/MessageBubble/MessageBubble.js

@@ -1,23 +1,22 @@
-/* eslint-disable max-len */
-/* eslint-disable sort-imports */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import { useMessageBubbleAction } from '@zohoim/chat-components-hooks/es/MessageBubble';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useMessageBubbleAction from '@zohoim/chat-components-hooks/es/MessageBubble/useMessageBubbleAction';
 /** ** Constants *** */
+
 import messageBubbleDefaultProps from './props/defaultProps';
 import messageBubblePropTypes from './props/propTypes';
-import constantProps from './props/propConstants';
-
 /** ** Methods *** */
+
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
 
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
+
 import style from './css/MessageBubble.module.css';
 export default function MessageBubble(props) {
   const {
@@ -26,53 +25,80 @@ export default function MessageBubble(props) {
     renderMessageOwner,
     renderMessageActions,
     customStyle,
-    needSender
+    needSender,
+    isActive,
+    direction
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* css classnames added based on logic */
-  const {
-    bubbleClass,
-    messageOwnerWrapperClass,
-    messageContainerClass,
-    messageBoxWrapperClass,
-    messageActionWrapperClass,
-    messageBoxFooterWrapperClass
-  } = cssJSLogic(props, newStyle);
 
+  const {
+    bubbleClass
+  } = cssJSLogic({
+    isActive,
+    direction
+  }, newStyle);
   /* Use Hooks */
+
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageAction
+    isRenderMessageActions
   } = useMessageBubbleAction(props);
-
   /* Render Childrens */
-  const messageActions = isRenderMessageAction ? renderHandler(renderMessageActions)() : null;
-  const messageOwner = renderHandler(renderMessageOwner)();
-  const messageBox = renderHandler(renderMessageBox)();
-  const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
 
+  /* Message Sender Render */
+
+  const messageSenderRenderer = useCallback(() => {
+    const messageOwner = renderHandler(renderMessageOwner)();
+    return needSender ? /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.messageOwnerWrapper
+    }, messageOwner) : null;
+  }, [renderMessageOwner, needSender, newStyle.messageOwnerWrapper]);
+  /* Message Actions Render */
+
+  const messageActionsRenderer = useCallback(() => {
+    const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
+    return messageActions ? /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.messageActionWrapper
+    }, messageActions) : null;
+  }, [isRenderMessageActions, renderMessageActions, newStyle.messageActionWrapper]);
+  /* Message Box Render */
+
+  const messageBoxRenderer = useCallback(() => {
+    const messageBox = renderHandler(renderMessageBox)();
+    return messageBox ? /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.messageBoxWrapper
+    }, messageBox) : null;
+  }, [renderMessageBox, newStyle.messageBoxWrapper]);
+  /* Message BoxWithActions Render */
+
+  const messageBoxWithActionsRenderer = useCallback(() => {
+    const messageBox = messageBoxRenderer();
+    const messageActions = messageActionsRenderer();
+    return messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.messageContainer
+    }, messageBox, messageActions) : null;
+  }, [messageBoxRenderer, messageActionsRenderer, newStyle.messageContainer]);
+  /* Message Footer Render */
+
+  const messageFooterRenderer = useCallback(() => {
+    const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
+    return messageBoxFooter ? /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.messageBoxFooterWrapper
+    }, messageBoxFooter) : null;
+  }, [renderMessageBoxFooter, newStyle.messageBoxFooterWrapper]);
   /* Construct Layout */
-  const messageLayout = /*#__PURE__*/React.createElement("div", {
+
+  const messageLayout = /*#__PURE__*/React.createElement(Container, {
     className: bubbleClass,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, needSender ? /*#__PURE__*/React.createElement("div", {
-    className: messageOwnerWrapperClass
-  }, messageOwner) : null, messageBox || messageActions ? /*#__PURE__*/React.createElement("div", {
-    className: messageContainerClass
-  }, messageBox ? /*#__PURE__*/React.createElement("div", {
-    className: messageBoxWrapperClass
-  }, messageBox) : null, messageActions ? /*#__PURE__*/React.createElement("div", {
-    className: messageActionWrapperClass
-  }, messageActions) : null) : null, messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
-    className: messageBoxFooterWrapperClass
-  }, messageBoxFooter) : null);
+  }, messageSenderRenderer(), messageBoxWithActionsRenderer(), messageFooterRenderer());
   return messageLayout;
 }
 MessageBubble.propTypes = messageBubblePropTypes;
 MessageBubble.defaultProps = messageBubbleDefaultProps;
-MessageBubble.constantProps = constantProps;
 MessageBubble.displayName = 'MessageBubble';

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

@@ -1,15 +1,15 @@
 .varClass {
-  --messageBubble-bubble_footer_gap: var(--imlib_size_5);
-  --messageBubble-message_owner_gap: var(--imlib_size_13);
-  --messageBubble-message_action_gap: var(--imlib_size_12);
-  --messageBox-max_width: var(--imlib_size_410);
-  --messageBox-footer_fontSize: var(--imlib_size_11);
-  --messageBox-owner_width: var(--imlib_size_34);
+  --messageBubble-bubble_footer_gap: var(--zd_size5);
+  --messageBubble-message_owner_gap: 13px;
+  --messageBubble-message_action_gap: var(--zd_size12);
+  --messageBox-max_width: var(--zd_size410);
+  --messageBox-footer_fontSize: var(--zd_font_size11);
+  --messageBox-owner_width: var(--zd_size34);
 }
 
 .messageBubble {
   composes: varClass;
-  width: 100%;
+  width: 100% ;
   display: grid;
   grid-column-gap: var(--messageBubble-message_owner_gap);
 }
@@ -38,7 +38,9 @@
 .messageBoxFooterWrapper {
   grid-area: messageBoxFooter;
   font-size: var(--messageBox-footer_fontSize);
-  color: var(--imlib_chat_components_messageBubble_messageBox_footer_text_color);
+  color: var(
+    --imlib_chat_components_messageBubble_messageBox_footer_text_color
+  );
   margin-top: var(--messageBubble-bubble_footer_gap);
 }
 
@@ -65,6 +67,7 @@
   grid-template-columns: auto 1fr;
   grid-template-areas: 'messageBox messageAction';
 }
+
 .directionOut .messageContainer {
   grid-template-columns: 1fr auto;
   grid-template-areas: 'messageAction messageBox';

package/es/MessageBubble/css/cssJSLogic.js

@@ -1,42 +1,26 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-
-/** ** Constants *** */
-import propConstants from '../props/propConstants';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
 export default function cssJSLogic(props, style) {
   const {
     isActive,
     direction
   } = props;
-  const isIncoming = direction === propConstants.direction.IN;
-  const isOutgoing = direction === propConstants.direction.OUT;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
   const bubbleClass = compileClassNames({
     [style.messageBubble]: true,
     [style.directionIn]: isIncoming,
     [style.directionOut]: isOutgoing,
     [style.active]: isActive
   });
-  const messageOwnerWrapperClass = compileClassNames({
-    [style.messageOwnerWrapper]: true
-  });
-  const messageContainerClass = compileClassNames({
-    [style.messageContainer]: true
-  });
-  const messageBoxWrapperClass = compileClassNames({
-    [style.messageBoxWrapper]: true
-  });
-  const messageActionWrapperClass = compileClassNames({
-    [style.messageActionWrapper]: true
-  });
-  const messageBoxFooterWrapperClass = compileClassNames({
-    [style.messageBoxFooterWrapper]: true
-  });
   return {
-    bubbleClass,
-    messageOwnerWrapperClass,
-    messageContainerClass,
-    messageBoxWrapperClass,
-    messageActionWrapperClass,
-    messageBoxFooterWrapperClass
+    bubbleClass
   };
 }

package/es/MessageBubble/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubbleDefaultProps = {
   direction: direction.IN,

package/es/MessageBubble/props/propTypes.js

@@ -1,17 +1,17 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-
 /** ** Constants *** */
+
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubblePropTypes = {
-  direction: PropTypes.oneOf([direction.IN, direction.OUT]),
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  renderMessageBox: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
   isActive: PropTypes.bool,
   needMessageActions: PropTypes.bool,
-  renderMessageBox: PropTypes.func,
-  renderMessageBoxFooter: PropTypes.func,
-  renderMessageOwner: PropTypes.func,
+  needSender: PropTypes.bool,
   renderMessageActions: PropTypes.func,
-  customStyle: PropTypes.object,
-  needSender: PropTypes.bool
+  renderMessageBoxFooter: PropTypes.func,
+  renderMessageOwner: PropTypes.func
 };
 export default messageBubblePropTypes;

package/es/MessageStatus/MessageStatus.js

@@ -1,25 +1,22 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import messageStatusDefaultProps from './props/defaultProps';
 import messageStatusPropTypes from './props/propTypes';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-
 /** ** Methods *** */
+
 import cssJSLogic from './css/cssJSLogic';
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-
 /** ** Styles *** */
-import style from './css/MessageStatus.module.css';
 
+import style from './css/MessageStatus.module.css';
 /** ** Icons *** */
+
 import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
 import TickIcon from '../icons/iconSrc/messageStatus/Tick';
 import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
@@ -51,15 +48,18 @@ export default function MessageStatus(props) {
     title,
     renderCustomIcon
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     statusClass
-  } = cssJSLogic(props, newStyle);
-
+  } = cssJSLogic({
+    messageStatus
+  }, newStyle);
   /* Custom Icon */
+
   const customIcon = renderHandler(renderCustomIcon)();
   const IconComponent = messageStatusIconMapping[messageStatus];
   return IconComponent || customIcon ? /*#__PURE__*/React.createElement("div", {

package/es/MessageStatus/css/MessageStatus.module.css

@@ -1,5 +1,5 @@
 .messageStatus {
-  /*USe this class name status customization*/
+  /* USe this class name status customization */
   /* color: #61667a; */
   color: var(--imlib_chat_components_messageStatus_send_color);
 }