beem-component 1.8.2 → 1.8.4

package/dist/components/dropdown.js

@@ -9,29 +9,41 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("./colors");
 var _iconStyles = require("./iconStyles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + 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 _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.25rem;\n  ", "\n"])), "" /* box-sizing: border-box; */, _colors.BmPrimaryWhite, _colors.BmGrey400, '' /* box-shadow: inset 0.071rem 0rem 0rem #afafaf; */);
+var BmDropdownWrapper = _styledComponents.default.div.withConfig({
+  displayName: "dropdown__BmDropdownWrapper"
+})(["display:flex;justify-content:center;align-items:center;position:static;", " margin:0rem;padding:0.5rem 1.143rem;background:", ";border:0.071rem solid ", ";border-radius:0.25rem;", ""], '' /* box-sizing: border-box; */, _colors.BmPrimaryWhite, _colors.BmGrey400, '' /* box-shadow: inset 0.071rem 0rem 0rem #afafaf; */);
 
-var BmDropdownBtn = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  text-align: center;\n  letter-spacing: -0.02em;\n  color: ", ";\n  flex: none;\n  flex-grow: 0;\n  margin: 0rem 0rem;\n  padding: 0rem;\n"])), _colors.BmSecondaryGrey);
-var StyledLi = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: left;\n"])));
-var DownIcon = (0, _styledComponents.default)(_iconStyles.BmDropdownIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-left: 1.143rem;\n"])));
-var DropDownContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  background-color: #f9f9f9;\n  min-width: 11.429rem;\n  box-shadow: 0rem 0.571rem 1.143rem 0rem rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])));
+var BmDropdownBtn = _styledComponents.default.div.withConfig({
+  displayName: "dropdown__BmDropdownBtn"
+})(["font-family:Poppins;font-style:normal;font-weight:500;font-size:1rem;line-height:1.5rem;text-align:center;letter-spacing:-0.02em;color:", ";flex:none;flex-grow:0;margin:0rem 0rem;padding:0rem;"], _colors.BmSecondaryGrey);
+var StyledLi = _styledComponents.default.div.withConfig({
+  displayName: "dropdown__StyledLi"
+})(["float:left;"]);
+var DownIcon = (0, _styledComponents.default)(_iconStyles.BmDropdownIcon).withConfig({
+  displayName: "dropdown__DownIcon"
+})(["padding-left:1.143rem;"]);
+var DropDownContent = _styledComponents.default.div.withConfig({
+  displayName: "dropdown__DropDownContent"
+})(["display:block;position:absolute;background-color:#f9f9f9;min-width:11.429rem;box-shadow:0rem 0.571rem 1.143rem 0rem rgba(0,0,0,0.2);z-index:1;"]);
 
 // eslint-disable-next-line no-unused-vars
-var BmDropdownList = (0, _styledComponents.default)(StyledLi)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
-var BmDropdownItem = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0.5rem 1.143rem;\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  text-align: center;\n  letter-spacing: -0.02em;\n  color: ", ";\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n"])), _colors.BmSecondaryGrey);
+var BmDropdownList = (0, _styledComponents.default)(StyledLi).withConfig({
+  displayName: "dropdown__BmDropdownList"
+})(["display:inline-block;"]);
+var BmDropdownItem = _styledComponents.default.button.withConfig({
+  displayName: "dropdown__BmDropdownItem"
+})(["padding:0.5rem 1.143rem;font-family:Poppins;font-style:normal;font-weight:500;font-size:1rem;line-height:1.5rem;text-align:center;letter-spacing:-0.02em;color:", ";flex:none;order:0;flex-grow:0;"], _colors.BmSecondaryGrey);
 var BmDropdown = function BmDropdown(_ref) {
   var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useState = (0, _react.useState)(false),
@@ -50,11 +62,11 @@ var BmDropdown = function BmDropdown(_ref) {
     onClick: toggling
   }, "ANY"), /*#__PURE__*/_react.default.createElement(DownIcon, null), isOpen && /*#__PURE__*/_react.default.createElement(DropDownContent, null, /*#__PURE__*/_react.default.createElement(BmDropdownItem, {
     onClick: function onClick() {
-      return setValue("any");
+      return setValue('any');
     }
   }, "ANY"), /*#__PURE__*/_react.default.createElement(BmDropdownItem, {
     onClick: function onClick() {
-      return setValue("all");
+      return setValue('all');
     }
   }, "ALL")));
 };

package/dist/components/dropdownButton.js

@@ -11,14 +11,16 @@ var _buttonIconsOnly = require("./Buttons/buttonIconsOnly");
 var _buttons = require("./Buttons/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 ? 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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0rem;\n  margin: 0rem;\n"])));
-var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.071rem solid\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 (_ref) {
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "dropdownButton__Wrapper"
+})(["display:flex;padding:0rem;margin:0rem;"]);
+var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig({
+  displayName: "dropdownButton__Drop"
+})(["background:", ";border:0.071rem solid ", ";border-left:0.071rem solid ", ";border-top-left-radius:0.071rem;*/}border-bottom-left-radius:0.071rem;*/}padding:0rem */}"], function (_ref) {
   var variant = _ref.variant,
     disabled = _ref.disabled,
     color = _ref.color;
@@ -69,7 +71,9 @@ var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon)(_templateO
   if (variant === 'tertiary') return 'transparent';
 });
 exports.Drop = Drop;
-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"])));
+var Button = (0, _styledComponents.default)(_buttons.BmButton).withConfig({
+  displayName: "dropdownButton__Button"
+})(["border-top-right-radius:0.071rem;*/}border-bottom-right-radius:0.071rem;*/}border-radius:none;border-right:none;"]);
 exports.Button = Button;
 var BmButtonDropDown = function BmButtonDropDown(_ref4) {
   var children = _ref4.children,

package/dist/components/dropdownItems.js

@@ -9,27 +9,39 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("./colors");
 var _iconStyles = require("./iconStyles");
 var _excluded = ["children", "leadingIcon", "trailingIcon", "color", "size"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 BmCustomizedDropdown = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var BmCustomizedDropdown = _styledComponents.default.div.withConfig({
+  displayName: "dropdownItems__BmCustomizedDropdown"
+})(["display:flex;flex-direction:column;"]);
 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.25rem;\n  z-index: 99999;\n  position: absolute;\n  cursor: pointer;\n  width: 100%;\n"])), "" /* display: inline-block; */, function (_ref) {
+var BmButtonDropdownItem = _styledComponents.default.div.withConfig({
+  displayName: "dropdownItems__BmButtonDropdownItem"
+})(["", " display:", "};flex-direction:column;", " padding:0.286rem 0rem;background:", ";border:0.071rem solid ", ";box-shadow:0rem 0.286rem 0.286rem rgba(0,0,0,0.25);border-radius:0.25rem;z-index:99999;position:absolute;cursor:pointer;width:100%;"], '' /* display: inline-block; */, function (_ref) {
   var isOpen = _ref.isOpen;
-  return isOpen ? "flex" : "none";
+  return isOpen ? 'flex' : 'none';
 }, '' /* align-items: flex-start; */, _colors.BmPrimaryWhite, _colors.BmGrey400);
 exports.BmButtonDropdownItem = BmButtonDropdownItem;
-var BmDropDownMenu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 0.357rem;\n  width: 100%;\n"])));
+var BmDropDownMenu = _styledComponents.default.div.withConfig({
+  displayName: "dropdownItems__BmDropDownMenu"
+})(["position:relative;margin-top:0.357rem;width:100%;"]);
 exports.BmDropDownMenu = BmDropDownMenu;
-var ItemWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.571rem 1.143rem;\n  background: ", ";\n  &:hover {\n    background: ", ";\n  }\n  cursor: pointer;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey100);
+var ItemWrapper = _styledComponents.default.div.withConfig({
+  displayName: "dropdownItems__ItemWrapper"
+})(["display:flex;flex-direction:row;align-items:center;padding:0.571rem 1.143rem;background:", ";&:hover{background:", ";}cursor:pointer;"], _colors.BmPrimaryWhite, _colors.BmGrey100);
 exports.ItemWrapper = ItemWrapper;
-var LeftItemIcon = (0, _styledComponents.default)(_iconStyles.BmIcons)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 0.571rem;\n"])));
+var LeftItemIcon = (0, _styledComponents.default)(_iconStyles.BmIcons).withConfig({
+  displayName: "dropdownItems__LeftItemIcon"
+})(["margin-right:0.571rem;"]);
 exports.LeftItemIcon = LeftItemIcon;
-var RightItemIcon = (0, _styledComponents.default)(_iconStyles.BmIcons)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 0.571rem;\n"])));
+var RightItemIcon = (0, _styledComponents.default)(_iconStyles.BmIcons).withConfig({
+  displayName: "dropdownItems__RightItemIcon"
+})(["margin-left:0.571rem;"]);
 exports.RightItemIcon = RightItemIcon;
-var ItemText = _styledComponents.default.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _colors.BmPrimaryBlack);
+var ItemText = _styledComponents.default.p.withConfig({
+  displayName: "dropdownItems__ItemText"
+})(["color:", ";"], _colors.BmPrimaryBlack);
 exports.ItemText = ItemText;
 var BmDropDownItem = function BmDropDownItem(_ref2) {
   var children = _ref2.children,

package/dist/components/examples/App.js

@@ -58,44 +58,44 @@ var Chat = function Chat() {
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali lingine?")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali lingine?")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), " ", /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound")), ' ', /*#__PURE__*/_react.default.createElement(_components.BmChat.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed"
   }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound"))), /*#__PURE__*/_react.default.createElement(_components.BmChat.Footer, {
     style: {
-      justifyContent: "flex-start"
+      justifyContent: 'flex-start'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     class: "chat-footer"

package/dist/components/examples/chatBodyExample.js

@@ -55,7 +55,7 @@ var App = function App() {
     status: "failed",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
     onDownload: function onDownload() {
-      alert("hello");
+      alert('hello');
     }
   })))));
 };

