beem-component 1.5.5 → 1.5.8

package/dist/components/examples/selectExample.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _components = require("./lib/components");
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var App = function App() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var VENDOR_ACCOUNT_STATUSES = {
+    0: "Inactive",
+    1: "Active"
+  };
+  var VENDOR_ACCOUNT_STATUS_OPTIONS = (0, _map.default)(VENDOR_ACCOUNT_STATUSES, function (type, key) {
+    return {
+      value: key,
+      label: type
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!"), /*#__PURE__*/_react.default.createElement(_components.BmModal, {
+    size: "small",
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    },
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_components.BmModal.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_components.BmModal.Body, null, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    options: VENDOR_ACCOUNT_STATUS_OPTIONS,
+    placeholder: "Select"
+  })), /*#__PURE__*/_react.default.createElement(_components.BmModal.Footer, null, /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    size: "small"
+  }, "Send"), /*#__PURE__*/_react.default.createElement(_components.BmButton, {
+    size: "small",
+    variant: "secondary"
+  }, "View"))));
+};
+
+var _default = App;
+exports.default = _default;

package/dist/components/globalStyles.js

@@ -13,5 +13,5 @@ var _templateObject;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px; cursor: pointer}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.p, _text.input, _text.a);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n* { font-size: 14px; cursor: pointer}\n  h1 { ", " }\n  h2 { ", " }\n  h3 { ", " }\n  h4 { ", " }\n  h5 { ", " }\n  h6 { ", " }\n  p  { ", " }\n  input {", "}\n  a {", "}\n"])), _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a);
 exports.GlobalStyle = GlobalStyle;

package/dist/components/index.js

@@ -204,6 +204,12 @@ Object.defineProperty(exports, "BmNoteBar", {
     return _noteBar.BmNoteBar;
   }
 });
