beem-component 1.0.7 → 1.1.1

package/dist/assets/css/sidebar.css

@@ -1,3 +1,18 @@
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow: auto;
+    max-width: 20%;
+    width: 20%;
+    border: 1px solid #E2E2E2;
+}
+
+.sidebar>* {
+    margin-bottom: 1.5rem;
+}
+
 .main-sidebar-tabs {
     display: flex;
     flex-direction: row;
@@ -9,4 +24,57 @@
 .main-sidebar-tabs>.sidebar-tabs {
     padding: 1.714rem;
     flex: 1;
+}
+
+.sidebar-contacts {
+    display: flex;
+    flex-direction: column;
+    margin: 0rem;
+    overflow: auto;
+}
+
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(100vh - 180px);
+    max-width: 100%;
+    width: 100%;
+    background: white;
+}
+
+.chat {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    flex-grow: 1;
+    max-height: 100%;
+    height: 100%;
+}
+
+.chat-menu {
+    display: flex;
+    flex-direction: row;
+    height: 0%;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 80%;
+    border: 1px solid #E2E2E2;
+}
+
+.chat-contact-info {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 25%;
+    border: 1px solid #E2E2E2;
 }

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.071rem 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.25rem;\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.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 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.25rem;\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

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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.071rem 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.25rem;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
 
 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"])));

package/dist/components/ChatBody/chatBody.js

@@ -31,13 +31,13 @@ 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 BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), ""
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\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"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\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"])), ""
+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  flex-grow: 1;\n"])), ""
 /* align-items: center; */
 , function (_ref) {
   var state = _ref.state;
@@ -133,6 +133,8 @@ BmChat.Details = function (_ref6) {
   }));
 };
 
-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);
+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  ", "\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, ''
+/* background: ${BmGrey50}; */
+);
 var _default = BmChat;
 exports.default = _default;

package/dist/components/ChatHeader/chatHeader.js

@@ -7,14 +7,15 @@ 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);
+// import { BmGrey400 } from "../colors";
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  button {\n    margin-left: auto;\n  }\n"])), ''
+/* border: 0.071rem solid ${BmGrey400}; */
+);
 
 exports.BmChatHeader = BmChatHeader;

package/dist/components/Chats/chat.js

@@ -31,7 +31,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 BmChatWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.21875rem 0.21875rem 0.21875rem 0rem;\n  max-width: 50%;\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), function (_ref) {
+var BmChatWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem 0.21875rem 0.21875rem 0rem;\n  max-width: 50%;\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), function (_ref) {
   var type = _ref.type;
 
   if (type) {
@@ -150,7 +150,7 @@ var BmFileChat = function BmFileChat(_ref7) {
 
 exports.BmFileChat = BmFileChat;
 
-var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.21875rem 0.21875rem 0rem 0.21875rem;\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  max-height: 50%;\n"])), _colors.BmGrey100, _colors.BmGrey400);
+var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem 0.21875rem 0rem 0.21875rem;\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  max-height: 50%;\n"])), _colors.BmGrey100, _colors.BmGrey400);
 
 exports.BmImageWrapper = BmImageWrapper;
 

package/dist/components/Chats/chatInput.js

@@ -49,5 +49,5 @@ exports.BmSend = BmSend;
 var BmAttachment = (0, _styledComponents.default)("div")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  justify-content: center;\n  padding-right: 1.143rem !important;\n"]))); // Div for message input
 
 exports.BmAttachment = BmAttachment;
-var BmMessage = (0, _styledComponents.default)("div")(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.714rem 1.143rem !important;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.21875rem;\n  flex-grow: 1;\n  max-width: 75%;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
+var BmMessage = (0, _styledComponents.default)("div")(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.714rem 1.143rem !important;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  flex-grow: 1;\n  max-width: 75%;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
 exports.BmMessage = BmMessage;

package/dist/components/ContactCards/contactCards.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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"])), _colors.BmGrey100, function (_ref) {
+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  ");
 });

package/dist/components/InfoTab/infoTab.js

@@ -7,15 +7,16 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("../colors");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 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 BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  border: 0.071rem solid ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmGrey400);
+// import { BmGrey400 } from "../colors";
+var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), ''
+/* border: 0.071rem solid ${BmGrey400}; */
+);
 
 BmInfoTab.Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  >*:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));

