beem-component 1.0.4 → 1.0.8

package/.storybook/main.js

@@ -12,4 +12,7 @@ module.exports = {
     "@storybook/preset-create-react-app",
     "storybook-addon-jsx",
   ],
+  features: {
+    emotionAlias: false, // for mui to work
+  },
 };

package/dist/assets/css/sidebar.css

@@ -0,0 +1,22 @@
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow: auto;
+    max-width: 20%;
+    width: 20%;
+}
+
+.main-sidebar-tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.main-sidebar-tabs>.sidebar-tabs {
+    padding: 1.714rem;
+    flex: 1;
+}

package/dist/components/Avatars/avatars.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmAvatarWrapper = exports.BmAvatar = void 0;
+exports.default = exports.BmAvatarWrapper = void 0;
 
 var _icons = require("@material-ui/icons");
 
@@ -94,10 +94,11 @@ var BmAvatar = function BmAvatar(props) {
   }, rest)));
 };
 
-exports.BmAvatar = BmAvatar;
 BmAvatar.propTypes = {
   size: _propTypes.default.string,
   type: _propTypes.default.string,
   color: _propTypes.default.string,
   user: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-};
+};
+var _default = BmAvatar;
+exports.default = _default;

package/dist/components/Avatars/avatars.stories.js

@@ -7,7 +7,7 @@ exports.default = exports.CustomAvatar = exports.Avatar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _avatars = require("./avatars");
+var _avatars = _interopRequireDefault(require("./avatars"));
 
 var _icons = require("@material-ui/icons");
 
