@zohoim/chat-components 1.1.3-beta.1 → 1.1.4

package/es/Message/Message.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';
 /** ** Constants *** */
@@ -81,7 +79,9 @@ export default function Message(props) {
         title: name,
         renderIcon: renderOwnerStatusIcon
       };
-      return /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps));
+      return /*#__PURE__*/React.createElement(MessageAvatar, { ...props,
+        ...messageOwnerProps
+      });
     }
 
     return null;
@@ -93,7 +93,9 @@ export default function Message(props) {
       messageStatus: status,
       title: statusTooltip
     };
-    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
+    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, { ...props,
+      ...messageStatusProps
+    }) : null;
   }, [status, statusTooltip, isShowMessageStatus, messageStatusProps]);
   /** ** Render MessageBox *** */
 
@@ -105,7 +107,9 @@ export default function Message(props) {
       isIncoming,
       isOutgoing
     };
-    return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
+    return /*#__PURE__*/React.createElement(MessageBox, { ...props,
+      ...messageBoxProps
+    });
   }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
   /** ** Render Message Actions *** */
 
@@ -117,9 +121,11 @@ export default function Message(props) {
       onMouseEnter: onMouseEnterAction,
       setRetainMessageActions
     };
-    return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
+    return /*#__PURE__*/React.createElement(MessageActions, { ...props,
+      ...messageActionsProps
+    });
   }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps, setRetainMessageActions]);
-  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
+  return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
@@ -127,8 +133,9 @@ 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,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';
 /** ** Components *** */
@@ -34,12 +32,13 @@ export default function MessageAction(props) {
     let {
       id
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, _extends({
+    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, {
       id: id,
-      needIconOnly: true
-    }, actionIconProps)) : null;
+      needIconOnly: true,
+      ...actionIconProps
+    }) : null;
   }, [actionIconProps, needMoreActionItemIcon]);
-  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, _extends({
+  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
     closePopup: closePopup,
     displayText: displayText,
     id: id,
@@ -48,15 +47,17 @@ export default function MessageAction(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
-    title: iconTitle
-  }, moreActionItemProps)) : /*#__PURE__*/React.createElement(ActionIcon, _extends({
+    title: iconTitle,
+    ...moreActionItemProps
+  }) : /*#__PURE__*/React.createElement(ActionIcon, {
     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,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, Fragment } from 'react';
 /** ** Components *** */
@@ -31,7 +29,8 @@ export default function MessageActions(props) {
     setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
-    customProps
+    customProps,
+    moreTitle
   } = props;
   const {
     messageActionProps = dummyObject,
@@ -75,7 +74,7 @@ export default function MessageActions(props) {
       iconTitle,
       isDisabled
     } = action || dummyObject;
-    return /*#__PURE__*/React.createElement(MessageAction, _extends({
+    return /*#__PURE__*/React.createElement(MessageAction, {
       key: id,
       closePopup: closePopup,
       displayText: displayText,
@@ -84,8 +83,9 @@ export default function MessageActions(props) {
       isDisabled: isDisabled,
       isShowInMore: isShowInMore,
       onClick: handleClickAction,
-      onMouseEnter: handleMouseEnterAction
-    }, messageActionProps));
+      onMouseEnter: handleMouseEnterAction,
+      ...messageActionProps
+    });
   }, [handleClickAction, handleMouseEnterAction, messageActionProps]);
   /* Hooks handling */
 
@@ -105,15 +105,19 @@ 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, _extends({
-    renderIcon: renderMoreIcon
-  }, componentProps, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
+  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
+    renderIcon: renderMoreIcon,
+    title: moreTitle,
+    ...componentProps,
+    ...actionIconWrapperProps
+  }), [actionIconWrapperProps, renderMoreIcon, moreTitle]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
     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/MessageActions/props/propTypes.js

@@ -21,6 +21,7 @@ const messageActionsPropTypes = {
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
   renderSecondaryActions: PropTypes.func,
-  setRetainMessageActions: PropTypes.func
+  setRetainMessageActions: PropTypes.func,
+  moreTitle: PropTypes.string
 };
 export default messageActionsPropTypes;

package/es/MessageActionsWrapper/MessageActionsWrapper.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';
 /** ** Components *** */
@@ -53,11 +51,12 @@ export default function MessageActionsWrapper(props) {
       action
     }); // id, isRenderInMorePopup
   }), [defaultActions, setRetainMessageActions]);
