beem-component 1.5.6 → 1.5.7

package/dist/components/ChatComponents/ContactCards/contactCards.stories.js

@@ -13,7 +13,7 @@ var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 
 var _messageCounter = _interopRequireDefault(require("../../MessageCounter/messageCounter"));
 
-var _tags = require("../../tags");
+var _tags = require("../../Tags/tags");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/components/Modals/modal.js

@@ -22,7 +22,7 @@ var _iconStyles = require("../iconStyles");
 var _excluded = ["children", "show", "size", "onHide", "centered"],
     _excluded2 = ["children", "size", "onHide", "closeButton", "show"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -58,7 +58,7 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
 
 exports.Overlay = Overlay;
 
-var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: 2rem auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: 2rem auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
 
 exports.ModalContent = ModalContent;
 
@@ -123,17 +123,18 @@ BmModal.Header = function (_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), children, closeButton ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
       size: "xlarge",
       icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
       onClick: function onClick() {
         return value && value.onHide && value.onHide(!value.show);
       }
-    }, rest))));
+    }, rest)) : /*#__PURE__*/_react.default.createElement("p", null, "\xA0")));
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
+BmModal.SubHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items:center;\n"])));
+BmModal.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
 /* max-height: ${({ size }) => {
 if (size) {
 if (size === "small") return "21.429rem";
@@ -146,7 +147,7 @@ return "35.714rem";
 }};
 overflow: auto; */
 );
-BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+BmModal.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,
   centered: _propTypes.default.bool,

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SampleModal = exports.ExampleModal = void 0;
+exports.default = exports.SampleModal = exports.ModalWithSubHeader = exports.ExampleModal = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -82,12 +82,34 @@ var SampleModal = function SampleModal() {
 
 exports.SampleModal = SampleModal;
 
-var ExampleModal = function ExampleModal() {
+var ModalWithSubHeader = function ModalWithSubHeader() {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
       showModal = _useState4[0],
       setShowModal = _useState4[1];
 
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!")), /*#__PURE__*/_react.default.createElement(_modal.default, {
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.SubHeader, null, /*#__PURE__*/_react.default.createElement("h5", null, "This modal has a sub heading")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));
+};
+
+exports.ModalWithSubHeader = ModalWithSubHeader;
+
+var ExampleModal = function ExampleModal() {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showModal = _useState6[0],
+      setShowModal = _useState6[1];
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
     onClick: function onClick() {
       return setShowModal(!showModal);

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmProfileIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _wa = _interopRequireDefault(require("../../assets/wa.png"));
+
+var _fb = _interopRequireDefault(require("../../assets/fb.png"));
+
+var _insta = _interopRequireDefault(require("../../assets/insta.png"));
+
+var _excluded = ["img", "content", "channel", "size"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var handleSize = function handleSize(size) {
+  if (size) {
+    if (size === "large") return "3.429rem";
+    if (size === "medium") return "2.286rem";
+    if (size === "small") return "1.714rem";
+    if (size === "xsmall") return "1.429rem";
+  }
+
+  return "3.429rem";
+};
+
+var position = function position(size) {
+  if (size) {
+    if (size === "large") return "2.286rem";
+    if (size === "medium") return "1.5rem";
+    if (size === "small") return "1rem";
+    if (size === "xsmall") return "0.714rem";
+  }
+
+  return "2.286rem";
+};
+
+var ProfileImg = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    object-fit: contain;\n    border-radius: 50%;\n    display:flex;\n"])), function (props) {
+  return handleSize(props.size);
+}, function (props) {
+  return handleSize(props.size);
+});
+
+var Profile = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    border-radius: 50%;\n    border: 1px solid ", ";\n    display:flex;\n    align-items:center;\n    justify-content: center;\n    position: relative;\n    background: ", ";\n"])), function (props) {
+  return handleSize(props.size);
+}, function (props) {
+  return handleSize(props.size);
+}, _colors.BmBgLightBlue, _colors.BmSecondaryBlue12);
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display:flex;\n    align-items:center;\n    justify-content: center;\n    position: absolute;\n"])));
+
+var Dot = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: ", ";\n    bottom: 0rem;\n    object-fit: contain;\n    height: 1rem;\n    width: 1rem;\n"])), function (props) {
+  return position(props.size);
+});
+
+var BmProfileIcon = function BmProfileIcon(_ref) {
+  var img = _ref.img,
+      content = _ref.content,
+      channel = _ref.channel,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Profile, _extends({
+    size: size
+  }, rest), content && !img && /*#__PURE__*/_react.default.createElement(Content, null, content), img && !content && /*#__PURE__*/_react.default.createElement(ProfileImg, {
+    src: img
+  }), channel && channel === 'whatsapp' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _wa.default
+  }), channel && channel === 'facebook' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _fb.default
+  }), channel && channel === 'instagram' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _insta.default
+  })));
+};
+
+exports.BmProfileIcon = BmProfileIcon;

