@hhgtech/hhg-components 1.29.44 → 1.29.45

package/build/{index-5cf94c14.js → index-20b11d3c.js}

@@ -1,70 +1,70 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-c2ac4561.js');
-var index_styles = require('./index.styles-e8260d43.js');
-var utils = require('./utils-c6a0ba99.js');
-var index$3 = require('./index-1b816464.js');
-var index$4 = require('./index-f7e4c060.js');
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var index$2 = require('./index-2dd59c7f.js');
+var index_styles = require('./index.styles-3003e63e.js');
+var utils = require('./utils-552ff173.js');
+var index$3 = require('./index-c4e64941.js');
+var index$4 = require('./index-c363f6b0.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-c10c6d1e.js');
-var index$5 = require('./index-c66838fb.js');
-var theme = require('./theme-de064836.js');
+var index$6 = require('./index-599b38dd.js');
+var index$5 = require('./index-56ebc3c0.js');
+var theme = require('./theme-c301ffa8.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
 require('@mantine/dates');
-var index$b = require('./index-ed90d9b2.js');
-var index$j = require('./index-896edc0e.js');
-require('./useMantineLocale-531aaed6.js');
-require('./translationsContext-073aabc8.js');
+var index$b = require('./index-840d7784.js');
+var index$j = require('./index-811930df.js');
+require('./useMantineLocale-71cf4d6c.js');
+require('./translationsContext-59e2a34f.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-738cd2f1.js');
+var index$7 = require('./index-aa71b901.js');
 var styled = require('@emotion/styled');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-915a13a1.js');
-var index$a = require('./index-0ac8dfc2.js');
-var index$9 = require('./index-cba1387f.js');
+var index$8 = require('./index-6a930317.js');
+var index$a = require('./index-7cdd7861.js');
+var index$9 = require('./index-f43223d7.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-6c46b850.js');
-var index$c = require('./index-a6b3d160.js');
-var utils$1 = require('./utils-48e7d57a.js');
-var useTranslations = require('./useTranslations-3a6844ce.js');
+var isProduction = require('./isProduction-c6eef4f7.js');
+var index$c = require('./index-c95ec192.js');
+var utils$1 = require('./utils-f0f0e055.js');
+var useTranslations = require('./useTranslations-0d5204fb.js');
 var dateFns = require('date-fns');
 var dayjs = require('dayjs');
-var index$d = require('./index-700708e8.js');
-var types = require('./types-db558dfc.js');
-var index$e = require('./index-4a3a9242.js');
-var index$f = require('./index-124b40db.js');
-var index$g = require('./index-d74282a1.js');
-var index$i = require('./index-acee5b80.js');
+var index$d = require('./index-e94d8fc3.js');
+var types = require('./types-9797b47f.js');
+var index$e = require('./index-930490b6.js');
+var index$f = require('./index-5efe02fe.js');
+var index$g = require('./index-bbe26f9e.js');
+var index$i = require('./index-dd4e16ff.js');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-2046236a.js');
-var index$h = require('./index-997a78d5.js');
+var useHealthToolCache = require('./useHealthToolCache-4a695b1d.js');
+var index$h = require('./index-f1afe37f.js');
 var reactHookForm = require('react-hook-form');
-var useOutsideClick = require('./useOutsideClick-03608b1c.js');
+require('./constants-ce8caeb2.js');
+require('./utils-3aa45436.js');
+require('./WhatsApp-b5951003.js');
+require('./index.styled-76b0da80.js');
+require('./index-96d1c81a.js');
+var useOutsideClick = require('./useOutsideClick-b3444568.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var getSocialList = require('./getSocialList-473ff63e.js');
+var getSocialList = require('./getSocialList-e5aa2ff7.js');
 var uuid = require('uuid');
-require('./constants-07a9e6cb.js');
-require('./utils-6fd64172.js');
-require('./WhatsApp-e8724620.js');
-require('./index.styled-944d0268.js');
-require('./index-d2b208bb.js');
-var routing = require('./routing-d5905665.js');
-var index$k = require('./index-7f262dce.js');
+var routing = require('./routing-2d227970.js');
+var index$k = require('./index-75f66b73.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$l = require('./index-fe3c222e.js');
+var index$l = require('./index-554d9614.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var cookieHelper = require('./cookieHelper-9a3f8df6.js');
-var normalizeLink = require('./normalizeLink-05857ba2.js');
+var cookieHelper = require('./cookieHelper-7c9b676f.js');
+var normalizeLink = require('./normalizeLink-19e85c9c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -3086,8 +3086,8 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                     React__default["default"].createElement(index$5.Heading, { tag: "h5", as: headingAs }, heading),
                     medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
                 isMarryBaby ? (React__default["default"].createElement(StyledIcon, null, icon)) : (React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: core.rem(64),
-                        height: core.rem(64),
+                        width: core.rem(84),
+                        height: core.rem(84),
                         borderRadius: '50%',
                         backgroundColor: '#fff',
                         flexShrink: 0,
@@ -4486,33 +4486,34 @@ var useStyles$1 = core.createStyles(() => {
 const CalculatorType = (_a) => {
     var { label, classNames, styles } = _a, props = tslib_es6.__rest(_a, ["label", "classNames", "styles"]);
     const { t } = useTranslations.useTranslations();
+    const { isMobile } = React.useContext(OvulationFormContext);
     const { classes, theme } = useStyles$1(undefined, {
         name: 'CalculatorType',
         classNames,
         styles,
     });
     const isMarryBaby = theme.other.template === 'mb';
-    const iconSize = isMarryBaby ? 32 : 18;
+    const iconSize = isMobile ? 48 : isMarryBaby ? 32 : 18;
     const calculatingMethods = [
         {
             label: t('ovulationPage.trackPeriod'),
-            value: OvulationCalculatorType.trackPeriod,
+            value: OvulationCalculatorType$1.trackPeriod,
             icon: React__default["default"].createElement(LastPeriod, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
         {
             label: t('ovulationPage.conceive'),
-            value: OvulationCalculatorType.conceive,
+            value: OvulationCalculatorType$1.conceive,
             icon: React__default["default"].createElement(TryConceive, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
         {
             label: t('ovulationPage.avoidPregnancy'),
-            value: OvulationCalculatorType.avoidPregnancy,
+            value: OvulationCalculatorType$1.avoidPregnancy,
             icon: React__default["default"].createElement(AvoidPregnancy, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
     ];
     return (React__default["default"].createElement(core.Box, null,
         React__default["default"].createElement(core.Input.Wrapper, { label: label },
-            React__default["default"].createElement(core.Chip.Group, Object.assign({ defaultValue: String(OvulationCalculatorType.trackPeriod) }, props),
+            React__default["default"].createElement(core.Chip.Group, Object.assign({ defaultValue: String(OvulationCalculatorType$1.trackPeriod) }, props),
                 React__default["default"].createElement(core.Box, { className: classes.group }, calculatingMethods.map((i, idx) => (React__default["default"].createElement(core.Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
                         iconWrapper: {
                             display: 'none',
@@ -4539,7 +4540,7 @@ const CalculatorType = (_a) => {
                             flexDirection: 'column',
                         })), { [theme.fn.smallerThan('sm')]: {
                                 flexDirection: 'column',
-                                padding: core.rem(8),
+                                padding: '16px 8px 8px',
                             } }) },
                         i.icon,
                         React__default["default"].createElement(index$2.Text, { size: isMarryBaby ? 'p3' : 'p2', styles: {
@@ -4554,7 +4555,7 @@ const CalculatorType = (_a) => {
                             } }, i.label))))))))));
 };
 
-const DefaultLayout = (_a) => {
+const DefaultLayout$1 = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(OvulationFormContext);
@@ -4563,12 +4564,12 @@ const DefaultLayout = (_a) => {
         React__default["default"].createElement(index$h.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                 withinPortal: true,
             }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45 }, form.getInputProps('cycleLength'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15 }, form.getInputProps('periodLength'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const InlineLayout = (_a) => {
+const InlineLayout$1 = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(OvulationFormContext);
@@ -4579,14 +4580,18 @@ const InlineLayout = (_a) => {
             React__default["default"].createElement(index$h.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
-        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
-        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
+            form.errors.cycleLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
+            form.errors.periodLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.periodLength))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const MbLayout$1 = (_a) => {
+const MbLayout$2 = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(OvulationFormContext);
@@ -4598,37 +4603,42 @@ const MbLayout$1 = (_a) => {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-var OvulationCalculatorType;
+var OvulationCalculatorType$1;
 (function (OvulationCalculatorType) {
     OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
     OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
     OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
-})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+})(OvulationCalculatorType$1 || (OvulationCalculatorType$1 = {}));
 const OvulationForm = (_a) => {
-    var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
     const theme = core.useMantineTheme();
+    const { t } = useTranslations.useTranslations();
     const isMarryBaby = theme.other.template === 'mb';
     const form$1 = form.useForm({
         initialValues: {
-            calculatorType: String(OvulationCalculatorType.trackPeriod),
+            calculatorType: String(OvulationCalculatorType$1.trackPeriod),
             periodLength: 7,
             cycleLength: 28,
             lastPeriodDate: new Date(),
         },
+        validate: {
+            periodLength: form.isNotEmpty(t('validation.error.requiredField')),
+            cycleLength: form.isNotEmpty(t('validation.error.requiredField')),
+        },
     });
     const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
-    return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1 } }, isMarryBaby ? (React__default["default"].createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
+    return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1, isMobile } }, isMarryBaby ? (React__default["default"].createElement(MbLayout$2, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$1, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
 };
 
 const OvulationCardEmbed = (_a) => {
     var _b;
-    var { ovulationPageInfo, expertUrl, formProps } = _a, props = tslib_es6.__rest(_a, ["ovulationPageInfo", "expertUrl", "formProps"]);
+    var { ovulationPageInfo, expertUrl, formProps, isMobile } = _a, props = tslib_es6.__rest(_a, ["ovulationPageInfo", "expertUrl", "formProps", "isMobile"]);
     const { t } = useTranslations.useTranslations();
     return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
         React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
@@ -4638,7 +4648,93 @@ const OvulationCardEmbed = (_a) => {
                 date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
             } }),
         React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(OvulationForm, Object.assign({}, formProps)))));
+            React__default["default"].createElement(OvulationForm, Object.assign({ isMobile: isMobile }, formProps)))));
+};
+
+const BabyVaccineFormContext = React.createContext({});
+
+const DefaultLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
+        React__default["default"].createElement(index$h.DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }, form.getInputProps('age'))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
+                React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default["default"].createElement(index$h.DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+            form.errors.age && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout$1 = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
+                React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default["default"].createElement(index$h.DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+            form.errors.age && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+var OvulationCalculatorType;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const BabyVaccineForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        validate: {
+            gender: form.isNotEmpty(t('validation.error.requiredField')),
+            age: form.isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
+    return (React__default["default"].createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form: form$1 } }, isMarryBaby ? (React__default["default"].createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+const BabyVaccineCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { babyVaccineContent, formProps } = _a, props = tslib_es6.__rest(_a, ["babyVaccineContent", "formProps"]);
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.featuredImage) ||
+                    index$6.CommonGAssets.getAssetPath('health-tools/baby-vaccine-icon.svg'), loading: "lazy" }), heading: t('babyVaccineTool.heading'), medicalReview: {
+                link: ((_b = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link) || '',
+                reviewer: ((_c = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer) || '',
+                date: ((_d = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date) || '',
+            } }),
+        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(BabyVaccineForm, Object.assign({}, formProps)))));
 };
 
 const PWGFormContext = React.createContext({});
@@ -7608,6 +7704,8 @@ exports.BMRCardEmbed = BMRCardEmbed;
 exports.BabyGrowthCardEmbed = BabyGrowthCardEmbed;
 exports.BabyPoopEmbed = BabyPoopEmbed;
 exports.BabyPoopForm = BabyPoopForm;
+exports.BabyVaccineCardEmbed = BabyVaccineCardEmbed;
+exports.BabyVaccineForm = BabyVaccineForm;
 exports.Badge = Badge;
 exports.BmiForm = BmiForm;
 exports.BorderHeading = BorderHeading;

package/build/{index-c2ac4561.js → index-2dd59c7f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-c6a0ba99.js');
+var utils = require('./utils-552ff173.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-9c2050b5.js → index-2faf9fb0.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-1b816464.js');
+var index$2 = require('./index-c4e64941.js');
 require('@mantine/dates');
-var index = require('./index-ed90d9b2.js');
-var index$1 = require('./index-896edc0e.js');
-require('./index-c10c6d1e.js');
-require('./useMantineLocale-531aaed6.js');
-require('./index-c2ac4561.js');
-require('./theme-de064836.js');
-var useTranslations = require('./useTranslations-3a6844ce.js');
+var index = require('./index-840d7784.js');
+var index$1 = require('./index-811930df.js');
+require('./index-599b38dd.js');
+require('./useMantineLocale-71cf4d6c.js');
+require('./index-2dd59c7f.js');
+require('./theme-c301ffa8.js');
+var useTranslations = require('./useTranslations-0d5204fb.js');
 require('@mantine/hooks');
-require('./utils-c6a0ba99.js');
-var utils = require('./utils-d237afdc.js');
+require('./utils-552ff173.js');
+var utils = require('./utils-5366ac41.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-fe3c222e.js → index-554d9614.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-1b816464.js');
+var index = require('./index-c4e64941.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c66838fb.js → index-56ebc3c0.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-c2ac4561.js');
+var index = require('./index-2dd59c7f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c10c6d1e.js → index-599b38dd.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-ed90d9b2.js');
-var isProduction = require('./isProduction-6c46b850.js');
+var index = require('./index-840d7784.js');
+var isProduction = require('./isProduction-c6eef4f7.js');
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/{index-124b40db.js → index-5efe02fe.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
-var index_styled = require('./index.styled-944d0268.js');
+var index_styled = require('./index.styled-76b0da80.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-915a13a1.js → index-6a930317.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-896edc0e.js');
-var index$2 = require('./index-c10c6d1e.js');
-var utils = require('./utils-6fd64172.js');
-var index$1 = require('./index-1b816464.js');
+var index = require('./index-811930df.js');
+var index$2 = require('./index-599b38dd.js');
+var utils = require('./utils-3aa45436.js');
+var index$1 = require('./index-c4e64941.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-7f262dce.js → index-75f66b73.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
-var theme = require('./theme-de064836.js');
-var utils = require('./utils-48e7d57a.js');
-var WhatsApp = require('./WhatsApp-e8724620.js');
+var theme = require('./theme-c301ffa8.js');
+var utils = require('./utils-f0f0e055.js');
+var WhatsApp = require('./WhatsApp-b5951003.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-0ac8dfc2.js → index-7cdd7861.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
-var index = require('./index-1b816464.js');
+var index = require('./index-c4e64941.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ed90d9b2.js → index-840d7784.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-var index$1 = require('./index-896edc0e.js');
-var isProduction = require('./isProduction-6c46b850.js');
+var index$1 = require('./index-811930df.js');
+var isProduction = require('./isProduction-c6eef4f7.js');
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/{index-4a3a9242.js → index-930490b6.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-7f262dce.js');
-var useTranslations = require('./useTranslations-3a6844ce.js');
+var index = require('./index-75f66b73.js');
+var useTranslations = require('./useTranslations-0d5204fb.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
 var styled = require('@emotion/styled');
-var theme = require('./theme-de064836.js');
+var theme = require('./theme-c301ffa8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-3950786c.js → index-9a9b0f4c.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
-var index = require('./index-896edc0e.js');
+var index = require('./index-811930df.js');
 var styled = require('@emotion/styled');
-var index$2 = require('./index-c10c6d1e.js');
-var theme = require('./theme-de064836.js');
-var index$1 = require('./index-1b816464.js');
-var index$3 = require('./index-f7e4c060.js');
+var index$2 = require('./index-599b38dd.js');
+var theme = require('./theme-c301ffa8.js');
+var index$1 = require('./index-c4e64941.js');
+var index$3 = require('./index-c363f6b0.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-cbb000d2.js → index-9e48430e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a3b945ae.js');
+var tslib_es6 = require('./tslib.es6-deb50113.js');
 var React = require('react');
 var core = require('@mantine/core');
-var theme = require('./theme-de064836.js');
+var theme = require('./theme-c301ffa8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }