beem-component 1.5.8 → 1.6.1

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

@@ -39,7 +39,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ""
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ''
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
@@ -48,16 +48,16 @@ BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n  ", "\n"])), function (_ref) {
   var state = _ref.state;
 
-  if (state === "inbound") {
-    return "flex-start";
+  if (state === 'inbound') {
+    return 'flex-start';
   }
 
-  if (state === "outbound") {
-    return "flex-end";
+  if (state === 'outbound') {
+    return 'flex-end';
   }
 
-  return "row";
-}, ""
+  return 'row';
+}, ''
 /* border: 1px solid red; */
 );
 
@@ -67,8 +67,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref2.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -76,8 +76,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref3.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -85,8 +85,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref4.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -97,19 +97,26 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 var handleState = function handleState(_ref5) {
   var session = _ref5.session;
 
-  if (session === "bot") {
+  if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "chatbot"
     });
   }
 
-  if (session === "live") {
+  if (session === 'live') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
     });
   }
+
+  if (session === 'sms') {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "sms"
+    });
+  }
 }; // Start of File Attachment
 
 
@@ -117,8 +124,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref6.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -126,8 +133,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref7.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -135,8 +142,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref8.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -144,14 +151,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref9.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, ""
+}, ''
 /* max-width: 100%; */
-, ""
+, ''
 /* max-height: 100%; */
 );
 
@@ -171,15 +178,15 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
     icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
     onClick: onDownload
   }));
-}; //Start of Component for Images
+}; // Start of Component for Images
 
 
 var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n"])), function (_ref11) {
   var state = _ref11.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -187,8 +194,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref12.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -196,7 +203,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
 /* Fix width */
 );
 
@@ -222,7 +229,7 @@ var BmImageChat = function BmImageChat(_ref13) {
 
 exports.BmImageChat = BmImageChat;
 
-var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"]))); //End of Component for Images
+var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"]))); // End of Component for Images
 
 
 exports.MessageState = MessageState;
@@ -244,7 +251,7 @@ BmChat.Details = function (_ref14) {
     message: sessionDetails.message
   }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
-  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
+  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state: state,
     session: session
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -257,15 +264,15 @@ BmChat.Details = function (_ref14) {
     file: file,
     fileName: fileName,
     state: state
-  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
     color: "".concat(_colors.BmSecondaryDarkGreen),
     size: "small"
-  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
     session: session
   }))));

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

@@ -7,10 +7,6 @@ exports.default = exports.ChatBody = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _chatBody = _interopRequireDefault(require("./chatBody"));
-
-var _iconStyles = require("../../iconStyles");
-
 var _EmojiEmotions = _interopRequireDefault(require("@mui/icons-material/EmojiEmotions"));
 
 var _AttachFile = _interopRequireDefault(require("@mui/icons-material/AttachFile"));
