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

package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.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 *** */
@@ -57,7 +59,7 @@ export default function AttachmentPreviewHeader(props) {
     isCover: false
   }, /*#__PURE__*/React.createElement("span", {
     className: newStyle.attachBtn
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
     disabled: false,
     isBold: true,
     onClick: onSubmit,
@@ -65,9 +67,8 @@ export default function AttachmentPreviewHeader(props) {
     rounded: false,
     size: "medium",
     status: "none",
-    text: submitText,
-    ...submitButtonProps
-  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    text: submitText
+  }, submitButtonProps))), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
     disabled: false,
     isBold: true,
     onClick: onCancel,
@@ -75,9 +76,8 @@ export default function AttachmentPreviewHeader(props) {
     rounded: false,
     size: "medium",
     status: "none",
-    text: cancelText,
-    ...cancelButtonProps
-  })))));
+    text: cancelText
+  }, cancelButtonProps))))));
 }
 AttachmentPreviewHeader.propTypes = attachmentPreviewHeaderPropTypes;
 AttachmentPreviewHeader.defaultProps = attachmentPreviewHeaderDefaultProps;

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -2,10 +2,10 @@
 .imgPreviewerheader {
   position: relative;
   background-color: var(
-    --imlib_chat_components_attachmentPreviewHeader_bg_color
+    --imlib_chat_components_attachmentPreview_bg_color
   );
   padding: var(--zd_size15) var(--zd_size40);
-  border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
+  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
 }
 [dir=ltr] .imgPreviewerheader {
   border-top-left-radius: var(--zd_size5);
@@ -17,7 +17,7 @@
 }
 
 .imgName {
-  color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
+  color: var(--imlib_chat_components_attachmentPreview_name_color);
   font-size: var(--zd_font_size17);
   font-family: var(--zd_semibold);
   composes: dotted from '../../css/common.module.css';
@@ -27,7 +27,7 @@
 
 .imgSize {
   font-size: var(--zd_font_size13);
-  color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
+  color: var(--imlib_chat_components_attachmentPreview_size_color);
   composes: dotted from '../../css/common.module.css';
   max-width: var(--zd_size150);
 }

package/es/AudioBubble/AudioBubble.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 *** */
@@ -37,18 +39,17 @@ export default function AudioBubble(props) {
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
       className: newStyle.audioBubble
-    }, /*#__PURE__*/React.createElement(Audio, {
+    }, /*#__PURE__*/React.createElement(Audio, _extends({
       fileType: fileType,
-      fileURL: fileURL,
-      ...audioProps
-    }));
+      fileURL: fileURL
+    }, audioProps)));
   }, [audioProps, newStyle.audioBubble]);
-  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, {
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: audioDetails,
-    renderMedia: renderMedia,
-    ...mediaBubbleWrapperProps,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
     isFailed: isFailed
-  });
+  }));
 }
 AudioBubble.propTypes = audioBubblePropTypes;
 AudioBubble.defaultProps = audioBubbleDefaultProps;

package/es/Emoji/css/Emoji.module.css

@@ -1,8 +1,8 @@
 .varClass {
-  --emoji-height: var(--zd_size32);
-  --emoji-width: var(--zd_size32);
-  --emoji-font_size: var(--zd_font_size20);
-  --emoji-margin: var(--zd_size5);
+  --emoji-height: 32px;
+  --emoji-width: 32px;
+  --emoji-font_size: 20px;
+  --emoji-margin: 5px;
 }
 
 .emoji {

package/es/EmojiPopup/EmojiPopup.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 } from 'react';
 /** ** Components *** */
@@ -74,7 +76,7 @@ function EmojiPopupComp(props) {
   }), [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "column"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
     className: newStyle.iconWrapper,
     eleRef: getTargetRef,
     iconClass: newStyle.icon,
@@ -82,9 +84,8 @@ function EmojiPopupComp(props) {
     iconSize: "14",
     isActive: isPopupOpen,
     onClick: onTogglePopup,
-    title: tooltip,
-    ...iconProps
-  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    title: tooltip
+  }, iconProps)), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
     boxPosition: position,
     customClass: popupClass,
     customStyle: dummyObject,
