beem-component 1.8.1 → 1.8.3

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

@@ -8,13 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../../colors");
 var _excluded = ["story", "state", "status", "image"];
-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 BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  flex-direction: column;\n  padding: 0.5rem;\n  width: ", ";\n  max-width: ", ";\n  margin-left: ", ";\n  background-color: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  max-height: ", ";\n  height: ", ";\n"])), function (_ref) {
+var BmFeedPost = _styledComponents.default.div.withConfig({
+  displayName: "FeedPostComments__BmFeedPost"
+})(["display:inline-block;flex-direction:column;padding:0.5rem;width:", ";max-width:", ";margin-left:", ";background-color:", ";border:0.071rem solid ", ";border-radius:0.25rem;max-height:", ";height:", ";"], function (_ref) {
   var image = _ref.image;
   if (image) return '15vw';
   return '20vw';
@@ -45,7 +45,9 @@ var BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObje
   if (image) return '10vw';
   return '100%';
 });
-var MainContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-left: ", ";\n  background-color: ", ";\n  max-height: 80%;\n  height: 80%;\n"])), function (_ref7) {
+var MainContent = _styledComponents.default.div.withConfig({
+  displayName: "FeedPostComments__MainContent"
+})(["display:flex;flex-direction:row;border-left:", ";background-color:", ";max-height:80%;height:80%;"], function (_ref7) {
   var status = _ref7.status;
   if (status) {
     if (status === 'comment') return "0.143rem solid ".concat(_colors.BmSecondaryGreen);
@@ -60,7 +62,9 @@ var MainContent = _styledComponents.default.div(_templateObject2 || (_templateOb
   }
   return "".concat(_colors.BmTransparentBg30);
 });
-var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  word-break: break-word;\n  > * {\n    margin-bottom: 0.5rem;\n    word-break: break-word;\n  }\n  width: ", ";\n  max-width: ", ";\n  padding: 0.5rem;\n"])), function (_ref9) {
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "FeedPostComments__Content"
+})(["display:flex;flex-direction:column;color:", ";word-break:break-word;> *{margin-bottom:0.5rem;word-break:break-word;}width:", ";max-width:", ";padding:0.5rem;"], function (_ref9) {
   var state = _ref9.state;
   if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
   if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -74,8 +78,12 @@ var Content = _styledComponents.default.div(_templateObject3 || (_templateObject
   if (image) return '75%';
   return '100%';
 });
-var Image = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  max-width: 25%;\n  width: 25%;\n"])));
-BmFeedPost.Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  word-break: break-word;\n  > * {\n    word-break: break-word !important;\n  }\n  align-items: center;\n  margin-top: 0.5rem;\n  max-height: 20%;\n  height: 20%;\n  color: ", ";\n"])), function (_ref12) {
+var Image = _styledComponents.default.img.withConfig({
+  displayName: "FeedPostComments__Image"
+})(["max-width:25%;width:25%;"]);
+BmFeedPost.Footer = _styledComponents.default.div.withConfig({
+  displayName: "FeedPostComments__Footer"
+})(["display:flex;flex-direction:row;word-break:break-word;> *{word-break:break-word !important;}align-items:center;margin-top:0.5rem;max-height:20%;height:20%;color:", ";"], function (_ref12) {
   var state = _ref12.state;
   if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
   if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);

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

@@ -19,16 +19,20 @@ var _FeedPostComments = require("./FeedPostComments");
 var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
   _excluded2 = ["state", "src", "fileName"],
   _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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 BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), '' /* border: 0.071rem solid ${BmGrey400}; */);
+var BmChat = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__BmChat"
+})(["display:flex;flex-direction:column;height:100%;", ""], '' /* border: 0.071rem solid ${BmGrey400}; */);
 
-BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n"])));
-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) {
+BmChat.Body = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__Body"
+})(["display:flex;flex-direction:column-reverse;padding:0rem 1rem;flex-grow:1;overflow:auto;height:100%;"]);
+var Details = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__Details"
+})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;flex-grow:1;", ""], function (_ref) {
   var state = _ref.state;
   if (state === 'inbound') {
     return 'flex-start';
@@ -39,8 +43,12 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
   return 'row';
 }, '' /* border: 1px solid red; */);
 
