@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index-ac2a8f95.js

@@ -0,0 +1,1114 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-06ba3978.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect, useRef } from 'react';
+import { format } from 'date-fns';
+import { useMantineTheme, Group, createStyles, rem, Box } from '@mantine/core';
+import { useForm, isNotEmpty } from '@mantine/form';
+import dayjs from 'dayjs';
+import { R as Radio, c as Input, S as Select } from './index-9b3a8b6d.js';
+import { D as DatePicker } from './index-7c384ae6.js';
+import { T as Text } from './index-5723381f.js';
+import { B as Button } from './index-1d3c6ce7.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import { u as useTranslations } from './useTranslations-b970f667.js';
+import '@mantine/hooks';
+import './index-189d7601.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import './utils-d7bbdb52.js';
+import './useMantineLocale-453f8013.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1, d as domainLocales } from './index-6210f454.js';
+import { H as HealthToolFormWrapper, I as INPUT_RANGE } from './constants-fa475b0f.js';
+import { CalendarMB } from '@hhgtech/icons/other';
+import { Controller, useForm as useForm$1 } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-6ce1724e.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-a5827634.js';
+import { G as GenderOptionControl } from './index-8eb04f36.js';
+import '@mantine/dates';
+
+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" })));
+};
+
+const LastPeriod = (_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: "M26.954 27.37H8.18a2.353 2.353 0 0 1-2.347-2.347V8.597A2.353 2.353 0 0 1 8.181 6.25l11.803 2.347 6.97-2.347A2.354 2.354 0 0 1 29.3 8.597v16.426a2.353 2.353 0 0 1-2.346 2.347", fill: "#E0E9FB" }),
+        React__default.createElement("path", { d: "M22.706 22.677H6.256c-1.337 0-2.229-1.338-1.736-2.582l1.314-3.285V8.597A2.353 2.353 0 0 1 8.181 6.25h16.426a2.353 2.353 0 0 1 2.346 2.347v8.213l-1.642 4.107a2.81 2.81 0 0 1-2.605 1.76", fill: "#FFE9F1" }),
+        React__default.createElement("path", { d: "M24.607 28.074H8.18a3.044 3.044 0 0 1-3.05-3.05c0-.4.304-.705.703-.705.4 0 .704.305.704.704 0 .915.728 1.643 1.643 1.643h16.426c.915 0 1.643-.728 1.643-1.643v-2.346c0-.4.305-.704.703-.704.4 0 .704.305.704.704v2.346c0 1.69-1.36 3.05-3.05 3.05", fill: "#202135" }),
+        React__default.createElement("path", { d: "M24.607 5.547h-.47v-.47A1.883 1.883 0 0 0 22.26 3.2a1.883 1.883 0 0 0-1.877 1.877v2.347c0 1.032.845 1.877 1.877 1.877a.69.69 0 0 0 .704-.704.69.69 0 0 0-.704-.704.47.47 0 0 1-.469-.47V5.078a.47.47 0 0 1 .47-.47.47.47 0 0 1 .469.47V6.25c0 .4.305.704.704.704h1.173c.915 0 1.643.728 1.643 1.643v6.406a8.8 8.8 0 0 1-.61 3.215l-.963 2.417a2.14 2.14 0 0 1-1.97 1.337H6.256c-.4 0-.751-.187-.962-.516a1.22 1.22 0 0 1-.118-1.103l.657-1.619c.47-1.197.728-2.464.728-3.754V8.597c0-.915.727-1.643 1.642-1.643h1.174a.69.69 0 0 0 .704-.704.69.69 0 0 0-.704-.703H8.204a3.044 3.044 0 0 0-3.05 3.05v6.406a8.8 8.8 0 0 1-.61 3.215l-.657 1.62c-.329.797-.211 1.689.258 2.416a2.59 2.59 0 0 0 2.135 1.127h16.45a3.49 3.49 0 0 0 3.261-2.206l.962-2.417c.47-1.197.728-2.464.728-3.755V8.597a3.08 3.08 0 0 0-3.074-3.05", fill: "#202135" }),
+        React__default.createElement("path", { d: "M12.874 9.301a.69.69 0 0 0 .704-.704.69.69 0 0 0-.704-.704.47.47 0 0 1-.469-.47V5.078a.47.47 0 0 1 .47-.47.47.47 0 0 1 .469.47V6.25c0 .4.305.704.704.704h4.693a.69.69 0 0 0 .704-.704.69.69 0 0 0-.704-.703h-3.99v-.47A1.883 1.883 0 0 0 12.875 3.2a1.883 1.883 0 0 0-1.877 1.877v2.347c0 1.032.845 1.877 1.877 1.877", fill: "#202135" }),
+        React__default.createElement("path", { d: "M21.087 16.81a1.16 1.16 0 0 1-1.173-1.173c0-.657.516-1.174 1.173-1.174s1.174.517 1.174 1.174-.517 1.173-1.174 1.173", fill: "#E85388" }),
+        React__default.createElement("path", { d: "M11.7 13.29a1.16 1.16 0 0 1-1.172-1.173c0-.657.516-1.173 1.173-1.173s1.173.516 1.173 1.173-.516 1.173-1.173 1.173m4.694 0a1.16 1.16 0 0 1-1.173-1.173c0-.657.516-1.173 1.173-1.173s1.173.516 1.173 1.173-.516 1.173-1.173 1.173m4.693 0a1.16 1.16 0 0 1-1.173-1.173c0-.657.516-1.173 1.173-1.173s1.174.516 1.174 1.173-.517 1.173-1.174 1.173m-9.386 3.52a1.16 1.16 0 0 1-1.173-1.173c0-.657.516-1.174 1.173-1.174s1.173.517 1.173 1.174-.516 1.173-1.173 1.173m4.693 0a1.16 1.16 0 0 1-1.173-1.173c0-.657.516-1.174 1.173-1.174s1.173.517 1.173 1.174-.516 1.173-1.173 1.173m3.778 3.403c-.657 0-1.08-.47-.962-1.056.117-.587.727-1.056 1.384-1.056s1.08.469.963 1.056c-.118.586-.728 1.056-1.385 1.056m-4.693 0c-.657 0-1.08-.47-.962-1.056.117-.587.727-1.056 1.384-1.056s1.08.469.962 1.056c-.117.586-.727 1.056-1.384 1.056m-5.655-1.056c-.118.586.305 1.056.962 1.056s1.267-.47 1.384-1.056c.118-.587-.305-1.056-.962-1.056s-1.267.469-1.384 1.056", fill: "#9898A9" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("rect", { y: "2.235", width: "22.05", height: "17.15", rx: "2", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M0 4.235a2 2 0 0 1 2-2h18.05a2 2 0 0 1 2 2V5.91H0z", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M17.135 1h-.05c-.553 0-1.001.449-1.001 1.002v1.637a1 1 0 0 0 1.001 1.001h.05c.553 0 1.002-.448 1.002-1.001V2.002c0-.553-.449-1.002-1.002-1.002M4.275 4.64h.05c.553 0 1.002-.448 1.002-1.001V2.002C5.327 1.449 4.878 1 4.325 1h-.05c-.553 0-1.002.449-1.002 1.002v1.637c0 .553.449 1.001 1.002 1.001", fill: "#284A75" }),
+        React__default.createElement("path", { d: "M4.717 9.752H3.96a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757a.627.627 0 0 0 .627-.627v-.894a.627.627 0 0 0-.627-.627m4.17 0h-.758a.627.627 0 0 0-.627.627v.894c0 .346.281.627.627.627h.758a.627.627 0 0 0 .627-.627v-.894a.627.627 0 0 0-.627-.627m4.168 0h-.757a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757a.627.627 0 0 0 .627-.627v-.894a.627.627 0 0 0-.627-.627m4.434 0h-.758a.627.627 0 0 0-.626.627v.894c0 .346.28.627.626.627h.758a.627.627 0 0 0 .627-.627v-.894a.627.627 0 0 0-.627-.627M4.675 13.635h-.757a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757c.346 0 .627-.28.627-.627v-.894a.627.627 0 0 0-.627-.627m4.169 0h-.757a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757c.346 0 .627-.28.627-.627v-.894a.627.627 0 0 0-.627-.627m4.169 0h-.757a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757c.346 0 .627-.28.627-.627v-.894a.627.627 0 0 0-.627-.627m4.434 0h-.757a.627.627 0 0 0-.627.627v.894c0 .346.28.627.627.627h.757c.346 0 .627-.28.627-.627v-.894a.627.627 0 0 0-.627-.627", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M20.36 13.836c-.734-.081-.88 1.444-1.905 2.66-.6.713-1.388 1.914-1.49 2.978-.097 1.02.186 3.508 3.23 3.704q.52.03 1.038-.037c3.027-.562 2.92-3.343 2.63-4.326-.3-1.026-1.272-2.093-1.879-2.66-1.122-1.045-.936-2.244-1.624-2.32", fill: "#FF6F4D" }),
+        React__default.createElement("path", { d: "M22.14 17.4c.057.214-.222.393-.387.059-.14-.284-.08-.38.029-.404.114-.026.31.168.358.345", fill: "#fff" })));
+};
+
+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$4 = () => {
+    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$4 = () => {
+    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$5 = () => {
+    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$4, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$5, null)) : (React__default.createElement(DefaultLayout$4, 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$3 = () => {
+    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$3 = () => {
+    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$4 = () => {
+    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$3, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$4, null)) : (React__default.createElement(DefaultLayout$3, 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$2 = () => {
+    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$2 = () => {
+    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$3 = () => {
+    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$2, null)) : isMarryBaby ? (React__default.createElement(MbLayout$3, 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 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$2;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType$2 || (OvulationCalculatorType$2 = {}));
+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))));
+};
+
+const BmiFormContext = createContext({});
+
+const DefaultForm$2 = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+            } }),
+        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '25',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '170',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+            } }),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm$2 = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
+            } }),
+        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                            content: '25',
+                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
+            } }),
+        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '170',
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '60',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
+
+function getBmi({ weight: weightProps, height: heightProps, }) {
+    const height = heightProps / 100;
+    const weight = weightProps;
+    return Math.round((weight / (height * height)) * 10) / 10;
+}
+
+const BmiForm = (_a) => {
+    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
+    const [isTouched, setIsTouched] = useState(false);
+    const { control, handleSubmit, setValue, watch } = useForm$1();
+    const data = watch();
+    const { locale } = useTranslations();
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        const height = bmiUnit.heightConvert(data.height);
+        const weight = bmiUnit.weightConvert(data.weight);
+        const submitValue = {
+            gender: data.gender,
+            age: data.age,
+            height,
+            weight,
+            bmi: getBmi({ height, weight }),
+        };
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    useEffect(() => {
+        Object.keys(valueProps || {}).forEach((k) => {
+            const key = k;
+            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
+                shouldTouch: false,
+                shouldDirty: false,
+                shouldValidate: false,
+            });
+        });
+    }, [valueProps]);
+    useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default.createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$2, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$2, Object.assign({}, commonProps)))));
+};
+
+var useStyles = createStyles((theme, { hasOnClickFn }) => {
+    return {
+        root: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(16),
+        },
+        sponsorBox: {
+            display: 'flex',
+            gap: rem(12),
+            alignItems: 'center',
+            backgroundColor: theme.colors.neutral[0],
+            border: `1px solid ${theme.colors.neutral[1]}`,
+            borderRadius: rem(4),
+            padding: '4px 12px',
+            alignSelf: 'flex-start',
+        },
+        sponsorLogo: {
+            maxHeight: rem(32),
+        },
+        btn: {
+            minWidth: rem(180),
+            [theme.fn.largerThan('sm')]: {
+                alignSelf: 'flex-end',
+            },
+            visibility: hasOnClickFn ? 'visible' : 'hidden',
+        },
+    };
+});
+
+const BabyPoopForm = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
+    const { t } = useTranslations();
+    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
+        sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
+            React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
+            React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+        React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
+        React__default.createElement(Button, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
+};
+
+const ThrFormContext = createContext({});
+
+const DefaultForm$1 = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
+        React__default.createElement(Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                content: '60',
+            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                rightSection: {
+                    width: 'auto',
+                },
+            }) })),
+        isAdult && (React__default.createElement(Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                value: option.value,
+                label: option.label,
+            })), styles: {
+                item: {
+                    whiteSpace: 'nowrap',
+                    padding: '10px 12px',
+                    fontSize: '14px',
+                },
+            }, withinPortal: true }, form.getInputProps('activeValue')))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm$1 = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
+                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, 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('targetHeartRate.ageInput') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default.createElement(Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default.createElement(Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError, submitProps } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
+    const { t, locale } = useTranslations();
+    const minRange = useRef(40);
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const form = useForm({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            age: isNotEmpty(t('validation.error.requiredField')),
+            heartRate: (value) => {
+                return Number(value) >= minRange.current && Number(value) <= 200
+                    ? null
+                    : t('tools.heartRateRangeErr', {
+                        min: minRange.current,
+                        max: 200,
+                    });
+            },
+        },
+    });
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
+    const [isAdult, setIsAdult] = useState(false);
+    const rangeHeartRateByAge = [
+        {
+            idAge: 0,
+            minAge: 0,
+            maxAge: 18,
+            rangeMale: 40,
+            rangeFemale: 40,
+        },
+        {
+            idAge: 1,
+            minAge: 18,
+            maxAge: 25,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 2,
+            minAge: 25,
+            maxAge: 35,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 3,
+            minAge: 35,
+            maxAge: 45,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 4,
+            minAge: 45,
+            maxAge: 55,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 5,
+            minAge: 55,
+            maxAge: 65,
+            rangeMale: 51,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 6,
+            minAge: 65,
+            maxAge: 120,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+    ];
+    const activeValueNote = [
+        {
+            value: 'low_intensity',
+            label: t('targetHeartRate.lowIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/low.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/low-active.svg`),
+            content: t('targetHeartRate.lowIntensity.note'),
+        },
+        {
+            value: 'moderate_intensity',
+            label: t('targetHeartRate.moderateIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/moderate.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/moderate-active.svg`),
+            content: t('targetHeartRate.moderateIntensity.note'),
+        },
+        {
+            value: 'aerobic_zone',
+            label: t('targetHeartRate.aerobicZone.title'),
+            image: CommonGAssets.getAssetPath(`/aerobic.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/aerobic-active.svg`),
+            content: t('targetHeartRate.aerobicZone.note'),
+        },
+        {
+            value: 'vigorous_intensity',
+            label: t('targetHeartRate.vigorousIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/vigorous.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/vigorous-active.svg`),
+            content: t('targetHeartRate.vigorousIntensity.note'),
+        },
+        {
+            value: 'maximum_intensity',
+            label: t('targetHeartRate.maximumIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/maximum.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/maximum-active.svg`),
+            content: t('targetHeartRate.maximumIntensity.note'),
+        },
+    ];
+    useEffect(() => {
+        const ageDate = form.getInputProps('age').value;
+        const gender = form.getInputProps('gender').value;
+        if (ageDate instanceof Date) {
+            const age = (new Date().getTime() - ageDate.getTime()) / 1000;
+            if (age >= 18 * 365 * 24 * 60 * 60)
+                setIsAdult(true);
+            else
+                setIsAdult(false);
+            const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
+                age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
+            minRange.current =
+                gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
+        }
+    }, [form]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form.onSubmit(onSubmit, onError) });
+    return (React__default.createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$1, Object.assign({}, commonProps)))));
+};
+
+const AvoidPregnancy = (_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 0 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: "M12.5 16a4 4 0 1 1 8 0 4 4 0 0 1-8 0", fill: "#fff" }),
+        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.266m-4 9.8a2.667 2.667 0 1 1-5.333 0 2.667 2.667 0 0 1 5.333 0", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M10.305 22.195c.26.26.26.683 0 .943l-1.91 1.91c-.36.36-.562.847-.562 1.355a3.25 3.25 0 0 1-1.796 2.907l-1.239.62a.667.667 0 1 1-.596-1.193l1.238-.62a1.92 1.92 0 0 0 1.06-1.714c0-.862.342-1.688.952-2.298l1.91-1.91c.26-.26.682-.26.943 0", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M3.874 4.788a1 1 0 0 1 1.414-1.414l23.099 23.098a1 1 0 1 1-1.415 1.415z", fill: "#E85388" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("g", { clipPath: "url(#clip0_1530_7251)" },
+            React__default.createElement("path", { d: "M8.983 10.87a.23.23 0 0 1 .049-.16c.08-.114.156-.229.207-.36.1-.166.168-.348.233-.528.246-.668.397-1.36.508-2.062.036-.235.076-.471.09-.71.065-.511.101-1.024.095-1.541.004-.015.011-.03.011-.044a13 13 0 0 0-.089-1.62c-.023-.196-.093-.335-.298-.406-.293-.1-.48-.316-.568-.615a2.7 2.7 0 0 0-.217-.566c-.123-.222-.29-.391-.54-.47-.057-.018-.088-.016-.106.052q-.045.165-.073.336c-.005.044 0 .058.048.058q.122.005.244.017c.127.009.21.09.202.196-.011.111-.108.179-.239.166-.065-.007-.133-.009-.198-.016-.058-.008-.077.016-.067.072q.027.165.052.332c.006.043.031.053.07.053.078 0 .147-.03.218-.057.104-.042.2-.004.242.093.04.09.004.187-.093.235-.13.063-.27.113-.411.085a.23.23 0 0 0-.235.077c-.04-.084-.106-.146-.167-.211-.46-.475-.55-1.194-.235-1.82.18-.359.45-.627.828-.776A.4.4 0 0 0 8.69.595c.33-.317.734-.477 1.172-.55.641-.11 1.25-.024 1.819.3.41.233.728.566.942.983.131.253.188.535.246.814.16.762.233 1.538.293 2.313q.108 1.411.213 2.826c.055.712.13 1.422.24 2.128.066.428.175.846.26 1.27.097.479.039.941-.24 1.358a1.2 1.2 0 0 1-.517.428c-.163.05-.327.105-.491.155-.178.052-.302-.059-.268-.239a4.6 4.6 0 0 0 .077-.72 13.6 13.6 0 0 0-.133-2.225c-.03-.196-.055-.395-.087-.591-.07-.43-.151-.857-.257-1.28l-.015-.07a16 16 0 0 0-.282-1.03c-.012-.039-.025-.079-.076-.075-.038.003-.053.034-.058.07l-.146 1.105c-.05.219-.094.437-.158.652a5.5 5.5 0 0 1-.806 1.654l-.091.113c-.308.382-.654.719-1.094.95-.122.06-.177.048-.252-.063", fill: "#1B3250" }),
+            React__default.createElement("path", { d: "M12.304 9.435c.1.737.154 1.477.133 2.224a4.6 4.6 0 0 1-.077.72c-.034.182.09.293.268.239q.246-.075.491-.155c.053.226.126.448.17.675q.09.452.129.912c.025.302.043.603.032.905q-.015.483-.065.964a14 14 0 0 1-.299 1.707c-.02.086-.045.17-.065.255-.02.09-.068.12-.16.12L8.789 18H7.781c-.111 0-.117-.011-.13-.124a3 3 0 0 0-.361-1.121c-.132-.235-.297-.448-.415-.692a3.14 3.14 0 0 1-.324-1.521c.233.07.418.001.571-.184q.236-.281.477-.559c.07-.08.136-.164.244-.193.315-.087.631-.166.94-.262.665-.207 1.324-.43 1.917-.804.251-.159.475-.344.595-.63.237-.564.415-1.147.592-1.733.085-.28.184-.55.417-.742", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M12.304 9.435c-.233.194-.33.462-.413.74-.177.585-.355 1.169-.592 1.733-.12.286-.344.471-.595.63-.593.375-1.254.597-1.916.804-.312.097-.628.177-.941.262-.11.031-.177.113-.244.193q-.24.277-.477.559c-.153.184-.34.253-.571.184a.87.87 0 0 1-.44-.54.64.64 0 0 1 .045-.503 1 1 0 0 0 .094-.31.47.47 0 0 1 .392-.405c.132-.03.269-.039.404-.053a.4.4 0 0 0 .114-.024c.115-.009.21-.069.31-.12.322-.167.646-.328.966-.497q.586-.308 1.192-.571a.78.78 0 0 0 .473-.524q.09-.305.177-.608c.047-.171.113-.337.14-.514a5.5 5.5 0 0 0 .806-1.654c.064-.215.108-.433.159-.652a.63.63 0 0 1 .342-.054c.08.013.156.036.237.054.105.423.187.85.256 1.28q.039.292.082.59m-4.19-5.947a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.071.027-.14.056-.218.056-.039 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.198.017.131.013.228-.053.239-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.046 0-.053-.014-.047-.058.016-.115.043-.224.072-.337.017-.067.05-.069.106-.05.25.078.417.247.54.469.1.178.16.371.217.566.087.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.272-.016-.525.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.309-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.013-.319.06-.07.126-.134.186-.202", fill: "#FCCAAF" }),
+            React__default.createElement("path", { d: "M10.069 7.052c-.013.239-.053.473-.09.71-.11.7-.261 1.394-.507 2.062-.066.18-.135.362-.233.528a.46.46 0 0 0-.235-.4c-.328-.21-.544-.508-.599-.898a.86.86 0 0 1 .242-.742c.237-.244.504-.459.761-.683.188-.162.37-.327.555-.493.033-.031.064-.064.106-.084m.349 2.818c-.025.176-.093.341-.14.513-.057.204-.119.404-.177.608a.78.78 0 0 1-.473.524q-.607.261-1.192.571c-.32.17-.646.33-.966.497-.099.051-.195.111-.31.12.066-.15.177-.266.277-.387.273-.334.615-.596.932-.881q.306-.28.611-.565c.077.11.13.124.251.06.439-.229.787-.567 1.094-.95z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M8.271 4.49a1 1 0 0 0 .377-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" }),
+            React__default.createElement("path", { d: "M11.96 7.563c-.079-.018-.157-.041-.237-.054a.65.65 0 0 0-.342.054l.146-1.104c.005-.037.02-.068.058-.071.05-.006.063.034.076.074q.159.511.282 1.03.01.036.017.071", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M9.834 1.004a7.996 7.996 0 1 0 0 15.992 7.996 7.996 0 0 0 0-15.992M9.465 2.26c1.606-.09 3.191.4 4.467 1.378a.282.282 0 0 1 .03.424l-9.066 9.066a.283.283 0 0 1-.424-.03A6.749 6.749 0 0 1 9.465 2.26m.369 13.49a6.72 6.72 0 0 1-4.016-1.325.284.284 0 0 1-.032-.426l9.046-9.047a.283.283 0 0 1 .427.032A6.75 6.75 0 0 1 9.834 15.75", fill: "#F44D2C" }),
+            React__default.createElement("path", { d: "M10.159 5.509c.005.517 2.997-1.054 2.997-1.054s-.133-1.55-.293-2.313c-.058-.279-.114-.56-.245-.814a2.35 2.35 0 0 0-.943-.983c-.568-.324-1.178-.41-1.818-.3-.44.073-.843.233-1.173.55a.4.4 0 0 1-.147.085c-.379.15-.648.417-.828.776-.315.626-.224 1.345.235 1.82.062.065.127.127.167.21a.23.23 0 0 1 .235-.076c.142.028.282-.022.411-.085.097-.048.133-.144.093-.235-.042-.097-.138-.135-.242-.093-.071.027-.14.057-.218.057-.039 0-.064-.01-.07-.053q-.024-.165-.052-.332c-.01-.056.009-.08.067-.072.066.007.133.009.198.016.131.013.228-.055.239-.166.009-.105-.075-.187-.202-.196h-.007q-.118-.013-.237-.017c-.047 0-.053-.014-.047-.058.016-.114.043-.225.072-.336.019-.068.05-.07.106-.051.25.078.417.247.54.47.099.178.16.37.217.565.087.299.275.515.568.615.206.071.275.21.298.406.066.539.091 1.078.09 1.62z", fill: "#1B3250" }),
+            React__default.createElement("path", { d: "M8.107 3.488a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.07.027-.14.056-.218.056-.038 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.199.017.13.013.227-.053.238-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.045 0-.053-.014-.047-.058.016-.115.043-.224.073-.337.016-.067.049-.069.105-.05.25.078.417.247.54.469.1.178.16.371.217.566.088.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.271-.016-.524.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.31-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.012-.319.06-.07.125-.134.185-.202", fill: "#FCCAAF" }),
+            React__default.createElement("path", { d: "M8.265 4.49a1 1 0 0 0 .376-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_1530_7251" },
+                React__default.createElement("path", { fill: "#fff", d: "M.834 0h18v18h-18z" })))));
+};
+
+const TryConceive = (_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: "M14.018 9.155c-1.422 1.066-1.777 1.777-1.067 2.843.57.853 2.133 2.488 3.2 3.554-.712 2.133-6.753 1.422-6.753 1.422l-.711 1.421-1.067 3.199c-1.066 0-3.198.142-3.198.71 0 .712 2.843 2.844 3.554 2.844.569 0 1.658-2.132 2.132-3.199 1.54 1.777 5.474 4.905 8.885 3.199 4.265-2.132 6.398-5.331 5.687-7.819-.274-.959-.284-1.495-.132-1.813a4.62 4.62 0 0 0 3.438-2.3c.715-1.108.78-2.417.397-3.652-.41-1.663-1.15-2.955-2.637-3.252-3.423-.685-6.397 1.016-6.397 4.62a4.6 4.6 0 0 0 .971 2.834c-1.184.316-2.414-.236-6.302-4.611", fill: "#fff" }),
+        React__default.createElement("path", { d: "M29.3 10.825A5.235 5.235 0 0 0 24.077 5.6c-2.876 0-5.245 2.348-5.245 5.224 0 .36.275.634.634.634.36 0 .635-.275.635-.634 0-2.179 1.776-3.955 3.976-3.955s3.954 1.776 3.954 3.955a3.947 3.947 0 0 1-3.531 3.933.8.8 0 0 0-.381-.021c-.042.021-.085.021-.106.042a.64.64 0 0 0-.57.635c0 .254.147.465.359.57.105.487.148.995.148 1.502a7.175 7.175 0 0 1-7.17 7.17 7.22 7.22 0 0 1-5.773-2.898l-.02-.021c.507-.317 1.902-.17 2.41-.106a.637.637 0 0 0 .698-.57.637.637 0 0 0-.571-.699c-1.184-.148-3.384-.38-3.891 1.164-.064.19-.127.401-.19.592-.318.994-.74 2.347-1.27 2.58-.634.063-2.918-1.587-3.172-2.284.212-.275 1.248-.444 2.623 0 .169.063.36.042.507-.064s.275-.232.296-.423c.571-2.707.74-3.278.74-3.299v-.021c.212-.888.867-.973 2.538-.93 1.523.042 3.384.084 4.674-1.46a7.8 7.8 0 0 0 3.235.994h.043a.643.643 0 0 0 .634-.592c.021-.36-.232-.655-.57-.677-4.4-.36-6.028-4.652-6.091-4.842 0 0 0-.022-.022-.022-.274-.634-.063-1.036.19-1.163.17-.105.445-.105.614.17 1.248 2.008 2.432 3.32 3.574 4.018.021 0 .042.02.042.02.677.34 2.052.762 3.596-.295.296-.19.359-.592.169-.889-.19-.296-.592-.36-.889-.169-.951.635-1.776.487-2.305.233-.93-.571-1.988-1.777-3.108-3.574-.508-.783-1.48-1.036-2.284-.613-.762.401-1.312 1.438-.762 2.77.085.254.93 2.368 2.898 3.934a2.7 2.7 0 0 1-.614.486c-.02 0-.02 0-.042-.021-8.205-2.517-8.86-8.586-8.924-9.77a.61.61 0 0 0-.656-.614.63.63 0 0 0-.592.656c.042 1.226.655 7.084 7.74 10.172h-.508c-1.48-.042-3.34-.085-3.806 1.882-.021.106-.17.677-.613 2.707-1.587-.36-3.194-.127-3.574 1.036-.19.55.126 1.206.972 2.01.571.549 2.263 1.902 3.447 1.902.149 0 .297-.02.423-.063.952-.36 1.438-1.544 1.861-2.813a8.48 8.48 0 0 0 6.324 2.855c4.652 0 8.438-3.785 8.438-8.438 0-.507-.043-1.015-.148-1.522a5.264 5.264 0 0 0 4.23-5.16", fill: "#3E3F58" }),
+        React__default.createElement("rect", { x: "23.005", y: "8.444", width: "1.942", height: "1.422", rx: ".711", transform: "rotate(34.869 23.005 8.444)", fill: "#FB8C00" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M13.996 8.62v3.221c1.054.035 1.682-.705 1.845-1.467.209-.977-.444-2.041-1.845-1.754", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M14.055 10.67a.21.21 0 0 1-.2-.277c.166-.508.594-.69.92-.644a.21.21 0 1 1-.059.418c-.163-.023-.37.079-.461.358a.21.21 0 0 1-.2.145", fill: "#FF886C" }),
+        React__default.createElement("path", { d: "M2.16 10.374c.162.762.79 1.502 1.844 1.467V8.62c-1.4-.287-2.054.777-1.845 1.754", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M3.98 10.67a.21.21 0 0 1-.2-.145c-.093-.28-.299-.381-.462-.358a.21.21 0 0 1-.21-.102.21.21 0 0 1 .152-.316c.326-.046.753.136.92.644a.21.21 0 0 1-.2.277", fill: "#FF886C" }),
+        React__default.createElement("path", { d: "M9 15.831c1.325 0 3.365-.561 4.534-2.292 1.057-1.563.436-4.144.462-5.169.053-2.079-1.447-4.78-4.996-4.78s-5.05 2.7-4.996 4.78c.026 1.025-.595 3.606.461 5.169 1.17 1.73 3.21 2.292 4.535 2.292", fill: "#FECCBF" }),
+        React__default.createElement("path", { d: "M6.881 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
+        React__default.createElement("path", { d: "M7.114 9.777a.21.21 0 0 1-.188-.116c-.049-.097-.205-.122-.27-.129-.225-.022-.44.056-.477.104a.211.211 0 1 1-.347-.241c.149-.215.53-.306.831-.285.306.021.533.15.64.362a.21.21 0 0 1-.189.305", fill: "#8C2F39" }),
+        React__default.createElement("path", { d: "M11.119 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
+        React__default.createElement("path", { d: "M9 13.329c.777 0 .994-.61 1.046-.92.031-.185-.132-.35-.34-.35H8.293c-.208 0-.371.165-.34.35.052.31.27.92 1.047.92", fill: "#D84023" }),
+        React__default.createElement("path", { d: "M10.763 7.94a.2.2 0 0 1-.107-.03.33.33 0 0 0-.18-.029.21.21 0 1 1-.07-.416.74.74 0 0 1 .464.081.211.211 0 0 1-.107.393m-3.526 0a.21.21 0 0 1-.107-.393.74.74 0 0 1 .463-.08.211.211 0 1 1-.07.415.3.3 0 0 0-.18.029.2.2 0 0 1-.106.029", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M10.887 9.777a.21.21 0 0 1-.189-.305c.107-.212.334-.34.64-.362.3-.021.682.07.83.285a.211.211 0 0 1-.346.24c-.038-.048-.252-.125-.477-.103-.065.007-.221.032-.27.129a.21.21 0 0 1-.188.116", fill: "#8C2F39" }),
+        React__default.createElement("path", { d: "M9.284 11.02a.21.21 0 0 1-.22-.15.07.07 0 0 0-.063-.05H9a.07.07 0 0 0-.064.05.21.21 0 0 1-.22.15.22.22 0 0 1-.192-.244c.018-.221.213-.379.476-.379.264 0 .458.158.476.38a.22.22 0 0 1-.192.244", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M9.55 12.06h-1.1l-.003.054a.552.552 0 1 0 1.102-.055m2.041-.774-.29.53a.1.1 0 0 1-.041.04l-.53.29a.1.1 0 0 0-.053.09.1.1 0 0 0 .053.09l.53.29q.026.015.04.04l.29.53a.103.103 0 0 0 .18 0l.29-.53a.1.1 0 0 1 .041-.04l.53-.29a.103.103 0 0 0 0-.18l-.53-.29a.1.1 0 0 1-.04-.04l-.29-.53a.1.1 0 0 0-.143-.039.1.1 0 0 0-.038.04", fill: "#fff" }),
+        React__default.createElement("path", { d: "M11.055 2.193c-.147-.422-.524-.698-1.01-.738a.9.9 0 0 0-.535.154c-.206.155-.37.358-.478.592a.036.036 0 0 1-.066 0 1.55 1.55 0 0 0-.475-.592.9.9 0 0 0-.537-.154c-.485.04-.862.316-1.008.739a1.03 1.03 0 0 0 .259 1.09c.479.447 1.156.518 1.543.518h.502c.387 0 1.066-.07 1.545-.517a1.03 1.03 0 0 0 .26-1.092M8.79 3.243a.13.13 0 0 1-.134.135c-.316-.012-.821-.084-1.163-.402a.61.61 0 0 1-.148-.644.66.66 0 0 1 .438-.417c.242-.078.404-.006.456.033.446.33.539.932.551 1.295m1.718-.267c-.342.319-.847.39-1.163.402a.13.13 0 0 1-.135-.135c.013-.362.105-.964.551-1.295a.47.47 0 0 1 .25-.073c.318.027.554.193.645.457a.61.61 0 0 1-.149.644", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M8.998 3.338a.21.21 0 0 1 .122.383l-.04.028c-.16.118-.957.76-.991 1.758-.027.78.403 1.132.814 1.202.367.062.831-.096.985-.59a.415.415 0 0 0-.211-.52c-.136-.069-.32-.076-.425.064a.211.211 0 0 1-.337-.253c.215-.287.607-.363.954-.186a.836.836 0 0 1 .422 1.02 1.28 1.28 0 0 1-1.458.88c-.56-.095-1.202-.58-1.166-1.631.046-1.334 1.17-2.093 1.222-2.125a.2.2 0 0 1 .109-.03", fill: "#BA8288" })));
+};
+
+const OvulationFormContext = createContext({});
+
+const DefaultLayout$1 = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods, isMobile } = useContext(OvulationFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.Control, null,
+            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType')))),
+        React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                withinPortal: true,
+            }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
+        React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default.createElement(Input.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$1 = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
+            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+                React__default.createElement(Input.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.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$2 = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.Control, null,
+            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
+                React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), 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('lastPeriodDate')))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
+            React__default.createElement(Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        form.errors.cycleLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
+            React__default.createElement(Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        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'))));
+};
+
+var OvulationCalculatorType$1;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType$1 || (OvulationCalculatorType$1 = {}));
+const OvulationForm = (_a) => {
+    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({
+        initialValues: {
+            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);
+    const calculatingMethods = [
+        {
+            label: t('ovulationPage.trackPeriod'),
+            value: OvulationCalculatorType$1.trackPeriod,
+            icon: React__default.createElement(LastPeriod, null),
+        },
+        {
+            label: t('ovulationPage.conceive'),
+            value: OvulationCalculatorType$1.conceive,
+            icon: React__default.createElement(TryConceive, null),
+        },
+        {
+            label: t('ovulationPage.avoidPregnancy'),
+            value: OvulationCalculatorType$1.avoidPregnancy,
+            icon: React__default.createElement(AvoidPregnancy, null),
+        },
+    ];
+    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form, isMobile, calculatingMethods } }, formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout$2, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
+};
+
+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$1 = (_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$1, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+const PWGFormContext = createContext({});
+
+const DefaultForm = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
+        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                content: '50',
+            }) }, form.getInputProps('lastWeight'))),
+        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                content: '160',
+            }) }, form.getInputProps('height'))),
+        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                content: '50',
+            }) }, form.getInputProps('weight'))),
+        React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineForm = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+            React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+            React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
+                React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
+            form.errors.pregnantWeek && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
+                React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.lastWeight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
+                React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }) }))),
+            form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
+                React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight))),
+        React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const PWGForm = (_a) => {
+    var { formLayout = 'default', submitProps, onSubmit } = _a, rest = __rest(_a, ["formLayout", "submitProps", "onSubmit"]);
+    const { t, locale } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form = useForm({
+        validate: {
+            pregnantWeek: isNotEmpty(t('validation.error.requiredField')),
+            height: isNotEmpty(t('validation.error.requiredField')),
+            weight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) >= Number(values.lastWeight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+            lastWeight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) < Number(values.weight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+        },
+    });
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
+    const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, rest);
+    return (React__default.createElement(PWGFormContext.Provider, { value: {
+            linkTool,
+            form,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+export { BmiForm as B, DueDateForm as D, OvulationForm as O, PWGForm as P, ThrForm as T, BabyPoopForm as a, BabyVaccineForm as b };