@@ -96,12 +97,10 @@ function EmojiPopupComp(props) {
     onClick: removeClose,
     portalId: EDITOR_POPUP_PORTAL,
     positionsOffset: positionsOffset,
-    size: popupSize,
-    ...dropBoxProps
-  }, /*#__PURE__*/React.createElement(Emojis, {
-    onSelect: onSelect,
-    ...emojisProps
-  })) : null);
+    size: popupSize
+  }, dropBoxProps), /*#__PURE__*/React.createElement(Emojis, _extends({
+    onSelect: onSelect
+  }, emojisProps))) : null);
 }
 
 const EmojiPopup = Popup(EmojiPopupComp, undefined, undefined, {

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -41,12 +41,12 @@
 }
 
 .icon :global .path1:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
 }
 
 .icon :global .path2{

package/es/Emojis/Emojis.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); }
+
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
@@ -52,13 +54,12 @@ export default function Emojis(props) {
     isShowGroupBasedList,
     getMethods
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, _extends({
     getRef: getSearchRef,
     onChange: onSearch,
     searchPlaceHolder: searchPlaceHolder,
-    searchString: searchValue,
-    ...emojisHeaderProps
-  }) : null, /*#__PURE__*/React.createElement(EmojisList, {
+    searchString: searchValue
+  }, emojisHeaderProps)) : null, /*#__PURE__*/React.createElement(EmojisList, _extends({
     emojisList: emojisList,
     getMethods: getEmojisListMethods,
     isShowGroupBasedList: searchValue ? false : isShowGroupBasedList,
@@ -67,14 +68,12 @@ export default function Emojis(props) {
     onSelect: onSelect,
     rowType: emojisRowType,
     searchString: searchValue,
-    selectedGroup: selectedGroup,
-    ...emojisListProps
-  }), isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
+    selectedGroup: selectedGroup
+  }, emojisListProps)), isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, _extends({
     emojisList: emojisList,
     onSelect: onSelectTab,
-    selectedTab: selectedGroup,
-    ...emojisFooterProps
-  }) : null);
+    selectedTab: selectedGroup
+  }, emojisFooterProps)) : null);
 }
 Emojis.propTypes = emojisPropTypes;
 Emojis.defaultProps = emojisDefaultProps;

package/es/EmojisFooter/EmojisFooter.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); }
+
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
@@ -53,15 +55,14 @@ export default function EmojisFooter(props) {
       key: id,
       className: newStyle.tabIcon,
       flexible: true
-    }, /*#__PURE__*/React.createElement(Emoji, {
+    }, /*#__PURE__*/React.createElement(Emoji, _extends({
       customStyle: emojiCustomStyle,
       customTitle: capitalize(groupName),
       emoji: emoji,
       emojiName: emojiName,
       id: groupName,
-      onSelect: onSelect,
-      ...emojiProps
-    }), selectedTab === groupName ? /*#__PURE__*/React.createElement("span", {
+      onSelect: onSelect
+    }, emojiProps)), selectedTab === groupName ? /*#__PURE__*/React.createElement("span", {
       className: newStyle.tabLine
     }) : null);
   }));

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -1,6 +1,6 @@
 .footerTab {
   position: relative;
-  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
+  border-top: 1px solid var(--imlib_chat_components_common_border);
 }
 
 .tabIcon {
@@ -21,7 +21,7 @@
   height: var(--zd_size2) ;
   transition: 0.3s ease;
   width: 100% ;
-  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
+  background-color: var(--imlib_chat_components_emoji_tab_line_color);
 }
 
 [dir=ltr] .tabLine {

package/es/EmojisHeader/EmojisHeader.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 *** */
@@ -44,7 +46,7 @@ export default function EmojisHeader(props) {
     size: "13"
   })), /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, /*#__PURE__*/React.createElement(TextBox, {
+  }, /*#__PURE__*/React.createElement(TextBox, _extends({
     customClass: newStyle.searchInput,
     inputRef: getRef,
     isDisabled: false,
@@ -56,9 +58,8 @@ export default function EmojisHeader(props) {
     size: "medium",
     type: "text",
     value: searchString,
-    variant: "default",
-    ...textBoxProps
-  }))));
+    variant: "default"
+  }, textBoxProps)))));
 }
 EmojisHeader.propTypes = emojisHeaderPropTypes;
 EmojisHeader.defaultProps = emojisHeaderDefaultProps;

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -1,12 +1,11 @@
 .container {
   padding: var(--zd_size10) ;
-  border-bottom: 1px solid
-    var(--imlib_chat_components_emojisHeader_border_color);
+  border-bottom: 1px solid var(--imlib_chat_components_common_border);
 }
 
 .emojisSearch {
   position: relative;
-  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
+  background-color: var(--imlib_chat_components_emoji_popup_search_bg);
 }
 
 .searchInput {
@@ -25,6 +24,7 @@
 
 .searchIcon {
   position: absolute;
+  color: var(--imlib_chat_components_primary_text);
 }
 
 [dir=ltr] .searchIcon {

package/es/EmojisList/EmojisList.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); }
+
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
@@ -89,17 +91,15 @@ export default function EmojisList(props) {
     }, groupName) : null, Object.keys(emojis).map(emojiName => {
       const emoji = emojis[emojiName];
       const id = `emoji_${emojiName}`;
-      return /*#__PURE__*/React.createElement(Emoji, {
+      return /*#__PURE__*/React.createElement(Emoji, _extends({
         key: id,
         emoji: emoji,
         emojiName: emojiName,
-        onSelect: onSelect,
-        ...emojiProps
-      });
+        onSelect: onSelect
+      }, emojiProps));
     })) : null;
   }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
