@zohoim/chat-components 0.0.11 → 0.0.14

package/es/ActionIcon/ActionIcon.js

@@ -1,56 +1,78 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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 React, { useCallback, useMemo } from 'react';
+/** ** Components *** */
 
+import ActionIconWrapper from '../ActionIconWrapper/ActionIconWrapper';
+/** ** Icons *** */
+
+import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+import ReloadIcon from '@zohodesk/icon/es/general/Reload';
+import CopyIcon from '@zohodesk/icon/es/general/Copy';
+import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
+import DeleteIcon from '@zohodesk/icon/es/general/Delete';
+import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useActionIcon from '@zohoim/chat-components-hooks/es/ActionIcon/useActionIcon';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import actionIconDefaultProps from './props/defaultProps';
 import actionIconPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 /** ** Styles *** */
+
 import style from './css/ActionIcon.module.css';
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
 export default function ActionIcon(props) {
   const {
-    renderIcon: propRenderIcon,
     customStyle,
-    onClick: propOnClick,
+    customProps,
+    onClick,
     id,
-    title
+    title,
+    isDisabled,
+    needIconOnly
   } = props;
   const {
-    onClick,
-    renderIcon
-  } = useActionIcon({
-    renderIcon: propRenderIcon,
-    onClick: propOnClick,
-    id
-  });
-
+    actionIconWrapperProps = dummyObject
+  } = customProps;
   /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
 
-  /* CSS classnames added based on logic */
-  const {
-    actionIconClass
-  } = cssJSLogic(props, newStyle);
-
-  /* Render Icon */
-  const icon = renderIcon({
-    id
-  });
-  return icon ? /*#__PURE__*/React.createElement("div", {
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.icon
+  }), [newStyle.icon]);
+  const renderIcon = useCallback(() => {
+    const iconMapping = {
+      [REPLY]: ReplyIcon,
+      [COPY]: CopyIcon,
+      [DOWNLOAD]: DownloadIcon,
+      [RESEND]: ReloadIcon,
+      [DELETE]: DeleteIcon,
+      [FORWARD]: ForwardIcon
+    };
+    const IconComponent = iconMapping[id];
+    return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+      customStyle: iconStyle
+    }) : null;
+  }, [iconStyle, id]);
+  return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, _extends({
+    id: id,
+    isDisabled: isDisabled,
     onClick: onClick,
-    className: actionIconClass,
-    "data-title": title
-  }, icon) : null;
+    renderIcon: renderIcon,
+    title: title
+  }, actionIconWrapperProps));
 }
 ActionIcon.propTypes = actionIconPropTypes;
 ActionIcon.defaultProps = actionIconDefaultProps;

package/es/ActionIcon/css/ActionIcon.module.css

@@ -1,28 +1,9 @@
 .varClass {
-  --actionIcon-height: var(--imlib_size_26);
-  --actionIcon-width: var(--imlib_size_26);
-  --actionIcon-border: var(--imlib_size_1);
-  --actionIcon-border_radius: var(--imlib_size_4);
+  --actionIcon_icon_size: var(--zd_size15);
 }
 
