@hhgtech/hhg-components 1.29.44 → 1.29.45

package/build/esm/{index-f80d4ff8.js → index-5b5db772.js}

@@ -1,68 +1,68 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-7aff3435.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-59f43d64.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-72d20560.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-f0ac2d9c.js';
-import { T as Text$1 } from './index-52e1cb2b.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-2c23b4a0.js';
+import { T as Text } from './index-c82ef63d.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-950cf52f.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-1c4436fb.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-f7b2cf2b.js';
+import { T as Text$1 } from './index-f4d48e7c.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2805eb0d.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { H as Heading } from './index-f55cc5a7.js';
-import { t as theme } from './theme-7c208c30.js';
+import { C as CommonGAssets } from './index-de0b462c.js';
+import { H as Heading } from './index-8ff9e988.js';
+import { t as theme } from './theme-9b3c5ce8.js';
 import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Input as Input$2, Chip, Container, AspectRatio as AspectRatio$1, ScrollArea, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-d73390b2.js';
-import { L as LOCALE } from './index-3e04178f.js';
-import './useMantineLocale-6a509174.js';
-import './translationsContext-9021710e.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-0730cb03.js';
+import { L as LOCALE } from './index-ddb4c753.js';
+import './useMantineLocale-39bfcb4d.js';
+import './translationsContext-8634b4e4.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-7ef38b29.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-01f5218f.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-23fa4098.js';
-import { B as Button } from './index-4a001eda.js';
-import { I as Input } from './index-db0a1f04.js';
+import { L as Logo } from './index-72b59998.js';
+import { B as Button } from './index-950a89f0.js';
+import { I as Input } from './index-49cc4e66.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-8ddd1c09.js';
-import { D as Dropdown } from './index-56195940.js';
-import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-101d2ed1.js';
-import { u as useTranslations } from './useTranslations-3ea1638d.js';
+import { i as isProduction } from './isProduction-5b5083e1.js';
+import { D as Dropdown } from './index-e9e548e7.js';
+import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-0966b189.js';
+import { u as useTranslations } from './useTranslations-bd5502b7.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-af5ce53c.js';
-import { D as DATE_FORMAT } from './types-58c673f9.js';
-import { D as DatePicker } from './index-aebda8f4.js';
-import { M as MarryBabyText } from './index-c0c2dfbe.js';
-import { S as Slider } from './index-57b0dda2.js';
-import { f as formatUserProfileUrl } from './index-c8a34381.js';
+import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-e5356e0c.js';
+import { D as DATE_FORMAT } from './types-f5618480.js';
+import { D as DatePicker } from './index-43885bfb.js';
+import { M as MarryBabyText } from './index-5a9b98ee.js';
+import { S as Slider } from './index-99141b34.js';
+import { f as formatUserProfileUrl } from './index-c9f15b6f.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-59feafe2.js';
-import { D as DatePicker$1 } from './index-329afe30.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-7e55185d.js';
+import { D as DatePicker$1 } from './index-de5fbde2.js';
 import { Controller, useForm } from 'react-hook-form';
-import { a as useOutsideClick } from './useOutsideClick-4a5bba56.js';
+import './constants-fe7395e5.js';
+import './utils-f28f8d21.js';
+import './WhatsApp-c5ccc324.js';
+import './index.styled-03c6007b.js';
+import './index-7be202e4.js';
+import { a as useOutsideClick } from './useOutsideClick-6e8f0827.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-cffac849.js';
+import { g as getSocialList } from './getSocialList-918a05e4.js';
 import { v4 } from 'uuid';