@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
-  component: _avatars.BmAvatar,
+  component: _avatars.default,
   title: "components/Avatars",
   argTypes: {
     size: {
@@ -49,7 +49,7 @@ var _default = {
 exports.default = _default;
 
 var MainAvatar = function MainAvatar(args) {
-  return /*#__PURE__*/_react.default.createElement(_avatars.BmAvatar, args);
+  return /*#__PURE__*/_react.default.createElement(_avatars.default, args);
 };
 
 var Avatar = MainAvatar.bind({});

package/dist/components/Buttons/buttonDropdown copy.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = exports.BmButtonDropDown = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@material-ui/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _buttonIconsOnly = require("./buttonIconsOnly");
+
+var _buttons = require("./buttons");
+
+var _colors = require("../colors");
+
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 ButtonDropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &:hover {\n    background: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n  &:active {\n    background: ", ";\n    box-shadow: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n"])), function (_ref) {
+  var variant = _ref.variant,
+      disabled = _ref.disabled;
+
+  if (!disabled) {
+    if (variant === "primary") return "".concat(_colors.BmSecondaryCyan);
+    if (variant === "neutral") return "".concat(_colors.BmGrey50);
+    if (variant === "success") return "".concat(_colors.BmSecondaryGreen8);
+    if (variant === "destructive") return "".concat(_colors.BmSecondaryRed8);
+
+    if (!variant) {
+      return "".concat(_colors.BmSecondaryCyan);
+    }
+  }
+}, function (_ref2) {
+  var variant = _ref2.variant,
+      disabled = _ref2.disabled;
+
+  if (!disabled) {
+    if (variant === "secondary") return "".concat(_colors.BmSecondaryCyan);
+  }
+
+  return "none";
+}, function (_ref3) {
+  var variant = _ref3.variant,
+      disabled = _ref3.disabled;
+
+  if (!disabled) {
+    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "neutral") return "".concat(_colors.BmGrey100);
+    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
+
+    if (!variant) {
+      return "".concat(_colors.BmPrimaryBlue);
+    }
+  }
+}, function (_ref4) {
+  var variant = _ref4.variant,
+      disabled = _ref4.disabled;
+
+  if (!disabled) {
+    if (variant === "primary" || variant === "success" || variant === "destructive") return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+
+    if (!variant) {
+      return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+    }
+  }
+}, function (_ref5) {
+  var variant = _ref5.variant,
+      disabled = _ref5.disabled;
+
+  if (!disabled) {
+    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  return "none";
+});
+
+var Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.0625rem solid\n    ", ";\n\n  border-left: 0.071rem solid\n    ", ";\n  border-top-left-radius: 0.071rem;\n  border-bottom-left-radius: 0.071rem;\n  padding: 0rem;\n"])), function (_ref6) {
+  var variant = _ref6.variant,
+      disabled = _ref6.disabled;
+
+  if (!disabled) {
+    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary") return "none";
+    if (variant === "tertiary") return "none";
+    if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
+    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === "neutral") return "".concat(_colors.BmPrimaryWhite);
+    return "".concat(_colors.BmPrimaryBlue);
+  } else {
+    if (variant === "primary") return "".concat(_colors.BmGrey100);
+    if (variant === "secondary") return "none";
+    if (variant === "tertiary") return "none";
+    return "".concat(_colors.BmGrey100);
+  }
+}, function (_ref7) {
+  var variant = _ref7.variant,
+      disabled = _ref7.disabled;
+
+  if (!disabled) {
+    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "tertiary") return "transparent";
+    if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
+    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === "neutral") return "".concat(_colors.BmGrey400);
+    return "".concat(_colors.BmPrimaryBlue);
+  } else {
+    if (variant === "primary") return "".concat(_colors.BmGrey100);
+    if (variant === "secondary") return "".concat(_colors.BmGrey400);
+    if (variant === "tertiary") return "transparent";
+  }
+}, function (_ref8) {
+  var variant = _ref8.variant,
+      disabled = _ref8.disabled;
+
+  if (!disabled) {
+    if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
+    if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "tertiary") return "transparent";
+    if (variant === "destructive") return "".concat(_colors.BmSecondaryRed);
+    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === "neutral") return "".concat(_colors.BmGrey400);
+    return "".concat(_colors.BmPrimaryWhite);
+  } else {
+    if (variant === "primary") return "".concat(_colors.BmGrey400);
+    if (variant === "secondary") return "".concat(_colors.BmGrey400);
+    if (variant === "tertiary") return "transparent";
+  }
+});
+var Button = (0, _styledComponents.default)(_buttons.BmButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0.071rem;\n  border-bottom-right-radius: 0.071rem;\n  border-radius: none;\n  border-right: none;\n"])));
+exports.Button = Button;
+
+var BmButtonDropDown = function BmButtonDropDown(_ref9) {
+  var children = _ref9.children,
+      rest = _objectWithoutProperties(_ref9, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ButtonDropdownWrapper, rest, /*#__PURE__*/_react.default.createElement(Button, rest, children), /*#__PURE__*/_react.default.createElement(Dropdown, _extends({}, rest, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)
+  }))));
+};
+
+exports.BmButtonDropDown = BmButtonDropDown;

package/dist/components/Buttons/buttonDropdown.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmButtonDropdown = void 0;
+
+var _icons = require("@material-ui/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _buttonIconsOnly = require("./buttonIconsOnly");
+
+var _buttons = require("./buttons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BmButtonDropdown = function BmButtonDropdown(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    }
+  }, /*#__PURE__*/React.createElement(_buttons.BmButton, null, children), /*#__PURE__*/React.createElement(_buttons.BmButton, {
+    leadingIcon: /*#__PURE__*/React.createElement(_icons.KeyboardArrowDown, null)
+  }));
+};
+
+exports.BmButtonDropdown = BmButtonDropdown;

package/dist/components/Buttons/buttonIconsOnly.js

@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  border: 0.0625rem solid\n    ", ";\n  box-sizing: border-box;\n  border-radius: 0.21875rem;\n  padding: 0rem;\n"])), function (_ref) {
+var BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  box-sizing: border-box;\n  border-radius: 0.21875rem;\n  padding: 0rem;\n"])), function (_ref) {
   var variant = _ref.variant,
       disabled = _ref.disabled;
 

package/dist/components/Buttons/buttons.js

@@ -56,7 +56,7 @@ var ButtonText = _styledComponents.default.div(_templateObject || (_templateObje
   }
 });
 