-.actionIcon {
+.icon {
   composes: varClass;
-
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  color: var(--imlib_chat_components_actionIcon_color);
-  position: relative;
-  width: var(--actionIcon-width);
-  height: var(--actionIcon-height);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border: var(--actionIcon-border) solid transparent;
-  border-radius: var(--actionIcon-border_radius);
-}
-
-.actionIcon:hover {
-  background-color: var(--imlib_chat_components_actionIcon_bg_color);
-  border-color: var(--imlib_chat_components_actionIcon_border_color);
+  width: var(--actionIcon_icon_size);
+  height: var(--actionIcon_icon_size);
 }

package/es/ActionIcon/props/defaultProps.js

@@ -1,6 +1,8 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const actionIconDefaultProps = {
-  customStyle: dummyObject
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  needIconOnly: false
 };
 export default actionIconDefaultProps;

package/es/ActionIcon/props/propTypes.js

@@ -1,10 +1,17 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 const actionIconPropTypes = {
+  id: PropTypes.oneOf(Object.values(defaultMessageActions)).isRequired,
+  onClick: PropTypes.func.isRequired,
+  customProps: PropTypes.shape({
+    actionIconWrapperProps: PropTypes.object
+  }),
   customStyle: PropTypes.object,
-  renderIcon: PropTypes.func.isRequired,
-  onClick: PropTypes.func,
-  id: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  needIconOnly: PropTypes.bool,
   title: PropTypes.string
 };
 export default actionIconPropTypes;

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -0,0 +1,49 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useActionIconWrapper from '@zohoim/chat-components-hooks/es/ActionIconWrapper/useActionIconWrapper';
+/** ** Constants *** */
+
+import actionIconWrapperDefaultProps from './props/defaultProps';
+import actionIconWrapperPropTypes from './props/propTypes';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from './css/ActionIconWrapper.module.css';
+export default function ActionIconWrapper(props) {
+  const {
+    renderIcon,
+    customStyle,
+    onClick: propOnClick,
+    id,
+    title,
+    isDisabled
+  } = props;
+  const {
+    onClick
+  } = useActionIconWrapper({
+    onClick: propOnClick,
+    id,
+    isDisabled
+  });
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* Render Icon */
+
+  const icon = renderHandler(renderIcon)({
+    id
+  });
+  return icon ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.actionIconWrapper,
+    "data-title": title,
+    onClick: onClick
+  }, icon) : null;
+}
+ActionIconWrapper.propTypes = actionIconWrapperPropTypes;
+ActionIconWrapper.defaultProps = actionIconWrapperDefaultProps;
+ActionIconWrapper.displayName = 'ActionIconWrapper';

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

@@ -0,0 +1,27 @@
+.varClass {
+  --actionIconWrapper-height: var(--zd_size26);
+  --actionIconWrapper-width: var(--zd_size26);
+  --actionIconWrapper-border: 1px;
+  --actionIconWrapper-border_radius: 4px;
+}
+
+.actionIconWrapper {
+  composes: varClass;
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  color: var(--imlib_chat_components_actionIconWrapper_color);
+  position: relative;
+  width: var(--actionIconWrapper-width);
+  height: var(--actionIconWrapper-height);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: var(--actionIconWrapper-border) solid transparent;
+  border-radius: var(--actionIconWrapper-border_radius);
+}
+
+.actionIconWrapper:hover {
+  background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
+  border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
+}

package/es/ActionIconWrapper/index.js

@@ -0,0 +1 @@
+export { default as ActionIconWrapper } from './ActionIconWrapper';

package/es/{MessageWrapper → ActionIconWrapper}/props/defaultProps.js

@@ -1,6 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-const messageWrapperDefaultProps = {
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const actionIconWrapperDefaultProps = {
   customStyle: dummyObject
 };
-export default messageWrapperDefaultProps;
+export default actionIconWrapperDefaultProps;

package/es/ActionIconWrapper/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const actionIconWrapperPropTypes = {
+  id: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  renderIcon: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
+  isDisabled: PropTypes.bool,
+  title: PropTypes.string
+};
+export default actionIconWrapperPropTypes;

package/es/AttachmentBubble/AttachmentBubble.js

@@ -1,56 +1,58 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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 React from 'react';
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentBubble from '@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble';
 /** ** Constants *** */
-import attachmentBubbleDefaultProps from "./props/defaultProps";
-import attachmentBubblePropTypes from "./props/propTypes";
-
-/** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
 
+import attachmentBubbleDefaultProps from './props/defaultProps';
+import attachmentBubblePropTypes from './props/propTypes';
 /** ** Styles *** */
-import style from "./css/AttachmentBubble.module.css";
-import AttachmentBubbleInfo from "../AttachmentBubbleInfo/AttachmentBubbleInfo";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+
+import style from './css/AttachmentBubble.module.css';
+/** ** Components *** */
+
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 export default function AttachmentBubble(props) {
   const {
     customStyle,
-    renderFileTypeIcon,
-    fileName,
-    fileSize,
-    bubbleInfoCustomStyle
+    customProps,
+    attachmentDetails
   } = props;
+  const {
+    attachmentBubbleInfoProps,
+    attachmentIconProps
+  } = customProps;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
   const {
-    attachmentBubbleClass,
-    attachmentBubbleIconClass,
-    attachmentBubbleContentClass
-  } = cssJSLogic(props, newStyle);
-  const fileIcon = renderHandler(renderFileTypeIcon)();
+    formattedFileSize: fileSize,
+    fileName,
+    fileFormat
+  } = useAttachmentBubble({
+    attachmentDetails
+  });
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
-    className: attachmentBubbleClass
+    className: newStyle.attachmentBubble
   }, /*#__PURE__*/React.createElement("div", {
-    className: attachmentBubbleIconClass
-  }, fileIcon), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: attachmentBubbleContentClass
-  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
-    customStyle: bubbleInfoCustomStyle,
+    className: newStyle.attachmentBubbleIcon
+  }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+    fileFormat: fileFormat
+  }, attachmentIconProps))), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.attachmentBubbleContent,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
     fileName: fileName,
     fileSize: fileSize