-var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 70%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n"])));
-var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-word;\n  margin: 0rem;\n"])), function (_ref2) {
+var MessageDetails = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__MessageDetails"
+})(["display:flex;flex-direction:column;max-width:70%;> *{margin-top:0.5rem;margin-bottom:0.5rem;}"]);
+var Messages = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__Messages"
+})(["display:flex;flex-direction:row;align-items:center;padding:0.5rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";word-break:break-word;margin:0rem;"], function (_ref2) {
   var state = _ref2.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
@@ -62,7 +70,9 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200);
-var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  margin-left: ", ";\n  margin-top: 0.5rem;\n"])), function (_ref5) {
+var MessagesSubDetails = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__MessagesSubDetails"
+})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], function (_ref5) {
   var state = _ref5.state;
   if (state) {
     if (state === 'inbound') return '0px';
@@ -101,7 +111,9 @@ var handleState = function handleState(_ref6) {
 };
 
 // Start of File Attachment
-var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  flex-direction: row;\n  padding: 1rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  > * {\n    &:last-child {\n      margin-left: auto;\n    }\n    :not(:last-child) {\n      margin-right: 0.5rem;\n    }\n  }\n  &&& > * {\n    align-items: center;\n    color: ", ";\n  }\n  ", "\n  ", "\n"])), function (_ref7) {
+var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__FileAttachmentWrapper"
+})(["display:flex;cursor:pointer;flex-direction:row;padding:1rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], function (_ref7) {
   var state = _ref7.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
@@ -151,7 +163,9 @@ var BmFileAttachment = function BmFileAttachment(_ref11) {
   })));
 };
 // 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 (_ref12) {
+var BmImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__BmImageWrapper"
+})(["display:flex;flex-direction:column;color:", ";border-radius:", ";border:0.071rem solid ", ";"], function (_ref12) {
   var state = _ref12.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
@@ -167,7 +181,9 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200);
 exports.BmImageWrapper = BmImageWrapper;
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), '' /* Fix width */);
+var BmImage = _styledComponents.default.img.withConfig({
+  displayName: "chatBody__BmImage"
+})(["", " width:100%;object-fit:cover;flex-grow:1;"], '' /* Fix width */);
 exports.BmImage = BmImage;
 var BmImageChat = function BmImageChat(_ref14) {
   var state = _ref14.state,
@@ -186,7 +202,9 @@ var BmImageChat = function BmImageChat(_ref14) {
   }, rest))));
 };
 exports.BmImageChat = BmImageChat;
-var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"])));
+var MessageState = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__MessageState"
+})(["@media all and (max-width:960px){display:none;}"]);
 
 // End of Component for Images
 exports.MessageState = MessageState;
@@ -246,6 +264,8 @@ BmChat.Details = function (_ref15) {
     message: sessionDetails.message
   }, rest)));
 };
-BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
+BmChat.Footer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__Footer"
+})(["display:flex;flex-direction:column;padding:0.5rem 0.5rem;> *:not(:last-child){margin-bottom:0.5rem;}"]);
 var _default = BmChat;
 exports.default = _default;

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

@@ -8,13 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../../colors");
 var _excluded = ["message", "time"];