@@ -19,6 +15,10 @@ var _Quickreply = _interopRequireDefault(require("@mui/icons-material/Quickreply
 
 var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
 
+var _iconStyles = require("../../iconStyles");
+
+var _chatBody = _interopRequireDefault(require("./chatBody"));
+
 var _input = require("../../input");
 
 var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"));
@@ -36,7 +36,7 @@ exports.default = _default;
 var ChatBody = function ChatBody() {
   return /*#__PURE__*/_react.default.createElement(_chatBody.default, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Body, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",
-    session: "bot",
+    session: "sms",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent",
     sessionDetails: {

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

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 // import { BmGrey400 } from "../colors";
-var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ""
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ''
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 

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

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _chatHeader.BmChatHeader,
-  title: "components/Chat/MainChat/ChatHeader"
+  title: 'components/Chat/MainChat/ChatHeader'
 };
 exports.default = _default;
 

package/dist/components/ChatComponents/ColorPicker/colorPicker.stories.js

@@ -5,18 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorPicker = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _colorPicker = require("./colorPicker");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // eslint-disable-next-line import/no-anonymous-default-export
 var _default = {
   component: _colorPicker.BmColorPicker,
-  title: "components/Chat/Components/ColorPicker"
+  title: 'components/Chat/Components/ColorPicker'
 };
 exports.default = _default;
 
 var ColorPicker = function ColorPicker() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, ["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map(function (color) {
-    return /*#__PURE__*/React.createElement(_colorPicker.BmColorPicker, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['#33b1ba', '#000000', '#F62E48', '#8CC63F'].map(function (color) {
+    return /*#__PURE__*/_react.default.createElement(_colorPicker.BmColorPicker, {
       key: color,
       color: color
     });

package/dist/components/ChatComponents/ContactCards/contactCards.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BmContactCard = void 0;
+exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -20,7 +20,6 @@ var BmContactCard = _styledComponents.default.div(_templateObject || (_templateO
   return active && "    \n    background: ".concat(_colors.BmSecondaryBlue12, ";\n  ");
 });
 
-exports.BmContactCard = BmContactCard;
 BmContactCard.Profile = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));
 BmContactCard.Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
 BmContactCard.SubDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > * {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    align-items: flex-start;\n  }\n  ", "\n  ", "\n"])), ''

package/dist/components/ChatComponents/ContactCards/contactCards.stories.js

@@ -25,7 +25,7 @@ var _default = {
     BmTag: _tags.BmTag,
     BmCounter: _messageCounter.default
   },
-  title: "components/Chat/Components/ContactCard"
+  title: 'components/Chat/Components/ContactCard'
 };
 exports.default = _default;
 

package/dist/components/ChatComponents/FormAccordion/FormAccordion.stories.js

@@ -5,23 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormAccordion = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _ = require("../..");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // eslint-disable-next-line import/no-anonymous-default-export
 var _default = {
   component: _.BmChatForm,
-  title: "components/Chat/Components/FormAccordion"
+  title: 'components/Chat/Components/FormAccordion'
 };
 exports.default = _default;
 
 var FormAccordion = function FormAccordion() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: "30%"
+      width: '30%'
     }
-  }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Information")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatForm, null, /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Account No.")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
+  }, /*#__PURE__*/_react.default.createElement(_.BmAccordion, null, /*#__PURE__*/_react.default.createElement(_.BmAccordion.Title, null, /*#__PURE__*/_react.default.createElement("h3", null, "Information")), /*#__PURE__*/_react.default.createElement(_.BmAccordion.Body, null, /*#__PURE__*/_react.default.createElement(_.BmChatForm, null, /*#__PURE__*/_react.default.createElement(_.BmChatForm.Group, null, /*#__PURE__*/_react.default.createElement(_.BmChatForm.Label, null, /*#__PURE__*/_react.default.createElement("h4", null, "Account No.")), /*#__PURE__*/_react.default.createElement(_.BmChatForm.Input, {
     placeholder: "Enter here"
-  })), /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Preferred Language")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
+  })), /*#__PURE__*/_react.default.createElement(_.BmChatForm.Group, null, /*#__PURE__*/_react.default.createElement(_.BmChatForm.Label, null, /*#__PURE__*/_react.default.createElement("h4", null, "Preferred Language")), /*#__PURE__*/_react.default.createElement(_.BmChatForm.Input, {
     placeholder: "Enter here"
   })))))));
 };

package/dist/components/ChatComponents/InfoTab/infoTab.js

@@ -18,6 +18,6 @@ var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObjec
 );
 
 BmInfoTab.Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  >*:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));
+BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  > *:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));
 var _default = BmInfoTab;
 exports.default = _default;

package/dist/components/ChatComponents/InfoTab/infoTab.stories.js

@@ -7,12 +7,12 @@ exports.default = exports.InfoTab = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _icons = require("@material-ui/icons");
+
 var _infoTab = _interopRequireDefault(require("./infoTab"));
 
 var _buttonIconsOnly = require("../../Buttons/buttonIconsOnly");
 
-var _icons = require("@material-ui/icons");
-
 var _iconStyles = require("../../iconStyles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,14 +20,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _infoTab.default,
-  title: "components/Chat/Components/InfoTab"
+  title: 'components/Chat/Components/InfoTab'
 };
 exports.default = _default;
 
 var InfoTab = function InfoTab() {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      maxWidth: "30%"
+      maxWidth: '30%'
     }
   }, /*#__PURE__*/_react.default.createElement(_infoTab.default, null, /*#__PURE__*/_react.default.createElement(_infoTab.default.Content, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.MoreVert, null)

package/dist/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js

@@ -5,27 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.LabelAccordion = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _ = require("../..");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
 // eslint-disable-next-line import/no-anonymous-default-export
 var _default = {
   component: _.BmChatLabels,
-  title: "components/Chat/Components/LabelAccordion"
+  title: 'components/Chat/Components/LabelAccordion'
 };
 exports.default = _default;
 
 var LabelAccordion = function LabelAccordion() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: "30%"
+      width: '30%'
     }
-  }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Labels"), /*#__PURE__*/React.createElement("a", null, "Manage Labels")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatLabels, null, /*#__PURE__*/React.createElement("h4", null, "Added labels"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmTag, {
+  }, /*#__PURE__*/_react.default.createElement(_.BmAccordion, null, /*#__PURE__*/_react.default.createElement(_.BmAccordion.Title, null, /*#__PURE__*/_react.default.createElement("h3", null, "Labels"), /*#__PURE__*/_react.default.createElement("a", null, "Manage Labels")), /*#__PURE__*/_react.default.createElement(_.BmAccordion.Body, null, /*#__PURE__*/_react.default.createElement(_.BmChatLabels, null, /*#__PURE__*/_react.default.createElement("h4", null, "Added labels"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmTag, {
     variant: "success"
-  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "label")), /*#__PURE__*/_react.default.createElement(_.BmTag, {
     variant: "warning"
-  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "label")), /*#__PURE__*/_react.default.createElement(_.BmTag, {
     variant: "error"
-  }, /*#__PURE__*/React.createElement("p", null, "label"))))))));
+  }, /*#__PURE__*/_react.default.createElement("p", null, "label"))))))));
 };
 
 exports.LabelAccordion = LabelAccordion;