-  })));
+  }, attachmentBubbleInfoProps))));
 }
 AttachmentBubble.propTypes = attachmentBubblePropTypes;
 AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;
-AttachmentBubble.displayName = "AttachmentBubble";
+AttachmentBubble.displayName = 'AttachmentBubble';

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

@@ -1,24 +1,25 @@
 .attachmentBubble {
-    background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
-    border-radius: 3px;
-    border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+  background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
-.attachmentBubbleIcon{
-    width: var(--imlib_size_60);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.attachmentBubbleIcon {
+  width: var(--zd_size60) ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-[dir=ltr] .attachmentBubbleIcon{
-    border-right: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+[dir=ltr] .attachmentBubbleIcon {
+  border-right: 1px solid
+    var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
-[dir=rtl] .attachmentBubbleIcon{
-    border-left: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+[dir=rtl] .attachmentBubbleIcon {
+  border-left: 1px solid    var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
-.attachmentBubbleIcon, .attachmentBubbleContent{
-    padding: var(--imlib_size_10);
-}
+.attachmentBubbleIcon, .attachmentBubbleContent {
+  padding: var(--zd_size10) ;
+}

package/es/AttachmentBubble/props/defaultProps.js

@@ -1,7 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const attachmentBubbleDefaultProps = {
   customStyle: dummyObject,
-  bubbleInfoCustomStyle: dummyObject
+  customProps: dummyObject
 };
 export default attachmentBubbleDefaultProps;

package/es/AttachmentBubble/props/propTypes.js

@@ -1,10 +1,15 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const attachmentBubblePropTypes = {
-  customStyle: PropTypes.object,
-  bubbleInfoCustomStyle: PropTypes.object,
-  renderFileTypeIcon: PropTypes.func,
-  fileName: PropTypes.string,
-  fileSize: PropTypes.string
+  attachmentDetails: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired
+  }).isRequired,
+  customProps: PropTypes.shape({
+    attachmentBubbleInfoProps: PropTypes.object,
+    attachmentIconProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object
 };
 export default attachmentBubblePropTypes;

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -1,21 +1,14 @@
-/* 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 attachmentBubbleInfoDefaultProps from './props/defaultProps';
 import attachmentBubbleInfoPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/AttachmentBubbleInfo.module.css';
 export default function AttachmentBubbleInfo(props) {
   const {
@@ -23,21 +16,15 @@ export default function AttachmentBubbleInfo(props) {
     fileName,
     fileSize
   } = props;
+  /* External css customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    attachmentBubbleInfoClass,
-    fileNameClass,
-    fileSizeClass
-  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("div", {
-    className: attachmentBubbleInfoClass
+    className: newStyle.attachmentBubbleInfo
   }, /*#__PURE__*/React.createElement("div", {
-    className: fileNameClass
+    className: newStyle.fileName
   }, fileName), /*#__PURE__*/React.createElement("div", {
-    className: fileSizeClass
+    className: newStyle.fileSize
   }, fileSize));
 }
 AttachmentBubbleInfo.propTypes = attachmentBubbleInfoPropTypes;

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

@@ -1,25 +1,30 @@
-.varClass{
-    --attachmentBubbleInfo-fileName_font_size: var(--imlib_size_15);
-    --attachmentBubbleInfo-fileName_font_family: var(--zd_semibold);
-    --attachmentBubbleInfo-fileSize_font_size: var(--imlib_size_13);
+.varClass {
+  --attachmentBubbleInfo-fileName_font_size: var(--zd_font_size15);
+  --attachmentBubbleInfo-fileName_font_family: var(--zd_semibold);
+  --attachmentBubbleInfo-fileSize_font_size: var(--zd_font_size13);
 }
 
 .fileName {
-    composes: varClass;
-    font-size: var(--attachmentBubbleInfo-fileName_font_size);
-    font-family: var(--attachmentBubbleInfo-fileName_font_family);
-    color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color);
-    margin-bottom: var(--imlib_size_5);
+  composes: varClass;
+  font-size: var(--attachmentBubbleInfo-fileName_font_size);
+  font-family: var(--attachmentBubbleInfo-fileName_font_family);
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color);
+  margin-bottom: var(--zd_size5) ;
 }
 
 .fileSize {
-    font-size: var(--attachmentBubbleInfo-fileSize_font_size);
-    color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
+  composes: varClass;
+  font-size: var(--attachmentBubbleInfo-fileSize_font_size);
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
 }
 
 .fileName,
-.fileSize{
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.fileSize {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.attachmentBubbleInfo {
+  /* Use this class name for css customization */
 }

package/es/AttachmentBubbleInfo/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';
 const attachmentBubbleInfoDefaultProps = {
   customStyle: dummyObject
 };

package/es/AttachmentBubbleInfo/props/propTypes.js

@@ -1,8 +1,8 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const attachmentBubbleInfoPropTypes = {
-  customStyle: PropTypes.object,
-  fileName: PropTypes.string,
-  fileSize: PropTypes.string
+  fileName: PropTypes.string.isRequired,
+  fileSize: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
 };
 export default attachmentBubbleInfoPropTypes;

package/es/AttachmentIcon/AttachmentIcon.js

@@ -0,0 +1,47 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import attachmentIconDefaultProps from './props/defaultProps';
+import attachmentIconPropTypes from './props/propTypes';
+/** ** Methods *** */
+
+import getAttachmentIconComponent from './utils/getAttachmentIconComponent';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from './css/AttachmentIcon.module.css';
+export default function AttachmentIcon(props) {
+  const {
+    customStyle,
+    fileFormat,
+    renderCustomIcon
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconCustomStyle = useMemo(() => ({
+    base: newStyle.icon
+  }), [newStyle.icon]);
+  /* Custom Icon Renderer */
+
+  if (renderCustomIcon) {
+    const fileIcon = renderHandler(renderCustomIcon)();
+    return fileIcon;
+  }
+
+  const {
+    IconComponent
+  } = getAttachmentIconComponent({
+    fileFormat
+  });
+  return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    customStyle: iconCustomStyle
+  }) : null;
+}
+AttachmentIcon.propTypes = attachmentIconPropTypes;
+AttachmentIcon.defaultProps = attachmentIconDefaultProps;
+AttachmentIcon.displayName = 'AttachmentIcon';

package/es/AttachmentIcon/css/AttachmentIcon.module.css

@@ -0,0 +1,4 @@
+.icon {
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}

package/es/AttachmentIcon/index.js

@@ -0,0 +1 @@
+export { default as AttachmentIcon } from './AttachmentIcon';

package/es/{MediaControls → AttachmentIcon}/props/defaultProps.js

@@ -1,6 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-const mediaControlsDefaultProps = {
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const attachmentIconDefaultProps = {
   customStyle: dummyObject
 };
-export default mediaControlsDefaultProps;
+export default attachmentIconDefaultProps;

package/es/AttachmentIcon/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const attachmentIconPropTypes = {
+  fileFormat: PropTypes.oneOf(Object.values(attachmentFileTypes)).isRequired,
+  customStyle: PropTypes.object,
+  renderCustomIcon: PropTypes.func
+};
+export default attachmentIconPropTypes;