contentoh-components-library 20.0.0 → 20.0.17

package/dist/components/pages/CustomerLogin/index.js

@@ -9,27 +9,21 @@ var _GradientPanel = require("../../atoms/GradientPanel");
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var CustomerLogin = function CustomerLogin(_ref) {
   var loginLeft = _ref.loginLeft,
       loginRight = _ref.loginRight;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: loginLeft.componentsArray,
-        panelType: "home-panel"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-login-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        panelColor: true,
-        componentsArray: loginRight.componentsArray,
-        panelType: "home-login"
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: loginLeft.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: loginRight.componentsArray,
+    panelType: "home-login"
+  })));
 };
 
 exports.CustomerLogin = CustomerLogin;

package/dist/components/pages/CustomerPayMethod/CustomerPayMethod.stories.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CustomerPayMethodDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -19,8 +15,6 @@ var _PayMethod = require("../../molecules/PayMethod");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/pages/CustomerPayMethod",
   component: _index.CustomerPayMethod
@@ -28,53 +22,51 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomerPayMethod, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.CustomerPayMethod, args);
 };
 
 var CustomerPayMethodDefault = Template.bind({});
 exports.CustomerPayMethodDefault = CustomerPayMethodDefault;
 CustomerPayMethodDefault.args = {
   left: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
       text: "Que incluye la plataforma"
-    }, "1")]
+    })]
   },
   homeRegister: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    componentsArray: [/*#__PURE__*/React.createElement("div", {
       className: "arrowimage",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "general-arrow-button"
-      })
-    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "1"
+    }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      buttonType: "general-arrow-button"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "plan",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        fontFamily: _variables.FontFamily.AvenirNext,
-        color: _variables.GlobalColors.s5,
-        text: "Prueba de 7 días"
-      })
-    }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "2"
+    }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Prueba de 7 días"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "general-text",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: "Para continuar te solicitamos el m\xE9todo de pago. Tienes un plazo de 7 d\xEDas para crear tus productos con base en el plan elegido."
-      })
-    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "3"
+    }, /*#__PURE__*/React.createElement("p", null, "Para continuar te solicitamos el m\xE9todo de pago. Tienes un plazo de 7 d\xEDas para crear tus productos con base en el plan elegido.")), /*#__PURE__*/React.createElement("div", {
       className: "payment-register",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PayMethod.PayMethod, {})
-    }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "4"
+    }, /*#__PURE__*/React.createElement(_PayMethod.PayMethod, null)), /*#__PURE__*/React.createElement("div", {
       className: "button-continuar",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "general-default-button",
-        label: "Continuar"
-      })
-    }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "5"
+    }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Continuar"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "continue",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "free",
-        children: "Continuar de forma gratuita"
-      })
-    }, "6")],
+      key: "6"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "free"
+    }, "Continuar de forma gratuita"))],
     panelType: "home-card"
   }
 };

package/dist/components/pages/CustomerPayMethod/index.js

@@ -9,27 +9,21 @@ var _styles = require("./styles");
 
 var _GradientPanel = require("../../atoms/GradientPanel");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var CustomerPayMethod = function CustomerPayMethod(_ref) {
   var left = _ref.left,
       homeRegister = _ref.homeRegister;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "general-left",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: left.componentsArray,
-        panelType: "home-panel"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "register-payment-method",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        panelColor: true,
-        componentsArray: homeRegister.componentsArray,
-        panelType: "home-card"
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "general-left"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: left.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "register-payment-method"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: homeRegister.componentsArray,
+    panelType: "home-card"
+  })));
 };
 
 exports.CustomerPayMethod = CustomerPayMethod;

package/dist/components/pages/CustomerType/CustomerType.stories.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CustomerTypeDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -19,8 +15,6 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _variables = require("../../../global-files/variables");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/pages/CustomerType",
   component: _index.CustomerType
@@ -28,37 +22,44 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomerType, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.CustomerType, args);
 };
 
 var CustomerTypeDefault = Template.bind({});
 exports.CustomerTypeDefault = CustomerTypeDefault;
 CustomerTypeDefault.args = {
   homeLeft: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
       text: "Cadena"
-    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomerTypeImage.CustomerTypeImages, {}, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "Elige esta opci\xF3n si eres una Cadena Retailer."
-    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+    }), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
+      key: "2"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "3"
+    }, "Elige esta opci\xF3n si eres una Cadena Retailer."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
       buttonType: "general-white-button",
-      label: "Seleccionar"
-    }, "4")]
+      label: "Seleccionar",
+      key: "4"
+    })]
   },
   homeRight: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
       fontFamily: _variables.FontFamily.Raleway_600,
       color: "#000000",
-      text: "Proveedor"
-    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomerTypeImage.CustomerTypeImages, {
+      text: "Proveedor",
+      key: "1"
+    }), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
       className: "imagen",
-      imageType: true
-    }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "Elige esta opci\xF3n si eres una Proveedor o Due\xF1o de producto."
-    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      imageType: true,
+      key: "2"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "3"
+    }, "Elige esta opci\xF3n si eres una Proveedor o Due\xF1o de producto."), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+      key: "4",
       buttonType: "general-default-button",
       label: "Seleccionar"
-    }, "4")]
+    })]
   }
 };

package/dist/components/pages/CustomerType/index.js

