contentoh-components-library 21.1.48 → 21.1.51

package/dist/components/atoms/CheckBox/styles.js

@@ -19,6 +19,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: url(", ");\n      }\n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n    }\n  }\n"])), _variables.GlobalColors.white, _checked.default, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: url(", ");\n      }\n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n    }\n  }\n"])), _variables.GlobalColors.white, _checked.default, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
 
 exports.Container = Container;

package/dist/components/atoms/Commentary/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n    text-decoration: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n    text-decoration: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, function (_ref) {
   var reviewed = _ref.reviewed;
   return reviewed ? "line-through" : "none";
 });

package/dist/components/atoms/GeneralInput/styles.js

@@ -15,15 +15,15 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 11px;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "none";
 }, function (_ref2) {
   var isRequired = _ref2.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, function (_ref3) {
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, function (_ref3) {
   var isRequired = _ref3.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.s4);
 
 exports.Container = Container;

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

@@ -28,6 +28,6 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 }, function (_ref4) {
   var position = _ref4.position;
   return position.left;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.FontFamily.Raleway_900, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_900, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
 
 exports.Container = Container;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SliderToolTipSendContentoh = exports.SliderToolTipDefault = void 0;
+exports.default = exports.SliderToolTipDefault = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -13,41 +13,21 @@ var _index = require("./index");
 
 var _infoIcon = _interopRequireDefault(require("../../../assets/images/sliderToolTip/infoIcon.svg"));
 
-var _slide = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide21.svg"));
+var _slide = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide1.svg"));
 
-var _slide2 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide22.svg"));
+var _slide2 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide2.svg"));
 
-var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide23.svg"));
+var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide3.svg"));
 
-var _slide4 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide1.svg"));
+var _slide4 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide4.svg"));
 
-var _slide5 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide2.svg"));
-
-var _slide6 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide3.svg"));
-
-var _slide7 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide4.svg"));
-
-var _slide8 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide5.svg"));
+var _slide5 = _interopRequireDefault(require("../../../assets/images/sliderToolTip/slide5.svg"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
   title: "Components/atoms/SliderToolTip",
-  component: _index.SliderToolTip,
-  argTypes: {
-    iconSize: {
-      options: ["big-image", "medium-image", "small-image"],
-      control: {
-        type: "select"
-      }
-    },
-    slidePosition: {
-      options: ["top-slide", "bottom-slide"],
-      control: {
-        type: "select"
-      }
-    }
-  }
+  component: _index.SliderToolTip
 };
 exports.default = _default;
 
@@ -58,44 +38,10 @@ var Template = function Template(args) {
 var SliderToolTipDefault = Template.bind({});
 exports.SliderToolTipDefault = SliderToolTipDefault;
 SliderToolTipDefault.args = {
-  infoIcon: _infoIcon.default,
-  slidefront: [{
-    slide: _slide.default,
-    title: "Valida tu producto en cada activo digital",
-    description: "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido."
-  }, {
-    slide: _slide2.default,
-    title: "Aprueba o rechaza con un clic",
-    description: "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto."
-  }, {
-    slide: _slide3.default,
-    title: "Estatus de tu producto en el proceso",
-    description: "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra."
-  }],
-  slidePosition: "bottom-slide",
-  iconSize: "medium-image"
-};
-var SliderToolTipSendContentoh = Template.bind({});
-exports.SliderToolTipSendContentoh = SliderToolTipSendContentoh;
-SliderToolTipSendContentoh.args = {
-  infoIcon: _infoIcon.default,
-  slidefront: [{
-    slide: _slide4.default,
-    description: "Creamos tu contenido, y todo lo que haga falta para tu producto, cada sección puedes socilitar contenido enriquecido, y nosotros lo haremos por ti."
-  }, {
-    slide: _slide5.default,
-    description: "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout."
-  }, {
-    slide: _slide6.default,
-    description: "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout."
-  }, {
-    slide: _slide7.default,
-    description: "Elige el tipo de entrega de tu producto, puedes ser recolección en el lugar o por el contrario puedes dejarlo en nuestras oficinas."
-  }, {
-    slide: _slide8.default,
-    title: "Bienvenido al modo Content-oh!",
-    description: "Finalmente elige la forma de pago que más te guste, procede con el pago y listo."
-  }],
-  slidePosition: "top-slide",
-  iconSize: "big-image"
+  InfoIcon: _infoIcon.default,
+  Slide1: _slide.default,
+  Slide2: _slide2.default,
+  Slide3: _slide3.default,
+  Slide4: _slide4.default,
+  Slide5: _slide5.default
 };

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

@@ -16,10 +16,12 @@ var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var SliderToolTip = function SliderToolTip(_ref) {
-  var infoIcon = _ref.infoIcon,
-      slidefront = _ref.slidefront,
-      iconSize = _ref.iconSize,
-      slidePosition = _ref.slidePosition;
+  var InfoIcon = _ref.InfoIcon,
+      Slide1 = _ref.Slide1,
+      Slide2 = _ref.Slide2,
+      Slide3 = _ref.Slide3,
+      Slide4 = _ref.Slide4,
+      Slide5 = _ref.Slide5;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -40,27 +42,49 @@ var SliderToolTip = function SliderToolTip(_ref) {
   }, [showMenu]);
 
   var color = function color(id) {
-    for (var i = 1; i <= slidefront.length; i++) {
-      if (id === "slidea".concat(i)) {
-        document.getElementById("slidea".concat(i)).style.backgroundColor = "#E33AA9";
+    if (id === "slidea1") {
+      document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
 
-        if (id === "slidea".concat(slidefront.length)) {
-          document.getElementById("button-slide").style.display = "flex";
-        }
-      } else if (id > "slidea".concat(i)) {
-        document.getElementById("slidea".concat(i)).style.backgroundColor = "#FAFAFA";
-      } else if (id < "slidea".concat(i)) {
-        document.getElementById("slidea".concat(i)).style.backgroundColor = "#C4C4C4";
-      }
+    if (id === "slidea2") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+
+    if (id === "slidea3") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+
+    if (id === "slidea4") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+
+    if (id === "slidea5") {
+      document.getElementById("button-slide").style.display = "flex";
     }
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      className: "container-slider",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: infoIcon,
+        src: InfoIcon,
         alt: "info icon",
-        className: iconSize,
         onClick: function onClick(e) {
           setShowMenu(!showMenu);
 
@@ -70,62 +94,103 @@ var SliderToolTip = function SliderToolTip(_ref) {
         }
       }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
         id: "div-slider",
-        className: slidePosition,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
           className: "slider",
-          children: slidefront.map(function (item, index) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-              id: "slide".concat(index + 1),
-              className: "slide".concat(index + 1) === "slide".concat(slidefront.length) ? "end-div" : "",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                  src: item.slide
-                })
-              }), "slide".concat(index + 1) === "slide".concat(slidefront.length) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                  className: "lema-end",
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    children: item.title
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                    children: item.description
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                  id: "button-slide",
-                  onClick: function onClick(e) {
-                    document.removeEventListener("click", closeMenu, false);
-                    setShowMenu(false);
-                  },
-                  children: "Cerrar"
-                })]
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [item.title !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: item.title
-                }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                  children: item.description
-                })]
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            id: "slide1",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: Slide1
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Creamos tu contenido, y todo lo que haga falta para tu producto, cada secci\xF3n puedes socilitar contenido enriquecido, y nosotros lo haremos por ti."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            id: "slide2",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: Slide2
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            id: "slide3",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: Slide3
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            id: "slide4",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: Slide4
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Elige el tipo de entrega de tu producto, puedes ser recolecci\xF3n en el lugar o por el contrario puedes dejarlo en nuestras oficinas."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            id: "slide5",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: Slide5
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "lema-end",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: "Finalmente elige la forma de pago que m\xE1s te guste, procede con el pago y listo."
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Bienvenido al modo Content-oh!"
               })]
