beem-component 1.1.2 → 1.1.6

package/dist/assets/css/sidebar.css

@@ -77,4 +77,24 @@
     overflow: auto;
     width: 25%;
     border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

package/dist/components/ChatBody/chatBody.js

@@ -133,8 +133,12 @@ BmChat.Details = function (_ref6) {
   }));
 };
 
-BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0rem;\n  align-items: center;\n  justify-content: center;\n  ", "\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, ''
-/* background: ${BmGrey50}; */
+BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n  padding: 0.5rem 0.5rem;\n  ", "\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])), ''
+/* border-top: 0.071rem solid ${BmGrey200}; */
+, ''
+/* align-items: center; */
+, ''
+/* justify-content: center; */
 );
 var _default = BmChat;
 exports.default = _default;

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/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/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/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/ChatHeader/chatHeader.js

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

package/dist/components/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,

package/dist/components/index.js

@@ -59,12 +59,30 @@ Object.defineProperty(exports, "BmChat", {
     return _chatBody.default;
   }
 });
+Object.defineProperty(exports, "BmChatForm", {
+  enumerable: true,
+  get: function get() {
+    return _FormAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatHeader", {
   enumerable: true,
   get: function get() {
     return _chatHeader.BmChatHeader;
   }
 });
+Object.defineProperty(exports, "BmChatLabels", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAccordion.default;
+  }
+});
+Object.defineProperty(exports, "BmChatNotes", {
+  enumerable: true,
+  get: function get() {
+    return _NoteAccordion.default;
+  }
+});
 Object.defineProperty(exports, "BmChatbotIcon", {
   enumerable: true,
   get: function get() {
@@ -77,6 +95,12 @@ Object.defineProperty(exports, "BmCheckbox", {
     return _checkbox.BmCheckbox;
   }
 });
+Object.defineProperty(exports, "BmColorPicker", {
+  enumerable: true,
+  get: function get() {
+    return _colorPicker.BmColorPicker;
+  }
+});
 exports.BmColors = void 0;
 Object.defineProperty(exports, "BmContactCard", {
   enumerable: true,
@@ -341,6 +365,14 @@ var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
 
 var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
 
+var _FormAccordion = _interopRequireDefault(require("./ChatComponents/FormAccordion/FormAccordion"));
+
+var _LabelAccordion = _interopRequireDefault(require("./ChatComponents/LabelAccordion/LabelAccordion"));
+
+var _NoteAccordion = _interopRequireDefault(require("./ChatComponents/NoteAccordion/NoteAccordion"));
+
+var _colorPicker = require("./ChatComponents/ColorPicker/colorPicker");
+
 var _index = require("./SuperFluid/Content/index");
 
 var _index2 = require("./SuperFluid/ContentTitle.js/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.1.2",
+    "version": "1.1.6",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -9,14 +9,35 @@ import Chat from "./Chat";
 import CustomerInfo from "./CustomerInfo";
 import { BmTag } from "./lib/components/Tags/tags";
 import { Home } from "@material-ui/icons";
+import InfoAccordion from "./InfoAccordion";
+import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
+import { BmColorPicker } from "./lib/components/ChatComponents/ColorPicker/colorPicker";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmTag leadingIcon={<Home/>} trailingIcon={<Home/>}><p>Hello</p></BmTag>
-
+        {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+          <BmColorPicker key={color} color={color} />
+        ))}
+        <BmTag leadingIcon={<Home />} trailingIcon={<Home />}>
+          <p>Hello</p>
+        </BmTag>
+        <BmForm>
+          <BmForm.Group>
+            <BmForm.Label>
+              <h4>Hello</h4>
+            </BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm.Group>
+          <BmForm.Group>
+            <BmForm.Label>
+              <h4>Hello</h4>
+            </BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm.Group>
+        </BmForm>
         <div className="main-chat-container">
           <div className="sidebar">
             <SideBar />
@@ -29,6 +50,7 @@ export const App = () => {
               </div>
               <div className="chat-contact-info">
                 <CustomerInfo />
+                <InfoAccordion />
               </div>
             </div>
           </div>

package/src/Chat.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import { AttachFile } from '@material-ui/icons';
-import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
-import QuickreplyIcon from '@mui/icons-material/Quickreply';
-import SendIcon from '@mui/icons-material/Send';
-import { BmChat, BmIcons, BmInput } from './lib/components';
+import React from "react";
+import { AttachFile } from "@material-ui/icons";
+import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
+import QuickreplyIcon from "@mui/icons-material/Quickreply";
+import SendIcon from "@mui/icons-material/Send";
+import { BmChat, BmIcons, BmInput } from "./lib/components";
+import "../src/lib/assets/css/sidebar.css";
 
 const Chat = () => {
   return (
     <BmChat>
-      <BmChat.Body style={{ flex: 1 }}>
+      <BmChat.Body>
         <BmChat.Details
           state="inbound"
           session="bot"
@@ -48,7 +49,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -56,7 +57,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -64,7 +65,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -72,7 +73,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -80,7 +81,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -88,7 +89,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -96,7 +97,7 @@ const Chat = () => {
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{' '}
+        </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -106,12 +107,17 @@ const Chat = () => {
           <p>Outbound</p>
         </BmChat.Details>
       </BmChat.Body>
-      <BmChat.Footer>
-        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        <BmIcons icon={<AttachFile />} size="xlarge" />
-        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-        <BmInput placeholder="Enter Message" />
-        <BmIcons icon={<SendIcon />} size="xlarge" />
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
       </BmChat.Footer>
     </BmChat>
   );

package/src/ChatHeader.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BmChatHeader, BmButton } from "../src/lib/components/";
-import '../src/lib/assets/css/sidebar.css';
+import "../src/lib/assets/css/sidebar.css";
 
 export const ChatHeader = () => {
   return (
@@ -9,7 +9,10 @@ export const ChatHeader = () => {
         <BmChatHeader>
           <h2>Contact Name</h2>
           <p>Last seen: 00:00</p>
-          <BmButton size="medium">End Session</BmButton>
+          <div className="chat-header-buttons">
+            <BmButton size="medium">End Session</BmButton>
+            <BmButton size="medium">End Session</BmButton>
+          </div>
         </BmChatHeader>
       </div>
     </>

package/src/InfoAccordion.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { BmAccordion } from "./lib/components";
+import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
+
+const InfoAccordion = () => {
+  return (
+    <>
+      <BmAccordion>
+        <BmAccordion.Title>
+          <h3>Notes</h3>
+        </BmAccordion.Title>
+        <BmAccordion.Body>
+          <BmForm>
+            <BmForm.Label><h4>Hello</h4></BmForm.Label>
+            <BmForm.Input placeholder="Hello" />
+          </BmForm>
+        </BmAccordion.Body>
+      </BmAccordion>
+    </>
+  );
+};
+
+export default InfoAccordion;

package/src/lib/assets/css/sidebar.css

@@ -77,4 +77,24 @@
     overflow: auto;
     width: 25%;
     border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

package/src/lib/components/ChatBody/chatBody.js

@@ -134,14 +134,13 @@ BmChat.Details = ({
 
 BmChat.Footer = styled.div`
   display: flex;
-  flex-direction: row;
-  border-top: 0.071rem solid ${BmGrey400};
-  padding: 0.5rem 0rem;
-  align-items: center;
-  justify-content: center;
-  ${'' /* background: ${BmGrey50}; */}
+  flex-direction: column;
+  ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
+  padding: 0.5rem 0.5rem;
+  ${'' /* align-items: center; */}
+  ${'' /* justify-content: center; */}
   > *:not(:last-child) {
-    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 `;
 

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const BmColorPicker = styled.div`
+  width: 1.429rem;
+  height: 1.429rem;
+  border-radius: 50%;
+  background: ${(props) => (props.color ? props.color : 'green')};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+const BmChatForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  justify-content: space-between;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmChatForm.Group = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+BmChatForm.Label = styled.div`
+  margin: 0rem;
+  text-align: left;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+BmChatForm.Input = styled.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;
+`
+
+export default BmChatForm;

package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const BmChatLabels = styled.div`
+  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%;
+  }
+`;
+
+export default BmChatLabels;

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.js

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import { BmGrey100, BmGrey200 } from "../../colors";
+
+const BmChatNotes = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 0.5rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmChatNotes.Input = styled.input`
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-grow: 1;
+  background: ${BmGrey100};
+  border: none !important;
+  &:visited,
+  &:active,
+  &:hover,
+  &:focus {
+    outline: none !important;
+    text-decoration: none !important;
+  }
+  width: 100%;
+`;
+
+BmChatNotes.Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+  border: 1px solid ${BmGrey200};
+  border-radius: 0.25rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  > * {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+export default BmChatNotes;

package/src/lib/components/ChatHeader/chatHeader.js

@@ -5,12 +5,9 @@ export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
-  button {
-    margin-left: auto;
-  }
 `;

package/src/lib/components/Modals/modal.js

@@ -135,6 +135,15 @@ BmModal.Body = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+  > * {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
 `;
 
 BmModal.Footer = styled.div`

package/src/lib/components/index.js

@@ -37,6 +37,11 @@ import { BmChatHeader } from "./ChatHeader/chatHeader";
 import BmContactCard from "./ContactCards/contactCards";
 import BmInfoTab from "./InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
+//Chat Accordion components
+import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";
+import BmChatLabels from "./ChatComponents/LabelAccordion/LabelAccordion";
+import BmChatNotes from "./ChatComponents/NoteAccordion/NoteAccordion";
+import { BmColorPicker } from "./ChatComponents/ColorPicker/colorPicker";
 
 //SuperFluid Components
 import { BmContent } from "./SuperFluid/Content/index";
@@ -67,6 +72,7 @@ export {
   BmListBox,
   BmListHeader,
   BmRowLabel,
+  // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,
   BmProgressBar,
@@ -108,4 +114,9 @@ export {
   BmInfoTab,
   BmContactCard,
   BmCounter,
+  //Chat Accordion Components
+  BmChatForm,
+  BmChatLabels,
+  BmChatNotes,
+  BmColorPicker,
 };