@@ -9,27 +9,21 @@ var _styles = require("./styles");
 
 var _GradientPanel = require("../../atoms/GradientPanel");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var CustomerType = function CustomerType(_ref) {
   var homeLeft = _ref.homeLeft,
       homeRight = _ref.homeRight;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: homeLeft.componentsArray,
-        panelType: "home-panel"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-provider",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        panelColor: true,
-        componentsArray: homeRight.componentsArray,
-        panelType: "home-panel"
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: homeLeft.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-provider"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: homeRight.componentsArray,
+    panelType: "home-panel"
+  })));
 };
 
 exports.CustomerType = CustomerType;

package/dist/components/pages/EmailResetPassword/EmailResetPassword.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmailResetPasswordDefault = void 0;
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _default = {
+  title: "Components/pages/EmailResetPassword",
+  component: _index.EmailResetPassword
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.EmailResetPassword, args);
+};
+
+var EmailResetPasswordDefault = Template.bind({});
+exports.EmailResetPasswordDefault = EmailResetPasswordDefault;
+EmailResetPasswordDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
+};

package/dist/components/pages/EmailResetPassword/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmailResetPassword = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var EmailResetPassword = function EmailResetPassword(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyEmail = _useState2[0],
+      setEmptyEmail = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      invalidEmail = _useState4[0],
+      setInvalidEmail = _useState4[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var email;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              email = document.querySelector("#emailInput").value;
+              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/React.createElement(_LogoImage.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "credenciales",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Ingresa tus credenciales"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "user",
+    key: "3"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "emailInput",
+    label: "Nombre de usuario",
+    inputPlaceHolder: "username@contentoh.com"
+  }), emptyEmail && /*#__PURE__*/React.createElement("label", null, "Ingrese su correo"), invalidEmail && !emptyEmail && /*#__PURE__*/React.createElement("label", null, "Ingrese un correo v\xE1lido")), /*#__PURE__*/React.createElement("div", {
+    className: "button-center",
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-default-button",
+    label: "Enviar",
+    onClick: function onClick(e) {
+      return validate(e);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "back-login",
+    key: "5"
+  }, /*#__PURE__*/React.createElement("p", null, "Regresar..."))];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_CarouselImagesLogin.CarouselImagesLogin, {
+    panelImg: imageArrayCarousel,
+    panelText: textCarousel,
+    panelColor: backogroundColorCarousel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: loginRight,
+    panelType: "home-login",
+    panelColor: _variables.GlobalColors.white
+  })));
+};
+
+exports.EmailResetPassword = EmailResetPassword;

package/dist/components/pages/EmailResetPassword/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n    .button-center {\n      text-align: center;\n      .general-default-button {\n        width: 160px;\n      }\n    }\n    .back-login {\n      text-align: center;\n      margin: 15px !important;\n      color: ", ";\n      cursor: pointer;\n      font-weight: bold;\n      font-family: ", ";\n      font-size: 13px;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway);
+
+exports.Container = Container;

package/dist/components/pages/OnboardPlan/OnboardPlan.stories.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.OnboardPlanDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -19,8 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _Fullplan = require("../../organisms/Fullplan");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/pages/OnboardPlan",
   Component: _index.OnboardPlan
@@ -28,23 +22,26 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OnboardPlan, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.OnboardPlan, args);
 };
 
 var OnboardPlanDefault = Template.bind({});
 exports.OnboardPlanDefault = OnboardPlanDefault;
 OnboardPlanDefault.args = {
   leftPanel: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      key: "1",
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
       text: "Beneficios de cadenas"
-    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AtomList.AtomList, {
+    }), /*#__PURE__*/React.createElement(_AtomList.AtomList, {
+      key: "2",
       content: ["Crea proveedores y agregalos a tu cadena", "Solicita actualización a proveedores", "Valida los proveedores", "Analiza el número de productos totales"]
-    }, "2")]
+    })]
   },
   planContainerData: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Fullplan.FullPlan, {
+    componentsArray: [/*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
+      key: "1",
       title: "Elige el n\xFAmero de proveedores",
       textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el n\xFAmero de proveedores que tiene tu cadena",
       containerData: [{
@@ -60,6 +57,6 @@ OnboardPlanDefault.args = {
         number: "Ondemand",
         name: "agrega proveedores a tu forma"
       }]
-    }, "1")]
+    })]
   }
 };

package/dist/components/pages/OnboardPlan/index.js

@@ -9,27 +9,21 @@ var _styles = require("./styles");
 
 var _GradientPanel = require("../../atoms/GradientPanel");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var OnboardPlan = function OnboardPlan(_ref) {
   var leftPanel = _ref.leftPanel,
       planContainerData = _ref.planContainerData;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "left",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: leftPanel.componentsArray,
-        panelType: "home-panel"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "rigth",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        panelColor: true,
-        componentsArray: planContainerData.componentsArray,
-        panelType: "home-plan"
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: leftPanel.componentsArray,
+    panelType: "home-panel"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "rigth"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: true,
+    componentsArray: planContainerData.componentsArray,
+    panelType: "home-plan"
+  })));
 };
 
 exports.OnboardPlan = OnboardPlan;

package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationLoginFirstStepDefault = void 0;
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _default = {
+  title: "Components/pages/RegistrationLoginFirstStep",
+  component: _index.RegistrationLoginFirstStep
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RegistrationLoginFirstStep, args);
+};
+
+var RegistrationLoginFirstStepDefault = Template.bind({});
+exports.RegistrationLoginFirstStepDefault = RegistrationLoginFirstStepDefault;
+RegistrationLoginFirstStepDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
+};