beem-component 1.5.6 → 1.5.9

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -0,0 +1,96 @@
+"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.BmProfileIcon = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/tejal/Desktop/Beem-UI/bm-components/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _wa = _interopRequireDefault(require("../../assets/wa.png"));
+
+var _fb = _interopRequireDefault(require("../../assets/fb.png"));
+
+var _insta = _interopRequireDefault(require("../../assets/insta.png"));
+
+var _excluded = ["img", "content", "channel", "size"];
+
+var handleSize = function 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';
+};
+
+var position = function 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';
+};
+
+var ProfileImg = _styledComponents.default.img.withConfig({
+  displayName: "ProfileIcon__ProfileImg"
+})(["height:", ";width:", ";object-fit:contain;border-radius:50%;display:flex;"], function (props) {
+  return handleSize(props.size);
+}, function (props) {
+  return handleSize(props.size);
+});
+
+var Profile = _styledComponents.default.div.withConfig({
+  displayName: "ProfileIcon__Profile"
+})(["height:", ";width:", ";border-radius:50%;border:1px solid ", ";display:flex;align-items:center;justify-content:center;position:relative;background:", ";"], function (props) {
+  return handleSize(props.size);
+}, function (props) {
+  return handleSize(props.size);
+}, _colors.BmBgLightBlue, _colors.BmSecondaryBlue12);
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "ProfileIcon__Content"
+})(["display:flex;align-items:center;justify-content:center;position:absolute;"]);
+
+var Dot = _styledComponents.default.img.withConfig({
+  displayName: "ProfileIcon__Dot"
+})(["position:absolute;left:", ";bottom:0rem;object-fit:contain;height:1rem;width:1rem;"], function (props) {
+  return position(props.size);
+});
+
+var BmProfileIcon = function BmProfileIcon(_ref) {
+  var img = _ref.img,
+      content = _ref.content,
+      channel = _ref.channel,
+      size = _ref.size,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Profile, Object.assign({
+    size: size
+  }, rest), content && !img && /*#__PURE__*/_react.default.createElement(Content, null, content), img && !content && /*#__PURE__*/_react.default.createElement(ProfileImg, {
+    src: img
+  }), channel && channel === 'whatsapp' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _wa.default
+  }), channel && channel === 'facebook' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _fb.default
+  }), channel && channel === 'instagram' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _insta.default
+  })));
+};
+
+exports.BmProfileIcon = BmProfileIcon;

package/dist/components/ProfileIcon/profileIcon.stories.js

@@ -0,0 +1,82 @@
+"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.default = exports.Sample = exports.ImageProfile = exports.ContentProfile = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ProfileIcon = require("./ProfileIcon");
+
+var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _ProfileIcon.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
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainProfileIcon = function MainProfileIcon(args) {
+  return /*#__PURE__*/_react.default.createElement(_ProfileIcon.BmProfileIcon, args);
+};
+
+var Sample = MainProfileIcon.bind({});
+exports.Sample = Sample;
+Sample.args = {
+  channel: 'whatsapp',
+  size: 'large'
+};
+var ImageProfile = MainProfileIcon.bind({});
+exports.ImageProfile = ImageProfile;
+ImageProfile.args = {
+  channel: 'whatsapp',
+  size: 'large',
+  img: _beem.default,
+  content: undefined
+};
+var ContentProfile = MainProfileIcon.bind({});
+exports.ContentProfile = ContentProfile;
+ContentProfile.args = {
+  channel: 'whatsapp',
+  size: 'large',
+  content: /*#__PURE__*/_react.default.createElement("h4", null, "BC"),
+  img: undefined
+};

package/dist/components/ProgressBar/progressbar.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,22 +11,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _colors = require("../colors");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 0.75rem;\n  width: 100%;\n  position: relative;\n"])));
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "progressbar__Container"
+})(["height:0.75rem;width:100%;position:relative;"]);
 
-var BaseBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  position: absolute;\n  border-radius: 0.25rem;\n  transition: width 1s ease-in-out;\n"])));
+var BaseBox = _styledComponents.default.div.withConfig({
+  displayName: "progressbar__BaseBox"
+})(["height:100%;position:absolute;border-radius:0.25rem;transition:width 1s ease-in-out;"]);
 
-var Background = (0, _styledComponents.default)(BaseBox)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 100%;\n"])), _colors.BmGrey100);
-var Progress = (0, _styledComponents.default)(BaseBox)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: ", "%;\n"])), function (props) {
+var Background = (0, _styledComponents.default)(BaseBox).withConfig({
+  displayName: "progressbar__Background"
+})(["background:", ";width:100%;"], _colors.BmGrey100);
+var Progress = (0, _styledComponents.default)(BaseBox).withConfig({
+  displayName: "progressbar__Progress"
+})(["background:", ";width:", "%;"], function (props) {
   return props.color ? props.color : "".concat(_colors.BmPrimaryBlue, " ");
 }, function (_ref) {
   var value = _ref.value;
@@ -40,8 +42,4 @@ var BmProgressBar = function BmProgressBar(props) {
   }));
 };
 