-import './constants-e3536cb0.js';
-import './utils-8a09aa51.js';
-import './WhatsApp-9dbce6f2.js';
-import './index.styled-e18670ac.js';
-import './index-be8d21e4.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-e49e8c2d.js';
-import { I as Icon } from './index-8a31b708.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-de0894b8.js';
+import { I as Icon } from './index-3eade222.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-48fd5f17.js';
+import { M as Modal } from './index-8393482c.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-4166d977.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-00141ab9.js';
+import { g as getCookie } from './cookieHelper-8fe37cb2.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-c21ecec7.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -3068,8 +3068,8 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                     React__default.createElement(Heading, { tag: "h5", as: headingAs }, heading),
                     medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
                 isMarryBaby ? (React__default.createElement(StyledIcon, null, icon)) : (React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: rem(64),
-                        height: rem(64),
+                        width: rem(84),
+                        height: rem(84),
                         borderRadius: '50%',
                         backgroundColor: '#fff',
                         flexShrink: 0,
@@ -4468,33 +4468,34 @@ var useStyles$1 = createStyles(() => {
 const CalculatorType = (_a) => {
     var { label, classNames, styles } = _a, props = __rest(_a, ["label", "classNames", "styles"]);
     const { t } = useTranslations();
+    const { isMobile } = 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.createElement(LastPeriod, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
         {
             label: t('ovulationPage.conceive'),
-            value: OvulationCalculatorType.conceive,
+            value: OvulationCalculatorType$1.conceive,
             icon: React__default.createElement(TryConceive, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
         {
             label: t('ovulationPage.avoidPregnancy'),
-            value: OvulationCalculatorType.avoidPregnancy,
+            value: OvulationCalculatorType$1.avoidPregnancy,
             icon: React__default.createElement(AvoidPregnancy, { size: iconSize, isMarryBaby: isMarryBaby }),
         },
     ];
     return (React__default.createElement(Box, null,
         React__default.createElement(Input$2.Wrapper, { label: label },
-            React__default.createElement(Chip.Group, Object.assign({ defaultValue: String(OvulationCalculatorType.trackPeriod) }, props),
+            React__default.createElement(Chip.Group, Object.assign({ defaultValue: String(OvulationCalculatorType$1.trackPeriod) }, props),
                 React__default.createElement(Box, { className: classes.group }, calculatingMethods.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
                         iconWrapper: {
                             display: 'none',
@@ -4521,7 +4522,7 @@ const CalculatorType = (_a) => {
                             flexDirection: 'column',
                         })), { [theme.fn.smallerThan('sm')]: {
                                 flexDirection: 'column',
-                                padding: rem(8),
+                                padding: '16px 8px 8px',
                             } }) },
                         i.icon,
                         React__default.createElement(Text, { size: isMarryBaby ? 'p3' : 'p2', styles: {
@@ -4536,7 +4537,7 @@ const CalculatorType = (_a) => {
                             } }, i.label))))))))));
 };
 
-const DefaultLayout = (_a) => {
+const DefaultLayout$1 = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
@@ -4545,12 +4546,12 @@ const DefaultLayout = (_a) => {
         React__default.createElement(DatePicker$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                 withinPortal: true,
             }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45 }, form.getInputProps('cycleLength'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15 }, form.getInputProps('periodLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
         React__default.createElement(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 = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
@@ -4561,14 +4562,18 @@ const InlineLayout = (_a) => {
             React__default.createElement(DatePicker$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+                React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
+            form.errors.cycleLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
+                React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
+            form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))),
         React__default.createElement(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 = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
@@ -4580,37 +4585,42 @@ const MbLayout$1 = (_a) => {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
+            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
         React__default.createElement(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 = __rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
     const theme = useMantineTheme();
+    const { t } = useTranslations();
     const isMarryBaby = theme.other.template === 'mb';
     const form = useForm$1({
         initialValues: {
-            calculatorType: String(OvulationCalculatorType.trackPeriod),
+            calculatorType: String(OvulationCalculatorType$1.trackPeriod),
             periodLength: 7,
             cycleLength: 28,
             lastPeriodDate: new Date(),
         },
+        validate: {
+            periodLength: isNotEmpty(t('validation.error.requiredField')),
+            cycleLength: isNotEmpty(t('validation.error.requiredField')),
+        },
     });
     const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, props);
-    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form } }, isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form, isMobile } }, isMarryBaby ? (React__default.createElement(MbLayout$2, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
 };
 
 const OvulationCardEmbed = (_a) => {
     var _b;
-    var { ovulationPageInfo, expertUrl, formProps } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps"]);
+    var { ovulationPageInfo, expertUrl, formProps, isMobile } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps", "isMobile"]);
     const { t } = useTranslations();
     return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
@@ -4620,7 +4630,93 @@ const OvulationCardEmbed = (_a) => {
                 date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
             } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(OvulationForm, Object.assign({}, formProps)))));
