@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/esm/index-492f7199.js

@@ -0,0 +1,370 @@
+import { _ as __rest } from './tslib.es6-9430520e.js';
+import React__default, { createContext, useContext, useState } from 'react';
+import { L as LastPeriod } from './LastPeriod-6a476391.js';
+import { format } from 'date-fns';
+import { useMantineTheme, Group } from '@mantine/core';
+import { useForm, isNotEmpty } from '@mantine/form';
+import dayjs from 'dayjs';
+import { R as Radio, c as Input } from './index-83cc8492.js';
+import { D as DatePicker } from './index-1baef0ed.js';
+import './index-88ff7c55.js';
+import './index-c7b7301d.js';
+import { u as useTranslations } from './useTranslations-32ff6c72.js';
+import '@mantine/hooks';
+import './index-99a12287.js';
+import './index-562833a7.js';
+import './utils-94f8d19f.js';
+import './useMantineLocale-845c1956.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-3dcece1c.js';
+import './other-af591390.js';
+import { H as HealthToolFormWrapper } from './index-b4dc58c1.js';
+import { CalendarMB } from '@hhgtech/icons/other';
+
+const ConceptionDate = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default.createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M16.5 27.133c1.298 0 2.596-.149 3.868-.447a9.15 9.15 0 0 0 6.818-6.818 16.94 16.94 0 0 0 0-7.736 9.15 9.15 0 0 0-6.818-6.818 16.94 16.94 0 0 0-7.736 0 9.15 9.15 0 0 0-6.818 6.818A17 17 0 0 0 5.367 16a.867.867 0 1 1-1.734 0c0-1.43.165-2.862.494-4.264a10.88 10.88 0 0 1 8.109-8.11 18.7 18.7 0 0 1 8.528 0 10.88 10.88 0 0 1 8.11 8.11 18.7 18.7 0 0 1 0 8.528 10.88 10.88 0 0 1-8.11 8.11 18.7 18.7 0 0 1-4.264.493.867.867 0 0 1 0-1.734", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M11.633 16a4.867 4.867 0 1 1 9.734 0 4.867 4.867 0 0 1-9.734 0m4.867-3.133a3.133 3.133 0 1 0 0 6.266 3.133 3.133 0 0 0 0-6.266", fill: "#E85388" }),
+        React__default.createElement("path", { d: "M9.834 25.333a2.667 2.667 0 1 0-2.298-1.312l-.084.084a3.25 3.25 0 0 0-.952 2.298c0 .726-.41 1.39-1.06 1.715l-1.238.619a.667.667 0 0 0 .596 1.193l1.24-.62a3.25 3.25 0 0 0 1.796-2.907c0-.508.202-.995.561-1.355l.084-.084c.397.235.86.37 1.355.37", fill: "#3E3F58" }))) : (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("circle", { cx: "9", cy: "6.75", fill: "#91CAFF", r: "6.75" }),
+        React__default.createElement("circle", { cx: "9", cy: "6.75", fill: "#2D87F3", r: "5.4" }),
+        React__default.createElement("path", { d: "M1.789 12.2a.245.245 0 0 1-.02-.489c.073-.006 1.795-.167 1.761-1.605-.013-.587.15-1.057.485-1.397.524-.53 1.273-.528 1.305-.527a.245.245 0 0 1-.002.49h-.002c-.011 0-.582.004-.955.385-.236.24-.351.59-.34 1.038.018.793-.367 1.41-1.114 1.787a3.3 3.3 0 0 1-1.118.319M.75 17.774a.245.245 0 0 1 .226-.263c.073-.006 1.786-.162 1.749-1.593-.016-.586.146-1.055.48-1.392.521-.528 1.27-.524 1.3-.523a.245.245 0 0 1-.006.49c-.015 0-.58.004-.949.38q-.352.362-.335 1.033c.02.791-.362 1.406-1.106 1.78a3.3 3.3 0 0 1-1.095.313.245.245 0 0 1-.263-.225", fill: "#D2D6DC" }),
+        React__default.createElement("path", { d: "M8.659 5.035c-.562-.561-1.956-.078-2.699.665-.407.407-.635.91-.665 1.373v.124l1.145 1.16.181.042c.464-.03.966-.258 1.373-.665.743-.743 1.226-2.137.665-2.699", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "m5.295 7.073-.292.75a.55.55 0 0 0 .124.589l.155.155a.55.55 0 0 0 .589.124l.75-.292z", fill: "#91CAFF" }),
+        React__default.createElement("path", { d: "M8.098 11.358a.87.87 0 0 0-.233-.523c-.562-.562-1.956-.079-2.699.664-.407.408-.635.91-.665 1.373v.125l1.146 1.16.18.042c.464-.03.966-.258 1.374-.666.566-.566.98-1.51.897-2.175", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "m4.5 12.872-.29.75a.55.55 0 0 0 .123.589l.156.155a.55.55 0 0 0 .588.124l.75-.292z", fill: "#91CAFF" })));
+};
+
+const IVF = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default.createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M15.804 28.278a3.16 3.16 0 0 1-3.18-3.208l.128-20.306 6.405.008-.128 20.307c-.012 1.757-1.452 3.191-3.225 3.2", fill: "#fff" }),
+        React__default.createElement("path", { d: "m12.72 10.266-.116 14.788c-.011 1.757 1.423 3.197 3.18 3.208 1.774-.008 3.214-1.442 3.225-3.2V10.267", fill: "#FFEAF1" }),
+        React__default.createElement("circle", { cx: "14.662", cy: "19.027", transform: "rotate(-49.83 14.662 19.027)", fill: "#3E3F58", r: "1.012" }),
+        React__default.createElement("circle", { cx: "16.326", cy: "13.426", r: "1.012", transform: "rotate(-49.83 16.326 13.426)", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "m14.662 19.026.087 1.022a.98.98 0 0 0 .344.667.98.98 0 0 1 .32.98l-.123.51m1.036-8.779.087 1.022a.98.98 0 0 0 .344.666.98.98 0 0 1 .32.98l-.123.511", stroke: "#3E3F58" }),
+        React__default.createElement("path", { d: "M18.833 27.597a3.94 3.94 0 0 1-3.02 1.408 4 4 0 0 1-2.795-1.148 3.98 3.98 0 0 1-1.14-2.795l.108-20.553c0-.426.344-.756.753-.738.426 0 .757.345.738.754l-.108 20.553c.002.656.248 1.256.697 1.733a2.42 2.42 0 0 0 1.727.706 2.483 2.483 0 0 0 2.47-2.462l.109-20.553c0-.426.344-.757.753-.738.426 0 .757.344.738.754l-.108 20.553a3.85 3.85 0 0 1-.922 2.526", fill: "#202135" }),
+        React__default.createElement("path", { d: "M20.753 4.975a.75.75 0 0 1-.58.262l-8.714-.027a.727.727 0 0 1-.738-.754c0-.425.344-.756.754-.737l8.713.026c.426 0 .756.344.738.754a.66.66 0 0 1-.173.476", fill: "#202135" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M13.064 5.794a17.8 17.8 0 0 1 3.34-4.638l4.26 2.881a17.8 17.8 0 0 0-3.272 4.507l-1.08 2.12a.65.65 0 0 0 .124.76 7.9 7.9 0 0 1 2.296 4.81c.027.265-1.141 5.997-9.376 5.573-1.587-.082-5.724-1.269-6.12-2.86a8 8 0 0 1-.233-2.161c.124-4.165 3.718-7.648 7.884-7.647h.098a.65.65 0 0 0 .59-.36z", fill: "#BCDEFF" }),
+        React__default.createElement("path", { d: "M20.75 3.234 16.696.496a.886.886 0 1 0-.992 1.469l4.056 2.738a.886.886 0 0 0 .992-1.469", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M18.771 17.024a7.87 7.87 0 0 1-2.7 5.944A4.2 4.2 0 0 1 13.301 24H8.473a4.2 4.2 0 0 1-2.769-1.03 7.9 7.9 0 0 1-2.468-4.023c.924.468 2.191.805 3.922.805 1.142 0 2.01-.346 2.775-.834q.323-.21.629-.446c1.973-1.516 3.524-3.668 8.17-2.238q.04.39.04.79", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M11.858 15.5c-1.78.348-3.096-1.608-2.134-3.121a2.06 2.06 0 0 1 1.529-.944q.303-.03.588.025a.27.27 0 0 0 .268-.107c.282-.373.737-.573 1.2-.639.224-.031.374-.24.379-.44.021-.794.657-1.311 1.288-1.234.183.022.223.27.058.35l-.012.006a.9.9 0 0 0-.28.196c-.213.263-.187.407-.153.6.03.167.066.37-.04.715a1.45 1.45 0 0 1-.504.7c-.255.19-.445.23-.592.263-.088.019-.16.034-.223.076a.27.27 0 0 0-.07.379c.184.27.306.587.344.934a2.063 2.063 0 0 1-1.646 2.24", fill: "#fff" }),
+        React__default.createElement("ellipse", { cx: "10", cy: "20.5", rx: "3", ry: "2.5", fill: "#FF6F4D" })));
+};
+
+var DueDateCalculatorType$1;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+})(DueDateCalculatorType$1 || (DueDateCalculatorType$1 = {}));
+
+const DueDateFormContext = createContext({});
+
+const ConceptionFormContext = createContext({});
+
+const DefaultLayout$2 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(ConceptionFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }))));
+};
+
+const InlineLayout$2 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(ConceptionFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null }))),
+        form.errors.lastPeriodDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
+};
+
+const MbLayout$2 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(ConceptionFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
+var DueDateCalculatorType;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+})(DueDateCalculatorType || (DueDateCalculatorType = {}));
+const API_DATE_FORMAT = 'yyyy-MM-dd';
+const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
+    const pregnancyLength = 272 + (periodLength - 21);
+    const dueDate = new Date(lastPeriodDate);
+    dueDate.setDate(dueDate.getDate() + pregnancyLength);
+    return {
+        startDate: lastPeriodDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.lastPeriod + 1,
+            first_day: format(lastPeriodDate, API_DATE_FORMAT),
+            cycle_length_days: periodLength,
+            conception_date: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateConception = (conceptionDate) => {
+    const dueDate = new Date(conceptionDate);
+    dueDate.setDate(dueDate.getDate() + 265);
+    return {
+        startDate: conceptionDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.conception + 1,
+            conception_date: format(conceptionDate, API_DATE_FORMAT),
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateIVF = (IVFDate, numDayTransfer) => {
+    const dueDate = new Date(IVFDate);
+    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
+    return {
+        startDate: IVFDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.IVF + 1,
+            ivf_transfer_date: format(IVFDate, API_DATE_FORMAT),
+            days_transfer: numDayTransfer,
+            conception_date: null,
+            first_day: null,
+            cycle_length_days: null,
+        },
+    };
+};
+
+const ConceptionForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const theme = useMantineTheme();
+    const { t } = useTranslations();
+    const form = useForm({
+        initialValues: {
+            lastPeriodDate: new Date(),
+        },
+    });
+    const formProps = {
+        onSubmit: form.onSubmit((values) => {
+            const { lastPeriodDate } = values;
+            onSubmit(getDueDateConception(lastPeriodDate), `${QUERY_HEALTH_TOOL.type}=1&sd=${dayjs(lastPeriodDate).format(API_DATE_FORMAT$1)}&${QUERY_HEALTH_TOOL.additional}= `);
+        }),
+    };
+    return (React__default.createElement(ConceptionFormContext.Provider, { value: { form } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$2, null)) : (React__default.createElement(DefaultLayout$2, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const IVFFormContext = createContext({});
+
+const DefaultLayout$1 = () => {
+    const { t } = useTranslations();
+    const { form, transferDateOptions } = useContext(IVFFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))));
+};
+
+const InlineLayout$1 = () => {
+    const { t } = useTranslations();
+    const { form, transferDateOptions } = useContext(IVFFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.ivf.transferDate') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
+            React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label }))))))));
+};
+
+const MbLayout$1 = () => {
+    const { t } = useTranslations();
+    const { form, transferDateOptions } = useContext(IVFFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), rightSection: null }))),
+        React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))));
+};
+
+const IVFForm = ({}) => {
+    var _a;
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const transferDateOptions = [
+        {
+            value: '3',
+            label: t('dueDatePage.ivf.transferDateRadio', {
+                number: 3,
+            }),
+        },
+        {
+            value: '5',
+            label: t('dueDatePage.ivf.transferDateRadio', {
+                number: 5,
+            }),
+        },
+    ];
+    const form = useForm({
+        initialValues: {
+            IVFDate: new Date(),
+            dayTransfer: (_a = transferDateOptions === null || transferDateOptions === void 0 ? void 0 : transferDateOptions[0]) === null || _a === void 0 ? void 0 : _a.value,
+        },
+    });
+    const formProps = {
+        onSubmit: form.onSubmit((values) => {
+            const { IVFDate } = values;
+            const dayTransfer = Number(values.dayTransfer);
+            onSubmit(getDueDateIVF(IVFDate, Number(dayTransfer)), `${QUERY_HEALTH_TOOL.type}=2&${QUERY_HEALTH_TOOL.startDate}=${dayjs(IVFDate).format(API_DATE_FORMAT$1)}&${QUERY_HEALTH_TOOL.additional}=${dayTransfer}`);
+        }),
+    };
+    return (React__default.createElement(IVFFormContext.Provider, { value: { form, transferDateOptions } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$1, null)) : (React__default.createElement(DefaultLayout$1, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const LastPeriodFormContext = createContext({});
+
+const DefaultLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default.createElement(Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'))))));
+};
+
+const InlineLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default.createElement(Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'), { error: null }))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const MbLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
+            React__default.createElement(Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const LastPeriodForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form = useForm({
+        initialValues: {
+            lastPeriodDate: new Date(),
+        },
+        validate: {
+            periodLength: isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const formProps = {
+        onSubmit: form.onSubmit((values) => {
+            const { periodLength, lastPeriodDate } = values;
+            onSubmit(getDueDateLastPeriod(lastPeriodDate, periodLength), `${QUERY_HEALTH_TOOL.type}=0&${QUERY_HEALTH_TOOL.startDate}=${dayjs(lastPeriodDate).format(API_DATE_FORMAT$1)}&${QUERY_HEALTH_TOOL.additional}=${periodLength}`);
+        }),
+    };
+    return (React__default.createElement(LastPeriodFormContext.Provider, { value: { form } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout, null)) : isMarryBaby ? (React__default.createElement(MbLayout, null)) : (React__default.createElement(DefaultLayout, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const FormSwitcher = () => {
+    const { calculatorType } = useContext(DueDateFormContext);
+    return calculatorType === DueDateCalculatorType.lastPeriod ? (React__default.createElement(LastPeriodForm, null)) : calculatorType === DueDateCalculatorType.conception ? (React__default.createElement(ConceptionForm, null)) : calculatorType === DueDateCalculatorType.IVF ? (React__default.createElement(IVFForm, null)) : null;
+};
+
+var OvulationCalculatorType;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const DueDateForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
+    const { t } = useTranslations();
+    const [calculatorType, setCalculatorType] = useState(DueDateCalculatorType$1.lastPeriod);
+    const calculatingMethods = [
+        {
+            value: DueDateCalculatorType$1.lastPeriod,
+            label: t('dueDatePage.lastPeriod'),
+            icon: React__default.createElement(LastPeriod, null),
+        },
+        {
+            value: DueDateCalculatorType$1.conception,
+            label: t('dueDatePage.conceptionDate'),
+            icon: React__default.createElement(ConceptionDate, null),
+        },
+        {
+            value: DueDateCalculatorType$1.IVF,
+            label: t('dueDatePage.ivf'),
+            icon: React__default.createElement(IVF, null),
+        },
+    ];
+    return (React__default.createElement(DueDateFormContext.Provider, { value: {
+            calculatingMethods,
+            submitProps,
+            currentUrl,
+            isMobile,
+            formLayout,
+            onSubmit,
+            calculatorType,
+            setCalculatorType,
+        } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: "default" }, props),
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(Input.Wrapper, { label: t('dueDatePage.calculationMethod') },
+                    React__default.createElement(HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) }))),
+            React__default.createElement(FormSwitcher, null))));
+};
+
+export { DueDateForm as D };

package/build/esm/{index-acf8b60e.js → index-4dcb460d.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-f660abb7.js';
-import { t as theme } from './theme-7dadf4a1.js';
+import { L as Label } from './index-b50d36ad.js';
+import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `
   textarea {

package/build/esm/{index-9471fca1.js → index-562833a7.js}

@@ -1,5 +1,5 @@
-import { d as domainLocales } from './index-6210f454.js';
-import { i as isProduction } from './isProduction-1937d355.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { isProduction } from './constantsIsProduction.js';
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/esm/{index-0ee66974.js → index-583f25e2.js}

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-7dadf4a1.js';
-import { I as ImageWrap } from './index-9b3a8b6d.js';
+import { theme } from './miscTheme.js';
+import { I as ImageWrap } from './index-83cc8492.js';
 
 const StyledAvatar = styled.div `
   background-color: var(--background-color, transparent);

package/build/esm/index-5caf9237.js

@@ -0,0 +1,91 @@
+import { _ as __rest } from './tslib.es6-9430520e.js';
+import React__default, { createContext, useContext } from 'react';
+import { useMantineTheme } from '@mantine/core';
+import { useForm, isNotEmpty } from '@mantine/form';
+import './index-83cc8492.js';
+import { D as DatePicker } from './index-1baef0ed.js';
+import './index-88ff7c55.js';
+import './index-c7b7301d.js';
+import { u as useTranslations } from './useTranslations-32ff6c72.js';
+import '@mantine/hooks';
+import './index-99a12287.js';
+import './index-562833a7.js';
+import './utils-94f8d19f.js';
+import './useMantineLocale-845c1956.js';
+import './index-3dcece1c.js';
+import './other-af591390.js';
+import { H as HealthToolFormWrapper } from './index-b4dc58c1.js';
+import { G as GenderOptionControl } from './index-7d0b67e7.js';
+import { CalendarMB } from '@hhgtech/icons/other';
+
+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, 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, 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 = (_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(HealthToolFormWrapper.Control, null,
+            React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'), { error: null }))),
+        form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender)),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
+                React__default.createElement(DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date(), rightSection: null }, 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({
+        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 } }, formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+export { BabyVaccineForm as B };

package/build/esm/{index-21256394.js → index-6153901b.js}

@@ -2,7 +2,7 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-7dadf4a1.js';
+import { theme } from './miscTheme.js';
 
 const MONTHS_TRANSLATION = {
     'vi-VN': [