-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 SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n  border-bottom: 0.071rem solid ", ";\n  margin: 1rem 0.5rem;\n"])), _colors.BmGrey200);
+var SessionDetailsWrapper = _styledComponents.default.div.withConfig({
+  displayName: "sessionDetails__SessionDetailsWrapper"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;text-align:center;border-bottom:0.071rem solid ", ";margin:1rem 0.5rem;"], _colors.BmGrey200);
 var SessionDetails = function SessionDetails(_ref) {
   var message = _ref.message,
     time = _ref.time,

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

@@ -8,14 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../../colors");
 var _excluded = ["message", "time"];
-var _templateObject, _templateObject2;
 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 SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem;\n"])));
-var container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;\n  border: 0.071rem solid ", ";\n  padding: 0.5rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue, _colors.BmSecondaryBlue12);
+var SessionTimelineWrapper = _styledComponents.default.div.withConfig({
+  displayName: "sessionTimeline__SessionTimelineWrapper"
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;margin-bottom:0.5rem;margin-top:0.5rem;"]);
+var container = _styledComponents.default.div.withConfig({
+  displayName: "sessionTimeline__container"
+})(["border-radius:0.714rem 0.714rem 0.714rem 0.714rem;border:0.071rem solid ", ";padding:0.5rem;background-color:", ";"], _colors.BmBgGreyBlue, _colors.BmSecondaryBlue12);
 SessionTimelineWrapper.Container = container;
 var SessionTimeline = function SessionTimeline(_ref) {
   var message = _ref.message,

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BmChatHeader = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 // 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"])), '' /* border: 0.071rem solid ${BmGrey400}; */);
+var BmChatHeader = _styledComponents.default.div.withConfig({
+  displayName: "chatHeader__BmChatHeader"
+})(["display:flex;flex-direction:row;align-items:center;", " padding:1rem;> *:not(:last-child){margin-right:0.5rem;}"], '' /* border: 0.071rem solid ${BmGrey400}; */);
 exports.BmChatHeader = BmChatHeader;

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BmColorPicker = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var BmColorPicker = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1.429rem;\n  height: 1.429rem;\n  border-radius: 50%;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), function (props) {
+var BmColorPicker = _styledComponents.default.div.withConfig({
+  displayName: "colorPicker__BmColorPicker"
+})(["width:1.429rem;height:1.429rem;border-radius:50%;background:", ";> *:not(:last-child){margin-right:0.5rem;}"], function (props) {
   return props.color ? props.color : 'green';
 });
 exports.BmColorPicker = BmColorPicker;

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

@@ -6,17 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n  padding: 1rem 1.5rem;\n"])), _colors.BmSecondaryBlue12, function (_ref) {
+var BmContactCard = _styledComponents.default.div.withConfig({
+  displayName: "contactCards__BmContactCard"
+})(["display:flex;flex-direction:row;justify-content:space-between;> *:not(:last-child){margin-right:1rem;}&:hover{background:", ";}", " cursor:pointer;padding:1rem 1.5rem;"], _colors.BmSecondaryBlue12, function (_ref) {
   var active = _ref.active;
   return active && "    \n    background: ".concat(_colors.BmSecondaryBlue12, ";\n  ");
 });
-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"])), '' /* TODO */, '' /* > :last-child {
-                                                                                                                                                                                                                                                                                                                                                                            margin-left: auto;
-                                                                                                                                                                                                                                                                                                                                                                            } */);
+BmContactCard.Profile = _styledComponents.default.div.withConfig({
+  displayName: "contactCards__Profile"
+})(["display:flex;flex-direction:column;justify-content:space-between;align-items:center;"]);
+BmContactCard.Details = _styledComponents.default.div.withConfig({
+  displayName: "contactCards__Details"
+})(["display:flex;flex-direction:column;flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;> *:not(:last-child){margin-bottom:0.5rem;}"]);
+BmContactCard.SubDetails = _styledComponents.default.div.withConfig({
+  displayName: "contactCards__SubDetails"
+})(["display:flex;flex-direction:row;justify-content:space-between;> *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:flex-start;}", " ", ""], '' /* TODO */, '' /* > :last-child {
+                                                                                                                                                                                        margin-left: auto;
+                                                                                                                                                                                        } */);
 var _default = BmContactCard;
 exports.default = _default;

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

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-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 BmChatForm = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
-BmChatForm.Group = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n"])));
-BmChatForm.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0rem;\n  text-align: left;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-BmChatForm.Input = _styledComponents.default.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: right;\n  width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none;\n  }\n  background: transparent;\n"])));
+var BmChatForm = _styledComponents.default.div.withConfig({
+  displayName: "FormAccordion__BmChatForm"
+})(["display:flex;flex-direction:column;padding:0rem 0.5rem;justify-content:space-between;> *:not(:last-child){margin-bottom:0.5rem;}"]);
+BmChatForm.Group = _styledComponents.default.div.withConfig({
+  displayName: "FormAccordion__Group"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;"]);
+BmChatForm.Label = _styledComponents.default.div.withConfig({
+  displayName: "FormAccordion__Label"
+})(["margin:0rem;text-align:left;width:50%;overflow:hidden;text-overflow:ellipsis;"]);
+BmChatForm.Input = _styledComponents.default.input.withConfig({
+  displayName: "FormAccordion__Input"
+})(["text-align:right;width:50%;overflow:hidden;text-overflow:ellipsis;border:none;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;}background:transparent;"]);
 var _default = BmChatForm;
 exports.default = _default;

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

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), '' /* border: 0.071rem solid ${BmGrey400}; */);
+var BmInfoTab = _styledComponents.default.div.withConfig({
+  displayName: "infoTab__BmInfoTab"
+})(["display:flex;flex-direction:column;padding:1.5rem;", " > *:not(:last-child){margin-bottom:1rem;}"], '' /* border: 0.071rem solid ${BmGrey400}; */);
 
-BmInfoTab.Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  > *:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));
+BmInfoTab.Content = _styledComponents.default.div.withConfig({
+  displayName: "infoTab__Content"
+})(["display:flex;flex-direction:row;justify-content:space-between;"]);
+BmInfoTab.Tabs = _styledComponents.default.div.withConfig({
+  displayName: "infoTab__Tabs"
+})(["display:flex;flex-direction:column;> *:not(:first-child){margin-top:0.5rem;}"]);
 var _default = BmInfoTab;
 exports.default = _default;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var BmChatLabels = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
