beem-component 1.5.9 → 1.6.2

package/dist/components/Buttons/buttonDropdown.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +13,8 @@ var _buttonIconsOnly = require("./buttonIconsOnly");
 
 var _buttons = require("./buttons");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var BmButtonDropdown = function BmButtonDropdown(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {

package/dist/components/Buttons/buttonIconsOnly.js

@@ -1,27 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmIconWrapper = exports.BmBtnIcon = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
 var _excluded = ["variant", "size", "disabled", "children", "icon", "color"];
 
-var BeemButtonIcon = _styledComponents.default.button.withConfig({
-  displayName: "buttonIconsOnly__BeemButtonIcon"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;padding:0rem;"], function (_ref) {
+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 BeemButtonIcon = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  border: 0.071rem solid\n    ", ";\n  box-sizing: border-box;\n  border-radius: 0.25rem;\n  padding: 0rem;\n"])), function (_ref) {
   var variant = _ref.variant,
       disabled = _ref.disabled,
       color = _ref.color;
@@ -59,9 +67,7 @@ var BeemButtonIcon = _styledComponents.default.button.withConfig({
   return "".concat(_colors.BmGrey100);
 });
 
-var BmIconWrapper = _styledComponents.default.div.withConfig({
-  displayName: "buttonIconsOnly__BmIconWrapper"
-})(["padding:0.5rem !important;"]);
+var BmIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0.5rem !important;\n"])));
 
 exports.BmIconWrapper = BmIconWrapper;
 
@@ -72,8 +78,9 @@ var BmBtnIcon = function BmBtnIcon(props) {
       children = props.children,
       icon = props.icon,
       color = props.color,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(BeemButtonIcon, Object.assign({
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BeemButtonIcon, _extends({
     color: color,
     size: size,
     variant: variant,
@@ -87,4 +94,11 @@ var BmBtnIcon = function BmBtnIcon(props) {
   })));
 };
 
-exports.BmBtnIcon = BmBtnIcon;
+exports.BmBtnIcon = BmBtnIcon;
+BmBtnIcon.propTypes = {
+  size: _propTypes.default.string,
+  variant: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  color: _propTypes.default.string,
+  disabled: _propTypes.default.bool
+};

package/dist/components/Buttons/buttons.js

@@ -1,18 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmRightIcon = exports.BmLeftIcon = exports.BmButton = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _polished = require("polished");
 
 var _colors = require("../colors");
@@ -23,9 +21,19 @@ var _text = require("../text");
 
 var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color"];
 
-var ButtonText = _styledComponents.default.div.withConfig({
-  displayName: "buttons__ButtonText"
-})(["", " text-align:center;color:", ";padding:0rem;"], function (_ref) {
+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 ButtonText = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  text-align: center;\n  color: ", ";\n  padding: 0rem;\n"])), function (_ref) {
   var size = _ref.size;
   if (size === 'large') return "".concat(_text.h3);
   if (size === 'medium') return "".concat(_text.h3);
@@ -49,9 +57,7 @@ var ButtonText = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmGrey400);
 });
 
-var BeemButton = _styledComponents.default.button.withConfig({
-  displayName: "buttons__BeemButton"
-})(["display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:0.25rem;padding:", ";background:", ";border:0.071rem solid ", ";&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
+var BeemButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding: ", ";\n  background: ", ";\n\n  border: 0.071rem solid\n    ", ";\n\n  &:hover {\n    background: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n  &:active {\n    background: ", ";\n    box-shadow: ", ";\n    border: 0.071rem solid\n      ", ";\n  }\n\n  &:hover ", " {\n    color: ", ";\n  }\n  &:active ", " {\n    color: ", ";\n  }\n"])), function (_ref3) {
   var size = _ref3.size;
   if (size === 'large') return '0.625rem 1.5rem';
   if (size === 'medium') return '0.4375rem 1rem';
@@ -173,13 +179,9 @@ var BeemButton = _styledComponents.default.button.withConfig({
   }
 });
 
-var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
-  displayName: "buttons__BmLeftIcon"
-})(["margin-right:0.5rem;"]);
+var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: 0.5rem;\n"])));
 exports.BmLeftIcon = BmLeftIcon;
-var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
-  displayName: "buttons__BmRightIcon"
-})(["margin-left:0.5rem;"]);
+var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.5rem;\n"])));
 exports.BmRightIcon = BmRightIcon;
 
 var BmButton = function BmButton(props) {
@@ -190,8 +192,9 @@ var BmButton = function BmButton(props) {
       leadingIcon = props.leadingIcon,
       trailingIcon = props.trailingIcon,
       color = props.color,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(BeemButton, Object.assign({
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BeemButton, _extends({
     size: size,
     variant: variant,
     disabled: disabled,
@@ -217,4 +220,12 @@ var BmButton = function BmButton(props) {
   }));
 };
 
-exports.BmButton = BmButton;
+exports.BmButton = BmButton;
+BmButton.propTypes = {
+  size: _propTypes.default.string,
+  variant: _propTypes.default.string,
+  leadingIcon: _propTypes.default.node,
+  trailingIcon: _propTypes.default.node,
+  color: _propTypes.default.string,
+  disabled: _propTypes.default.bool
+};

package/dist/components/Cards/cards.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,18 +9,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../colors");
 
-var BmCard = _styledComponents.default.div.withConfig({
-  displayName: "cards__BmCard"
-})(["display:flex;flex-direction:column;background:", ";border:0.071rem solid ", ";border-radius:0.25rem;> *{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}"], _colors.BmPrimaryWhite, _colors.BmGrey400);
-
-BmCard.Header = _styledComponents.default.div.withConfig({
-  displayName: "cards__Header"
-})(["padding:0.5rem 0.5rem 0rem 0.5rem;"]);
-BmCard.Body = _styledComponents.default.div.withConfig({
-  displayName: "cards__Body"
-})(["padding:0rem 0.5rem;"]);
-BmCard.Footer = _styledComponents.default.div.withConfig({
-  displayName: "cards__Footer"
-})(["border-top:0.071rem solid ", ";padding:0.5rem 0.5rem 0rem 0.5rem;"], _colors.BmGrey400);
+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 BmCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  > * {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 0.5rem;\n  }\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
+
+BmCard.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0.5rem 0.5rem 0rem 0.5rem;\n"])));
+BmCard.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0rem 0.5rem;\n"])));
+BmCard.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0.5rem 0rem 0.5rem;\n"])), _colors.BmGrey400);
 var _default = BmCard;
 exports.default = _default;

package/dist/components/Cards/cards.stories.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,6 +17,8 @@ var _buttons = require("../Buttons/buttons");
 
 var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _cards.default,

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

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _icons = require("@material-ui/icons");
@@ -31,19 +27,25 @@ var _excluded = ["state", "file", "src", "fileName", "onDownload"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails"];
 
-var BmChat = _styledComponents.default.div.withConfig({
-  displayName: "chatBody__BmChat"
-})(["display:flex;flex-direction:column;height:100%;", ""], ''
+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}; */
 );
 
-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%;"]);
+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.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 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') {
@@ -59,13 +61,9 @@ var Details = _styledComponents.default.div.withConfig({
 /* border: 1px solid red; */
 );
 
-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 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.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:keep-all;margin:0rem;"], function (_ref2) {
+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: keep-all;\n  margin: 0rem;\n"])), function (_ref2) {
   var state = _ref2.state;
 
   if (state) {
@@ -94,9 +92,7 @@ var Messages = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200);
 
-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-top:0.5rem;"]);
+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-top: 0.5rem;\n"])));
 
 var handleState = function handleState(_ref5) {
   var session = _ref5.session;
@@ -114,12 +110,17 @@ var handleState = function handleState(_ref5) {
       user: "employee"
     });
   }
+
+  if (session === 'sms') {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "sms"
+    });
+  }
 }; // Start of File Attachment
 
 
-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 (_ref6) {
+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 (_ref6) {
   var state = _ref6.state;
 
   if (state) {
@@ -167,8 +168,9 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
       src = _ref10.src,
       fileName = _ref10.fileName,
       onDownload = _ref10.onDownload,
-      rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded);
-  return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, Object.assign({
+      rest = _objectWithoutProperties(_ref10, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
@@ -179,9 +181,7 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
 }; // Start of Component for Images
 
 
-var BmImageWrapper = _styledComponents.default.div.withConfig({
-  displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";border-radius:", ";border:0.071rem solid ", ";"], function (_ref11) {
+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) {
@@ -203,9 +203,7 @@ var BmImageWrapper = _styledComponents.default.div.withConfig({
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img.withConfig({
-  displayName: "chatBody__BmImage"
-})(["", " width:100%;object-fit:cover;flex-grow:1;"], ''
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
 /* Fix width */
 );
 
@@ -215,13 +213,14 @@ var BmImageChat = function BmImageChat(_ref13) {
   var state = _ref13.state,
       src = _ref13.src,
       fileName = _ref13.fileName,
-      rest = (0, _objectWithoutProperties2.default)(_ref13, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, Object.assign({
+      rest = _objectWithoutProperties(_ref13, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
     src: src,
     alt: "src"
-  }), fileName && /*#__PURE__*/_react.default.createElement(BmFileAttachment, Object.assign({
+  }), fileName && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     state: state,
     file: src,
     fileName: fileName
@@ -230,9 +229,7 @@ var BmImageChat = function BmImageChat(_ref13) {
 
 exports.BmImageChat = BmImageChat;
 
-var MessageState = _styledComponents.default.div.withConfig({
-  displayName: "chatBody__MessageState"
-})(["@media all and (max-width:960px){display:none;}"]); // 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;
@@ -247,22 +244,23 @@ BmChat.Details = function (_ref14) {
       file = _ref14.file,
       fileName = _ref14.fileName,
       sessionDetails = _ref14.sessionDetails,
-      rest = (0, _objectWithoutProperties2.default)(_ref14, _excluded3);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, Object.assign({
+      rest = _objectWithoutProperties(_ref14, _excluded3);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
     time: sessionDetails.time,
     message: sessionDetails.message
-  }, rest)), /*#__PURE__*/_react.default.createElement(Details, Object.assign({
+  }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, 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, Object.assign({
+  })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(Messages, {
     state: state
-  }, children), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, Object.assign({
+  }, children), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     file: file,
     fileName: fileName,
     state: state
@@ -280,8 +278,6 @@ BmChat.Details = function (_ref14) {
   }))));
 };
 
-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;}"]);
+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"])));
 var _default = BmChat;
 exports.default = _default;

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,6 +23,8 @@ var _input = require("../../input");
 
 var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /* eslint-disable import/no-anonymous-default-export */
 // TODO: ADD DESCRIPTION
 var _default = {
@@ -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/ChatBody/sessionDetails.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SessionDetails = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,15 +13,26 @@ var _colors = require("../../colors");
 
 var _excluded = ["message", "time"];
 
-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 _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 SessionDetails = function SessionDetails(_ref) {
   var message = _ref.message,
       time = _ref.time,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(SessionDetailsWrapper, Object.assign({
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(SessionDetailsWrapper, _extends({
     time: time,
     message: message
   }, rest), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), time || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"));

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,10 +7,14 @@ 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.withConfig({
-  displayName: "chatHeader__BmChatHeader"
-})(["display:flex;flex-direction:row;align-items:center;", " padding:1rem;> *:not(:last-child){margin-right:0.5rem;}"], ''
+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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,6 +11,8 @@ var _buttons = require("../../Buttons/buttons");
 
 var _chatHeader = require("./chatHeader");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _chatHeader.BmChatHeader,

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +7,13 @@ exports.BmColorPicker = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-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) {
+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) {
   return props.color ? props.color : 'green';
 });
 

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +9,8 @@ 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,