beem-component 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/assets/css/sidebar.scss +1 -0
  2. package/dist/components/ChatComponents/ChatBody/chatBody.js +14 -11
  3. package/dist/components/Modals/modal.js +33 -30
  4. package/package.json +1 -1
  5. package/src/App.js +2 -58
  6. package/src/Chat.js +35 -1
  7. package/src/lib/assets/css/sidebar.scss +1 -0
  8. package/src/lib/components/Avatars/avatars.js +1 -1
  9. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +14 -4
  10. package/src/lib/components/Modals/modal.js +12 -9
package/dist/assets/css/sidebar.scss CHANGED
@@ -55,6 +55,7 @@
55
55
  max-height: 100%;
56
56
  flex-grow: 1;
57
57
  height: 100%;
58
+ width: fit-content;
58
59
  }
59
60
 
60
61
  .chat-menu {
package/dist/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
6
+ exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -25,7 +25,7 @@ var _excluded = ["state", "file", "src", "fileName"],
25
25
  _excluded2 = ["state", "src", "fileName"],
26
26
  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
27
27
 
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
28
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
29
29
 
30
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
31
 
@@ -59,7 +59,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
59
59
  return "row";
60
60
  });
61
61
 
62
- 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"])));
62
+ 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"])));
63
63
 
64
64
  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) {
65
65
  var state = _ref2.state;
@@ -214,11 +214,15 @@ var BmImageChat = function BmImageChat(_ref13) {
214
214
  file: src,
215
215
  fileName: fileName
216
216
  }, rest))));
217
- }; //End of Component for Images
218
-
217
+ };
219
218
 
220
219
  exports.BmImageChat = BmImageChat;
221
220
 
221
+ 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
222
+
223
+
224
+ exports.MessageState = MessageState;
225
+
222
226
  BmChat.Details = function (_ref14) {
223
227
  var children = _ref14.children,
224
228
  state = _ref14.state,
@@ -230,13 +234,12 @@ BmChat.Details = function (_ref14) {
230
234
  fileName = _ref14.fileName,
231
235
  rest = _objectWithoutProperties(_ref14, _excluded3);
232
236
 
233
- console.log("bbbb", fileName);
234
237
  return /*#__PURE__*/_react.default.createElement(Details, _extends({
235
238
  state: state
236
- }, rest), state === "inbound" && session && handleState({
239
+ }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
237
240
  state: state,
238
241
  session: session
239
- }), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
242
+ })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
240
243
  state: state,
241
244
  src: src,
242
245
  fileName: fileName
@@ -254,12 +257,12 @@ BmChat.Details = function (_ref14) {
254
257
  icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
255
258
  color: "".concat(_colors.BmPrimaryBlack),
256
259
  size: "small"
257
- }))), state === "outbound" && session && handleState({
260
+ }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
258
261
  state: state,
259
262
  session: session
260
- }));
263
+ })));
261
264
  };
262
265
 
263
- 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"])));
266
+ 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"])));
264
267
  var _default = BmChat;
265
268
  exports.default = _default;
package/dist/components/Modals/modal.js CHANGED
@@ -58,7 +58,7 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
58
58
 
59
59
  exports.Overlay = Overlay;
60
60
 
61
- 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) {
61
+ 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) {
62
62
  var size = _ref.size;
63
63
 
64
64
  if (size) {
@@ -69,30 +69,42 @@ var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateO
69
69
  return size;
70
70
  }
71
71
 
72
+ return "35.714rem";
73
+ }, function (_ref2) {
74
+ var size = _ref2.size;
75
+
76
+ if (size) {
77
+ if (size === "small") return "21.429rem";
78
+ if (size === "default") return "35.714rem";
79
+ if (size === "large") return "57.143rem";
80
+ if (size === "xlarge") return "81.429rem";
81
+ return size;
82
+ }
83
+
72
84
  return "35.714rem";
73
85
  });
74
86
 