-  const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
-  }), [emojisEmptyStateProps]);
+  const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, emojisEmptyStateProps), [emojisEmptyStateProps]);
   const renderEmptyState = useCallback(() => {
     /* Render EmptyState */
     if (isRenderEmptyState) {

package/es/EmojisList/css/EmojisList.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --emoji-groupName-size: var(--zd_font_size13);
-  --emoji-singleList-size: var(--zd_size32);
-  --emoji-multipleList-size: var(--zd_size300);
+  --emoji-groupName-size: 13px;
+  --emoji-singleList-size: 32px;
+  --emoji-multipleList-size: 300px;
 }
 
 .emojisList {

package/es/ImageBubble/css/ImageBubble.module.css

@@ -1,5 +1,5 @@
 .varClass {
-  --imageBubble-wrapper_height: var(--zd_size200);
+  --imageBubble-wrapper_height: 200px;
   --imageBubble-wrapper_width: 23.75rem;
   --imageBubble-wrapper_max_width: 100%;
   --imageBubble-blur_img_width: 100%;

package/es/MediaBubbleWrapper/MediaBubbleWrapper.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, Fragment } from 'react';
 /** ** Hooks *** */
@@ -47,13 +49,13 @@ export default function MediaBubbleWrapper(props) {
     fileURL,
     fileType
   });
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
-    fileSize: fileSize,
-    ...attachmentBubbleInfoProps,
+    fileSize: fileSize
+  }, attachmentBubbleInfoProps, {
     isFailed: isFailed
-  }), mediaComponent);
+  })), mediaComponent);
 }
 MediaBubbleWrapper.propTypes = mediaBubbleWrapperPropTypes;
 MediaBubbleWrapper.defaultProps = mediaBubbleWrapperDefaultProps;

package/es/Message/Message.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';
 /** ** Constants *** */
@@ -79,9 +81,7 @@ export default function Message(props) {
         title: name,
         renderIcon: renderOwnerStatusIcon
       };
-      return /*#__PURE__*/React.createElement(MessageAvatar, { ...props,
-        ...messageOwnerProps
-      });
+      return /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps));
     }
 
     return null;
@@ -93,9 +93,7 @@ export default function Message(props) {
       messageStatus: status,
       title: statusTooltip
     };
-    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, { ...props,
-      ...messageStatusProps
-    }) : null;
+    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
   }, [status, statusTooltip, isShowMessageStatus, messageStatusProps]);
   /** ** Render MessageBox *** */
 
@@ -107,9 +105,7 @@ export default function Message(props) {
       isIncoming,
       isOutgoing
     };
-    return /*#__PURE__*/React.createElement(MessageBox, { ...props,
-      ...messageBoxProps
-    });
+    return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
   }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
   /** ** Render Message Actions *** */
 
@@ -121,11 +117,9 @@ export default function Message(props) {
       onMouseEnter: onMouseEnterAction,
       setRetainMessageActions
     };
-    return /*#__PURE__*/React.createElement(MessageActions, { ...props,
-      ...messageActionsProps
-    });
+    return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
   }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps, setRetainMessageActions]);
