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

package/README.md

@@ -10,13 +10,9 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
-# 1.1.2
-
-- Color contrast support added for components
-
 # 1.1.1
 
-- **@zohoim/chat-components-utils** version updated
+- **@zohoim/chat-components-utils** package updated
 
 # 1.1.0
 

package/es/ActionIcon/ActionIcon.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';
 /** ** Components *** */
@@ -69,15 +67,16 @@ export default function ActionIcon(props) {
       customStyle: iconStyle
     }) : null;
   }, [iconStyle, id]);
-  return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, _extends({
+  return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, {
     id: id,
     isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
-    title: title
-  }, actionIconWrapperProps));
+    title: title,
+    ...actionIconWrapperProps
+  });
 }
 ActionIcon.propTypes = actionIconPropTypes;
 ActionIcon.defaultProps = actionIconDefaultProps;

package/es/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --actionIconWrapper-height: 26px;
-  --actionIconWrapper-width: 26px;
+  --actionIconWrapper-height: var(--zd_size26);
+  --actionIconWrapper-width: var(--zd_size26);
   --actionIconWrapper-border: 1px;
   --actionIconWrapper-border_radius: 4px;
 }

package/es/AttachmentBubble/AttachmentBubble.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 *** */
@@ -67,20 +65,21 @@ export default function AttachmentBubble(props) {
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleIcon
-  }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+  }, /*#__PURE__*/React.createElement(AttachmentIcon, {
     fileFormat: fileFormat,
     isDisabled: isDisabled,
     isValidAttachment: isValidAttachment,
-    mediaType: mediaType
-  }, attachmentIconProps))), /*#__PURE__*/React.createElement(Box, {
+    mediaType: mediaType,
+    ...attachmentIconProps
+  })), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleContent,
     flexible: true
-  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
+  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
     fileName: fileName,
-    fileSize: fileSize
-  }, attachmentBubbleInfoProps, {
+    fileSize: fileSize,
+    ...attachmentBubbleInfoProps,
     isFailed: isFailed
-  }))));
+  })));
 }
 AttachmentBubble.propTypes = attachmentBubblePropTypes;
 AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -41,8 +41,7 @@
 }
 
 [dir=rtl] .attachmentBubbleIcon {
-  border-left: 1px solid
-    var(--imlib_chat_components_attachmentBubble_border_color);
+  border-left: 1px solid    var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 .failedAttachmentBubble .attachmentBubbleIcon {

package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --attachmentBubbleInfo-fileName_font_size: 15px;
+  --attachmentBubbleInfo-fileName_font_size: var(--zd_font_size15);
   --attachmentBubbleInfo-fileName_font_family: var(--zd_semibold);
-  --attachmentBubbleInfo-fileSize_font_size: 13px;
+  --attachmentBubbleInfo-fileSize_font_size: var(--zd_font_size13);
 }
 
 .fileName {

package/es/AttachmentHandler/AttachmentHandler.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';
 /** ** Component *** */
@@ -48,15 +46,16 @@ export default function AttachmentHandler(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", _extends({
+  const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
     ref: getRef,
     accept: supportedFileTypes,
     hidden: true,
     multiple: isMultiAttachment,
     onChange: onAttach,
     size: "1",
-    type: "file"
-  }, inputProps)), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
+    type: "file",
+    ...inputProps
+  }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
   const customIcon = useMemo(() => {
     /* Render Custom Icon */
     const icon = renderHandler(renderCustomIcon)({

package/es/AttachmentHandler/css/AttachmentHandler.module.css

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

package/es/AttachmentPreview/AttachmentPreview.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 max-len */
 
 /** ** Libraries *** */
@@ -95,14 +93,15 @@ export default function AttachmentPreview(props) {
     } : {}
   }, /*#__PURE__*/React.createElement("div", {
     className: newStyle.uploadPrev
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, _extends({
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
     cancelText: cancelText,
     fileName: fileName,
     fileSize: fileSize,
     onCancel: onCancel,
     onSubmit: onSubmit,
-    submitText: submitText
-  }, attachmentPreviewHeaderProps))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, _extends({
+    submitText: submitText,
+    ...attachmentPreviewHeaderProps
+  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, {
     attachmentId: attachmentId,
     attachmentURL: attachmentURL,
     description: description,
@@ -113,8 +112,9 @@ export default function AttachmentPreview(props) {
     mediaType: mediaType,
     onDescriptionChange: onDescriptionChange,
     onEditorKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder
-  }, attachmentPreviewBodyProps))))) : null;
+    placeHolder: placeHolder,
+    ...attachmentPreviewBodyProps
+  })))) : null;
 }
 AttachmentPreview.propTypes = attachmentPreviewPropTypes;
 AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.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 *** */
@@ -80,17 +78,19 @@ export default function AttachmentPreviewBody(props) {
     alt: "",
     className: newStyle.imgZoomOut,
     src: attachmentURL
-  }) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+  }) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AttachmentIcon, {
     customStyle: iconCustomStyle,
     fileFormat: fileFormat,
-    mediaType: mediaType
-  }, attachmentIconProps)))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyComposer, _extends({
+    mediaType: mediaType,
+    ...attachmentIconProps
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyComposer, {
     content: description,
     id: `${attachmentId}_Attach_Editor`,
     onChange: onDescriptionChange,
     onKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder
-  }, modifiedEditorProps)) : null);
+    placeHolder: placeHolder,
+    ...modifiedEditorProps
+  }) : null);
 }
 AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;
 AttachmentPreviewBody.defaultProps = attachmentPreviewBodyDefaultProps;

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -22,16 +22,21 @@
   max-height: var(--zd_size48)  !important;
   background-color: transparent !important;
   border: 0 !important;
