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

package/lib/ImageBubble/ImageBubble.js

@@ -0,0 +1,98 @@
+"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"] = ImageBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ImageBubbleModule = _interopRequireDefault(require("./css/ImageBubble.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _LazyLoadImage = _interopRequireDefault(require("../LazyLoadImage/LazyLoadImage"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+
+/** ** Components *** */
+
+/** ** Methods *** */
+function ImageBubble(props) {
+  var customStyle = props.customStyle,
+      imageDetails = props.imageDetails,
+      isFailed = props.isFailed,
+      isSending = props.isSending,
+      propOnClick = props.onClick;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ImageBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed,
+    isSending: isSending
+  }, newStyle),
+      imageBubbleClass = _cssJSLogic.imageBubbleClass;
+
+  var imageStyle = (0, _react.useMemo)(function () {
+    return {
+      lazyLoadImage: newStyle.image
+    };
+  }, [newStyle.image]);
+  var blurImageStyle = (0, _react.useMemo)(function () {
+    return {
+      lazyLoadImage: newStyle.blurImage
+    };
+  }, [newStyle.blurImage]);
+
+  var _useAttachmentBubble = (0, _useAttachmentBubble2["default"])({
+    attachmentDetails: imageDetails,
+    onClick: propOnClick
+  }),
+      src = _useAttachmentBubble.attachmentURL,
+      alternate = _useAttachmentBubble.fileName,
+      onClick = _useAttachmentBubble.onClick;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    className: imageBubbleClass,
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement(_LazyLoadImage["default"], {
+    alternate: alternate,
+    customStyle: blurImageStyle,
+    src: src
+  }), /*#__PURE__*/_react["default"].createElement(_LazyLoadImage["default"], {
+    alternate: alternate,
+    customStyle: imageStyle,
+    src: src
+  }));
+}
+
+ImageBubble.propTypes = _propTypes["default"];
+ImageBubble.defaultProps = _defaultProps["default"];
+ImageBubble.displayName = 'ImageBubble';

package/lib/ImageBubble/css/ImageBubble.module.css

@@ -0,0 +1,63 @@
+.varClass {
+  --imageBubble-wrapper_height: 200px;
+  --imageBubble-wrapper_width: 23.75rem;
+  --imageBubble-wrapper_max_width: 100%;
+  --imageBubble-blur_img_width: 100%;
+  --imageBubble-blur_img_height: 100%;
+  /* --imageBubble-blur_img_blurpx: 90px; */
+  --imageBubble-img_max_width: 100%;
+  --imageBubble-img_max_height: 100%;
+}
+
+.imageBubbleWrapper {
+  composes: varClass;
+  width: var(--imageBubble-wrapper_width) !important;
+  max-width: var(--imageBubble-wrapper_max_width);
+  height: var(--imageBubble-wrapper_height) !important;
+  color: var(--imlib_chat_components_imageBubble_alt_text_color);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--imlib_chat_components_imageBubble_bg_color);
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_imageBubble_border_color);
+}
+
+.failedImageBubble {
+  color: var(--imlib_chat_components_imageBubble_alt_text_color_failed);
+  background-color: var(--imlib_chat_components_imageBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_imageBubble_border_color_failed);
+}
+
+.blurImage {
+  object-fit: cover;
+  -webkit-filter: blur(90px);
+  filter: blur(90px);
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--imageBubble-blur_img_width);
+  height: var(--imageBubble-blur_img_height);
+}
+
+[dir=ltr] .blurImage {
+  right: 0 ;
+  left: 0 ;
+}
+
+[dir=rtl] .blurImage {
+  left: 0 ;
+  right: 0 ;
+}
+
+.image {
+  max-width: var(--imageBubble-img_max_width);
+  max-height: var(--imageBubble-img_max_height);
+  object-fit: contain;
+  position: relative;
+}
+
+.sendingImageBubble {
+  opacity: 0.1;
+  cursor: default;
+}