75
87
  exports.ModalContent = ModalContent;
76
88
 
77
- 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) {
78
- var centered = _ref2.centered;
89
+ 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 (_ref3) {
90
+ var centered = _ref3.centered;
79
91
 
80
92
  if (centered) {
81
93
  return "50%";
82
94
  }
83
95
 
84
- return "10%";
96
+ return "15%";
85
97
  });
86
98
 
87
99
  exports.ModalWrapper = ModalWrapper;
88
100
 
89
- var BmModal = function BmModal(_ref3) {
90
- var children = _ref3.children,
91
- show = _ref3.show,
92
- size = _ref3.size,
93
- onHide = _ref3.onHide,
94
- centered = _ref3.centered,
95
- rest = _objectWithoutProperties(_ref3, _excluded);
101
+ var BmModal = function BmModal(_ref4) {
102
+ var children = _ref4.children,
103
+ show = _ref4.show,
104
+ size = _ref4.size,
105
+ onHide = _ref4.onHide,
106
+ centered = _ref4.centered,
107
+ rest = _objectWithoutProperties(_ref4, _excluded);
96
108
 
97
109
  var _useState = (0, _react.useState)(show),
98
110
  _useState2 = _slicedToArray(_useState, 2),
@@ -134,13 +146,13 @@ exports.BmModal = BmModal;
134
146
 
135
147
  var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
136
148
 
137
- BmModal.Header = function (_ref4) {
138
- var children = _ref4.children,
139
- size = _ref4.size,
140
- onHide = _ref4.onHide,
141
- closeButton = _ref4.closeButton,
142
- show = _ref4.show,
143
- rest = _objectWithoutProperties(_ref4, _excluded2);
149
+ BmModal.Header = function (_ref5) {
150
+ var children = _ref5.children,
151
+ size = _ref5.size,
152
+ onHide = _ref5.onHide,
153
+ closeButton = _ref5.closeButton,
154
+ show = _ref5.show,
155
+ rest = _objectWithoutProperties(_ref5, _excluded2);
144
156
 
145
157
  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
146
158
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
@@ -153,8 +165,8 @@ BmModal.Header = function (_ref4) {
153
165
  });
154
166
  };
155
167
 
156
- 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) {
157
- var size = _ref5.size;
168
+ 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 (_ref6) {
169
+ var size = _ref6.size;
158
170
 
159
171
  if (size) {
160
172
  if (size === "small") return "21.429rem";
@@ -165,16 +177,7 @@ BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObjec
165
177
  }
166
178
 
167
179
  return "35.714rem";
168
- }, ''
169
- /* height: 100%; */
170
- , ''
171
- /* > * {
172
- display: flex;
173
- flex-direction: row;
174
- justify-content: space-between;
175
- width: 100%;
176
- } */
177
- );
180
+ });
178
181
  BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
