beem-component 1.5.6 → 1.5.7

package/src/{App1.js → lib/components/examples/chatBodyExample.js}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { GlobalStyle, BmChat } from "./lib/components";
+import { GlobalStyle, BmChat } from "..";
 import "./list.scss";
-import { ScrollbarWrapper } from "./lib/components/ScrollBar/scrollBar";
+import { ScrollbarWrapper } from "../ScrollBar/scrollBar";
 
 const App = () => {
   return (

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from "styled-components";
-import { h1, h2, h3, h4, p, input, a } from "./text";
+import { h1, h2, h3, h4, h5, h6, p, input, a } from "./text";
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}
@@ -7,10 +7,9 @@ export const GlobalStyle = createGlobalStyle`
   h2 { ${h2} }
   h3 { ${h3} }
   h4 { ${h4} }
+  h5 { ${h5} }
+  h6 { ${h6} }
   p  { ${p} }
   input {${input}}
   a {${a}}
-  ::-webkit-scrollbar-thumb: {
-  background:red;
-  maxHeight: '10px'}
 `;

package/src/lib/components/text.js

@@ -1,12 +1,14 @@
 import { PoppinsMedium, OpenSans } from "./typography";
 
+// 32px
 export const h1 = `font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
-font-size: 2.571rem;
+font-size: 2.286rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
+// 24px
 export const h2 = `font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
@@ -14,6 +16,7 @@ font-size: 1.714rem;
 letter-spacing: -0.02em;
 margin: 0rem;`;
 
+// 18px
 export const h3 = `font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
@@ -21,13 +24,15 @@ font-size: 1.286rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
+// 16px
 export const h4 = ` font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
-font-size: 1rem;
+font-size: 1.143rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
+// 14px
 export const h5 = ` font-family: ${PoppinsMedium};
 font-style: normal;
 font-weight: 500;
@@ -35,6 +40,15 @@ font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
+// 12px
+export const h6 = ` font-family: ${PoppinsMedium};
+font-style: normal;
+font-weight: 500;
+font-size: 0.857rem;
+letter-spacing: -0.02rem;
+margin: 0rem;`;
+
+// 14px
 export const p = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;

package/dist/components/example.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _excluded = ["variant"];
-
-var _variantStyles;
-
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var btnVariants = {
-  primary: "primary",
-  danger: "danger",
-  tertiary: "tertiary"
-}; // Variant styles
-
-var variantStyles = (_variantStyles = {}, _defineProperty(_variantStyles, btnVariants.primary, {
-  background: "#1890ff"
-}), _defineProperty(_variantStyles, btnVariants.danger, {
-  background: "#f81d22"
-}), _defineProperty(_variantStyles, btnVariants.tertiary, {
-  background: "#fff",
-  color: "#000"
-}), _variantStyles);
-
-function BaseButton(_ref) {
-  var variant = _ref.variant,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var btnStyle = _objectSpread({
-    color: "#fff",
-    border: "none",
-    padding: "5px 10px"
-  }, variantStyles[variant]);
-
-  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    style: btnStyle
-  }));
-}

package/dist/components/sidebar.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BmSideBarTab = exports.BmSideBarSearch = exports.BmSideBarBtnIcon = exports.BmSideBar = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _buttonIconsOnly = require("../components/Buttons/buttonIconsOnly");
-
-var _colors = require("./colors");
-
-var _tabs = require("./tabs");
-
-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 BmSideBar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  max-height: 100%;\n  height: 100%;\n  overflow: auto;\n  max-width: 20%;\n  width: 20%;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
-
-exports.BmSideBar = BmSideBar;
-
-var BmSideBarSearch = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: flex-start;\n  align-items: center;\n  padding: 1.714rem !important;\n  flex-wrap: wrap;\n"])));
-
-exports.BmSideBarSearch = BmSideBarSearch;
-var BmSideBarBtnIcon = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 0.571rem;\n"])));
-exports.BmSideBarBtnIcon = BmSideBarBtnIcon;
-var BmSideBarTab = (0, _styledComponents.default)(_tabs.BmTab)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 50%;\n  padding: 1.714rem;\n"])));
-exports.BmSideBarTab = BmSideBarTab;

