@10play/popups - npm Package Compare versions

Comparing version 2.0.42 to 2.0.43

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [2.0.43](https://github.com/QualiNext/client-common/compare/v2.0.42...v2.0.43) (2021-08-29)
+
+**Note:** Version bump only for package @10play/popups
+
+
+
+
+
 ## [2.0.42](https://github.com/QualiNext/client-common/compare/v2.0.41...v2.0.42) (2021-08-25)
@@ -8,0 +16,0 @@

dist/popups.cjs.js

@@ -34,2 +34,17 @@ 'use strict';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -53,2 +68,36 @@ _extends = Object.assign || function (target) {
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -196,3 +245,3 @@ if (source == null) return {};
 
-function __makeTemplateObject(cooked, raw) {
+function __makeTemplateObject$1(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
@@ -254,3 +303,3 @@ return cooked;
 
-var ButtonStyled = styled__default['default'].button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var ButtonStyled = styled__default['default'].button(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var width = _a.width;
@@ -274,3 +323,3 @@ return (width ? "width: " + width : '');
 });
-var templateObject_1;
+var templateObject_1$1;
 
@@ -398,10 +447,13 @@ var Size;
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-var PopupContainer = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #bbbbc5;\n  padding: 13px;\n  z-index: 999;\n  flex-direction: row;\n  display: flex;\n  overflow-x: hidden;\n"])));
-var CloseIcon = styled__default['default'](SvgClosePopup)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: absolute;\n  top: 15px ;\n  right: 15px;\n  margin-left: auto;\n  z-index: 9;\n"])));
-var PopupBody = styled__default['default']( /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-      onClose = _ref.onClose,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["className", "onClose", "children"]);
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var PopupContainer = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n  flex-direction: row;\n  display: flex;\n  overflow-x: hidden;\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme !== null && theme !== void 0 && theme.secondaryPopup ? styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n    top: 5%;\n    height: 90%;\n    left: 25%;\n    width: 50%;\n    @media (max-width: 1100px) {\n      width: 60%;\n      left: 20%;\n    }\n    @media (max-width: 900px) {\n      width: 80%;\n      left: 10%;\n    }\n    h1 {\n      font-size: 24px;\n      font-weight: 600;\n      font-family: 'Montserrat' !important;\n    }\n    .wizard__step_indicator_item_count {\n      font-size: 50px;\n    }\n    .wizard__step_indicator_item_text {\n      font-size: 18px;\n      line-height: 18px;\n    }\n  "]))) : styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n    background-color: #bbbbc5;\n    padding: 13px;\n  "])));
+});
+var CloseIcon = styled__default['default'](SvgClosePopup)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: absolute;\n  top: 15px ;\n  right: 15px;\n  margin-left: auto;\n  z-index: 9;\n"])));
+var PopupBody = styled__default['default']( /*#__PURE__*/React__default['default'].forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+      onClose = _ref2.onClose,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, ["className", "onClose", "children"]);
 
@@ -416,11 +468,14 @@ return /*#__PURE__*/React__default['default'].createElement("div", _extends({
   }), children);
-}))(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  padding: 30px;\n  overflow: auto; \n  flex: 1;\n  position: relative;\n"])));
-var BottomDrawer = styled__default['default'].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 582px;\n  background-color: white;\n  z-index: 9;\n  height: 66px;\n  bottom: 0;\n  right: calc(50% - 323px);\n\n  &:before, &:after {\n      content: '';\n      position: absolute;\n      width: 65%;\n      height: 100%;\n      /* border-color: red; */\n      /* border-style: solid; */\n      /* border-radius: 10px; */\n      background-color: #f7f9fa;\n      box-shadow: 0 5px 10px 0 rgba(49,49,51,0.4);\n      z-index: -1;\n  /*      -webkit-animation: shadow 2s infinite;  */\n  }\n  &:before {\n      left: -7%;\n      border-width: 3px 0px 3px 3px;\n      -webkit-transform: skewX(-20deg);\n  }\n\n  &:after {\n      right: 0px;\n      border-width: 3px 3px 3px 0px;\n      -webkit-transform: skewX(20deg);\n      clip: rect(-40px, 450px, 220px, 98px);\n  }\n\n"])));
-var SubmitContainer = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 500px;\n  left: 20px;\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n"])));
-var Button = styled__default['default'](Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &.button-primary:not(.disabled):after { \n    display: none;\n  }\n"])));
+}))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  padding: 30px;\n  overflow: auto; \n  flex: 1;\n  position: relative;\n"])));
+var BottomDrawer = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 582px;\n  z-index: 9;\n  height: 66px;\n  bottom: 0;\n  right: calc(50% - 323px);\n\n  ", "\n\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return !(theme !== null && theme !== void 0 && theme.secondaryPopup) ? styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: white;\n  &:before, &:after {\n      content: '';\n      position: absolute;\n      width: 65%;\n      height: 100%;\n      /* border-color: red; */\n      /* border-style: solid; */\n      /* border-radius: 10px; */\n      background-color: #f7f9fa;\n      box-shadow: 0 5px 10px 0 rgba(49,49,51,0.4);\n      z-index: -1;\n  /*      -webkit-animation: shadow 2s infinite;  */\n  }\n  &:before {\n      left: -7%;\n      border-width: 3px 0px 3px 3px;\n      -webkit-transform: skewX(-20deg);\n  }\n\n  &:after {\n      right: 0px;\n      border-width: 3px 3px 3px 0px;\n      -webkit-transform: skewX(20deg);\n      clip: rect(-40px, 450px, 220px, 98px);\n  }\n  "]))) : styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    bottom: 10px;\n    button {\n      width: 40%;\n    }\n    & > div {\n      width: 400px;\n    }\n    width: 540px;\n  "])));
+});
+var SubmitContainer = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 500px;\n  left: 20px;\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n"])));
+var Button = styled__default['default'](Primary)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  &.button-primary:not(.disabled):after { \n    display: none;\n  }\n"])));
 
-var ButtonWithSpinner = function ButtonWithSpinner(_ref2) {
-  var loading = _ref2.loading,
-      children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, ["loading", "children"]);
+var ButtonWithSpinner = function ButtonWithSpinner(_ref4) {
+  var loading = _ref4.loading,
+      children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, ["loading", "children"]);
 
@@ -430,19 +485,22 @@ return /*#__PURE__*/React__default['default'].createElement(Button, props, loading ? /*#__PURE__*/React__default['default'].createElement(SvgSpinner, null) : children);
 
