contentoh-components-library 21.0.20 → 21.0.21

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

@@ -13,19 +13,22 @@ var _index2 = require("../../atoms/GeneralButton/index");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var HeaderTop = function HeaderTop(_ref) {
   var setHeaderTop = _ref.setHeaderTop;
   var headerTop = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    ref: headerTop
-  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    text: "Edici\xF3n de producto"
-  }), /*#__PURE__*/React.createElement(_index2.Button, {
-    buttonType: "close-button"
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    ref: headerTop,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      text: "Edici\xF3n de producto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
+      buttonType: "close-button"
+    })]
+  });
 };
 
 exports.HeaderTop = HeaderTop;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ImageSelectorlDefault = 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/ImageSelectorl",
   component: _index.ImageSelector,
@@ -21,7 +27,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ImageSelector, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageSelector, (0, _objectSpread2.default)({}, args));
 };
 
 var ImageSelectorlDefault = Template.bind({});

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

@@ -11,6 +11,8 @@ var _index = require("../../atoms/ProductImage/index");
 
 var _data = require("../../../global-files/data");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ImageSelector = function ImageSelector(_ref) {
   var _images$values;
 
@@ -18,19 +20,19 @@ var ImageSelector = function ImageSelector(_ref) {
       images = _ref$images === void 0 ? [] : _ref$images,
       setActiveImage = _ref.setActiveImage,
       modalSelector = _ref.modalSelector;
-  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);
-      }
-    });
-  }));
+  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: (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);
+        }
+      }, index);
+    })
+  });
 };
 
 exports.ImageSelector = ImageSelector;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.LoginPasswordStrengthDefault = 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/LoginPasswordStrength",
   component: _index.LoginPasswordStrength
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.LoginPasswordStrength, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LoginPasswordStrength, (0, _objectSpread2.default)({}, args));
 };
 
 var LoginPasswordStrengthDefault = Template.bind({});

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

@@ -15,6 +15,8 @@ var _react = require("react");
 
 var _TagAndInput = require("../TagAndInput");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
   var emptyPassword = _ref.emptyPassword,
       emptyConfirmPassword = _ref.emptyConfirmPassword,
@@ -66,44 +68,64 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
     }
   };
 
-  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")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "newPasswordInput",
+        label: "Ingrese su nueva contraseña"
+      }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a debe ser minimo de 8 caracteres"
+      })]
+    }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "divPasswordStrength",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 1,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Baja"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 2,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Regular"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 3,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 3,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Segura"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
+        paso: 4,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Password, {
+          level: 4,
+          passwordStrength: passwordStrength
+        }), passwordStrength === 4 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Fuerte"
+        })]
+      })]
+    }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "confirmPasswordInput",
+        label: "Confirme la nueva contraseña"
+      }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "Confirme la contrase\xF1a"
+      }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a no coincide"
+      })]
+    }, "5")]
+  });
 };
 
 exports.LoginPasswordStrength = LoginPasswordStrength;

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

@@ -1,23 +1,31 @@
 "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__*/React.createElement(_index.ParentComponent, null, /*#__PURE__*/React.createElement(Story, null));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
+    });
   }]
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ParentComponent, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ParentComponent, (0, _objectSpread2.default)({}, args));
 };
 
 var ParentComponentDefault = Template.bind({});

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

@@ -17,6 +17,8 @@ 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),
@@ -57,11 +59,13 @@ var ParentComponent = function ParentComponent() {
       newNotification: true
     }]
   }];
-  return /*#__PURE__*/React.createElement(_styles.Container, null, showSidebar && /*#__PURE__*/React.createElement(_index.SidebarNotification, {
-    array: array,
-    showSidebar: showSidebar,
-    setShowSidebar: setShowSidebar
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: showSidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SidebarNotification, {
+      array: array,
+      showSidebar: showSidebar,
+      setShowSidebar: setShowSidebar
+    })
+  });
 };
 
 exports.ParentComponent = ParentComponent;

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

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

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

@@ -21,41 +21,46 @@ 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__*/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: "***"
-  })));
+  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");
 };
 
 exports.PayMethod = PayMethod;

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

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

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

@@ -9,6 +9,8 @@ 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;
@@ -22,17 +24,18 @@ var PlanSelection = function PlanSelection(_ref) {
     setbuttonActive(true);
   };
 
-  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
-    });
-  }));
+  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);
+    })
+  });
 };
 
 exports.PlanSelection = PlanSelection;

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

@@ -1,14 +1,20 @@
 "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,
@@ -44,7 +50,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ProductNameHeader, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeader, (0, _objectSpread2.default)({}, args));
 };
 
 var ProductNameHeaderDefault = Template.bind({});

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

@@ -15,6 +15,8 @@ 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,
@@ -22,20 +24,22 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       backgroundColor = _ref.backgroundColor,
       priority = _ref.priority,
       date = _ref.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
-  }));
+  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,
+      backgroundColor: backgroundColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.PriorityFlag, {
+      priority: priority
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      headerType: "date-header",
+      text: date
+    })]
+  });
 };
 
 exports.ProductNameHeader = ProductNameHeader;

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

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

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

@@ -19,6 +19,8 @@ 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;
 
@@ -49,7 +51,7 @@ var ProductNotification = function ProductNotification(_ref) {
     notificationType: "productAssignation",
     label: "Agregaron comentario en producto 123"
   }];
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick(e) {
       e.stopPropagation();
       setShowMenu(!showMenu);
@@ -58,14 +60,15 @@ var ProductNotification = function ProductNotification(_ref) {
         document.removeEventListener("click", closeMenu, false);
       }
     },
-    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
-  }));
+    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
+    })]
+  });
 };
 
 exports.ProductNotification = ProductNotification;