package/dist/components/examples/selectExample.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _map = _interopRequireDefault(require("lodash/map"));
-var _components = require("./lib/components");
 var _reactSelect = _interopRequireDefault(require("react-select"));
+var _components = require("./lib/components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var App = function App() {
   var _useState = (0, _react.useState)(false),
@@ -24,8 +24,8 @@ var App = function App() {
     showModal = _useState2[0],
     setShowModal = _useState2[1];
   var VENDOR_ACCOUNT_STATUSES = {
-    0: "Inactive",
-    1: "Active"
+    0: 'Inactive',
+    1: 'Active'
   };
   var VENDOR_ACCOUNT_STATUS_OPTIONS = (0, _map.default)(VENDOR_ACCOUNT_STATUSES, function (type, key) {
     return {

package/dist/components/globalStyles.js

@@ -6,7 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStyle = void 0;
 var _styledComponents = require("styled-components");
 var _text = require("./text");
-var _templateObject;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px; cursor: pointer}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  h5 { ", " }\n  h6 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["*{font-size:14px;cursor:pointer}h1{", "}h2{", "}h3{", "}h4{", "}h5{", "}h6{", "}p{", "}input{", "}a{", "}"], _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a);
 exports.GlobalStyle = GlobalStyle;

package/dist/components/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "BmButtonDropDown", {
     return _dropdownButton.BmButtonDropDown;
   }
 });
+Object.defineProperty(exports, "BmButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _buttonGroup.default;
+  }
+});
 Object.defineProperty(exports, "BmCard", {
   enumerable: true,
   get: function get() {
@@ -383,6 +389,7 @@ var _colorPicker = require("./ChatComponents/ColorPicker/colorPicker");
 var _index = require("./SuperFluid/Content/index");
 var _ContentTitle = require("./SuperFluid/ContentTitle.js");
 var _index2 = require("./SuperFluid/SegmentCard/index");
+var _buttonGroup = _interopRequireDefault(require("./ButtonGroup/buttonGroup"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/input.js

@@ -10,13 +10,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _iconStyles = require("./iconStyles");
 var _colors = require("./colors");
 var _excluded = ["id", "iconSize", "label", "state", "action"];
-var _templateObject, _templateObject2, _templateObject3;
 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 BmInputLabel = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-top: 0.5rem;\n"])), function (_ref) {
+var BmInputLabel = _styledComponents.default.div.withConfig({
+  displayName: "input__BmInputLabel"
+})(["color:", ";padding-top:0.5rem;"], function (_ref) {
   var state = _ref.state;
   if (state) {
     if (state === 'incomplete') return "".concat(_colors.BmSecondaryRed);
@@ -24,7 +24,9 @@ var BmInputLabel = _styledComponents.default.div(_templateObject || (_templateOb
   }
   return "".concat(_colors.BmSecondaryGrey);
 });
-var BmInputField = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n  padding: 0.7rem 1rem;\n  color: ", ";\n  border: none;\n  text-align: left;\n  margin: 0rem; /*added */\n\n  ::placeholder {\n    color: ", ";\n  }\n  background: ", ";\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n    color: ", ";\n  }\n  }\n"])), function (_ref2) {
+var BmInputField = _styledComponents.default.input.withConfig({
+  displayName: "input__BmInputField"
+})(["padding:0.7rem 1rem;color:", ";border:none;text-align:left;margin:0rem;::placeholder{color:", ";}background:", ";&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}}"], function (_ref2) {
   var state = _ref2.state;
   if (state) {
     if (state === 'disabled') return "".concat(_colors.BmGrey400);
@@ -43,7 +45,9 @@ var BmInputField = _styledComponents.default.input(_templateObject2 || (_templat
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmPrimaryBlack);
 exports.BmInputField = BmInputField;
-var BmInputWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: center;\n  align-items: center;\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  > * {\n    margin-right: 0.5rem;\n  }\n"])), function (_ref4) {
+var BmInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "input__BmInputWrapper"
+})(["display:inline-flex;flex-direction:center;align-items:center;border-radius:0.25rem;padding:0rem;background:", ";border:", ";&:visited,&:active,&:hover,&:focus{border:0.071rem solid ", ";}> *{margin-right:0.5rem;}"], function (_ref4) {
   var state = _ref4.state;
   if (state) {
     if (state === 'pressed') return "".concat(_colors.BmGrey50);

package/dist/components/logo.js

@@ -7,13 +7,13 @@ exports.Logo = exports.BmLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["src"];
-var _templateObject;
 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 Logo = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 45;\n  width: 9.857rem;\n  ", "\n  box-sizing: border-box;\n"])), "" /* border: 0.071rem solid #33B1BA; */);
+var Logo = _styledComponents.default.img.withConfig({
+  displayName: "logo__Logo"
+})(["height:45;width:9.857rem;", " box-sizing:border-box;"], '' /* border: 0.071rem solid #33B1BA; */);
 exports.Logo = Logo;
 var BmLogo = function BmLogo(_ref) {
   var src = _ref.src,

package/dist/components/navbar.js

@@ -7,31 +7,45 @@ exports.OldBmNavbar = exports.GlobalNavbarWrapper = exports.BmNavbarSearch = exp
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("./colors");
 var _search = require("./search");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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) } })); }
+// import React from 'react';
+
 // Old with NavbarContent Main wrapper for navbar
-var BmNavbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n    padding: 0rem 2.5rem !important;\n    flex-wrap: wrap;\n    ", "\n  }\n"])), _colors.BmPrimaryWhite, "" /* width: 100vw; */);
+var BmNavbar = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbar"
+})(["background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);padding:0rem 2.5rem !important;flex-wrap:wrap;", "}"], _colors.BmPrimaryWhite, '' /* width: 100vw; */);
 
 //  Spacing between the contents of navbar
 exports.BmNavbar = BmNavbar;
-var BmNavbarItems = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.429rem 0rem !important;\n  flex-wrap: wrap;\n"])));
+var BmNavbarItems = _styledComponents.default.div.withConfig({
+  displayName: "navbar__BmNavbarItems"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1.429rem 0rem !important;flex-wrap:wrap;"]);
 exports.BmNavbarItems = BmNavbarItems;
-var GlobalNavbarWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"])));
+var GlobalNavbarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "navbar__GlobalNavbarWrapper"
+})(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;"]);
 
 // Main wrapper for navbar
 exports.GlobalNavbarWrapper = GlobalNavbarWrapper;
-var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex-direction: row;\n    padding: 1.429rem 2.5rem !important;\n    background: ", ";\n    box-shadow:  0rem 0.286rem 0.214rem rgba(0, 0, 0, 0.25);\n  }\n"])), _colors.BmPrimaryWhite);
+var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__OldBmNavbar"
+})(["flex-direction:row;padding:1.429rem 2.5rem !important;background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);}"], _colors.BmPrimaryWhite);
 
 // Navbar Profile Icon Wrapper
 exports.OldBmNavbar = OldBmNavbar;
