beem-component 2.1.18 → 2.1.20

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -23,6 +23,7 @@ var _FeedPostComments = require("./FeedPostComments");
 const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
   _excluded2 = ["state", "src", "extensions", "fileName"],
   _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -39,7 +40,7 @@ BmChat.Body = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column-reverse;padding:0rem 1rem;flex-grow:1;overflow:auto;height:100%;"]);
 const Details = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Details"
-})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;import{extension}from 'mime-types';flex-grow:1;", ""], _ref => {
+})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;flex-grow:1;", ""], _ref => {
   let {
     state
   } = _ref;
@@ -394,29 +395,56 @@ const RepliedTextWrapper = exports.RepliedTextWrapper = _styledComponents.defaul
   return "".concat(_colors.BmPrimaryWhite);
 });
 const QuickReplyRender = _ref24 => {
-  var _content$text;
   let {
     content,
     options,
     type,
     state,
     rest,
-    isInteractive
+    isInteractive,
+    connector,
+    body,
+    action,
+    header,
+    footer
   } = _ref24;
+  const MEDIA_TYPES = ['document', 'image', 'video'];
+  const renderers = {
+    dotgo_v3: () => {
+      var _header$header$type, _header$header$type2, _body$text, _action$buttons;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, MEDIA_TYPES.includes(header === null || header === void 0 ? void 0 : header.type) ? /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+        state: state,
+        src: (_header$header$type = header[header.type]) === null || _header$header$type === void 0 ? void 0 : _header$header$type.link
+      }, rest)) : /*#__PURE__*/_react.default.createElement("h5", null, (_header$header$type2 = header[header.type]) === null || _header$header$type2 === void 0 ? void 0 : _header$header$type2.text)), body && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body === null || body === void 0 || (_body$text = body.text) === null || _body$text === void 0 ? void 0 : _body$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))), footer && /*#__PURE__*/_react.default.createElement("small", null, footer === null || footer === void 0 ? void 0 : footer.text), (action === null || action === void 0 || (_action$buttons = action.buttons) === null || _action$buttons === void 0 ? void 0 : _action$buttons.length) > 0 && action.buttons.map((button, idx) => {
+        var _button$button$type;
+        return /*#__PURE__*/_react.default.createElement(IntButton, {
+          state: state,
+          key: "action-btn-".concat(idx)
+        }, (_button$button$type = button[button.type]) === null || _button$button$type === void 0 ? void 0 : _button$button$type.title);
+      }));
+    }
+  };
+  const FallbackRenderer = () => {
+    var _content$text;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (content === null || content === void 0 ? void 0 : content.url) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+      state: state,
+      src: content === null || content === void 0 ? void 0 : content.url
+    }, rest))), (content === null || content === void 0 ? void 0 : content.header) && /*#__PURE__*/_react.default.createElement("strong", null, content.header), content === null || content === void 0 || (_content$text = content.text) === null || _content$text === void 0 ? void 0 : _content$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      key: "content-line-".concat(idx)
+    }, line, /*#__PURE__*/_react.default.createElement("br", null)))), (content === null || content === void 0 ? void 0 : content.caption) && /*#__PURE__*/_react.default.createElement("small", null, content.caption), options === null || options === void 0 ? void 0 : options.map((button, idx) => /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state,
+      key: "opt-btn-".concat(idx)
+    }, button === null || button === void 0 ? void 0 : button.title)));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   return /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
     isInteractive: isInteractive,
     isImg: true