-exports.BmProgressBar = BmProgressBar;
-BmProgressBar.propTypes = {
-  value: _propTypes.default.string.isRequired,
-  color: _propTypes.default.string
-};
+exports.BmProgressBar = BmProgressBar;

package/dist/components/ProgressBar/progressbar.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,26 +11,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _progressbar = require("./progressbar");
 
-var _icons = require("@material-ui/icons");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _progressbar.BmProgressBar,
-  title: "components/ProgressBar",
+  title: 'components/ProgressBar',
   argTypes: {
     value: {
       control: {
-        type: "text"
+        type: 'text'
       },
-      description: "Progress value"
+      description: 'Progress value'
     },
     color: {
       control: {
-        type: "text"
+        type: 'text'
       },
-      description: "Color of the progress bar"
+      description: 'Color of the progress bar'
     }
   }
 };
@@ -41,5 +39,5 @@ var MainProgressBar = function MainProgressBar(args) {
 var ProgressBar = MainProgressBar.bind({});
 exports.ProgressBar = ProgressBar;
 ProgressBar.args = {
-  value: "50"
+  value: '50'
 };

package/dist/components/ProgressRing/progressRing.js

@@ -1,42 +1,23 @@
 "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 = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("../colors");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+/* eslint-disable no-shadow */
 var small = 1.429;
 var medium = 1.714;
 var large = 2.286;
@@ -49,15 +30,15 @@ var initialSize;
 var measurement = function measurement(size) {
   var initialSize = size || large * 14;
 
-  if (size === "small") {
+  if (size === 'small') {
     initialSize = small * 14;
   }
 
-  if (size === "medium") {
+  if (size === 'medium') {
     initialSize = medium * 14;
   }
 
-  if (size === "large") {
+  if (size === 'large') {
     initialSize = large * 14;
   }
 
@@ -72,54 +53,62 @@ var measurement = function measurement(size) {
   };
 };
 
-var ProgressRingWrapper = _styledComponents.default.svg(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", ";\n  height: ", ";\n"])), function (_ref) {
+var ProgressRingWrapper = _styledComponents.default.svg.withConfig({
+  displayName: "progressRing__ProgressRingWrapper"
+})(["display:flex;width:", ";height:", ";"], 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 "2.286rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '2.286rem';
   return "".concat(size, "px");
 }, 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 "2.286rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '2.286rem';
   return "".concat(size, "px");
 });
 
-var ProgressRingCircle1 = _styledComponents.default.circle(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  fill: none;\n"])));
+var ProgressRingCircle1 = _styledComponents.default.circle.withConfig({
+  displayName: "progressRing__ProgressRingCircle1"
+})(["fill:none;"]);
 
-var ProgressRingCircle2 = _styledComponents.default.circle(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref3) {
+var ProgressRingCircle2 = _styledComponents.default.circle.withConfig({
+  displayName: "progressRing__ProgressRingCircle2"
+})(["fill:none;stroke:", ";"], function (_ref3) {
   var variant = _ref3.variant,
       progress = _ref3.progress;
 
   if (progress) {
-    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
-    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
-    if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
-    if (variant === "danger") return "".concat(_colors.BmSecondaryRed);
+    if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
+    if (variant === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === 'warning') return "".concat(_colors.BmPrimaryGold);
+    if (variant === 'danger') return "".concat(_colors.BmSecondaryRed);
     if (!variant) return "".concat(_colors.BmPrimaryBlue);
   }
 
   if (!progress) return "".concat(_colors.BmGrey100);
 });
 
-var Text = _styledComponents.default.text(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-anchor: middle;\n  fill: black;\n"])), function () {
+var Text = _styledComponents.default.text.withConfig({
+  displayName: "progressRing__Text"
+})(["font-size:", ";text-anchor:middle;fill:black;"], function () {
   if (initialSize >= 50 && initialSize < 100) {
-    return "1rem";
+    return '1rem';
   }
 
   if (initialSize >= 100) {
-    return "2rem";
+    return '2rem';
   }
 
-  return "0.5rem";
+  return '0.5rem';
 });
 
 var BmProgressRing = function BmProgressRing(props) {
   var _useState = (0, _react.useState)(0),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       offset = _useState2[0],
       setOffset = _useState2[1];
 
@@ -135,7 +124,7 @@ var BmProgressRing = function BmProgressRing(props) {
   (0, _react.useEffect)(function () {
     var progressOffset = (100 - progress) / 100 * circumference;
     setOffset(progressOffset);
-    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+    circleRef.current.style = 'transition: stroke-dashoffset 850ms ease-in-out';
   }, [setOffset, progress, offset]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProgressRingWrapper, {
     size: size
@@ -163,10 +152,5 @@ var BmProgressRing = function BmProgressRing(props) {
   })));
 };
 
-BmProgressRing.propTypes = {
-  size: _propTypes.default.number.isRequired,
-  progress: _propTypes.default.number.isRequired,
-  variant: _propTypes.default.string
-};
 var _default = BmProgressRing;
 exports.default = _default;

package/dist/components/ProgressRing/progressRing.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,34 +11,32 @@ var _react = _interopRequireDefault(require("react"));
 
 var _progressRing = _interopRequireDefault(require("./progressRing"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _progressRing.default,
-  title: "components/ProgressRing",
+  title: 'components/ProgressRing',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the Progress Ring (Can also be predefined e.g. 50)",
+      description: 'Size of the Progress Ring (Can also be predefined e.g. 50)',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     progress: {
-      description: "Progress Indicator"
+      description: 'Progress Indicator'
     },
     variant: {
-      options: ["primary", "success", "warning", "danger"],
+      options: ['primary', 'success', 'warning', 'danger'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Color of the Progress Ring",
+      description: 'Color of the Progress Ring',
       defaultValue: {
-        summary: "xsmall"
+        summary: 'xsmall'
       }
     }
   }
@@ -51,13 +51,13 @@ var BasicProgressRing = MainProgressRing.bind({});
 exports.BasicProgressRing = BasicProgressRing;
 BasicProgressRing.args = {
   progress: 30,
-  variant: "success",
-  size: "xlarge"
+  variant: 'success',
+  size: 'xlarge'
 };
 var CustomProgressRing = MainProgressRing.bind({});
 exports.CustomProgressRing = CustomProgressRing;
 CustomProgressRing.args = {
   progress: 50,
-  variant: "primary",
-  size: "40"
+  variant: 'primary',
+  size: '40'
 };

package/dist/components/RouteLink/link.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,20 +11,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _colors = require("../colors");
-
-var _text = require("../text");
-
 var _polished = require("polished");
 
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _colors = require("../colors");
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _text = require("../text");
 
-//TODO: To be fixed for hover states
-var BmRouteLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  color: ", " !important;\n  text-decoration: none;\n  &:hover,\n  &:focus,\n  &:active {\n    font-weight: 600;\n    &:before {\n      font-weight: normal;\n    }\n    color: ", " !important;\n  }\n"])), _text.p, function (props) {
+// TODO: To be fixed for hover states
+var BmRouteLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
+  displayName: "link__BmRouteLink"
+})(["", " color:", " !important;text-decoration:none;&:hover,&:focus,&:active{font-weight:600;&:before{font-weight:normal;}color:", " !important;}"], _text.p, function (props) {
   return props.color ? props.color : "".concat(_colors.BmPrimaryBlue, " ");
 }, function (props) {
   return (0, _polished.darken)(0.1, props.color ? props.color : "".concat(_colors.BmPrimaryBlue));

package/dist/components/RouteLink/link.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
 });
@@ -11,12 +13,10 @@ var _reactRouterDom = require("react-router-dom");
 
 var _link = require("./link");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _link.BmRouteLink,
-  title: "components/RouteLink"
+  title: 'components/RouteLink'
 };
 exports.default = _default;
 

package/dist/components/ScrollBar/scrollBar.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,34 +9,34 @@ exports.default = exports.ScrollbarWrapper = exports.Scrollbar = exports.Content
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var ScrollbarWrapper = _styledComponents.default.div(function () {
+var ScrollbarWrapper = _styledComponents.default.div.withConfig({
+  displayName: "scrollBar__ScrollbarWrapper"
+})(function () {
   return {
-    "::-webkit-scrollbar-thumb": {
-      background: "blue",
-      maxHeight: "10px",
-      display: "block",
-      width: "10em",
-      overflow: "auto",
-      height: "2em"
+    '::-webkit-scrollbar-thumb': {
+      background: 'blue',
+      maxHeight: '10px',
+      display: 'block',
+      width: '10em',
+      overflow: 'auto',
+      height: '2em'
     }
   };
 });
 
 exports.ScrollbarWrapper = ScrollbarWrapper;
 
-var Scrollbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n::-webkit-scrollbar {\n    width: 0.714rem !important;\n}\n::-webkit-scrollbar-thumb {\n    background-color: #E2E2E2;\n}"])));
+var Scrollbar = _styledComponents.default.div.withConfig({
+  displayName: "scrollBar__Scrollbar"
+})(["::-webkit-scrollbar{width:0.714rem !important;}::-webkit-scrollbar-thumb{background-color:#e2e2e2;}"]);
 
 exports.Scrollbar = Scrollbar;
 
-var Content = _styledComponents.default.div(function () {
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "scrollBar__Content"
+})(function () {
   return {
-    direction: "ltr" // if you want to show the scroll bar on the left
+    direction: 'ltr' // if you want to show the scroll bar on the left
 
   };
 });