-var SubmitBtn = styled__default['default'](ButtonWithSpinner)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 35px;\n  width: 200px;\n  margin-top: 16px;\n  flex: 1;\n  margin-right: 20px;\n  margin-left: 20px;\n"])));
-var CancelBtn = styled__default['default'](SubmitBtn)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #313133;\n  background: #313133;\n  /* &.button-primary:not(.disabled):hover:after {\n    background: black !important;\n  } */\n  &:hover:after {\n  opacity: 1;\n  background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n"])));
-var DrawerSubmitBtn = styled__default['default'](Button)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 25px;\n  padding: 0;\n  width: 80px;\n  flex: 1;\n"])));
-var DrawerCancelBtn = styled__default['default'](DrawerSubmitBtn)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border: 1px solid #dddde2;\n  color: #414144;\n  background: white !important;\n  \n  &.button-primary:not(.disabled):hover:after {\n    color: #414144;\n    background: white !important;\n  }\n\n  ", "\n"])), function (_ref3) {
-  var big = _ref3.big;
+var SubmitBtn = styled__default['default'](ButtonWithSpinner)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  height: 35px;\n  width: 200px;\n  margin-top: 16px;\n  flex: 1;\n  margin-right: 20px;\n  margin-left: 20px;\n"])));
+var CancelBtn = styled__default['default'](SubmitBtn)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: #313133;\n  background: #313133;\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  /* &.button-primary:not(.disabled):hover:after {\n    background: black !important;\n  } */\n  ", "\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme.secondaryPopup) && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    background-color: #FaFbFc;\n    background: #FaFbFc;\n    /* outline: 1px black !important; */\n    border: 1px solid black !important;\n    font-weight: 400;\n    color: black;\n    &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to right, #FaFbFc, #EaEbEc);\n    }\n    &:active:after {\n      opacity: 1;\n      background: linear-gradient(to right, #FaFbFc, #EaEbEc);\n    }\n  "])));
+});
+var DrawerSubmitBtn = styled__default['default'](Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  height: 25px;\n  padding: 0;\n  width: 80px;\n  flex: 1;\n"])));
+var DrawerCancelBtn = styled__default['default'](DrawerSubmitBtn)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  border: 1px solid #dddde2;\n  color: #414144;\n  background: white !important;\n  \n  &.button-primary:not(.disabled):hover:after {\n    color: #414144;\n    background: white !important;\n  }\n\n  ", "\n"])), function (_ref6) {
+  var big = _ref6.big;
   return big ? "\n    width: 180px;\n  " : 'margin-right: 15px;';
 });
-var DrawerButtonsContainer = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 35px;\n  position: absolute;\n  bottom: 13px;\n  margin-left: -16px;\n  background-color: white;\n  height: 50px;\n  padding-top: 5px;\n"])));
-styled__default['default'](function (_ref4) {
-  var className = _ref4.className,
-      children = _ref4.children,
-      _ref4$submitTitle = _ref4.submitTitle,
-      submitTitle = _ref4$submitTitle === void 0 ? 'Save' : _ref4$submitTitle,
-      _ref4$cancelTitle = _ref4.cancelTitle,
-      cancelTitle = _ref4$cancelTitle === void 0 ? 'Cancel' : _ref4$cancelTitle,
-      onSubmit = _ref4.onSubmit,
-      onCancel = _ref4.onCancel;
+var DrawerButtonsContainer = styled__default['default'].div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 35px;\n  position: absolute;\n  bottom: 13px;\n  margin-left: -16px;\n  background-color: white;\n  height: 50px;\n  padding-top: 5px;\n"])));
+styled__default['default'](function (_ref7) {
+  var className = _ref7.className,
+      children = _ref7.children,
+      _ref7$submitTitle = _ref7.submitTitle,
+      submitTitle = _ref7$submitTitle === void 0 ? 'Save' : _ref7$submitTitle,
+      _ref7$cancelTitle = _ref7.cancelTitle,
+      cancelTitle = _ref7$cancelTitle === void 0 ? 'Cancel' : _ref7$cancelTitle,
+      onSubmit = _ref7.onSubmit,
+      onCancel = _ref7.onCancel;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -460,11 +518,11 @@ className: className
   }, submitTitle) : undefined)));
-})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  box-shadow: -1px 0 6px 0 rgba(0, 0, 0, 0.1);\n  width: 250px;\n  z-index: 1;\n  animation-name: open;\n  background-color: white;\n  animation-duration: 0.2s;\n  @keyframes open {\n    from {width: 0;}\n    to {width: 250px;}\n  }\n\n  overflow: auto;\n  padding: 30px 16px;\n  padding-bottom: 70px;\n"])));
-var DeleteIcon = styled__default['default'](SvgTrash)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  float: right;\n  width: 25px;\n  height: 25px;\n  padding-left: 6px;\n  ", "\n  cursor: pointer;\n"])), function (_ref5) {
-  var $withoutMargin = _ref5.$withoutMargin;
+})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  box-shadow: -1px 0 6px 0 rgba(0, 0, 0, 0.1);\n  width: 250px;\n  z-index: 1;\n  animation-name: open;\n  background-color: white;\n  animation-duration: 0.2s;\n  @keyframes open {\n    from {width: 0;}\n    to {width: 250px;}\n  }\n\n  overflow: auto;\n  padding: 30px 16px;\n  padding-bottom: 70px;\n"])));
+var DeleteIcon = styled__default['default'](SvgTrash)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  float: right;\n  width: 25px;\n  height: 25px;\n  padding-left: 6px;\n  ", "\n  cursor: pointer;\n"])), function (_ref8) {
+  var $withoutMargin = _ref8.$withoutMargin;
   return $withoutMargin ? '' : "\n    margin-top: -32px;\n    margin-right: -17px;\n  ";
 });