-  }, (content === null || content === void 0 ? void 0 : content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
-    state: state,
-    src: content === null || content === void 0 ? void 0 : content.url
-  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, content === null || content === void 0 ? void 0 : content.header), content === null || content === void 0 || (_content$text = content.text) === null || _content$text === void 0 ? void 0 : _content$text.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement("small", null, content === null || content === void 0 ? void 0 : content.caption), options === null || options === void 0 ? void 0 : options.map(button =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/jsx-key
-  _react.default.createElement(IntButton, {
-    state: state
-  }, button === null || button === void 0 ? void 0 : button.title)));
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
 };
 const ProductDetailRender = _ref25 => {
   let {
@@ -426,7 +454,6 @@ const ProductDetailRender = _ref25 => {
     body,
     isInteractive
   } = _ref25;
-  console.log(type, state, header, body);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
@@ -436,68 +463,141 @@ const ProductDetailRender = _ref25 => {
   }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog")));
 };
 const ListReplyRender = _ref26 => {
-  var _globalButtons$;
   let {
     title,
     body,
     globalButtons,
     isInteractive,
     type,
-    state
+    state,
+    connector,
+    header,
+    action,
+    footer
   } = _ref26;
+  const renderers = {
+    dotgo_v3: () => {
+      var _header$header$type3, _body$text2;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", null, (_header$header$type3 = header[header.type]) === null || _header$header$type3 === void 0 ? void 0 : _header$header$type3.text)), body && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body === null || body === void 0 || (_body$text2 = body.text) === null || _body$text2 === void 0 ? void 0 : _body$text2.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))), footer && /*#__PURE__*/_react.default.createElement("small", null, footer === null || footer === void 0 ? void 0 : footer.text), action.button && /*#__PURE__*/_react.default.createElement(IntButton, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(_List.default, null), action.button));
+    }
+  };
+  const FallbackRenderer = () => {
+    var _globalButtons$;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, title), body.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
     isInteractive: isInteractive
-  }, /*#__PURE__*/_react.default.createElement("strong", null, title), body.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement(IntButton, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title)));
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null)));
 };
 const OrderRender = _ref27 => {
   let {
     amount,
     type,
     state,
-    items
+    items,
+    product_items,
+    connector,
+    isInteractive
   } = _ref27;
+  const renderers = {
+    dotgo_v3: _ref28 => {
+      let {
+        displayItems,
+        sumQuantities,
+        setDisplayItems
+      } = _ref28;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
+        fontSize: "small"
+      }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(product_items), ' ', sumQuantities(product_items) > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, product_items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
+        src: data.imgURL,
+        alt: "product"
+      }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
+        style: {
+          width: '100%'
+        }
+      })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
+        state: state,
+        onClick: () => {
+          setDisplayItems(!displayItems);
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
+    }
+  };
+  const FallbackRenderer = _ref29 => {
+    let {
+      sumQuantities,
+      displayItems,
+      setDisplayItems
+    } = _ref29;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
+      fontSize: "small"
+    }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(items), ' ', sumQuantities(items) > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
+      src: data.imgURL,
+      alt: "product"
+    }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
+      style: {
+        width: '100%'
+      }
+    })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state,
+      onClick: () => {
+        setDisplayItems(!displayItems);
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   const [displayItems, setDisplayItems] = (0, _react.useState)(false);
-  const sumQuantities = () => {
-    return items === null || items === void 0 ? void 0 : items.reduce((total, item) => {
+  const sumQuantities = data => {
+    return data === null || data === void 0 ? void 0 : data.reduce((total, item) => {
       return total + parseInt(item.quantity, 10);
     }, 0);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
-    fontSize: "small"
-  }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(), " ", sumQuantities() > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
-    src: data.imgURL,
-    alt: "product"
-  }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
-    style: {
-      width: '100%'
-    }
-  })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
     state: state,
-    onClick: () => {
-      setDisplayItems(!displayItems);
-    }
-  }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS"))));
+    isInteractive: isInteractive
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, {
+    sumQuantities: sumQuantities,
+    setDisplayItems: setDisplayItems,
+    displayItems: displayItems,
+    items: items
+  })));
 };
-BmChat.Details = _ref28 => {
+BmChat.Details = _ref30 => {
+  var _children$message, _children$message2;
   let {
       children,
       state,
@@ -515,8 +615,8 @@ BmChat.Details = _ref28 => {
       isInteractive,
       type,
       extension
-    } = _ref28,
-    rest = _objectWithoutProperties(_ref28, _excluded3);
+    } = _ref30,
+    rest = _objectWithoutProperties(_ref30, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
@@ -531,42 +631,50 @@ BmChat.Details = _ref28 => {
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
     state: state
-  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+  }, metadata.message.type === 'quick_reply' || metadata.message.type === 'button' ? /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
     isInteractive: true,
     rest: rest
-  }, metadata, {
+  }, metadata.message, {
     type: type,
-    state: state
-  })) : metadata.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
+    state: state,
+    connector: metadata.connector
+  })) : metadata.message.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
     isInteractive: true
-  }, metadata, {
+  }, metadata.message, {
     type: type,
-    state: state
-  })) : metadata.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
+    state: state,
+    connector: metadata.connector
+  })) : metadata.message.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
     isInteractive: true
-  }, metadata, {
+  }, metadata.message, {
     type: type,
     state: state
-  })) : metadata.type === 'order' ? /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, metadata, {
+  })) : metadata.message.type === 'order' ? /*#__PURE__*/_react.default.createElement(OrderRender, _extends({
+    isInteractive: true
+  }, metadata.message, {
     type: type,
-    state: state
+    state: state,
+    connector: metadata.connector
   })) : /*#__PURE__*/_react.default.createElement(Messages, {
     metadata: metadata,
     state: state
-  }, metadata), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && (type === 'interactive' || type === 'order') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'quick_reply' && /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+  }, metadata.message), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && (type === 'interactive' || type === 'order') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((children === null || children === void 0 || (_children$message = children.message) === null || _children$message === void 0 ? void 0 : _children$message.type) === 'quick_reply' || (children === null || children === void 0 || (_children$message2 = children.message) === null || _children$message2 === void 0 ? void 0 : _children$message2.type) === 'button') && /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
     rest: rest