package/dist/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js

@@ -5,39 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.NoteAccordion = void 0;
 
-var _ = require("../..");
+var _react = _interopRequireDefault(require("react"));
 
 var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
 
 var _icons = require("@material-ui/icons");
 
+var _ = require("../..");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line import/no-anonymous-default-export
 var _default = {
   component: _.BmChatLabels,
-  title: "components/Chat/Components/NoteAccordion"
+  title: 'components/Chat/Components/NoteAccordion'
 };
 exports.default = _default;
 
 var NoteAccordion = function NoteAccordion() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: "30%"
+      width: '30%'
     }
-  }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Notes")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatNotes, null, /*#__PURE__*/React.createElement(_.BmChatNotes.Input, {
+  }, /*#__PURE__*/_react.default.createElement(_.BmAccordion, null, /*#__PURE__*/_react.default.createElement(_.BmAccordion.Title, null, /*#__PURE__*/_react.default.createElement("h3", null, "Notes")), /*#__PURE__*/_react.default.createElement(_.BmAccordion.Body, null, /*#__PURE__*/_react.default.createElement(_.BmChatNotes, null, /*#__PURE__*/_react.default.createElement(_.BmChatNotes.Input, {
     type: "text",
     placeholder: "Add Note"
-  }), /*#__PURE__*/React.createElement(_.BmChatNotes.Details, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmIcons, {
-    icon: /*#__PURE__*/React.createElement(_icons.Edit, null),
+  }), /*#__PURE__*/_react.default.createElement(_.BmChatNotes.Details, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Description")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Edit, null),
     size: "xsmall"
-  }), /*#__PURE__*/React.createElement(_.BmIcons, {
-    icon: /*#__PURE__*/React.createElement(_ContentCopy.default, null),
+  }), /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_ContentCopy.default, null),
     size: "xsmall"
-  }), /*#__PURE__*/React.createElement(_.BmIcons, {
-    icon: /*#__PURE__*/React.createElement(_icons.Delete, null),
+  }), /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Delete, null),
     size: "xsmall"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "By User")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "12:00pm")))))))));
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("i", null, "By User")), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("i", null, "12:00pm")))))))));
 };
 
 exports.NoteAccordion = NoteAccordion;

package/dist/components/Checkbox/checkboxToggler.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmCheckboxToggle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var CheckBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])));
+
+var CheckBoxLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 3rem;\n  height: 1.25rem;\n  border-radius: 1.25rem;\n  background: ", ";\n  cursor: pointer;\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 100%;\n    width: 1.75rem;\n    height: 1.75rem;\n    background: ", ";\n    transition: 0.2s;\n  }\n"])), function (props) {
+  return props.disabled ? _colors.BmGrey400 : _colors.BmBgGrey38;
+}, _colors.BmGrey200);
+
+var Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));
+
+var CheckBox = _styledComponents.default.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  opacity: 0;\n  z-index: 1;\n    ", "\n  }\n"])), function (_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled;
+  return !disabled && checked !== undefined && checked === true && "\n      &:checked + ".concat(CheckBoxLabel, " {\n        background: ").concat(_colors.BmSecondaryDarkGreen, ";\n        &::after {\n          content: '';\n          display: block;\n          width: 1.75rem;\n          height: 1.75rem;\n          margin-left: 1.25rem;\n          transition: 0.2s;\n        }  ");
+});
+
+var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
+  var checked = _ref2.checked,
+      _onChange = _ref2.onChange,
+      disabled = _ref2.disabled,
+      label = _ref2.label;
+  return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: label,
+    disabled: disabled
+  }, label), /*#__PURE__*/_react.default.createElement(CheckBox, {
+    id: label || 'checkbox',
+    type: "checkbox",
+    checked: checked,
+    onChange: function onChange() {
+      return _onChange && _onChange(!checked);
+    },
+    disabled: disabled,
+    hidden: true
+  }), /*#__PURE__*/_react.default.createElement(CheckBoxLabel, {
+    htmlFor: label || 'checkbox',
+    disabled: disabled
+  }));
+};
+
+exports.BmCheckboxToggle = BmCheckboxToggle;
+BmCheckboxToggle.propTypes = {
+  checked: _propTypes.default.bool.isRequired,
+  label: _propTypes.default.object,
+  onChange: _propTypes.default.func.isRequired
+};