contentoh-components-library 0.1.1 → 8.0.0

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

@@ -1,42 +1,29 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImagePreviewer = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var _styles = require("./styles");
 
 var _EditionActiveImage = require("../../molecules/EditionActiveImage");
 
 var _ImageSelector = require("../../molecules/ImageSelector");
 
-var _react = require("react");
-
 var ImagePreviewer = function ImagePreviewer(_ref) {
   var _ref$imagesArray = _ref.imagesArray,
       imagesArray = _ref$imagesArray === void 0 ? [] : _ref$imagesArray,
       activeImage = _ref.activeImage,
-      setActiveImage = _ref.setActiveImage;
-
-  var _useState = (0, _react.useState)(activeImage),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      imageSelected = _useState2[0],
-      setImageSelected = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    setActiveImage && setActiveImage(imageSelected);
-  }, [imageSelected]);
+      setActiveImage = _ref.setActiveImage,
+      setShowModal = _ref.setShowModal;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_EditionActiveImage.EditionActiveImage, {
-    img: imageSelected === null || imageSelected === void 0 ? void 0 : imageSelected.img,
-    altText: imageSelected === null || imageSelected === void 0 ? void 0 : imageSelected.alt
+    img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
+    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    setShowModal: setShowModal
   }), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
     images: imagesArray,
-    setActiveImage: setImageSelected
+    setActiveImage: setActiveImage
   }));
 };
 

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

@@ -16,21 +16,66 @@ var InputGroup = function InputGroup(_ref) {
 
   var _ref$inputGroup = _ref.inputGroup,
       inputGroup = _ref$inputGroup === void 0 ? {} : _ref$inputGroup,
-      activeSection = _ref.activeSection;
+      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;
+
+  var inputTypeValue = function inputTypeValue(type) {
+    switch (type) {
+      case "Booleano":
+        return "checkbox";
+
+      case "Numérico":
+        return "number";
+
+      default:
+        return "text";
+    }
+  };
+
   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.name
+    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) {
-    return /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
-      key: index,
-      inputType: activeSection === "Ficha técnica" ? "text" : "textarea",
-      label: input.label,
-      value: input.value,
-      inputPlaceHolder: input.placeholder
+    var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+
+    return activeSection === "Ficha técnica" ? /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value),
+      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
+    }) : /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index + "-" + (input === null || input === void 0 ? void 0 : input.value),
+      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
     });
   })));
 };

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      }\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        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);
 
 exports.Container = Container;

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

@@ -21,125 +21,127 @@ var ProductImageModalDefault = Template.bind({});
 exports.ProductImageModalDefault = ProductImageModalDefault;
 ProductImageModalDefault.args = {
   headerInfo: {},
-  imagesArray: [{
-    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-    alt: "img",
-    name: "Hero",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
-    alt: "img",
-    name: "Hero2",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
-    alt: "img",
-    name: "Hero3",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
-    alt: "img",
-    name: "Hero4",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://memegenerator.net/img/images/72798198.jpg",
-    alt: "img",
-    name: "Hero5",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
-    alt: "img",
-    name: "Hero6",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
+  images: {
+    values: [{
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+      name: "Hero",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+      name: "Hero2",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+      name: "Hero3",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+      name: "Hero4",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+      name: "Hero5",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+      name: "Hero6",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
     }]
-  }]
+  }
 };

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

@@ -23,13 +23,20 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
+var _data = require("../../../global-files/data");
+
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _ref$imagesArray = _ref.imagesArray,
-      imagesArray = _ref$imagesArray === void 0 ? [] : _ref$imagesArray,
+  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;
+      validation = _ref.validation,
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator,
+      approveRejectButtons = _ref.approveRejectButtons;
 
-  var _useState = (0, _react.useState)(imagesArray.length > 0 && imagesArray[0]),
+  var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeImage = _useState2[0],
       setActiveImage = _useState2[1];
@@ -56,13 +63,16 @@ var ProductImageModal = function ProductImageModal(_ref) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
+  (0, _react.useEffect)(function () {
+    console.log(images === null || images === void 0 ? void 0 : images.values[activeImage]);
+  }, [activeImage]);
   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 === null || activeImage === void 0 ? void 0 : activeImage.img,
-    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    img: images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.src,
+    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__*/React.createElement("div", {
     className: "modal-data-container"
@@ -70,23 +80,29 @@ var ProductImageModal = function ProductImageModal(_ref) {
     className: "validation-and-table-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "validation-panel"
-  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+  }, approveRejectButtons("images") && /*#__PURE__*/React.createElement(_GeneralButton.Button, {
     buttonType: "circular-button ".concat(buttonType),
     onClick: function onClick() {
       return setShowValidationPanel(true);
     }
   }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "close-button"
+    buttonType: "close-button",
+    onClick: function onClick() {
+      setShowModal(false);
+    }
   }), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
     id: "validation-panel",
     setOptionClicked: setButtonType,
-    setShowValidationPanel: setShowValidationPanel
+    setShowValidationPanel: setShowValidationPanel,
+    sendToFacilitator: sendToFacilitator
   })), /*#__PURE__*/React.createElement(_ImageDataTable.ImageDataTable, {
-    imageData: activeImage.data,
+    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: activeImage
+    activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
+    darkMode: true,
+    lists: images
   })), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
-    images: imagesArray,
+    images: images,
     setActiveImage: setActiveImage,
     modalSelector: true
   }))));

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  overflow: auto;\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/CustomerLogin/CustomerLogin.stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomerLoginDefault = void 0;
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _CustomerTypeImage = require("../../atoms/CustomerTypeImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _index2 = require("../../atoms/LogoImage/index");
+
+var _index3 = require("../../atoms/CheckBox/index");
+
+var _index4 = require("../../atoms/GeneralButton/index");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _default = {
+  title: "Components/pages/CustomerLogin",
+  component: _index.CustomerLogin
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.CustomerLogin, args);
+};
+
+var CustomerLoginDefault = Template.bind({});
+exports.CustomerLoginDefault = CustomerLoginDefault;
+CustomerLoginDefault.args = {
+  loginLeft: {
+    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.Raleway_600,
+      color: _variables.GlobalColors.white,
+      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__*/React.createElement(_index2.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",
+      label: "Nombre de usuario",
+      inputPlaceHolder: "username@contentoh.com"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "password",
+      key: "4"
+    }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      label: "Contraseña",
+      inputPlaceHolder: "Escribe tu contraseña"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "select",
+      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",
+      key: "6"
+    }, /*#__PURE__*/React.createElement(_index4.Button, {
+      buttonType: "general-default-button",
+      label: "Iniciar sesión"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "new-login",
+      key: "7"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "pre-registro"
+    }, "\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/React.createElement("span", null, " Reg\xEDstrate")))]
+  }
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomerLogin = void 0;
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _styles = require("./styles");
+
+var CustomerLogin = function CustomerLogin(_ref) {
+  var loginLeft = _ref.loginLeft,
+      loginRight = _ref.loginRight;
+  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/CustomerLogin/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\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])));
+
+exports.Container = Container;