contentoh-components-library 21.1.84 → 21.1.87

package/dist/components/atoms/AsignationOption/index.js

@@ -21,7 +21,7 @@ var _availableIcon = _interopRequireDefault(require("../../../assets/images/asig
 
 var _data = require("../../../global-files/data");
 
-var _Status = require("../Status");
+var _Status = require("../../atoms/Status");
 
 var _jsxRuntime = require("react/jsx-runtime");
 

package/dist/components/atoms/InputFormatter/index.js

@@ -62,7 +62,7 @@ var InputFormatter = function InputFormatter(_ref) {
   var maxLength = maxChar ? maxChar : 999;
 
   var getValue = function getValue(value) {
-    var temp = value.replace(/\n/gm, "<br>").replace(/&/gm, "&amp;");
+    var temp = value.replace(/\n/gm, "<br>").replace(/&/gm, "&amp;").replace(/&nbsp;/gm, " ");
     return temp;
   }; //const quillRef = useRef();
 
@@ -74,7 +74,7 @@ var InputFormatter = function InputFormatter(_ref) {
   };
 
   var valueFormater = function valueFormater(value) {
-    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "").replace(/&amp;/gm, "&");
+    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "").replace(/&amp;/gm, "&").replace(/&nbsp;/gm, " ");
   };
 
   var _onChange = function onChange(valueInput, delta, user, h) {
@@ -82,7 +82,7 @@ var InputFormatter = function InputFormatter(_ref) {
 
     try {
       if (h.getLength() - 1 <= maxLength) {
-        var unformattedText = valueInput.replace(/<li.*?>/gm, "   - ").replace(/<\/li>/gm, "\n").replace(/<\/p><p>/gm, "\n").replaceAll(/<\/?(?!\/?strong).*?>/gm, "");
+        var unformattedText = valueInput.replace(/<li.*?>/gm, "   - ").replace(/<\/li>/gm, "\n").replace(/<\/p><p>/gm, "\n").replaceAll(/<\/?(?!\/?strong).*?>/gm, "").replace(/&nbsp;/gm, " ");
         setInputValue(valueInput);
         value = unformattedText;
       } else {

package/dist/components/atoms/SliderToolTip/index.js

@@ -13,6 +13,8 @@ var _styles = require("./styles");
 
 var _react = require("react");
 
+var _customHooks = require("../../../global-files/customHooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var SliderToolTip = function SliderToolTip(_ref) {
@@ -21,23 +23,10 @@ var SliderToolTip = function SliderToolTip(_ref) {
       iconSize = _ref.iconSize,
       slidePosition = _ref.slidePosition;
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
-
-  var closeMenu = function closeMenu(e) {
-    if (!e.target.closest("#div-slider") && showMenu) {
-      document.removeEventListener("click", closeMenu, false);
-      setShowMenu(false);
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    if (showMenu) {
-      document.addEventListener("click", closeMenu, false);
-    }
-  }, [showMenu]);
+  var _useCloseModal = (0, _customHooks.useCloseModal)("div-slider"),
+      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
+      showMenu = _useCloseModal2[0],
+      setShowMenu = _useCloseModal2[1];
 
   var color = function color(id) {
     for (var i = 1; i <= slidefront.length; i++) {
@@ -62,11 +51,9 @@ var SliderToolTip = function SliderToolTip(_ref) {
         alt: "info icon",
         className: iconSize,
         onClick: function onClick(e) {
-          setShowMenu(!showMenu);
-
-          if (showMenu) {
-            document.removeEventListener("click", closeMenu, false);
-          }
+          e.stopPropagation();
+          e.preventDefault();
+          setShowMenu(true);
         }
       }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
         id: "div-slider",
@@ -92,7 +79,6 @@ var SliderToolTip = function SliderToolTip(_ref) {
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                   id: "button-slide",
                   onClick: function onClick(e) {
-                    document.removeEventListener("click", closeMenu, false);
                     setShowMenu(false);
                   },
                   children: "Cerrar"

package/dist/components/atoms/Status/index.js

@@ -15,7 +15,7 @@ var Status = function Status(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: "status-".concat(statusType === null || statusType === void 0 ? void 0 : statusType.replace(/\/.*/, ""), " ").concat(ovalForm && "oval-form"),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: statusType !== null && statusType !== void 0 ? statusType : '-'
+      children: statusType !== null && statusType !== void 0 ? statusType : "NS"
     })
   });
 };

package/dist/components/atoms/StatusTag/StatusTag.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatusTagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var status = _variables.GlobalStatus;
+var _default = {
+  title: "Components/atoms/StatusTag",
+  component: _index.StatusTag,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: {
+        type: "select"
+      }
+    },
+    ovalForm: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusTag, (0, _objectSpread2.default)({}, args));
+};
+
+var StatusTagDefault = Template.bind({});
+exports.StatusTagDefault = StatusTagDefault;
+StatusTagDefault.args = {
+  statusType: "-",
+  ovalForm: false
+};

package/dist/components/atoms/StatusTag/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusTag = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var StatusTag = function StatusTag(_ref) {
+  var statusType = _ref.statusType,
+      ovalForm = _ref.ovalForm;
+
+  var getShortStatus = function getShortStatus(status) {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+
+      case "RECEPTION":
+        return "Pr";
+
+      case "NULL":
+        return "-";
+
+      case "RECEIVED":
+        return "Rc";
+
+      case "IN_PROGRESS":
+        return "P";
+
+      case "ASSIGNED":
+        return "As";
+
+      case "APPROVED":
+        return "Ap";
+
+      case "VALIDATING":
+        return "V";
+
+      case "PAID_OUT":
+        return "Po";
+
+      default:
+        return status;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: getShortStatus(statusType)
+    })
+  });
+};
+
+exports.StatusTag = StatusTag;

package/dist/components/atoms/StatusTag/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  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-IN_PROGRESS,\n  &.status-QF {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr,\n  &.status-Rc {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/molecules/StatusAsignationInfo/index.js

@@ -108,7 +108,9 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       slidePosition: "bottom-slide"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
       buttonType: "general circular-button version-button",
-      onClick: function onClick() {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         setShowVersionSelector(true);
       },
       label: "V".concat(version)
@@ -144,7 +146,9 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
           imageType: "small-image",
           image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
           altText: "user profile image",
-          onClick: function onClick() {
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
             setShowAsignationPanel(true);
             setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
           }

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

@@ -41,9 +41,10 @@ var VersionSelector = function VersionSelector(_ref) {
       setVersion = _ref.setVersion,
       companyName = _ref.companyName,
       currentVersion = _ref.currentVersion,
-      setShowCreateVersion = _ref.setShowCreateVersion;
+      setShowCreateVersion = _ref.setShowCreateVersion,
+      setShowVersionSelector = _ref.setShowVersionSelector;
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       versions = _useState2[0],
       setVersions = _useState2[1];
@@ -84,21 +85,13 @@ var VersionSelector = function VersionSelector(_ref) {
     };
   }();
 
-  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return loadProductVersions(articleId);
-
-          case 2:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })), []);
+  (0, _react.useEffect)(function () {
+    loadProductVersions(articleId);
+    return function () {
+      setVersions([]);
+      setShowCreateVersion(false);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: modalId,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -120,6 +113,9 @@ var VersionSelector = function VersionSelector(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
           image: _closeVersionSelector.default,
           buttonType: "circular-button",
+          onClick: function onClick() {
+            return setShowVersionSelector(false);
+          },
           id: "close-button"
         })]
       })]