-  border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
+  border-bottom: 1px solid
+    var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
   padding: 0  !important;
 }
 
 .editableDiv:hover {
-  border-color: var(--zdt_textarea_hover_border) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
+  ) !important;
 }
 
 .editableDiv:focus {
-  border-color: var(--zdt_textarea_focus_border) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
+  ) !important;
 }
 
 .imgContent,
@@ -44,7 +49,6 @@
 .imgContent, .zoomContent {
   background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
   padding: var(--zd_size40);
-  background-color: var(--imlib_chat_components_attachmentPreview_body_bg_color);
 }
 
 [dir=ltr] .imgContent, [dir=ltr] .zoomContent {

package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.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 *** */
@@ -59,7 +57,7 @@ export default function AttachmentPreviewHeader(props) {
     isCover: false
   }, /*#__PURE__*/React.createElement("span", {
     className: newStyle.attachBtn
-  }, /*#__PURE__*/React.createElement(Button, _extends({
+  }, /*#__PURE__*/React.createElement(Button, {
     disabled: false,
     isBold: true,
     onClick: onSubmit,
@@ -67,8 +65,9 @@ export default function AttachmentPreviewHeader(props) {
     rounded: false,
     size: "medium",
     status: "none",
-    text: submitText
-  }, submitButtonProps))), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
+    text: submitText,
+    ...submitButtonProps
+  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
     disabled: false,
     isBold: true,
     onClick: onCancel,
@@ -76,8 +75,9 @@ 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_attachmentPreview_bg_color
+    --imlib_chat_components_attachmentPreviewHeader_bg_color
   );
   padding: var(--zd_size15) var(--zd_size40);
-  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
+  border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
 }
 [dir=ltr] .imgPreviewerheader {
   border-top-left-radius: var(--zd_size5);
@@ -17,7 +17,7 @@
 }
 
 .imgName {
-  color: var(--imlib_chat_components_attachmentPreview_name_color);
+  color: var(--imlib_chat_components_attachmentPreviewHeader_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_attachmentPreview_size_color);
+  color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
   composes: dotted from '../../css/common.module.css';
   max-width: var(--zd_size150);
 }

package/es/AudioBubble/AudioBubble.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 *** */
@@ -39,17 +37,18 @@ export default function AudioBubble(props) {
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
       className: newStyle.audioBubble
-    }, /*#__PURE__*/React.createElement(Audio, _extends({
+    }, /*#__PURE__*/React.createElement(Audio, {
       fileType: fileType,
-      fileURL: fileURL
-    }, audioProps)));
+      fileURL: fileURL,
+      ...audioProps
+    }));
   }, [audioProps, newStyle.audioBubble]);
-  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, {
     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: 32px;
-  --emoji-width: 32px;
-  --emoji-font_size: 20px;
-  --emoji-margin: 5px;
+  --emoji-height: var(--zd_size32);
+  --emoji-width: var(--zd_size32);
+  --emoji-font_size: var(--zd_font_size20);
+  --emoji-margin: var(--zd_size5);
 }
 
 .emoji {

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

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

package/es/EmojisFooter/EmojisFooter.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 max-len */
 
 /** ** Libraries *** */
@@ -55,14 +53,15 @@ export default function EmojisFooter(props) {
       key: id,
       className: newStyle.tabIcon,
       flexible: true
-    }, /*#__PURE__*/React.createElement(Emoji, _extends({
+    }, /*#__PURE__*/React.createElement(Emoji, {
       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_common_border);
+  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
 }
 
 .tabIcon {
@@ -21,7 +21,7 @@
   height: var(--zd_size2) ;
   transition: 0.3s ease;
   width: 100% ;
-  background-color: var(--imlib_chat_components_emoji_tab_line_color);
+  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
 }
 
 [dir=ltr] .tabLine {

package/es/EmojisHeader/EmojisHeader.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 *** */
@@ -46,7 +44,7 @@ export default function EmojisHeader(props) {
     size: "13"
   })), /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, /*#__PURE__*/React.createElement(TextBox, _extends({
+  }, /*#__PURE__*/React.createElement(TextBox, {
     customClass: newStyle.searchInput,
     inputRef: getRef,
     isDisabled: false,
@@ -58,8 +56,9 @@ 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,11 +1,12 @@
 .container {
   padding: var(--zd_size10) ;
-  border-bottom: 1px solid var(--imlib_chat_components_common_border);
+  border-bottom: 1px solid
+    var(--imlib_chat_components_emojisHeader_border_color);
 }
 
 .emojisSearch {
   position: relative;
-  background-color: var(--imlib_chat_components_emoji_popup_search_bg);
+  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
 }
 
 .searchInput {
@@ -24,7 +25,6 @@
 
 .searchIcon {
   position: absolute;
-  color: var(--imlib_chat_components_primary_text);
 }
 
 [dir=ltr] .searchIcon {

package/es/EmojisList/EmojisList.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 max-len */
 
 /** ** Libraries *** */
@@ -91,15 +89,17 @@ 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, _extends({
+      return /*#__PURE__*/React.createElement(Emoji, {
         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) {