-var BeemButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.21875rem;\n  padding: ", ";\n  background: ", ";\n\n  border: 0.0625rem solid\n    ", ";\n\n  &:hover {\n    background: ", ";\n    border: 0.0625rem solid\n      ", ";\n  }\n  &:active {\n    background: ", ";\n    box-shadow: ", ";\n    border: 0.0625rem solid\n      ", ";\n  }\n\n  &:hover ", " {\n    color: ", ";\n  }\n  &:active ", " {\n    color: ", ";\n  }\n"])), function (_ref3) {
+var BeemButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.21875rem;\n  padding: ", ";\n  background: ", ";\n\n  border: 0.071rem solid\n    ", ";\n\n  &:hover {\n    background: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n  &:active {\n    background: ", ";\n    box-shadow: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n\n  &:hover ", " {\n    color: ", ";\n  }\n  &:active ", " {\n    color: ", ";\n  }\n"])), function (_ref3) {
   var size = _ref3.size;
   if (size === "large") return "0.625rem 1.5rem";
   if (size === "medium") return "0.4375rem 1rem";

package/dist/components/Cards/cards.js

@@ -3,45 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardTitleText = exports.BmCardFooterText = exports.BmCardDetails = exports.BmCardBodyText = exports.BmCardBodyImg = exports.BmCard = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../colors");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.0625rem solid ", ";\n  border-radius: 0.21875rem;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
+var BmCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.21875rem;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
 
-exports.BmCard = BmCard;
-BmCard.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 1rem 1rem 0rem 1rem;\n"])));
+BmCard.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 1rem 1rem 0rem 1rem;\n"])));
 BmCard.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n  margin-bottom: 1rem;\n  padding: 0rem 1rem;\n"])));
-
-var CardTitleText = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _colors.BmPrimaryBlack);
-
-exports.CardTitleText = CardTitleText;
-
-var BmCardBodyText = _styledComponents.default.h1(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  align-items: center;\n"])), _colors.BmPrimaryBlack);
-
-exports.BmCardBodyText = BmCardBodyText;
-
-var BmCardBodyImg = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  height: 3rem;\n  width: 3rem;\n"])), _colors.BmPrimaryBlue);
-
-exports.BmCardBodyImg = BmCardBodyImg;
-BmCard.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-top: 0.0625rem solid ", ";\n  padding: 1rem;\n  align-items: center;\n"])), _colors.BmGrey400);
-
-var BmCardFooterText = _styledComponents.default.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  align-items: center;\n"])), _colors.BmPrimaryBlack);
-
-exports.BmCardFooterText = BmCardFooterText;
-
-var BmCardDetails = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-
-exports.BmCardDetails = BmCardDetails;
+BmCard.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-top: 0.071rem solid ", ";\n  padding: 1rem;\n  align-items: center;\n"])), _colors.BmGrey400);
 var _default = BmCard;
 exports.default = _default;

package/dist/components/Cards/cards.stories.js

@@ -13,12 +13,8 @@ var _addonKnobs = require("@storybook/addon-knobs");
 
 require("../../../main.scss");
 
-var _icons = require("@material-ui/icons");
-
 var _buttons = require("../Buttons/buttons");
 
-var _tags = require("../tags");
-
 var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/ChatBody/chatBody.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _icons = require("@material-ui/icons");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
+
+var _iconStyles = require("../iconStyles");
+
+var _colors = require("../colors");
+
+var _excluded = ["children", "state", "displayTime", "status", "session"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), ""
+/* border: 0.071rem solid ${BmGrey400}; */
+);
+
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n"])));
+
+var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), ""
+/* align-items: center; */
+, function (_ref) {
+  var state = _ref.state;
+
+  if (state === "inbound") {
+    return "flex-start";
+  }
+
+  if (state === "outbound") {
+    return "flex-end";
+  }
+
+  return "row";
+});
+
+var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 0.5rem;\n  }\n"])));
+
+var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
+  var state = _ref2.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref3) {
+  var state = _ref3.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref4) {
+  var state = _ref4.state;
+
+  if (state) {
+    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, _colors.BmGrey400);
+
+var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  margin-top: 0.5rem;\n"])));
+
+var handleState = function handleState(_ref5) {
+  var session = _ref5.session;
+
+  if (session === "bot") {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "chatbot"
+    });
+  }
+
+  if (session === "live") {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "employee"
+    });
+  }
+};
+
+BmChat.Details = function (_ref6) {
+  var children = _ref6.children,
+      state = _ref6.state,
+      displayTime = _ref6.displayTime,
+      status = _ref6.status,
+      session = _ref6.session,
+      rest = _objectWithoutProperties(_ref6, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Details, _extends({
+    state: state
+  }, rest), state === "inbound" && session && handleState({
+    state: state,
+    session: session
+  }), /*#__PURE__*/_react.default.createElement(MessageDetails, null, /*#__PURE__*/_react.default.createElement(Messages, {
+    state: state
+  }, children), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
+    color: "".concat(_colors.BmSecondaryDarkGreen),
+    size: "small"
+  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
+    color: "".concat(_colors.BmPrimaryBlack),
+    size: "small"
+  }))), state === "outbound" && session && handleState({
+    state: state,
+    session: session
+  }));
+};
+
+BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0rem;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, _colors.BmGrey50);
+var _default = BmChat;
+exports.default = _default;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChatBody = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _chatBody = _interopRequireDefault(require("./chatBody"));
+
+var _iconStyles = require("../iconStyles");
+
+var _EmojiEmotions = _interopRequireDefault(require("@mui/icons-material/EmojiEmotions"));
+
+var _AttachFile = _interopRequireDefault(require("@mui/icons-material/AttachFile"));
+
+var _Quickreply = _interopRequireDefault(require("@mui/icons-material/Quickreply"));
+
+var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
+
+var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
+
+var _icons = require("@material-ui/icons");
+
+var _input = require("../input");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _chatBody.default,
+  title: "components/Chat/ChatBody"
+};
+exports.default = _default;
+
+var ChatBody = function ChatBody() {
+  return /*#__PURE__*/_react.default.createElement(_chatBody.default, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Body, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "inbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound")), /*#__PURE__*/_react.default.createElement(_chatBody.default.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(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_AttachFile.default, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Quickreply.default, null),
+    size: "xlarge"
+  }), /*#__PURE__*/_react.default.createElement(_input.BmInput, {
+    placeholder: "Enter Message"
+  }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),
+    size: "xlarge"
+  })));
+};
+
+exports.ChatBody = ChatBody;