package/dist/components/Lists/listBox.js

@@ -31,7 +31,7 @@ var show = function show(isOpen) {
   return "flex";
 };
 
-var BmListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n  padding: 0.286rem 0rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);\n  border-radius: 0.21875rem;\n  z-index: 99999;\n  cursor: pointer;\n"])), function (props) {
+var BmListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n  padding: 0.286rem 0rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);\n  border-radius: 0.25rem;\n  z-index: 99999;\n  cursor: pointer;\n"])), function (props) {
   return show(props.isOpen);
 }, _colors.BmPrimaryWhite, _colors.BmGrey400);
 

package/dist/components/Tags/tags.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmTag = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _iconStyles = require("../iconStyles");
+
+var _colors = require("../../components/colors");
+
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color"];
+
+var _templateObject;
+
+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 Color = function Color(_ref) {
+  var variant = _ref.variant,
+      color = _ref.color;
+
+  if (variant === "success" || variant === "warning" || variant === "danger") {
+    return "".concat(_colors.BmPrimaryWhite);
+  }
+
+  if (!variant && color) {
+    return color;
+  }
+
+  return "".concat(_colors.BmPrimaryBlack);
+};
+
+var BeemTag = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.214rem 0.571rem;\n  border-radius: 0.25rem;\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  > * {\n    color: ", ";\n    text-transform: uppercase;\n  }\n\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), function (_ref2) {
+  var variant = _ref2.variant;
+  if (variant === "neutral") return "".concat(_colors.BmGrey100);
+  if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+  if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
+  if (variant === "danger") return "".concat(_colors.BmSecondaryRed);
+  if (variant === "light") return "".concat(_colors.BmPrimaryWhite);
+  if (!variant) return "".concat(_colors.BmGrey100);
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  if (variant === "neutral") return "".concat(_colors.BmGrey100);
+  if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+  if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
+  if (variant === "danger") return "".concat(_colors.BmSecondaryRed);
+  if (variant === "light") return "".concat(_colors.BmGrey400);
+  return "".concat(_colors.BmGrey100);
+}, function (_ref4) {
+  var variant = _ref4.variant,
+      color = _ref4.color;
+  return Color({
+    variant: variant,
+    color: color
+  });
+});
+
+var BmTag = function BmTag(props) {
+  var variant = props.variant,
+      size = props.size,
+      disabled = props.disabled,
+      children = props.children,
+      leadingIcon = props.leadingIcon,
+      trailingIcon = props.trailingIcon,
+      color = props.color,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BeemTag, _extends({
+    size: size,
+    variant: variant,
+    disabled: disabled,
+    children: children,
+    color: color
+  }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    disabled: disabled,
+    icon: leadingIcon,
+    variant: variant,
+    color: Color({
+      color: color,
+      variant: variant
+    }),
+    size: size || 'small'
+  }), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: trailingIcon,
+    disabled: disabled,
+    color: Color({
+      color: color,
+      variant: variant
+    }),
+    size: size || 'small'
+  }));
+};
+
+exports.BmTag = BmTag;
+BmTag.propTypes = {
+  children: _propTypes.default.object,
+  trailingIcon: _propTypes.default.node,
+  leadingIcon: _propTypes.default.node,
+  color: _propTypes.default.string,
+  size: _propTypes.default.string,
+  variant: _propTypes.default.string
+};