-  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, _extends({
+  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
     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: 14px;
-  --messageBox-content_size: 14px;
+  --messageBox-content_padding: var(--zd_size14);
+  --messageBox-content_size: var(--zd_font_size14);
   --messageBox-border_radius: 9px;
-  --messageBox-message_status_gap: 12px;
-  --messageBox-message_header_gap: 1px;
-  --messageBox-message_footer_gap: 1px;
+  --messageBox-message_status_gap: var(--zd_size12);
+  --messageBox-message_header_gap: var(--zd_size1);
+  --messageBox-message_footer_gap: var(--zd_size1);
 }
 
 .messageBoxContainer {

package/es/MessageBubble/MessageBubble.js

@@ -20,6 +20,7 @@ import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from "./css/MessageBubble.module.css";
+import generateUniqueId from '@zohoim/chat-components-utils/es/common/generateUniqueId';
 export default function MessageBubble(props) {
   const {
     renderMessageBox,
@@ -39,7 +40,9 @@ export default function MessageBubble(props) {
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageActions
+    isRenderMessageActions,
+    onFocus,
+    onBlur
   } = useMessageBubbleAction(props);
   /* css classnames added based on logic */
 
@@ -67,7 +70,9 @@ export default function MessageBubble(props) {
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
     return messageActions ? /*#__PURE__*/React.createElement(Box, {
-      className: messageActionWrapperClass
+      className: messageActionWrapperClass,
+      role: "button",
+      tabIndex: "0"
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
   /* Message Box Render */
@@ -84,12 +89,16 @@ export default function MessageBubble(props) {
 
   const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
   const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
+  const uniqueId = generateUniqueId();
   const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageContainer
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageBoxWrapper,
     flexible: true
-  }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
+  }, messageBox, /*#__PURE__*/React.createElement("div", {
+    id: uniqueId,
+    role: "menu"
+  }, messageActions))) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {
@@ -106,9 +115,16 @@ export default function MessageBubble(props) {
   /* Construct Layout */
 
   const messageLayout = /*#__PURE__*/React.createElement("div", {
+    "aria-controls": uniqueId,
+    "aria-expanded": isRenderMessageActions ? 'true' : 'false',
+    "aria-haspopup": "true",
     className: bubbleClass,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    role: "button",
+    tabIndex: 0
   }, messageSender, messageBoxWithActions, messageFooter);
   return messageLayout;
 }

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

@@ -1,9 +1,9 @@
 .varClass {
-  --messageBubble-bubble_footer_gap: 5px;
+  --messageBubble-bubble_footer_gap: var(--zd_size5);
   --messageBubble-message_owner_gap: 13px;
   --messageBox-max_width: 410px;
-  --messageBox-footer_fontSize: 11px;
-  --messageBox-owner_width: 32px;
+  --messageBox-footer_fontSize: var(--zd_font_size11);
+  --messageBox-owner_width: var(--zd_size32);
 }
 
 .messageBubble {

package/es/MoreActionItem/MoreActionItem.js

@@ -50,6 +50,10 @@ export default function MoreActionItem(props) {
     id
   });
   return /*#__PURE__*/React.createElement(ListContainer, {
+    a11y: {
+      'data-a11y-focus': true,
+      'data-a11y-click': true
+    },
     autoHover: true,
     customClass: newStyle.listItem,
     disableTitle: title,

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --moreActionItem-content_padding: 10px;
-  --moreActionItem-content_size: 14px;
+  --moreActionItem-content_padding: var(--zd_size10);
+  --moreActionItem-content_size: var(--zd_font_size14);
 }
 
 .listItem {

package/es/ReplyBubble/ReplyBubble.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, useCallback } from 'react';
 /** ** Hooks *** */
@@ -91,27 +89,30 @@ export default function ReplyBubble(props) {
     }
 
     if (fileFormat) {
-      return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+      return /*#__PURE__*/React.createElement(AttachmentIcon, {
         customStyle: iconStyle,
         fileFormat: fileFormat,
         isValidAttachment: isValidAttachment,
-        mediaType: mediaType
-      }, iconProps));
+        mediaType: mediaType,
+        ...iconProps
+      });
     }
 
     return null;
   }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, {
     dateTimeDetails: dateTimeDetails,
     isFailed: isFailed,
-    replyText: replyText
-  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
+    replyText: replyText,
+    ...headerProps
+  }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
     isFailed: isFailed,
     onClick: onClick,
     renderIcon: renderIcon,
     renderMessage: renderMessage,
-    senderName: senderName
-  }, contentProps)));
+    senderName: senderName,
+    ...contentProps
+  }));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;
 ReplyBubble.defaultProps = replyBubbleDefaultProps;