+var BmChatLabels = _styledComponents.default.div.withConfig({
+  displayName: "LabelAccordion__BmChatLabels"
+})(["display:flex;flex-direction:column;padding:0rem 0.5rem;> *:not(:last-child){margin-bottom:1rem;}> *{display:flex;flex-direction:row;justify-content:space-between;width:100%;}"]);
 var _default = BmChatLabels;
 exports.default = _default;

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../../colors");
-var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var BmChatNotes = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
-BmChatNotes.Input = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 1.5rem;\n  display: flex;\n  flex-grow: 1;\n  background: ", ";\n  border: none !important;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none !important;\n  }\n  width: 100%;\n"])), _colors.BmGrey100);
-BmChatNotes.Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 1rem;\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])), _colors.BmGrey200);
+var BmChatNotes = _styledComponents.default.div.withConfig({
+  displayName: "NoteAccordion__BmChatNotes"
+})(["display:flex;flex-direction:column;padding:0rem 0.5rem;> *:not(:last-child){margin-bottom:0.5rem;}"]);
+BmChatNotes.Input = _styledComponents.default.input.withConfig({
+  displayName: "NoteAccordion__Input"
+})(["padding:1rem 1.5rem;display:flex;flex-grow:1;background:", ";border:none !important;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none !important;}width:100%;"], _colors.BmGrey100);
+BmChatNotes.Details = _styledComponents.default.div.withConfig({
+  displayName: "NoteAccordion__Details"
+})(["display:flex;flex-direction:column;padding:0.5rem 1rem;border:1px solid ", ";border-radius:0.25rem;> *:not(:last-child){margin-bottom:0.5rem;}> *{display:flex;flex-direction:row;justify-content:space-between;}"], _colors.BmGrey200);
 var _default = BmChatNotes;
 exports.default = _default;

package/dist/components/Chats/chat.js

@@ -12,33 +12,39 @@ var _iconStyles = require("../iconStyles");
 var _excluded = ["children", "displayTime", "type", "size", "color", "status"],
   _excluded2 = ["children", "displayTime", "type"],
   _excluded3 = ["children", "displayTime", "type"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 BmChatWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem 0.21875rem 0.21875rem 0rem;\n  max-width: 50%;\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), function (_ref) {
+var BmChatWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chat__BmChatWrapper"
+})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:0.25rem 0.21875rem 0.21875rem 0rem;max-width:50%;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], function (_ref) {
   var type = _ref.type;
   if (type) {
-    if (type === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (type === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (type === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (type === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey400);
 exports.BmChatWrapper = BmChatWrapper;
-var BmChatText = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  max-width: 100%;\n  color: ", ";\n"])), function (_ref2) {
+var BmChatText = _styledComponents.default.p.withConfig({
+  displayName: "chat__BmChatText"
+})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";"], function (_ref2) {
   var type = _ref2.type;
   if (type) {
-    if (type === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (type === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (type === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlack);
 });
 exports.BmChatText = BmChatText;
-var BmDisplayTime = _styledComponents.default.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-top: 0.571rem !important;\n  padding-bottom: 1.143rem;\n"])), _colors.BmPrimaryBlack);
+var BmDisplayTime = _styledComponents.default.p.withConfig({
+  displayName: "chat__BmDisplayTime"
+})(["color:", ";padding-top:0.571rem !important;padding-bottom:1.143rem;"], _colors.BmPrimaryBlack);
 exports.BmDisplayTime = BmDisplayTime;
-var BmDisplay = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  ", " {\n    margin-left: 0.5rem;\n  }\n"])), BmDisplayTime);
+var BmDisplay = _styledComponents.default.div.withConfig({
+  displayName: "chat__BmDisplay"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;", "{margin-left:0.5rem;}"], BmDisplayTime);
 exports.BmDisplay = BmDisplay;
 var BmUserChat = function BmUserChat(_ref3) {
   var children = _ref3.children,
@@ -52,42 +58,48 @@ var BmUserChat = function BmUserChat(_ref3) {
     type: type
   }), /*#__PURE__*/_react.default.createElement(BmChatText, _extends({}, rest, {
     type: type
-  }), children)), /*#__PURE__*/_react.default.createElement(BmDisplay, null, type === "outbound" && status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), children)), /*#__PURE__*/_react.default.createElement(BmDisplay, null, type === 'outbound' && status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
-    size: size || "small",
+    size: size || 'small',
     color: color || "".concat(_colors.BmSecondaryGreen)
-  }), type === "outbound" && status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), type === 'outbound' && status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
-    size: size || "small",
+    size: size || 'small',
     color: color || "".concat(_colors.BmPrimaryBlack)
   }), displayTime && /*#__PURE__*/_react.default.createElement(BmDisplayTime, rest, displayTime)));
 };
 
