beem-component 1.2.1 → 1.2.5

package/dist/assets/css/breakpoints.scss

@@ -0,0 +1,42 @@
+$breakpoints: ( xs: 0, sm: 480px, md: 720px, lg: 960px, xl: 1200px, xxl: 1400px);
+@mixin xs {
+    @media (min-width: map-get($breakpoints, 'xs')) {
+        @content;
+    }
+}
+
+@mixin sm {
+    @media (min-width: map-get($breakpoints, 'sm')) {
+        @content;
+    }
+}
+
+@mixin md {
+    @media (min-width: map-get($breakpoints, 'md')) {
+        @content;
+    }
+}
+
+@mixin lg {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+        @content;
+    }
+}
+
+@mixin xl {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+        @content;
+    }
+}
+
+@mixin xxl {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+        @content;
+    }
+}
+
+@mixin breakpoint($bp: 0) {
+    @media (min-width: $bp) {
+        @content;
+    }
+}

package/dist/assets/css/sidebar.scss

@@ -55,6 +55,7 @@
     max-height: 100%;
     flex-grow: 1;
     height: 100%;
+    width: fit-content;
 }
 
 .chat-menu {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
+exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -25,7 +25,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,11 +41,9 @@ var BmChat = _styledComponents.default.div(_templateObject || (_templateObject =
 /* 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"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\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 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"])), function (_ref) {
   var state = _ref.state;
 
   if (state === "inbound") {
@@ -59,7 +57,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
   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    margin-bottom: 0.5rem; \n  }\n"])));
+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-all;\n  margin: 0rem;\n"])), function (_ref2) {
   var state = _ref2.state;
@@ -214,11 +212,15 @@ var BmImageChat = function BmImageChat(_ref13) {
     file: src,
     fileName: fileName
   }, rest))));
-}; //End of Component for Images
-
+};
 
 exports.BmImageChat = BmImageChat;
 
+var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"]))); //End of Component for Images
+
+
+exports.MessageState = MessageState;
+
 BmChat.Details = function (_ref14) {
   var children = _ref14.children,
       state = _ref14.state,
@@ -230,13 +232,12 @@ BmChat.Details = function (_ref14) {
       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({
+  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
     state: state,
     session: session
-  }), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
@@ -254,12 +255,12 @@ BmChat.Details = function (_ref14) {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), state === "outbound" && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, 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"])));
+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/Modals/modal.js

@@ -54,11 +54,11 @@ var _React$createContext = /*#__PURE__*/_react.default.createContext(),
     Provider = _React$createContext.Provider,
     Consumer = _React$createContext.Consumer;
 
-var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
 
 exports.Overlay = Overlay;
 
-var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  max-width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
   var size = _ref.size;
 
   if (size) {
@@ -70,20 +70,33 @@ var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateO
   }
 
   return "35.714rem";
-});
-
-exports.ModalContent = ModalContent;
+}, function (_ref2) {
+  var size = _ref2.size;
 
-var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref2) {
-  var centered = _ref2.centered;
-
-  if (centered) {
-    return "50%";
+  if (size) {
+    if (size === "small") return "21.429rem";
+    if (size === "default") return "35.714rem";
+    if (size === "large") return "57.143rem";
+    if (size === "xlarge") return "81.429rem";
+    return size;
   }
 
-  return "10%";
+  return "35.714rem";
 });
 
+exports.ModalContent = ModalContent;
+
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: 0;\n  margin: 2rem auto;\n  ", "\n"])), ''
+/* top: ${({ centered }) => {
+if (centered) {
+return "50%";
+}
+return "15%";
+}};
+left: 50%;
+transform: translate(-50%, -50%); */
+);
+
 exports.ModalWrapper = ModalWrapper;
 
 var BmModal = function BmModal(_ref3) {
@@ -153,7 +166,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  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  height: ", ";\n  overflow: auto;\n  ", "\n  ", "\n"])), function (_ref5) {
+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  max-height: ", ";\n  overflow: auto;\n"])), function (_ref5) {
   var size = _ref5.size;
 
   if (size) {
@@ -165,16 +178,7 @@ BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObjec
   }
 
   return "35.714rem";
-}, ''
-/* height: 100%; */
-, ''
-/* > * {
-display: flex;
-flex-direction: row;
-justify-content: space-between;
-width: 100%;
-} */
-);
+});
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/package.json

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

package/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import "../src/main.scss";
 import { BmButton, MainWrapper, BmModal } from "./lib/components";
+import AsyncSelect from 'react-select/async';
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
 import SideBar from "./SideBar";