+            React__default.createElement(OvulationForm, Object.assign({ isMobile: isMobile }, formProps)))));
+};
+
+const BabyVaccineFormContext = createContext({});
+
+const DefaultLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
+        React__default.createElement(DatePicker$1, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }, form.getInputProps('age'))),
+        React__default.createElement(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 = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(DatePicker$1, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(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 = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(DatePicker$1, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(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 = __rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form = useForm$1({
+        validate: {
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            age: isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, props);
+    return (React__default.createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form } }, isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+const BabyVaccineCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { babyVaccineContent, formProps } = _a, props = __rest(_a, ["babyVaccineContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.featuredImage) ||
+                    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.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyVaccineForm, Object.assign({}, formProps)))));
 };
 
 const PWGFormContext = createContext({});
@@ -7580,4 +7676,4 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-export { MAPPING_CATEGORY_PREMIUM_TYPE as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, BabyPoopForm as E, FileDropdown as F, Grid as G, THRCardEmbed as H, IconText as I, ThrForm as J, BMRCardEmbed as K, OvulationForm as L, MobileBottomNavigation as M, PWGCardEmbed as N, OvulationCardEmbed as O, Pagination as P, PWGForm as Q, Radio as R, ScrollList as S, Tag as T, DateRangePicker as U, Breadcrumbs as V, ShareContainer as W, ShareDrawer as X, AdBlock as Y, FixedBottomAdBlock as Z, SurveyOrPremiumBanner as _, Avatar as a, MAPPING_CATEGORY_PREMIUM_API_TYPE as a0, SideBannerModal as a1, UserProfileNavigation as a2, NavHeader as a3, UserStats as a4, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateCardEmbed as v, BMICardEmbed as w, BmiForm as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };
+export { FixedBottomAdBlock as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, BabyPoopForm as E, FileDropdown as F, Grid as G, THRCardEmbed as H, IconText as I, ThrForm as J, BMRCardEmbed as K, OvulationForm as L, MobileBottomNavigation as M, BabyVaccineForm as N, OvulationCardEmbed as O, Pagination as P, BabyVaccineCardEmbed as Q, Radio as R, ScrollList as S, Tag as T, PWGCardEmbed as U, PWGForm as V, DateRangePicker as W, Breadcrumbs as X, ShareContainer as Y, ShareDrawer as Z, AdBlock as _, Avatar as a, SurveyOrPremiumBanner as a0, MAPPING_CATEGORY_PREMIUM_TYPE as a1, MAPPING_CATEGORY_PREMIUM_API_TYPE as a2, SideBannerModal as a3, UserProfileNavigation as a4, NavHeader as a5, UserStats as a6, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateCardEmbed as v, BMICardEmbed as w, BmiForm as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };

package/build/esm/{index-23fa4098.js → index-72b59998.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './index-3e04178f.js';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-8a09aa51.js';
-import { I as ImageWrap } from './index-f0ac2d9c.js';
+import { L as LOCALE } from './index-ddb4c753.js';
+import { C as CommonGAssets } from './index-de0b462c.js';
+import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-f28f8d21.js';
+import { I as ImageWrap } from './index-f7b2cf2b.js';
 
 const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
     const [seasonalChecks, setSeasonalChecks] = useState({

package/build/esm/{index-48fd5f17.js → index-8393482c.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { g as useStyles } from './index-f0ac2d9c.js';
+import { g as useStyles } from './index-f7b2cf2b.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-724596e6.js → index-8f75a052.js}

@@ -1,22 +1,22 @@
 import React__default from 'react';
-import { C as Container } from './index-5b97be17.js';
+import { C as Container } from './index-e11a78d9.js';
 import dayjs from 'dayjs';
-import { d as domainLocales } from './index-d73390b2.js';
-import { u as useScreenSize } from './index-f0ac2d9c.js';
+import { d as domainLocales } from './index-0730cb03.js';
+import { u as useScreenSize } from './index-f7b2cf2b.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-3e04178f.js';
-import './index-a2cdc317.js';
-import './useMantineLocale-6a509174.js';
-import { T as Text } from './index-7aff3435.js';
-import { t as theme } from './theme-7c208c30.js';
-import './translationsContext-9021710e.js';
+import './index-ddb4c753.js';
+import './index-de0b462c.js';
+import './useMantineLocale-39bfcb4d.js';
+import { T as Text } from './index-c82ef63d.js';
+import { t as theme } from './theme-9b3c5ce8.js';
+import './translationsContext-8634b4e4.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-72d20560.js';
+import { M as MediaQueries } from './utils-1c4436fb.js';
 import styled from '@emotion/styled';
-import { L as Logo } from './index-23fa4098.js';
-import { M as MarryBabyText } from './index-c0c2dfbe.js';
+import { L as Logo } from './index-72b59998.js';
+import { M as MarryBabyText } from './index-5a9b98ee.js';
 
 const StyledFooter = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-f55cc5a7.js → index-8ff9e988.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-7aff3435.js';
+import { T as Text } from './index-c82ef63d.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'

package/build/esm/{index-4a001eda.js → index-950a89f0.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-f0ac2d9c.js';
+import { B as Button$1 } from './index-f7b2cf2b.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-57b0dda2.js → index-99141b34.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default, { useState, useEffect } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';
-import { D as DEBOUNCED_TIME, h as StyledSliderWrapper, B as Button, i as StyledSlider } from './index-f0ac2d9c.js';
+import { D as DEBOUNCED_TIME, h as StyledSliderWrapper, B as Button, i as StyledSlider } from './index-f7b2cf2b.js';
 
 const Slider = (_a) => {
     var { color, withControl, onChange, value, min, max, isStatic, containerClassName, containerStyle } = _a, props = __rest(_a, ["color", "withControl", "onChange", "value", "min", "max", "isStatic", "containerClassName", "containerStyle"]);

package/build/esm/{index-6c8cda18.js → index-bbaa196e.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import { L as LOCALE } from './index-3e04178f.js';
+import { L as LOCALE } from './index-ddb4c753.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { t as theme } from './theme-7c208c30.js';
-import { I as ImageWrap, f as CentralCarousel } from './index-f0ac2d9c.js';
-import { T as Text } from './index-52e1cb2b.js';
+import { C as CommonGAssets } from './index-de0b462c.js';
+import { t as theme } from './theme-9b3c5ce8.js';
+import { I as ImageWrap, f as CentralCarousel } from './index-f7b2cf2b.js';
+import { T as Text } from './index-f4d48e7c.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-7aff3435.js → index-c82ef63d.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-72d20560.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-1c4436fb.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-c8a34381.js → index-c9f15b6f.js}

@@ -1,9 +1,9 @@
 import React__default, { useContext, useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-72d20560.js';
-import { t as theme } from './theme-7c208c30.js';
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
-import { T as TogetherComponentGlobalContext } from './utils-101d2ed1.js';
+import { M as MediaQueries } from './utils-1c4436fb.js';
+import { t as theme } from './theme-9b3c5ce8.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
+import { T as TogetherComponentGlobalContext } from './utils-0966b189.js';
 
 const StyledPopup = styled.div `
   position: fixed;

package/build/esm/{index-a2cdc317.js → index-de0b462c.js}

@@ -1,5 +1,5 @@
-import { d as domainLocales } from './index-d73390b2.js';
-import { i as isProduction } from './isProduction-8ddd1c09.js';
+import { d as domainLocales } from './index-0730cb03.js';
+import { i as isProduction } from './isProduction-5b5083e1.js';
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/esm/{index-329afe30.js → index-de5fbde2.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-d73390b2.js';
-import { L as LOCALE } from './index-3e04178f.js';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { M as MAPPED_LOCALE } from './useMantineLocale-6a509174.js';
+import { I as ISO_FORMAT } from './index-0730cb03.js';
+import { L as LOCALE } from './index-ddb4c753.js';
+import { C as CommonGAssets } from './index-de0b462c.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-39bfcb4d.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-af5ce53c.js → index-e5356e0c.js}

@@ -1,33 +1,33 @@
 import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
 import { Portal, Box, Flex, rem, createStyles, useMantineTheme, Switch } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-72d20560.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$9, P as PureInput } from './index.styles-59f43d64.js';
-import { T as Text } from './index-7aff3435.js';
-import { t as theme } from './theme-7c208c30.js';
-import { M as MarryBabyText } from './index-c0c2dfbe.js';
-import { T as Text$1 } from './index-52e1cb2b.js';
-import { u as useScrollbarSize } from './useScrollbarSize-718c8d7c.js';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-1c4436fb.js';
+import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$9, P as PureInput } from './index.styles-950cf52f.js';
+import { T as Text } from './index-c82ef63d.js';
+import { t as theme } from './theme-9b3c5ce8.js';
+import { M as MarryBabyText } from './index-5a9b98ee.js';
+import { T as Text$1 } from './index-f4d48e7c.js';
+import { u as useScrollbarSize } from './useScrollbarSize-5621f902.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { s as setDefaultClass } from './utils-101d2ed1.js';
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { s as setDefaultClass } from './utils-0966b189.js';
+import { _ as __rest } from './tslib.es6-2805eb0d.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { G as Gender } from './index-3e04178f.js';
+import { G as Gender } from './index-ddb4c753.js';
 import { Controller, useForm } from 'react-hook-form';
 import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
-import { R as Radio, B as Button, c as Input$1 } from './index-f0ac2d9c.js';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { I as Input } from './index-db0a1f04.js';
-import './utils-8a09aa51.js';
-import { D as DatePicker } from './index-329afe30.js';
-import { u as useTranslations } from './useTranslations-3ea1638d.js';
+import { R as Radio, B as Button, c as Input$1 } from './index-f7b2cf2b.js';
+import { C as CommonGAssets } from './index-de0b462c.js';
+import { I as Input } from './index-49cc4e66.js';
+import './utils-f28f8d21.js';
+import { D as DatePicker } from './index-de5fbde2.js';
+import { u as useTranslations } from './useTranslations-bd5502b7.js';
 import '@mantine/hooks';
-import './useMantineLocale-6a509174.js';
-import './index-d73390b2.js';
-import './WhatsApp-9dbce6f2.js';
-import './index.styled-e18670ac.js';
-import './index-be8d21e4.js';
-import { L as Label } from './constants-e3536cb0.js';
+import './useMantineLocale-39bfcb4d.js';
+import './index-0730cb03.js';
+import './WhatsApp-c5ccc324.js';
+import './index.styled-03c6007b.js';
+import './index-7be202e4.js';
+import { L as Label } from './constants-fe7395e5.js';
 import '@mantine/dates';
 import { format } from 'date-fns';
 import flattenChildren from 'react-keyed-flatten-children';