-  }, children, {
+  }, children.message, {
     type: type,
-    state: state
-  })), children.type === 'list' && /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, children, {
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'list' && /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, children.message, {
     type: type,
-    state: state
-  })), children.type === 'product_details' && /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({}, children, {
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'product_details' && /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({}, children.message, {
     type: type,
     state: state
-  })), children.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children, {
+  })), children.message.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children.message, {
     type: type,
-    state: state
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
   }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
     file: {
       url: "".concat(file)

package/dist/components/Modals/modal.js

@@ -10,7 +10,7 @@ var _icons = require("@material-ui/icons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-const _excluded = ["children", "show", "size", "onHide", "centered"],
+const _excluded = ["children", "show", "size", "zIndex", "onHide", "centered"],
   _excluded2 = ["children", "size", "onHide", "subHeading", "closeButton", "show", "icon", "trailingIcon"];
 /* eslint-disable no-undef */
 /* eslint-disable react/display-name */
@@ -25,13 +25,18 @@ const {
 } = /*#__PURE__*/_react.default.createContext();
 const Overlay = exports.Overlay = _styledComponents.default.div.withConfig({
   displayName: "modal__Overlay"
-})(["position:fixed;top:0;left:0;z-index:20;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
+})(["position:fixed;top:0;left:0;z-index:", ";width:100vw;height:100vh;background-color:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex || 20;
+}, _colors.BmBgGrey45);
 const ModalContent = exports.ModalContent = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalContent"
-})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:", ";}"], _colors.BmPrimaryWhite, _ref => {
+})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:", ";}"], _colors.BmPrimaryWhite, _ref2 => {
   let {
     size
-  } = _ref;
+  } = _ref2;
   if (size) {
     return size;
   }
@@ -40,15 +45,16 @@ const ModalContent = exports.ModalContent = _styledComponents.default.div.withCo
 const ModalWrapper = exports.ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalWrapper"
 })(["position:fixed;top:0;left:0;z-index:9999;display:block;width:100%;height:100%;overflow:hidden;outline:0;margin:auto;overflow-x:hidden;overflow-y:auto;"]);
-const BmModal = _ref2 => {
+const BmModal = _ref3 => {
   let {
       children,
       show,
       size,
+      zIndex,
       onHide,
       centered
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   const [toggle, setToggle] = (0, _react.useState)(show);
   (0, _react.useEffect)(() => {
     setToggle(show);
@@ -62,7 +68,9 @@ const BmModal = _ref2 => {
     document.addEventListener('keydown', keyPress);
     return () => document.removeEventListener('keydown', keyPress);
   }, [keyPress]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
+    zIndex: zIndex
+  }), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
     showModal: show,
     centered: centered,
     onHide: onHide
@@ -87,7 +95,7 @@ const ModalHeaderContent = _styledComponents.default.div.withConfig({
 const IconContainer = _styledComponents.default.div.withConfig({
   displayName: "modal__IconContainer"
 })(["display:flex;padding:0.5714rem;justify-content:center;align-items:center;border-radius:0.7143rem;border:0.0714rem solid var(--Gray-200,#eaecf0);background:var(--Base-White,#fff);box-shadow:0rem 0.0714rem 0.1429rem 0rem rgba(16,24,40,0.05);"]);
-BmModal.Header = _ref3 => {
+BmModal.Header = _ref4 => {
   let {
       children,
       size,
@@ -97,8 +105,8 @@ BmModal.Header = _ref3 => {
       show,
       icon,
       trailingIcon
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/_react.default.createElement(Consumer, null, value => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, trailingIcon && /*#__PURE__*/_react.default.createElement(IconContainer, null, trailingIcon), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%'

package/dist/components/Modals/modals.stories.js

@@ -15,12 +15,13 @@ var _default = exports.default = {
   component: _modal.default,
   title: 'components/Modals',
   argTypes: {
-    // size: {
-    //   options: ["small", "default", "large", "xlarge"],
-    //   control: { type: "select" },
-    //   description: "Size of the Modal (Optional)",
-    //   defaultValue: { summary: "default" },
-    // },
+    size: {
+      control: {
+        type: 'text'
+      },
+      description: 'Controls the width of the modal in Pixels',
+      defaultValue: '500px'
+    },
     closeButton: {
       description: 'Placed on BmModal.Header component. Displays the close button (X)'
     },
@@ -35,6 +36,12 @@ var _default = exports.default = {
     },
     onHide: {
       description: 'Handling the closing of the modal'
+    },
+    zIndex: {
+      description: 'Controls the stacking order of the modal in an event you have multiple modals',
+      control: {
+        type: 'number'
+      }
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {