beem-component 1.1.3 → 1.1.7

package/.storybook/preview.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { addDecorator } from "@storybook/react";
 import { GlobalStyle } from "../src/lib/components/globalStyles";
+import "../src/lib/assets/css/sidebar.scss";
 
 addDecorator((Story) => (
   <>
     <GlobalStyle />
     <Story />
   </>
-));
+));

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

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@material-ui/icons");
+
+var _FilePresent = _interopRequireDefault(require("@mui/icons-material/FilePresent"));
+
+var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
+
+var _iconStyles = require("../../iconStyles");
+
+var _colors = require("../../colors");
+
+var _excluded = ["state", "file", "src", "fileName"],
+    _excluded2 = ["state", "src", "fileName"],
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
+
+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 || 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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n"])));
+
+var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\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"])), ""
+/* align-items: center; */
+, function (_ref) {
+  var state = _ref.state;
+
+  if (state === "inbound") {
+    return "flex-start";
+  }
+
+  if (state === "outbound") {
+    return "flex-end";
+  }
+
+  return "row";
+});
+
+var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 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: 1.143rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
+  var state = _ref2.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref3) {
+  var state = _ref3.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref4) {
+  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";
+  }
+
+  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-top: 0.5rem;\n"])));
+
+var handleState = function handleState(_ref5) {
+  var session = _ref5.session;
+
+  if (session === "bot") {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "chatbot"
+    });
+  }
+
+  if (session === "live") {
+    return /*#__PURE__*/_react.default.createElement(_avatars.default, {
+      size: "small",
+      user: "employee"
+    });
+  }
+}; // 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 (_ref6) {
+  var state = _ref6.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref7) {
+  var state = _ref7.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref8) {
+  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";
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, _colors.BmGrey200, function (_ref9) {
+  var state = _ref9.state;
+
+  if (state) {
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, ""
+/* max-width: 100%; */
+, ""
+/* max-height: 100%; */
+);
+
+var BmFileAttachment = function BmFileAttachment(_ref10) {
+  var state = _ref10.state,
+      file = _ref10.file,
+      src = _ref10.src,
+      fileName = _ref10.fileName,
+      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)
+  }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
+  }));
+}; //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);
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref12) {
+  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";
+  }
+
+  return "".concat(_colors.BmPrimaryWhite);
+}, _colors.BmGrey200);
+
+exports.BmImageWrapper = BmImageWrapper;
+
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 21.429rem;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
+/* Fix width */
+);
+
+exports.BmImage = BmImage;
+
+var BmImageChat = function BmImageChat(_ref13) {
+  var state = _ref13.state,
+      src = _ref13.src,
+      fileName = _ref13.fileName,
+      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, _extends({
+    state: state,
+    file: src,
+    fileName: fileName
+  }, rest))));
+}; //End of Component for Images
+
+
+exports.BmImageChat = BmImageChat;
+
+BmChat.Details = function (_ref14) {
+  var children = _ref14.children,
+      state = _ref14.state,
+      displayTime = _ref14.displayTime,
+      status = _ref14.status,
+      session = _ref14.session,
+      src = _ref14.src,
+      file = _ref14.file,
+      fileName = _ref14.fileName,
+      rest = _objectWithoutProperties(_ref14, _excluded3);
+
+  console.log("bbbb", fileName);
+  return /*#__PURE__*/_react.default.createElement(Details, _extends({
+    state: state
+  }, rest), state === "inbound" && session && handleState({
+    state: state,
+    session: session
+  }), /*#__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, _extends({
+    file: file,
+    fileName: fileName,
+    state: state
+  }, 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, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
+    color: "".concat(_colors.BmPrimaryBlack),
+    size: "small"
+  }))), state === "outbound" && session && handleState({
+    state: state,
+    session: session
+  }));
+};
+
+BmChat.Footer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _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/{ChatBody → ChatComponents/ChatBody}/chatBody.stories.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _chatBody = _interopRequireDefault(require("./chatBody"));
 
-var _iconStyles = require("../iconStyles");
+var _iconStyles = require("../../iconStyles");
 
 var _EmojiEmotions = _interopRequireDefault(require("@mui/icons-material/EmojiEmotions"));
 
@@ -19,18 +19,16 @@ var _Quickreply = _interopRequireDefault(require("@mui/icons-material/Quickreply
 
 var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
 
-var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
+var _input = require("../../input");
 
-var _icons = require("@material-ui/icons");
-
-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 */
 var _default = {
   component: _chatBody.default,
-  title: "components/Chat/ChatBody"
+  title: "components/Chat/MainChat/ChatBody"
 };
 exports.default = _default;
 
@@ -40,12 +38,42 @@ var ChatBody = function ChatBody() {
     session: "bot",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
     status: "sent"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "inbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png"),
+    src: _chartImg.default
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "inbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
+    status: "failed",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
+    file: _chartImg.default
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "outbound",
+    session: "bot",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png"),
+    src: _chartImg.default
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "outbound",
     session: "live",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
-    status: "failed"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound"))), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    status: "failed",
+    fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
+    file: _chartImg.default
+  })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "chat-footer"
+  }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),
     size: "xlarge"
   }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -55,11 +83,14 @@ var ChatBody = function ChatBody() {
     icon: /*#__PURE__*/_react.default.createElement(_Quickreply.default, null),
     size: "xlarge"
   }), /*#__PURE__*/_react.default.createElement(_input.BmInput, {
-    placeholder: "Enter Message"
+    placeholder: "Enter Message",
+    style: {
+      flex: "1"
+    }
   }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),
     size: "xlarge"
