contentoh-components-library 19.0.0 → 20.0.18

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

@@ -9,7 +9,7 @@ var _styles = require("./styles");
 
 var _index = require("../../atoms/ProductImage/index");
 
-var _jsxRuntime = require("react/jsx-runtime");
+var _data = require("../../../global-files/data");
 
 var ImageSelector = function ImageSelector(_ref) {
   var _images$values;
@@ -18,19 +18,19 @@ var ImageSelector = function ImageSelector(_ref) {
       images = _ref$images === void 0 ? [] : _ref$images,
       setActiveImage = _ref.setActiveImage,
       modalSelector = _ref.modalSelector;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: modalSelector && "modal-image-selector",
-    children: images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
-        img: image.src,
-        altText: image.altText,
-        imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
-        onClick: function onClick() {
-          return setActiveImage(index);
-        }
-      }, index);
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: modalSelector && "modal-image-selector"
+  }, images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
+    return /*#__PURE__*/React.createElement(_index.ProductImage, {
+      key: index,
+      img: (0, _data.getImage)(image, 85, 60).src,
+      altText: image.altText,
+      imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
+      onClick: function onClick() {
+        return setActiveImage((0, _data.getImage)(image), 350, 295);
+      }
+    });
+  }));
 };
 
 exports.ImageSelector = ImageSelector;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LoginPasswordStrengthDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/LoginPasswordStrength",
+  component: _index.LoginPasswordStrength
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.LoginPasswordStrength, args);
+};
+
+var LoginPasswordStrengthDefault = Template.bind({});
+exports.LoginPasswordStrengthDefault = LoginPasswordStrengthDefault;
+LoginPasswordStrengthDefault.args = {};

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoginPasswordStrength = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _TagAndInput = require("../TagAndInput");
+
+var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
+  var emptyPassword = _ref.emptyPassword,
+      emptyConfirmPassword = _ref.emptyConfirmPassword,
+      matchPasswords = _ref.matchPasswords;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      passwordStrength = _useState2[0],
+      setPasswordStrength = _useState2[1];
+
+  var upperCaseLetters = /[A-Z]/g;
+  var numbers = /[0-9]/g;
+  var specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+  (0, _react.useEffect)(function () {
+    var inputValue = document.getElementById("newPasswordInput");
+    inputValue.addEventListener("input", function (e) {
+      updateInfo(e, e.target.value);
+    }, false);
+  }, []);
+
+  var updateInfo = function updateInfo(e, newValue) {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+
+        if (newValue.length >= 8) {
+          setPasswordStrength(function (passwordStrength) {
+            return passwordStrength + 1;
+          });
+        } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+
+
+        newValue.match(upperCaseLetters) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        newValue.match(numbers) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        newValue.match(specialChar) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        break;
+
+      case "confirmPasswordInput":
+        break;
+
+      default:
+        return;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "user",
+    key: "3"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "password",
+    inputId: "newPasswordInput",
+    label: "Ingrese su nueva contraseña"
+  }), emptyPassword && /*#__PURE__*/React.createElement("label", null, "La contrase\xF1a debe ser minimo de 8 caracteres")), /*#__PURE__*/React.createElement("div", {
+    className: "divPasswordStrength",
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_styles.ItemPasswordStrength, {
+    paso: 1
+  }, /*#__PURE__*/React.createElement(_styles.Password, {
+    level: 1,
+    passwordStrength: passwordStrength
+  }), passwordStrength === 1 && /*#__PURE__*/React.createElement("p", null, "Baja")), /*#__PURE__*/React.createElement(_styles.ItemPasswordStrength, {
+    paso: 2
+  }, /*#__PURE__*/React.createElement(_styles.Password, {
+    level: 2,
+    passwordStrength: passwordStrength
+  }), passwordStrength === 2 && /*#__PURE__*/React.createElement("p", null, "Regular")), /*#__PURE__*/React.createElement(_styles.ItemPasswordStrength, {
+    paso: 3
+  }, /*#__PURE__*/React.createElement(_styles.Password, {
+    level: 3,
+    passwordStrength: passwordStrength
+  }), passwordStrength === 3 && /*#__PURE__*/React.createElement("p", null, "Segura")), /*#__PURE__*/React.createElement(_styles.ItemPasswordStrength, {
+    paso: 4
+  }, /*#__PURE__*/React.createElement(_styles.Password, {
+    level: 4,
+    passwordStrength: passwordStrength
+  }), passwordStrength === 4 && /*#__PURE__*/React.createElement("p", null, "Fuerte"))), /*#__PURE__*/React.createElement("div", {
+    className: "user",
+    key: "5"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "password",
+    inputId: "confirmPasswordInput",
+    label: "Confirme la nueva contraseña"
+  }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/React.createElement("label", null, "Confirme la contrase\xF1a"), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/React.createElement("label", null, "La contrase\xF1a no coincide")));
+};
+
+exports.LoginPasswordStrength = LoginPasswordStrength;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Password = exports.ItemPasswordStrength = 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, _templateObject3;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  .divPasswordStrength {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 30px;\n    & + * {\n      margin-top: 40px;\n    }\n  }\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n"])), _variables.FontFamily.Raleway_700);
+
+exports.Container = Container;
+
+var Password = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 8px;\n  width: 100%;\n  background-color: ", ";\n"])), function (props) {
+  switch (props.passwordStrength) {
+    case 0:
+      return "#F0F0F0";
+
+    case 1:
+      if (props.level === 1) {
+        return "#E67432";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 2:
+      if (props.level <= 2) {
+        return "#EDD34D";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 3:
+      if (props.level <= 3) {
+        return "#71DE56";
+      } else {
+        return "#F0F0F0";
+      }
+
+    case 4:
+      if (props.level <= 4) {
+        return "#71DE56";
+      } else {
+        return "#F0F0F0";
+      }
+
+    default:
+      return;
+  }
+});
+
+exports.Password = Password;
+
+var ItemPasswordStrength = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24%;\n  position: relative;\n  p {\n    margin-top: 1.5%;\n    font-weight: 700;\n    display: flex;\n    justify-content: flex-end;\n    font-size: 11px;\n    position: absolute;\n    right: 0;\n    top: 100%;\n    color: ", ";\n  }\n"])), function (props) {
+  switch (props.paso) {
+    case 1:
+      return "#E67432";
+
+    case 2:
+      return "#EDD34D";
+
+    case 3:
+      return "#71DE56";
+
+    case 4:
+      return "#71DE56";
+  }
+});
+
+exports.ItemPasswordStrength = ItemPasswordStrength;

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

