beem-component 1.5.6 → 1.5.9

package/dist/components/Loader/loader.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Loader = exports.BmLoader = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 
 var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
 
@@ -17,54 +19,38 @@ var _styles = require("@material-ui/core/styles");
 
 var _colors = require("../colors");
 
-var _templateObject;
-
 var _excluded = ["size"];
-
-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) } })); }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
-
 var style = {
   colorPrimary: {
     color: function color(_ref) {
       var type = _ref.type;
-      if (type === "success") return "".concat(_colors.BmSecondaryDarkGreen);
-      if (type === "warning") return "".concat(_colors.BmPrimaryGold);
-      if (type === "error") return "".concat(_colors.BmSecondaryRed);
+      if (type === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
+      if (type === 'warning') return "".concat(_colors.BmPrimaryGold);
+      if (type === 'error') return "".concat(_colors.BmSecondaryRed);
       return "".concat(_colors.BmPrimaryBlue);
     }
   }
 };
 var BmLoader = (0, _styles.withStyles)(style)(function (_ref2) {
   var size = _ref2.size,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
-  var defaultSize = size || "2.286rem";
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var defaultSize = size || '2.286rem';
 
   if (size) {
-    if (size === "large") defaultSize = "2.286rem";
-    if (size === "medium") defaultSize = "1.714rem";
-    if (size === "small") defaultSize = "1.429rem";
+    if (size === 'large') defaultSize = '2.286rem';
+    if (size === 'medium') defaultSize = '1.714rem';
+    if (size === 'small') defaultSize = '1.429rem';
   }
 
-  return /*#__PURE__*/_react.default.createElement(_CircularProgress.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_CircularProgress.default, Object.assign({
     action: true,
     size: defaultSize
   }, rest));
 });
 exports.BmLoader = BmLoader;
 
-var Loader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var Loader = _styledComponents.default.div.withConfig({
+  displayName: "loader__Loader"
+})(["display:flex;align-items:center;justify-content:center;"]);
 
-exports.Loader = Loader;
-BmLoader.propTypes = {
-  size: _propTypes.default.string,
-  type: _propTypes.default.string
-};
+exports.Loader = Loader;

package/dist/components/Loader/loader.stories.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,31 +11,29 @@ var _react = _interopRequireDefault(require("react"));
 
 var _loader = require("./loader");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _loader.BmLoader,
-  title: "components/Loader",
+  title: 'components/Loader',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the loader (Can also be predefined e.g. 10px)",
+      description: 'Size of the loader (Can also be predefined e.g. 10px)',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     type: {
-      options: ["success", "warning", "error"],
+      options: ['success', 'warning', 'error'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Type of loader",
+      description: 'Type of loader',
       defaultValue: {
-        summary: "Beem default loader"
+        summary: 'Beem default loader'
       }
     }
   }
@@ -47,6 +47,6 @@ var MainLoader = function MainLoader(args) {
 var Loader = MainLoader.bind({});
 exports.Loader = Loader;
 Loader.args = {
-  type: "success",
-  size: "small"
+  type: 'success',
+  size: 'small'
 };

package/dist/components/MainWrapper/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../colors");
 
-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 MainWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 2.1875rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue);
+var MainWrapper = _styledComponents.default.div.withConfig({
+  displayName: "MainWrapper"
+})(["padding:2.1875rem;background-color:", ";"], _colors.BmBgGreyBlue);
 
 exports.MainWrapper = MainWrapper;

package/dist/components/MessageCounter/MessageCounter.stories.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,29 +9,27 @@ exports.default = exports.MessageCounter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _messageCounter = _interopRequireDefault(require("./messageCounter"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _messageCounter = _interopRequireDefault(require("./messageCounter"));
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _messageCounter.default,
-  title: "components/MessageCounter",
+  title: 'components/MessageCounter',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the counter (can also be custom example: 10px)",
+      description: 'Size of the counter (can also be custom example: 10px)',
       defaultValue: {
-        summary: "small"
+        summary: 'small'
       }
     },
     children: {
-      description: "Counter Text",
+      description: 'Counter Text',
       defaultValue: {
         summary: undefined
       }
@@ -38,15 +38,15 @@ var _default = {
 };
 exports.default = _default;
 var optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
 };
 
 var MessageCounter = function MessageCounter() {
   return /*#__PURE__*/_react.default.createElement(_messageCounter.default, {
-    size: (0, _addonKnobs.select)("size", optionSize, "large")
-  }, (0, _addonKnobs.text)("children", "00"));
+    size: (0, _addonKnobs.select)('size', optionSize, 'large')
+  }, (0, _addonKnobs.text)('children', '00'));
 };
 
 exports.MessageCounter = MessageCounter;

