contentoh-components-library 19.0.0 → 20.0.18

package/dist/components/organisms/InputGroup/InputGroup.stories.js

@@ -1,18 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.InputGroupDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/organisms/InputGroup",
   component: _index.InputGroup,
@@ -28,7 +22,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputGroup, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.InputGroup, args);
 };
 
 var InputGroupDefault = Template.bind({});

package/dist/components/organisms/InputGroup/index.js

@@ -11,8 +11,6 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _TagAndInput = require("../../molecules/TagAndInput");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var InputGroup = function InputGroup(_ref) {
   var _inputGroup$inputs;
 
@@ -20,14 +18,7 @@ var InputGroup = function InputGroup(_ref) {
       inputGroup = _ref$inputGroup === void 0 ? {} : _ref$inputGroup,
       activeSection = _ref.activeSection,
       _ref$dataInputs = _ref.dataInputs,
-      dataInputs = _ref$dataInputs === void 0 ? {} : _ref$dataInputs,
-      updatedDescriptions = _ref.updatedDescriptions,
-      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
-      updatedDatasheets = _ref.updatedDatasheets,
-      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
-      articleId = _ref.articleId,
-      version = _ref.version,
-      dinamicHeight = _ref.dinamicHeight;
+      dataInputs = _ref$dataInputs === void 0 ? {} : _ref$dataInputs;
 
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
@@ -42,44 +33,32 @@ var InputGroup = function InputGroup(_ref) {
     }
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      headerType: "retailer-name-header",
-      text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "inputs-container",
-      children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "retailer-name-header",
+    text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "inputs-container"
+  }, inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
+    var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4;
 
-        return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: (_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id,
-          version: version,
-          inputType: inputTypeValue((_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.type),
-          label: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.name,
-          value: (_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.value,
-          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
-          articleId: articleId,
-          isRequired: (_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.required,
-          updatedDatasheets: updatedDatasheets,
-          setUpdatedDatasheets: setUpdatedDatasheets
-        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: input === null || input === void 0 ? void 0 : input.id,
-          index: index,
-          inputType: "textarea",
-          label: input === null || input === void 0 ? void 0 : input.name,
-          value: input === null || input === void 0 ? void 0 : input.value,
-          isRequired: input.required,
-          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
-          updatedDescriptions: updatedDescriptions,
-          setUpdatedDescriptions: setUpdatedDescriptions,
-          articleId: articleId,
-          version: version,
-          dinamicHeight: dinamicHeight
-        }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
-      })
-    })]
-  });
+    return activeSection === "Ficha técnica" ? /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index,
+      inputId: "datasheet-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.id) + "-" + index,
+      inputType: inputTypeValue((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.type),
+      label: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.name,
+      value: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.value,
+      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder
+    }) : /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index,
+      inputId: "description-" + (input === null || input === void 0 ? void 0 : input.id) + "-" + index,
+      inputType: "textarea",
+      label: input === null || input === void 0 ? void 0 : input.name,
+      value: input === null || input === void 0 ? void 0 : input.value,
+      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder
+    });
+  })));
 };
 
 exports.InputGroup = InputGroup;

package/dist/components/organisms/InputGroup/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

package/dist/components/organisms/ProductImageModal/ProductImageModal.stories.js

@@ -1,18 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ProductImageModalDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/organisms/ProductImageModal",
   component: _index.ProductImageModal
@@ -20,7 +14,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModal, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.ProductImageModal, args);
 };
 
 var ProductImageModalDefault = Template.bind({});

package/dist/components/organisms/ProductImageModal/index.js

@@ -23,20 +23,16 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _jsxRuntime = require("react/jsx-runtime");
+var _data = require("../../../global-files/data");
 
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _images$values$active, _images$values$active2, _images$values$active3;
-
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
       headerInfo = _ref.headerInfo,
       validation = _ref.validation,
-      setShowModal = _ref.setShowModal,
-      sendToFacilitator = _ref.sendToFacilitator,
-      approveRejectButtons = _ref.approveRejectButtons;
+      setShowModal = _ref.setShowModal;
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)((0, _data.getImage)(images === null || images === void 0 ? void 0 : images.values[0], 710, 710)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeImage = _useState2[0],
       setActiveImage = _useState2[1];
@@ -58,59 +54,49 @@ var ProductImageModal = function ProductImageModal(_ref) {
     }
   };
 
-  console.log(images === null || images === void 0 ? void 0 : images.values[activeImage]);
   (0, _react.useEffect)(function () {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "modal-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "modal-image-container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
-          img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
-          altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
-          imageType: "expanded-modal-image"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "modal-data-container",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "validation-and-table-container",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "validation-panel",
-            children: [approveRejectButtons("images") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "circular-button ".concat(buttonType),
-              onClick: function onClick() {
-                return setShowValidationPanel(true);
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "close-button",
-              onClick: function onClick() {
-                setShowModal(false);
-              }
-            }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
-              id: "validation-panel",
-              setOptionClicked: setButtonType,
-              setShowValidationPanel: setShowValidationPanel,
-              sendToFacilitator: sendToFacilitator
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
-            headerInfo: headerInfo,
-            activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
-            darkMode: true,
-            lists: images
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
-          images: images,
-          setActiveImage: setActiveImage,
-          modalSelector: true
-        })]
-      })]
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "modal-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-image-container"
+  }, /*#__PURE__*/React.createElement(_ProductImage.ProductImage, {
+    img: activeImage.src,
+    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    imageType: "expanded-modal-image"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "modal-data-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "validation-and-table-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "validation-panel"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "circular-button ".concat(buttonType),
+    onClick: function onClick() {
+      return setShowValidationPanel(true);
+    }
+  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "close-button",
+    onClick: function onClick() {
+      setShowModal(false);
+    }
+  }), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
+    id: "validation-panel",
+    setOptionClicked: setButtonType,
+    setShowValidationPanel: setShowValidationPanel
+  })), /*#__PURE__*/React.createElement(_ImageDataTable.ImageDataTable, {
+    imageData: activeImage.data,
+    headerInfo: headerInfo,
+    activeImage: activeImage,
+    darkMode: true
+  })), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
+    images: images,
+    setActiveImage: setActiveImage,
+    modalSelector: true
+  }))));
 };
 
 exports.ProductImageModal = ProductImageModal;

