contentoh-components-library 21.0.11 → 21.0.12

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

@@ -7,24 +7,17 @@ exports.GenericModal = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var GenericModal = function GenericModal(_ref) {
   var _ref$componentsArray = _ref.componentsArray,
       componentsArray = _ref$componentsArray === void 0 ? [] : _ref$componentsArray,
-      buttonType = _ref.buttonType,
-      onClick = _ref.onClick;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "global-styles " + buttonType,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        className: "close-button",
-        onClick: onClick
-      }), componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
-        return component;
-      })]
-    })
-  });
+      buttonType = _ref.buttonType;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "global-styles " + buttonType
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "close-button"
+  }), componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
+    return component;
+  })));
 };
 
 exports.GenericModal = GenericModal;

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

@@ -17,6 +17,6 @@ var _genericModalClose = _interopRequireDefault(require("../../../assets/images/
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  top: 0;\n  left: 0;\n  z-index: 100;\n\n  h2 {\n    overflow: initial;\n  }\n\n  .global-styles {\n    background-color: ", ";\n    height: auto;\n    width: auto;\n    position: relative;\n    border-radius: 15px;\n    padding: 40px;\n    text-align: center;\n    .close-button {\n      background-image: url(", ");\n      background-color: transparent;\n      width: 14px;\n      height: 14px;\n      cursor: pointer;\n      border: none;\n      position: absolute;\n      right: 20px;\n      top: 20px;\n    }\n    .general-white-button {\n      width: 160px;\n      height: 40px;\n      color: ", ";\n      border: 1px solid ", ";\n      background-color: transparent;\n      & + * {\n        margin-left: 45px;\n        height: 40px;\n        width: 161px;\n      }\n    }\n\n    &.log-out {\n      padding-bottom: 60px;\n      img {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .with-bold-text {\n        font-size: 24px;\n        & + * {\n          margin-top: 20px;\n        }\n      }\n    }\n\n    &.delete-product {\n      img {\n        height: 50px;\n        width: 56px;\n        & + * {\n          margin-top: 30px;\n        }\n      }\n      .product-name-header,\n      .retailer-name-header {\n        & + * {\n          margin-top: 30px;\n        }\n      }\n    }\n\n    &.product-edition {\n      padding-top: 50px;\n      .product-name-header {\n        & + * {\n          margin-top: 25px;\n        }\n      }\n    }\n\n    &.send-invitation {\n      width: 604px;\n      img {\n        & + * {\n          margin-top: 40px;\n        }\n      }\n      p {\n        font-family: ", ";\n        font-style: normal;\n        font-size: 24px;\n        color: ", ";\n        line-height: 28px;\n        span {\n          font-family: ", ";\n        }\n      }\n    }\n\n    &.upload-image {\n      width: 430px;\n      padding: 50px;\n      img {\n        & + * {\n          margin-top: 33px;\n        }\n      }\n      .input-name-header {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .list-container {\n        & + .general-button-default {\n          margin-top: 40px;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .global-styles {\n    background-color: ", ";\n    height: auto;\n    width: auto;\n    position: relative;\n    border-radius: 15px;\n    padding: 40px;\n    text-align: center;\n    .close-button {\n      background-image: url(", ");\n      background-color: transparent;\n      width: 14px;\n      height: 14px;\n      cursor: pointer;\n      border: none;\n      position: absolute;\n      right: 20px;\n      top: 20px;\n    }\n    .general-white-button {\n      width: 160px;\n      height: 40px;\n      color: ", ";\n      border: 1px solid ", ";\n      background-color: transparent;\n      & + * {\n        margin-left: 45px;\n        height: 40px;\n        width: 161px;\n      }\n    }\n\n    &.log-out {\n      padding-bottom: 60px;\n      img {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .with-bold-text {\n        font-size: 24px;\n        & + * {\n          margin-top: 20px;\n        }\n      }\n    }\n\n    &.delete-product {\n      img {\n        height: 50px;\n        width: 56px;\n        & + * {\n          margin-top: 30px;\n        }\n      }\n      .product-name-header {\n        & + * {\n          margin-bottom: 30px;\n        }\n      }\n    }\n\n    &.product-edition {\n      padding-top: 50px;\n      .product-name-header {\n        & + * {\n          margin-top: 25px;\n        }\n      }\n    }\n\n    &.send-invitation {\n      width: 604px;\n      img {\n        & + * {\n          margin-top: 40px;\n        }\n      }\n      p {\n        font-family: ", ";\n        font-style: normal;\n        font-size: 24px;\n        color: ", ";\n        line-height: 28px;\n        span {\n          font-family: ", ";\n        }\n      }\n    }\n\n    &.upload-image {\n      width: 430px;\n      padding: 50px;\n      img {\n        & + * {\n          margin-top: 33px;\n        }\n      }\n      .input-name-header {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .list-container {\n        & + .general-button-default {\n          margin-top: 40px;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
 
 exports.Container = Container;

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

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PaymentMetodhDefault = exports.LoginPanelDefault = exports.GradientPanelDefault = exports.FullPlanDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _index2 = require("../../atoms/ScreenHeader/index");
@@ -31,8 +27,6 @@ var _AtomList = require("../AtomList");
 
 var _Fullplan = require("../../organisms/Fullplan");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/atoms/GradientPanel",
   component: _index.GradientPanel
@@ -40,122 +34,123 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GradientPanel, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.GradientPanel, args);
 };
 
 var GradientPanelDefault = Template.bind({});
 exports.GradientPanelDefault = GradientPanelDefault;
 GradientPanelDefault.args = {
-  componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
+  componentsArray: [/*#__PURE__*/React.createElement(_index2.ScreenHeader, {
     fontFamily: _variables.FontFamily.Raleway_600,
     color: _variables.GlobalColors.white,
-    text: "Cadena"
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AtomList.AtomList, {
-    content: ["texto de prueba", "Atomlist"]
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.CustomerTypeImages, {}, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-    children: "Elige esta opci\xF3n si eres una Cadena Retailer."
-  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
+    text: "Cadena",
+    key: "1"
+  }), /*#__PURE__*/React.createElement(_AtomList.AtomList, {
+    content: ["texto de prueba", "Atomlist"],
+    key: "2"
+  }), /*#__PURE__*/React.createElement(_index3.CustomerTypeImages, {
+    key: "3"
+  }), /*#__PURE__*/React.createElement("p", {
+    key: "4"
+  }, "Elige esta opci\xF3n si eres una Cadena Retailer."), /*#__PURE__*/React.createElement(_index4.Button, {
     buttonType: "general-white-button",
-    label: "Seleccionar"
-  }, "5")],
+    label: "Seleccionar",
+    key: "5"
+  })],
   panelType: "home-panel"
 };
 var LoginPanelDefault = Template.bind({});
 exports.LoginPanelDefault = LoginPanelDefault;
 LoginPanelDefault.args = {
   panelColor: _variables.GlobalColors.white,
-  componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  componentsArray: [/*#__PURE__*/React.createElement(_index5.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
     className: "credenciales",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
-      fontFamily: _variables.FontFamily.AvenirNext,
-      color: _variables.GlobalColors.s5,
-      text: "Ingresa tus credenciales"
-    })
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Ingresa tus credenciales"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "user",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-      inputType: "text",
-      label: "Nombre de usuario",
-      inputPlaceHolder: "username@contentoh.com"
-    })
-  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "3"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Nombre de usuario",
+    inputPlaceHolder: "username@contentoh.com"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "password",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-      inputType: "text",
-      label: "Contraseña",
-      inputPlaceHolder: "Escribe tu contraseña"
-    })
-  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Contraseña",
+    inputPlaceHolder: "Escribe tu contraseña"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "select",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.CheckBox, {
-      label: "Mantener sesión activada",
-      id: "chk-default",
-      className: "active-left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "active-right",
-      children: "Olvide mi contrase\xF1a"
-    })]
-  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "5"
+  }, /*#__PURE__*/React.createElement(_index6.CheckBox, {
+    label: "Mantener sesión activada",
+    id: "chk-default",
+    className: "active-left"
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "active-right"
+  }, "Olvide mi contrase\xF1a")), /*#__PURE__*/React.createElement("div", {
     className: "button-right",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
-      buttonType: "general-default-button",
-      label: "Iniciar sesión"
-    })
-  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "6"
+  }, /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-default-button",
+    label: "Iniciar sesión"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "new-login",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      className: "pre-registro",
-      children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: " Reg\xEDstrate"
-      })]
-    })
-  }, "7")],
+    key: "7"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "pre-registro"
+  }, "\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/React.createElement("span", null, " Reg\xEDstrate")))],
   panelType: "home-login"
 };
 var PaymentMetodhDefault = Template.bind({});
 exports.PaymentMetodhDefault = PaymentMetodhDefault;
 PaymentMetodhDefault.args = {
   panelColor: _variables.GlobalColors.white,
-  componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  componentsArray: [/*#__PURE__*/React.createElement("div", {
     className: "arrowimage",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
-      buttonType: "general-arrow-button"
-    })
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "1"
+  }, /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-arrow-button"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "plan",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
-      fontFamily: _variables.FontFamily.AvenirNext,
-      color: _variables.GlobalColors.s5,
-      text: "Prueba de 7 días"
-    })
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Prueba de 7 días"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "general-text",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "Para continuar te solicitamos el m\xE9todo de pago. Tienes un plazo de 7 d\xEDas para crear tus productos con base en el plan elegido."
-    })
-  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "3"
+  }, /*#__PURE__*/React.createElement("p", null, "Para continuar te solicitamos el m\xE9todo de pago. Tienes un plazo de 7 d\xEDas para crear tus productos con base en el plan elegido.")), /*#__PURE__*/React.createElement("div", {
     className: "payment-register",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PayMethod.PayMethod, {})
-  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_PayMethod.PayMethod, null)), /*#__PURE__*/React.createElement("div", {
     className: "button-continuar",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
-      buttonType: "general-default-button",
-      label: "Continuar"
-    })
-  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "5"
+  }, /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-default-button",
+    label: "Continuar"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "continue",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "free",
-      children: "Continuar de forma gratuita"
-    })
-  }, "6")],
+    key: "6"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "free"
+  }, "Continuar de forma gratuita"))],
   panelType: "home-card"
 };
 var FullPlanDefault = Template.bind({});
 exports.FullPlanDefault = FullPlanDefault;
 FullPlanDefault.args = {
   panelColor: _variables.GlobalColors.white,
-  componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Fullplan.FullPlan, {
+  componentsArray: [/*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
+    key: "1",
     title: "Elige el n\xFAmero de proveedores",
     textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el n\xFAmero de proveedores que tiene tu cadena",
     containerData: [{
@@ -171,6 +166,6 @@ FullPlanDefault.args = {
       number: "Ondemand",
       name: "agrega proveedores a tu forma"
     }]
-  }, "1")],
+  })],
   panelType: "home-plan"
 };

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

@@ -7,23 +7,19 @@ exports.GradientPanel = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var GradientPanel = function GradientPanel(_ref) {
   var panelColor = _ref.panelColor,
       _ref$componentsArray = _ref.componentsArray,
       componentsArray = _ref$componentsArray === void 0 ? [] : _ref$componentsArray,
       panelType = _ref.panelType;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     panelColor: panelColor,
-    className: panelType,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "main-container",
-      children: componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
-        return component;
-      })
-    })
-  });
+    className: panelType
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "main-container"
+  }, componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
+    return component;
+  })));
 };
 
 exports.GradientPanel = GradientPanel;

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

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

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

@@ -11,8 +11,6 @@ var _reactChartjs = require("react-chartjs-2");
 
 require("chart.js/auto");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var Graphic = function Graphic(_ref) {
   var data = _ref.data;
   var options = {
@@ -22,13 +20,11 @@ var Graphic = function Graphic(_ref) {
       }
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Chart, {
-      type: "doughnut",
-      data: data,
-      options: options
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_reactChartjs.Chart, {
+    type: "doughnut",
+    data: data,
+    options: options
+  }));
 };
 
 exports.Graphic = Graphic;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ListCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/ListCommercialRetailers",
+  component: _index.ListCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ListCommercialRetailers, args);
+};
+
+var ListCommercialRetailersDefault = Template.bind({});
+exports.ListCommercialRetailersDefault = ListCommercialRetailersDefault;
+ListCommercialRetailersDefault.args = {
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListCommercialRetailers = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var _react = require("react");
+
+var _index = require("../CheckBox/index");
+
+var ListCommercialRetailers = function ListCommercialRetailers(_ref) {
+  var retailersAvailable = _ref.retailersAvailable;
+
+  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(".menu-list-commercial-retailers") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-list-commercial-retailers")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "list-commercial-retailers"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _listCommercialRetailers.default,
+    alt: "button up icon"
+  }), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-list-commercial-retailers"
+  }, retailersAvailable === null || retailersAvailable === void 0 ? void 0 : retailersAvailable.map(function (component, index) {
+    return /*#__PURE__*/React.createElement(_index.CheckBox, {
+      id: component.id,
+      label: component.name,
+      key: index + "-" + component.id
+    });
+  })));
+};
+
+exports.ListCommercialRetailers = ListCommercialRetailers;