-  })));
+  }))));
 };
 
 exports.ChatBody = ChatBody;

package/dist/components/{ChatHeader → ChatComponents/ChatHeader}/chatHeader.stories.js

@@ -7,7 +7,7 @@ exports.default = exports.ChatHeader = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _buttons = require("../Buttons/buttons");
+var _buttons = require("../../Buttons/buttons");
 
 var _chatHeader = require("./chatHeader");
 
@@ -16,14 +16,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _chatHeader.BmChatHeader,
-  title: "components/Chat/ChatHeader"
+  title: "components/Chat/MainChat/ChatHeader"
 };
 exports.default = _default;
 
 var ChatHeader = function ChatHeader() {
-  return /*#__PURE__*/_react.default.createElement(_chatHeader.BmChatHeader, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement("p", null, "Last seen: 00:00"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+  return /*#__PURE__*/_react.default.createElement(_chatHeader.BmChatHeader, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement("p", null, "Last seen: 00:00"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chat-header-buttons"
+  }, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
     size: "medium"
-  }, "End Session"));
+  }, "End Session"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    size: "medium"
+  }, "End Session")));
 };
 
 exports.ChatHeader = ChatHeader;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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) {
+  return props.color ? props.color : 'green';
+});
+
+exports.BmColorPicker = BmColorPicker;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChatBody = void 0;
+
+var _colorPicker = require("./colorPicker");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = {
+  component: _colorPicker.BmColorPicker,
+  title: "components/Chat/Components/ColorPicker"
+};
+exports.default = _default;
+
+var ChatBody = function ChatBody() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, ["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map(function (color) {
+    return /*#__PURE__*/React.createElement(_colorPicker.BmColorPicker, {
+      key: color,
+      color: color
+    });
+  }));
+};
+
+exports.ChatBody = ChatBody;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _default = BmChatForm;
+exports.default = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormAccordion = void 0;
+
+var _ = require("../..");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = {
+  component: _.BmChatForm,
+  title: "components/Chat/Components/FormAccordion"
+};
+exports.default = _default;
+
+var FormAccordion = function FormAccordion() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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, {
+    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, {
+    placeholder: "Enter here"
+  }))))));
+};
+
+exports.FormAccordion = FormAccordion;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _default = BmChatLabels;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LabelAccordion = void 0;
+
+var _ = require("../..");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = {
+  component: _.BmChatLabels,
+  title: "components/Chat/Components/LabelAccordion"
+};
+exports.default = _default;
+
+var LabelAccordion = function LabelAccordion() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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, {
+    variant: "success"
+  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+    variant: "warning"
+  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+    variant: "error"
+  }, /*#__PURE__*/React.createElement("p", null, "label")))))));
+};
+
+exports.LabelAccordion = LabelAccordion;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _default = BmChatNotes;
+exports.default = _default;

package/dist/components/Modals/modal.js

@@ -153,7 +153,7 @@ BmModal.Header = function (_ref4) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,