@@ -20,68 +21,16 @@ export const App = () => {
             Click Me!
           </BmButton>
         </div>
-        <BmModal show={showModal} onHide={() => setShowModal(false)} centered>
+        <BmModal show={showModal} onHide={() => setShowModal(false)}>
           <BmModal.Header closeButton>
             <h2>Header</h2>
           </BmModal.Header>
           <BmModal.Body>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
-            <p>This is a body</p>
+            <AsyncSelect
+              cacheOptions
+              defaultOptions
+              placeholder="Search for an agent"
+            />{" "}
           </BmModal.Body>
           <BmModal.Footer>
             <p>This is a footer</p>

package/src/Chat.js

@@ -20,6 +20,28 @@ const Chat = () => {
           src={image}
           fileName={<p>attachment.jpg</p>}
         />
+         <BmChat.Details
+          state="outbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+        </BmChat.Details>
         <BmChat.Details
           state="inbound"
           session="bot"
@@ -28,7 +50,19 @@ const Chat = () => {
           // src={image}
           // fileName={<p>attachment.jpg</p>}
         >
-          Hello
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
         </BmChat.Details>
         <BmChat.Details
           state="outbound"

package/src/lib/assets/css/breakpoints.scss

@@ -0,0 +1,42 @@
+$breakpoints: ( xs: 0, sm: 480px, md: 720px, lg: 960px, xl: 1200px, xxl: 1400px);
+@mixin xs {
+    @media (min-width: map-get($breakpoints, 'xs')) {
+        @content;
+    }
+}
+
+@mixin sm {
+    @media (min-width: map-get($breakpoints, 'sm')) {
+        @content;
+    }
+}
+
+@mixin md {
+    @media (min-width: map-get($breakpoints, 'md')) {
+        @content;
+    }
+}
+
+@mixin lg {
+    @media (min-width: map-get($breakpoints, 'lg')) {
+        @content;
+    }
+}
+
+@mixin xl {
+    @media (min-width: map-get($breakpoints, 'xl')) {
+        @content;
+    }
+}
+
+@mixin xxl {
+    @media (min-width: map-get($breakpoints, 'xxl')) {
+        @content;
+    }
+}
+
+@mixin breakpoint($bp: 0) {
+    @media (min-width: $bp) {
+        @content;
+    }
+}

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

@@ -55,6 +55,7 @@
     max-height: 100%;
     flex-grow: 1;
     height: 100%;
+    width: fit-content;
 }
 
 .chat-menu {

package/src/lib/components/Avatars/avatars.js

@@ -2,7 +2,7 @@ import { Person } from "@material-ui/icons";
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlue, BmGrey400 } from "../colors";
+import { BmGrey100, BmPrimaryBlue } from "../colors";
 import { BmAvatarIcon } from "../iconStyles";
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 

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

@@ -23,15 +23,15 @@ const BmChat = styled.div`
 
 BmChat.Body = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   padding: 0rem 1.5rem;
   flex-grow: 1;
   overflow: auto;
+  height: 100%;
 `;
 
 const Details = styled.div`
   display: flex;
-  ${"" /* align-items: center; */}
   justify-content: ${({ state }) => {
     if (state === "inbound") {
       return "flex-start";
@@ -54,10 +54,10 @@ const Details = styled.div`
 const MessageDetails = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: 50%;
+  max-width: 70%;
   > * {
     margin-top: 0.5rem;
-    margin-bottom: 0.5rem; 
+    margin-bottom: 0.5rem;
   }
 `;
 
@@ -216,6 +216,12 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   );
 };
 
+export const MessageState = styled.div`
+  @media all and (max-width: 960px) {
+    display: none;
+  }
+`;
+
 //End of Component for Images
 
 BmChat.Details = ({
@@ -229,10 +235,12 @@ BmChat.Details = ({
   fileName,
   ...rest
 }) => {
-  console.log("bbbb", fileName);
   return (
     <Details state={state} {...rest}>
-      {state === "inbound" && session && handleState({ state, session })}
+      {/* Adding for mobile */}
+      <MessageState>
+        {state === "inbound" && session && handleState({ state, session })}
+      </MessageState>
       <MessageDetails>
         {/* For Images */}
         {src && (
@@ -263,7 +271,9 @@ BmChat.Details = ({
           )}
         </MessagesSubDetails>
       </MessageDetails>
-      {state === "outbound" && session && handleState({ state, session })}
+      <MessageState>
+        {state === "outbound" && session && handleState({ state, session })}
+      </MessageState>
     </Details>
   );
 };

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

@@ -12,8 +12,8 @@ export const Overlay = styled.div`
   top: 0;
   left: 0;
   z-index: 9999;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: ${BmBgGrey45};
 }
 `;
@@ -34,26 +34,40 @@ export const ModalContent = styled.div`
     }
     return "35.714rem";
   }};
+  max-width: ${({ size }) => {
+    if (size) {
+      if (size === "small") return "21.429rem";
+      if (size === "default") return "35.714rem";
+      if (size === "large") return "57.143rem";
+      if (size === "xlarge") return "81.429rem";
+      return size;
+    }
+    return "35.714rem";
+  }};
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }
 `;
 
 export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: 9999;
-  overflow-x: auto;
-  overflow-y: auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   outline: 0;
-  position: fixed;
-  height: auto;
-  top: ${({ centered }) => {
+  margin: 2rem auto;
+  ${'' /* top: ${({ centered }) => {
     if (centered) {
       return "50%";
     }
-    return "10%";
+    return "15%";
   }};
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%); */}
 `;
 
 export const BmModal = ({
@@ -138,7 +152,7 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  height: ${({ size }) => {
+  max-height: ${({ size }) => {
     if (size) {
       if (size === "small") return "21.429rem";
       if (size === "default") return "35.714rem";
@@ -149,13 +163,6 @@ BmModal.Body = styled.div`
     return "35.714rem";
   }};
   overflow: auto;
-  ${'' /* height: 100%; */}
-  ${'' /* > * {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-  } */}
 `;
 
 BmModal.Footer = styled.div`