package/dist/components/organisms/ProductImageModal/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
 
 exports.Container = Container;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChangePasswordLoginDefault = 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/ChangePasswordLogin",
+  component: _index.ChangePasswordLogin
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ChangePasswordLogin, args);
+};
+
+var ChangePasswordLoginDefault = Template.bind({});
+exports.ChangePasswordLoginDefault = ChangePasswordLoginDefault;
+ChangePasswordLoginDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales"
+};

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangePasswordLogin = 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 _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+
+var _react = require("react");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var ChangePasswordLogin = function ChangePasswordLogin(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel,
+      textHeaderRight = _ref.textHeaderRight;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyPassword = _useState2[0],
+      setEmptyPassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyConfirmPassword = _useState4[0],
+      setEmptyConfirmPassword = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      matchPasswords = _useState6[0],
+      setMatchPasswords = _useState6[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var password, confirmPassword;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              password = document.querySelector("#newPasswordInput").value;
+              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+              confirmPassword = document.querySelector("#confirmPasswordInput").value;
+              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+
+              if (password === confirmPassword) {
+                setMatchPasswords(true);
+              } else {
+                setMatchPasswords(false);
+              }
+
+            case 6:
+            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: textHeaderRight
+  })), /*#__PURE__*/React.createElement(_LoginPasswordStrength.LoginPasswordStrength, {
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: textHeaderRight,
+    key: "3"
+  }), /*#__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);
+    }
+  }))];
+  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, {
+    panelColor: _variables.GlobalColors.white,
+    componentsArray: loginRight,
+    panelType: "home-login"
+  })));
+};
+
+exports.ChangePasswordLogin = ChangePasswordLogin;

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

@@ -0,0 +1,18 @@
+"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 _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      position: absolute;\n      bottom: 5%;\n      left: calc(75% - 80px);\n      .general-default-button {\n        width: 160px;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/pages/CustomerLogin/CustomerLogin.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.CustomerLoginDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _variables = require("../../../global-files/variables");
@@ -25,8 +21,6 @@ var _index4 = require("../../atoms/GeneralButton/index");
 
 var _TagAndInput = require("../../molecules/TagAndInput");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/pages/CustomerLogin",
   component: _index.CustomerLogin
@@ -34,67 +28,68 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomerLogin, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.CustomerLogin, args);
 };
 
 var CustomerLoginDefault = Template.bind({});
 exports.CustomerLoginDefault = CustomerLoginDefault;
 CustomerLoginDefault.args = {
   loginLeft: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
-      text: "Bienvenido a Cadena"
-    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "La platarforma que conecta cadenas retailers con proveedores."
-    }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomerTypeImage.CustomerTypeImages, {}, "3")]
+      text: "Bienvenido a Cadena",
+      key: "1"
+    }), /*#__PURE__*/React.createElement("p", {
+      key: "2"
+    }, "La platarforma que conecta cadenas retailers con proveedores."), /*#__PURE__*/React.createElement(_CustomerTypeImage.CustomerTypeImages, {
+      key: "3"
+    })]
   },
   loginRight: {
-    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    componentsArray: [/*#__PURE__*/React.createElement(_index2.LogoImage, {
+      key: "1"
+    }), /*#__PURE__*/React.createElement("div", {
       className: "credenciales",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        fontFamily: _variables.FontFamily.AvenirNext,
-        color: _variables.GlobalColors.s5,
-        text: "Ingresa tus credenciales"
-      })
-    }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      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",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Nombre de usuario",
-        inputPlaceHolder: "username@contentoh.com"
-      })
-    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "3"
+    }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      label: "Nombre de usuario",
+      inputPlaceHolder: "username@contentoh.com"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "password",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Contraseña",
-        inputPlaceHolder: "Escribe tu contraseña"
-      })
-    }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      key: "4"
+    }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      label: "Contraseña",
+      inputPlaceHolder: "Escribe tu contraseña"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "select",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.CheckBox, {
-        label: "Mantener sesión activada",
-        id: "chk-default",
-        className: "active-left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "active-right",
-        children: "Olvide mi contrase\xF1a"
-      })]
-    }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "5"
+    }, /*#__PURE__*/React.createElement(_index3.CheckBox, {
+      label: "Mantener sesión activada",
+      id: "chk-default",
+      className: "active-left"
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "active-right"
+    }, "Olvide mi contrase\xF1a")), /*#__PURE__*/React.createElement("div", {
       className: "button-right",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
-        buttonType: "general-default-button",
-        label: "Iniciar sesión"
-      })
-    }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      key: "6"
+    }, /*#__PURE__*/React.createElement(_index4.Button, {
+      buttonType: "general-default-button",
+      label: "Iniciar sesión"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "new-login",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-        className: "pre-registro",
-        children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: " Reg\xEDstrate"
-        })]
-      })
-    }, "7")]
+      key: "7"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "pre-registro"
+    }, "\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/React.createElement("span", null, " Reg\xEDstrate")))]
   }
 };