-styled__default['default'](function (_ref6) {
-  var children = _ref6.children,
-      onRemove = _ref6.onRemove,
-      className = _ref6.className;
+styled__default['default'](function (_ref9) {
+  var children = _ref9.children,
+      onRemove = _ref9.onRemove,
+      className = _ref9.className;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -475,13 +533,13 @@ className: className
   }), children);
-})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  border: 2px solid #e4e6e9;\n  padding: 40px 20px;\n  margin-top: 20px;\n"])));
-styled__default['default'].div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    min-height: 100px;\n    width: calc(100vw - 428px);\n"])));
-var PopupFooter = function PopupFooter(_ref7) {
-  var onClose = _ref7.onClose,
-      onSubmit = _ref7.onSubmit,
-      isSubmitting = _ref7.isSubmitting,
-      canSubmit = _ref7.canSubmit,
-      _ref7$submitTitle = _ref7.submitTitle,
-      submitTitle = _ref7$submitTitle === void 0 ? 'Create' : _ref7$submitTitle,
-      _ref7$cancelTitle = _ref7.cancelTitle,
-      cancelTitle = _ref7$cancelTitle === void 0 ? 'Cancel' : _ref7$cancelTitle;
+})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  border: 2px solid #e4e6e9;\n  padding: 40px 20px;\n  margin-top: 20px;\n"])));
+styled__default['default'].div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    min-height: 100px;\n    width: calc(100vw - 428px);\n"])));
+var PopupFooter = function PopupFooter(_ref10) {
+  var onClose = _ref10.onClose,
+      onSubmit = _ref10.onSubmit,
+      isSubmitting = _ref10.isSubmitting,
+      canSubmit = _ref10.canSubmit,
+      _ref10$submitTitle = _ref10.submitTitle,
+      submitTitle = _ref10$submitTitle === void 0 ? 'Create' : _ref10$submitTitle,
+      _ref10$cancelTitle = _ref10.cancelTitle,
+      cancelTitle = _ref10$cancelTitle === void 0 ? 'Cancel' : _ref10$cancelTitle;
   return /*#__PURE__*/React__default['default'].createElement(BottomDrawer, null, /*#__PURE__*/React__default['default'].createElement(SubmitContainer, null, /*#__PURE__*/React__default['default'].createElement(CancelBtn, {
@@ -496,6 +554,11 @@ onClick: onClose,
 };
-var index = (function (_ref8) {
-  var isOpen = _ref8.isOpen,
-      children = _ref8.children;
-  return isOpen ? /*#__PURE__*/React__default['default'].createElement(PopupContainer, null, children) : null;
+var PopupWrapper = styled__default['default'].div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n  background: linear-gradient(330deg, rgba(0,0,0,.6),rgba(0,0,0,.6));\n"])));
+var Popup = (function (_ref11) {
+  var isOpen = _ref11.isOpen,
+      children = _ref11.children,
+      rest = _objectWithoutProperties(_ref11, ["isOpen", "children"]);
+
+  return isOpen ? /*#__PURE__*/React__default['default'].createElement(styled.ThemeProvider, {
+    theme: _objectSpread2({}, rest)
+  }, /*#__PURE__*/React__default['default'].createElement(PopupWrapper, null, /*#__PURE__*/React__default['default'].createElement(PopupContainer, null, children))) : null;
 });
@@ -571,6 +634,149 @@
 
-exports.Popup = index;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var getBackgroundImage = function (active, visited) {
+    if (visited)
+        return 'background-image: linear-gradient(to bottom, #10bd65, #10bd65);';
+    if (active)
+        return 'background-image: linear-gradient( to bottom, #121213, #121213);';
+    return 'background-image: linear-gradient( to bottom, #BBBBC5, #BBBBC5);';
+};
+var StyledStepItem = styled__default['default'].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: default;\n    display: inline-block;\n    position: relative;\n    ", "\n"], ["\n    cursor: default;\n    display: inline-block;\n    position: relative;\n    ", "\n"])), function (_a) {
+    var allowedToNavigate = _a.allowedToNavigate;
+    return allowedToNavigate && 'cursor: pointer;';
+});
+var StepIndicatorText = styled__default['default'].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: #606063;\n    font-family: $kanit;\n    font-size: 21px;\n    font-stretch: normal;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: 0.9px;\n    line-height: 55px;\n    ", "\n"], ["\n    color: #606063;\n    font-family: $kanit;\n    font-size: 21px;\n    font-stretch: normal;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: 0.9px;\n    line-height: 55px;\n    ", "\n"])), function (_a) {
+    var active = _a.active, visited = _a.visited;
+    return "\n        -webkit-background-clip: text;\n        -webkit-background-clip: text;\n        background-clip: text;\n        background-clip: text;\n        " + getBackgroundImage(active, visited) + "\n        -webkit-text-fill-color: transparent;\n    ";
+});
+var StepIndicatorCount = styled__default['default'].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: rgba(18, 18, 19, 0.1);\n    font-family: 'Montserrat';\n    font-size: 80px;\n    font-weight: bold;\n    height: auto;\n    left: 0;\n    margin: auto;\n    opacity: 1;\n    padding-top: 10px;\n    position: absolute;\n    right: 0;\n    top: -35px;\n    width: fit-content;\n    ", "\n"], ["\n    color: rgba(18, 18, 19, 0.1);\n    font-family: 'Montserrat';\n    font-size: 80px;\n    font-weight: bold;\n    height: auto;\n    left: 0;\n    margin: auto;\n    opacity: 1;\n    padding-top: 10px;\n    position: absolute;\n    right: 0;\n    top: -35px;\n    width: fit-content;\n    ", "\n"])), function (_a) {
+    var active = _a.active, visited = _a.visited;
+    return "\n        -webkit-background-clip: text;\n        -webkit-background-clip: text;\n        background-clip: text;\n        background-clip: text;\n        " + getBackgroundImage(active, visited) + "\n        opacity: 0.2;\n        -webkit-text-fill-color: transparent;\n    ";
+});
+var StepIndicatorWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    font-family: 'Kanit';\n    left: 0;\n    margin: auto;\n    position: absolute;\n    right: 0;\n    z-index: 10;\n    width: 75%;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    font-family: 'Kanit';\n    left: 0;\n    margin: auto;\n    position: absolute;\n    right: 0;\n    z-index: 10;\n    width: 75%;\n"])));
+var FormContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 75%;\n    width: 80%;\n    margin: auto;\n    padding-top: 50px;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 75%;\n    width: 80%;\n    margin: auto;\n    padding-top: 50px;\n    justify-content: space-between;\n"])));
+var StepsContainer = styled__default['default'].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    width: 90%;\n    padding-top: 10px;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    width: 90%;\n    padding-top: 10px;\n"])));
+var Title = styled__default['default'].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 15%;\n    margin-bottom: 20px;\n    border-bottom: 1px solid #e4e6e9;\n    h1 {\n        font-family: 'Kanit';\n        margin: auto;\n        width: 100%;\n        text-align: center;\n    }\n    ", "\n"], ["\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 15%;\n    margin-bottom: 20px;\n    border-bottom: 1px solid #e4e6e9;\n    h1 {\n        font-family: 'Kanit';\n        margin: auto;\n        width: 100%;\n        text-align: center;\n    }\n    ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return (theme === null || theme === void 0 ? void 0 : theme.secondaryPopup) && styled.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        height: 10%;\n    "], ["\n        height: 10%;\n    "])));
+});
+var StepSeparator = styled__default['default'].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 5%;\n    height: 2px;\n    margin: auto;\n    background: #B3B3B4;\n"], ["\n    width: 5%;\n    height: 2px;\n    margin: auto;\n    background: #B3B3B4;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+var StepIndicator = function (_a) {
+    var currentStep = _a.currentStep, steps = _a.steps, _b = _a.translationPath, translationPath = _b === void 0 ? '' : _b, _c = _a.allowedStepsToNavigate, allowedStepsToNavigate = _c === void 0 ? [] : _c, onStepSelect = _a.onStepSelect;
+    return (React__default['default'].createElement(StepIndicatorWrapper, null, steps.map(function (stepName, i) { return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Step, { key: stepName, allowedToNavigate: allowedStepsToNavigate.includes(stepName), onStepSelect: onStepSelect, indexOfCurrentStep: currentStep, title: translationPath || stepName, stepCount: i }),
+        i !== steps.length - 1 && React__default['default'].createElement(StepSeparator, null))); })));
+};
+var Step = function (_a) {
+    var stepCount = _a.stepCount, title = _a.title, indexOfCurrentStep = _a.indexOfCurrentStep, onStepSelect = _a.onStepSelect, allowedToNavigate = _a.allowedToNavigate;
+    var visited = stepCount < indexOfCurrentStep;
+    var active = stepCount === indexOfCurrentStep;
+    return (React__default['default'].createElement(StyledStepItem, { className: "step_indicator_item step" + stepCount, allowedToNavigate: allowedToNavigate, onClick: function () {
+            if (allowedToNavigate) {
+                onStepSelect(stepCount);
+            }
+        } },
+        React__default['default'].createElement(StepIndicatorCount, { visited: visited, active: active, className: "wizard__step_indicator_item_count step" + indexOfCurrentStep }, stepCount + 1),
+        React__default['default'].createElement(StepIndicatorText, { visited: visited, active: active, className: "wizard__step_indicator_item_text step" + indexOfCurrentStep }, title)));
+};
+
+var StepsPopup = function (_a) {
+    var isOpen = _a.isOpen, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, steps = _a.steps, _c = _a.nextText, nextText = _c === void 0 ? 'Next' : _c, _d = _a.backText, backText = _d === void 0 ? 'Back' : _d, _e = _a.cancelText, cancelText = _e === void 0 ? 'Cancel' : _e, _f = _a.submitText, submitText = _f === void 0 ? 'Done' : _f, _g = _a.CustomFormContainer, CustomFormContainer = _g === void 0 ? FormContainer : _g, FormToRender = _a.FormToRender, onClose = _a.onClose, allowedToNavigateToSteps = _a.allowedToNavigateToSteps, currentIndex = _a.currentIndex, handleSubmit = _a.handleSubmit, changeFormStep = _a.changeFormStep, _h = _a.canContinue, canContinue = _h === void 0 ? true : _h, _j = _a.popupTitle, popupTitle = _j === void 0 ? "Step Indicator Popup" : _j;
+    var atFirstStep = currentIndex === 0;
+    var atLastStep = currentIndex === steps.length - 1;
+    var onPrevious = function () {
+        if (atFirstStep)
+            onClose();
+        else
+            changeFormStep(currentIndex - 1);
+    };
+    var onNext = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (atLastStep)
+                handleSubmit();
+            else
+                changeFormStep(currentIndex + 1);
+            return [2 /*return*/];
+        });
+    }); };
+    return (React__default['default'].createElement(Popup, { secondaryPopup: true, isOpen: isOpen },
+        React__default['default'].createElement(PopupBody, { onClose: onClose },
+            React__default['default'].createElement(Title, null,
+                React__default['default'].createElement("h1", null, popupTitle)),
+            React__default['default'].createElement(StepsContainer, null,
+                React__default['default'].createElement(StepIndicator, { steps: steps, currentStep: currentIndex, allowedStepsToNavigate: allowedToNavigateToSteps, 
+                    //   translationPath={translationPath}
+                    // allowedStepsToNavigate={steps}
+                    onStepSelect: changeFormStep })),
+            React__default['default'].createElement(CustomFormContainer, null, FormToRender && React__default['default'].createElement(FormToRender, null))),
+        React__default['default'].createElement(Footer, { loading: isLoading, canSubmit: canContinue, nextText: nextText, cancelText: cancelText, backText: backText, submitText: submitText, atLastStep: atLastStep, atFirstStep: atFirstStep, onPrevious: onPrevious, onNext: onNext })));
+};
+var Footer = function (_a) {
+    var canSubmit = _a.canSubmit, atLastStep = _a.atLastStep, nextText = _a.nextText, backText = _a.backText, cancelText = _a.cancelText, submitText = _a.submitText, atFirstStep = _a.atFirstStep, onPrevious = _a.onPrevious, loading = _a.loading, onNext = _a.onNext;
+    return (React__default['default'].createElement(PopupFooter, { isSubmitting: loading, canSubmit: canSubmit, submitTitle: atLastStep ? submitText : nextText, cancelTitle: atFirstStep ? cancelText : backText, onClose: onPrevious, onSubmit: onNext }));
+};
+
+exports.Popup = Popup;
 exports.PopupBody = PopupBody;
 exports.PopupFooter = PopupFooter;
 exports.PopupTitle = title;
