contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/molecules/BoxButtons/BoxButtons.stories.js

@@ -1,19 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BoxButtonsDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/molecules/BoxButtons",
   component: _index.BoxButtons
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxButtons, {
-  ...args
-});
-const BoxButtonsDefault = exports.BoxButtonsDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxButtons, (0, _objectSpread2.default)({}, args));
+};
+
+var BoxButtonsDefault = Template.bind({});
+exports.BoxButtonsDefault = BoxButtonsDefault;
 BoxButtonsDefault.args = {
   text: "texto prueba",
   showAdd: true

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

@@ -4,17 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BoxButtons = void 0;
+
 var _styles = require("./styles");
+
 var _material = require("@mui/material");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const BoxButtons = _ref => {
-  let {
-    showAdd,
-    onAdd,
-    onDelete,
-    isTheFirstBox,
-    index
-  } = _ref;
+
+var BoxButtons = function BoxButtons(_ref) {
+  var showAdd = _ref.showAdd,
+      onAdd = _ref.onAdd,
+      onDelete = _ref.onDelete,
+      isTheFirstBox = _ref.isTheFirstBox,
+      index = _ref.index;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     index: index,
     children: [!isTheFirstBox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
@@ -40,4 +42,5 @@ const BoxButtons = _ref => {
     })]
   });
 };
+
 exports.BoxButtons = BoxButtons;

package/dist/components/molecules/BoxButtons/styles.js

@@ -1,13 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerIcon = 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, _templateObject2;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display:flex;\n    flex-direction:row;\n    gap:8px;\n  .button-circle{\n    width:30px;\n    height:30px;\n    padding:2px;\n    border-radius:100%;\n    min-width:30px;\n    border: 1px solid #F0F0F0;\n  }\n  .button-circle:hover {\n    border: 1px solid #F0F0F0;\n  }\n\n"])));
-const ContainerIcon = exports.ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\ncursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 20px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}"])), _variables.GlobalColors.gray);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display:flex;\n    flex-direction:row;\n    gap:8px;\n  .button-circle{\n    width:30px;\n    height:30px;\n    padding:2px;\n    border-radius:100%;\n    min-width:30px;\n    border: 1px solid #F0F0F0;\n  }\n  .button-circle:hover {\n    border: 1px solid #F0F0F0;\n  }\n\n"])));
+
+exports.Container = Container;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\ncursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 20px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}"])), _variables.GlobalColors.gray);
+
+exports.ContainerIcon = ContainerIcon;

package/dist/components/molecules/ButtonDownloadFile/DownloadFile.stories.js

