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

package/lib/AttachmentPreview/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var attachmentPreviewDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  needCloseOnEscape: true,
+  needUploadOnEnter: true,
+  needAutoZindex: true
+};
+var _default = attachmentPreviewDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentPreview/props/propTypes.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var attachmentPreviewPropTypes = {
+  customStyle: _propTypes["default"].object,
+  isDescriptionNeeded: _propTypes["default"].bool,
+  files: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string,
+    size: _propTypes["default"].string,
+    type: _propTypes["default"].string,
+    url: _propTypes["default"].string
+  })).isRequired,
+  customProps: _propTypes["default"].shape({
+    attachmentIconProps: _propTypes["default"].object,
+    cancelButtonProps: _propTypes["default"].object,
+    editorProps: _propTypes["default"].object,
+    submitButtonProps: _propTypes["default"].object
+  }),
+  onSubmit: _propTypes["default"].func,
+  onCancel: _propTypes["default"].func,
+  texts: _propTypes["default"].shape({
+    cancelText: _propTypes["default"].string,
+    editText: _propTypes["default"].string,
+    placeHolder: _propTypes["default"].string,
+    submitText: _propTypes["default"].string
+  }).isRequired,
+  descriptionDetails: _propTypes["default"].object,
+  onDescriptionChange: _propTypes["default"].func,
+  needCloseOnEscape: _propTypes["default"].bool,
+  needUploadOnEnter: _propTypes["default"].bool,
+  needAutoZindex: _propTypes["default"].bool
+};
+var _default = attachmentPreviewPropTypes;
+exports["default"] = _default;

package/lib/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -0,0 +1,120 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AttachmentPreviewBody;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _ReplyComposer = _interopRequireDefault(require("../im/ReplyComposer/ReplyComposer"));
+
+var _AttachmentIcon = _interopRequireDefault(require("../AttachmentIcon/AttachmentIcon"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _AttachmentPreviewBodyModule = _interopRequireDefault(require("./css/AttachmentPreviewBody.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function AttachmentPreviewBody(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      isImageFile = props.isImageFile,
+      attachmentURL = props.attachmentURL,
+      fileFormat = props.fileFormat,
+      mediaType = props.mediaType,
+      isDescriptionNeeded = props.isDescriptionNeeded,
+      description = props.description,
+      attachmentId = props.attachmentId,
+      onDescriptionChange = props.onDescriptionChange,
+      onEditorKeyDown = props.onEditorKeyDown,
+      placeHolder = props.placeHolder,
+      editorProps = props.editorProps;
+
+  var _ref = customProps || {},
+      _ref$attachmentIconPr = _ref.attachmentIconProps,
+      attachmentIconProps = _ref$attachmentIconPr === void 0 ? _emptyConstants.dummyObject : _ref$attachmentIconPr;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentPreviewBodyModule["default"], customStyle);
+  var iconCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      icon: newStyle.attachmentIcon
+    };
+  }, [newStyle.attachmentIcon]);
+  var modifiedEditorProps = (0, _react.useMemo)(function () {
+    var _ref2 = editorProps || _emptyConstants.dummyObject,
+        customProps = _ref2.customProps,
+        replyComposerCustomStyle = _ref2.customStyle;
+
+    var _ref3 = customProps || _emptyConstants.dummyObject,
+        replyEditorProps = _ref3.replyEditorProps;
+
+    var _ref4 = replyEditorProps || _emptyConstants.dummyObject,
+        _ref4$customStyle = _ref4.customStyle,
+        customStyle = _ref4$customStyle === void 0 ? _emptyConstants.dummyObject : _ref4$customStyle;
+
+    return _objectSpread(_objectSpread({}, editorProps), {}, {
+      customStyle: _objectSpread({
+        replyComposer: newStyle.replyComposer
+      }, replyComposerCustomStyle),
+      customProps: _objectSpread(_objectSpread({}, customProps), {}, {
+        replyEditorProps: _objectSpread(_objectSpread({}, replyEditorProps), {}, {
+          customStyle: _objectSpread({
+            editorWrapper: newStyle.editorWrapper,
+            editableDiv: newStyle.editableDiv
+          }, customStyle)
+        })
+      })
+    });
+  }, [editorProps, newStyle.replyComposer, newStyle.editorWrapper, newStyle.editableDiv]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    alignBox: "column",
+    className: "".concat(newStyle.zoomContent, " ").concat(newStyle.imgContent)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.fileContainer
+  }, isImageFile ? /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "",
+    className: newStyle.imgZoomOut,
+    src: attachmentURL
+  }) : /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_AttachmentIcon["default"], _extends({
+    customStyle: iconCustomStyle,
+    fileFormat: fileFormat,
+    mediaType: mediaType
+  }, attachmentIconProps)))), isDescriptionNeeded ? /*#__PURE__*/_react["default"].createElement(_ReplyComposer["default"], _extends({
+    content: description,
+    id: "".concat(attachmentId, "_Attach_Editor"),
+    onChange: onDescriptionChange,
+    onKeyDown: onEditorKeyDown,
+    placeHolder: placeHolder
+  }, modifiedEditorProps)) : null);
+}
+
+AttachmentPreviewBody.propTypes = _propTypes["default"];
+AttachmentPreviewBody.defaultProps = _defaultProps["default"];
+AttachmentPreviewBody.displayName = 'AttachmentPreviewBody';

