contentoh-components-library 8.0.0 → 10.0.1

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

@@ -9,6 +9,8 @@ var _styles = require("./styles");
 
 var _index = require("../../atoms/ProductImage/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ImageSelector = function ImageSelector(_ref) {
   var _images$values;
 
@@ -16,19 +18,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: image.src,
-      altText: image.altText,
-      imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
-      onClick: function onClick() {
-        return setActiveImage(index);
-      }
-    });
-  }));
+  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);
+    })
+  });
 };
 
 exports.ImageSelector = ImageSelector;

package/dist/components/molecules/LoginPasswordStrength/LoginPasswordStrength.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.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
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LoginPasswordStrength, (0, _objectSpread2.default)({}, args));
+};
+
+var LoginPasswordStrengthDefault = Template.bind({});
+exports.LoginPasswordStrengthDefault = LoginPasswordStrengthDefault;
+LoginPasswordStrengthDefault.args = {};

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

@@ -0,0 +1,126 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+
+var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
+  var emptyPassword = _ref.emptyPassword,
+      emptyConfirmPassword = _ref.emptyConfirmPassword,
+      matchPasswords = _ref.matchPasswords,
+      required = _ref.required;
+
+  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;
+
+  var updateInfo = function updateInfo(e) {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+
+        if (e.target.value.length >= 8) {
+          setPasswordStrength(function (passwordStrength) {
+            return passwordStrength + 1;
+          });
+        } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+
+
+        e.target.value.match(upperCaseLetters) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        e.target.value.match(numbers) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        e.target.value.match(specialChar) && setPasswordStrength(function (passwordStrength) {
+          return passwordStrength + 1;
+        });
+        break;
+
+      default:
+        return;
+    }
+  };
+
+  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",
+        isRequired: required,
+        inputOnChange: updateInfo
+      }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: "La contrase\xF1a debe ser minimo de 8 caracteres"
+      })]
+    }), /*#__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"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "password",
+        inputId: "confirmPasswordInput",
+        label: "Confirme la nueva contraseña",
+        isRequired: required
+      }), 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"
+      })]
+    })]
+  });
+};
+
+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  margin-bottom: 15px;\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  & + * {\n    margin-top: 20px;\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/LogoLoading/Loading.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.LogoLoadingDefault = 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/LogoLoading",
+  component: _index.LogoLoading
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoLoading, (0, _objectSpread2.default)({}, args));
+};
+
+var LogoLoadingDefault = Template.bind({});
+exports.LogoLoadingDefault = LogoLoadingDefault;
+LogoLoadingDefault.args = {};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogoLoading = void 0;
+
+var _styles = require("./styles");
+
+var _Loading = require("../../atoms/Loading");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var LogoLoading = function LogoLoading() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {})]
+  });
+};
+
+exports.LogoLoading = LogoLoading;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100vh;\n  width: 50%;\n  padding-top: 25%;\n  .logo {\n    text-align: center;\n    img {\n      width: 65%;\n    }\n  }\n  .loading {\n    height: 10%;\n  }\n"])));
+
+exports.Container = Container;

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