package/dist/components/tabs.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BmTabWrapper = exports.BmTabText = exports.BmTabItem = exports.BmTab = exports.BmRightTabIcon = exports.BmLeftTabIcon = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("./colors");
-
-var _iconStyles = require("./iconStyles");
-
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "state"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-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 BmTabItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  padding: 0rem !important;\n  flex-wrap: wrap;\n"])));
-
-exports.BmTabItem = BmTabItem;
-
-var BmTabWrapper = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.714rem 1.714rem;\n  background: ", ";\n  box-shadow: inset 0rem -0.214rem 0rem ", ";\n  &:hover {\n    box-shadow: inset 0rem -0.214rem 0rem ", ";\n  }\n  border: none;\n"])), _colors.BmPrimaryWhite, function (_ref) {
-  var state = _ref.state;
-  if (state === "active") return "".concat(_colors.BmPrimaryBlue);
-  if (state === "active") return "".concat(_colors.BmPrimaryBlue);
-  if (state === "disabled") return "transparent";
-  return "transparent";
-}, function (_ref2) {
-  var state = _ref2.state;
-  if (state === "disabled") return "transparent";
-  return "".concat(_colors.BmGrey400);
-});
-
-exports.BmTabWrapper = BmTabWrapper;
-
-var BmTabText = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  letter-spacing: -0.02em;\n  color: ", ";\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n"])), function (_ref3) {
-  var state = _ref3.state,
-      color = _ref3.color;
-  if (state === "disabled") return "".concat(_colors.BmGrey400);
-  if (color && state !== "disabled") return color;
-  return "".concat(_colors.BmPrimaryBlack);
-});
-
-exports.BmTabText = BmTabText;
-
-var BmLeftTabIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-right: 0.714rem !important;\n"])));
-
-exports.BmLeftTabIcon = BmLeftTabIcon;
-
-var BmRightTabIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-left: 0.714rem !important;\n"])));
-
-exports.BmRightTabIcon = BmRightTabIcon;
-
-var BmTab = function BmTab(props) {
-  var variant = props.variant,
-      size = props.size,
-      disabled = props.disabled,
-      children = props.children,
-      leadingIcon = props.leadingIcon,
-      trailingIcon = props.trailingIcon,
-      color = props.color,
-      state = props.state,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var IconColor = state === "disabled" ? "".concat(_colors.BmGrey400) : color && state !== "disabled" ? color : "".concat(_colors.BmPrimaryBlack);
-  return /*#__PURE__*/_react.default.createElement(BmTabWrapper, _extends({
-    size: size,
-    variant: variant,
-    disabled: state === "disabled" ? true : false,
-    state: state
-  }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(BmLeftTabIcon, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmButtonIcon, {
-    icon: leadingIcon,
-    disabled: state === "disabled" ? true : false,
-    variant: variant,
-    size: size,
-    state: state,
-    color: IconColor
-  })), /*#__PURE__*/_react.default.createElement(BmTabText, {
-    disabled: state === "disabled" ? true : false,
-    variant: variant,
-    size: size,
-    state: state,
-    color: color
-  }, children), trailingIcon && /*#__PURE__*/_react.default.createElement(BmRightTabIcon, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmButtonIcon, {
-    icon: trailingIcon,
-    disabled: state === "disabled" ? true : false,
-    state: state,
-    variant: variant,
-    size: size,
-    color: IconColor
-  })));
-};
-
-exports.BmTab = BmTab;