package/lib/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -0,0 +1,71 @@
+/** ** Styles *** */
+.attachmentIcon {
+  width: var(--zd_size60)  !important;
+  height: var(--zd_size60)  !important;
+}
+
+.replyComposer {
+  width: 100% ;
+}
+
+.editorWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100% ;
+  width: 100% ;
+  padding: 0 ;
+  margin-top: var(--zd_size40) ;
+}
+
+.editableDiv {
+  min-height: var(--zd_size48)  !important;
+  max-height: var(--zd_size48)  !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
+  padding: 0  !important;
+}
+
+.editableDiv:hover {
+  border-color: var(--zdt_textarea_hover_border) !important;
+}
+
+.editableDiv:focus {
+  border-color: var(--zdt_textarea_focus_border) !important;
+}
+
+.imgContent,
+.zoomContent {
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.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 {
+  border-bottom-left-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=rtl] .imgContent, [dir=rtl] .zoomContent {
+  border-bottom-right-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+.fileContainer {
+  height: var(--zd_size225);
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.imgZoomOut {
+  width: auto ;
+  max-width: 100% ;
+  max-height: 100% ;
+}

package/lib/AttachmentPreviewBody/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AttachmentPreviewBody", {
+  enumerable: true,
+  get: function get() {
+    return _AttachmentPreviewBody["default"];
+  }
+});
+
+var _AttachmentPreviewBody = _interopRequireDefault(require("./AttachmentPreviewBody"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/AttachmentPreviewBody/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+/** ** Constants *** */
+var attachmentPreviewBodyDefaultProps = {
+  customStyle: _constants.dummyObject,
+  customProps: _constants.dummyObject
+};
+var _default = attachmentPreviewBodyDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentPreviewBody/props/propTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var attachmentPreviewBodyPropTypes = {
+  customStyle: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    attachmentIconProps: _propTypes["default"].object
+  }),
+  isImageFile: _propTypes["default"].bool,
+  attachmentURL: _propTypes["default"].string,
+  fileFormat: _propTypes["default"].string,
+  mediaType: _propTypes["default"].string,
+  isDescriptionNeeded: _propTypes["default"].bool,
+  description: _propTypes["default"].string,
+  attachmentId: _propTypes["default"].string,
+  onDescriptionChange: _propTypes["default"].func,
+  onEditorKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  editorProps: _propTypes["default"].object
+};
+var _default = attachmentPreviewBodyPropTypes;
+exports["default"] = _default;

package/lib/AttachmentPreviewHeader/AttachmentPreviewHeader.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AttachmentPreviewHeader;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _AttachmentPreviewHeaderModule = _interopRequireDefault(require("./css/AttachmentPreviewHeader.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function AttachmentPreviewHeader(props) {
+  var customStyle = props.customStyle,
+      fileName = props.fileName,
+      fileSize = props.fileSize,
+      submitText = props.submitText,
+      cancelText = props.cancelText,
+      onSubmit = props.onSubmit,
+      onCancel = props.onCancel,
+      customProps = props.customProps;
+
+  var _ref = customProps || {},
+      _ref$submitButtonProp = _ref.submitButtonProps,
+      submitButtonProps = _ref$submitButtonProp === void 0 ? _emptyConstants.dummyObject : _ref$submitButtonProp,
+      _ref$cancelButtonProp = _ref.cancelButtonProps,
+      cancelButtonProps = _ref$cancelButtonProp === void 0 ? _emptyConstants.dummyObject : _ref$cancelButtonProp;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AttachmentPreviewHeaderModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.imgPreviewerheader,
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.imgName,
+    title: fileName
+  }, fileName), /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.imgSize
+  }, fileSize)))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.navIcon,
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.attachBtn
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    disabled: false,
+    isBold: true,
+    onClick: onSubmit,
+    palette: "primaryFilled",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: submitText
+  }, submitButtonProps))), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    disabled: false,
+    isBold: true,
+    onClick: onCancel,
+    palette: "secondary",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: cancelText
+  }, cancelButtonProps))))));
+}
+
+AttachmentPreviewHeader.propTypes = _propTypes["default"];
+AttachmentPreviewHeader.defaultProps = _defaultProps["default"];
+AttachmentPreviewHeader.displayName = 'AttachmentPreviewHeader';

