beem-component 1.5.6 → 1.5.9

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/checkboxToggler.js

@@ -1,19 +0,0 @@
-import React from "react";
-import Switch from "@material-ui/core/Switch";
-
-export const BmCheckboxToggler = ()  => {
-  const [state, setState] = React.useState(false);
-
-  const handleChange = (event) => {
-    setState({ ...state, [event.target.name]: event.target.checked });
-  };
-
-  return (
-    <Switch
-      checked={state}
-      onChange={handleChange}
-      name="checkedA"
-    //   inputProps={{ "aria-label": "secondary checkbox" }}
-    />
-  );
-}

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;
-`;

package/src/lib/components/tabs.js

@@ -1,123 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryBlue,
-  BmPrimaryWhite,
-} from "./colors";
-import { BmButtonIcon } from "./iconStyles";
-
-export const BmTabItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-  padding: 0rem !important;
-  flex-wrap: wrap;
-`;
-
-export const BmTabWrapper = styled.button`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0.714rem 1.714rem;
-  background: ${BmPrimaryWhite};
-  box-shadow: inset 0rem -0.214rem 0rem ${({ state }) => {
-      if (state === "active") return `${BmPrimaryBlue}`;
-      if (state === "active") return `${BmPrimaryBlue}`;
-      if (state === "disabled") return "transparent";
-      return "transparent";
-    }};
-  &:hover {
-    box-shadow: inset 0rem -0.214rem 0rem ${({ state }) => {
-        if (state === "disabled") return "transparent";
-        return `${BmGrey400}`;
-      }};
-  }
-  border: none;
-`;
-
-export const BmTabText = styled.h3`
-  letter-spacing: -0.02em;
-  color: ${({ state, color }) => {
-    if (state === "disabled") return `${BmGrey400}`;
-    if (color && state !== "disabled") return color;
-    return `${BmPrimaryBlack}`;
-  }};
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-`;
-
-export const BmLeftTabIcon = styled.div`
-  padding-right: 0.714rem !important;
-`;
-
-export const BmRightTabIcon = styled.div`
-  padding-left: 0.714rem !important;
-`;
-
-export const BmTab = (props) => {
-  const {
-    variant,
-    size,
-    disabled,
-    children,
-    leadingIcon,
-    trailingIcon,
-    color,
-    state,
-    ...rest
-  } = props;
-  const IconColor =
-    state === "disabled"
-      ? `${BmGrey400}`
-      : color && state !== "disabled"
-      ? color
-      : `${BmPrimaryBlack}`;
-  return (
-    <BmTabWrapper
-      size={size}
-      variant={variant}
-      disabled={state === "disabled" ? true : false}
-      state={state}
-      {...rest}
-    >
-      {leadingIcon && (
-        <BmLeftTabIcon>
-          <BmButtonIcon
-            icon={leadingIcon}
-            disabled={state === "disabled" ? true : false}
-            variant={variant}
-            size={size}
-            state={state}
-            color={IconColor}
-          />
-        </BmLeftTabIcon>
-      )}
-      <BmTabText
-        disabled={state === "disabled" ? true : false}
-        variant={variant}
-        size={size}
-        state={state}
-        color={color}
-      >
-        {children}
-      </BmTabText>
-      {trailingIcon && (
-        <BmRightTabIcon>
-          <BmButtonIcon
-            icon={trailingIcon}
-            disabled={state === "disabled" ? true : false}
-            state={state}
-            variant={variant}
-            size={size}
-            color={IconColor}
-          />
-        </BmRightTabIcon>
-      )}
-    </BmTabWrapper>
-  );
-};