package/dist/components/tags.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BmTag = exports.BmRightIcon = exports.BmLeftIcon = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("../components/colors");
-
-var _iconStyles = require("../components/iconStyles");
-
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon"];
-
-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 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";
-  return "1.714rem";
-}, function (_ref2) {
-  var size = _ref2.size;
-  if (size === "small") return "0.071rem 0.571rem";
-  if (size === "default") return "0.214rem 0.571rem";
-  return "0.214rem 0.571rem";
-}, 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 === "error") return "".concat(_colors.BmSecondaryRed);
-  if (variant === "light") return "".concat(_colors.BmPrimaryWhite);
-  if (variant === undefined) return "".concat(_colors.BmGrey100);
-  return variant;
-}, function (_ref4) {
-  var variant = _ref4.variant;
-  if (variant === "neutral") return "".concat(_colors.BmGrey100);
-  if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
-  if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
-  if (variant === "error") return "".concat(_colors.BmSecondaryRed);
-  if (variant === "light") return "".concat(_colors.BmGrey400);
-  return "".concat(_colors.BmGrey100);
-});
-
-var TagText = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-transform: uppercase;\n"])), function (_ref5) {
-  var variant = _ref5.variant;
-  if (variant === "light" || variant === "neutral") return "".concat(_colors.BmPrimaryBlack);
-  return "".concat(_colors.BmPrimaryWhite);
-});
-
-var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: 0.643rem;\n"])));
-exports.BmLeftIcon = BmLeftIcon;
-var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmTagIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.643rem;\n"])));
-exports.BmRightIcon = BmRightIcon;
-
-var BmTag = function BmTag(props) {
-  var variant = props.variant,
-      size = props.size,
-      disabled = props.disabled,
-      children = props.children,
-      leadingIcon = props.leadingIcon,
-      trailingIcon = props.trailingIcon,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(BeemTag, _extends({
-    size: size,
-    variant: variant,
-    disabled: disabled
-  }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(BmLeftIcon, {
-    disabled: disabled,
-    icon: leadingIcon,
-    variant: variant,
-    size: size
-  }), /*#__PURE__*/_react.default.createElement(TagText, {
-    disabled: disabled,
-    variant: variant,
-    size: size
-  }, children), trailingIcon && /*#__PURE__*/_react.default.createElement(BmRightIcon, {
-    icon: trailingIcon,
-    disabled: disabled,
-    variant: variant,
-    size: size
-  }));
-};
-
-exports.BmTag = BmTag;

package/src/ChatHeader.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { BmChatHeader, BmButton } from "../src/lib/components/";
-import "../src/lib/assets/css/sidebar.scss";
-
-export const ChatHeader = () => {
-  return (
-    <>
-      <div className="chat-header">
-        <BmChatHeader>
-          <h2>Contact Name</h2>
-          <p>Last seen: 00:00</p>
-          <div className="chat-header-buttons">
-            <BmButton size="medium">End Session</BmButton>
-            <BmButton size="medium">End Session</BmButton>
-          </div>
-        </BmChatHeader>
-      </div>
-    </>
-  );
-};
-
-export default ChatHeader;

package/src/CustomerInfo.js

@@ -1,46 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { BmBtnIcon, BmInfoTab, BmIcons } from '../src/lib/components/';
-import CallIcon from '@material-ui/icons/Call';
-import EmailIcon from '@material-ui/icons/Email';
-import NoteAddIcon from '@material-ui/icons/NoteAdd';
-import AddIcon from '@material-ui/icons/Add';
-import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
-import { MoreVert } from '@material-ui/icons';
-
-const CustomerInfo = () => {
-  return (
-    <>
-      <BmInfoTab>
-        <BmInfoTab.Content>
-          <h3>Contact Name</h3>
-          <BmIcons icon={<MoreVert />} />
-        </BmInfoTab.Content>
-        <BmInfoTab.Content>
-          <BmInfoTab.Tabs>
-            <BmBtnIcon icon={<CallIcon />} />
-            <h4>Call</h4>
-          </BmInfoTab.Tabs>
-          <BmInfoTab.Tabs>
-            <BmBtnIcon icon={<EmailIcon />} />
-            <h4>Email</h4>
-          </BmInfoTab.Tabs>
-          <BmInfoTab.Tabs>
-            <BmBtnIcon icon={<NoteAddIcon />} />
-            <h4>Note</h4>
-          </BmInfoTab.Tabs>
-          <BmInfoTab.Tabs>
-            <BmBtnIcon icon={<AddIcon />} />
-            <h4>Log</h4>
-          </BmInfoTab.Tabs>
-          <BmInfoTab.Tabs>
-            <BmBtnIcon icon={<PriorityHighIcon />} variant="enabled" />
-            <h4>Priority</h4>
-          </BmInfoTab.Tabs>
-        </BmInfoTab.Content>
-      </BmInfoTab>
-    </>
-  );
-};
-
-export default CustomerInfo;

package/src/MainChat.js

@@ -1,41 +0,0 @@
-import React from "react";
-import "../src/main.scss";
-import { MainWrapper } from "./lib/components";
-import { GlobalStyle } from "./lib/components/globalStyles";
-import "./lib/assets/css/sidebar.scss";
-import SideBar from "./SideBar";
-import ChatHeader from "./ChatHeader";
-import Chat from "./Chat";
-import CustomerInfo from "./CustomerInfo";
-import InfoAccordion from "./InfoAccordion";
-
-export const App = () => {
-  return (
-    <>
-      <GlobalStyle />
-      <MainWrapper>
-        <div className="main-chat-container">
-          <div className="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 />
-                  <InfoAccordion />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </MainWrapper>
-    </>
-  );
-};
-
-export default App;

package/src/SideBar.js

@@ -1,81 +0,0 @@
-import React from "react";
-import { BmTab } from "./lib/components/Tabs/tabs";
-import { BmTag } from "./lib/components/Tags/tags";
-import ForumIcon from "@material-ui/icons/Forum";
-import { BmContactCard, BmAvatar, BmCounter } from "./lib/components";
-
-const SideBar = () => {
-  return (
-    <>
-      <div className="main-sidebar-tabs">
-        <BmTab
-          state="active"
-          className="sidebar-tabs"
-          leadingIcon={<ForumIcon />}
-        >
-          <h3>Chats</h3>
-        </BmTab>
-      </div>
-      <div className="sidebar-contacts">
-        <BmContactCard>
-          <BmContactCard.Profile>
-            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
-          </BmContactCard.Profile>
-          <BmContactCard.Details>
-            <BmContactCard.SubDetails>
-              <h3>Contact Names</h3>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              <p>Message text</p>
-              <BmCounter>10</BmCounter>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              <BmTag variant="success">
-                <p>label</p>
-              </BmTag>
-              <p>10:00 am</p>
-            </BmContactCard.SubDetails>
-          </BmContactCard.Details>
-        </BmContactCard>
-        <BmContactCard>
-          <BmContactCard.Profile>
-            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
-          </BmContactCard.Profile>
-          <BmContactCard.Details>
-            <BmContactCard.SubDetails>
-              <h3>Contact Names</h3>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              <p>Message text</p>
-              <BmCounter>10</BmCounter>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              <BmTag variant="success">label</BmTag>
-              <p>10:00 am</p>
-            </BmContactCard.SubDetails>
-          </BmContactCard.Details>
-        </BmContactCard>
-        <BmContactCard>
-          <BmContactCard.Profile>
-            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
-          </BmContactCard.Profile>
-          <BmContactCard.Details>
-            <BmContactCard.SubDetails>
-              <h3>Contact Names</h3>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              <p>Message text</p>
-              <BmCounter>10</BmCounter>
-            </BmContactCard.SubDetails>
-            <BmContactCard.SubDetails>
-              {/* <BmTag variant="success">label</BmTag> */}
-              <p>10:00 am</p>
-            </BmContactCard.SubDetails>
-          </BmContactCard.Details>
-        </BmContactCard>
-      </div>
-    </>
-  );
-};
-
-export default SideBar;

package/src/lib/components/example.js

@@ -1,30 +0,0 @@
-const btnVariants = {
-  primary: "primary",
-  danger: "danger",
-  tertiary: "tertiary",
-};
-
-// Variant styles
-const variantStyles = {
-  [btnVariants.primary]: {
-    background: "#1890ff",
-  },
-  [btnVariants.danger]: {
-    background: "#f81d22",
-  },
-  [btnVariants.tertiary]: {
-    background: "#fff",
-    color: "#000",
-  },
-};
-
-function BaseButton({ variant, ...props }) {
-  const btnStyle = {
-    color: "#fff",
-    border: "none",
-    padding: "5px 10px",
-    ...variantStyles[variant],
-  };
-
-  return <button {...props} style={btnStyle} />;
-}

package/src/lib/components/sidebar.js

@@ -1,33 +0,0 @@
-import styled from "styled-components";
-import { BmBtnIcon } from "../components/Buttons/buttonIconsOnly";
-import { BmGrey400, BmPrimaryWhite } from "./colors";
-import { BmTab } from "./tabs";
-
-export const BmSideBar = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: ${BmPrimaryWhite};
-  border: 0.071rem solid ${BmGrey400};
-  max-height: 100%;
-  height: 100%;
-  overflow: auto;
-  max-width: 20%;
-  width: 20%;
-`;
-
-export const BmSideBarSearch = styled.div`
-  display: flex;
-  flex-direction: flex-start;
-  align-items: center;
-  padding: 1.714rem !important;
-  flex-wrap: wrap;
-`;
-
-export const BmSideBarBtnIcon = styled(BmBtnIcon)`
-  margin-left: 0.571rem;
-`;
-
-export const BmSideBarTab = styled(BmTab)`
-  width: 50%;
-  padding: 1.714rem;
-`;