contentoh-components-library 10.0.0 → 13.0.0

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

@@ -23,6 +23,8 @@ var _react = require("react");
 
 var _Select = _interopRequireDefault(require("../../atoms/Select"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var GalleryElement = function GalleryElement(_ref) {
   var _ref$validation = _ref.validation,
       validation = _ref$validation === void 0 ? "null-button" : _ref$validation,
@@ -60,61 +62,73 @@ var GalleryElement = function GalleryElement(_ref) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: gridLayout ? "grid-gallery" : "row-gallery"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "buttons-container"
-  }, /*#__PURE__*/React.createElement(_CheckBox.CheckBox, {
-    id: id,
-    label: label
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "image-container"
-  }, /*#__PURE__*/React.createElement(_ProductImage.ProductImage, {
-    img: image === null || image === void 0 ? void 0 : image.src,
-    altText: image === null || image === void 0 ? void 0 : image.altText,
-    imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "information-container"
-  }, /*#__PURE__*/React.createElement("p", null, image === null || image === void 0 ? void 0 : image.name), !gridLayout && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, image.width, "x", image.height), /*#__PURE__*/React.createElement("p", null, image.ext), /*#__PURE__*/React.createElement(_Select.default, {
-    width: "100%",
-    placeholder: "Tipo de toma",
-    options: imageInputs,
-    valueSelected: image.image_id,
-    onChange: function onChange(e) {
-      changeImage({
-        action: "changeImageInfo",
-        attribute: "image_id",
-        value: +e.target.value,
-        index: index
-      });
-    }
-  }), /*#__PURE__*/React.createElement(_Select.default, {
-    width: "100%",
-    placeholder: "Tipo de imagen",
-    options: imageType,
-    valueSelected: image.image_type,
-    onChange: function onChange(e) {
-      changeImage({
-        action: "changeImageInfo",
-        attribute: "image_type",
-        value: +e.target.value,
-        index: index
-      });
-    }
-  }), /*#__PURE__*/React.createElement(_Select.default, {
-    width: "100%",
-    placeholder: "Tipo de empaque",
-    options: imagePackagingType,
-    valueSelected: image.packing_type,
-    onChange: function onChange(e) {
-      changeImage({
-        action: "changeImageInfo",
-        attribute: "packing_type",
-        value: +e.target.value,
-        index: index
-      });
-    }
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: gridLayout ? "grid-gallery" : "row-gallery",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: id,
+        label: label
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "image-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
+        img: image === null || image === void 0 ? void 0 : image.src,
+        altText: image === null || image === void 0 ? void 0 : image.altText,
+        imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "information-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: image === null || image === void 0 ? void 0 : image.name
+        }), !gridLayout && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: [image.width, "x", image.height]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: image.ext
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            width: "100%",
+            placeholder: "Tipo de toma",
+            options: imageInputs,
+            valueSelected: image.image_id,
+            onChange: function onChange(e) {
+              changeImage({
+                action: "changeImageInfo",
+                attribute: "image_id",
+                value: +e.target.value,
+                index: index
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            width: "100%",
+            placeholder: "Tipo de imagen",
+            options: imageType,
+            valueSelected: image.image_type,
+            onChange: function onChange(e) {
+              changeImage({
+                action: "changeImageInfo",
+                attribute: "image_type",
+                value: +e.target.value,
+                index: index
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            width: "100%",
+            placeholder: "Tipo de empaque",
+            options: imagePackagingType,
+            valueSelected: image.packing_type,
+            onChange: function onChange(e) {
+              changeImage({
+                action: "changeImageInfo",
+                attribute: "packing_type",
+                value: +e.target.value,
+                index: index
+              });
+            }
+          })]
+        })]
+      })]
+    })]
+  });
 };
 
 exports.GalleryElement = GalleryElement;

package/dist/components/molecules/GalleryHeader/GalleryHeader.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.GalleryHeaderDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/GalleryHeader",
   component: _.GalleryHeader
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.GalleryHeader, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.GalleryHeader, (0, _objectSpread2.default)({}, args));
 };
 
 var GalleryHeaderDefault = Template.bind({});

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

@@ -9,22 +9,35 @@ var _styles = require("./styles");
 
 var _CheckBox = require("../../atoms/CheckBox");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var GalleryHeader = function GalleryHeader() {
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_CheckBox.CheckBox, null)), /*#__PURE__*/React.createElement("p", {
-    className: "image-header"
-  }, "Image"), /*#__PURE__*/React.createElement("p", {
-    className: "image-name"
-  }, "Nombre"), /*#__PURE__*/React.createElement("p", {
-    className: "image-size"
-  }, "Tama\xF1o"), /*#__PURE__*/React.createElement("p", {
-    className: "image-format"
-  }, "Formato"), /*#__PURE__*/React.createElement("p", {
-    className: ""
-  }, "Tipo de toma"), /*#__PURE__*/React.createElement("p", {
-    className: ""
-  }, "Tipo de imagen"), /*#__PURE__*/React.createElement("p", {
-    className: ""
-  }, "Tipo de empaque"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "image-header",
+      children: "Image"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "image-name",
+      children: "Nombre"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "image-size",
+      children: "Tama\xF1o"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "image-format",
+      children: "Formato"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "",
+      children: "Tipo de toma"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "",
+      children: "Tipo de imagen"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "",
+      children: "Tipo de empaque"
+    })]
+  });
 };
 
 exports.GalleryHeader = GalleryHeader;

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

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

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