package/dist/components/Tags/tags.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tabs = void 0;
+
+var _icons = require("@material-ui/icons");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tags = require("./tags");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _tags.BmTag,
+  title: "components/Tags",
+  argTypes: {
+    color: {
+      control: {
+        type: "text"
+      },
+      description: "Color of the Icons and Text, will work only if variant is not present"
+    },
+    size: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the icons",
+      defaultValue: {
+        summary: "small"
+      }
+    },
+    variant: {
+      options: ["success", "warning", "danger", "light", "neutral", undefined],
+      control: {
+        type: "select"
+      },
+      description: "Type of tag",
+      defaultValue: {
+        summary: "neutral"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainTab = function MainTab(args) {
+  return /*#__PURE__*/_react.default.createElement(_tags.BmTag, args);
+};
+
+var Tabs = MainTab.bind({});
+exports.Tabs = Tabs;
+Tabs.args = {
+  children: /*#__PURE__*/_react.default.createElement("p", null, "Tabs"),
+  leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  variant: 'success'
+};

package/dist/components/dropdown.js

@@ -39,7 +39,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmDropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: static;\n  ", "\n  margin: 0rem;\n  padding: 0.5rem 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.21875rem;\n  ", "\n"])), ""
+var BmDropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: static;\n  ", "\n  margin: 0rem;\n  padding: 0.5rem 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  ", "\n"])), ""
 /* box-sizing: border-box; */
 , _colors.BmPrimaryWhite, _colors.BmGrey400, ''
 /* box-shadow: inset 0.071rem 0rem 0rem #afafaf; */

package/dist/components/dropdownItems.js

@@ -29,7 +29,7 @@ var BmCustomizedDropdown = _styledComponents.default.div(_templateObject || (_te
 
 exports.BmCustomizedDropdown = BmCustomizedDropdown;
 
-var BmButtonDropdownItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: ", "};\n  flex-direction: column;\n  ", "\n  padding: 0.286rem 0rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);\n  border-radius: 0.21875rem;\n  z-index: 99999;\n  position: absolute;\n  cursor: pointer;\n  width: 100%;\n"])), ""
+var BmButtonDropdownItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: ", "};\n  flex-direction: column;\n  ", "\n  padding: 0.286rem 0rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);\n  border-radius: 0.25rem;\n  z-index: 99999;\n  position: absolute;\n  cursor: pointer;\n  width: 100%;\n"])), ""
 /* display: inline-block; */
 , function (_ref) {
   var isOpen = _ref.isOpen;

package/dist/components/index.js

@@ -180,6 +180,12 @@ Object.defineProperty(exports, "BmTab", {
     return _tabs.BmTab;
   }
 });