-var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  @media (max-width: 768px) {\n   display: none !important;\n  }\n"])));
+var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavBarProfile"
+})(["@media (max-width:768px){display:none !important;}"]);
 
 // Navbar Search Icon Wrapper
 exports.BmNavBarProfile = BmNavBarProfile;
-var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 30vw;\n  @media (max-width: 768px) {\n    display: none !important;\n  }\n"])));
+var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch).withConfig({
+  displayName: "navbar__BmNavbarSearch"
+})(["width:30vw;@media (max-width:768px){display:none !important;}"]);
 
 // Navbar Logo Icon Wrapper
 exports.BmNavbarSearch = BmNavbarSearch;
-var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+  displayName: "navbar__BmNavbarLogo"
+})([""]);
 exports.BmNavbarLogo = BmNavbarLogo;

package/dist/components/search.js

@@ -10,25 +10,30 @@ var _colors = require("./colors");
 var _dropdown = require("./dropdown");
 var _iconStyles = require("./iconStyles");
 var _excluded = ["dropdown"];
-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 BmSearchField = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  padding: 0rem;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n    color: ", ";\n  }\n  ", "\n"])), _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
-  return props.dropdown === "yes" && "margin-right: 1.714rem;";
+var BmSearchField = _styledComponents.default.input.withConfig({
+  displayName: "search__BmSearchField"
+})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
+  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.25rem;\n  ", "\n  padding: ", ";\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400, "" /* height: 2.929rem; */, function (_ref) {
+var BmSearchWrapper = _styledComponents.default.div.withConfig({
+  displayName: "search__BmSearchWrapper"
+})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, '' /* height: 2.929rem; */, function (_ref) {
   var dropdown = _ref.dropdown;
-  if (dropdown === "yes") {
-    return "0rem 0rem 0rem 1.143rem";
-  } else {
-    return "0.786rem 1.143rem";
+  if (dropdown === 'yes') {
+    return '0rem 0rem 0rem 1.143rem';
   }
+  return '0.786rem 1.143rem';
 });
-var BmStretch = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
-var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 0.714rem;\n  display: flex;\n"])));
+var BmStretch = _styledComponents.default.div.withConfig({
+  displayName: "search__BmStretch"
+})(["display:flex;flex-direction:row;"]);
+var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
+  displayName: "search__SearchIcon"
+})(["margin-right:0.714rem;display:flex;"]);
 var BmSearch = function BmSearch(_ref2) {
   var dropdown = _ref2.dropdown,
     rest = _objectWithoutProperties(_ref2, _excluded);
@@ -38,6 +43,6 @@ var BmSearch = function BmSearch(_ref2) {
     size: "small"
   }, rest)), /*#__PURE__*/_react.default.createElement(BmSearchField, _extends({}, rest, {
     dropdown: dropdown
-  }))), dropdown === "yes" && /*#__PURE__*/_react.default.createElement(_dropdown.BmDropdown, null)));
+  }))), dropdown === 'yes' && /*#__PURE__*/_react.default.createElement(_dropdown.BmDropdown, null)));
 };
 exports.BmSearch = BmSearch;