package/dist/components/ProfileIcon/profileIcon.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Sample = exports.ImageProfile = exports.ContentProfile = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ProfileIcon = require("./ProfileIcon");
+
+var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _ProfileIcon.BmProfileIcon,
+  title: "components/ProfileIcon",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the profile",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    img: {
+      description: "Image to be displayed (will not be displayed if content is present)",
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    content: {
+      description: "Content to be displayed (will not be displayed if image is present)",
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    channel: {
+      options: ["whatsapp", "instagram", "facebook"],
+      control: {
+        type: "select"
+      },
+      description: "Profile badge",
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainProfileIcon = function MainProfileIcon(args) {
+  return /*#__PURE__*/_react.default.createElement(_ProfileIcon.BmProfileIcon, args);
+};
+
+var Sample = MainProfileIcon.bind({});
+exports.Sample = Sample;
+Sample.args = {
+  channel: "whatsapp",
+  size: "large"
+};
+var ImageProfile = MainProfileIcon.bind({});
+exports.ImageProfile = ImageProfile;
+ImageProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  img: _beem.default,
+  content: undefined
+};
+var ContentProfile = MainProfileIcon.bind({});
+exports.ContentProfile = ContentProfile;
+ContentProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  content: /*#__PURE__*/_react.default.createElement("h4", null, "BC"),
+  img: undefined
+};

package/dist/components/examples/App.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@material-ui/icons");
+
+var _EmojiEmotions = _interopRequireDefault(require("@material-ui/icons/EmojiEmotions"));
+
+var _Quickreply = _interopRequireDefault(require("@mui/icons-material/Quickreply"));
+
+var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
+
+var _components = require("./lib/components");
+
+require("../src/lib/assets/css/sidebar.scss");
+
+var _chartImg = _interopRequireDefault(require("../src/lib/assets/chart-img.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Chat = function Chat() {
+  return /*#__PURE__*/_react.default.createElement(_components.BmChat, null, /*#__PURE__*/_react.default.createElement(_components.BmChat.Body, null, /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "inbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    src: _chartImg.default,
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "attachment.jpg")
+  }), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent" // src={image}
+    // fileName={<p>attachment.jpg</p>}
+
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control. Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST. Angalia asilimia ya QUALITY pale chini. Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%. Au kama una aina nyingine ya kisimbuzi; Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH. Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971. Au Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI. Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971. Angalia asilimia ya QUALITY pale chini. QUALITY inatakiwa isiwe pungufu ya asilimia 60%. Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.")), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "inbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent" // src={image}
+    // fileName={<p>attachment.jpg</p>}
+
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control. Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST. Angalia asilimia ya QUALITY pale chini. Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%. Au kama una aina nyingine ya kisimbuzi; Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH. Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971. Au Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI. Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971. Angalia asilimia ya QUALITY pale chini. QUALITY inatakiwa isiwe pungufu ya asilimia 60%. Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.")), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed" // src={azam}
+    ,
+    file: /*#__PURE__*/_react.default.createElement("p", null, "fildjfdlkfjlkfdjfldjfldsjfldsje.jpg")
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Hekkoi")), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali lingine?")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound"))), /*#__PURE__*/_react.default.createElement(_components.BmChat.Footer, {
+    style: {
+      justifyContent: "flex-start"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    class: "chat-footer"
+  }, /*#__PURE__*/_react.default.createElement(_components.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),
+    size: "xlarge"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    class: "chat-footer"
+  }, /*#__PURE__*/_react.default.createElement(_components.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_components.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.AttachFile, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_components.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Quickreply.default, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_components.BmInput, {
+    placeholder: "Enter Message",
+    style: {
+      flex: 1
+    }
+  }), /*#__PURE__*/_react.default.createElement(_components.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),
+    size: "xlarge"
+  }))));
+};
+
+var _default = Chat;
+exports.default = _default;