-//File Attachments
+// File Attachments
 exports.BmUserChat = BmUserChat;
-var BmFileWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 3.357rem 3.357rem 3.357rem 0rem;\n  max-width: 50%;\n  align-items: center;\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), function (_ref4) {
+var BmFileWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chat__BmFileWrapper"
+})(["display:flex;flex-direction:row;align-items:center;padding:1.143rem;background:", ";border:0.071rem solid ", ";border-radius:3.357rem 3.357rem 3.357rem 0rem;max-width:50%;align-items:center;overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;"], function (_ref4) {
   var type = _ref4.type;
   if (type) {
-    if (type === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (type === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (type === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (type === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey400);
 exports.BmFileWrapper = BmFileWrapper;
-var BmFileText = _styledComponents.default.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  max-width: 100%;\n  color: ", ";\n  margin: 0rem 1rem 0rem 0.5rem;\n  flex-grow: 1;\n"])), function (_ref5) {
+var BmFileText = _styledComponents.default.p.withConfig({
+  displayName: "chat__BmFileText"
+})(["overflow-wrap:break-word;word-wrap:break-word;max-width:100%;color:", ";margin:0rem 1rem 0rem 0.5rem;flex-grow:1;"], function (_ref5) {
   var type = _ref5.type;
   if (type) {
-    if (type === "inbound") return "".concat(_colors.BmPrimaryBlue);
-    if (type === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (type === 'inbound') return "".concat(_colors.BmPrimaryBlue);
+    if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlue);
 });
 exports.BmFileText = BmFileText;
-var FileIcons = (0, _styledComponents.default)(_iconStyles.BmIcons)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref6) {
+var FileIcons = (0, _styledComponents.default)(_iconStyles.BmIcons).withConfig({
+  displayName: "chat__FileIcons"
+})(["color:", ";"], function (_ref6) {
   var type = _ref6.type;
   if (type) {
-    if (type === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (type === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (type === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (type === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryBlack);
 });
@@ -101,20 +113,26 @@ var BmFileChat = function BmFileChat(_ref7) {
     type: type
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.AttachFile, null),
-    color: type === "outbound" ? "".concat(_colors.BmPrimaryWhite) : "".concat(_colors.BmPrimaryBlue)
+    color: type === 'outbound' ? "".concat(_colors.BmPrimaryWhite) : "".concat(_colors.BmPrimaryBlue)
   }), /*#__PURE__*/_react.default.createElement(BmFileText, {
     type: type
   }, children), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.GetApp, null),
-    color: type === "outbound" ? "".concat(_colors.BmPrimaryWhite) : "".concat(_colors.BmSecondaryGrey)
+    color: type === 'outbound' ? "".concat(_colors.BmPrimaryWhite) : "".concat(_colors.BmSecondaryGrey)
   })), displayTime && /*#__PURE__*/_react.default.createElement(BmDisplayTime, rest, displayTime));
 };
 exports.BmFileChat = BmFileChat;
-var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem 0.21875rem 0rem 0.21875rem;\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  max-height: 50%;\n"])), _colors.BmGrey100, _colors.BmGrey400);
+var BmImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chat__BmImageWrapper"
+})(["background:", ";border:0.071rem solid ", ";border-radius:0.25rem 0.21875rem 0rem 0.21875rem;display:flex;flex-direction:column;max-width:50%;max-height:50%;"], _colors.BmGrey100, _colors.BmGrey400);
 exports.BmImageWrapper = BmImageWrapper;
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n  object-fit: cover;\n  flex-grow: 1;\n"])), "" /* height: 100%; */);
+var BmImage = _styledComponents.default.img.withConfig({
+  displayName: "chat__BmImage"
+})(["width:100%;", " object-fit:cover;flex-grow:1;"], '' /* height: 100%; */);
 exports.BmImage = BmImage;
-var BmImageFileName = (0, _styledComponents.default)(BmFileChat)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0.5rem 1rem;\n  max-width: 100%;\n  border: none;\n  border-top: 0.071rem solid ", ";\n  border-radius: 0rem;\n  display: flex;\n"])), _colors.BmSecondaryGrey);
+var BmImageFileName = (0, _styledComponents.default)(BmFileChat).withConfig({
+  displayName: "chat__BmImageFileName"
+})(["padding:0.5rem 1rem;max-width:100%;border:none;border-top:0.071rem solid ", ";border-radius:0rem;display:flex;"], _colors.BmSecondaryGrey);
 exports.BmImageFileName = BmImageFileName;
 var BmImageChat = function BmImageChat(_ref8) {
   var children = _ref8.children,

package/dist/components/Chats/chatInput.js

@@ -6,20 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.BmSendIconWrapper = exports.BmSend = exports.BmMessageTabInput = exports.BmMessageTab = exports.BmMessage = exports.BmAttachment = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icons = require("@material-ui/icons");
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-var _icons = require("@material-ui/icons");
 var _input = require("../input");
-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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 // Main wrapper
-var BmMessageTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  ", "\n  background: ", ";\n  padding: 0.786rem 1.786rem !important;\n"])), '' /* height: 15%; */, _colors.BmGrey50);
+var BmMessageTab = _styledComponents.default.div.withConfig({
+  displayName: "chatInput__BmMessageTab"
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;", " background:", ";padding:0.786rem 1.786rem !important;"], '' /* height: 15%; */, _colors.BmGrey50);
 exports.BmMessageTab = BmMessageTab;
-var BmMessageTabInput = (0, _styledComponents.default)(_input.BmInputField)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  flex-grow: 1;\n  padding: 0rem !important;\n  border: none !important;\n  &:visited,\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none !important;\n    text-decoration: none !important;\n  }\n  max-width: 100%;\n"])), _colors.BmSecondaryGrey);
+var BmMessageTabInput = (0, _styledComponents.default)(_input.BmInputField).withConfig({
+  displayName: "chatInput__BmMessageTabInput"
+})(["color:", ";flex-grow:1;padding:0rem !important;border:none !important;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none !important;}max-width:100%;"], _colors.BmSecondaryGrey);
 exports.BmMessageTabInput = BmMessageTabInput;
-var BmSendIconWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-left: 1.429rem;\n"])));
+var BmSendIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chatInput__BmSendIconWrapper"
+})(["padding-left:1.429rem;"]);
 exports.BmSendIconWrapper = BmSendIconWrapper;
 var BmSend = function BmSend(props) {
   return /*#__PURE__*/_react.default.createElement(BmSendIconWrapper, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmEmojiIcon, _extends({
@@ -29,9 +33,13 @@ var BmSend = function BmSend(props) {
 
 // Div for attachments
 exports.BmSend = BmSend;
-var BmAttachment = (0, _styledComponents.default)("div")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  justify-content: center;\n  padding-right: 1.143rem !important;\n"])));
+var BmAttachment = (0, _styledComponents.default)('div').withConfig({
+  displayName: "chatInput__BmAttachment"
+})(["justify-content:center;padding-right:1.143rem !important;"]);
 
 // Div for message input
 exports.BmAttachment = BmAttachment;
-var BmMessage = (0, _styledComponents.default)("div")(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.714rem 1.143rem !important;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  flex-grow: 1;\n  max-width: 75%;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
+var BmMessage = (0, _styledComponents.default)('div').withConfig({
+  displayName: "chatInput__BmMessage"
+})(["display:flex;flex-direction:row;align-items:center;padding:0.714rem 1.143rem !important;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;flex-grow:1;max-width:75%;"], _colors.BmPrimaryWhite, _colors.BmGrey400);
 exports.BmMessage = BmMessage;