-            });
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              id: "button-slide",
+              onClick: function onClick(e) {
+                document.removeEventListener("click", closeMenu, false);
+                setShowMenu(false);
+              },
+              children: "Cerrar"
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
           className: "menu",
-          children: slidefront.map(function (item, index) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-                id: "slidea".concat(index + 1),
-                onClick: function onClick(e) {
-                  color("slidea".concat(index + 1));
-
-                  for (var i = 1; i <= slidefront.length; i++) {
-                    if (index + 1 === i) {
-                      document.getElementById("slide".concat(index + 1)).style.opacity = 1;
-                    } else if (index + 1 > i || index + 1 < i) {
-                      document.getElementById("slide".concat(i)).style.opacity = 0;
-                    }
-                  }
-                }
-              })
-            });
-          })
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "#slide1",
+              id: "slidea1",
+              onClick: function onClick(e) {
+                color("slidea1");
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "#slide2",
+              id: "slidea2",
+              onClick: function onClick(e) {
+                color("slidea2");
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "#slide3",
+              id: "slidea3",
+              onClick: function onClick(e) {
+                color("slidea3");
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "#slide4",
+              id: "slidea4",
+              onClick: function onClick(e) {
+                color("slidea4");
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              href: "#slide5",
+              id: "slidea5",
+              onClick: function onClick(e) {
+                color("slidea5");
+              }
+            })
+          })]
         })]
       })]
     })

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

