contentoh-components-library 18.0.0 → 20.0.17

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({});

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

@@ -11,15 +11,13 @@ var _styles = require("./styles");
 
 var _logoLogin = _interopRequireDefault(require("../../../assets/images/logo/logoLogin.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var LogoImage = function LogoImage() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: _logoLogin.default,
-      alt: "logo"
-    })
-  }, "logo");
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "logo"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _logoLogin.default,
+    alt: "logo"
+  }));
 };
 
 exports.LogoImage = LogoImage;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/MenuCommercialRetailers",
+  component: _index.MenuCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
+};
+
+var MenuCommercialRetailersDefault = Template.bind({});
+exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
+MenuCommercialRetailersDefault.args = {
+  editType: "3",
+  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/MenuCommercialRetailers/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuCommercialRetailers = void 0;
+
+var _styles = require("./styles");
+
+var _StatusTag = require("../StatusTag");
+
+var _ListCommercialRetailers = require("../ListCommercialRetailers");
+
+var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
+  var editType = _ref.editType,
+      retailersAvailable = _ref.retailersAvailable;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
+    editType: editType,
+    ovalForm: true
+  }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
+    retailersAvailable: retailersAvailable
+  }));
+};
+
+exports.MenuCommercialRetailers = MenuCommercialRetailers;

package/dist/components/{molecules/RetailerSelector → atoms/MenuCommercialRetailers}/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  position: relative;\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

package/dist/components/atoms/MenuNotification/MenuNotification.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.MenuNotificationDefault = 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/MenuNotification",
   component: _index.MenuNotification
@@ -20,7 +14,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MenuNotification, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.MenuNotification, args);
 };
 
 var MenuNotificationDefault = Template.bind({});

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

@@ -13,29 +13,23 @@ var _menuNotificationComment = _interopRequireDefault(require("../../../assets/i
 
 var _menuNotificationProduct = _interopRequireDefault(require("../../../assets/images/menuNotification/menuNotificationProduct.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var MenuNotification = function MenuNotification(_ref) {
   var content = _ref.content;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    id: "menu-notification",
-    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.jsxs)("li", {
-          onClick: function onClick() {
-            console.log(item.label);
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: (content === null || content === void 0 ? void 0 : content.notificationType) === "productComment" ? _menuNotificationComment.default : _menuNotificationProduct.default,
-            alt: item.label
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: item.label
-          })]
-        }, index);
-      })
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    id: "menu-notification"
+  }, /*#__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,
+      onClick: function onClick() {
+        console.log(item.label);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: (content === null || content === void 0 ? void 0 : content.notificationType) === "productComment" ? _menuNotificationComment.default : _menuNotificationProduct.default,
+      alt: item.label
+    }), " ", /*#__PURE__*/React.createElement("p", null, item.label));
+  })));
 };
 
 exports.MenuNotification = MenuNotification;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuProductImageDefault = void 0;
+
+var _index = require("./index");
+
+var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
+
+var _default = {
+  title: "Components/atoms/MenuProductImage",
+  component: _index.MenuProductImage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
+};
+
+var MenuProductImageDefault = Template.bind({});
+exports.MenuProductImageDefault = MenuProductImageDefault;
+MenuProductImageDefault.args = {
+  ProductImg: _menuProductImage.default
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuProductImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
+
+var _react = require("react");
+
+var _index = require("../LoadImageMenu/index");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var MenuProductImage = function MenuProductImage(_ref) {
+  var ProductImg = _ref.ProductImg;
+
+  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-upload-product") && 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, {
+    className: "div-upload-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "profile-image",
+    src: ProductImg,
+    alt: "Product Image"
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-upload-product")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "upload-image-button " + (showMenu && "show-menu-upload-image")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
+    alt: "Product Image Button"
+  })), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-upload-product"
+  }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de empaque ",
+    product: "Producto expuesto",
+    content: [{
+      label: "Enbalaje adicional - 0"
+    }, {
+      label: "En paquete - 1"
+    }, {
+      label: "Producto expuesto - 2"
+    }, {
+      label: "Embalaje multiforme - 3"
+    }, {
+      label: "Si no es una imagen / no corresponde - X"
+    }],
+    id: "menu-packaging-type"
+  }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de imagen ",
+    product: "Render",
+    content: [{
+      label: "fotografía del producto"
+    }],
+    id: "menu-image-type"
+  })));
+};
+
+exports.MenuProductImage = MenuProductImage;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  .profile-image {\n    width: 23px;\n    height: 23px;\n    & + * {\n      margin-left: 8px;\n    }\n  }\n  .upload-image-button {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 2px;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    height: 30px;\n    width: 15px;\n    left: 100%;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n    &.show-menu-upload-image {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n  .menu-upload-product {\n    background: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border-radius: 7px;\n    width: 324px;\n    padding: 8px 0px;\n    position: absolute;\n    right: 0%;\n    z-index: 1;\n    top: 30px;\n    button {\n      left: 0%;\n      border-radius: 7px;\n      span,\n      .tipo {\n        color: ", ";\n      }\n      .products {\n        color: ", ";\n      }\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.GlobalColors.s5, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/MenuProfile/MenuProfile.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.MenuProfileDefault = 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/MenuProfile",
   component: _index.MenuProfile
@@ -20,7 +14,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MenuProfile, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.MenuProfile, args);
 };
 
 var MenuProfileDefault = Template.bind({});