@@ -1,12 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DownloadFileOk = exports.DownloadFileError = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/molecules/ButtonDownloadFile",
   component: _index.ButtonDownloadFile,
   argTypes: {
@@ -24,21 +31,26 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ButtonDownloadFile, {
-  ...args
-});
-const DownloadFileOk = exports.DownloadFileOk = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ButtonDownloadFile, (0, _objectSpread2.default)({}, args));
+};
+
+var DownloadFileOk = Template.bind({});
+exports.DownloadFileOk = DownloadFileOk;
 DownloadFileOk.args = {
   type: undefined,
   transparent: false,
   borderType: undefined,
   size: "70",
-  onDownload: error => {
+  onDownload: function onDownload(error) {
     error && alert("mensaje: " + error.message + "\nDetalles: " + error.details);
   },
   url: "https://content-management-images.s3.amazonaws.com/84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf"
 };
-const DownloadFileError = exports.DownloadFileError = Template.bind({});
+var DownloadFileError = Template.bind({});
+exports.DownloadFileError = DownloadFileError;
 DownloadFileError.args = {
   id: "",
   key: "",
@@ -47,7 +59,7 @@ DownloadFileError.args = {
   borderType: "circle",
   size: "70",
   width: "100px",
-  onDownload: error => {
+  onDownload: function onDownload(error) {
     error && alert("mensaje: " + error.message + "\nDetalles: " + error.details);
   },
   url: "https://content-management-images.s3.amazonaws.com/84300/1/chat/noExiste.pdf"

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

@@ -1,85 +1,137 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ButtonDownloadFile = 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 _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
 var _react = require("react");
+
 var _ButtonV = require("../../atoms/ButtonV2");
+
 var _IconFile = require("../../atoms/IconFile");
+
 var _axios = _interopRequireDefault(require("axios"));
+
 var _utils = require("../../../global-files/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const ButtonDownloadFile = props => {
-  const {
-    id,
-    key,
-    className,
-    type,
-    // white | pink | gray | purple (white -> predeterminado)
-    transparent,
-    // boolean
-    size,
-    // number ... default (13)
-    borderType,
-    // rectangle || circle || (cualquier otro valor -> no borde)
-    url,
-    // src del file
-    onDownload // ( {message , details} ) => {}
-  } = props;
-  const [showDownload, setShowDownload] = (0, _react.useState)(false);
-  const [loading, setLoading] = (0, _react.useState)(false);
-  const getSrc = () => {
-    const temp = url.split("/");
+
+var ButtonDownloadFile = function ButtonDownloadFile(props) {
+  var id = props.id,
+      key = props.key,
+      className = props.className,
+      type = props.type,
+      transparent = props.transparent,
+      size = props.size,
+      borderType = props.borderType,
+      url = props.url,
+      onDownload = props.onDownload;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showDownload = _useState2[0],
+      setShowDownload = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var getSrc = function getSrc() {
+    var temp = url.split("/");
     return temp[temp.length - 1];
   };
-  const getFile = async () => {
-    try {
-      setLoading(true);
-      const responseFile = await (0, _axios.default)({
-        url: url,
-        method: "GET",
-        responseType: "blob"
-      });
-      if (responseFile.status !== 200) {
-        setLoading(false);
-        onDownload && onDownload({
-          message: "No se pudo descargar el archivo",
-          details: responseFile.statusText
-        });
-        return;
-      }
-      const newUrl = window.URL.createObjectURL(new Blob([responseFile.data]));
-      const link = document.createElement("a");
-      link.href = newUrl;
-      link.setAttribute("download", getSrc());
-      link.style.display = "none";
-      document.body.appendChild(link);
-      setLoading(false);
-      link.click();
-      document.body.removeChild(link);
-    } catch (err) {
-      setLoading(false);
-      onDownload && onDownload({
-        message: "No se pudo descargar el archivo",
-        details: err.message
-      });
-    }
-  };
+
+  var getFile = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var responseFile, newUrl, link;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              _context.next = 4;
+              return (0, _axios.default)({
+                url: url,
+                method: "GET",
+                responseType: "blob"
+              });
+
+            case 4:
+              responseFile = _context.sent;
+
+              if (!(responseFile.status !== 200)) {
+                _context.next = 9;
+                break;
+              }
+
+              setLoading(false);
+              onDownload && onDownload({
+                message: "No se pudo descargar el archivo",
+                details: responseFile.statusText
+              });
+              return _context.abrupt("return");
+
+            case 9:
+              newUrl = window.URL.createObjectURL(new Blob([responseFile.data]));
+              link = document.createElement("a");
+              link.href = newUrl;
+              link.setAttribute("download", getSrc());
+              link.style.display = "none";
+              document.body.appendChild(link);
+              setLoading(false);
+              link.click();
+              document.body.removeChild(link);
+              _context.next = 24;
+              break;
+
+            case 20:
+              _context.prev = 20;
+              _context.t0 = _context["catch"](0);
+              setLoading(false);
+              onDownload && onDownload({
+                message: "No se pudo descargar el archivo",
+                details: _context.t0.message
+              });
+
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 20]]);
+    }));
+
+    return function getFile() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
       id: id,
       className: className,
       borderType: borderType,
-      onMouseEnter: event => {
+      onMouseEnter: function onMouseEnter(event) {
         if (!showDownload) {
           setShowDownload(true);
         }
       },
-      onMouseLeave: event => {
+      onMouseLeave: function onMouseLeave(event) {
         if (!loading) {
           setShowDownload(false);
         }
@@ -92,9 +144,26 @@ const ButtonDownloadFile = props => {
         borderType: borderType,
         icon: _freeSolidSvgIcons.faArrowDown,
         isLoading: loading,
-        onClick: async event => {
-          getFile();
-        }
+        onClick: /*#__PURE__*/function () {
+          var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(event) {
+            return _regenerator.default.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    getFile();
+
+                  case 1:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }()
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFile.IconFile, {
         className: "iconFile",
         type: type,
@@ -106,4 +175,5 @@ const ButtonDownloadFile = props => {
     }, key)
   });
 };
+
 exports.ButtonDownloadFile = ButtonDownloadFile;

package/dist/components/molecules/ButtonDownloadFile/styles.js

@@ -1,17 +1,23 @@
 "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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  height: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n  border-radius: ", ";\n\n  .buttonDownload {\n    width: 100%;\n    height: 100%;\n    .button {\n      // tipos de botones fill\n      &.fill {\n        &.white:hover {\n          background-color: white;\n        }\n        &.whiteS2:hover {\n          background-color: white;\n        }\n        &.pink:hover {\n          background-color: #e33aa9;\n        }\n        &.gray:hover {\n          background-color: #e8e5e5;\n        }\n        &.purple:hover {\n          background-color: #f7f7fc;\n        }\n      }\n\n      // tipos de botones transparent\n      &.transparent {\n        &.white:hover {\n          color: white;\n        }\n        &.pink:hover {\n          color: #e33aa9;\n        }\n        &.gray:hover {\n          .icon,\n          .iconLoading {\n            color: #7b7979;\n          }\n        }\n        &.purple:hover {\n          color: #8a6caa;\n        }\n        &.black:hover {\n          color: #262626;\n        }\n      }\n    }\n  }\n"])), _ref => {
-  let {
-    borderType
-  } = _ref;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  height: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n  border-radius: ", ";\n\n  .buttonDownload {\n    width: 100%;\n    height: 100%;\n    .button {\n      // tipos de botones fill\n      &.fill {\n        &.white:hover {\n          background-color: white;\n        }\n        &.whiteS2:hover {\n          background-color: white;\n        }\n        &.pink:hover {\n          background-color: #e33aa9;\n        }\n        &.gray:hover {\n          background-color: #e8e5e5;\n        }\n        &.purple:hover {\n          background-color: #f7f7fc;\n        }\n      }\n\n      // tipos de botones transparent\n      &.transparent {\n        &.white:hover {\n          color: white;\n        }\n        &.pink:hover {\n          color: #e33aa9;\n        }\n        &.gray:hover {\n          .icon,\n          .iconLoading {\n            color: #7b7979;\n          }\n        }\n        &.purple:hover {\n          color: #8a6caa;\n        }\n        &.black:hover {\n          color: #262626;\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+  var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "10%" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "none";
-});
+});
+
+exports.Container = Container;