+exports.StepsPopup = StepsPopup;
 exports.SubTitle = SubTitle;

dist/popups.esm.js

 import * as React from 'react';
 import React__default, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -23,2 +38,36 @@ _extends = Object.assign || function (target) {
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -166,3 +215,3 @@ if (source == null) return {};
 
-function __makeTemplateObject(cooked, raw) {
+function __makeTemplateObject$1(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
@@ -224,3 +273,3 @@ return cooked;
 
-var ButtonStyled = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var ButtonStyled = styled.button(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", ";\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\n\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n  position: relative;\n\n  &:after {\n    content: '';\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    transition: opacity 0.3s ease-out;\n    z-index: 2;\n    opacity: 0;\n    position: absolute;\n  }\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1b96e3, #4872db);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to left, #1887cc, #4166c4);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var width = _a.width;
@@ -244,3 +293,3 @@ return (width ? "width: " + width : '');
 });
-var templateObject_1;
+var templateObject_1$1;
 
@@ -368,10 +417,13 @@ var Size;
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-var PopupContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #bbbbc5;\n  padding: 13px;\n  z-index: 999;\n  flex-direction: row;\n  display: flex;\n  overflow-x: hidden;\n"])));
-var CloseIcon = styled(SvgClosePopup)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: absolute;\n  top: 15px ;\n  right: 15px;\n  margin-left: auto;\n  z-index: 9;\n"])));
-var PopupBody = styled( /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-      onClose = _ref.onClose,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["className", "onClose", "children"]);
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var PopupContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n  flex-direction: row;\n  display: flex;\n  overflow-x: hidden;\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme !== null && theme !== void 0 && theme.secondaryPopup ? css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n    top: 5%;\n    height: 90%;\n    left: 25%;\n    width: 50%;\n    @media (max-width: 1100px) {\n      width: 60%;\n      left: 20%;\n    }\n    @media (max-width: 900px) {\n      width: 80%;\n      left: 10%;\n    }\n    h1 {\n      font-size: 24px;\n      font-weight: 600;\n      font-family: 'Montserrat' !important;\n    }\n    .wizard__step_indicator_item_count {\n      font-size: 50px;\n    }\n    .wizard__step_indicator_item_text {\n      font-size: 18px;\n      line-height: 18px;\n    }\n  "]))) : css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n    background-color: #bbbbc5;\n    padding: 13px;\n  "])));
+});
+var CloseIcon = styled(SvgClosePopup)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: absolute;\n  top: 15px ;\n  right: 15px;\n  margin-left: auto;\n  z-index: 9;\n"])));
+var PopupBody = styled( /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+      onClose = _ref2.onClose,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, ["className", "onClose", "children"]);
 
