@hhgtech/hhg-components 1.29.44 → 1.29.46

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

@@ -1,68 +1,64 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-7aff3435.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-59f43d64.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-72d20560.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-f0ac2d9c.js';
-import { T as Text$1 } from './index-52e1cb2b.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-2c23b4a0.js';
+import { T as Text } from './index-0b997c18.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-bdadf1c8.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-36a2e88c.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, c as Input$1, B as Button$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-0d6c85cf.js';
+import { T as Text$1 } from './index-7872ac55.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-059585f8.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { H as Heading } from './index-f55cc5a7.js';
-import { t as theme } from './theme-7c208c30.js';
-import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Input as Input$2, Chip, Container, AspectRatio as AspectRatio$1, ScrollArea, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
+import { C as CommonGAssets } from './index-ff8c9d5e.js';
+import { H as Heading } from './index-b0e0fbe0.js';
+import { t as theme } from './theme-4a099635.js';
+import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-d73390b2.js';
-import { L as LOCALE } from './index-3e04178f.js';
-import './useMantineLocale-6a509174.js';
-import './translationsContext-9021710e.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-604a2f74.js';
+import { L as LOCALE } from './index-893ee6c2.js';
+import './useMantineLocale-0143b7da.js';
+import './translationsContext-d6309014.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-7ef38b29.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-0ea9b42c.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-23fa4098.js';
-import { B as Button } from './index-4a001eda.js';
-import { I as Input } from './index-db0a1f04.js';
-import { keyframes, css } from '@emotion/react';
+import { L as Logo } from './index-baff4b23.js';
+import { B as Button } from './index-746c355d.js';
+import { I as Input } from './index-f53544db.js';
+import { keyframes } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-8ddd1c09.js';
-import { D as Dropdown } from './index-56195940.js';
-import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-101d2ed1.js';
-import { u as useTranslations } from './useTranslations-3ea1638d.js';
-import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
+import { i as isProduction } from './isProduction-8b94b2e8.js';
+import { u as useTranslations } from './useTranslations-1ed73aa5.js';
+import { H as HealthToolFormWrapper, a as DueDateCalculatorType$1, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-663ce8ad.js';
+import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-af5ce53c.js';
-import { D as DATE_FORMAT } from './types-58c673f9.js';
-import { D as DatePicker } from './index-aebda8f4.js';
-import { M as MarryBabyText } from './index-c0c2dfbe.js';
-import { S as Slider } from './index-57b0dda2.js';
-import { f as formatUserProfileUrl } from './index-c8a34381.js';
-import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-59feafe2.js';
-import { D as DatePicker$1 } from './index-329afe30.js';
-import { Controller, useForm } from 'react-hook-form';
-import { a as useOutsideClick } from './useOutsideClick-4a5bba56.js';
+import { D as DatePicker } from './index-251e9c68.js';
+import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
+import { f as formatUserProfileUrl } from './index-f8020b17.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-c3daa804.js';
+import { s as setDefaultClass, H as HEALTH_TOOL_TYPE$1, b as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, d as getPremiumApiPath, e as getWebsiteUrlApi, f as getSsoApiPath } from './utils-b83d7305.js';
+import { Controller, useForm as useForm$1 } from 'react-hook-form';
+import './constants-b05bc757.js';
+import './utils-9ad73105.js';
+import './WhatsApp-9c19ab07.js';
+import './index.styled-81557262.js';
+import './index-aa5d9b56.js';
+import { a as useOutsideClick } from './useOutsideClick-0b2f39ea.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-cffac849.js';
+import { D as Dropdown } from './index-576eefff.js';
+import { g as getSocialList } from './getSocialList-332f3b07.js';
 import { v4 } from 'uuid';
-import './constants-e3536cb0.js';
-import './utils-8a09aa51.js';
-import './WhatsApp-9dbce6f2.js';
-import './index.styled-e18670ac.js';
-import './index-be8d21e4.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-e49e8c2d.js';
-import { I as Icon } from './index-8a31b708.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-b4329fc1.js';
+import { I as Icon } from './index-4d3ff457.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-48fd5f17.js';
+import { M as Modal } from './index-988f9bc7.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-4166d977.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-00141ab9.js';
+import { g as getCookie } from './cookieHelper-bc14538c.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-8ec944ea.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -449,7 +445,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$7 = createStyles((_theme, {}) => ({
+var useStyles$6 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -469,7 +465,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = useScreenSize();
-    const { classes, cx } = useStyles$7(
+    const { classes, cx } = useStyles$6(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1688,7 +1684,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body$1
 });
 
-var useStyles$6 = createStyles((theme) => {
+var useStyles$5 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1740,7 +1736,7 @@ var useStyles$6 = createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$6(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$5(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -3068,8 +3064,8 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                     React__default.createElement(Heading, { tag: "h5", as: headingAs }, heading),
                     medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
                 isMarryBaby ? (React__default.createElement(StyledIcon, null, icon)) : (React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: rem(64),
-                        height: rem(64),
+                        width: rem(84),
+                        height: rem(84),
                         borderRadius: '50%',
                         backgroundColor: '#fff',
                         flexShrink: 0,
@@ -3088,423 +3084,338 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                     }) }, icon))))));
 };
 