package/dist/components/examples/InfoAccordion.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _components = require("./lib/components");
+
+var _FormAccordion = _interopRequireDefault(require("./lib/components/ChatComponents/FormAccordion/FormAccordion"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react/prop-types */
+var InfoAccordion = function InfoAccordion() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.BmAccordion, null, /*#__PURE__*/_react.default.createElement(_components.BmAccordion.Title, null, /*#__PURE__*/_react.default.createElement("h3", null, "Notes")), /*#__PURE__*/_react.default.createElement(_components.BmAccordion.Body, null, /*#__PURE__*/_react.default.createElement(_FormAccordion.default, null, /*#__PURE__*/_react.default.createElement(_FormAccordion.default.Label, null, /*#__PURE__*/_react.default.createElement("h4", null, "Hello")), /*#__PURE__*/_react.default.createElement(_FormAccordion.default.Input, {
+    placeholder: "Hello"
+  })))));
+};
+
+var _default = InfoAccordion;
+exports.default = _default;

package/dist/components/examples/chatBodyExample.js

@@ -0,0 +1,72 @@
+"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 = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+require("./list.scss");
+
+var _scrollBar = require("../ScrollBar/scrollBar");
+
+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; }
+
+var App = function App() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_scrollBar.ScrollbarWrapper, null, /*#__PURE__*/_react.default.createElement(_.BmChat, null, /*#__PURE__*/_react.default.createElement(_.BmChat.Body, null, /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "inbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "inbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png"),
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    }
+  }), /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "inbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv")
+  }), /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "outbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound Text Message")), /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png")
+  }), /*#__PURE__*/_react.default.createElement(_.BmChat.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
+    onDownload: function onDownload() {
+      alert("hello");
+    }
+  })))));
+};
+
+var _default = App;
+exports.default = _default;

package/dist/components/examples/selectExample.js

@@ -0,0 +1,77 @@
+"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 = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _components = require("./lib/components");
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var App = function App() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var VENDOR_ACCOUNT_STATUSES = {
+    0: "Inactive",
+    1: "Active"
+  };
+  var VENDOR_ACCOUNT_STATUS_OPTIONS = (0, _map.default)(VENDOR_ACCOUNT_STATUSES, function (type, key) {
+    return {
+      value: key,
+      label: type
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!"), /*#__PURE__*/_react.default.createElement(_components.BmModal, {
+    size: "small",
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    },
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_components.BmModal.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_components.BmModal.Body, null, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    options: VENDOR_ACCOUNT_STATUS_OPTIONS,
+    placeholder: "Select"
+  })), /*#__PURE__*/_react.default.createElement(_components.BmModal.Footer, null, /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    size: "small"
+  }, "Send"), /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    size: "small",
+    variant: "secondary"
+  }, "View"))));
+};
+
+var _default = App;
+exports.default = _default;

package/dist/components/globalStyles.js

@@ -13,5 +13,5 @@ var _templateObject;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px; cursor: pointer}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n  ::-webkit-scrollbar-thumb: {\n  background:red;\n  maxHeight: '10px'}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.p, _text.input, _text.a);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px; cursor: pointer}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  h5 { ", " }\n  h6 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a);
 exports.GlobalStyle = GlobalStyle;