@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  width: 40px !important;\n  margin: 9px;\n  position: relative;\n"])));
 
 exports.Container = Container;
 
-var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -70px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n      font-family: \"Avenir Next\";\n      font-style: normal;\n      font-weight: 500;\n      font-size: 15px;\n      line-height: 15px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      color: #fafafa;\n      display: flex;\n      justify-content: center;\n      background-color: #281f33;\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  \n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  top: calc(100% + 25px);\n  left: calc(50% - 223px / 2);\n  #div-slider {\n    width: 310px;\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        img {\n          height: 40px;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n    }\n    #slide5 {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 100px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n        span {\n          font-family: \"Avenir Next\";\n          font-style: normal;\n          font-weight: 700;\n          font-size: 17px;\n          line-height: 15px;\n          text-align: center;\n          letter-spacing: -0.015em;\n          color: #fafafa;\n        }\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 88%;\n        cursor: pointer;\n      }\n    }\n  }\n\n  li:first-child {\n    opacity: 1; /*Mostramos el primer <li>*/\n  }\n  li:target {\n    opacity: 1; /*Mostramos el primer <li>*/\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
 
 exports.Slider = Slider;

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

@@ -18,12 +18,27 @@ var StatusTag = function StatusTag(_ref) {
       case "COMPLETED":
         return "C";
 
+      case "RECEPTION":
+        return "Pr";
+
       case "NULL":
-        return "--";
+        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";
 
@@ -33,7 +48,7 @@ var StatusTag = function StatusTag(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: "status-".concat(getShortStatus(statusType === null || statusType === void 0 ? void 0 : statusType.replace(/\/.*/, "")), " ").concat(ovalForm && "oval-form"),
+    className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       children: getShortStatus(statusType)
     })

package/dist/components/atoms/StatusTag/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: 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-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\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  &.delThis {\n    color: red;\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);
+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/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js

@@ -11,16 +11,6 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _index = require("./index");
 
-var _iconProduct = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconProduct.svg"));
-
-var _iconGroup = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconGroup.svg"));
-
-var _iconLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogo.svg"));
-
-var _iconSpeedometer = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg"));
-
-var _iconTask = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconTask.svg"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
@@ -35,37 +25,4 @@ var Template = function Template(args) {
 
 var VerticalSideMenuMainPageDefault = Template.bind({});
 exports.VerticalSideMenuMainPageDefault = VerticalSideMenuMainPageDefault;
-VerticalSideMenuMainPageDefault.args = {
-  menuoption: [{
-    icon: _iconSpeedometer.default,
-    path: "/Dashboard",
-    title: "Dashborad"
-  }, {
-    icon: _iconProduct.default,
-    path: "/products",
-    title: "Productos",
-    suboption: [{
-      path: "/Dashboard",
-      title: "General"
-    }, {
-      path: "/AddProducts",
-      title: "Agregar Producto"
-    }]
-  }, {
-    icon: _iconGroup.default,
-    path: "/providers",
-    title: "Proovedores"
-  }, {
-    icon: _iconLogo.default,
-    path: "/ContentohProducts",
-    title: "Content Oh!",
-    suboption: {
-      path: "/ContentohProducts",
-      title: "Productos"
-    }
-  }, {
-    icon: _iconTask.default,
-    path: "/tasks/7",
-    title: "Tareas"
-  }]
-};
+VerticalSideMenuMainPageDefault.args = {};