@@ -1,31 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ParentComponentDefault = 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/molecules/ParentComponent",
   component: _index.ParentComponent,
   decorators: [function (Story) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
-    });
+    return /*#__PURE__*/React.createElement(_index.ParentComponent, null, /*#__PURE__*/React.createElement(Story, null));
   }]
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.ParentComponent, args);
 };
 
 var ParentComponentDefault = Template.bind({});

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

@@ -17,8 +17,6 @@ var _react = require("react");
 
 var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ParentComponent = function ParentComponent() {
   var _useState = (0, _react.useState)(true),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -59,13 +57,11 @@ var ParentComponent = function ParentComponent() {
       newNotification: true
     }]
   }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: showSidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SidebarNotification, {
-      array: array,
-      showSidebar: showSidebar,
-      setShowSidebar: setShowSidebar
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, showSidebar && /*#__PURE__*/React.createElement(_index.SidebarNotification, {
+    array: array,
+    showSidebar: showSidebar,
+    setShowSidebar: setShowSidebar
+  }));
 };
 
 exports.ParentComponent = ParentComponent;

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

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

@@ -21,46 +21,41 @@ var _TagAndInput = require("../TagAndInput");
 
 var _masterCardIcon = _interopRequireDefault(require("../../../assets/images/card/masterCardIcon.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var PayMethod = function PayMethod(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "master",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-        fontFamily: _variables.FontFamily.AvenirNext,
-        color: _variables.GlobalColors.s5,
-        headerType: "input-name-header",
-        text: "Agrega tarjeta de credito"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
-        cardIcon: _masterCardIcon.default,
-        altText: "master-card-icon"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "card-number",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Número de tarjeta de credito",
-        inputPlaceHolder: "1234 5678 1234 5678"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "card-data",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Nombre del titular",
-        inputPlaceHolder: "Bart Simpson"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Expira",
-        inputPlaceHolder: "22/27"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "CVV",
-        inputPlaceHolder: "***"
-      })]
-    })]
-  }, "pay");
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "pay"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "master"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    headerType: "input-name-header",
+    text: "Agrega tarjeta de credito"
+  }), /*#__PURE__*/React.createElement(_Card.Card, {
+    cardIcon: _masterCardIcon.default,
+    altText: "master-card-icon"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-number"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Número de tarjeta de credito",
+    inputPlaceHolder: "1234 5678 1234 5678"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-data"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Nombre del titular",
+    inputPlaceHolder: "Bart Simpson"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Expira",
+    inputPlaceHolder: "22/27"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "CVV",
+    inputPlaceHolder: "***"
+  })));
 };
 
 exports.PayMethod = PayMethod;

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

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