179
182
  BmModal.propTypes = {
180
183
  size: _propTypes.default.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -20,68 +20,12 @@ export const App = () => {
20
20
  Click Me!
21
21
  </BmButton>
22
22
  </div>
23
- <BmModal show={showModal} onHide={() => setShowModal(false)} centered>
23
+ <BmModal show={showModal} onHide={() => setShowModal(false)}>
24
24
  <BmModal.Header closeButton>
25
25
  <h2>Header</h2>
26
26
  </BmModal.Header>
27
27
  <BmModal.Body>
28
- <p>This is a body</p>
29
- <p>This is a body</p>
30
- <p>This is a body</p>
31
- <p>This is a body</p>
32
- <p>This is a body</p>
33
- <p>This is a body</p>
34
- <p>This is a body</p>
35
- <p>This is a body</p>
36
- <p>This is a body</p>
37
- <p>This is a body</p>
38
- <p>This is a body</p>
39
- <p>This is a body</p>
40
- <p>This is a body</p>
41
- <p>This is a body</p>
42
- <p>This is a body</p>
43
- <p>This is a body</p>
44
- <p>This is a body</p>
45
- <p>This is a body</p>
46
- <p>This is a body</p>
47
- <p>This is a body</p>
48
- <p>This is a body</p>
49
- <p>This is a body</p>
50
- <p>This is a body</p>
51
- <p>This is a body</p>
52
- <p>This is a body</p>
53
- <p>This is a body</p>
54
- <p>This is a body</p>
55
- <p>This is a body</p>
56
- <p>This is a body</p>
57
- <p>This is a body</p>
58
- <p>This is a body</p>
59
- <p>This is a body</p>
60
- <p>This is a body</p>
61
- <p>This is a body</p>
62
- <p>This is a body</p>
63
- <p>This is a body</p>
64
- <p>This is a body</p>
65
- <p>This is a body</p>
66
- <p>This is a body</p>
67
- <p>This is a body</p>
68
- <p>This is a body</p>
69
- <p>This is a body</p>
70
- <p>This is a body</p>
71
- <p>This is a body</p>
72
- <p>This is a body</p>
73
- <p>This is a body</p>
74
- <p>This is a body</p>
75
- <p>This is a body</p>
76
- <p>This is a body</p>
77
- <p>This is a body</p>
78
- <p>This is a body</p>
79
- <p>This is a body</p>
80
- <p>This is a body</p>
81
- <p>This is a body</p>
82
- <p>This is a body</p>
83
- <p>This is a body</p>
84
- <p>This is a body</p>
28
+ <p>This is a bodymdlkdmvlfdmvlkmvlkvmflkvmd;lkvmv;lkdmv;lmv;lfvm;lmre;mv;lkremvc;lkremvclfdmvlkfdmv;lkfdmv;lkfdmv;lfdmv;lfdmv;lfdmv;lfdmvlfd;mvlfd;vmfd;lvfdmlv</p>
85
29
  </BmModal.Body>
86
30
  <BmModal.Footer>
87
31
  <p>This is a footer</p>
package/src/Chat.js CHANGED
@@ -20,6 +20,28 @@ const Chat = () => {
20
20
  src={image}
21
21
  fileName={<p>attachment.jpg</p>}
22
22
  />
23
+ <BmChat.Details
24
+ state="outbound"
25
+ session="bot"
26
+ displayTime={<p>12:00pm</p>}
27
+ status="sent"
28
+ // src={image}
29
+ // fileName={<p>attachment.jpg</p>}
30
+ >
31
+ <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.
32
+ Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
33
+ Angalia asilimia ya QUALITY pale chini.
34
+ Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
35
+ Au kama una aina nyingine ya kisimbuzi;
36
+ Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
37
+ Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
38
+ Au
39
+ Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
40
+ Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
41
+ Angalia asilimia ya QUALITY pale chini.
42
+ QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
43
+ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
44
+ </BmChat.Details>
23
45
  <BmChat.Details
24
46
  state="inbound"
25
47
  session="bot"
@@ -28,7 +50,19 @@ const Chat = () => {
28
50
  // src={image}
29
51
  // fileName={<p>attachment.jpg</p>}
30
52
  >
31
- Hello
53
+ <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.
54
+ Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
55
+ Angalia asilimia ya QUALITY pale chini.
56
+ Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
57
+ Au kama una aina nyingine ya kisimbuzi;
58
+ Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
59
+ Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
60
+ Au
61
+ Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
62
+ Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
63
+ Angalia asilimia ya QUALITY pale chini.
64
+ QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
65
+ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
32
66
  </BmChat.Details>
33
67
  <BmChat.Details
34
68
  state="outbound"
package/src/lib/assets/css/sidebar.scss CHANGED
@@ -55,6 +55,7 @@
55
55
  max-height: 100%;
56
56
  flex-grow: 1;
57
57
  height: 100%;
58
+ width: fit-content;
58
59
  }
59
60
 
60
61
  .chat-menu {
package/src/lib/components/Avatars/avatars.js CHANGED
@@ -2,7 +2,7 @@ import { Person } from "@material-ui/icons";
2
2
  import React from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import styled from "styled-components";
5
- import { BmGrey100, BmPrimaryBlue, BmGrey400 } from "../colors";
5
+ import { BmGrey100, BmPrimaryBlue } from "../colors";
6
6
  import { BmAvatarIcon } from "../iconStyles";
7
7
  import SmartToyIcon from '@mui/icons-material/SmartToy';
8
8
 
package/src/lib/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -57,7 +57,7 @@ const MessageDetails = styled.div`
57
57
  max-width: 50%;
58
58
  > * {
59
59
  margin-top: 0.5rem;
60
- margin-bottom: 0.5rem;
60
+ margin-bottom: 0.5rem;
61
61
  }
62
62
  `;
63
63
 
@@ -216,6 +216,12 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
216
216
  );
217
217
  };
218
218
 
219
+ export const MessageState = styled.div`
220
+ @media all and (max-width: 960px) {
221
+ display: none;
222
+ }
223
+ `;
224
+
219
225
  //End of Component for Images
220
226
 
221
227
  BmChat.Details = ({
@@ -229,10 +235,12 @@ BmChat.Details = ({
229
235
  fileName,
230
236
  ...rest
231
237
  }) => {
232
- console.log("bbbb", fileName);
233
238
  return (
234
239
  <Details state={state} {...rest}>
235
- {state === "inbound" && session && handleState({ state, session })}
240
+ {/* Adding for mobile */}
241
+ <MessageState>
242
+ {state === "inbound" && session && handleState({ state, session })}
243
+ </MessageState>
236
244
  <MessageDetails>
237
245
  {/* For Images */}
238
246
  {src && (
@@ -263,7 +271,9 @@ BmChat.Details = ({
263
271
  )}
264
272
  </MessagesSubDetails>
265
273
  </MessageDetails>
266
- {state === "outbound" && session && handleState({ state, session })}
274
+ <MessageState>
275
+ {state === "outbound" && session && handleState({ state, session })}
276
+ </MessageState>
267
277
  </Details>
268
278
  );
269
279
  };
package/src/lib/components/Modals/modal.js CHANGED
@@ -34,6 +34,16 @@ export const ModalContent = styled.div`
34
34
  }
35
35
  return "35.714rem";
36
36
  }};
37
+ max-width: ${({ size }) => {
38
+ if (size) {
39
+ if (size === "small") return "21.429rem";
40
+ if (size === "default") return "35.714rem";
41
+ if (size === "large") return "57.143rem";
42
+ if (size === "xlarge") return "81.429rem";
43
+ return size;
44
+ }
45
+ return "35.714rem";
46
+ }};
37
47
  > *:not(:last-child) {
38
48
  margin-bottom: 1rem;
39
49
  }
@@ -50,7 +60,7 @@ export const ModalWrapper = styled.div`
50
60
  if (centered) {
51
61
  return "50%";
52
62
  }
53
- return "10%";
63
+ return "15%";
54
64
  }};
55
65
  left: 50%;
56
66
  transform: translate(-50%, -50%);
@@ -138,7 +148,7 @@ BmModal.Body = styled.div`
138
148
  > *:not(:last-child) {
139
149
  margin-bottom: 0.5rem;
140
150
  }
141
- height: ${({ size }) => {
151
+ max-height: ${({ size }) => {
142
152
  if (size) {
143
153
  if (size === "small") return "21.429rem";
144
154
  if (size === "default") return "35.714rem";
@@ -149,13 +159,6 @@ BmModal.Body = styled.div`
149
159
  return "35.714rem";
150
160
  }};
151
161
  overflow: auto;
152
- ${'' /* height: 100%; */}
153
- ${'' /* > * {
154
- display: flex;
155
- flex-direction: row;
156
- justify-content: space-between;
157
- width: 100%;
158
- } */}
159
162
  `;
160
163
 
161
164
  BmModal.Footer = styled.div`