@@ -386,11 +438,14 @@ return /*#__PURE__*/React__default.createElement("div", _extends({
   }), children);
-}))(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  padding: 30px;\n  overflow: auto; \n  flex: 1;\n  position: relative;\n"])));
-var BottomDrawer = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 582px;\n  background-color: white;\n  z-index: 9;\n  height: 66px;\n  bottom: 0;\n  right: calc(50% - 323px);\n\n  &:before, &:after {\n      content: '';\n      position: absolute;\n      width: 65%;\n      height: 100%;\n      /* border-color: red; */\n      /* border-style: solid; */\n      /* border-radius: 10px; */\n      background-color: #f7f9fa;\n      box-shadow: 0 5px 10px 0 rgba(49,49,51,0.4);\n      z-index: -1;\n  /*      -webkit-animation: shadow 2s infinite;  */\n  }\n  &:before {\n      left: -7%;\n      border-width: 3px 0px 3px 3px;\n      -webkit-transform: skewX(-20deg);\n  }\n\n  &:after {\n      right: 0px;\n      border-width: 3px 3px 3px 0px;\n      -webkit-transform: skewX(20deg);\n      clip: rect(-40px, 450px, 220px, 98px);\n  }\n\n"])));
-var SubmitContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 500px;\n  left: 20px;\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n"])));
-var Button = styled(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &.button-primary:not(.disabled):after { \n    display: none;\n  }\n"])));
+}))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  padding: 30px;\n  overflow: auto; \n  flex: 1;\n  position: relative;\n"])));
+var BottomDrawer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 582px;\n  z-index: 9;\n  height: 66px;\n  bottom: 0;\n  right: calc(50% - 323px);\n\n  ", "\n\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return !(theme !== null && theme !== void 0 && theme.secondaryPopup) ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: white;\n  &:before, &:after {\n      content: '';\n      position: absolute;\n      width: 65%;\n      height: 100%;\n      /* border-color: red; */\n      /* border-style: solid; */\n      /* border-radius: 10px; */\n      background-color: #f7f9fa;\n      box-shadow: 0 5px 10px 0 rgba(49,49,51,0.4);\n      z-index: -1;\n  /*      -webkit-animation: shadow 2s infinite;  */\n  }\n  &:before {\n      left: -7%;\n      border-width: 3px 0px 3px 3px;\n      -webkit-transform: skewX(-20deg);\n  }\n\n  &:after {\n      right: 0px;\n      border-width: 3px 3px 3px 0px;\n      -webkit-transform: skewX(20deg);\n      clip: rect(-40px, 450px, 220px, 98px);\n  }\n  "]))) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    bottom: 10px;\n    button {\n      width: 40%;\n    }\n    & > div {\n      width: 400px;\n    }\n    width: 540px;\n  "])));
+});
+var SubmitContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 500px;\n  left: 20px;\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n"])));
+var Button = styled(Primary)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  &.button-primary:not(.disabled):after { \n    display: none;\n  }\n"])));
 
-var ButtonWithSpinner = function ButtonWithSpinner(_ref2) {
-  var loading = _ref2.loading,
-      children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, ["loading", "children"]);
+var ButtonWithSpinner = function ButtonWithSpinner(_ref4) {
+  var loading = _ref4.loading,
+      children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, ["loading", "children"]);
 
@@ -400,19 +455,22 @@ return /*#__PURE__*/React__default.createElement(Button, props, loading ? /*#__PURE__*/React__default.createElement(SvgSpinner, null) : children);
 
-var SubmitBtn = styled(ButtonWithSpinner)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 35px;\n  width: 200px;\n  margin-top: 16px;\n  flex: 1;\n  margin-right: 20px;\n  margin-left: 20px;\n"])));
-var CancelBtn = styled(SubmitBtn)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #313133;\n  background: #313133;\n  /* &.button-primary:not(.disabled):hover:after {\n    background: black !important;\n  } */\n  &:hover:after {\n  opacity: 1;\n  background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n"])));
-var DrawerSubmitBtn = styled(Button)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 25px;\n  padding: 0;\n  width: 80px;\n  flex: 1;\n"])));
-var DrawerCancelBtn = styled(DrawerSubmitBtn)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border: 1px solid #dddde2;\n  color: #414144;\n  background: white !important;\n  \n  &.button-primary:not(.disabled):hover:after {\n    color: #414144;\n    background: white !important;\n  }\n\n  ", "\n"])), function (_ref3) {
-  var big = _ref3.big;
+var SubmitBtn = styled(ButtonWithSpinner)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  height: 35px;\n  width: 200px;\n  margin-top: 16px;\n  flex: 1;\n  margin-right: 20px;\n  margin-left: 20px;\n"])));
+var CancelBtn = styled(SubmitBtn)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: #313133;\n  background: #313133;\n\n  &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  &:active:after {\n    opacity: 1;\n    background: linear-gradient(to right, #0a0b0c, #303238);\n  }\n  /* &.button-primary:not(.disabled):hover:after {\n    background: black !important;\n  } */\n  ", "\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme.secondaryPopup) && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    background-color: #FaFbFc;\n    background: #FaFbFc;\n    /* outline: 1px black !important; */\n    border: 1px solid black !important;\n    font-weight: 400;\n    color: black;\n    &:hover:after {\n    opacity: 1;\n    background: linear-gradient(to right, #FaFbFc, #EaEbEc);\n    }\n    &:active:after {\n      opacity: 1;\n      background: linear-gradient(to right, #FaFbFc, #EaEbEc);\n    }\n  "])));
+});
+var DrawerSubmitBtn = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  height: 25px;\n  padding: 0;\n  width: 80px;\n  flex: 1;\n"])));
+var DrawerCancelBtn = styled(DrawerSubmitBtn)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  border: 1px solid #dddde2;\n  color: #414144;\n  background: white !important;\n  \n  &.button-primary:not(.disabled):hover:after {\n    color: #414144;\n    background: white !important;\n  }\n\n  ", "\n"])), function (_ref6) {
+  var big = _ref6.big;
   return big ? "\n    width: 180px;\n  " : 'margin-right: 15px;';
 });