package/lib/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -0,0 +1,47 @@
+/** ** Styles *** */
+.imgPreviewerheader {
+  position: relative;
+  background-color: var(
+    --imlib_chat_components_attachmentPreview_bg_color
+  );
+  padding: var(--zd_size15) var(--zd_size40);
+  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
+}
+[dir=ltr] .imgPreviewerheader {
+  border-top-left-radius: var(--zd_size5);
+  border-top-right-radius: var(--zd_size5);
+}
+[dir=rtl] .imgPreviewerheader {
+  border-top-right-radius: var(--zd_size5);
+  border-top-left-radius: var(--zd_size5);
+}
+
+.imgName {
+  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';
+  max-width: 100% ;
+  margin-bottom: var(--zd_size5);
+}
+
+.imgSize {
+  font-size: var(--zd_font_size13);
+  color: var(--imlib_chat_components_attachmentPreview_size_color);
+  composes: dotted from '../../css/common.module.css';
+  max-width: var(--zd_size150);
+}
+
+.navIcon {
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+}
+
+[dir=ltr] .attachBtn {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .attachBtn {
+  margin-left: var(--zd_size10);
+}

package/lib/AttachmentPreviewHeader/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AttachmentPreviewHeader", {
+  enumerable: true,
+  get: function get() {
+    return _AttachmentPreviewHeader["default"];
+  }
+});
+
+var _AttachmentPreviewHeader = _interopRequireDefault(require("./AttachmentPreviewHeader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/AttachmentPreviewHeader/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+/** ** Constants *** */
+var attachmentPreviewHeaderDefaultProps = {
+  customStyle: _constants.dummyObject,
+  customProps: _constants.dummyObject
+};
+var _default = attachmentPreviewHeaderDefaultProps;
+exports["default"] = _default;

package/lib/AttachmentPreviewHeader/props/propTypes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var attachmentPreviewHeaderPropTypes = {
+  customStyle: _propTypes["default"].object,
+  fileName: _propTypes["default"].string.isRequired,
+  fileSize: _propTypes["default"].string.isRequired,
+  submitText: _propTypes["default"].string.isRequired,
+  cancelText: _propTypes["default"].string.isRequired,
+  onSubmit: _propTypes["default"].func,
+  onCancel: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    cancelButtonProps: _propTypes["default"].object,
+    submitButtonProps: _propTypes["default"].object
+  })
+};
+var _default = attachmentPreviewHeaderPropTypes;
+exports["default"] = _default;

package/lib/Audio/Audio.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Audio;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useMedia2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Media/useMedia"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _AudioModule = _interopRequireDefault(require("./css/Audio.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function Audio(props) {
+  var customStyle = props.customStyle,
+      fileType = props.fileType,
+      fileURL = props.fileURL;
+
+  var _useMedia = (0, _useMedia2["default"])({
+    src: fileURL
+  }),
+      mediaElementRef = _useMedia.mediaElementRef;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_AudioModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("audio", {
+    ref: mediaElementRef,
+    className: newStyle.audio,
+    controls: true,
+    preload: "metadata"
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    "data-src": fileURL,
+    type: fileType
+  }));
+}
+
+Audio.propTypes = _propTypes["default"];
+Audio.defaultProps = _defaultProps["default"];
+Audio.displayName = 'Audio';

package/lib/Audio/css/Audio.module.css

@@ -0,0 +1,7 @@
+.audio {
+  width: 100% ;
+}
+
+.audio::-webkit-media-controls-panel {
+  background-color: var(--dot_white);
+}

package/lib/Audio/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Audio", {
+  enumerable: true,
+  get: function get() {
+    return _Audio["default"];
+  }
+});
+
+var _Audio = _interopRequireDefault(require("./Audio"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Audio/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var audioDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = audioDefaultProps;
+exports["default"] = _default;

package/lib/Audio/props/propTypes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var audioPropTypes = {
+  fileType: _propTypes["default"].string.isRequired,
+  fileURL: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object
+};
+var _default = audioPropTypes;
+exports["default"] = _default;