package/lib/ImageBubble/css/cssJSLogic.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+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 cssJSLogic(props, style) {
+  var _compileClassNames;
+
+  var isFailed = props.isFailed,
+      isSending = props.isSending;
+  var imageBubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.imageBubbleWrapper, true), _defineProperty(_compileClassNames, style.failedImageBubble, isFailed), _defineProperty(_compileClassNames, style.sendingImageBubble, isSending), _compileClassNames));
+  return {
+    imageBubbleClass: imageBubbleClass
+  };
+}

package/lib/ImageBubble/index.js

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

package/lib/ImageBubble/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 imageBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = imageBubbleDefaultProps;
+exports["default"] = _default;

package/lib/ImageBubble/props/propTypes.js

@@ -0,0 +1,24 @@
+"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 imageBubblePropTypes = {
+  imageDetails: _propTypes["default"].shape({
+    url: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string
+  }).isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  isSending: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
+};
+var _default = imageBubblePropTypes;
+exports["default"] = _default;

package/lib/LazyLoadImage/LazyLoadImage.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = LazyLoadImage;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useLazyLoadImage2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _LazyLoadImageModule = _interopRequireDefault(require("./css/LazyLoadImage.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function LazyLoadImage(props) {
+  var customStyle = props.customStyle,
+      src = props.src,
+      alternate = props.alternate;
+
+  var _useLazyLoadImage = (0, _useLazyLoadImage2["default"])({
+    src: src
+  }),
+      imageElementRef = _useLazyLoadImage.imageElementRef;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_LazyLoadImageModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    ref: imageElementRef,
+    alt: alternate,
+    className: "lazy ".concat(newStyle.lazyLoadImage || ''),
+    "data-src": src,
+    "data-srcset": src,
+    src: ""
+  });
+}
+
+LazyLoadImage.propTypes = _propTypes["default"];
+LazyLoadImage.defaultProps = _defaultProps["default"];
+LazyLoadImage.displayName = 'LazyLoadImage';

package/lib/LazyLoadImage/css/LazyLoadImage.module.css

@@ -0,0 +1,5 @@
+.lazyLoadImage {
+  /* height: 100%;
+  width: 100%; */
+  /* Use this class name for css customisation */
+}

package/lib/LazyLoadImage/index.js

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

package/lib/LazyLoadImage/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 lazyLoadImageDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = lazyLoadImageDefaultProps;
+exports["default"] = _default;

package/lib/LazyLoadImage/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 lazyLoadImagePropTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alternate: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object
+};
+var _default = lazyLoadImagePropTypes;
+exports["default"] = _default;

package/lib/LocationBubble/LocationBubble.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = LocationBubble;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _LocationBubbleModule = _interopRequireDefault(require("./css/LocationBubble.module.css"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+
+/** ** Methods *** */
+function LocationBubble(props) {
+  var customStyle = props.customStyle,
+      locationUrl = props.locationUrl,
+      isFailed = props.isFailed;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_LocationBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      locationBubbleClass = _cssJSLogic.locationBubbleClass;
+
+  return /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.container,
+    href: locationUrl,
+    rel: "noreferrer noopener",
+    target: "_blank"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: locationBubbleClass,
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.imageWrapper,
+    shrink: true
+  }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.textWrapper,
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.textLink,
+    "data-title": locationUrl
+  }, locationUrl))));
+}
+
+LocationBubble.propTypes = _propTypes["default"];
+LocationBubble.defaultProps = _defaultProps["default"];
+LocationBubble.displayName = 'LocationBubble';

package/lib/LocationBubble/css/LocationBubble.module.css