package/es/TextBubble/TextBubble.js

@@ -39,9 +39,12 @@ export default function TextBubble(props) {
       // __html: HTMLPurifier.sanitize(message)
       __html: message
     }
-  }), moreText ? /*#__PURE__*/React.createElement("div", {
+  }), moreText ? /*#__PURE__*/React.createElement("button", {
     className: moreTextClass,
-    onClick: onClickMore
+    "data-a11y-click": "true",
+    "data-a11y-focus": "true",
+    onClick: onClickMore,
+    tabIndex: "0"
   }, moreText) : null);
 }
 TextBubble.propTypes = textBubblePropTypes;

package/es/TextBubble/css/TextBubble.module.css

@@ -9,6 +9,7 @@
 
 .moreText {
   color: var(--imlib_chat_components_textBubble_see_more_color);
+  composes: buttonReset from '~@zohodesk/components/es/semantic/Button/semanticButton.module.css';
   cursor: pointer;
 }
 

package/es/Theme/ThemeWrapper.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, useCallback } from 'react';
 /** ** Providers *** */
@@ -88,14 +86,14 @@ export default function ThemeWrapper(props) {
       mode: propMode,
       direction
     }
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    id: styleTagId
-  }, wrapperDivProps, {
+  }, /*#__PURE__*/React.createElement("div", {
+    id: styleTagId,
+    ...wrapperDivProps,
     style: {
       width: '100%',
       height: '100%'
     }
-  }), renderStyle(), /*#__PURE__*/React.createElement(Container, {
+  }, renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
   }, children), renderPortal(), renderAssets()));
 }

package/es/Theme/TooltipWrapper.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** ** Libraries *** */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -75,9 +73,10 @@ export default function TooltipWrapper(props) {
   const newStyle = useMergeStyle(style, customStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: newStyle.tooltipWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    ref: tooltipRef
-  }, props)));
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tooltipRef,
+    ...props
+  }));
 }
 TooltipWrapper.propTypes = {
   customStyle: PropTypes.object,

package/es/VideoBubble/VideoBubble.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
 /** ** Hooks *** */
@@ -49,17 +47,18 @@ export default function VideoBubble(props) {
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
       className: videoBubbleClass
-    }, /*#__PURE__*/React.createElement(Video, _extends({
+    }, /*#__PURE__*/React.createElement(Video, {
       fileType: fileType,
-      fileURL: fileURL
-    }, videoProps)));
+      fileURL: fileURL,
+      ...videoProps
+    }));
   }, [videoProps, videoBubbleClass]);
-  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, {
     mediaDetails: videoDetails,
-    renderMedia: renderMedia
-  }, mediaBubbleWrapperProps, {
+    renderMedia: renderMedia,
+    ...mediaBubbleWrapperProps,
     isFailed: isFailed
-  }));
+  });
 }
 VideoBubble.propTypes = videoBubblePropTypes;
 VideoBubble.defaultProps = videoBubbleDefaultProps;

package/es/icons/iconSrc/attachments/Audio.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Code.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Image.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Pdf.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Ppt.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30.52 30.27"

package/es/icons/iconSrc/attachments/Text.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Txt.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Unknown.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Video.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/attachments/Xls.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 30 30.27"

package/es/icons/iconSrc/attachments/Zip.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
     xmlns: "http://www.w3.org/2000/svg",

package/es/icons/iconSrc/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", {