-var DrawerButtonsContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 35px;\n  position: absolute;\n  bottom: 13px;\n  margin-left: -16px;\n  background-color: white;\n  height: 50px;\n  padding-top: 5px;\n"])));
-styled(function (_ref4) {
-  var className = _ref4.className,
-      children = _ref4.children,
-      _ref4$submitTitle = _ref4.submitTitle,
-      submitTitle = _ref4$submitTitle === void 0 ? 'Save' : _ref4$submitTitle,
-      _ref4$cancelTitle = _ref4.cancelTitle,
-      cancelTitle = _ref4$cancelTitle === void 0 ? 'Cancel' : _ref4$cancelTitle,
-      onSubmit = _ref4.onSubmit,
-      onCancel = _ref4.onCancel;
+var DrawerButtonsContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 35px;\n  position: absolute;\n  bottom: 13px;\n  margin-left: -16px;\n  background-color: white;\n  height: 50px;\n  padding-top: 5px;\n"])));
+styled(function (_ref7) {
+  var className = _ref7.className,
+      children = _ref7.children,
+      _ref7$submitTitle = _ref7.submitTitle,
+      submitTitle = _ref7$submitTitle === void 0 ? 'Save' : _ref7$submitTitle,
+      _ref7$cancelTitle = _ref7.cancelTitle,
+      cancelTitle = _ref7$cancelTitle === void 0 ? 'Cancel' : _ref7$cancelTitle,
+      onSubmit = _ref7.onSubmit,
+      onCancel = _ref7.onCancel;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -430,11 +488,11 @@ className: className
   }, submitTitle) : undefined)));
-})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  box-shadow: -1px 0 6px 0 rgba(0, 0, 0, 0.1);\n  width: 250px;\n  z-index: 1;\n  animation-name: open;\n  background-color: white;\n  animation-duration: 0.2s;\n  @keyframes open {\n    from {width: 0;}\n    to {width: 250px;}\n  }\n\n  overflow: auto;\n  padding: 30px 16px;\n  padding-bottom: 70px;\n"])));
-var DeleteIcon = styled(SvgTrash)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  float: right;\n  width: 25px;\n  height: 25px;\n  padding-left: 6px;\n  ", "\n  cursor: pointer;\n"])), function (_ref5) {
-  var $withoutMargin = _ref5.$withoutMargin;
+})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  box-shadow: -1px 0 6px 0 rgba(0, 0, 0, 0.1);\n  width: 250px;\n  z-index: 1;\n  animation-name: open;\n  background-color: white;\n  animation-duration: 0.2s;\n  @keyframes open {\n    from {width: 0;}\n    to {width: 250px;}\n  }\n\n  overflow: auto;\n  padding: 30px 16px;\n  padding-bottom: 70px;\n"])));
+var DeleteIcon = styled(SvgTrash)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  float: right;\n  width: 25px;\n  height: 25px;\n  padding-left: 6px;\n  ", "\n  cursor: pointer;\n"])), function (_ref8) {
+  var $withoutMargin = _ref8.$withoutMargin;
   return $withoutMargin ? '' : "\n    margin-top: -32px;\n    margin-right: -17px;\n  ";
 });