@@ -0,0 +1,57 @@
+.imageWrapper {
+  width: var(--zd_size60) ;
+  height: var(--zd_size60) ;
+  background-image: url('../images/location.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 3px;
+}
+
+.locationBubble {
+  white-space: nowrap;
+  width: 100% ;
+  box-sizing: border-box;
+  background-color: var(--imlib_chat_components_locationBubble_bg_color);
+  border: 1px solid var(--imlib_chat_components_locationBubble_border_color);
+  padding: var(--zd_size10) ;
+  border-radius: 3px; 
+}
+
+.failedLocationBubble{
+  background-color: var(--imlib_chat_components_locationBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_locationBubble_border_color_failed);
+}
+
+[dir=ltr] .textWrapper {
+  margin: 0 0 0 var(--zd_size8) ;
+}
+
+[dir=rtl] .textWrapper {
+  margin: 0 var(--zd_size8) 0 0 ;
+}
+
+.textLink {
+  display: block;
+  color: var(--imlib_chat_components_locationBubble_url_color);
+  word-break: break-word;
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.failedLocationBubble .textLink{
+  color: var(--imlib_chat_components_locationBubble_url_color_failed);
+}
+
+.container{
+  display: flex;
+  cursor: pointer;
+}
+
+.container:hover .textLink{
+  text-decoration: underline !important;
+}

package/lib/LocationBubble/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+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 cssJSLogic(props, style) {
+  var _compileClassNames;
+
+  var isFailed = props.isFailed;
+  var locationBubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.locationBubble, true), _defineProperty(_compileClassNames, style.failedLocationBubble, isFailed), _compileClassNames));
+  return {
+    locationBubbleClass: locationBubbleClass
+  };
+}

package/lib/LocationBubble/index.js

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

package/lib/LocationBubble/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 locationBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = locationBubbleDefaultProps;
+exports["default"] = _default;

package/lib/LocationBubble/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 locationBubblePropTypes = {
+  locationUrl: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool
+};
+var _default = locationBubblePropTypes;
+exports["default"] = _default;

package/lib/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -0,0 +1,76 @@
+"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"] = MediaBubbleWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _MediaBubbleWrapperModule = _interopRequireDefault(require("./css/MediaBubbleWrapper.module.css"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _AttachmentBubbleInfo = _interopRequireDefault(require("../AttachmentBubbleInfo/AttachmentBubbleInfo"));
+
+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 MediaBubbleWrapper(props) {
+  var customStyle = props.customStyle,
+      mediaDetails = props.mediaDetails,
+      customProps = props.customProps,
+      renderMedia = props.renderMedia,
+      isFailed = props.isFailed;
+  var _customProps$attachme = customProps.attachmentBubbleInfoProps,
+      attachmentBubbleInfoProps = _customProps$attachme === void 0 ? _emptyConstants.dummyObject : _customProps$attachme;
+  /* External css customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MediaBubbleWrapperModule["default"], customStyle);
+  var bubbleInfoCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      attachmentBubbleInfo: newStyle.header
+    };
+  }, [newStyle.header]);
+
+  var _useAttachmentBubble = (0, _useAttachmentBubble2["default"])({
+    attachmentDetails: mediaDetails
+  }),
+      fileURL = _useAttachmentBubble.attachmentURL,
+      fileSize = _useAttachmentBubble.formattedFileSize,
+      fileName = _useAttachmentBubble.fileName,
+      fileType = _useAttachmentBubble.attachmentType;
+
+  var mediaComponent = (0, _renderHandler["default"])(renderMedia)({
+    fileURL: fileURL,
+    fileType: fileType
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_AttachmentBubbleInfo["default"], _extends({
+    customStyle: bubbleInfoCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  })), mediaComponent);
+}
+
+MediaBubbleWrapper.propTypes = _propTypes["default"];
+MediaBubbleWrapper.defaultProps = _defaultProps["default"];
+MediaBubbleWrapper.displayName = 'MediaBubbleWrapper';

package/lib/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css

@@ -0,0 +1,7 @@
+.header {
+  margin-bottom: var(--zd_size5) ;
+}
+
+.audioCont{
+  min-width: var(--zd_size300) ;
+}

package/lib/MediaBubbleWrapper/index.js

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