package/dist/components/molecules/CarouselImagesLogin/CarouselImagesLogin.stories.js

@@ -1,23 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CarouselImagesLoginDefault = 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 = exports.default = {
+
+var _default = {
   title: "Components/molecules/CarouselImagesLogin",
   component: _index.CarouselImagesLogin
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CarouselImagesLogin, {
-  ...args
-});
-const CarouselImagesLoginDefault = exports.CarouselImagesLoginDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CarouselImagesLogin, (0, _objectSpread2.default)({}, args));
+};
+
+var CarouselImagesLoginDefault = Template.bind({});
+exports.CarouselImagesLoginDefault = CarouselImagesLoginDefault;
 CarouselImagesLoginDefault.args = {
   panelImg: [_loginImage.default, _login.default, _login2.default],
   panelText: "Elige la plataforma que conecta proovedores y retailers"

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

@@ -4,52 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CarouselImagesLogin = void 0;
+
 var _styles = require("./styles");
+
 var _ScreenHeader = require("../../atoms/ScreenHeader");
+
 var _variables = require("../../../global-files/variables");
+
 var _react = require("react");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const CarouselImagesLogin = _ref => {
-  let {
-    panelImg = [],
-    panelText,
-    panelColor
-  } = _ref;
-  const carouselStart = () => {
-    const images = panelImg;
-    let i = 1;
-    const img1 = document.querySelector("#img1");
-    const img2 = document.querySelector("#img2");
-    const divIndicadores = document.querySelector("#indicadores");
-    for (let index = 0; index < images.length; index++) {
-      const div = document.createElement("div");
+
+var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
+  var _ref$panelImg = _ref.panelImg,
+      panelImg = _ref$panelImg === void 0 ? [] : _ref$panelImg,
+      panelText = _ref.panelText,
+      panelColor = _ref.panelColor;
+
+  var carouselStart = function carouselStart() {
+    var images = panelImg;
+    var i = 1;
+    var img1 = document.querySelector("#img1");
+    var img2 = document.querySelector("#img2");
+    var divIndicadores = document.querySelector("#indicadores");
+
+    for (var index = 0; index < images.length; index++) {
+      var div = document.createElement("div");
       div.classList.add("circles");
       div.id = index;
       divIndicadores.appendChild(div);
     }
+
     img1.src = images[0];
-    const circulos = document.querySelectorAll(".circles");
+    var circulos = document.querySelectorAll(".circles");
     circulos[0].classList.add("resaltado");
-    const slideshow = () => {
+
+    var slideshow = function slideshow() {
       img2.src = images[i];
-      const circulo_actual = Array.from(circulos).find(el => el.id === i);
-      Array.from(circulos).forEach(cir => cir.classList.remove("resaltado"));
+      var circulo_actual = Array.from(circulos).find(function (el) {
+        return el.id === i;
+      });
+      Array.from(circulos).forEach(function (cir) {
+        return cir.classList.remove("resaltado");
+      });
       circulo_actual === null || circulo_actual === void 0 ? void 0 : circulo_actual.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;
+
       if (i === images.length) {
         i = 0;
       }
-      setTimeout(() => {
+
+      setTimeout(function () {
         img1.src = img2.src;
         img2.classList.remove("active");
         img1.classList.remove("right");
       }, 1000);
     };
+
     setInterval(slideshow, 4000);
   };
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)(function () {
     carouselStart();
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
@@ -71,4 +88,5 @@ const CarouselImagesLogin = _ref => {
     })]
   });
 };
+
 exports.CarouselImagesLogin = CarouselImagesLogin;

package/dist/components/molecules/CarouselImagesLogin/styles.js

@@ -1,16 +1,21 @@
 "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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  #slideshow {\n    position: relative;\n    height: 65%;\n    img {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 8%;\n      left: 0;\n    }\n    #img2 {\n      left: 100%;\n    }\n    .right {\n      transform: translate(-100%, 0);\n      transition: all 1s;\n    }\n    .active {\n      left: 0 !important;\n      transition: all 1s;\n    }\n  }\n  .product-name-header {\n    position: absolute;\n    bottom: 16%;\n    right: 50%;\n    transform: translateX(50%);\n  }\n  #indicadores {\n    width: 100%;\n    text-align: center;\n    position: absolute;\n    bottom: 7%;\n    .circles {\n      background-color: white;\n      border: white 2px solid;\n      width: 20px;\n      height: 20px;\n      display: inline-block;\n      margin: 0 5px;\n      border-radius: 50%;\n      &.resaltado {\n      background-color: rgba(255, 255, 255, 0);\n      transition: background-color 0.8s;\n    }\n    }\n  }\n"])), _ref => {
-  let {
-    panelColor
-  } = _ref;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  #slideshow {\n    position: relative;\n    height: 65%;\n    img {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 8%;\n      left: 0;\n    }\n    #img2 {\n      left: 100%;\n    }\n    .right {\n      transform: translate(-100%, 0);\n      transition: all 1s;\n    }\n    .active {\n      left: 0 !important;\n      transition: all 1s;\n    }\n  }\n  .product-name-header {\n    position: absolute;\n    bottom: 16%;\n    right: 50%;\n    transform: translateX(50%);\n  }\n  #indicadores {\n    width: 100%;\n    text-align: center;\n    position: absolute;\n    bottom: 7%;\n    .circles {\n      background-color: white;\n      border: white 2px solid;\n      width: 20px;\n      height: 20px;\n      display: inline-block;\n      margin: 0 5px;\n      border-radius: 50%;\n      &.resaltado {\n      background-color: rgba(255, 255, 255, 0);\n      transition: background-color 0.8s;\n    }\n    }\n  }\n"])), function (_ref) {
+  var panelColor = _ref.panelColor;
   return panelColor ? panelColor : "linear-gradient(180deg,#ffffff 0%,rgba(255, 255, 255, 0.887706) 49.27%,rgba(255, 255, 255, 0) 100%),#d43594";
-});
+});
+
+exports.Container = Container;

package/dist/components/molecules/CustomSelect/CustomSelect.stories.js

@@ -1,21 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CustomSelectDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _starIcon = _interopRequireDefault(require("../../../assets/images/customSelect/starIcon.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/molecules/CustomSelect",
   component: _index.CustomSelect
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomSelect, {
-  ...args
-});
-const CustomSelectDefault = exports.CustomSelectDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomSelect, (0, _objectSpread2.default)({}, args));
+};
+
+var CustomSelectDefault = Template.bind({});
+exports.CustomSelectDefault = CustomSelectDefault;
 CustomSelectDefault.args = {
   // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
@@ -27,7 +38,7 @@ CustomSelectDefault.args = {
     id: 49,
     name: "Mis Favoritos"
   }],
-  onClickItem: (v, id) => {
+  onClickItem: function onClickItem(v, id) {
     if (v) {
       console.log("Agregar a la lista", id);
     } else {