-const StyledDropDown = styled(Dropdown) `
-  border-color: ${theme.mbColors.lightGray};
-  background-color: ${theme.colors.white};
-  border-radius: 16px;
-  transition: all 0.2s ease;
-  &:hover {
-    border-color: ${theme.mbColors.pink};
-    box-shadow: none;
-  }
-
-  & > ul {
-    z-index: ${Z_INDEX.menuSearchPopup};
-    max-height: 300px;
-    overflow-y: auto;
-  }
-
-  ${(props) => props.groupedWithLabel &&
-    css `
-      & > div:first-child {
-        color: ${theme.mbColors.midGray};
-        font-size: 12px;
-      }
-    `}
+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", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5 27.1333C17.7981 27.1333 19.0961 26.9841 20.3682 26.6857C23.751 25.8922 26.3923 23.2509 27.1858 19.8681C27.7826 17.3239 27.7826 14.676 27.1858 12.1318C26.3923 8.74902 23.751 6.10773 20.3682 5.31424C17.824 4.71744 15.1761 4.71744 12.6319 5.31424C9.24909 6.10773 6.60779 8.74902 5.8143 12.1318C5.5159 13.4039 5.36669 14.702 5.3667 16C5.3667 16.4787 4.97868 16.8667 4.50003 16.8667C4.02139 16.8667 3.63336 16.4787 3.63336 16C3.63336 14.5691 3.79783 13.1383 4.12677 11.736C5.0706 7.71226 8.21233 4.57054 12.236 3.62671C15.0406 2.96884 17.9594 2.96884 20.764 3.62671C24.7877 4.57054 27.9295 7.71226 28.8733 11.736C29.5312 14.5406 29.5312 17.4594 28.8733 20.264C27.9295 24.2877 24.7877 27.4294 20.764 28.3732C19.3617 28.7022 17.9309 28.8666 16.5 28.8666C16.0214 28.8666 15.6334 28.4786 15.6334 28C15.6334 27.5213 16.0214 27.1333 16.5 27.1333Z", fill: "#3E3F58" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6333 16C11.6333 13.3122 13.8122 11.1334 16.5 11.1334C19.1878 11.1334 21.3666 13.3122 21.3666 16C21.3666 18.6878 19.1878 20.8667 16.5 20.8667C13.8122 20.8667 11.6333 18.6878 11.6333 16ZM16.5 12.8667C14.7695 12.8667 13.3666 14.2695 13.3666 16C13.3666 17.7305 14.7695 19.1334 16.5 19.1334C18.2305 19.1334 19.6333 17.7305 19.6333 16C19.6333 14.2695 18.2305 12.8667 16.5 12.8667Z", fill: "#E85388" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.8335 25.3333C11.3063 25.3333 12.5002 24.1394 12.5002 22.6667C12.5002 21.1939 11.3063 20 9.8335 20C8.36074 20 7.16683 21.1939 7.16683 22.6667C7.16683 23.1612 7.30147 23.6244 7.5361 24.0214L7.45222 24.1053C6.84272 24.7148 6.50031 25.5414 6.50031 26.4034C6.50031 27.1294 6.09013 27.7931 5.44079 28.1177L4.20217 28.737C3.87285 28.9017 3.73936 29.3022 3.90402 29.6315C4.06868 29.9608 4.46913 30.0943 4.79845 29.9296L6.03707 29.3103C7.13813 28.7598 7.83364 27.6344 7.83364 26.4034C7.83364 25.8951 8.03558 25.4075 8.39503 25.0481L8.47894 24.9642C8.87593 25.1987 9.33899 25.3333 9.8335 25.3333Z", fill: "#3E3F58" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("circle", { cx: "12", cy: "9", r: "9", fill: "#91CAFF" }),
+        React__default.createElement("circle", { cx: "11.9998", cy: "9.00005", r: "7.2", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M2.38545 16.2676C2.21688 16.2676 2.07389 16.138 2.06016 15.9671C2.04565 15.7872 2.17971 15.6296 2.35957 15.6152C2.45675 15.607 4.75195 15.3916 4.70769 13.4751C4.68957 12.6916 4.90708 12.0649 5.35412 11.6126C6.05287 10.9056 7.05177 10.9083 7.0944 10.9093C7.27482 10.9113 7.41944 11.0592 7.41738 11.2397C7.41532 11.4188 7.26945 11.5627 7.09075 11.5627C7.08985 11.5627 7.08895 11.5627 7.08805 11.5627C7.07388 11.5627 6.31301 11.5681 5.81498 12.076C5.49994 12.3973 5.34721 12.8629 5.36099 13.4601C5.38541 14.5175 4.87205 15.3412 3.87642 15.842C3.15903 16.2029 2.4422 16.2641 2.41207 16.2665C2.40314 16.2672 2.39425 16.2676 2.38545 16.2676Z", fill: "#D2D6DC" }),
+        React__default.createElement("path", { d: "M1.00099 23.6985C0.987043 23.5186 1.12157 23.3615 1.30148 23.3475C1.39819 23.3396 3.68287 23.1323 3.6329 21.2243C3.61242 20.4424 3.8277 19.8176 4.27268 19.3674C4.96813 18.6638 5.96552 18.6693 6.00746 18.6705C6.18788 18.6731 6.33203 18.8215 6.32941 19.0019C6.32684 19.182 6.18063 19.3273 5.99913 19.3239C5.99909 19.3239 5.99901 19.3239 5.99892 19.3239C5.979 19.3239 5.22556 19.3289 4.73358 19.8307C4.42112 20.1493 4.27057 20.6124 4.28615 21.2072C4.31376 22.2625 3.80383 23.083 2.81146 23.58C2.09691 23.9377 1.38201 23.9966 1.35196 23.999C1.17111 24.0129 1.01486 23.8776 1.00099 23.6985Z", fill: "#D2D6DC" }),
+        React__default.createElement("path", { d: "M11.5451 6.7139C10.7962 5.96501 8.93796 6.60903 7.94739 7.59956C7.4039 8.14305 7.10028 8.81271 7.06006 9.43029V9.59646L8.58738 11.143L8.82863 11.1989C9.44621 11.1587 10.1159 10.8551 10.6594 10.3116C11.6499 9.321 12.294 7.4628 11.5451 6.7139Z", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M7.06034 9.43042L6.67147 10.4309C6.56604 10.702 6.63082 11.0099 6.83652 11.2156L7.04381 11.4229C7.14802 11.5271 7.27846 11.5948 7.41706 11.6228C7.55198 11.65 7.69458 11.6398 7.82826 11.5879L8.8287 11.199L7.06034 9.43042Z", fill: "#91CAFF" }),
+        React__default.createElement("path", { d: "M10.7978 15.144C10.7633 14.8665 10.6648 14.6249 10.4865 14.4466C9.73757 13.6977 7.87937 14.3417 6.8888 15.3322C6.34531 15.8757 6.04169 16.5454 6.00146 17.163V17.3291L7.52904 18.8756L7.77029 18.9315C8.38787 18.8913 9.05752 18.5877 9.60101 18.0442C10.3555 17.2896 10.908 16.0316 10.7978 15.144Z", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M6.00125 17.1628L5.61238 18.1633C5.50696 18.4345 5.57173 18.7423 5.77744 18.948L5.98473 19.1553C6.08894 19.2595 6.21938 19.3273 6.35798 19.3552C6.4929 19.3824 6.6355 19.3722 6.76917 19.3203L7.76962 18.9314L6.00125 17.1628Z", fill: "#91CAFF" })));
+};
 
-  &[data-dropdown-open='true'] {
-    border-color: ${theme.mbColors.pink};
-  }
-`;
+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("g", { clipPath: "url(#clip0_1964_4257)" },
+            React__default.createElement("path", { d: "M15.804 28.2784C14.0306 28.2863 12.5961 26.8463 12.6234 25.07L12.7524 4.76372L19.1575 4.77241L19.0285 25.0787C19.0173 26.8359 17.5774 28.2704 15.804 28.2784Z", fill: "white" }),
+            React__default.createElement("path", { d: "M12.7202 10.2661L12.6038 25.0539C12.5927 26.8112 14.0272 28.2512 15.7844 28.2623C17.5578 28.2544 18.9978 26.8199 19.009 25.0626L19.009 10.2661", fill: "#FFEAF1" }),
+            React__default.createElement("ellipse", { cx: "14.6618", cy: "19.0267", rx: "1.01227", ry: "1.01227", transform: "rotate(-49.8303 14.6618 19.0267)", fill: "#3E3F58" }),
+            React__default.createElement("circle", { cx: "16.3264", cy: "13.4263", r: "1.01227", transform: "rotate(-49.8304 16.3264 13.4263)", fill: "#3E3F58" }),
+            React__default.createElement("path", { d: "M14.6624 19.0264L14.7487 20.0481C14.7706 20.3073 14.8946 20.5471 15.0933 20.7149V20.7149C15.3772 20.9545 15.5013 21.3339 15.4139 21.6949L15.2902 22.2058", stroke: "#3E3F58", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default.createElement("path", { d: "M16.3264 13.426L16.4128 14.4477C16.4347 14.7069 16.5586 14.9467 16.7574 15.1145V15.1145C17.0412 15.3541 17.1653 15.7335 17.0779 16.0945L16.9543 16.6054", stroke: "#3E3F58", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default.createElement("path", { d: "M18.8331 27.5966C18.1075 28.4563 17.0188 29.0096 15.8121 29.0051C14.7653 29.0048 13.7725 28.592 13.0185 27.8574C12.2806 27.1037 11.8772 26.1088 11.8775 25.0621L11.9857 4.50923C11.9852 4.0835 12.3298 3.75278 12.7394 3.77139C13.1651 3.7709 13.4959 4.1155 13.4772 4.52511L13.3691 25.078C13.3713 25.7342 13.6171 26.3343 14.0655 26.8109C14.5299 27.2684 15.1365 27.5187 15.7927 27.5165C17.1404 27.5091 18.2548 26.4214 18.2635 25.0546L18.3717 4.50179C18.3712 4.07606 18.7158 3.74535 19.1254 3.76396C19.5512 3.76346 19.8819 4.10807 19.8633 4.51768L19.7551 25.0705C19.765 26.0277 19.4137 26.9089 18.8331 27.5966Z", fill: "#202135" }),
+            React__default.createElement("path", { d: "M20.7531 4.97475C20.608 5.14669 20.4026 5.23501 20.1721 5.23675L11.4592 5.21019C11.0334 5.21068 10.7027 4.86608 10.7213 4.45647C10.7208 4.03073 11.0654 3.70002 11.475 3.71863L20.188 3.74519C20.6137 3.74469 20.9444 4.0893 20.9258 4.4989C20.9407 4.67505 20.866 4.84103 20.7531 4.97475Z", fill: "#202135" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_1964_4257" },
+                React__default.createElement("rect", { width: "32", height: "32", fill: "white", transform: "translate(0.5)" }))))) : (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.0643 5.79419C13.9204 4.07823 15.0484 2.51196 16.4044 1.15601L20.6649 4.03713C19.3441 5.35823 18.2395 6.87888 17.3918 8.54367L16.3123 10.6633C16.2496 10.7867 16.2278 10.9268 16.25 11.0634C16.2722 11.1999 16.3373 11.3259 16.4357 11.4231C17.7354 12.7124 18.5471 14.413 18.7321 16.2344C18.759 16.499 17.5907 22.231 9.35566 21.8066C7.76866 21.7248 3.63212 20.538 3.2358 18.9467C3.06028 18.2403 2.9821 17.5131 3.00343 16.7855C3.12655 12.6207 6.72084 9.1378 10.8875 9.13895C10.9199 9.13895 10.9523 9.13916 10.9846 9.13959C11.107 9.14108 11.2273 9.10805 11.3317 9.04427C11.4361 8.9805 11.5205 8.88857 11.575 8.77903L13.0643 5.79419Z", fill: "#BCDEFF" }),
+        React__default.createElement("path", { d: "M20.7506 3.23392L16.6954 0.495902C16.2898 0.222023 15.7389 0.32883 15.465 0.734461L15.465 0.734509C15.1911 1.14014 15.2979 1.69099 15.7036 1.96487L19.7587 4.70289C20.1644 4.97677 20.7152 4.86996 20.9891 4.46433L20.9891 4.46428C21.263 4.05865 21.1562 3.5078 20.7506 3.23392Z", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M18.7713 17.0243C18.7729 18.1506 18.5326 19.2641 18.0668 20.2895C17.6009 21.3149 16.9203 22.2283 16.071 22.968C15.3028 23.6355 14.3188 24.0022 13.301 24H8.47346C7.45615 24.0019 6.47248 23.6358 5.70406 22.9691C4.49011 21.9116 3.62881 20.5079 3.23584 18.9466C4.16013 19.4148 5.42706 19.7523 7.15757 19.7523C8.30012 19.7523 9.16854 19.4062 9.93273 18.9178C10.1493 18.779 10.3577 18.6287 10.5616 18.4721C12.5346 16.9558 14.0865 14.8043 18.7322 16.2342C18.7583 16.494 18.7713 16.7573 18.7713 17.0243Z", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M11.8579 15.4993C10.0789 15.8485 8.76231 13.8918 9.72398 12.379C9.91415 12.0799 10.1801 11.8313 10.498 11.6629C10.7259 11.5422 10.9804 11.4625 11.2528 11.4349C11.4544 11.4146 11.652 11.424 11.8414 11.4597C11.9436 11.479 12.0464 11.4361 12.1091 11.3531C12.3908 10.9798 12.8464 10.7795 13.3088 10.7143C13.5329 10.6828 13.6826 10.4737 13.6879 10.2734C13.709 9.47973 14.3454 8.96277 14.9758 9.03966C15.1593 9.06204 15.1995 9.31062 15.0339 9.39073C15.0302 9.39252 15.0262 9.39441 15.0221 9.39642C14.9573 9.42744 14.8374 9.48494 14.7427 9.59188C14.5292 9.8547 14.5548 9.99906 14.5891 10.1922C14.6186 10.3586 14.6546 10.5613 14.5493 10.9073C14.454 11.1895 14.2831 11.4265 14.0448 11.6076C13.7899 11.7963 13.6003 11.8374 13.4528 11.8695C13.3654 11.8885 13.2928 11.9042 13.2301 11.9456C13.0966 12.0337 13.0787 12.2046 13.1605 12.3247C13.3443 12.5945 13.4663 12.912 13.504 13.2589C13.6194 14.3211 12.8939 15.2958 11.8579 15.4993Z", fill: "white" }),
+        React__default.createElement("ellipse", { cx: "10", cy: "20.5", rx: "3", ry: "2.5", fill: "#FF6F4D" })));
+};
 
-const StyledMethodContainer = styled.div `
-  width: 100%;
-`;
-const StyledMethodSwitcherContainer = styled.div `
-  #due-date-dropdown {
-    z-index: 9;
-    width: 100%;
-    min-width: unset;
-    max-width: unset;
+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.9536 27.3696H8.18104C6.89043 27.3696 5.83447 26.3137 5.83447 25.0231V8.59706C5.83447 7.30645 6.89043 6.25049 8.18104 6.25049L19.9843 8.59706L26.9536 6.25049C28.2442 6.25049 29.3002 7.30645 29.3002 8.59706V25.0231C29.3002 26.3137 28.2442 27.3696 26.9536 27.3696Z", fill: "#E0E9FB" }),
+        React__default.createElement("path", { d: "M22.7061 22.6765H6.25666C4.91911 22.6765 4.02742 21.3389 4.5202 20.0953L5.83428 16.8101V8.59706C5.83428 7.30645 6.89023 6.25049 8.18085 6.25049H24.6069C25.8975 6.25049 26.9534 7.30645 26.9534 8.59706V16.8101L25.3108 20.9166C24.8884 21.9725 23.856 22.6765 22.7061 22.6765Z", fill: "#FFE9F1" }),
+        React__default.createElement("path", { d: "M24.6069 28.0736H8.18091C6.49138 28.0736 5.13037 26.7126 5.13037 25.0231C5.13037 24.6242 5.43543 24.3191 5.83434 24.3191C6.23326 24.3191 6.53831 24.6242 6.53831 25.0231C6.53831 25.9382 7.26575 26.6657 8.18091 26.6657H24.6069C25.5221 26.6657 26.2495 25.9382 26.2495 25.0231V22.6765C26.2495 22.2776 26.5546 21.9725 26.9535 21.9725C27.3524 21.9725 27.6575 22.2776 27.6575 22.6765V25.0231C27.6575 26.7126 26.2964 28.0736 24.6069 28.0736Z", fill: "#202135" }),
+        React__default.createElement("path", { d: "M24.607 5.54652H24.1377V5.07721C24.1377 4.04472 23.2929 3.19995 22.2604 3.19995C21.2279 3.19995 20.3831 4.04472 20.3831 5.07721V7.42378C20.3831 8.45627 21.2279 9.30104 22.2604 9.30104C22.6593 9.30104 22.9644 8.99598 22.9644 8.59707C22.9644 8.19815 22.6593 7.8931 22.2604 7.8931C22.0023 7.8931 21.7911 7.6819 21.7911 7.42378V5.07721C21.7911 4.81909 22.0023 4.60789 22.2604 4.60789C22.5185 4.60789 22.7297 4.81909 22.7297 5.07721V6.25049C22.7297 6.64941 23.0348 6.95447 23.4337 6.95447H24.607C25.5221 6.95447 26.2496 7.6819 26.2496 8.59707V15.0032C26.2496 16.1061 26.0384 17.209 25.6395 18.218L24.6774 20.635C24.3488 21.4328 23.5745 21.9725 22.7062 21.9725H6.25677C5.85786 21.9725 5.50587 21.7848 5.29468 21.4563C5.08349 21.1278 5.03656 20.7288 5.17735 20.3534L5.83439 18.7343C6.30371 17.5375 6.56183 16.2704 6.56183 14.9797V8.59707C6.56183 7.6819 7.28927 6.95447 8.20443 6.95447H9.37771C9.77663 6.95447 10.0817 6.64941 10.0817 6.25049C10.0817 5.85158 9.77663 5.54652 9.37771 5.54652H8.20443C6.5149 5.54652 5.15389 6.90753 5.15389 8.59707V15.0032C5.15389 16.1061 4.94269 17.209 4.54378 18.218L3.88674 19.8371C3.55822 20.635 3.67554 21.5267 4.14486 22.2541C4.61417 22.9581 5.43547 23.3805 6.28024 23.3805H22.7297C24.1846 23.3805 25.4517 22.5122 25.9914 21.1747L26.9535 18.7577C27.4229 17.561 27.681 16.2938 27.681 15.0032V8.59707C27.6575 6.90753 26.2965 5.54652 24.607 5.54652Z", fill: "#202135" }),
+        React__default.createElement("path", { d: "M12.8743 9.30104C13.2732 9.30104 13.5783 8.99598 13.5783 8.59707C13.5783 8.19815 13.2732 7.8931 12.8743 7.8931C12.6162 7.8931 12.405 7.6819 12.405 7.42378V5.07721C12.405 4.81909 12.6162 4.60789 12.8743 4.60789C13.1325 4.60789 13.3436 4.81909 13.3436 5.07721V6.25049C13.3436 6.64941 13.6487 6.95447 14.0476 6.95447H18.7408C19.1397 6.95447 19.4447 6.64941 19.4447 6.25049C19.4447 5.85158 19.1397 5.54652 18.7408 5.54652H14.7516V5.07721C14.7516 4.04472 13.9068 3.19995 12.8743 3.19995C11.8418 3.19995 10.9971 4.04472 10.9971 5.07721V7.42378C10.9971 8.45627 11.8418 9.30104 12.8743 9.30104Z", fill: "#202135" }),
+        React__default.createElement("path", { d: "M21.0873 16.8101C20.4303 16.8101 19.9141 16.2938 19.9141 15.6368C19.9141 14.9797 20.4303 14.4635 21.0873 14.4635C21.7444 14.4635 22.2606 14.9797 22.2606 15.6368C22.2606 16.2938 21.7444 16.8101 21.0873 16.8101Z", fill: "#E85388" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7009 13.2902C11.0438 13.2902 10.5276 12.7739 10.5276 12.1169C10.5276 11.4598 11.0438 10.9436 11.7009 10.9436C12.3579 10.9436 12.8742 11.4598 12.8742 12.1169C12.8742 12.7739 12.3579 13.2902 11.7009 13.2902ZM16.394 13.2902C15.737 13.2902 15.2207 12.7739 15.2207 12.1169C15.2207 11.4598 15.737 10.9436 16.394 10.9436C17.0511 10.9436 17.5673 11.4598 17.5673 12.1169C17.5673 12.7739 17.0511 13.2902 16.394 13.2902ZM21.0872 13.2902C20.4301 13.2902 19.9139 12.7739 19.9139 12.1169C19.9139 11.4598 20.4301 10.9436 21.0872 10.9436C21.7442 10.9436 22.2605 11.4598 22.2605 12.1169C22.2605 12.7739 21.7442 13.2902 21.0872 13.2902ZM11.7009 16.81C11.0438 16.81 10.5276 16.2938 10.5276 15.6367C10.5276 14.9797 11.0438 14.4635 11.7009 14.4635C12.3579 14.4635 12.8742 14.9797 12.8742 15.6367C12.8742 16.2938 12.3579 16.81 11.7009 16.81ZM16.394 16.81C15.737 16.81 15.2207 16.2938 15.2207 15.6367C15.2207 14.9797 15.737 14.4635 16.394 14.4635C17.0511 14.4635 17.5673 14.9797 17.5673 15.6367C17.5673 16.2938 17.0511 16.81 16.394 16.81ZM20.1721 20.2126C19.5151 20.2126 19.0927 19.7432 19.21 19.1566C19.3274 18.57 19.9375 18.1006 20.5945 18.1006C21.2515 18.1006 21.6739 18.57 21.5566 19.1566C21.4393 19.7432 20.8292 20.2126 20.1721 20.2126ZM15.479 20.2126C14.8219 20.2126 14.3996 19.7432 14.5169 19.1566C14.6342 18.57 15.2443 18.1006 15.9014 18.1006C16.5584 18.1006 16.9808 18.57 16.8635 19.1566C16.7461 19.7432 16.136 20.2126 15.479 20.2126ZM9.82374 19.1566C9.70641 19.7432 10.1288 20.2126 10.7858 20.2126C11.4429 20.2126 12.053 19.7432 12.1703 19.1566C12.2876 18.57 11.8653 18.1006 11.2082 18.1006C10.5512 18.1006 9.94107 18.57 9.82374 19.1566Z", 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.23462", width: "22.0504", height: "17.1503", rx: "2", fill: "#E3F2FF" }),
+        React__default.createElement("path", { d: "M0 4.23462C0 3.13005 0.895431 2.23462 2 2.23462H20.0504C21.155 2.23462 22.0504 3.13005 22.0504 4.23462V5.90969H0V4.23462Z", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M17.1351 1H17.0853C16.532 1 16.0835 1.44854 16.0835 2.00185V3.63855C16.0835 4.19186 16.532 4.6404 17.0853 4.6404H17.1351C17.6884 4.6404 18.1369 4.19186 18.1369 3.63855V2.00185C18.1369 1.44854 17.6884 1 17.1351 1Z", fill: "#284A75" }),
+        React__default.createElement("path", { d: "M4.2751 4.64038H4.32481C4.87812 4.64038 5.32666 4.19184 5.32666 3.63853V2.00183C5.32666 1.44853 4.87812 0.99998 4.32481 0.99998H4.2751C3.72179 0.99998 3.27325 1.44853 3.27325 2.00183V3.63853C3.27325 4.19184 3.72179 4.64038 4.2751 4.64038Z", fill: "#284A75" }),
+        React__default.createElement("path", { d: "M4.7172 9.75171H3.95994C3.61369 9.75171 3.33301 10.0324 3.33301 10.3786V11.2727C3.33301 11.6189 3.61369 11.8996 3.95994 11.8996H4.7172C5.06344 11.8996 5.34413 11.6189 5.34413 11.2727V10.3786C5.34413 10.0324 5.06344 9.75171 4.7172 9.75171Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M8.88663 9.75171H8.12937C7.78313 9.75171 7.50244 10.0324 7.50244 10.3786V11.2727C7.50244 11.6189 7.78313 11.8996 8.12937 11.8996H8.88663C9.23288 11.8996 9.51356 11.6189 9.51356 11.2727V10.3786C9.51356 10.0324 9.23288 9.75171 8.88663 9.75171Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M13.0551 9.75171H12.2978C11.9516 9.75171 11.6709 10.0324 11.6709 10.3786V11.2727C11.6709 11.6189 11.9516 11.8996 12.2978 11.8996H13.0551C13.4013 11.8996 13.682 11.6189 13.682 11.2727V10.3786C13.682 10.0324 13.4013 9.75171 13.0551 9.75171Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M17.4887 9.75171H16.7314C16.3852 9.75171 16.1045 10.0324 16.1045 10.3786V11.2727C16.1045 11.6189 16.3852 11.8996 16.7314 11.8996H17.4887C17.8349 11.8996 18.1156 11.6189 18.1156 11.2727V10.3786C18.1156 10.0324 17.8349 9.75171 17.4887 9.75171Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M4.67521 13.635H3.91795C3.5717 13.635 3.29102 13.9157 3.29102 14.2619V15.156C3.29102 15.5022 3.5717 15.7829 3.91795 15.7829H4.67521C5.02145 15.7829 5.30214 15.5022 5.30214 15.156V14.2619C5.30214 13.9157 5.02145 13.635 4.67521 13.635Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M8.84415 13.635H8.08689C7.74065 13.635 7.45996 13.9157 7.45996 14.2619V15.156C7.45996 15.5022 7.74065 15.7829 8.08689 15.7829H8.84415C9.1904 15.7829 9.47108 15.5022 9.47108 15.156V14.2619C9.47108 13.9157 9.1904 13.635 8.84415 13.635Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M13.0131 13.635H12.2558C11.9096 13.635 11.6289 13.9157 11.6289 14.2619V15.156C11.6289 15.5022 11.9096 15.7829 12.2558 15.7829H13.0131C13.3593 15.7829 13.64 15.5022 13.64 15.156V14.2619C13.64 13.9157 13.3593 13.635 13.0131 13.635Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M17.4472 13.635H16.6899C16.3437 13.635 16.063 13.9157 16.063 14.2619V15.156C16.063 15.5022 16.3437 15.7829 16.6899 15.7829H17.4472C17.7934 15.7829 18.0741 15.5022 18.0741 15.156V14.2619C18.0741 13.9157 17.7934 13.635 17.4472 13.635Z", fill: "#2B62CD" }),
+        React__default.createElement("path", { d: "M20.3599 13.8356C19.6257 13.7546 19.4799 15.2799 18.4553 16.4962C17.8548 17.2093 17.0672 18.4098 16.9656 19.4741C16.8683 20.4944 17.1508 22.9817 20.1944 23.1776C20.5411 23.1981 20.889 23.1859 21.2335 23.1414C24.2599 22.5785 24.1522 19.7982 23.8637 18.815C23.5624 17.7891 22.5906 16.7217 21.9843 16.1555C20.8625 15.1096 21.0477 13.9115 20.3599 13.8356Z", fill: "#FF6F4D" }),
+        React__default.createElement("path", { d: "M22.1395 17.3998C22.1973 17.6137 21.9178 17.7927 21.7534 17.4586C21.6138 17.1746 21.6738 17.0792 21.7817 17.0551C21.896 17.0293 22.0915 17.2227 22.1395 17.3998Z", fill: "white" })));
+};
 
-    ${MediaQueries.mbDown} {
-      font-size: 14px;
-    }
-    ${MediaQueries.tdUp} {
-      font-size: 16px;
-      &[data-is-side='true'] {
-        font-size: 14px;
-      }
-    }
-    color: ${theme.colors.gray800};
-    > div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`;
-const StyledLastPeriodFormContainer = styled(StyledMethodContainer) `
-  .due-date-input {
-    width: 100%;
-    min-width: unset;
-    max-width: unset;
-    color: ${theme.colors.gray800};
-  }
-  .due-date-calculate-button {
-    margin-right: auto;
-    margin-left: auto;
-  }
-  input {
-    &[data-is-side='true'] {
-      ${MediaQueries.tdUp} {
-        font-size: 14px;
-      }
-    }
-    ${MediaQueries.mbDown} {
-      font-size: 14px;
-    }
-    ${MediaQueries.tdUp} {
-      font-size: 16px;
-    }
-  }
-`;
-styled.div `
-  display: flex;
-  align-items: right;
+const DueDateFormContext = createContext({});
 
-  & > p {
-    display: inline-block;
-    border-bottom: solid 1px ${theme.colors.primaryBase};
-    margin-bottom: 24px;
-    margin-left: auto;
-    color: ${theme.colors.primaryBase};
-    cursor: pointer;
-    font-size: 11px;
-    line-height: 16px;
-    text-align: right;
-  }
-`;
-const StyledImageIcon = styled.img `
-  img& {
-    width: 16px;
-    height: 16px;
-  }
-`;
-styled(StyledImageIcon) `
-  margin-right: 4px;
-`;
+const ConceptionFormContext = createContext({});
 
-const DueDateFormConception = ({ locale, onClick, siteType, pageUrl, }) => {
+const DefaultLayout$4 = () => {
     const { t } = useTranslations();
-    const [conceptionDate, setConceptionDate] = useState(new Date());
+    const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default.createElement(StyledTextField, { label: t('dueDatePage.conceptionDate'), name: "date", size: "md", value: DateToInputValue(conceptionDate), CustomInput: React__default.createElement(DatePicker, { onChange: (date) => {
-                    setConceptionDate(date);
-                }, placeholder: "dd/mm/yyyy", pickedDate: conceptionDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, customInput: (props) => {
-                    return (React__default.createElement(Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: conceptionDate &&
-                            dayjs(conceptionDate).format(DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) })) : (React__default.createElement(Input, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.conceptionDate')), value: DateToInputValue(conceptionDate), name: "date", size: "md", 
-            // type={'date' as 'text'}
-            className: "due-date-input", 
-            // onChange={(value) => {
-            //   setConceptionDate(new Date(value))
-            // }}
-            CustomInput: React__default.createElement(DatePicker, { customInput: (props) => (React__default.createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(conceptionDate) }))), disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, locale: locale, pickedDate: conceptionDate, displayDateFormat: DATE_FORMAT, onChange: (date) => {
-                    setConceptionDate(date);
-                }, placeholder: "placeholder" }) }))),
-        React__default.createElement(Button$1, { className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, onClick: () => {
-                onClick(getDueDateConception(conceptionDate), `${QUERY_HEALTH_TOOL.type}=1&sd=${format(conceptionDate, API_DATE_FORMAT)}&${QUERY_HEALTH_TOOL.additional}= `);
-            }, role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
+        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 DueDateFormIVF = ({ locale, onClick, siteType, pageUrl }) => {
+const InlineLayout$4 = () => {
     const { t } = useTranslations();
-    const [IVFDate, setIVFDate] = useState(new Date());
-    const [dayTransfer, setDayTransfer] = useState('3');
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default.createElement(StyledTextField, { label: t('dueDatePage.ivf.transferDate'), name: "date", size: "md", value: DateToInputValue(IVFDate), CustomInput: React__default.createElement(DatePicker, { onChange: (date) => {
-                    setIVFDate(date);
-                }, placeholder: "dd/mm/yyyy", pickedDate: IVFDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, customInput: (props) => {
-                    return (React__default.createElement(Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: IVFDate && dayjs(IVFDate).format(DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) })) : (React__default.createElement(Input, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray700, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.ivf.transferDate')), value: DateToInputValue(IVFDate), name: "date", size: "md", 
-            // type={'date' as 'text'}
-            className: "due-date-input", 
-            // onChange={(value) => {
-            //   setIVFDate(new Date(value))
-            // }}
-            CustomInput: React__default.createElement(DatePicker, { customInput: (props) => (React__default.createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(IVFDate) }))), disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, locale: locale, pickedDate: IVFDate, displayDateFormat: DATE_FORMAT, onChange: (date) => {
-                    setIVFDate(date);
-                }, placeholder: "placeholder" }) }))),
-        React__default.createElement("div", { style: {
-                width: '100%',
-            } },
-            React__default.createElement(RadioGroup, { id: "radio-transfer-date", direction: "vertical", size: "small", value: dayTransfer, onChange: (val) => setDayTransfer(val), options: [
-                    {
-                        value: '3',
-                        label: t('dueDatePage.ivf.transferDateRadio', {
-                            number: 3,
-                        }),
-                    },
-                    {
-                        value: '5',
-                        label: t('dueDatePage.ivf.transferDateRadio', {
-                            number: 5,
-                        }),
-                    },
-                ] })),
-        React__default.createElement(Button$1, { className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, onClick: () => {
-                onClick(getDueDateIVF(IVFDate, Number(dayTransfer)), `${QUERY_HEALTH_TOOL.type}=2&${QUERY_HEALTH_TOOL.startDate}=${format(IVFDate, API_DATE_FORMAT)}&${QUERY_HEALTH_TOOL.additional}=${dayTransfer}`);
-            }, role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
+    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 DueDateFormLastPeriod = ({ locale, onClick, siteType, pageUrl, }) => {
-    const { t } = useTranslations();
-    const [periodLength, setPeriodLength] = useState(28);
-    const [lastPeriodDate, setLastPeriodDate] = useState(new Date());
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default.createElement(StyledTextField, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), name: "date", size: "md", value: DateToInputValue(lastPeriodDate), CustomInput: React__default.createElement(DatePicker, { onChange: (date) => {
-                    setLastPeriodDate(date);
-                }, placeholder: "dd/mm/yyyy", pickedDate: lastPeriodDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, customInput: (props) => {
-                    return (React__default.createElement(Input, Object.assign({ name: "birthday", size: "md" }, props, { value: lastPeriodDate &&
-                            dayjs(lastPeriodDate).format(DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) })) : (React__default.createElement(Input, { className: "input-section due-date-input", label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: DateToInputValue(lastPeriodDate), name: "date", size: "md", CustomInput: React__default.createElement(DatePicker, { customInput: (props) => (React__default.createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(lastPeriodDate) }))), disabledDays: {
-                    before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
-                }, locale: locale, pickedDate: lastPeriodDate, displayDateFormat: DATE_FORMAT, onChange: (date) => {
-                    setLastPeriodDate(date);
-                }, placeholder: "placeholder" }) }))),
-        React__default.createElement("div", { className: "slider-due-date", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '' },
-            siteType === 'marryBaby' ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.midGray }, t('dueDatePage.lastPeriod.periodLengthLabel'))) : (React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600, style: { marginBottom: '0.5rem' } }, t('dueDatePage.lastPeriod.periodLengthLabel'))),
-            React__default.createElement("div", { className: "slider-outer-wrapper" },
-                siteType === 'marryBaby' && (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: theme.colors.gray600 }, periodLength)),
-                React__default.createElement(Slider, { containerStyle: {
-                        flex: 1,
-                    }, min: 20, max: 40, step: 1, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', onChange: setPeriodLength, value: periodLength, label: siteType !== 'marryBaby' ? undefined : null }))),
-        React__default.createElement(Button$1, { dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(getDueDateLastPeriod(lastPeriodDate, periodLength), `${QUERY_HEALTH_TOOL.type}=0&${QUERY_HEALTH_TOOL.startDate}=${format(lastPeriodDate, API_DATE_FORMAT)}&${QUERY_HEALTH_TOOL.additional}=${periodLength}`), role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
+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,
+        },
+    };
 };
 
-styled.div `
-  &[data-is-side='true'] {
-    width: 100%;
-    margin-bottom: 0;
-  }
-  ${MediaQueries.mbDown} {
-    width: 100%;
-    margin-bottom: 0;
-  }
-
-  margin-bottom: 24px;
-
-  & > :not(:last-child) {
-    margin-bottom: 8px;
-  }
-
-  .gender-selector {
-    & > :not(:last-child) {
-      margin-right: 16px;
-    }
-
-    & > div {
-      width: calc(50% - 8px);
-
-      ${MediaQueries.mbUp} {
-        max-width: 186px;
-        justify-self: left;
-      }
-    }
-  }
-`;
-styled.div `
-  margin-bottom: 20px;
-  width: 100%;
-
-  & > :not(:last-child) {
-    margin-bottom: 8px;
-  }
-  .gender-selector {
-    & > div {
-      width: calc(50% - 8px);
-    }
-  }
-`;
-styled.div `
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  ${MediaQueries.mbUp} {
-    padding: 0 16px;
-    &[data-is-side='true'] {
-      margin-top: 24px;
-    }
-  }
-
-  ${MediaQueries.mbDown} {
-    margin-top: 24px;
-    &[data-site='marryBaby'] {
-      margin-top: 12px;
-    }
-  }
-  & > :not(:last-child) {
-    margin-bottom: 8px;
-  }
-
-  button {
-    width: 100%;
-    margin: auto;
-    ${MediaQueries.mbUp} {
-      max-width: 200px;
-    }
-  }
-`;
-const StyledInputWrapper = styled.div `
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  .input-section {
-    display: flex;
-    flex-direction: column;
-  }
+const ConceptionForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    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({}, formProps),
+            formLayout === 'default' ? React__default.createElement(DefaultLayout$4, null) : React__default.createElement(InlineLayout$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')))));
+};
 
-  ${MediaQueries.mbDown} {
-    flex-direction: column;
-    .input-section {
-      width: 100%;
-    }
-  }
-`;
-styled.div `
-  position: relative;
-  width: calc(50% - 8px);
+const IVFFormContext = createContext({});
 
-  &[data-is-side='true'] {
-    .label {
-      margin-bottom: 9px;
-    }
-  }
-  ${MediaQueries.mbDown} {
-    .label {
-      margin-bottom: 9px;
-    }
-  }
-  margin-bottom: 24px;
-  #weight-gain-dropdown {
-    z-index: 9;
-    width: 100%;
-    min-width: unset;
-    max-width: unset;
-    color: ${theme.colors.gray800};
-    & > ul {
-      z-index: 1;
-      max-height: 300px;
-      overflow-y: scroll;
-    }
-  }
-`;
-styled.div `
-  margin-bottom: 24px;
-  width: 100%;
+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$1.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio$1, { key: idx, value: i.value, label: i.label })))))));
+};
 
-  ${MediaQueries.mbUp} {
-    padding: 0 16px;
-  }
-  .card {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+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$1.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio$1, { key: idx, value: i.value, label: i.label }))))))));
+};
 
-    & > :not(:last-child) {
-      margin-bottom: 8px;
-    }
+const IVFForm = ({}) => {
+    var _a;
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { t } = useTranslations();
+    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({}, formProps),
+            formLayout === 'default' ? React__default.createElement(DefaultLayout$3, null) : React__default.createElement(InlineLayout$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')))));
+};
 
-    .gender-selector {
-      row-gap: 12px;
+const LastPeriodFormContext = createContext({});
 
-      & > :not(:last-child) {
-        margin-right: 16px;
-      }
+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$1.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default.createElement(Input$1.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'))))));
+};
 
-      & > div {
-        ${MediaQueries.mbUp} {
-          width: calc(18% - 4px);
-          max-width: 186px;
-          justify-self: left;
-        }
+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$1.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'))))));
+};
 
-        ${MediaQueries.mbDown} {
-          width: calc(31% - 8px);
-          max-width: 109px;
-          justify-self: left;
-        }
-      }
-    }
+const LastPeriodForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { t } = useTranslations();
+    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({}, formProps),
+            formLayout === 'default' ? React__default.createElement(DefaultLayout$2, null) : React__default.createElement(InlineLayout$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')))));
+};
 
-    .gender-image {
-      width: 23px;
-      height: 36px;
-      object-fit: contain;
-    }
-  }
-  .note {
-    display: flex;
-    align-items: center;
-    padding-top: 8px;
-    padding-bottom: 16px;
-  }
-`;
+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;
+};
 
-const DueDateCalculator = ({ onSubmitDueDate, locale, isSide, siteType, }) => {
+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.lastPeriod);
+    const [calculatorType, setCalculatorType] = useState(DueDateCalculatorType$1.lastPeriod);
     const calculatingMethods = [
         {
-            value: DueDateCalculatorType.lastPeriod,
+            value: DueDateCalculatorType$1.lastPeriod,
             label: t('dueDatePage.lastPeriod'),
+            icon: React__default.createElement(LastPeriod, null),
         },
         {
-            value: DueDateCalculatorType.conception,
+            value: DueDateCalculatorType$1.conception,
             label: t('dueDatePage.conceptionDate'),
+            icon: React__default.createElement(ConceptionDate, null),
         },
         {
-            value: DueDateCalculatorType.IVF,
+            value: DueDateCalculatorType$1.IVF,
             label: t('dueDatePage.ivf'),
+            icon: React__default.createElement(IVF, null),
         },
     ];
-    const currentUrl = useMemo(() => {
-        if (typeof window !== 'undefined') {
-            return window.location.href;
-        }
-        else
-            return '';
-    }, []);
-    return (React__default.createElement(StyledInputWrapper, null,
-        React__default.createElement(StyledMethodContainer, { className: "input-form input-section", "data-is-side": true }, siteType === 'marryBaby' ? (React__default.createElement(StyledDropDown, { groupedWithLabel: t('dueDatePage.calculationMethod'), options: calculatingMethods, placeholder: t('dueDatePage.lastPeriod'), id: "due-date-dropdown", size: "lg", value: calculatingMethods[calculatorType], onChange: (o) => {
-                setCalculatorType(o.value);
-            } })) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.calculationMethod')),
-            React__default.createElement(StyledMethodSwitcherContainer, { "data-is-side": isSide },
-                React__default.createElement(Dropdown, { options: calculatingMethods, placeholder: t('dueDatePage.lastPeriod'), id: "due-date-dropdown", size: "md", value: calculatingMethods[calculatorType], onChange: (o) => {
-                        setCalculatorType(o.value);
-                    } }))))),
-        calculatorType === DueDateCalculatorType.lastPeriod ? (React__default.createElement(DueDateFormLastPeriod, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
-        calculatorType === DueDateCalculatorType.conception ? (React__default.createElement(DueDateFormConception, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
-        calculatorType === DueDateCalculatorType.IVF ? (React__default.createElement(DueDateFormIVF, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : 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(Input$1.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))));
 };
 
-var useStyles$5 = createStyles(() => {
+var useStyles$4 = createStyles(() => {
     return {
         root: {
             borderTopLeftRadius: 'inherit',
@@ -3517,7 +3428,7 @@ const CardWrapperContext = createContext({});
 
 const Banner = (_a) => {
     var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$5(undefined, {
+    const { classes, cx } = useStyles$4(undefined, {
         name: 'HealthToolCardWrapper__Banner',
         styles,
         classNames,
@@ -3526,7 +3437,7 @@ const Banner = (_a) => {
     return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
 };
 
-var useStyles$4 = createStyles(() => {
+var useStyles$3 = createStyles(() => {
     return {
         root: {
             padding: rem(16),
@@ -3536,7 +3447,7 @@ var useStyles$4 = createStyles(() => {
 
 const Body = (_a) => {
     var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$4(undefined, {
+    const { classes, cx } = useStyles$3(undefined, {
         name: 'HealthToolCardWrapper',
         styles,
         classNames,
@@ -3544,7 +3455,7 @@ const Body = (_a) => {
     return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
 };
 
-var useStyles$3 = createStyles((theme, { isPregTool }) => {
+var useStyles$2 = createStyles((theme, { isPregTool }) => {
     const isMarryBaby = theme.other.template === 'mb';
     return {
         root: {
@@ -3623,7 +3534,7 @@ var useStyles$3 = createStyles((theme, { isPregTool }) => {
 
 const _HealthToolCardWrapper = (_a) => {
     var { children, styles, classNames, className, isPregTool } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
-    const { classes, cx } = useStyles$3({ isPregTool }, {
+    const { classes, cx } = useStyles$2({ isPregTool }, {
         name: 'HealthToolCardWrapper',
         styles,
         classNames,
@@ -3637,268 +3548,19 @@ const HealthToolCardWrapper = _HealthToolCardWrapper;
 HealthToolCardWrapper.Body = Body;
 HealthToolCardWrapper.Banner = Banner;
 
-const StyledContent = setDefaultClass(styled.form `
-    margin: auto;
-    ${MediaQueries.mbUp} {
-      width: 100%;
-      padding: 20px;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-    ${MediaQueries.mbDown} {
-      padding: 16px;
-    }
-    .due-date-calculate-button {
-      width: 100%;
-      margin: 12px auto 0;
-      ${MediaQueries.mbUp} {
-        max-width: 200px;
-      }
-    }
-    &[data-is-side='true'] {
-      ${MediaQueries.mbUp} {
-        padding: 24px 40px 0px 40px;
-      }
-    }
-    .input-weight-form {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      padding: 0 16px;
-    }
-    .input-form {
-      display: flex;
-
-      ${MediaQueries.mbUp} {
-        margin-bottom: 24px;
-        width: calc(50% - 8px);
-      }
-      &[data-is-side='true'] {
-        ${MediaQueries.mbUp} {
-          margin-bottom: 8px;
-          width: 100%;
-        }
-      }
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-      }
-      .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-      }
-    }
-    .input-form-pwg {
-      display: flex;
-      width: calc(50% - 8px);
-
-      ${MediaQueries.mbUp} {
-        margin-bottom: 24px;
-      }
-      &[data-is-side='true'] {
-        ${MediaQueries.mbUp} {
-          margin-bottom: 8px;
-        }
-      }
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-        width: 100%;
-      }
-      .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-      }
-    }
-    .day-slider {
-      width: 100%;
-      ${MediaQueries.mbUp} {
-        width: calc(50% - 8px);
-        &[data-is-side='true'] {
-          width: 100%;
-        }
-      }
-    }
-  `, 'hhgcomp-embedtoolcard-content');
-styled.div `
-  padding: 0;
-  background-color: white;
-  border: 1px solid #e4e8ec;
-  border-radius: 4px;
-
-  &[data-site='marryBaby'] {
-    background-color: ${theme.mbColors.green};
-    border-radius: 16px;
-  }
-  .due-date-cal {
-    ${StyledContent.classSelector} {
-      ${MediaQueries.mbUp} {
-        padding: 24px;
-      }
-      ${MediaQueries.mbDown} {
-        padding: 16px;
-      }
-    }
-    display: table;
-    width: 100%;
-    .slider-due-date {
-      margin-bottom: 12px;
-      width: 100%;
-      margin-left: 0px;
-      margin-right: 0px;
-      .slider-outer-wrapper {
-        margin: 2rem -0.5rem 1rem;
-      }
-      &[data-theme='marryBaby'] {
-        padding: 1rem;
-        background: white;
-        border-radius: 1rem;
-        .slider-outer-wrapper {
-          gap: 12px;
-          display: flex;
-          align-items: center;
-          margin: 0.5rem;
-        }
-      }
-    }
-    .input-form {
-      display: flex;
-      ${MediaQueries.mbUp} {
-        width: calc(50% - 8px);
-        margin-bottom: 24px;
-      }
-      &[data-is-side='true'] {
-        ${MediaQueries.mbUp} {
-          margin-bottom: 12px;
-          width: 100%;
-        }
-      }
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .heart-rate-cal {
-    .slider-heart-rate {
-      margin-bottom: 12px;
-      width: 100%;
-      margin-left: 0px;
-      margin-right: 0px;
-      .slider-outer-wrapper {
-        margin: 2rem -0.5rem 1rem;
-      }
-    }
-  }
-  .ovulation-cal {
-    display: flex;
-    /* padding-top: 24px; */
-    justify-content: space-between;
-    flex-wrap: wrap;
-    .slider-ovulation {
-      margin-bottom: 12px;
-      /* width: 100%; */
-      margin-left: 0px;
-      margin-right: 0px;
-      .slider-outer-wrapper {
-        margin: 2rem -0.5rem 1rem;
-      }
-      &[data-theme='marryBaby'] {
-        padding: 1rem;
-        background: white;
-        border-radius: 1rem;
-        .slider-outer-wrapper {
-          gap: 12px;
-          display: flex;
-          align-items: center;
-          margin: 0.5rem;
-        }
-      }
-    }
-    .input-form {
-      display: flex;
-      ${MediaQueries.mbUp} {
-        width: calc(50% - 8px);
-        margin-bottom: 24px;
-        &[data-is-side='true'] {
-          margin-bottom: 12px;
-          width: 100%;
-        }
-      }
-      ${MediaQueries.mbDown} {
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .pwg-view-mobile {
-    &[data-is-side='true'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-    ${MediaQueries.mbDown} {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      padding: 16px 0;
-    }
-    .hide-asking-mobile {
-      gap: 10px;
-      &[data-is-side='true'] {
-        ${MediaQueries.mbUp} {
-          display: none;
-        }
-      }
-      ${MediaQueries.mbDown} {
-        display: none;
-      }
-    }
-    .hide-asking-desk {
-      gap: 10px;
-      &[data-is-side='true'] {
-        ${MediaQueries.mbUp} {
-          display: unset;
-        }
-      }
-      ${MediaQueries.mbUp} {
-        display: none;
-      }
-    }
-  }
-  input[type='date']::after {
-    width: 16px;
-    height: 16px;
-    background-image: url('https://hellobacsi.com/svg/calendar.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-    content: '';
-  }
-`;
-styled(RadioGroup) `
-  &[data-direction='horizontal'] div[data-type='circle'] {
-    margin-right: 8px;
-  }
-  label {
-    font-size: 14px;
-  }
-`;
-
-const DueDateCardEmbed = ({ locale, onSubmitDueDate, dueDatePageInfo, expertUrl, isSide, siteType, }) => {
-    var _a;
+const DueDateCardEmbed = (_a) => {
+    var _b;
+    var { dueDatePageInfo, expertUrl, formProps } = _a, props = __rest(_a, ["dueDatePageInfo", "expertUrl", "formProps"]);
     const { t } = useTranslations();
-    return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'), loading: "lazy" }), heading: t('healthTools.dueDateCalculator'), medicalReview: {
                 link: expertUrl,
-                reviewer: (_a = dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_by) === null || _a === void 0 ? void 0 : _a.display_name,
+                reviewer: (_b = dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
                 date: dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_date,
             } }),
-        React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "due-date-cal", "data-is-side": isSide },
-            React__default.createElement(DueDateCalculator, { siteType: siteType, locale: locale, onSubmitDueDate: onSubmitDueDate, isSide: isSide }))));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(DueDateForm, Object.assign({}, formProps)))));
 };
 
 const BmiFormContext = createContext({});
@@ -3989,7 +3651,7 @@ function getBmi({ weight: weightProps, height: heightProps, }) {
 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();
+    const { control, handleSubmit, setValue, watch } = useForm$1();
     const data = watch();
     const { locale } = useTranslations();
     const { getHealthToolLink } = useHealthToolsCache(locale);
@@ -4062,7 +3724,7 @@ const BabyGrowthCardEmbed = (_a) => {
             React__default.createElement(BabyGrowthForm, Object.assign({ schema: schema, onError: onError }, formProps)))));
 };
 
-var useStyles$2 = createStyles((theme, { hasOnClickFn }) => {
+var useStyles$1 = createStyles((theme, { hasOnClickFn }) => {
     return {
         root: {
             position: 'relative',
@@ -4098,7 +3760,7 @@ const BabyPoopForm = (_a) => {
     const { t } = useTranslations();
     const _theme = useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
-    const { classes } = useStyles$2({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    const { classes } = useStyles$1({ 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')),
@@ -4133,7 +3795,7 @@ const DefaultForm$1 = (_a) => {
     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$1, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+        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$1.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
@@ -4168,7 +3830,7 @@ const InlineForm$1 = (_a) => {
             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$1, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                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))),
@@ -4201,7 +3863,7 @@ const ThrForm = (_a) => {
     const { t, locale } = useTranslations();
     const minRange = useRef(40);
     const { getHealthToolLink } = useHealthToolsCache(locale);
-    const form = useForm$1({
+    const form = useForm({
         initialValues: {
             heartRate: 60,
             activeValue: 'low_intensity',
@@ -4366,8 +4028,6 @@ const BMRCardEmbed = (_a) => {
             React__default.createElement(BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps, { submitProps: Object.assign(Object.assign({}, formProps === null || formProps === void 0 ? void 0 : formProps.submitProps), { dataEventAction: 'BMR' }) })))));
 };
 
-const OvulationFormContext = createContext({});
-
 const AvoidPregnancy = (_a) => {
     var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
     const props = Object.assign({ width: size, height: size }, rest);
@@ -4396,33 +4056,6 @@ const AvoidPregnancy = (_a) => {
                 React__default.createElement("rect", { width: "18", height: "18", fill: "white", transform: "translate(0.833984)" })))));
 };
 
-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.9536 27.3696H8.18104C6.89043 27.3696 5.83447 26.3137 5.83447 25.0231V8.59706C5.83447 7.30645 6.89043 6.25049 8.18104 6.25049L19.9843 8.59706L26.9536 6.25049C28.2442 6.25049 29.3002 7.30645 29.3002 8.59706V25.0231C29.3002 26.3137 28.2442 27.3696 26.9536 27.3696Z", fill: "#E0E9FB" }),
-        React__default.createElement("path", { d: "M22.7061 22.6765H6.25666C4.91911 22.6765 4.02742 21.3389 4.5202 20.0953L5.83428 16.8101V8.59706C5.83428 7.30645 6.89023 6.25049 8.18085 6.25049H24.6069C25.8975 6.25049 26.9534 7.30645 26.9534 8.59706V16.8101L25.3108 20.9166C24.8884 21.9725 23.856 22.6765 22.7061 22.6765Z", fill: "#FFE9F1" }),
-        React__default.createElement("path", { d: "M24.6069 28.0736H8.18091C6.49138 28.0736 5.13037 26.7126 5.13037 25.0231C5.13037 24.6242 5.43543 24.3191 5.83434 24.3191C6.23326 24.3191 6.53831 24.6242 6.53831 25.0231C6.53831 25.9382 7.26575 26.6657 8.18091 26.6657H24.6069C25.5221 26.6657 26.2495 25.9382 26.2495 25.0231V22.6765C26.2495 22.2776 26.5546 21.9725 26.9535 21.9725C27.3524 21.9725 27.6575 22.2776 27.6575 22.6765V25.0231C27.6575 26.7126 26.2964 28.0736 24.6069 28.0736Z", fill: "#202135" }),
-        React__default.createElement("path", { d: "M24.607 5.54652H24.1377V5.07721C24.1377 4.04472 23.2929 3.19995 22.2604 3.19995C21.2279 3.19995 20.3831 4.04472 20.3831 5.07721V7.42378C20.3831 8.45627 21.2279 9.30104 22.2604 9.30104C22.6593 9.30104 22.9644 8.99598 22.9644 8.59707C22.9644 8.19815 22.6593 7.8931 22.2604 7.8931C22.0023 7.8931 21.7911 7.6819 21.7911 7.42378V5.07721C21.7911 4.81909 22.0023 4.60789 22.2604 4.60789C22.5185 4.60789 22.7297 4.81909 22.7297 5.07721V6.25049C22.7297 6.64941 23.0348 6.95447 23.4337 6.95447H24.607C25.5221 6.95447 26.2496 7.6819 26.2496 8.59707V15.0032C26.2496 16.1061 26.0384 17.209 25.6395 18.218L24.6774 20.635C24.3488 21.4328 23.5745 21.9725 22.7062 21.9725H6.25677C5.85786 21.9725 5.50587 21.7848 5.29468 21.4563C5.08349 21.1278 5.03656 20.7288 5.17735 20.3534L5.83439 18.7343C6.30371 17.5375 6.56183 16.2704 6.56183 14.9797V8.59707C6.56183 7.6819 7.28927 6.95447 8.20443 6.95447H9.37771C9.77663 6.95447 10.0817 6.64941 10.0817 6.25049C10.0817 5.85158 9.77663 5.54652 9.37771 5.54652H8.20443C6.5149 5.54652 5.15389 6.90753 5.15389 8.59707V15.0032C5.15389 16.1061 4.94269 17.209 4.54378 18.218L3.88674 19.8371C3.55822 20.635 3.67554 21.5267 4.14486 22.2541C4.61417 22.9581 5.43547 23.3805 6.28024 23.3805H22.7297C24.1846 23.3805 25.4517 22.5122 25.9914 21.1747L26.9535 18.7577C27.4229 17.561 27.681 16.2938 27.681 15.0032V8.59707C27.6575 6.90753 26.2965 5.54652 24.607 5.54652Z", fill: "#202135" }),
-        React__default.createElement("path", { d: "M12.8743 9.30104C13.2732 9.30104 13.5783 8.99598 13.5783 8.59707C13.5783 8.19815 13.2732 7.8931 12.8743 7.8931C12.6162 7.8931 12.405 7.6819 12.405 7.42378V5.07721C12.405 4.81909 12.6162 4.60789 12.8743 4.60789C13.1325 4.60789 13.3436 4.81909 13.3436 5.07721V6.25049C13.3436 6.64941 13.6487 6.95447 14.0476 6.95447H18.7408C19.1397 6.95447 19.4447 6.64941 19.4447 6.25049C19.4447 5.85158 19.1397 5.54652 18.7408 5.54652H14.7516V5.07721C14.7516 4.04472 13.9068 3.19995 12.8743 3.19995C11.8418 3.19995 10.9971 4.04472 10.9971 5.07721V7.42378C10.9971 8.45627 11.8418 9.30104 12.8743 9.30104Z", fill: "#202135" }),
-        React__default.createElement("path", { d: "M21.0873 16.8101C20.4303 16.8101 19.9141 16.2938 19.9141 15.6368C19.9141 14.9797 20.4303 14.4635 21.0873 14.4635C21.7444 14.4635 22.2606 14.9797 22.2606 15.6368C22.2606 16.2938 21.7444 16.8101 21.0873 16.8101Z", fill: "#E85388" }),
-        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7009 13.2902C11.0438 13.2902 10.5276 12.7739 10.5276 12.1169C10.5276 11.4598 11.0438 10.9436 11.7009 10.9436C12.3579 10.9436 12.8742 11.4598 12.8742 12.1169C12.8742 12.7739 12.3579 13.2902 11.7009 13.2902ZM16.394 13.2902C15.737 13.2902 15.2207 12.7739 15.2207 12.1169C15.2207 11.4598 15.737 10.9436 16.394 10.9436C17.0511 10.9436 17.5673 11.4598 17.5673 12.1169C17.5673 12.7739 17.0511 13.2902 16.394 13.2902ZM21.0872 13.2902C20.4301 13.2902 19.9139 12.7739 19.9139 12.1169C19.9139 11.4598 20.4301 10.9436 21.0872 10.9436C21.7442 10.9436 22.2605 11.4598 22.2605 12.1169C22.2605 12.7739 21.7442 13.2902 21.0872 13.2902ZM11.7009 16.81C11.0438 16.81 10.5276 16.2938 10.5276 15.6367C10.5276 14.9797 11.0438 14.4635 11.7009 14.4635C12.3579 14.4635 12.8742 14.9797 12.8742 15.6367C12.8742 16.2938 12.3579 16.81 11.7009 16.81ZM16.394 16.81C15.737 16.81 15.2207 16.2938 15.2207 15.6367C15.2207 14.9797 15.737 14.4635 16.394 14.4635C17.0511 14.4635 17.5673 14.9797 17.5673 15.6367C17.5673 16.2938 17.0511 16.81 16.394 16.81ZM20.1721 20.2126C19.5151 20.2126 19.0927 19.7432 19.21 19.1566C19.3274 18.57 19.9375 18.1006 20.5945 18.1006C21.2515 18.1006 21.6739 18.57 21.5566 19.1566C21.4393 19.7432 20.8292 20.2126 20.1721 20.2126ZM15.479 20.2126C14.8219 20.2126 14.3996 19.7432 14.5169 19.1566C14.6342 18.57 15.2443 18.1006 15.9014 18.1006C16.5584 18.1006 16.9808 18.57 16.8635 19.1566C16.7461 19.7432 16.136 20.2126 15.479 20.2126ZM9.82374 19.1566C9.70641 19.7432 10.1288 20.2126 10.7858 20.2126C11.4429 20.2126 12.053 19.7432 12.1703 19.1566C12.2876 18.57 11.8653 18.1006 11.2082 18.1006C10.5512 18.1006 9.94107 18.57 9.82374 19.1566Z", 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.23462", width: "22.0504", height: "17.1503", rx: "2", fill: "#E3F2FF" }),
-        React__default.createElement("path", { d: "M0 4.23462C0 3.13005 0.895431 2.23462 2 2.23462H20.0504C21.155 2.23462 22.0504 3.13005 22.0504 4.23462V5.90969H0V4.23462Z", fill: "#2D87F3" }),
-        React__default.createElement("path", { d: "M17.1351 1H17.0853C16.532 1 16.0835 1.44854 16.0835 2.00185V3.63855C16.0835 4.19186 16.532 4.6404 17.0853 4.6404H17.1351C17.6884 4.6404 18.1369 4.19186 18.1369 3.63855V2.00185C18.1369 1.44854 17.6884 1 17.1351 1Z", fill: "#284A75" }),
-        React__default.createElement("path", { d: "M4.2751 4.64038H4.32481C4.87812 4.64038 5.32666 4.19184 5.32666 3.63853V2.00183C5.32666 1.44853 4.87812 0.99998 4.32481 0.99998H4.2751C3.72179 0.99998 3.27325 1.44853 3.27325 2.00183V3.63853C3.27325 4.19184 3.72179 4.64038 4.2751 4.64038Z", fill: "#284A75" }),
-        React__default.createElement("path", { d: "M4.7172 9.75171H3.95994C3.61369 9.75171 3.33301 10.0324 3.33301 10.3786V11.2727C3.33301 11.6189 3.61369 11.8996 3.95994 11.8996H4.7172C5.06344 11.8996 5.34413 11.6189 5.34413 11.2727V10.3786C5.34413 10.0324 5.06344 9.75171 4.7172 9.75171Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M8.88663 9.75171H8.12937C7.78313 9.75171 7.50244 10.0324 7.50244 10.3786V11.2727C7.50244 11.6189 7.78313 11.8996 8.12937 11.8996H8.88663C9.23288 11.8996 9.51356 11.6189 9.51356 11.2727V10.3786C9.51356 10.0324 9.23288 9.75171 8.88663 9.75171Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M13.0551 9.75171H12.2978C11.9516 9.75171 11.6709 10.0324 11.6709 10.3786V11.2727C11.6709 11.6189 11.9516 11.8996 12.2978 11.8996H13.0551C13.4013 11.8996 13.682 11.6189 13.682 11.2727V10.3786C13.682 10.0324 13.4013 9.75171 13.0551 9.75171Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M17.4887 9.75171H16.7314C16.3852 9.75171 16.1045 10.0324 16.1045 10.3786V11.2727C16.1045 11.6189 16.3852 11.8996 16.7314 11.8996H17.4887C17.8349 11.8996 18.1156 11.6189 18.1156 11.2727V10.3786C18.1156 10.0324 17.8349 9.75171 17.4887 9.75171Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M4.67521 13.635H3.91795C3.5717 13.635 3.29102 13.9157 3.29102 14.2619V15.156C3.29102 15.5022 3.5717 15.7829 3.91795 15.7829H4.67521C5.02145 15.7829 5.30214 15.5022 5.30214 15.156V14.2619C5.30214 13.9157 5.02145 13.635 4.67521 13.635Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M8.84415 13.635H8.08689C7.74065 13.635 7.45996 13.9157 7.45996 14.2619V15.156C7.45996 15.5022 7.74065 15.7829 8.08689 15.7829H8.84415C9.1904 15.7829 9.47108 15.5022 9.47108 15.156V14.2619C9.47108 13.9157 9.1904 13.635 8.84415 13.635Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M13.0131 13.635H12.2558C11.9096 13.635 11.6289 13.9157 11.6289 14.2619V15.156C11.6289 15.5022 11.9096 15.7829 12.2558 15.7829H13.0131C13.3593 15.7829 13.64 15.5022 13.64 15.156V14.2619C13.64 13.9157 13.3593 13.635 13.0131 13.635Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M17.4472 13.635H16.6899C16.3437 13.635 16.063 13.9157 16.063 14.2619V15.156C16.063 15.5022 16.3437 15.7829 16.6899 15.7829H17.4472C17.7934 15.7829 18.0741 15.5022 18.0741 15.156V14.2619C18.0741 13.9157 17.7934 13.635 17.4472 13.635Z", fill: "#2B62CD" }),
-        React__default.createElement("path", { d: "M20.3599 13.8356C19.6257 13.7546 19.4799 15.2799 18.4553 16.4962C17.8548 17.2093 17.0672 18.4098 16.9656 19.4741C16.8683 20.4944 17.1508 22.9817 20.1944 23.1776C20.5411 23.1981 20.889 23.1859 21.2335 23.1414C24.2599 22.5785 24.1522 19.7982 23.8637 18.815C23.5624 17.7891 22.5906 16.7217 21.9843 16.1555C20.8625 15.1096 21.0477 13.9115 20.3599 13.8356Z", fill: "#FF6F4D" }),
-        React__default.createElement("path", { d: "M22.1395 17.3998C22.1973 17.6137 21.9178 17.7927 21.7534 17.4586C21.6138 17.1746 21.6738 17.0792 21.7817 17.0551C21.896 17.0293 22.0915 17.2227 22.1395 17.3998Z", fill: "white" })));
-};
-
 const TryConceive = (_a) => {
     var { isMarryBaby, size = 24 } = _a, rest = __rest(_a, ["isMarryBaby", "size"]);
     const props = Object.assign({ width: size, height: size }, rest);
@@ -4449,168 +4082,109 @@ const TryConceive = (_a) => {
         React__default.createElement("path", { d: "M8.998 3.33765C9.04281 3.33757 9.08649 3.35177 9.12269 3.37818C9.15889 3.40459 9.18574 3.44185 9.19935 3.48455C9.21295 3.52724 9.2126 3.57317 9.19835 3.61565C9.18411 3.65814 9.15669 3.69499 9.1201 3.72085C9.11612 3.72366 9.09696 3.73621 9.08012 3.74873C8.9203 3.86717 8.12331 4.50972 8.08903 5.50728C8.06225 6.28631 8.49221 6.63861 8.90346 6.7085C9.26976 6.77097 9.7341 6.61287 9.88812 6.1191C9.96972 5.85758 9.83247 5.67926 9.67683 5.59963C9.54127 5.53024 9.35737 5.52296 9.25218 5.66323C9.23556 5.68539 9.21474 5.70406 9.1909 5.71818C9.16707 5.73229 9.14068 5.74157 9.11326 5.74549C9.08584 5.7494 9.05791 5.74788 9.03108 5.74101C9.00424 5.73413 8.97903 5.72204 8.95687 5.70542C8.93471 5.6888 8.91604 5.66798 8.90192 5.64414C8.88781 5.62031 8.87853 5.59392 8.87461 5.5665C8.87069 5.53908 8.87222 5.51115 8.87909 5.48432C8.88597 5.45749 8.89806 5.43227 8.91468 5.41011C9.12987 5.1232 9.52225 5.04663 9.86903 5.22406C10.1868 5.38662 10.4404 5.76547 10.2909 6.24479C10.0975 6.86519 9.48411 7.23517 8.83284 7.12443C8.27266 7.02919 7.63134 6.54478 7.66748 5.49279C7.71318 4.15886 8.83674 3.39991 8.88905 3.36823C8.92188 3.34826 8.95957 3.33768 8.998 3.33765Z", fill: "#BA8288" })));
 };
 
-var useStyles$1 = createStyles(() => {
-    return {
-        root: {
-            justifyContent: 'flex-start',
-        },
-        group: {
-            display: 'flex',
-            alignItems: 'stretch',
-            gap: rem(8),
-        },
-        item: {
-            flex: '1 1 0px',
-        },
-    };
-});
-
-const CalculatorType = (_a) => {
-    var { label, classNames, styles } = _a, props = __rest(_a, ["label", "classNames", "styles"]);
-    const { t } = useTranslations();
-    const { classes, theme } = useStyles$1(undefined, {
-        name: 'CalculatorType',
-        classNames,
-        styles,
-    });
-    const isMarryBaby = theme.other.template === 'mb';
-    const iconSize = isMarryBaby ? 32 : 18;
-    const calculatingMethods = [
-        {
-            label: t('ovulationPage.trackPeriod'),
-            value: OvulationCalculatorType.trackPeriod,
-            icon: React__default.createElement(LastPeriod, { size: iconSize, isMarryBaby: isMarryBaby }),
-        },
-        {
-            label: t('ovulationPage.conceive'),
-            value: OvulationCalculatorType.conceive,
-            icon: React__default.createElement(TryConceive, { size: iconSize, isMarryBaby: isMarryBaby }),
-        },
-        {
-            label: t('ovulationPage.avoidPregnancy'),
-            value: OvulationCalculatorType.avoidPregnancy,
-            icon: React__default.createElement(AvoidPregnancy, { size: iconSize, isMarryBaby: isMarryBaby }),
-        },
-    ];
-    return (React__default.createElement(Box, null,
-        React__default.createElement(Input$2.Wrapper, { label: label },
-            React__default.createElement(Chip.Group, Object.assign({ defaultValue: String(OvulationCalculatorType.trackPeriod) }, props),
-                React__default.createElement(Box, { className: classes.group }, calculatingMethods.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
-                        iconWrapper: {
-                            display: 'none',
-                        },
-                        label: {
-                            width: '100%',
-                            borderRadius: rem(isMarryBaby ? 12 : 8),
-                            padding: 0,
-                            border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
-                            height: '100%',
-                            '&[data-checked]': {
-                                padding: 0,
-                                backgroundColor: isMarryBaby
-                                    ? '#FFE9F1'
-                                    : theme.colors.blue[0],
-                                border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
-                            },
-                            [theme.fn.smallerThan('sm')]: {
-                                alignItems: 'flex-start',
-                            },
-                        },
-                    } },
-                    React__default.createElement(Box, { sx: Object.assign(Object.assign({ width: '100%', display: 'flex', gap: rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
-                            flexDirection: 'column',
-                        })), { [theme.fn.smallerThan('sm')]: {
-                                flexDirection: 'column',
-                                padding: rem(8),
-                            } }) },
-                        i.icon,
-                        React__default.createElement(Text, { size: isMarryBaby ? 'p3' : 'p2', styles: {
-                                root: Object.assign(Object.assign({}, (isMarryBaby && {
-                                    textAlign: 'center',
-                                })), { [theme.fn.smallerThan('sm')]: {
-                                        whiteSpace: 'normal',
-                                        fontSize: rem(12),
-                                        lineHeight: rem(18),
-                                        textAlign: 'center',
-                                    } }),
-                            } }, i.label))))))))));
-};
+const OvulationFormContext = createContext({});
 
-const DefaultLayout = (_a) => {
+const DefaultLayout$1 = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
-    const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
+    const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(CalculatorType, Object.assign({ label: t('dueDatePage.calculationMethod') }, form.getInputProps('calculatorType'))),
-        React__default.createElement(DatePicker$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+        React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod') }, 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$1.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45 }, form.getInputProps('cycleLength'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15 }, form.getInputProps('periodLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const InlineLayout = (_a) => {
+const InlineLayout$1 = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
-    const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
+    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(CalculatorType, Object.assign({}, form.getInputProps('calculatorType')))),
+            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$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+            React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+                React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
+            form.errors.cycleLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
+                React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
+            form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const MbLayout$1 = (_a) => {
+const MbLayout$2 = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
-    const { currentUrl, submitProps, form } = useContext(OvulationFormContext);
+    const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(Input$1.Wrapper, { label: React__default.createElement(Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
-            React__default.createElement(CalculatorType, Object.assign({}, form.getInputProps('calculatorType')))),
+            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, { size: 24 }) },
-            React__default.createElement(DatePicker$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+            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$1.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
+            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
-            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-var OvulationCalculatorType;
+var OvulationCalculatorType$1;
 (function (OvulationCalculatorType) {
     OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
     OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
     OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
-})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+})(OvulationCalculatorType$1 || (OvulationCalculatorType$1 = {}));
 const OvulationForm = (_a) => {
-    var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
     const theme = useMantineTheme();
+    const { t } = useTranslations();
     const isMarryBaby = theme.other.template === 'mb';
-    const form = useForm$1({
+    const form = useForm({
         initialValues: {
-            calculatorType: String(OvulationCalculatorType.trackPeriod),
+            calculatorType: String(OvulationCalculatorType$1.trackPeriod),
             periodLength: 7,
             cycleLength: 28,
             lastPeriodDate: new Date(),
         },
+        validate: {
+            periodLength: isNotEmpty(t('validation.error.requiredField')),
+            cycleLength: isNotEmpty(t('validation.error.requiredField')),
+        },
     });
     const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, props);
-    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form } }, isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+    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 } }, isMarryBaby ? (React__default.createElement(MbLayout$2, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
 };
 
 const OvulationCardEmbed = (_a) => {
     var _b;
-    var { ovulationPageInfo, expertUrl, formProps } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps"]);
+    var { ovulationPageInfo, expertUrl, formProps, isMobile } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps", "isMobile"]);
     const { t } = useTranslations();
     return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
@@ -4620,7 +4194,93 @@ const OvulationCardEmbed = (_a) => {
                 date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
             } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(OvulationForm, Object.assign({}, formProps)))));
+            React__default.createElement(OvulationForm, Object.assign({ isMobile: isMobile }, formProps)))));
+};
+
+const BabyVaccineFormContext = createContext({});
+
+const DefaultLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
+        React__default.createElement(DatePicker, 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: "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'))));
+};
+
+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 } }, isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+const BabyVaccineCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { babyVaccineContent, formProps } = _a, props = __rest(_a, ["babyVaccineContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.featuredImage) ||
+                    CommonGAssets.getAssetPath('health-tools/baby-vaccine-icon.svg'), loading: "lazy" }), heading: t('babyVaccineTool.heading'), medicalReview: {
+                link: ((_b = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link) || '',
+                reviewer: ((_c = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer) || '',
+                date: ((_d = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date) || '',
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyVaccineForm, Object.assign({}, formProps)))));
 };
 
 const PWGFormContext = createContext({});
@@ -4633,9 +4293,15 @@ const DefaultForm = (_a) => {
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default.createElement(Input$1.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$1.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'))),
+        React__default.createElement(Input$1.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$1.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$1.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'))));
 };
@@ -4712,7 +4378,7 @@ const PWGForm = (_a) => {
     const { t, locale } = useTranslations();
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
-    const form = useForm$1({
+    const form = useForm({
         validate: {
             pregnantWeek: isNotEmpty(t('validation.error.requiredField')),
             height: isNotEmpty(t('validation.error.requiredField')),
@@ -6053,7 +5719,7 @@ const BannerWithOptions = (props) => {
         ? itemsProp.filter((i) => !Boolean(i.isPNBtn)).filter(Boolean)
         : itemsProp, [itemsProp]);
     const { getHealthToolLink } = useHealthToolsCache(locale);
-    const form = useForm$1({
+    const form = useForm({
         initialValues: {
             bannerOptions: [],
         },
@@ -6422,7 +6088,7 @@ const MainForm = () => {
     const isLoggedIn = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
     const { currentUrl, isMobile, pnSuggestCategory = [], nextStep, formValues, setFormValues, onSubmit: _onSubmit, submitLoading, selectCategory, setCategoryLibs, setSelectCategory, maxSelectCategory, } = useContext(PremiumNewsletterModalContext);
     const pnSuggestCategoryIds = pnSuggestCategory.map((i) => i.catId);
-    const form = useForm$1({
+    const form = useForm({
         validate: {
             name: isNotEmpty(t('healthToolPNModal.mainForm.requireName')),
         },
@@ -7580,4 +7246,4 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-export { MAPPING_CATEGORY_PREMIUM_TYPE as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, BabyPoopForm as E, FileDropdown as F, Grid as G, THRCardEmbed as H, IconText as I, ThrForm as J, BMRCardEmbed as K, OvulationForm as L, MobileBottomNavigation as M, PWGCardEmbed as N, OvulationCardEmbed as O, Pagination as P, PWGForm as Q, Radio as R, ScrollList as S, Tag as T, DateRangePicker as U, Breadcrumbs as V, ShareContainer as W, ShareDrawer as X, AdBlock as Y, FixedBottomAdBlock as Z, SurveyOrPremiumBanner as _, Avatar as a, MAPPING_CATEGORY_PREMIUM_API_TYPE as a0, SideBannerModal as a1, UserProfileNavigation as a2, NavHeader as a3, UserStats as a4, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateCardEmbed as v, BMICardEmbed as w, BmiForm as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };
+export { AdBlock as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, BabyPoopEmbed as E, FileDropdown as F, Grid as G, BabyPoopForm as H, IconText as I, THRCardEmbed as J, ThrForm as K, BMRCardEmbed as L, MobileBottomNavigation as M, OvulationForm as N, OvulationCardEmbed as O, Pagination as P, BabyVaccineForm as Q, Radio as R, ScrollList as S, Tag as T, BabyVaccineCardEmbed as U, PWGCardEmbed as V, PWGForm as W, DateRangePicker as X, Breadcrumbs as Y, ShareContainer as Z, ShareDrawer as _, Avatar as a, FixedBottomAdBlock as a0, SurveyOrPremiumBanner as a1, MAPPING_CATEGORY_PREMIUM_TYPE as a2, MAPPING_CATEGORY_PREMIUM_API_TYPE as a3, SideBannerModal as a4, UserProfileNavigation as a5, NavHeader as a6, UserStats as a7, BorderHeading as b, Toggle as c, RateStars as d, ArticleCard$1 as e, ArticleCard as f, CategoryCard as g, CheckboxGroup as h, ProgressBar as i, RadioGroup as j, index$1 as k, StatisticCard as l, index as m, Tabs as n, SurveyQuestionCard as o, SurveyThankyouCard as p, FloatButtonGroup as q, CookieAcceptConfirm as r, MobileBottomNavigationIcon as s, SeoHead as t, ToolsBannerCard as u, DueDateForm as v, DueDateCardEmbed as w, BMICardEmbed as x, BmiForm as y, BabyGrowthCardEmbed as z };