package/dist/components/shadow.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmGeneralShadow = void 0;
-var BmGeneralShadow = "0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25)";
+var BmGeneralShadow = '0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25)';
 exports.BmGeneralShadow = BmGeneralShadow;

package/dist/components/wrapper.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BmChatMenuWrapper = exports.BmChatInfoWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
 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 BmChatInfoWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  height: 100%;\n  flex-grow: 1;\n  max-width: 75%;\n  width: 75%;\n  ", "\n  max-height: 100%;\n  height: 100%;\n"])), '' /* border: 0.714rem solid orange; */);
+var BmChatInfoWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatInfoWrapper"
+})(["display:flex;flex-direction:column;max-height:100%;height:100%;flex-grow:1;max-width:75%;width:75%;", " max-height:100%;height:100%;"], '' /* border: 0.714rem solid orange; */);
 exports.BmChatInfoWrapper = BmChatInfoWrapper;
-var BmChatMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-height: 100%;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n  ", "\n  max-height: 85%;\n  height: 85%;\n"])), '' /* border: 0.714rem solid orange; */);
+var BmChatMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "wrapper__BmChatMenuWrapper"
+})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], '' /* border: 0.714rem solid orange; */);
 exports.BmChatMenuWrapper = BmChatMenuWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {
@@ -9,27 +9,37 @@
     "clean": "rimraf dist",
     "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
     "eject": "react-scripts eject",
+    "lint": "eslint --fix --ext .jsx,.js src/",
     "start": "PORT=3002 react-scripts start",
     "storybook": "start-storybook -p 6006",
     "test": "react-scripts test"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix"
     ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+    "*.{md,html}": [
+      "prettier --write"
     ]
   },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": "react-app"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
@@ -50,8 +60,9 @@
     "react-pdf": "^5.7.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.0",
     "save": "^2.4.0",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },
   "devDependencies": {
@@ -62,7 +73,7 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
-    "@commitlint/travis-cli": "^14.1.0",
+    "@commitlint/travis-cli": "^13.2.1",
     "@storybook/addon-actions": "^6.3.2",
     "@storybook/addon-controls": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
@@ -93,6 +104,7 @@
     "generate-changelog": "^1.8.0",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
+    "nock": "^13.2.0",
     "prettier": "^2.7.1",
     "storybook-addon-jsx": "^7.3.14"
   }