package/dist/components/organisms/VersionSelector/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  width: 300px;\n  height: 100%;\n  background-color: ", ";\n  padding: 15px;\n  overflow: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n\n  .versions-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .buttons-container {\n      display: flex;\n      align-items: center;\n\n      button + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 300px;\n  height: 100%;\n  background-color: ", ";\n  padding: 15px;\n  overflow: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 500;\n\n  .versions-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .buttons-container {\n      display: flex;\n      align-items: center;\n\n      button + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
 
 exports.Container = Container;

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

@@ -348,8 +348,9 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       setIcon = _useState40[1];
 
   var _useState41 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
-      _useState42 = (0, _slicedToArray2.default)(_useState41, 1),
-      version = _useState42[0];
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      version = _useState42[0],
+      setVersion = _useState42[1];
 
   var _useState43 = (0, _react.useState)({}),
       _useState44 = (0, _slicedToArray2.default)(_useState43, 1),
@@ -474,10 +475,10 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       showCreateVersion = _useState82[0],
       setShowCreateVersion = _useState82[1];
 
-  var _closeModals = (0, _customHooks.closeModals)("version-selector"),
-      _closeModals2 = (0, _slicedToArray2.default)(_closeModals, 2),
-      showVersionSelector = _closeModals2[0],
-      setShowVersionSelector = _closeModals2[1];
+  var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
+      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
+      showVersionSelector = _useCloseModal2[0],
+      setShowVersionSelector = _useCloseModal2[1];
 
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationLoginFirstStepDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+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 _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/RegistrationLoginFirstStep",
+  component: _index.RegistrationLoginFirstStep
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RegistrationLoginFirstStep, (0, _objectSpread2.default)({}, 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"
+};

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

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationLoginFirstStep = 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 _GeneralInput = require("../../atoms/GeneralInput");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RegistrationLoginFirstStep = function RegistrationLoginFirstStep(_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),
+      emptyName = _useState2[0],
+      setEmptyName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyLastName = _useState4[0],
+      setEmptyLastName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyEmail = _useState6[0],
+      setEmptyEmail = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyJob = _useState8[0],
+      setEmptyJob = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      emptyPhone = _useState10[0],
+      setEmptyPhone = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      invalidEmail = _useState12[0],
+      setInvalidEmail = _useState12[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var name, lastName, email, job, phone;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              name = document.querySelector("#nameInput").value;
+              lastName = document.querySelector("#lastNameInput").value;
+              email = document.querySelector("#emailInput").value;
+              job = document.querySelector("#jobInput").value;
+              phone = document.querySelector("#phoneInput").value;
+              name === "" ? setEmptyName(true) : setEmptyName(false);
+              lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+              job === "" ? setEmptyJob(true) : setEmptyJob(false);
+              phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("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.jsxs)("div", {
+    className: "user",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "name-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "nameInput",
+        label: "Nombre",
+        inputPlaceHolder: "Nombre"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "lastNameInput",
+        label: "Apellido",
+        inputPlaceHolder: "Apellido"
+      })]
+    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su nombre"
+    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese sus apellidos"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "emailInput",
+      label: "Correo electrónico",
+      inputPlaceHolder: "username@contentoh.com"
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su correo"
+    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese un correo v\xE1lido"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "jobInput",
+      label: "Puesto laboral",
+      inputPlaceHolder: "Puesto dentro de la empresa"
+    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su puesto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Teléfono",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "phone-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+        name: "select",
+        className: "phone-options",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+52"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+54"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+57"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+506"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+593"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+503"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+504"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+507"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+51"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
+        inputId: "phoneInput",
+        inputType: "text",
+        inputPlaceholder: "Teléfono"
+      })]
+    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su n\xFAmero de tel\xE9fono"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "País",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      name: "select",
+      className: "country-options",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value1",
+        selected: true,
+        children: "Selecciona tu pa\xEDs"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Argentina"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Colombia"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Ecuador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "El Salvador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Honduras"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "M\xE9xico"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Panam\xE1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Per\xFA"
+      })]
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Seleccione su pa\xEDs"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-end",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-first-step"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-registration"
+    })]
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    text: "Paso 1",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "new-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "pre-registro",
+      children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Inicia Sesi\xF3n"
+      })]
+    })
+  }, "7")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
+        panelImg: imageArrayCarousel,
+        panelText: textCarousel,
+        panelColor: backogroundColorCarousel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-login-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        componentsArray: loginRight,
+        panelType: "home-login",
+        panelColor: _variables.GlobalColors.white
+      })
+    })]
+  });
+};
+
+exports.RegistrationLoginFirstStep = RegistrationLoginFirstStep;