+Object.defineProperty(exports, "BmTag", {
+  enumerable: true,
+  get: function get() {
+    return _tags.BmTag;
+  }
+});
 Object.defineProperty(exports, "BmTagIcon", {
   enumerable: true,
   get: function get() {
@@ -245,6 +251,8 @@ var _loader = require("./Loader/loader");
 
 var _checkbox = require("./checkbox");
 
+var _tags = require("../components/Tags/tags");
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/dist/components/input.js

@@ -68,7 +68,7 @@ var BmInputField = _styledComponents.default.input(_templateObject2 || (_templat
 
 exports.BmInputField = BmInputField;
 
-var BmInputWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: center;\n  align-items: center;\n  height: 2.929rem;\n  border-radius: 0.21875rem;\n  padding: 0rem;\n  background: ", ";\n\n  border: ", ";\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    border: 0.071rem solid ", ";\n  }\n"])), function (_ref4) {
+var BmInputWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: center;\n  align-items: center;\n  height: 2.929rem;\n  border-radius: 0.25rem;\n  padding: 0rem;\n  background: ", ";\n\n  border: ", ";\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    border: 0.071rem solid ", ";\n  }\n"])), function (_ref4) {
   var state = _ref4.state;
 
   if (state) {

package/dist/components/search.js

@@ -33,7 +33,7 @@ var BmSearchField = _styledComponents.default.input(_templateObject || (_templat
   return props.dropdown === "yes" && "margin-right: 1.714rem;";
 });
 
-var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.21875rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ""
+var BmSearchWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, ""
 /* height: 2.929rem; */
 , function (_ref) {
   var dropdown = _ref.dropdown;

package/dist/components/tags.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("./colors");
+var _colors = require("../components/colors");
 
-var _iconStyles = require("./iconStyles");
+var _iconStyles = require("../components/iconStyles");
 
 var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon"];
 
@@ -27,7 +27,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 BeemTag = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.21875rem;\n  height: ", ";\n  padding: ", ";\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  border-radius: 0.21875rem;\n"])), function (_ref) {
+var BeemTag = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  height: ", ";\n  padding: ", ";\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  border-radius: 0.25rem;\n"])), function (_ref) {
   var size = _ref.size;
   if (size === "small") return "1.286rem";
   if (size === "default") return "1.714rem";

package/package.json

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

package/src/App.js

@@ -1,94 +1,38 @@
-import React, { useState } from "react";
+import React from "react";
 import "../src/main.scss";
-import { BmAvatar, BmInput, BmTab, MainWrapper } from "./lib/components";
+import { MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import { BmSideBar } from "./lib/components/sidebar";
 import "./lib/assets/css/sidebar.css";
-import BmChat from "./lib/components/ChatBody/chatBody";
-import { DoneAll, Home, MoreVert, Person, Phone } from "@material-ui/icons";
-import { BmIcons } from "./lib/components/iconStyles";
-import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import BmInfoTab from "./lib/components/InfoTab/infoTab";
-import { BmButton } from "./lib/components/Buttons/buttons";
-import {
-  BmCustomizedDropdown,
-  BmDropDownMenu,
-  BmDropDownItem,
-  BmButtonDropdownItem,
-} from "./lib/components/dropdownItems";
-
-import { BmButtonDropDown } from "./lib/components/dropdownButton";
-import { BmListBox } from "./lib/components/Lists/listBox";
-import { BmRowLabel } from "./lib/components/Lists/rowLabels";
+import SideBar from "./SideBar";
+import ChatHeader from "./ChatHeader";
+import Chat from "./Chat";
+import CustomerInfo from "./CustomerInfo";
+import { BmTag } from "./lib/components/Tags/tags";
+import { Home } from "@material-ui/icons";
 
 export const App = () => {
-  const [dropDownItem, setDropdownItem] = useState(false);
-
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmSideBar>
-          <div className="main-sidebar-tabs">
-            <BmTab state="active" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
-            <BmTab state="inactive" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
-          </div>
-        </BmSideBar>
+        <BmTag leadingIcon={<Home/>} trailingIcon={<Home/>}><p>Hello</p></BmTag>
 
-        <BmChat>
-          <BmChat.Body>
-            <BmChat.Details
-              state="inbound"
-              session="bot"
-              displayTime={<p>12:00pm</p>}
-              status="sent"
-            >
-              <p>Inbound</p>
-            </BmChat.Details>
-            <BmChat.Details
-              state="outbound"
-              session="live"
-              displayTime={<p>10:00am</p>}
-              status="failed"
-            >
-              <p>Outbound</p>
-            </BmChat.Details>
-          </BmChat.Body>
-          <BmChat.Footer>
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </BmChat.Footer>
-        </BmChat>
-        {/* <BmCustomizedDropdown> */}
-        <BmButton>Create Ticket</BmButton>
-        <BmButtonDropDown
-          size="medium"
-          onClick={() => {
-            setDropdownItem(!dropDownItem);
-          }}
-          variant="primary"
-        >
-          Session
-        </BmButtonDropDown>
-        <BmListBox isOpen={dropDownItem}>
-          <BmRowLabel trailingIcon={<Person />} size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-          <BmRowLabel size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-        </BmListBox>
-        {/* </BmCustomizedDropdown> */}
+        <div className="main-chat-container">
+          <div className="sidebar">
+            <SideBar />
+          </div>
+          <div className="chat">
+            <ChatHeader />
+            <div className="chat-menu">
+              <div className="chat-messages">
+                <Chat />
+              </div>
+              <div className="chat-contact-info">
+                <CustomerInfo />
+              </div>
+            </div>
+          </div>
+        </div>
       </MainWrapper>
     </>
   );