-  return /*#__PURE__*/React.createElement(MessageBubble, {
+  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
@@ -133,9 +127,8 @@ export default function Message(props) {
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner,
-    retainMessageActions: retainMessageActions,
-    ...messageBubbleProps
-  });
+    retainMessageActions: retainMessageActions
+  }, messageBubbleProps));
 }
 Message.propTypes = messagePropTypes;
 Message.defaultProps = messageDefaultProps;

package/es/MessageAction/MessageAction.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';
 /** ** Components *** */
@@ -32,13 +34,12 @@ export default function MessageAction(props) {
     let {
       id
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, {
+    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, _extends({
       id: id,
-      needIconOnly: true,
-      ...actionIconProps
-    }) : null;
+      needIconOnly: true
+    }, actionIconProps)) : null;
   }, [actionIconProps, needMoreActionItemIcon]);
-  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
+  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, _extends({
     closePopup: closePopup,
     displayText: displayText,
     id: id,
@@ -47,17 +48,15 @@ export default function MessageAction(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
-    title: iconTitle,
-    ...moreActionItemProps
-  }) : /*#__PURE__*/React.createElement(ActionIcon, {
+    title: iconTitle
+  }, moreActionItemProps)) : /*#__PURE__*/React.createElement(ActionIcon, _extends({
     id: id,
     isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    title: iconTitle,
-    ...actionIconProps
-  });
+    title: iconTitle
+  }, actionIconProps));
 }
 MessageAction.propTypes = messageActionsPropTypes;
 MessageAction.defaultProps = messageActionsDefaultProps;

package/es/MessageActions/MessageActions.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, Fragment } from 'react';
 /** ** Components *** */
@@ -73,7 +75,7 @@ export default function MessageActions(props) {
       iconTitle,
       isDisabled
     } = action || dummyObject;
-    return /*#__PURE__*/React.createElement(MessageAction, {
+    return /*#__PURE__*/React.createElement(MessageAction, _extends({
       key: id,
       closePopup: closePopup,
       displayText: displayText,
@@ -82,9 +84,8 @@ export default function MessageActions(props) {
       isDisabled: isDisabled,
       isShowInMore: isShowInMore,
       onClick: handleClickAction,
-      onMouseEnter: handleMouseEnterAction,
-      ...messageActionProps
-    });
+      onMouseEnter: handleMouseEnterAction
+    }, messageActionProps));
   }, [handleClickAction, handleMouseEnterAction, messageActionProps]);
   /* Hooks handling */
 
@@ -104,18 +105,15 @@ export default function MessageActions(props) {
   const renderMoreIcon = useCallback(() => /*#__PURE__*/React.createElement("div", {
     className: newStyle.moreIcon
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
-  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
-    renderIcon: renderMoreIcon,
-    ...componentProps,
-    ...actionIconWrapperProps
-  }), [actionIconWrapperProps, renderMoreIcon]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
+  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, _extends({
+    renderIcon: renderMoreIcon
+  }, componentProps, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore,
-    setRetainMessageActions: setRetainMessageActions,
-    ...messageActionsWrapperProps
-  }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
+    setRetainMessageActions: setRetainMessageActions
+  }, messageActionsWrapperProps)), secondaryActions ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.secondaryActions
   }, secondaryActions) : null);
 }

package/es/MessageActionsWrapper/MessageActionsWrapper.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';
 /** ** Components *** */
@@ -51,12 +53,11 @@ export default function MessageActionsWrapper(props) {
       action
     }); // id, isRenderInMorePopup
   }), [defaultActions, setRetainMessageActions]);
-  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
+  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, _extends({
     actions: moreActions,
     renderMoreIcon: renderMoreIcon,
-    setRetainMessageActions: setRetainMessageActions,
-    ...messageActionsMoreProps
-  }), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
+    setRetainMessageActions: setRetainMessageActions
+  }, messageActionsMoreProps)), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: newStyle.row,

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

@@ -1,10 +1,10 @@
 .varClass {
-  --messageBox-content_padding: var(--zd_size14);
-  --messageBox-content_size: var(--zd_font_size14);
+  --messageBox-content_padding: 14px;
+  --messageBox-content_size: 14px;
   --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-message_status_gap: 12px;
+  --messageBox-message_header_gap: 1px;
+  --messageBox-message_footer_gap: 1px;
 }
 
 .messageBoxContainer {