@hhgtech/hhg-components 1.29.363 → 1.29.366

package/build/esm/index-ca66f558.js

@@ -0,0 +1,687 @@
+import { _ as __rest } from './tslib.es6-15c2e195.js';
+import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
+import { useMantineTheme, Group, Box, Flex, Tooltip } from '@mantine/core';
+import { L as LastPeriod } from './LastPeriod-af34acf2.js';
+import { format } from 'date-fns';
+import { useForm, isNotEmpty } from '@mantine/form';
+import dayjs from 'dayjs';
+import { R as Radio, I as Input, S as Select } from './index-05678974.js';
+import { D as DatePicker } from './index-8370d3c1.js';
+import { T as Text } from './index-7956ec12.js';
+import './index-26059e02.js';
+import './index.styles-d2bb504a.js';
+import { u as useTranslations } from './index-2580d3c9.js';
+import '@mantine/hooks';
+import './useMantineLocale-88384272.js';
+import './index-ece38d01.js';
+import './index-c03000ca.js';
+import './utils-daf4a70b.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-fab5cc57.js';
+import './other-505cec1b.js';
+import './index-1f89d63a.js';
+import { H as HealthToolFormWrapper } from './index-15ef5c89.js';
+import { CalendarMB } from '@hhgtech/icons/other';
+import { theme } from './miscTheme.js';
+import { L as LOCALE } from './Locale-b4732e5d.js';
+
+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 IUI = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("ellipse", { cx: "10", cy: "7.5", rx: "7.5", ry: "7.5", fill: "#91CAFF" }),
+        React__default.createElement("ellipse", { cx: "10", cy: "7.5", rx: "6", ry: "6", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M1.98877 13.5566C1.8483 13.5566 1.72914 13.4487 1.71769 13.3062C1.7056 13.1563 1.81732 13.025 1.9672 13.013C2.04819 13.0061 3.96085 12.8267 3.92397 11.2296C3.90887 10.5766 4.09013 10.0544 4.46266 9.6775C5.04496 9.08834 5.87737 9.09055 5.91289 9.09138C6.06324 9.09309 6.18376 9.21636 6.18204 9.36675C6.18033 9.51603 6.05877 9.63593 5.90985 9.63593C5.9091 9.63593 5.90835 9.63593 5.9076 9.63593C5.8958 9.63593 5.26174 9.64041 4.84671 10.0637C4.58418 10.3314 4.4569 10.7194 4.46838 11.2171C4.48874 12.0983 4.06094 12.7846 3.23124 13.202C2.63342 13.5027 2.03606 13.5537 2.01095 13.5558C2.00351 13.5563 1.99611 13.5566 1.98877 13.5566Z", fill: "#D2D6DC" }),
+        React__default.createElement("path", { d: "M0.834813 19.7487C0.823187 19.5988 0.935297 19.4678 1.08522 19.4562C1.16581 19.4496 3.06971 19.2768 3.02807 17.6868C3.011 17.0352 3.1904 16.5146 3.56121 16.1394C4.14076 15.5531 4.97192 15.5577 5.00687 15.5587C5.15722 15.5608 5.27734 15.6845 5.27516 15.8349C5.27301 15.9849 5.15117 16.106 4.99993 16.1032C4.99989 16.1032 4.99982 16.1032 4.99975 16.1032C4.98315 16.1032 4.35528 16.1074 3.9453 16.5255C3.68491 16.791 3.55946 17.177 3.57245 17.6725C3.59545 18.552 3.17051 19.2358 2.34353 19.6499C1.74807 19.948 1.15233 19.9971 1.12728 19.9991C0.976577 20.0107 0.846367 19.898 0.834813 19.7487Z", fill: "#D2D6DC" }),
+        React__default.createElement("path", { d: "M9.62226 5.59508C8.99818 4.971 7.44969 5.50769 6.62421 6.33313C6.1713 6.78604 5.91828 7.34408 5.88477 7.85874V7.99721L7.15753 9.28601L7.35857 9.33258C7.87323 9.29906 8.43127 9.04605 8.88418 8.59314C9.70966 7.76766 10.2463 6.21916 9.62226 5.59508Z", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M5.88516 7.85889L5.5611 8.69259C5.47325 8.91856 5.52723 9.17508 5.69865 9.3465L5.87139 9.51925C5.95823 9.60609 6.06693 9.66256 6.18243 9.68584C6.29486 9.70856 6.4137 9.70005 6.52509 9.65676L7.3588 9.3327L5.88516 7.85889Z", fill: "#91CAFF" }),
+        React__default.createElement("path", { d: "M8.99894 12.6201C8.97018 12.3889 8.88805 12.1875 8.73945 12.0389C8.11537 11.4149 6.56687 11.9515 5.7414 12.777C5.28849 13.2299 5.03547 13.7879 5.00195 14.3026V14.4411L6.27493 15.7298L6.47597 15.7764C6.99063 15.7429 7.54867 15.4898 8.00158 15.0369C8.63034 14.4081 9.09073 13.3598 8.99894 12.6201Z", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M5.00235 14.3027L4.67829 15.1364C4.59043 15.3624 4.64441 15.6189 4.81583 15.7904L4.98858 15.9631C5.07542 16.0499 5.18412 16.1064 5.29962 16.1297C5.41205 16.1524 5.53089 16.1439 5.64228 16.1006L6.47598 15.7766L5.00235 14.3027Z", 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 Ultrasound = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("g", { clipPath: "url(#clip0_5646_32454)" },
+            React__default.createElement("path", { d: "M17.278 1.47119H2.7207C2.03035 1.47119 1.4707 2.03084 1.4707 2.72119V17.2785C1.4707 17.9689 2.03035 18.5285 2.7207 18.5285H17.278C17.9684 18.5285 18.528 17.9689 18.528 17.2785V2.72119C18.528 2.03084 17.9684 1.47119 17.278 1.47119Z", fill: "#65B5FF" }),
+            React__default.createElement("path", { d: "M11.23 9.94794C12.1285 10.4395 11.7085 11.7187 10.9077 11.7734C10.1386 11.8261 9.79346 11.6067 9.12721 11.1589C8.74409 10.9014 8.11299 9.67872 7.93815 9.36872C7.74008 9.01332 7.58143 8.63733 7.46503 8.24747C7.31862 7.75122 7.71315 7.30122 8.03987 7.31731C8.09475 7.32086 8.14794 7.33765 8.19491 7.36625C8.24188 7.39485 8.28122 7.43441 8.30956 7.48153C8.3227 7.49619 8.33867 7.50803 8.3565 7.51636C8.37433 7.52469 8.39367 7.52933 8.41334 7.53C8.43301 7.53067 8.45261 7.52736 8.47097 7.52027C8.48933 7.51317 8.50607 7.50244 8.52018 7.48872C8.55856 7.44827 8.60864 7.42084 8.66339 7.41028C8.71814 7.39972 8.77482 7.40655 8.82549 7.42981C9.03081 7.56731 8.99503 7.80294 9.13081 8.11544C9.34088 8.4938 9.61306 8.83417 9.93596 9.12231C10.3217 9.44809 10.5785 9.59138 11.23 9.94794Z", fill: "#2B62CD" }),
+            React__default.createElement("path", { d: "M19.5332 1.54781C19.5129 1.54783 19.4928 1.54386 19.4741 1.53611C19.4553 1.52836 19.4383 1.51699 19.424 1.50265C19.4096 1.48832 19.3982 1.47129 19.3904 1.45255C19.3827 1.43381 19.3787 1.41372 19.3787 1.39344V0.932812C19.3784 0.850311 19.3455 0.771271 19.2872 0.712933C19.2288 0.654596 19.1498 0.621695 19.0673 0.621406H18.6066C18.5665 0.62013 18.5285 0.603298 18.5006 0.574472C18.4726 0.545646 18.457 0.507087 18.457 0.466953C18.457 0.42682 18.4726 0.38826 18.5006 0.359434C18.5285 0.330608 18.5665 0.313776 18.6066 0.3125H19.0673C19.2317 0.312707 19.3894 0.378127 19.5057 0.494414C19.622 0.6107 19.6874 0.768359 19.6876 0.932812V1.39344C19.6876 1.43438 19.6713 1.47365 19.6424 1.5026C19.6134 1.53155 19.5742 1.54781 19.5332 1.54781Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M0.689531 1.54789C0.648588 1.54789 0.609323 1.53163 0.580372 1.50268C0.551421 1.47372 0.535156 1.43446 0.535156 1.39352V0.932891C0.535363 0.768356 0.600848 0.610626 0.717236 0.494326C0.833623 0.378027 0.991403 0.312661 1.15594 0.312578H1.61641C1.6371 0.31192 1.65772 0.315428 1.67703 0.322893C1.69635 0.330359 1.71397 0.34163 1.72884 0.356038C1.74371 0.370445 1.75554 0.387695 1.76361 0.406762C1.77169 0.425829 1.77585 0.446324 1.77585 0.467031C1.77585 0.487738 1.77169 0.508234 1.76361 0.527301C1.75554 0.546368 1.74371 0.563618 1.72884 0.578025C1.71397 0.592432 1.69635 0.603703 1.67703 0.611169C1.65772 0.618635 1.6371 0.622143 1.61641 0.621484H1.15594C1.07325 0.621484 0.993926 0.654258 0.935352 0.712626C0.876779 0.770995 0.843727 0.8502 0.843437 0.932891V1.39352C0.843438 1.43438 0.827238 1.47357 0.798388 1.50251C0.769538 1.53145 0.730393 1.54777 0.689531 1.54789Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M19.0673 19.4648H18.6066C18.5665 19.4636 18.5285 19.4467 18.5006 19.4179C18.4726 19.3891 18.457 19.3505 18.457 19.3104C18.457 19.2702 18.4726 19.2317 18.5006 19.2029C18.5285 19.174 18.5665 19.1572 18.6066 19.1559H19.0673C19.1498 19.1556 19.2288 19.1227 19.2872 19.0644C19.3455 19.0061 19.3784 18.927 19.3787 18.8445V18.3841C19.378 18.3634 19.3815 18.3427 19.389 18.3234C19.3965 18.3041 19.4077 18.2865 19.4221 18.2716C19.4365 18.2567 19.4538 18.2449 19.4729 18.2368C19.4919 18.2288 19.5124 18.2246 19.5331 18.2246C19.5538 18.2246 19.5743 18.2288 19.5934 18.2368C19.6125 18.2449 19.6297 18.2567 19.6441 18.2716C19.6585 18.2865 19.6698 18.3041 19.6773 18.3234C19.6847 18.3427 19.6882 18.3634 19.6876 18.3841V18.8441C19.6875 19.0086 19.6221 19.1664 19.5058 19.2828C19.3895 19.3991 19.2318 19.4646 19.0673 19.4648Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M1.40625 19.6875H0.940156C0.773755 19.6873 0.614228 19.6211 0.496565 19.5034C0.378901 19.3858 0.312707 19.2262 0.3125 19.0598V18.5938C0.3125 18.5523 0.328962 18.5126 0.358265 18.4833C0.387567 18.454 0.42731 18.4375 0.46875 18.4375C0.51019 18.4375 0.549933 18.454 0.579235 18.4833C0.608538 18.5126 0.625 18.5523 0.625 18.5938V19.0595C0.624979 19.1009 0.633115 19.1419 0.648942 19.1802C0.664769 19.2185 0.687977 19.2532 0.717242 19.2825C0.746507 19.3118 0.781256 19.3351 0.819503 19.3509C0.857751 19.3668 0.898749 19.375 0.940156 19.375H1.40625C1.44769 19.375 1.48743 19.3915 1.51674 19.4208C1.54604 19.4501 1.5625 19.4898 1.5625 19.5312C1.5625 19.5727 1.54604 19.6124 1.51674 19.6417C1.48743 19.671 1.44769 19.6875 1.40625 19.6875Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M3.95953 2.8125H2.65625C2.61481 2.8125 2.57507 2.79604 2.54576 2.76674C2.51646 2.73743 2.5 2.69769 2.5 2.65625C2.5 2.61481 2.51646 2.57507 2.54576 2.54576C2.57507 2.51646 2.61481 2.5 2.65625 2.5H3.95953C4.00097 2.5 4.04071 2.51646 4.07002 2.54576C4.09932 2.57507 4.11578 2.61481 4.11578 2.65625C4.11578 2.69769 4.09932 2.73743 4.07002 2.76674C4.04071 2.79604 4.00097 2.8125 3.95953 2.8125Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.3443 14.9688H16.7285C16.6871 14.9688 16.6473 14.9523 16.618 14.923C16.5887 14.8937 16.5723 14.8539 16.5723 14.8125C16.5723 14.7711 16.5887 14.7313 16.618 14.702C16.6473 14.6727 16.6871 14.6562 16.7285 14.6562H17.3443C17.3857 14.6562 17.4255 14.6727 17.4548 14.702C17.4841 14.7313 17.5005 14.7711 17.5005 14.8125C17.5005 14.8539 17.4841 14.8937 17.4548 14.923C17.4255 14.9523 17.3857 14.9688 17.3443 14.9688Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.3443 16.3027H16.7285C16.6871 16.3027 16.6473 16.2863 16.618 16.257C16.5887 16.2277 16.5723 16.1879 16.5723 16.1465C16.5723 16.105 16.5887 16.0653 16.618 16.036C16.6473 16.0067 16.6871 15.9902 16.7285 15.9902H17.3443C17.3857 15.9902 17.4255 16.0067 17.4548 16.036C17.4841 16.0653 17.5005 16.105 17.5005 16.1465C17.5005 16.1879 17.4841 16.2277 17.4548 16.257C17.4255 16.2863 17.3857 16.3027 17.3443 16.3027Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.3443 13.6499H16.7285C16.6871 13.6499 16.6473 13.6334 16.618 13.6041C16.5887 13.5748 16.5723 13.5351 16.5723 13.4937C16.5723 13.4522 16.5887 13.4125 16.618 13.3832C16.6473 13.3539 16.6871 13.3374 16.7285 13.3374H17.3443C17.3857 13.3374 17.4255 13.3539 17.4548 13.3832C17.4841 13.4125 17.5005 13.4522 17.5005 13.4937C17.5005 13.5351 17.4841 13.5748 17.4548 13.6041C17.4255 13.6334 17.3857 13.6499 17.3443 13.6499Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M4.99063 3.84375H2.65625C2.61481 3.84375 2.57507 3.82729 2.54576 3.79799C2.51646 3.76868 2.5 3.72894 2.5 3.6875C2.5 3.64606 2.51646 3.60632 2.54576 3.57701C2.57507 3.54771 2.61481 3.53125 2.65625 3.53125H4.99063C5.03207 3.53125 5.07181 3.54771 5.10111 3.57701C5.13041 3.60632 5.14687 3.64606 5.14687 3.6875C5.14687 3.72894 5.13041 3.76868 5.10111 3.79799C5.07181 3.82729 5.03207 3.84375 4.99063 3.84375Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M4.99063 4.875H2.65625C2.61481 4.875 2.57507 4.85854 2.54576 4.82924C2.51646 4.79993 2.5 4.76019 2.5 4.71875C2.5 4.67731 2.51646 4.63757 2.54576 4.60826C2.57507 4.57896 2.61481 4.5625 2.65625 4.5625H4.99063C5.03207 4.5625 5.07181 4.57896 5.10111 4.60826C5.13041 4.63757 5.14687 4.67731 5.14687 4.71875C5.14687 4.76019 5.13041 4.79993 5.10111 4.82924C5.07181 4.85854 5.03207 4.875 4.99063 4.875Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.3443 12.3843H16.7285C16.6871 12.3843 16.6473 12.3678 16.618 12.3385C16.5887 12.3092 16.5723 12.2695 16.5723 12.228C16.5723 12.1866 16.5887 12.1468 16.618 12.1175C16.6473 12.0882 16.6871 12.0718 16.7285 12.0718H17.3443C17.3857 12.0718 17.4255 12.0882 17.4548 12.1175C17.4841 12.1468 17.5005 12.1866 17.5005 12.228C17.5005 12.2695 17.4841 12.3092 17.4548 12.3385C17.4255 12.3678 17.3857 12.3843 17.3443 12.3843Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.3443 17.6562H16.7285C16.6871 17.6562 16.6473 17.6398 16.618 17.6105C16.5887 17.5812 16.5723 17.5414 16.5723 17.5C16.5723 17.4586 16.5887 17.4188 16.618 17.3895C16.6473 17.3602 16.6871 17.3438 16.7285 17.3438H17.3443C17.3857 17.3438 17.4255 17.3602 17.4548 17.3895C17.4841 17.4188 17.5005 17.4586 17.5005 17.5C17.5005 17.5414 17.4841 17.5812 17.4548 17.6105C17.4255 17.6398 17.3857 17.6562 17.3443 17.6562Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M17.0352 17.6563C16.9937 17.6563 16.954 17.6398 16.9247 17.6105C16.8954 17.5812 16.8789 17.5415 16.8789 17.5001V12.228C16.8789 12.1866 16.8954 12.1468 16.9247 12.1175C16.954 12.0882 16.9937 12.0718 17.0352 12.0718C17.0766 12.0718 17.1163 12.0882 17.1456 12.1175C17.1749 12.1468 17.1914 12.1866 17.1914 12.228V17.5001C17.1914 17.5415 17.1749 17.5812 17.1456 17.6105C17.1163 17.6398 17.0766 17.6563 17.0352 17.6563Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M8.60596 12.3197C8.54189 12.4053 8.46174 12.4775 8.37002 12.5324C8.13096 12.6807 7.05018 13.0533 5.9919 12.0152C5.72695 11.7747 5.47994 11.5151 5.25284 11.2385C5.07471 11.0041 4.83877 10.959 4.57627 10.5683C4.34659 10.2262 4.36846 9.61991 4.57627 9.35412C4.84502 9.01194 5.32627 8.84022 5.62627 9.49631C5.76534 9.80256 6.47002 10.476 7.0294 10.6262C7.09603 10.6424 7.16404 10.6523 7.23252 10.6558C7.85752 10.6952 8.57627 11.1307 8.74659 11.6512C8.77467 11.766 8.77661 11.8857 8.75227 12.0014C8.72793 12.1172 8.67794 12.2259 8.60596 12.3197Z", fill: "#2B62CD" }),
+            React__default.createElement("path", { d: "M17.8215 7.60137C17.3465 10.2436 15.2621 10.3982 14.3965 11.2482C13.9965 11.642 14.0606 11.7092 13.9965 12.7201C13.9231 13.8951 13.2621 16.1139 11.0356 16.7654C8.77777 17.4279 6.96371 16.5029 6.00121 14.6982C5.14339 13.0904 4.21527 13.6154 3.00121 13.1811C2.42152 12.9717 2.00433 12.4811 2.01996 11.9748C2.03871 11.3217 2.40902 10.8404 3.37777 11.3217C4.04964 11.6545 4.69496 11.5936 5.30433 11.5201C5.63507 11.4688 5.96971 11.4468 6.30433 11.4545C6.96796 11.5169 7.60602 11.7417 8.16214 12.1092C8.31527 12.2061 8.42621 12.2889 8.48402 12.3342C8.0626 11.9665 7.71478 11.5222 7.45902 11.0248C7.44183 10.9936 7.2848 10.655 7.25589 10.592C6.96136 9.95137 7.39027 9.35606 7.83714 9.35606C7.87141 9.35549 7.9056 9.3597 7.93871 9.36855C8.05114 9.39698 8.14976 9.46457 8.21683 9.55918C8.23545 9.57848 8.25784 9.59375 8.28261 9.60403C8.30738 9.61431 8.334 9.61939 8.36082 9.61895C8.38763 9.61851 8.41407 9.61256 8.43849 9.60147C8.46291 9.59038 8.48479 9.57439 8.50277 9.55449C8.54371 9.50394 8.60167 9.47004 8.66579 9.45911C8.72992 9.44818 8.79583 9.46098 8.85121 9.49512C9.13871 9.66699 8.98871 10.0232 9.19808 10.4342C9.42152 10.8732 10.109 11.3389 10.634 11.2389C11.0293 11.1623 11.8606 10.6811 10.634 10.167C9.94808 9.88105 9.86683 9.48418 9.93558 9.12168C9.96058 8.99356 10.1621 8.41543 10.1653 8.39356C10.1996 8.1248 9.64652 7.69668 10.1653 7.31699C10.4215 7.12949 10.459 6.88262 10.5075 6.56855C10.7934 4.6998 12.02 3.47168 13.9825 3.47168C16.5262 3.47168 18.1418 5.82793 17.8215 7.60137Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M11.0678 7.4316C11.006 7.43496 10.9443 7.42333 10.888 7.3977C10.8317 7.37207 10.7824 7.33321 10.7443 7.28441C10.7305 7.26814 10.7201 7.24921 10.7139 7.22877C10.7076 7.20833 10.7056 7.18683 10.708 7.16559C10.7104 7.14436 10.7171 7.12384 10.7278 7.1053C10.7384 7.08677 10.7527 7.07062 10.7699 7.05784C10.787 7.04507 10.8066 7.03594 10.8274 7.03103C10.8482 7.02613 10.8698 7.02553 10.8908 7.0293C10.9118 7.03306 10.9319 7.0411 10.9497 7.05292C10.9675 7.06474 10.9827 7.08009 10.9943 7.09801C11.0256 7.1391 11.159 7.11504 11.2378 7.0802C11.2756 7.06321 11.3186 7.06193 11.3573 7.07666C11.3961 7.09138 11.4274 7.1209 11.4444 7.15871C11.4614 7.19653 11.4627 7.23954 11.4479 7.27829C11.4332 7.31705 11.4037 7.34836 11.3659 7.36535C11.272 7.40738 11.1706 7.42991 11.0678 7.4316Z", fill: "#2B62CD" }),
+            React__default.createElement("path", { d: "M11.548 13.1983C11.5518 13.2185 11.5515 13.2392 11.5471 13.2592C11.5428 13.2792 11.5345 13.2981 11.5227 13.3149C11.5109 13.3316 11.4958 13.3458 11.4785 13.3567C11.4611 13.3675 11.4417 13.3748 11.4215 13.378C11.2165 13.4117 11.0089 13.4279 10.8012 13.4265C10.5169 13.4214 10.2349 13.3757 9.96367 13.2905C9.44418 13.1038 8.96486 12.8201 8.55117 12.4546C7.77477 11.8262 7.66367 11.4171 7.45898 11.0249C7.74314 11.4988 8.12768 11.9047 8.58555 12.214C9.03605 12.5485 9.53089 12.8188 10.0559 13.0171C10.4848 13.1224 10.9305 13.141 11.3668 13.0718C11.387 13.0677 11.4079 13.0678 11.4281 13.0721C11.4483 13.0763 11.4675 13.0846 11.4844 13.0964C11.5014 13.1082 11.5157 13.1233 11.5267 13.1409C11.5376 13.1584 11.5449 13.1779 11.548 13.1983Z", fill: "#2B62CD" }),
+            React__default.createElement("path", { d: "M10.5484 8.85297C10.511 8.86675 10.4712 8.87312 10.4313 8.87172C10.2958 8.86506 10.164 8.82594 10.0469 8.75766C10.0858 8.62969 10.1177 8.54703 10.1419 8.46875C10.2299 8.5323 10.3369 8.56419 10.4453 8.55922C10.464 8.55169 10.4839 8.54798 10.504 8.54833C10.5241 8.54867 10.5439 8.55306 10.5623 8.56122C10.5807 8.56939 10.5972 8.58116 10.6109 8.59585C10.6247 8.61054 10.6353 8.62784 10.6422 8.64672C10.6561 8.68656 10.6541 8.73021 10.6366 8.76862C10.6192 8.80703 10.5876 8.83724 10.5484 8.85297Z", fill: "#2B62CD" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_5646_32454" },
+                React__default.createElement("rect", { width: "20", height: "20", fill: "white" })))));
+};
+
+var DueDateCalculatorType;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+    DueDateCalculatorType[DueDateCalculatorType["IUI"] = 3] = "IUI";
+    DueDateCalculatorType[DueDateCalculatorType["ultrasound"] = 4] = "ultrasound";
+})(DueDateCalculatorType || (DueDateCalculatorType = {}));
+const API_DATE_FORMAT = 'yyyy-MM-dd';
+const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
+    return {
+        otherInfo: {
+            method: DueDateCalculatorType.lastPeriod + 1,
+            first_day: format(lastPeriodDate, API_DATE_FORMAT),
+            measurement_date: null,
+            insemination_date: null,
+            cycle_length_days: periodLength,
+            conception_date: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateConception = (conceptionDate) => {
+    return {
+        otherInfo: {
+            method: DueDateCalculatorType.conception + 1,
+            conception_date: format(conceptionDate, API_DATE_FORMAT),
+            measurement_date: null,
+            insemination_date: null,
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateIVF = (IVFDate, numDayTransfer) => {
+    return {
+        otherInfo: {
+            method: DueDateCalculatorType.IVF + 1,
+            ivf_transfer_date: format(IVFDate, API_DATE_FORMAT),
+            measurement_date: null,
+            insemination_date: null,
+            days_transfer: numDayTransfer,
+            conception_date: null,
+            first_day: null,
+            cycle_length_days: null,
+        },
+    };
+};
+const getDueDateIUI = (dateOfIUIProcedure) => {
+    return {
+        otherInfo: {
+            method: DueDateCalculatorType.conception + 1,
+            insemination_date: format(dateOfIUIProcedure, API_DATE_FORMAT),
+            measurement_date: null,
+            conception_date: null,
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateUltrasound = (dateOfUltrasound, additionalInfo) => {
+    const [a, b] = additionalInfo.split('|');
+    const [crlNumber, msdNumber] = [Number(a), Number(b)];
+    return {
+        otherInfo: {
+            method: DueDateCalculatorType.conception + 1,
+            measurement_date: format(dateOfUltrasound, API_DATE_FORMAT),
+            conception_date: null,
+            insemination_date: null,
+            crl_value: crlNumber,
+            msd_value: msdNumber,
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+
+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'), { 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, { width: 300, label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null }))),
+        form.errors.lastPeriodDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
+};
+
+const MbLayout$4 = () => {
+    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'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
+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;
+            const redirectLink = [
+                `${QUERY_HEALTH_TOOL.type}=${DueDateCalculatorType.conception}`,
+                `${QUERY_HEALTH_TOOL.startDate}=${dayjs(lastPeriodDate).format(API_DATE_FORMAT$1)}`,
+                `${QUERY_HEALTH_TOOL.additional}= `,
+            ].join('&');
+            onSubmit(getDueDateConception(lastPeriodDate), redirectLink);
+        }),
+    };
+    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$4, 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 IUIFormContext = createContext({});
+
+const DefaultLayout$3 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(IUIFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }))));
+};
+
+const InlineLayout$3 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(IUIFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_IUI_procedure') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null })))));
+};
+
+const MbLayout$3 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(IUIFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_IUI_procedure'), rightSection: React__default.createElement(CalendarMB, null) },
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
+const IUIForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const theme = useMantineTheme();
+    const { t } = useTranslations();
+    const form = useForm({
+        initialValues: {
+            dateOfIUIProcedure: new Date(),
+        },
+    });
+    const formProps = {
+        onSubmit: form.onSubmit((values) => {
+            const { dateOfIUIProcedure } = values;
+            const redirectLink = [
+                `${QUERY_HEALTH_TOOL.type}=${DueDateCalculatorType.IUI}`,
+                `${QUERY_HEALTH_TOOL.startDate}=${dayjs(dateOfIUIProcedure).format(API_DATE_FORMAT$1)}`,
+                `${QUERY_HEALTH_TOOL.additional}= `,
+            ].join('&');
+            onSubmit(getDueDateIUI(dateOfIUIProcedure), redirectLink);
+        }),
+    };
+    return (React__default.createElement(IUIFormContext.Provider, { value: { form } },
+        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$3, 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 IVFFormContext = createContext({});
+
+const DefaultLayout$2 = () => {
+    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'), { 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$2 = () => {
+    const { t } = useTranslations();
+    const { form, transferDateOptions } = useContext(IVFFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { 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$2 = () => {
+    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'), { 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);
+            const redirectLink = [
+                `${QUERY_HEALTH_TOOL.type}=${DueDateCalculatorType.IVF}`,
+                `${QUERY_HEALTH_TOOL.startDate}=${dayjs(IVFDate).format(API_DATE_FORMAT$1)}`,
+                `${QUERY_HEALTH_TOOL.additional}=${dayTransfer}`,
+            ].join('&');
+            onSubmit(getDueDateIVF(IVFDate, Number(dayTransfer)), redirectLink);
+        }),
+    };
+    return (React__default.createElement(IVFFormContext.Provider, { value: { form, transferDateOptions } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$2, null)) : (React__default.createElement(DefaultLayout$2, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const LastPeriodFormContext = createContext({});
+
+const DefaultLayout$1 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    const periodLengthDropDownOptions = useMemo(() => [...Array(21)].map((_, index) => ({
+        label: t('dueDatePage.daysText', { number: index + 20 }),
+        value: `${index + 20}`,
+    })), []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                    content: t('dueDatePage.daysText', { number: 30 }),
+                }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength'))))));
+};
+
+const InlineLayout$1 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    const periodLengthDropDownOptions = useMemo(() => [...Array(21)].map((_, index) => ({
+        label: t('dueDatePage.daysText', { number: index + 20 }),
+        value: `${index + 20}`,
+    })), []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
+            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                    content: t('dueDatePage.daysText', { number: 30 }),
+                }), data: periodLengthDropDownOptions }, form.getInputProps('periodLength'), { error: null, withinPortal: true }))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const MbLayout$1 = () => {
+    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'), { 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;
+            const redirectLink = [
+                `${QUERY_HEALTH_TOOL.type}=${DueDateCalculatorType.lastPeriod}`,
+                `${QUERY_HEALTH_TOOL.startDate}=${dayjs(lastPeriodDate).format(API_DATE_FORMAT$1)}`,
+                `${QUERY_HEALTH_TOOL.additional}=${periodLength}`,
+            ].join('&');
+            onSubmit(getDueDateLastPeriod(lastPeriodDate, periodLength), redirectLink);
+        }),
+    };
+    return (React__default.createElement(LastPeriodFormContext.Provider, { value: { form } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, null)) : isMarryBaby ? (React__default.createElement(MbLayout$1, null)) : (React__default.createElement(DefaultLayout$1, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const UltrasoundFormContext = createContext({});
+
+const Info = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.00065 1.3335C4.32065 1.3335 1.33398 4.32016 1.33398 8.00016C1.33398 11.6802 4.32065 14.6668 8.00065 14.6668C11.6807 14.6668 14.6673 11.6802 14.6673 8.00016C14.6673 4.32016 11.6807 1.3335 8.00065 1.3335ZM8.00065 11.3335C7.63398 11.3335 7.33398 11.0335 7.33398 10.6668V8.00016C7.33398 7.6335 7.63398 7.3335 8.00065 7.3335C8.36732 7.3335 8.66732 7.6335 8.66732 8.00016V10.6668C8.66732 11.0335 8.36732 11.3335 8.00065 11.3335ZM7.33398 6.00016H8.66732V4.66683H7.33398V6.00016Z", fill: "#2D87F3" })));
+};
+
+const DefaultLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(UltrasoundFormContext);
+    const rightSection = (React__default.createElement(Text, { size: "p4", color: theme.colors.gray400 }, "mm"));
+    const inputPropsCRL = form.getInputProps('ultrasoundCRL');
+    const inputPropsMSD = form.getInputProps('ultrasoundMSD');
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default.createElement(Box, null,
+            React__default.createElement(Flex, { align: "center", gap: 4, mb: 4 },
+                React__default.createElement(Text, { as: "label", size: "s4" }, t('dueDatePage.validation.one_is_required')),
+                React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
+                    React__default.createElement(Flex, null,
+                        React__default.createElement(Info, { size: 16 })))),
+            React__default.createElement(Flex, { gap: 8 },
+                React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
+                React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))),
+            (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(Text, { size: "p4", color: theme.colors.red500 }, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD)))));
+};
+
+const InlineLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(UltrasoundFormContext);
+    const rightSection = (React__default.createElement(Text, { size: "p4", color: theme.colors.gray400 }, "mm"));
+    const inputPropsCRL = form.getInputProps('ultrasoundCRL');
+    const inputPropsMSD = form.getInputProps('ultrasoundMSD');
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null }))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default.createElement(Flex, { align: "center", gap: 4 },
+                React__default.createElement("span", null, t('dueDatePage.validation.one_is_required')),
+                React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
+                    React__default.createElement(Flex, null,
+                        React__default.createElement(Info, { size: 16 })))) },
+            React__default.createElement(Box, null,
+                React__default.createElement(Flex, { gap: 8 },
+                    React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
+                    React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))))),
+        (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD))));
+};
+
+const MbLayout = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(UltrasoundFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_ultrasound'), rightSection: React__default.createElement(CalendarMB, null) },
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
+const UltrasoundForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const theme = useMantineTheme();
+    const { t } = useTranslations();
+    const form = useForm({
+        initialValues: {
+            dateOfUltrasound: new Date(),
+        },
+        validate: (values) => {
+            const ultrasoundCRL = Number(values.ultrasoundCRL);
+            const ultrasoundMSD = Number(values.ultrasoundMSD);
+            if (!ultrasoundCRL && !ultrasoundMSD) {
+                return {
+                    ultrasoundCRL: t('dueDatePage.validation.record_not_valid'),
+                };
+            }
+            const isCRLValid = ultrasoundCRL >= 5 && ultrasoundCRL <= 101; // Range 5 -> 101
+            const isMSDValid = ultrasoundMSD > 0 && ultrasoundMSD <= 13; // Range 0 -> 13
+            if (isCRLValid || isMSDValid)
+                return {};
+            if (ultrasoundCRL && !isCRLValid) {
+                return {
+                    ultrasoundCRL: t('dueDatePage.validation.record_not_valid'),
+                };
+            }
+            if (ultrasoundMSD && !isMSDValid) {
+                return {
+                    ultrasoundMSD: t('dueDatePage.validation.crl'),
+                };
+            }
+        },
+    });
+    const formProps = {
+        onSubmit: form.onSubmit((values) => {
+            const { dateOfUltrasound, ultrasoundCRL, ultrasoundMSD } = values;
+            const additionalInfo = `${ultrasoundCRL}|${ultrasoundMSD}`;
+            const redirectLink = [
+                `${QUERY_HEALTH_TOOL.type}=${DueDateCalculatorType.ultrasound}`,
+                `${QUERY_HEALTH_TOOL.startDate}=${dayjs(dateOfUltrasound).format(API_DATE_FORMAT$1)}`,
+                `${QUERY_HEALTH_TOOL.additional}=${additionalInfo}`,
+            ].join('&');
+            onSubmit(getDueDateUltrasound(dateOfUltrasound, additionalInfo), redirectLink);
+        }),
+    };
+    return (React__default.createElement(UltrasoundFormContext.Provider, { value: { form } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout, null)) : (React__default.createElement(DefaultLayout, null)),
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const FormSwitcher = () => {
+    const { calculatorType } = useContext(DueDateFormContext);
+    switch (calculatorType) {
+        case DueDateCalculatorType.lastPeriod:
+            return React__default.createElement(LastPeriodForm, null);
+        case DueDateCalculatorType.conception:
+            return React__default.createElement(ConceptionForm, null);
+        case DueDateCalculatorType.IVF:
+            return React__default.createElement(IVFForm, null);
+        case DueDateCalculatorType.IUI:
+            return React__default.createElement(IUIForm, null);
+        case DueDateCalculatorType.ultrasound:
+            return React__default.createElement(UltrasoundForm, null);
+        default:
+            return null;
+    }
+};
+
+var OvulationCalculatorType;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const SelectMethodItem = forwardRef((_a, ref) => {
+    var { label, icon } = _a, rest = __rest(_a, ["label", "icon"]);
+    return (React__default.createElement(Box, Object.assign({ ref: ref, sx: {
+            gap: '1rem',
+            display: 'flex',
+            padding: '5px 6px',
+            alignItems: 'center',
+            '&[data-selected]': {
+                backgroundColor: theme.colors.gray100,
+            },
+            '&[data-selected]:hover': {
+                backgroundColor: theme.colors.gray100,
+            },
+            '&[data-hovered]': {
+                backgroundColor: theme.colors.gray100,
+            },
+        }, className: "" }, rest),
+        icon,
+        React__default.createElement(Text, { size: "p4" }, label)));
+});
+const DueDateForm = (_a) => {
+    var { locale, formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = __rest(_a, ["locale", "formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
+    const { t } = useTranslations();
+    const [calculatorType, setCalculatorType] = useState(DueDateCalculatorType.lastPeriod);
+    const calculatingMethods = useMemo(() => {
+        const commonMethods = [
+            {
+                value: String(DueDateCalculatorType.lastPeriod),
+                label: t('dueDatePage.lastPeriod'),
+                icon: React__default.createElement(LastPeriod, { size: 20 }),
+            },
+            {
+                value: String(DueDateCalculatorType.IVF),
+                label: t('dueDatePage.ivf'),
+                icon: React__default.createElement(IVF, { size: 20 }),
+            },
+        ];
+        if (locale !== LOCALE.Vietnam) {
+            return [
+                ...commonMethods,
+                {
+                    value: String(DueDateCalculatorType.conception),
+                    label: t('dueDatePage.conceptionDate'),
+                    icon: React__default.createElement(ConceptionDate, { size: 20 }),
+                },
+            ];
+        }
+        return [
+            ...commonMethods,
+            {
+                value: String(DueDateCalculatorType.IUI),
+                label: t('dueDatePage.IUI'),
+                icon: React__default.createElement(IUI, { size: 20 }),
+            },
+            {
+                value: String(DueDateCalculatorType.ultrasound),
+                label: t('dueDatePage.ultrasound'),
+                icon: React__default.createElement(Ultrasound, { size: 20 }),
+            },
+        ];
+    }, []);
+    const selectedMethod = useMemo(() => {
+        return calculatingMethods.find((m) => m.value === String(calculatorType));
+    }, [calculatorType, calculatingMethods]);
+    return (React__default.createElement(DueDateFormContext.Provider, { value: {
+            calculatingMethods,
+            submitProps,
+            currentUrl,
+            isMobile,
+            formLayout,
+            onSubmit,
+            calculatorType,
+            setCalculatorType,
+        } },
+        React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
+            formLayout === 'default' ? (React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(Select, { label: t('dueDatePage.calculationMethod'), value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)), icon: selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.icon }))) : (React__default.createElement(Box, null,
+                React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), width: 300 },
+                    React__default.createElement(Select, { value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)) })))),
+            React__default.createElement(FormSwitcher, null))));
+};
+
+export { DueDateForm as D };