beem-component 2.0.27 → 2.1.0

package/dist/components/Pills/pills.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -13,54 +12,47 @@ var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
 var _text = require("../text");
-var _excluded = ["type", "icon", "avatarIcon", "size", "avatarSize", "color", "label", "onDelete", "deleteIcon"];
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) 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; }
-var BmPillWrapper = _styledComponents.default.div.withConfig({
+const _excluded = ["type", "icon", "avatarIcon", "size", "avatarSize", "color", "label", "onDelete", "deleteIcon"]; // eslint-disable-next-line no-unused-vars
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const BmPillWrapper = exports.BmPillWrapper = _styledComponents.default.div.withConfig({
   displayName: "pills__BmPillWrapper"
-})(["display:", ";flex-direction:row;justify-content:center;align-items:center;padding:0.214rem 0.571rem;background:", ";border-radius:0.25rem;", " > *{margin-right:0.25rem;}"], function (_ref) {
-  var clicked = _ref.clicked;
+})(["display:", ";flex-direction:row;justify-content:center;align-items:center;padding:0.214rem 0.571rem;background:", ";border-radius:0.25rem;", " > *{margin-right:0.25rem;}"], _ref => {
+  let {
+    clicked
+  } = _ref;
   if (clicked) {
     return 'flex';
   }
   return 'none';
-}, _colors.BmGrey100, function (_ref2) {
-  var label = _ref2.label,
-    color = _ref2.color;
+}, _colors.BmGrey100, _ref2 => {
+  let {
+    label,
+    color
+  } = _ref2;
   return label && "\n    ".concat(_text.p, "\n    text-transform: uppercase;\n    color: ").concat(color, ";\n  ");
 });
-exports.BmPillWrapper = BmPillWrapper;
-var BmPill = function BmPill(_ref3) {
-  var type = _ref3.type,
-    icon = _ref3.icon,
-    avatarIcon = _ref3.avatarIcon,
-    size = _ref3.size,
-    avatarSize = _ref3.avatarSize,
-    color = _ref3.color,
-    label = _ref3.label,
-    onDelete = _ref3.onDelete,
-    deleteIcon = _ref3.deleteIcon,
+const BmPill = _ref3 => {
+  let {
+      type,
+      icon,
+      avatarIcon,
+      size,
+      avatarSize,
+      color,
+      label,
+      onDelete,
+      deleteIcon
+    } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded);
-  var _useState = (0, _react.useState)(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
+  const [clicked, setClicked] = (0, _react.useState)(true);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmPillWrapper, _extends({
     label: label,
     onDelete: onDelete,
-    onClick: function onClick() {
-      return onDelete ? setClicked(false) : setClicked(true);
-    },
+    onClick: () => onDelete ? setClicked(false) : setClicked(true),
     color: color,
     clicked: clicked
   }, rest), icon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {

package/dist/components/Pills/pills.stories.js

@@ -7,9 +7,9 @@ exports.default = exports.CustomPill = exports.BasicPill = void 0;
 var _icons = require("@material-ui/icons");
 var _react = _interopRequireDefault(require("react"));
 var _pills = require("./pills");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _pills.BmPill,
   title: 'components/Pills',
   argTypes: {
@@ -71,12 +71,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainPill = function MainPill(args) {
-  return /*#__PURE__*/_react.default.createElement(_pills.BmPill, args);
-};
-var BasicPill = MainPill.bind({});
-exports.BasicPill = BasicPill;
+const MainPill = args => /*#__PURE__*/_react.default.createElement(_pills.BmPill, args);
+const BasicPill = exports.BasicPill = MainPill.bind({});
 BasicPill.args = {
   icon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   label: 'label',
@@ -87,8 +83,7 @@ BasicPill.args = {
   avatarSize: undefined,
   size: undefined
 };
-var CustomPill = MainPill.bind({});
-exports.CustomPill = CustomPill;
+const CustomPill = exports.CustomPill = MainPill.bind({});
 CustomPill.args = {
   icon: undefined,
   label: 'label',

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -12,14 +11,13 @@ var _wa = _interopRequireDefault(require("../../assets/wa.png"));
 var _fb = _interopRequireDefault(require("../../assets/fb.png"));
 var _insta = _interopRequireDefault(require("../../assets/insta.png"));
 var _Google_Messages_logo = _interopRequireDefault(require("../../assets/Google_Messages_logo.png"));
-var _excluded = ["img", "content", "channel", "size"];
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 handleSize = function handleSize(size) {
+const _excluded = ["img", "content", "channel", "size"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const handleSize = size => {
   if (size) {
     if (size === 'large') return '3.429rem';
     if (size === 'medium') return '2.286rem';
@@ -28,7 +26,7 @@ var handleSize = function handleSize(size) {
   }
   return '3.429rem';
 };
-var position = function position(size) {
+const position = size => {
   if (size) {
     if (size === 'large') return '2.286rem';
     if (size === 'medium') return '1.5rem';
@@ -37,41 +35,33 @@ var position = function position(size) {
   }
   return '2.286rem';
 };
-var ProfileImg = _styledComponents.default.img.withConfig({
+const 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({
+})(["height:", ";width:", ";object-fit:contain;border-radius:50%;display:flex;"], props => handleSize(props.size), props => handleSize(props.size));
+const Profile = _styledComponents.default.div.withConfig({
   displayName: "ProfileIcon__Profile"
-})(["height:", ";width:", ";border-radius:50%;border:", ";display:flex;align-items:center;justify-content:center;position:relative;background:", ";", ""], function (props) {
-  return handleSize(props.size);
-}, function (props) {
-  return handleSize(props.size);
-}, function (_ref) {
-  var multiChannel = _ref.multiChannel;
+})(["height:", ";width:", ";border-radius:50%;border:", ";display:flex;align-items:center;justify-content:center;position:relative;background:", ";", ""], props => handleSize(props.size), props => handleSize(props.size), _ref => {
+  let {
+    multiChannel
+  } = _ref;
   if (multiChannel) {
     return ".1429rem solid ".concat(multiChannel, " ");
   }
   return ".0714rem solid ".concat(_colors.BmBgLightBlue);
-}, _colors.BmSecondaryBlue12, function (props) {
-  return props.hoverEnabled && props.hoverText && (0, _styledComponents.css)(["&:hover::after{content:'", "';position:absolute;bottom:-1.8em;left:50%;transform:translateX(-50%);background:#fff;color:rgba(0,0,0,0.7);padding:6px 12px;border-radius:12px;text-transform:capitalize;font-weight:500;font-size:0.9rem;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;}"], props.hoverText.length > 10 ? "".concat(props.hoverText.slice(0, 10), "\u2026") : props.hoverText);
-});
-var Content = _styledComponents.default.div.withConfig({
+}, _colors.BmSecondaryBlue12, props => props.hoverEnabled && props.hoverText && (0, _styledComponents.css)(["&:hover::after{content:'", "';position:absolute;bottom:-1.8em;left:50%;transform:translateX(-50%);background:#fff;color:rgba(0,0,0,0.7);padding:6px 12px;border-radius:12px;text-transform:capitalize;font-weight:500;font-size:0.9rem;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;}"], props.hoverText.length > 10 ? "".concat(props.hoverText.slice(0, 10), "\u2026") : props.hoverText));
+const Content = _styledComponents.default.div.withConfig({
   displayName: "ProfileIcon__Content"
 })(["display:flex;align-items:center;justify-content:center;position:absolute;"]);
-var Dot = _styledComponents.default.img.withConfig({
+const 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(_ref2) {
-  var img = _ref2.img,
-    content = _ref2.content,
-    channel = _ref2.channel,
-    size = _ref2.size,
+})(["position:absolute;left:", ";bottom:0rem;object-fit:contain;height:1rem;width:1rem;"], props => position(props.size));
+const BmProfileIcon = _ref2 => {
+  let {
+      img,
+      content,
+      channel,
+      size
+    } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Profile, _extends({
     size: size

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

@@ -7,9 +7,9 @@ exports.default = exports.Sample = exports.ImageProfile = exports.ContentProfile
 var _react = _interopRequireDefault(require("react"));
 var _ProfileIcon = require("./ProfileIcon");
 var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _ProfileIcon.BmProfileIcon,
   title: 'components/ProfileIcon',
   argTypes: {
@@ -47,26 +47,20 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainProfileIcon = function MainProfileIcon(args) {
-  return /*#__PURE__*/_react.default.createElement(_ProfileIcon.BmProfileIcon, args);
-};
-var Sample = MainProfileIcon.bind({});
-exports.Sample = Sample;
+const MainProfileIcon = args => /*#__PURE__*/_react.default.createElement(_ProfileIcon.BmProfileIcon, args);
+const Sample = exports.Sample = MainProfileIcon.bind({});
 Sample.args = {
   channel: 'whatsapp',
   size: 'large'
 };
-var ImageProfile = MainProfileIcon.bind({});
-exports.ImageProfile = ImageProfile;
+const ImageProfile = exports.ImageProfile = MainProfileIcon.bind({});
 ImageProfile.args = {
   channel: 'whatsapp',
   size: 'large',
   img: _beem.default,
   content: undefined
 };
-var ContentProfile = MainProfileIcon.bind({});
-exports.ContentProfile = ContentProfile;
+const ContentProfile = exports.ContentProfile = MainProfileIcon.bind({});
 ContentProfile.args = {
   channel: 'whatsapp',
   size: 'large',

package/dist/components/ProgressBar/progressbar.js

@@ -8,27 +8,29 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _colors = require("../colors");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Container = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Container = _styledComponents.default.div.withConfig({
   displayName: "progressbar__Container"
 })(["height:0.75rem;width:100%;position:relative;"]);
-var BaseBox = _styledComponents.default.div.withConfig({
+const 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).withConfig({
+const Background = (0, _styledComponents.default)(BaseBox).withConfig({
   displayName: "progressbar__Background"
 })(["background:", ";width:100%;"], _colors.BmGrey100);
-var Progress = (0, _styledComponents.default)(BaseBox).withConfig({
+const 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;
+})(["background:", ";width:", "%;"], props => props.color ? props.color : "".concat(_colors.BmPrimaryBlue, " "), _ref => {
+  let {
+    value
+  } = _ref;
   return value;
 });
-var BmProgressBar = function BmProgressBar(props) {
-  var value = props.value,
-    color = props.color;
+const BmProgressBar = props => {
+  const {
+    value,
+    color
+  } = props;
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Background, null), /*#__PURE__*/_react.default.createElement(Progress, {
     value: value,
     color: color

package/dist/components/ProgressBar/progressbar.stories.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ProgressBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _progressbar = require("./progressbar");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _progressbar.BmProgressBar,
   title: 'components/ProgressBar',
   argTypes: {
@@ -26,12 +26,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainProgressBar = function MainProgressBar(args) {
-  return /*#__PURE__*/_react.default.createElement(_progressbar.BmProgressBar, args);
-};
-var ProgressBar = MainProgressBar.bind({});
-exports.ProgressBar = ProgressBar;
+const MainProgressBar = args => /*#__PURE__*/_react.default.createElement(_progressbar.BmProgressBar, args);
+const ProgressBar = exports.ProgressBar = MainProgressBar.bind({});
 ProgressBar.args = {
   value: '50'
 };

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__Container"
+})(["margin-bottom:1rem;--primary-color:", ";--primary-light:", ";--primary-lighter:", ";--muted-color:", ";--muted-foreground-color:", ";@media (min-width:45.7143rem){margin-bottom:1.5rem;}"], _ref => {
+  let {
+    primaryColor
+  } = _ref;
+  return primaryColor;
+}, _ref2 => {
+  let {
+    primaryColor
+  } = _ref2;
+  return hexToRgba(primaryColor, 0.2);
+}, _ref3 => {
+  let {
+    primaryColor
+  } = _ref3;
+  return hexToRgba(primaryColor, 0.4);
+}, _ref4 => {
+  let {
+    mutedColor
+  } = _ref4;
+  return mutedColor;
+}, _ref5 => {
+  let {
+    mutedForegroundColor
+  } = _ref5;
+  return mutedForegroundColor;
+});
+const ProgressMobile = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__ProgressMobile"
+})(["display:flex;justify-content:center;gap:0.5rem;margin-bottom:0.5rem;@media (min-width:45.7143rem){display:none;}"]);
+const ProgressDot = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__ProgressDot"
+})(["width:0.625rem;height:0.625rem;border-radius:50%;background-color:var(--muted-color);transition:background-color 0.3s ease;&.active{background-color:var(--primary-color);}&.completed{background-color:var(--primary-lighter);}"]);
+const ProgressDesktop = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__ProgressDesktop"
+})(["display:none;justify-content:space-between;align-items:center;margin-bottom:0.5rem;@media (min-width:45.7143rem){display:flex;}"]);
+const Step = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__Step"
+})(["display:flex;flex-direction:column;align-items:center;flex:1;position:relative;"]);
+const Circle = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__Circle"
+})(["width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.875rem;background-color:var(--muted-color);color:var(--muted-foreground-color);margin-bottom:0.25rem;transition:all 0.3s ease;&.active{background-color:var(--primary-color);color:white;}&.completed{background-color:var(--primary-light);color:var(--primary-color);}svg{width:1rem;height:1rem;}"]);
+const Label = _styledComponents.default.span.withConfig({
+  displayName: "ProgressIndicator__Label"
+})(["font-size:0.75rem;margin-top:0.25rem;color:var(--muted-foreground-color);text-align:center;font-weight:400;transition:color 0.3s ease;&.active{color:var(--primary-color);font-weight:500;}"]);
+const ProgressBar = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__ProgressBar"
+})(["width:100%;background-color:var(--muted-color);height:0.25rem;border-radius:714.2143rem;overflow:hidden;"]);
+const Fill = _styledComponents.default.div.withConfig({
+  displayName: "ProgressIndicator__Fill"
+})(["height:100%;background-color:var(--primary-color);transition:width 0.3s ease-out;width:", "%;border-radius:714.2143rem;"], _ref6 => {
+  let {
+    percentage
+  } = _ref6;
+  return percentage;
+});
+const BmProgressIndicator = _ref7 => {
+  let {
+    steps = [],
+    currentStep = 0,
+    primaryColor = '#33B1BA',
+    mutedColor = '#ececf0',
+    mutedForegroundColor = '#717182'
+  } = _ref7;
+  if (!steps || steps.length <= 1) return null;
+  const progressPercentage = currentStep / (steps.length - 1) * 100;
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    primaryColor: primaryColor,
+    mutedColor: mutedColor,
+    mutedForegroundColor: mutedForegroundColor
+  }, /*#__PURE__*/_react.default.createElement(ProgressMobile, null, steps.map((step, index) => /*#__PURE__*/_react.default.createElement(ProgressDot, {
+    key: step.key || index,
+    className: "".concat(index === currentStep ? 'active' : '', " ").concat(index < currentStep ? 'completed' : '')
+  }))), /*#__PURE__*/_react.default.createElement(ProgressDesktop, null, steps.map((step, index) => {
+    const isActive = index === currentStep;
+    const isCompleted = index < currentStep;
+    return /*#__PURE__*/_react.default.createElement(Step, {
+      key: step.key || index
+    }, /*#__PURE__*/_react.default.createElement(Circle, {
+      className: "".concat(isActive ? 'active' : '', " ").concat(isCompleted ? 'completed' : '')
+    }, isCompleted ? /*#__PURE__*/_react.default.createElement("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0z",
+      fill: "currentColor"
+    })) : /*#__PURE__*/_react.default.createElement("span", null, index + 1)), /*#__PURE__*/_react.default.createElement(Label, {
+      className: isActive ? 'active' : ''
+    }, step.label));
+  })), /*#__PURE__*/_react.default.createElement(ProgressBar, null, /*#__PURE__*/_react.default.createElement(Fill, {
+    percentage: progressPercentage
+  })));
+};
+var _default = exports.default = BmProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicator.stories.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressIndicator = _interopRequireDefault(require("./ProgressIndicator"));
+var _buttons = require("../Buttons/buttons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const steps = [{
+  key: 'step1',
+  label: 'Start'
+}, {
+  key: 'step2',
+  label: 'Details'
+}, {
+  key: 'step3',
+  label: 'Review'
+}, {
+  key: 'step4',
+  label: 'Complete'
+}];
+var _default = exports.default = {
+  title: 'Components/BmProgressIndicator',
+  component: _ProgressIndicator.default,
+  argTypes: {
+    primaryColor: {
+      control: 'color',
+      defaultValue: '#33B1BA'
+    },
+    mutedColor: {
+      control: 'color',
+      defaultValue: '#ececf0'
+    },
+    mutedForegroundColor: {
+      control: 'color',
+      defaultValue: '#717182'
+    },
+    currentStep: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 3,
+        step: 1
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ProgressIndicator.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  steps: [{
+    key: 'step1',
+    label: 'Details'
+  }, {
+    key: 'step2',
+    label: 'Verification'
+  }, {
+    key: 'step3',
+    label: 'Review'
+  }, {
+    key: 'step4',
+    label: 'Complete'
+  }],
+  currentStep: 1,
+  primaryColor: '#33B1BA',
+  mutedColor: '#ececf0',
+  mutedForegroundColor: '#717182'
+};
+const Example = () => {
+  const [currentStep, setCurrentStep] = (0, _react.useState)(1);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ProgressIndicator.default, {
+    steps: steps,
+    currentStep: currentStep,
+    primaryColor: "#10b981"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '2rem',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    width: "50%",
+    size: "medium",
+    variant: "primary",
+    onClick: () => setCurrentStep(prev => Math.max(prev - 1, 0))
+  }, "Prev"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    onClick: () => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1)),
+    borderColor: "#000000",
+    width: "50%",
+    size: "medium",
+    variant: "secondary",
+    color: "#000000"
+  }, "Next")));
+};
+exports.Example = Example;