-styled(function (_ref6) {
-  var children = _ref6.children,
-      onRemove = _ref6.onRemove,
-      className = _ref6.className;
+styled(function (_ref9) {
+  var children = _ref9.children,
+      onRemove = _ref9.onRemove,
+      className = _ref9.className;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -445,13 +503,13 @@ className: className
   }), children);
-})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  border: 2px solid #e4e6e9;\n  padding: 40px 20px;\n  margin-top: 20px;\n"])));
-styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    min-height: 100px;\n    width: calc(100vw - 428px);\n"])));
-var PopupFooter = function PopupFooter(_ref7) {
-  var onClose = _ref7.onClose,
-      onSubmit = _ref7.onSubmit,
-      isSubmitting = _ref7.isSubmitting,
-      canSubmit = _ref7.canSubmit,
-      _ref7$submitTitle = _ref7.submitTitle,
-      submitTitle = _ref7$submitTitle === void 0 ? 'Create' : _ref7$submitTitle,
-      _ref7$cancelTitle = _ref7.cancelTitle,
-      cancelTitle = _ref7$cancelTitle === void 0 ? 'Cancel' : _ref7$cancelTitle;
+})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  border: 2px solid #e4e6e9;\n  padding: 40px 20px;\n  margin-top: 20px;\n"])));
+styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    min-height: 100px;\n    width: calc(100vw - 428px);\n"])));
+var PopupFooter = function PopupFooter(_ref10) {
+  var onClose = _ref10.onClose,
+      onSubmit = _ref10.onSubmit,
+      isSubmitting = _ref10.isSubmitting,
+      canSubmit = _ref10.canSubmit,
+      _ref10$submitTitle = _ref10.submitTitle,
+      submitTitle = _ref10$submitTitle === void 0 ? 'Create' : _ref10$submitTitle,
+      _ref10$cancelTitle = _ref10.cancelTitle,
+      cancelTitle = _ref10$cancelTitle === void 0 ? 'Cancel' : _ref10$cancelTitle;
   return /*#__PURE__*/React__default.createElement(BottomDrawer, null, /*#__PURE__*/React__default.createElement(SubmitContainer, null, /*#__PURE__*/React__default.createElement(CancelBtn, {
@@ -466,6 +524,11 @@ onClick: onClose,
 };
-var index = (function (_ref8) {
-  var isOpen = _ref8.isOpen,
-      children = _ref8.children;
-  return isOpen ? /*#__PURE__*/React__default.createElement(PopupContainer, null, children) : null;
+var PopupWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1000;\n  background: linear-gradient(330deg, rgba(0,0,0,.6),rgba(0,0,0,.6));\n"])));
+var Popup = (function (_ref11) {
+  var isOpen = _ref11.isOpen,
+      children = _ref11.children,
+      rest = _objectWithoutProperties(_ref11, ["isOpen", "children"]);
+
+  return isOpen ? /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: _objectSpread2({}, rest)
+  }, /*#__PURE__*/React__default.createElement(PopupWrapper, null, /*#__PURE__*/React__default.createElement(PopupContainer, null, children))) : null;
 });
@@ -541,2 +604,144 @@
 
-export { index as Popup, PopupBody, PopupFooter, title as PopupTitle, SubTitle };
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var getBackgroundImage = function (active, visited) {
+    if (visited)
+        return 'background-image: linear-gradient(to bottom, #10bd65, #10bd65);';
+    if (active)
+        return 'background-image: linear-gradient( to bottom, #121213, #121213);';
+    return 'background-image: linear-gradient( to bottom, #BBBBC5, #BBBBC5);';
+};
+var StyledStepItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: default;\n    display: inline-block;\n    position: relative;\n    ", "\n"], ["\n    cursor: default;\n    display: inline-block;\n    position: relative;\n    ", "\n"])), function (_a) {
+    var allowedToNavigate = _a.allowedToNavigate;
+    return allowedToNavigate && 'cursor: pointer;';
+});
+var StepIndicatorText = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: #606063;\n    font-family: $kanit;\n    font-size: 21px;\n    font-stretch: normal;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: 0.9px;\n    line-height: 55px;\n    ", "\n"], ["\n    color: #606063;\n    font-family: $kanit;\n    font-size: 21px;\n    font-stretch: normal;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: 0.9px;\n    line-height: 55px;\n    ", "\n"])), function (_a) {
+    var active = _a.active, visited = _a.visited;
+    return "\n        -webkit-background-clip: text;\n        -webkit-background-clip: text;\n        background-clip: text;\n        background-clip: text;\n        " + getBackgroundImage(active, visited) + "\n        -webkit-text-fill-color: transparent;\n    ";
+});
+var StepIndicatorCount = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: rgba(18, 18, 19, 0.1);\n    font-family: 'Montserrat';\n    font-size: 80px;\n    font-weight: bold;\n    height: auto;\n    left: 0;\n    margin: auto;\n    opacity: 1;\n    padding-top: 10px;\n    position: absolute;\n    right: 0;\n    top: -35px;\n    width: fit-content;\n    ", "\n"], ["\n    color: rgba(18, 18, 19, 0.1);\n    font-family: 'Montserrat';\n    font-size: 80px;\n    font-weight: bold;\n    height: auto;\n    left: 0;\n    margin: auto;\n    opacity: 1;\n    padding-top: 10px;\n    position: absolute;\n    right: 0;\n    top: -35px;\n    width: fit-content;\n    ", "\n"])), function (_a) {
+    var active = _a.active, visited = _a.visited;
+    return "\n        -webkit-background-clip: text;\n        -webkit-background-clip: text;\n        background-clip: text;\n        background-clip: text;\n        " + getBackgroundImage(active, visited) + "\n        opacity: 0.2;\n        -webkit-text-fill-color: transparent;\n    ";
+});
+var StepIndicatorWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    font-family: 'Kanit';\n    left: 0;\n    margin: auto;\n    position: absolute;\n    right: 0;\n    z-index: 10;\n    width: 75%;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    font-family: 'Kanit';\n    left: 0;\n    margin: auto;\n    position: absolute;\n    right: 0;\n    z-index: 10;\n    width: 75%;\n"])));
+var FormContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 75%;\n    width: 80%;\n    margin: auto;\n    padding-top: 50px;\n    justify-content: space-between;\n"], ["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 75%;\n    width: 80%;\n    margin: auto;\n    padding-top: 50px;\n    justify-content: space-between;\n"])));
+var StepsContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    width: 90%;\n    padding-top: 10px;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    width: 90%;\n    padding-top: 10px;\n"])));
+var Title = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 15%;\n    margin-bottom: 20px;\n    border-bottom: 1px solid #e4e6e9;\n    h1 {\n        font-family: 'Kanit';\n        margin: auto;\n        width: 100%;\n        text-align: center;\n    }\n    ", "\n"], ["\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 15%;\n    margin-bottom: 20px;\n    border-bottom: 1px solid #e4e6e9;\n    h1 {\n        font-family: 'Kanit';\n        margin: auto;\n        width: 100%;\n        text-align: center;\n    }\n    ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return (theme === null || theme === void 0 ? void 0 : theme.secondaryPopup) && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        height: 10%;\n    "], ["\n        height: 10%;\n    "])));
+});
+var StepSeparator = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 5%;\n    height: 2px;\n    margin: auto;\n    background: #B3B3B4;\n"], ["\n    width: 5%;\n    height: 2px;\n    margin: auto;\n    background: #B3B3B4;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+var StepIndicator = function (_a) {
+    var currentStep = _a.currentStep, steps = _a.steps, _b = _a.translationPath, translationPath = _b === void 0 ? '' : _b, _c = _a.allowedStepsToNavigate, allowedStepsToNavigate = _c === void 0 ? [] : _c, onStepSelect = _a.onStepSelect;
+    return (React__default.createElement(StepIndicatorWrapper, null, steps.map(function (stepName, i) { return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Step, { key: stepName, allowedToNavigate: allowedStepsToNavigate.includes(stepName), onStepSelect: onStepSelect, indexOfCurrentStep: currentStep, title: translationPath || stepName, stepCount: i }),
+        i !== steps.length - 1 && React__default.createElement(StepSeparator, null))); })));
+};
+var Step = function (_a) {
+    var stepCount = _a.stepCount, title = _a.title, indexOfCurrentStep = _a.indexOfCurrentStep, onStepSelect = _a.onStepSelect, allowedToNavigate = _a.allowedToNavigate;
+    var visited = stepCount < indexOfCurrentStep;
+    var active = stepCount === indexOfCurrentStep;
+    return (React__default.createElement(StyledStepItem, { className: "step_indicator_item step" + stepCount, allowedToNavigate: allowedToNavigate, onClick: function () {
+            if (allowedToNavigate) {
+                onStepSelect(stepCount);
+            }
+        } },
+        React__default.createElement(StepIndicatorCount, { visited: visited, active: active, className: "wizard__step_indicator_item_count step" + indexOfCurrentStep }, stepCount + 1),
+        React__default.createElement(StepIndicatorText, { visited: visited, active: active, className: "wizard__step_indicator_item_text step" + indexOfCurrentStep }, title)));
+};
+
+var StepsPopup = function (_a) {
+    var isOpen = _a.isOpen, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, steps = _a.steps, _c = _a.nextText, nextText = _c === void 0 ? 'Next' : _c, _d = _a.backText, backText = _d === void 0 ? 'Back' : _d, _e = _a.cancelText, cancelText = _e === void 0 ? 'Cancel' : _e, _f = _a.submitText, submitText = _f === void 0 ? 'Done' : _f, _g = _a.CustomFormContainer, CustomFormContainer = _g === void 0 ? FormContainer : _g, FormToRender = _a.FormToRender, onClose = _a.onClose, allowedToNavigateToSteps = _a.allowedToNavigateToSteps, currentIndex = _a.currentIndex, handleSubmit = _a.handleSubmit, changeFormStep = _a.changeFormStep, _h = _a.canContinue, canContinue = _h === void 0 ? true : _h, _j = _a.popupTitle, popupTitle = _j === void 0 ? "Step Indicator Popup" : _j;
+    var atFirstStep = currentIndex === 0;
+    var atLastStep = currentIndex === steps.length - 1;
+    var onPrevious = function () {
+        if (atFirstStep)
+            onClose();
+        else
+            changeFormStep(currentIndex - 1);
+    };
+    var onNext = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (atLastStep)
+                handleSubmit();
+            else
+                changeFormStep(currentIndex + 1);
+            return [2 /*return*/];
+        });
+    }); };
+    return (React__default.createElement(Popup, { secondaryPopup: true, isOpen: isOpen },
+        React__default.createElement(PopupBody, { onClose: onClose },
+            React__default.createElement(Title, null,
+                React__default.createElement("h1", null, popupTitle)),
+            React__default.createElement(StepsContainer, null,
+                React__default.createElement(StepIndicator, { steps: steps, currentStep: currentIndex, allowedStepsToNavigate: allowedToNavigateToSteps, 
+                    //   translationPath={translationPath}
+                    // allowedStepsToNavigate={steps}
+                    onStepSelect: changeFormStep })),
+            React__default.createElement(CustomFormContainer, null, FormToRender && React__default.createElement(FormToRender, null))),
+        React__default.createElement(Footer, { loading: isLoading, canSubmit: canContinue, nextText: nextText, cancelText: cancelText, backText: backText, submitText: submitText, atLastStep: atLastStep, atFirstStep: atFirstStep, onPrevious: onPrevious, onNext: onNext })));
+};
+var Footer = function (_a) {
+    var canSubmit = _a.canSubmit, atLastStep = _a.atLastStep, nextText = _a.nextText, backText = _a.backText, cancelText = _a.cancelText, submitText = _a.submitText, atFirstStep = _a.atFirstStep, onPrevious = _a.onPrevious, loading = _a.loading, onNext = _a.onNext;
+    return (React__default.createElement(PopupFooter, { isSubmitting: loading, canSubmit: canSubmit, submitTitle: atLastStep ? submitText : nextText, cancelTitle: atFirstStep ? cancelText : backText, onClose: onPrevious, onSubmit: onNext }));
+};
+
+export { Popup, PopupBody, PopupFooter, title as PopupTitle, StepsPopup, SubTitle };