+Object.defineProperty(exports, "BmProfileIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ProfileIcon.BmProfileIcon;
+  }
+});
 Object.defineProperty(exports, "BmProgressBar", {
   enumerable: true,
   get: function get() {
@@ -365,6 +371,8 @@ var _bannerCards = _interopRequireDefault(require("../components/BannerCard/bann
 
 var _progressRing = _interopRequireDefault(require("./ProgressRing/progressRing"));
 
+var _ProfileIcon = require("./ProfileIcon/ProfileIcon");
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/dist/components/text.js

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.p = exports.input = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 
 var _typography = require("./typography");
 
-var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.571rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+// 32px
+var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 24px
+
 exports.h1 = h1;
-var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;"); // 18px
+
 exports.h2 = h2;
-var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 16px
+
 exports.h3 = h3;
-var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
 exports.h4 = h4;
-var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 12px
+
 exports.h5 = h5;
+var h6 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 0.857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
+exports.h6 = h6;
 var p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.p = p;
 var input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.5.5",
+    "version": "1.5.8",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -17,7 +17,8 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
+        "web-vitals": "^1.1.2",
+        "babel-loader": "8.1.0"
     },
     "dependencies": {
         "@emotion/react": "^11.7.1",

package/src/App.js

@@ -1,23 +1,35 @@
 import React, { useState } from "react";
-import { GlobalStyle, BmRowLabel, BmListBox, BmButton } from "./lib/components";
-import "./list.scss";
+import { BmModal, BmButton, GlobalStyle } from "./lib/components";
+import { BmProfileIcon } from "./lib/components/ProfileIcon/ProfileIcon";
+import beem from './lib/assets/beem.jpeg';
+
+const Chat = () => {
+  const [showModal, setShowModal] = useState(false);
 
-const App = () => {
-  const [showList, setShowList] = useState(false);
   return (
     <>
       <GlobalStyle />
-        <BmListBox className="listbox" setShowList={setShowList}>
-          <BmRowLabel size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-          <BmRowLabel size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-        </BmListBox>
-        <BmButton onClick={() => setShowList(!showList)}>Click Me!</BmButton>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <BmProfileIcon img={beem} content={<h3>TV</h3>} channel="facebook" size="xsmall" />
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+      <BmProfileIcon img={beem} channel="instagram" />
     </>
   );
 };
 
-export default App;
+export default Chat;

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

@@ -89,7 +89,7 @@ const Messages = styled.div`
     return `${BmPrimaryWhite}`;
   }};
   border: 0.071rem solid ${BmGrey200};
-  word-break: break-all;
+  word-break: keep-all;
   margin: 0rem;
 `;
 

package/src/lib/components/ChatComponents/ContactCards/contactCards.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import BmContactCard from "./contactCards";
 import BmAvatar from "../../Avatars/avatars";
 import BmCounter from "../../MessageCounter/messageCounter";
-import { BmTag } from "../../tags";
+import { BmTag } from "../../Tags/tags";
 
 export default {
   component: { BmContactCard, BmAvatar, BmTag, BmCounter },

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

@@ -28,7 +28,7 @@ export const ModalContent = styled.div`
   max-width: 100%;
 
   > *:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   @media (min-width: 576px) {
     max-width: 500px;
@@ -109,8 +109,9 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
       {(value) => (
         <>
           <ModalHeader {...rest}>
+            <p>&nbsp;</p>
             {children}
-            {closeButton && (
+            {closeButton ? (
               <BmIcons
                 size="xlarge"
                 icon={<Clear />}
@@ -119,7 +120,7 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
                 }
                 {...rest}
               />
-            )}
+            ) : <p>&nbsp;</p>}
           </ModalHeader>
         </>
       )}
@@ -127,6 +128,13 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
   );
 };
 
+BmModal.SubHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items:center;
+`;
+
 BmModal.Body = styled.div`
   display: flex;
   flex-direction: column;

package/src/lib/components/Modals/modals.stories.js

@@ -51,6 +51,31 @@ export const SampleModal = () => {
     </>
   );
 };
+
+export const ModalWithSubHeader = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+    </>
+  );
+};
 export const ExampleModal = () => {
   const [showModal, setShowModal] = useState(false);
   return (

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BmSecondaryBlue12, BmBgLightBlue } from '../colors';
+import wa from '../../assets/wa.png';
+import fb from '../../assets/fb.png';
+import insta from '../../assets/insta.png';
+
+
+const handleSize = (size) => {
+    if (size) {
+        if (size === "large") return "3.429rem";
+        if (size === "medium") return "2.286rem";
+        if (size === "small") return "1.714rem";
+        if (size === "xsmall") return "1.429rem";
+    }
+    return "3.429rem"
+};
+
+const position = (size) => {
+    if (size) {
+        if (size === "large") return "2.286rem";
+        if (size === "medium") return "1.5rem";
+        if (size === "small") return "1rem";
+        if (size === "xsmall") return "0.714rem";
+    }
+    return "2.286rem"
+};
+
+const ProfileImg = styled.img`
+    height: ${(props) => handleSize(props.size)};
+    width: ${(props) => handleSize(props.size)};
+    object-fit: contain;
+    border-radius: 50%;
+    display:flex;
+`;
+
+const Profile = styled.div`
+    height: ${(props) => handleSize(props.size)};
+    width: ${(props) => handleSize(props.size)};
+    border-radius: 50%;
+    border: 1px solid ${BmBgLightBlue};
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    position: relative;
+    background: ${BmSecondaryBlue12};
+`;
+
+const Content = styled.div`
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    position: absolute;
+`;
+
+
+const Dot = styled.img`
+    position: absolute;
+    left: ${(props) => position(props.size)};
+    bottom: 0rem;
+    object-fit: contain;
+    height: 1rem;
+    width: 1rem;
+`;
+
+export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
+    return (
+        <>
+            <Profile size={size} {...rest}>
+                {content && !img && <Content>{content}</Content>}
+                {img && !content && <ProfileImg src={img} />}
+                {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
+                {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
+                {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
+            </Profile>
+        </>
+    )
+}

package/src/lib/components/ProfileIcon/profileIcon.stories.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmProfileIcon } from "./ProfileIcon";
+import beem from '../../assets/beem.jpeg';
+
+
+export default {
+  component: BmProfileIcon,
+  title: "components/ProfileIcon",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the profile",
+      defaultValue: { summary: "large" },
+    },
+    img: {
+      description: "Image to be displayed (will not be displayed if content is present)",
+      defaultValue: { summary: undefined },
+    },
+    content: {
+      description: "Content to be displayed (will not be displayed if image is present)",
+      defaultValue: { summary: undefined },
+    },
+    channel: {
+      options: ["whatsapp", "instagram", "facebook"],
+      control: { type: "select" },
+      description: "Profile badge",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainProfileIcon = (args) => <BmProfileIcon {...args} />;
+
+export const Sample = MainProfileIcon.bind({});
+Sample.args = {
+  channel: "whatsapp",
+  size: "large",
+};
+
+export const ImageProfile = MainProfileIcon.bind({});
+ImageProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  img: beem,
+  content: undefined
+};
+
+export const ContentProfile = MainProfileIcon.bind({});
+ContentProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  content: <h4>BC</h4>,
+  img: undefined
+};
+

package/src/lib/components/ScrollBar/scrollBar.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ScrollbarWrapper = styled.div(() => ({
+  "::-webkit-scrollbar-thumb": {
+    background: "blue",
+    maxHeight: "10px",
+    display: "block",
+    width: "10em",
+    overflow: "auto",
+    height: "2em",
+  },
+}));
+
+export const Scrollbar = styled.div`
+::-webkit-scrollbar {
+    width: 0.714rem !important;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #E2E2E2;
+}`;
+
+export const Content = styled.div(() => ({
+  direction: "ltr", // if you want to show the scroll bar on the left
+}));
+
+export default ScrollbarWrapper;

package/src/{Chat.js → lib/components/examples/App.js}

@@ -6,7 +6,6 @@ import SendIcon from "@mui/icons-material/Send";
 import { BmChat, BmIcons, BmInput } from "./lib/components";
 import "../src/lib/assets/css/sidebar.scss";
 import image from "../src/lib/assets/chart-img.png";
-import azam from "../src/lib/images/azam1.png";
 
 const Chat = () => {
   return (
@@ -69,7 +68,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           session="live"
           displayTime={<p>10:00am</p>}
           status="failed"
-          src={azam}
+          // src={azam}
           file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
         >
           <p>Hekkoi</p>

package/src/lib/components/examples/chatBodyExample.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { GlobalStyle, BmChat } from "..";
+import "./list.scss";
+import { ScrollbarWrapper } from "../ScrollBar/scrollBar";
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <ScrollbarWrapper>
+        <BmChat>
+          <BmChat.Body>
+            <BmChat.Details
+              state="inbound"
+              session="bot"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+              sessionDetails={{
+                message: <h3>Session Message</h3>,
+                time: <p>12:00pm</p>,
+              }}
+            >
+              <p>Inbound Text Message</p>
+            </BmChat.Details>
+            <BmChat.Details
+              state="inbound"
+              session="live"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+              fileName={<p>chat.png</p>}
+              sessionDetails={{
+                message: <h3>Session Message</h3>,
+                time: <p>12:00pm</p>,
+              }}
+            />
+            <BmChat.Details
+              state="inbound"
+              session="live"
+              displayTime={<p>10:00am</p>}
+              status="failed"
+              fileName={<p>file.csv</p>}
+            />
+            <BmChat.Details
+              state="outbound"
+              session="bot"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+            >
+              <p>Outbound Text Message</p>
+            </BmChat.Details>
+            <BmChat.Details
+              state="outbound"
+              session="live"
+              displayTime={<p>12:00pm</p>}
+              status="sent"
+              fileName={<p>chat.png</p>}
+            />
+            <BmChat.Details
+              state="outbound"
+              session="live"
+              displayTime={<p>10:00am</p>}
+              status="failed"
+              fileName={<p>file.csv</p>}
+              onDownload={() => {
+                alert("hello");
+              }}
+            />
+          </BmChat.Body>
+        </BmChat>
+      </ScrollbarWrapper>
+    </>
+  );
+};
+
+export default App;

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from "styled-components";
-import { h1, h2, h3, h4, p, input, a } from "./text";
+import { h1, h2, h3, h4, h5, h6, p, input, a } from "./text";
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}
@@ -7,6 +7,8 @@ export const GlobalStyle = createGlobalStyle`
   h2 { ${h2} }
   h3 { ${h3} }
   h4 { ${h4} }
+  h5 { ${h5} }
+  h6 { ${h6} }
   p  { ${p} }
   input {${input}}
   a {${a}}

package/src/lib/components/index.js

@@ -20,6 +20,7 @@ import { BmCheckbox } from "./checkbox";
 import { BmTag } from "../components/Tags/tags";
 import BmBanner from "../components/BannerCard/bannerCards";
 import BmProgressRing from "./ProgressRing/progressRing";
+import {BmProfileIcon} from './ProfileIcon/ProfileIcon';
 
 import {
   BmTagIcon,
@@ -77,6 +78,7 @@ export {
   BmRowLabel,
   BmBanner,
   BmProgressRing,
+  BmProfileIcon,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,