package/dist/components/MessageCounter/messageCounter.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,31 +15,27 @@ var _colors = require("../colors");
 
 var _text = require("../text");
 
-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 BmCounter = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  border-radius: 50%;\n  text-align: center;\n  background: ", ";\n"])), _colors.BmPrimaryWhite, function (_ref) {
+var BmCounter = _styledComponents.default.div.withConfig({
+  displayName: "messageCounter__BmCounter"
+})(["display:flex;align-items:center;justify-content:center;text-align:center;color:", ";width:", ";height:", ";", " border-radius:50%;text-align:center;background:", ";"], _colors.BmPrimaryWhite, function (_ref) {
   var size = _ref.size;
-  if (size === "small") return "1.429rem";
-  if (size === "medium") return "1.714rem";
-  if (size === "large") return "2.286rem";
-  if (!size) return "1.429rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '1.429rem';
   return size;
 }, function (_ref2) {
   var size = _ref2.size;
-  if (size === "small") return "1.429rem";
-  if (size === "medium") return "1.714rem";
-  if (size === "large") return "2.286rem";
-  if (!size) return "1.429rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '1.429rem';
   return size;
 }, function (_ref3) {
   var size = _ref3.size;
-  if (size === "large") return "".concat(_text.h3);
-  if (size === "medium") return "".concat(_text.h4);
-  if (size === "small") return "".concat(_text.p);
+  if (size === 'large') return "".concat(_text.h3);
+  if (size === 'medium') return "".concat(_text.h4);
+  if (size === 'small') return "".concat(_text.p);
   return "".concat(_text.p);
 }, _colors.BmPrimaryBlue);
 

package/dist/components/Modals/modal.js

@@ -1,15 +1,19 @@
 "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); }
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
+
+var _interopRequireWildcard = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireWildcard.js").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Overlay = exports.ModalWrapper = exports.ModalContent = exports.BmModal = void 0;
+exports.default = exports.Overlay = exports.ModalWrapper = exports.ModalContent = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _icons = require("@material-ui/icons");
 
@@ -22,47 +26,25 @@ var _iconStyles = require("../iconStyles");
 var _excluded = ["children", "show", "size", "onHide", "centered"],
     _excluded2 = ["children", "size", "onHide", "closeButton", "show"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
-
-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 _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: 100vw;\n  height: 100vh;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
+var Overlay = _styledComponents.default.div.withConfig({
+  displayName: "modal__Overlay"
+})(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";}"], _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: 2rem auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
+var ModalContent = _styledComponents.default.div.withConfig({
+  displayName: "modal__ModalContent"
+})(["display:flex;flex-direction:column;border-radius:0.25rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){max-width:500px;width:500px;}"], _colors.BmPrimaryWhite);
 
 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: auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var ModalWrapper = _styledComponents.default.div.withConfig({
+  displayName: "modal__ModalWrapper"
+})(["position:fixed;top:0;left:0;z-index:9999;display:block;width:100%;height:100%;overflow:hidden;outline:0;margin:auto;overflow-x:hidden;overflow-y:auto;"]);
 
 exports.ModalWrapper = ModalWrapper;
 
@@ -72,10 +54,10 @@ var BmModal = function BmModal(_ref) {
       size = _ref.size,
       onHide = _ref.onHide,
       centered = _ref.centered,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(show),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       toggle = _useState2[0],
       setToggle = _useState2[1];
 
@@ -83,14 +65,14 @@ var BmModal = function BmModal(_ref) {
     setToggle(show);
   }, [show]);
   var keyPress = (0, _react.useCallback)(function (e) {
-    if (e.key === "Escape" && show && onHide !== undefined) {
+    if (e.key === 'Escape' && show && onHide !== undefined) {
       onHide(false);
     }
   }, [onHide, show]);
   (0, _react.useEffect)(function () {
-    document.addEventListener("keydown", keyPress);
+    document.addEventListener('keydown', keyPress);
     return function () {
-      return document.removeEventListener("keydown", keyPress);
+      return document.removeEventListener('keydown', keyPress);
     };
   }, [keyPress]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
@@ -105,14 +87,14 @@ var BmModal = function BmModal(_ref) {
       show: show,
       onHide: onHide
     }
-  }, /*#__PURE__*/_react.default.createElement(ModalContent, _extends({
+  }, /*#__PURE__*/_react.default.createElement(ModalContent, Object.assign({
     size: size
   }, rest), children)))));
 };
 