@@ -9,8 +9,6 @@ var _styles = require("./styles");
 
 var _index = require("../../atoms/GeneralTextBox/index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var PlanSelection = function PlanSelection(_ref) {
   var planSelection = _ref.planSelection,
       setbuttonActive = _ref.setbuttonActive;
@@ -24,18 +22,17 @@ var PlanSelection = function PlanSelection(_ref) {
     setbuttonActive(true);
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralTextBox, {
-        className: "button-plan",
-        onClick: function onClick(e) {
-          return setActivePlan(e);
-        },
-        number: plan === null || plan === void 0 ? void 0 : plan.number,
-        name: plan === null || plan === void 0 ? void 0 : plan.name
-      }, index);
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
+    return /*#__PURE__*/React.createElement(_index.GeneralTextBox, {
+      className: "button-plan",
+      onClick: function onClick(e) {
+        return setActivePlan(e);
+      },
+      key: index,
+      number: plan === null || plan === void 0 ? void 0 : plan.number,
+      name: plan === null || plan === void 0 ? void 0 : plan.name
+    });
+  }));
 };
 
 exports.PlanSelection = PlanSelection;

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

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

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

@@ -15,30 +15,27 @@ var _index3 = require("../../atoms/ProgressBar/index");
 
 var _index4 = require("../../atoms/PriorityFlag/index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ProductNameHeader = function ProductNameHeader(_ref) {
   var productName = _ref.productName,
       statusType = _ref.statusType,
       percent = _ref.percent,
+      backgroundColor = _ref.backgroundColor,
       priority = _ref.priority,
       date = _ref.date;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-      headerType: "product-name-header",
-      text: productName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
-      statusType: statusType
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ProgressBar, {
-      percent: percent,
-      progressBarType: statusType
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.PriorityFlag, {
-      priority: priority
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
-      headerType: "date-header",
-      text: date
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "product-name-header",
+    text: productName
+  }), /*#__PURE__*/React.createElement(_index2.StatusTag, {
+    statusType: statusType
+  }), /*#__PURE__*/React.createElement(_index3.ProgressBar, {
+    percent: percent,
+    backgroundColor: backgroundColor
+  }), /*#__PURE__*/React.createElement(_index4.PriorityFlag, {
+    priority: priority
+  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "date-header",
+    text: date
+  }));
 };
 
 exports.ProductNameHeader = ProductNameHeader;

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

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

@@ -19,8 +19,6 @@ var _MenuNotification = require("../../atoms/MenuNotification");
 
 var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ProductNotification = function ProductNotification(_ref) {
   var notification = _ref.notification;
 
@@ -51,7 +49,7 @@ var ProductNotification = function ProductNotification(_ref) {
     notificationType: "productAssignation",
     label: "Agregaron comentario en producto 123"
   }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     onClick: function onClick(e) {
       e.stopPropagation();
       setShowMenu(!showMenu);
@@ -60,15 +58,14 @@ var ProductNotification = function ProductNotification(_ref) {
         document.removeEventListener("click", closeMenu, false);
       }
     },
-    className: notification && "new-notification",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
-      image: _productNotification.default,
-      imageType: "big-image",
-      altText: "Notification Picture"
-    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuNotification.MenuNotification, {
-      content: content
-    })]
-  });
+    className: notification && "new-notification"
+  }, /*#__PURE__*/React.createElement(_index.Avatar, {
+    image: _productNotification.default,
+    imageType: "big-image",
+    altText: "Notification Picture"
+  }), showMenu && /*#__PURE__*/React.createElement(_MenuNotification.MenuNotification, {
+    content: content
+  }));
 };
 
 exports.ProductNotification = ProductNotification;