lib/popup-collection/MainPopup/index.js

 import React from 'react';
-import styled from 'styled-components';
+import styled, {css, ThemeProvider} from 'styled-components';
 
@@ -13,4 +13,2 @@ import { Primary } from '@10play/phoenix-button';
   height: 100%;
-  background-color: #bbbbc5;
-  padding: 13px;
   z-index: 999;
@@ -20,2 +18,31 @@ flex-direction: row;
   overflow-x: hidden;
+  ${({theme}) => theme?.secondaryPopup ? css`
+    top: 5%;
+    height: 90%;
+    left: 25%;
+    width: 50%;
+    @media (max-width: 1100px) {
+      width: 60%;
+      left: 20%;
+    }
+    @media (max-width: 900px) {
+      width: 80%;
+      left: 10%;
+    }
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      font-family: 'Montserrat' !important;
+    }
+    .wizard__step_indicator_item_count {
+      font-size: 50px;
+    }
+    .wizard__step_indicator_item_text {
+      font-size: 18px;
+      line-height: 18px;
+    }
+  ` : css`
+    background-color: #bbbbc5;
+    padding: 13px;
+  `}
 `;
@@ -52,3 +79,2 @@
   width: 582px;
-  background-color: white;
   z-index: 9;
@@ -59,2 +85,4 @@ height: 66px;
 
+  ${({theme}) => !theme?.secondaryPopup ? css`
+    background-color: white;
   &:before, &:after {
@@ -85,2 +113,12 @@ content: '';
   }
+  ` : css`
+    bottom: 10px;
+    button {
+      width: 40%;
+    }
+    & > div {
+      width: 400px;
+    }
+    width: 540px;
+  `}
 
@@ -122,8 +160,6 @@ `;
   background: #313133;
-  /* &.button-primary:not(.disabled):hover:after {
-    background: black !important;
-  } */
+
   &:hover:after {
-  opacity: 1;
-  background: linear-gradient(to right, #0a0b0c, #303238);
+    opacity: 1;
+    background: linear-gradient(to right, #0a0b0c, #303238);
   }
@@ -134,2 +170,21 @@ &:active:after {
   }
+  /* &.button-primary:not(.disabled):hover:after {
+    background: black !important;
+  } */
+  ${({theme}) => theme?.secondaryPopup && css`
+    background-color: #FaFbFc;
+    background: #FaFbFc;
+    /* outline: 1px black !important; */
+    border: 1px solid black !important;
+    font-weight: 400;
+    color: black;
+    &:hover:after {
+    opacity: 1;
+    background: linear-gradient(to right, #FaFbFc, #EaEbEc);
+    }
+    &:active:after {
+      opacity: 1;
+      background: linear-gradient(to right, #FaFbFc, #EaEbEc);
+    }
+  `}
 `;
@@ -267,8 +322,22 @@
 
-export default ({ isOpen, children }) => (
+const PopupWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: linear-gradient(330deg, rgba(0,0,0,.6),rgba(0,0,0,.6));
+`;
+
+export default ({ isOpen, children, ...rest }) => (
   isOpen ?
-  <PopupContainer>
-    {children}
-  </PopupContainer>
+  <ThemeProvider theme={{...rest}}>
+    <PopupWrapper>
+      <PopupContainer>
+        {children}
+      </PopupContainer>
+    </PopupWrapper>
+  </ThemeProvider>
   : null
 );

package.json

 {
   "name": "@10play/popups",
-  "version": "2.0.42",
+  "version": "2.0.43",
   "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
@@ -11,3 +11,4 @@ "keywords": [],
   "module": "dist/popups.esm.js",
-  "src": "lib/popups.js",
+  "src": "lib/popups.tsx",
+  "types": "dist/popups.d.ts",
   "directories": {
@@ -48,3 +49,3 @@ "lib": "lib",
   },
-  "gitHead": "3d2ff9e3aaf3b02cd67cb033693a2175b5ddcfaa"
+  "gitHead": "feda82e8de51893c866ac18fedbc2ee7b6ee9aaf"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124650

increased by74.78%

Number of package files

27

increased by170%

Lines of code

2217

increased by64.1%

No dependency changes