package/dist/components/atoms/ListCommercialRetailers/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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  height: 30px;\n  .menu-list-commercial-retailers {\n    width: 540px;\n    height: auto;\n    border-radius: 7px;\n    background-color: ", ";\n    padding: 14px 14px 8px 20px;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    position: absolute;\n    top: calc(100% + 3px);\n    right: calc(100% - 20px);\n    display: flex;\n    flex-wrap: wrap;\n    z-index: 1;\n    div {\n      & + * {\n        margin-left: 15px;\n      }\n      p {\n        font-size: 11px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2);
+
+exports.Container = Container;

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

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

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

@@ -17,8 +17,6 @@ var _genericModalUp = _interopRequireDefault(require("../../../assets/images/gen
 
 var _react = require("react");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var LoadImageMenu = function LoadImageMenu(_ref) {
   var tipo = _ref.tipo,
       product = _ref.product,
@@ -42,7 +40,7 @@ var LoadImageMenu = function LoadImageMenu(_ref) {
       document.addEventListener("click", closeMenu, false);
     }
   }, [showMenu]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     onClick: function onClick(e) {
       setShowMenu(!showMenu);
 
@@ -50,36 +48,27 @@ var LoadImageMenu = function LoadImageMenu(_ref) {
         document.removeEventListener("click", closeMenu, false);
       }
     },
-    className: "list-container " + (showMenu && "show-menu"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      className: "tipo",
-      children: [tipo, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: "*"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      className: "products",
-      children: [product, /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: showMenu ? _genericModalUp.default : _genericModalDown.default,
-        alt: "Check icon"
-      })]
-    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      id: id,
-      className: "upload-image-menu",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        className: "overall-list",
-        children: content === null || content === void 0 ? void 0 : content.map(function (item, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            onClick: function onClick() {
-              console.log(item.label);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-              children: item.label
-            })
-          }, index + item.label);
-        })
-      })
-    })]
-  });
+    className: "list-container " + (showMenu && "show-menu")
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "tipo"
+  }, tipo, /*#__PURE__*/React.createElement("span", null, "*")), /*#__PURE__*/React.createElement("p", {
+    className: "products"
+  }, product, /*#__PURE__*/React.createElement("img", {
+    src: showMenu ? _genericModalUp.default : _genericModalDown.default,
+    alt: "Check icon"
+  })), showMenu && /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "upload-image-menu"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "overall-list"
+  }, content === null || content === void 0 ? void 0 : content.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index + item.label,
+      onClick: function onClick() {
+        console.log(item.label);
+      }
+    }, /*#__PURE__*/React.createElement("p", null, item.label));
+  }))));
 };
 
 exports.LoadImageMenu = LoadImageMenu;

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

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