package/dist/components/ChatHeader/chatHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmChatHeader = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 0.071rem solid ", ";\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  button {\n    margin-left: auto;\n  }\n"])), _colors.BmGrey400);
+
+exports.BmChatHeader = BmChatHeader;

package/dist/components/ChatHeader/chatHeader.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChatHeader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttons = require("../Buttons/buttons");
+
+var _chatHeader = require("./chatHeader");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _chatHeader.BmChatHeader,
+  title: "components/Chat/ChatHeader"
+};
+exports.default = _default;
+
+var ChatHeader = function ChatHeader() {
+  return /*#__PURE__*/_react.default.createElement(_chatHeader.BmChatHeader, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement("p", null, "Last seen: 00:00"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    size: "medium"
+  }, "End Session"));
+};
+
+exports.ChatHeader = ChatHeader;

package/dist/components/ContactCards/contactCards.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BmContactCard = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n  padding: 1rem 1.5rem;\n"])), _colors.BmGrey100, function (_ref) {
+  var active = _ref.active;
+  return active && "    \n    background: ".concat(_colors.BmGrey100, ";\n  ");
+});
+
+exports.BmContactCard = BmContactCard;
+BmContactCard.Profile = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));
+BmContactCard.Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
+BmContactCard.SubDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > * {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    align-items: flex-start;\n  }\n  ", "\n  ", "\n"])), ''
+/* TODO */
+, ''
+/* > :last-child {
+margin-left: auto;
+} */
+);
+var _default = BmContactCard;
+exports.default = _default;