-exports.BmModal = BmModal;
-
-var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items:center;\n"])));
+var ModalHeader = _styledComponents.default.div.withConfig({
+  displayName: "modal__ModalHeader"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;"]);
 
 BmModal.Header = function (_ref2) {
   var children = _ref2.children,
@@ -120,20 +102,24 @@ BmModal.Header = function (_ref2) {
       onHide = _ref2.onHide,
       closeButton = _ref2.closeButton,
       show = _ref2.show,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), children, closeButton ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, Object.assign({
       size: "xlarge",
       icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
       onClick: function onClick() {
         return value && value.onHide && value.onHide(!value.show);
       }
-    }, rest))));
+    }, rest)) : /*#__PURE__*/_react.default.createElement("p", null, "\xA0")));
   });
 };
 
-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"])), ''
+BmModal.SubHeader = _styledComponents.default.div.withConfig({
+  displayName: "modal__SubHeader"
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;"]);
+BmModal.Body = _styledComponents.default.div.withConfig({
+  displayName: "modal__Body"
+})(["display:flex;flex-direction:column;justify-content:space-between;> *:not(:last-child){margin-bottom:0.5rem;}", ""], ''
 /* max-height: ${({ size }) => {
 if (size) {
 if (size === "small") return "21.429rem";
@@ -146,13 +132,8 @@ return "35.714rem";
 }};
 overflow: auto; */
 );
-BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-BmModal.propTypes = {
-  size: _propTypes.default.string,
-  centered: _propTypes.default.bool,
-  show: _propTypes.default.bool.isRequired,
-  onHide: _propTypes.default.func.isRequired,
-  closeButton: _propTypes.default.bool
-};
+BmModal.Footer = _styledComponents.default.div.withConfig({
+  displayName: "modal__Footer"
+})(["display:flex;justify-content:space-between;"]);
 var _default = BmModal;
 exports.default = _default;

package/dist/components/Modals/modals.stories.js

@@ -1,11 +1,15 @@
 "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); }
+var _interopRequireWildcard = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireWildcard.js").default;
+
+var _interopRequireDefault = require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/interopRequireDefault.js").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SampleModal = exports.ExampleModal = void 0;
+exports.default = exports.SampleModal = exports.ModalWithSubHeader = exports.ExampleModal = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,28 +17,11 @@ var _modal = _interopRequireDefault(require("./modal"));
 
 var _buttons = require("../Buttons/buttons");
 
-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; }
-
+/* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _modal.default,
-  title: "components/Modals",
-  argType: {
+  title: 'components/Modals',
+  argTypes: {
     // size: {
     //   options: ["small", "default", "large", "xlarge"],
     //   control: { type: "select" },
@@ -42,19 +29,19 @@ var _default = {
     //   defaultValue: { summary: "default" },
     // },
     closeButton: {
-      description: "Placed on BmModal.Header component. Displays the close button (X)"
+      description: 'Placed on BmModal.Header component. Displays the close button (X)'
     },
     // centered: {
     //   description: "Centers the modal",
     // },
     show: {
       control: {
-        type: "boolean"
+        type: 'boolean'
       },
-      description: "Handling the opening and closing of the modal"
+      description: 'Handling the opening and closing of the modal'
     },
     onHide: {
-      description: "Handling the closing of the modal"
+      description: 'Handling the closing of the modal'
     }
   }
 };
@@ -62,7 +49,7 @@ exports.default = _default;
 
 var SampleModal = function SampleModal() {
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
@@ -82,12 +69,34 @@ var SampleModal = function SampleModal() {
 
 exports.SampleModal = SampleModal;
 
-var ExampleModal = function ExampleModal() {
+var ModalWithSubHeader = function ModalWithSubHeader() {
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       showModal = _useState4[0],
       setShowModal = _useState4[1];
 
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!")), /*#__PURE__*/_react.default.createElement(_modal.default, {
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.SubHeader, null, /*#__PURE__*/_react.default.createElement("h5", null, "This modal has a sub heading")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));
+};
+
+exports.ModalWithSubHeader = ModalWithSubHeader;
+
+var ExampleModal = function ExampleModal() {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showModal = _useState6[0],
+      setShowModal = _useState6[1];
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
     onClick: function onClick() {
       return setShowModal(!showModal);