@hhgtech/hhg-components 1.29.43 → 1.29.44

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

@@ -1,68 +1,68 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-b1db79d0.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-64fbe1fc.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-3501a8c9.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-e2d45ff6.js';
-import { T as Text$1 } from './index-8e030e26.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-77e4ea0d.js';
+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 { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-cb06c57d.js';
-import { H as Heading } from './index-c853dc6e.js';
-import { t as theme } from './theme-ad9ae9bc.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 { 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 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-df7ed505.js';
-import { L as LOCALE } from './index-cc4e3181.js';
-import './useMantineLocale-5341dd85.js';
-import './translationsContext-dd192b6b.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-d73390b2.js';
+import { L as LOCALE } from './index-3e04178f.js';
+import './useMantineLocale-6a509174.js';
+import './translationsContext-9021710e.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-7b6dd120.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-7ef38b29.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-23968a4b.js';
-import { B as Button } from './index-0771cb54.js';
-import { I as Input } from './index-b115d850.js';
+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 parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-2cb49e0e.js';
-import { u as useTranslations } from './useTranslations-5f0ff5be.js';
-import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
+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 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-08683b2c.js';
-import { D as DATE_FORMAT } from './types-1184bbca.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-5f7c2eba.js';
-import { D as DatePicker } from './index-f0551563.js';
-import { M as MarryBabyText } from './index-1d14271f.js';
-import { S as Slider } from './index-30aa26a2.js';
-import { D as Dropdown } from './index-54d95469.js';
-import { f as formatUserProfileUrl } from './index-a6c27fed.js';
+import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-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-38287625.js';
-import { D as DatePicker$1 } from './index-8f004caa.js';
+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-29676c24.js';
+import { a as useOutsideClick } from './useOutsideClick-4a5bba56.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-87a58288.js';
+import { g as getSocialList } from './getSocialList-cffac849.js';
 import { v4 } from 'uuid';
-import './constants-3f24d4bd.js';
-import './utils-3d5bdbed.js';
-import './WhatsApp-98f17e50.js';
-import './index.styled-7e8976d7.js';
-import './index-2219b86b.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-4707108c.js';
-import { I as Icon } from './index-10f46069.js';
+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 { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-8345f710.js';
+import { M as Modal } from './index-48fd5f17.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-bdcae9e9.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-98886668.js';
+import { g as getCookie } from './cookieHelper-4166d977.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-00141ab9.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -449,7 +449,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$6 = createStyles((_theme, {}) => ({
+var useStyles$7 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -469,7 +469,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$6(
+    const { classes, cx } = useStyles$7(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1688,7 +1688,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body$1
 });
 
-var useStyles$5 = createStyles((theme) => {
+var useStyles$6 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1740,7 +1740,7 @@ var useStyles$5 = createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$5(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$6(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -3504,7 +3504,7 @@ const DueDateCalculator = ({ onSubmitDueDate, locale, isSide, siteType, }) => {
         calculatorType === DueDateCalculatorType.IVF ? (React__default.createElement(DueDateFormIVF, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null));
 };
 
-var useStyles$4 = createStyles(() => {
+var useStyles$5 = createStyles(() => {
     return {
         root: {
             borderTopLeftRadius: 'inherit',
@@ -3517,7 +3517,7 @@ const CardWrapperContext = createContext({});
 
 const Banner = (_a) => {
     var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$4(undefined, {
+    const { classes, cx } = useStyles$5(undefined, {
         name: 'HealthToolCardWrapper__Banner',
         styles,
         classNames,
@@ -3526,7 +3526,7 @@ const Banner = (_a) => {
     return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
 };
 
-var useStyles$3 = createStyles(() => {
+var useStyles$4 = createStyles(() => {
     return {
         root: {
             padding: rem(16),
@@ -3536,7 +3536,7 @@ var useStyles$3 = createStyles(() => {
 
 const Body = (_a) => {
     var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$3(undefined, {
+    const { classes, cx } = useStyles$4(undefined, {
         name: 'HealthToolCardWrapper',
         styles,
         classNames,
@@ -3544,7 +3544,7 @@ const Body = (_a) => {
     return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
 };
 
-var useStyles$2 = createStyles((theme, { isPregTool }) => {
+var useStyles$3 = createStyles((theme, { isPregTool }) => {
     const isMarryBaby = theme.other.template === 'mb';
     return {
         root: {
@@ -3623,7 +3623,7 @@ var useStyles$2 = 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$2({ isPregTool }, {
+    const { classes, cx } = useStyles$3({ isPregTool }, {
         name: 'HealthToolCardWrapper',
         styles,
         classNames,
@@ -3945,7 +3945,7 @@ const InlineForm$2 = (props) => {
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                 return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
                         React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
             } }),
@@ -4062,7 +4062,7 @@ const BabyGrowthCardEmbed = (_a) => {
             React__default.createElement(BabyGrowthForm, Object.assign({ schema: schema, onError: onError }, formProps)))));
 };
 
-var useStyles$1 = createStyles((theme, { hasOnClickFn }) => {
+var useStyles$2 = createStyles((theme, { hasOnClickFn }) => {
     return {
         root: {
             position: 'relative',
@@ -4098,7 +4098,7 @@ const BabyPoopForm = (_a) => {
     const { t } = useTranslations();
     const _theme = useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
-    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    const { classes } = useStyles$2({ 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')),
@@ -4163,7 +4163,7 @@ const InlineForm$1 = (_a) => {
     const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
                 React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
             form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
@@ -4207,8 +4207,8 @@ const ThrForm = (_a) => {
             activeValue: 'low_intensity',
         },
         validate: {
-            gender: isNotEmpty(t('tools.requiredErrorMess.gender')),
-            age: isNotEmpty(t('tools.requiredErrorMess.age')),
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            age: isNotEmpty(t('validation.error.requiredField')),
             heartRate: (value) => {
                 return Number(value) >= minRange.current && Number(value) <= 200
                     ? null
@@ -4366,127 +4366,261 @@ 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 OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
-    const { t } = useTranslations();
-    const [lastPeriodDate, setLastPeriodDate] = useState(new Date());
-    const [cycleValue, setCycleValue] = useState(28);
-    const [periodDurationValue, setPeriodDurationValue] = useState(7);
-    const ovulationInfo = {
-        cycle: cycleValue,
-        periodDateStart: lastPeriodDate,
-        periodLength: periodDurationValue,
-    };
-    const currentUrl = useMemo(() => {
-        if (typeof window !== 'undefined') {
-            return window.location.href;
-        }
-        else
-            return '';
-    }, []);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledLastPeriodFormContainer, { className: "input-form input-section", "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: addDays(new Date(), -45),
-                    after: new Date(),
-                }, customInput: (props) => {
-                    return (React__default.createElement(Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: lastPeriodDate &&
-                            dayjs(lastPeriodDate).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: "#595959", style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: DateToInputValue(lastPeriodDate), size: "md", name: "date", className: "due-date-input", CustomInput: React__default.createElement(DatePicker, { customInput: (props) => (React__default.createElement("input", Object.assign({}, props, { type: "date", className: "due-date-input", value: DateToInputValue(lastPeriodDate) }))), locale: locale, pickedDate: lastPeriodDate, displayDateFormat: DATE_FORMAT, onChange: (date) => {
-                    setLastPeriodDate(date);
-                }, disabledDays: {
-                    before: addDays(new Date(), -45),
-                    after: new Date(),
-                }, placeholder: "Ch\u1ECDn ng\u00E0y" }) }))),
-        React__default.createElement("div", { className: "slider-ovulation day-slider", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '', "data-is-side": isSide },
-            siteType === 'marryBaby' ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.midGray }, t('ovulationPage.cycleLength'))) : (React__default.createElement(Text, { size: "s4", weight: "semiBold", color: "#595959" },
-                t('ovulationPage.cycleLength') + ' ',
-                React__default.createElement("span", { style: { minHeight: '36px' } }, t('ovulationPage.dayUnit')))),
-            React__default.createElement("div", { className: "slider-outer-wrapper" },
-                siteType === 'marryBaby' && (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: theme.colors.gray600 }, cycleValue)),
-                React__default.createElement(Slider, { containerStyle: {
-                        flex: 1,
-                    }, min: 21, max: 45, step: 1, value: cycleValue, onChange: setCycleValue, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', label: siteType !== 'marryBaby' ? undefined : null }))),
-        React__default.createElement("div", { className: "slider-ovulation day-slider", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '', "data-is-side": isSide },
-            siteType === 'marryBaby' ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.midGray }, t('ovulationPage.periodDuration'))) : (React__default.createElement(Text, { size: "s4", weight: "semiBold", color: "#595959" },
-                t('ovulationPage.periodDuration') + ' ',
-                React__default.createElement(Text, { size: "s4", weight: "semiBold", color: "#595959", style: { display: 'inline', minHeight: '36px' } }, t('ovulationPage.dayUnit')))),
-            React__default.createElement("div", { className: "slider-outer-wrapper" },
-                siteType === 'marryBaby' && (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: theme.colors.gray600 }, periodDurationValue)),
-                React__default.createElement(Slider, { containerStyle: {
-                        flex: 1,
-                    }, min: 1, max: 15, step: 1, value: periodDurationValue, onChange: setPeriodDurationValue, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', label: siteType !== 'marryBaby' ? undefined : null }))),
-        React__default.createElement("div", { style: {
-                width: '100%',
-                display: 'flex',
-            } },
-            React__default.createElement(Button$1, { className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl, onClick: () => {
-                    localStorage.setItem('ovulationInfo', JSON.stringify(ovulationInfo));
-                    onSubmit &&
-                        onSubmit({
-                            startDate: lastPeriodDate,
-                            cycle: cycleValue,
-                            periodLength: periodDurationValue,
-                        });
-                }, role: "button" }, t('dueDatePage.lastPeriod.calculate')))));
+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);
+    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.1334C17.7981 27.1334 19.0961 26.9842 20.3682 26.6858C23.751 25.8923 26.3923 23.251 27.1858 19.8682C27.7826 17.324 27.7826 14.6761 27.1858 12.1319C26.3923 8.74908 23.751 6.10779 20.3682 5.3143C17.824 4.7175 15.1761 4.7175 12.6319 5.3143C9.24909 6.10779 6.60779 8.74908 5.8143 12.1319C5.5159 13.404 5.36669 14.702 5.3667 16.0001C5.3667 16.4787 4.97868 16.8667 4.50003 16.8667C4.02139 16.8667 3.63336 16.4787 3.63336 16.0001C3.63336 14.5692 3.79783 13.1383 4.12677 11.736C5.0706 7.71233 8.21233 4.5706 12.236 3.62677C15.0406 2.9689 17.9594 2.9689 20.764 3.62677C24.7877 4.5706 27.9295 7.71232 28.8733 11.736C29.5312 14.5406 29.5312 17.4594 28.8733 20.264C27.9295 24.2877 24.7877 27.4295 20.764 28.3733C19.3617 28.7022 17.9309 28.8667 16.5 28.8667C16.0214 28.8667 15.6334 28.4787 15.6334 28C15.6334 27.5214 16.0214 27.1334 16.5 27.1334Z", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M12.5 16C12.5 13.7909 14.2909 12 16.5 12C18.7091 12 20.5 13.7909 20.5 16C20.5 18.2091 18.7091 20 16.5 20C14.2909 20 12.5 18.2091 12.5 16Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6333 16C11.6333 13.3122 13.8122 11.1333 16.5 11.1333C19.1878 11.1333 21.3666 13.3122 21.3666 16C21.3666 18.6878 19.1878 20.8666 16.5 20.8666C13.8122 20.8666 11.6333 18.6878 11.6333 16ZM16.5 12.8666C14.7695 12.8666 13.3666 14.2695 13.3666 16C13.3666 17.7305 14.7695 19.1333 16.5 19.1333C18.2305 19.1333 19.6333 17.7305 19.6333 16C19.6333 14.2695 18.2305 12.8666 16.5 12.8666Z", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M12.4998 22.6667C12.4998 24.1394 11.3059 25.3333 9.83317 25.3333C8.36041 25.3333 7.1665 24.1394 7.1665 22.6667C7.1665 21.1939 8.36041 20 9.83317 20C11.3059 20 12.4998 21.1939 12.4998 22.6667Z", fill: "#3E3F58" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.3046 22.1953C10.5649 22.4556 10.5649 22.8777 10.3046 23.1381L8.39454 25.0481C8.03509 25.4075 7.83315 25.8951 7.83315 26.4034C7.83315 27.6344 7.13764 28.7598 6.03658 29.3103L4.79796 29.9296C4.46864 30.0943 4.0682 29.9608 3.90354 29.6315C3.73888 29.3022 3.87236 28.9017 4.20168 28.737L5.4403 28.1177C6.08964 27.7931 6.49982 27.1294 6.49982 26.4034C6.49982 25.5414 6.84223 24.7148 7.45173 24.1053L9.36175 22.1953C9.6221 21.9349 10.0442 21.9349 10.3046 22.1953Z", fill: "#3E3F58" }),
+        React__default.createElement("path", { d: "M3.87361 4.78779C3.48309 4.39727 3.48309 3.76411 3.87361 3.37358C4.26413 2.98306 4.8973 2.98306 5.28782 3.37358L28.3866 26.4724C28.7772 26.8629 28.7772 27.4961 28.3866 27.8866C27.9961 28.2771 27.363 28.2771 26.9724 27.8866L3.87361 4.78779Z", fill: "#E85388" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("g", { clipPath: "url(#clip0_1530_7251)" },
+            React__default.createElement("path", { d: "M8.9825 10.8705C8.97522 10.8104 8.99706 10.7595 9.03164 10.7103C9.11172 10.5957 9.18816 10.481 9.23912 10.35C9.33923 10.1843 9.40657 10.0023 9.47209 9.82216C9.71779 9.15421 9.86885 8.4626 9.97987 7.76007C10.0163 7.52529 10.0563 7.28869 10.0691 7.05026C10.1346 6.53884 10.171 6.02559 10.1655 5.50871C10.1692 5.49415 10.1764 5.47959 10.1764 5.46503C10.1783 4.92266 10.1528 4.38393 10.0873 3.84521C10.0636 3.64865 9.99443 3.51032 9.78877 3.43934C9.49575 3.33924 9.30828 3.12266 9.22092 2.82418C9.1645 2.62943 9.10262 2.43651 9.00434 2.25815C8.88058 2.03611 8.71314 1.86685 8.4638 1.78859C8.40737 1.77039 8.37643 1.77221 8.35823 1.83955C8.32911 1.95057 8.30181 2.06159 8.28543 2.17625C8.27997 2.21993 8.28543 2.23449 8.33275 2.23449C8.41465 2.23631 8.49474 2.24359 8.57664 2.25087C8.70404 2.25997 8.78776 2.34187 8.77866 2.44743C8.76774 2.55845 8.67128 2.62579 8.54024 2.61305C8.47472 2.60577 8.40737 2.60395 8.34185 2.59667C8.28361 2.58939 8.26541 2.61305 8.27451 2.66948C8.29271 2.7805 8.31091 2.8897 8.32729 3.00072C8.33275 3.0444 8.35823 3.0535 8.39645 3.0535C8.47472 3.0535 8.54388 3.02438 8.61486 2.99708C8.7186 2.95522 8.81506 2.99344 8.85692 3.0899C8.89696 3.1809 8.86056 3.27736 8.7641 3.32468C8.63488 3.38838 8.49474 3.43752 8.35277 3.41022C8.24903 3.3902 8.18169 3.4175 8.11799 3.48666C8.07795 3.40294 8.01243 3.34106 7.95055 3.27554C7.4919 2.80052 7.4009 2.08161 7.71577 1.45552C7.89595 1.09698 8.16531 0.829435 8.54388 0.680193C8.59848 0.658353 8.64944 0.634692 8.6913 0.594652C9.02072 0.277968 9.42477 0.117807 9.86339 0.0450058C10.504 -0.0641955 11.1137 0.0213455 11.6816 0.345309C12.0929 0.578272 12.4096 0.911335 12.6244 1.32812C12.7554 1.5811 12.8118 1.86321 12.8701 2.14167C13.0302 2.90426 13.103 3.67959 13.1631 4.45492C13.2359 5.39587 13.305 6.33864 13.376 7.28141C13.4306 7.99303 13.5053 8.70284 13.6163 9.40901C13.6818 9.83672 13.791 10.2553 13.8765 10.6794C13.973 11.158 13.9148 11.6203 13.6363 12.0371C13.5071 12.23 13.3305 12.3702 13.1194 12.4648C12.9556 12.5158 12.7918 12.5704 12.628 12.6195C12.4496 12.6723 12.3259 12.5613 12.3605 12.3811C12.406 12.1427 12.4296 11.9024 12.4369 11.6604C12.4587 10.916 12.4041 10.1752 12.304 9.43631C12.2749 9.23975 12.2494 9.04137 12.2167 8.8448C12.1475 8.41528 12.0656 7.98757 11.9601 7.56533C11.9546 7.54167 11.951 7.51801 11.9455 7.49435C11.8636 7.14854 11.769 6.80456 11.6634 6.46422C11.6507 6.426 11.6379 6.38596 11.587 6.3896C11.5487 6.39324 11.5342 6.42418 11.5287 6.46058C11.4796 6.82822 11.4322 7.19769 11.3831 7.56533C11.3321 7.78373 11.2885 8.00214 11.2248 8.2169C11.05 8.81386 10.7789 9.36351 10.4185 9.8713C10.3876 9.90952 10.3584 9.94592 10.3275 9.98414C10.0199 10.3663 9.67411 10.703 9.23366 10.9342C9.11172 10.9942 9.05712 10.9815 8.9825 10.8705Z", fill: "#1B3250" }),
+            React__default.createElement("path", { d: "M12.3037 9.43457C12.4038 10.1717 12.4584 10.9124 12.4365 11.6586C12.4293 11.9007 12.4056 12.1409 12.3601 12.3794C12.3255 12.5614 12.4493 12.6724 12.6276 12.6178C12.7933 12.5686 12.9552 12.5159 13.119 12.4631C13.1718 12.6888 13.2446 12.9108 13.2883 13.1383C13.3484 13.4404 13.392 13.7426 13.4175 14.0501C13.443 14.3523 13.4612 14.6526 13.4503 14.9547C13.4394 15.2768 13.4175 15.599 13.3848 15.9193C13.3265 16.4962 13.2137 17.0623 13.0863 17.6265C13.0663 17.712 13.0408 17.7957 13.0208 17.8813C13.0007 17.9705 12.9534 18.0014 12.8606 18.0014C11.5029 17.9996 10.1469 17.9996 8.78921 17.9996C8.45251 17.9996 8.11762 17.9996 7.78092 17.9996C7.6699 17.9996 7.66444 17.9887 7.6517 17.8758C7.6062 17.4791 7.48426 17.1041 7.28951 16.7547C7.15847 16.5199 6.99285 16.307 6.87455 16.0631C6.70347 15.7118 6.59427 15.346 6.55969 14.9565C6.54695 14.8182 6.54331 14.6799 6.55059 14.5415C6.78355 14.6125 6.96919 14.5434 7.12207 14.3577C7.27859 14.1703 7.43876 13.9846 7.59892 13.799C7.66808 13.7189 7.73542 13.6352 7.8428 13.6061C8.15766 13.5187 8.47435 13.4404 8.78375 13.344C9.44806 13.1365 10.1069 12.9144 10.7002 12.5395C10.9514 12.3812 11.1753 12.1955 11.2954 11.9098C11.532 11.3456 11.7103 10.7632 11.8869 10.1771C11.9724 9.89686 12.0707 9.62749 12.3037 9.43457Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M12.304 9.43463C12.071 9.62937 11.9746 9.89691 11.8909 10.1754C11.7143 10.7596 11.5359 11.3438 11.2993 11.908C11.1792 12.1938 10.9554 12.3794 10.7042 12.5378C10.1109 12.9127 9.4502 13.1347 8.78772 13.3422C8.47649 13.4387 8.15981 13.5188 7.84677 13.6043C7.73756 13.6352 7.67022 13.7171 7.60288 13.7972C7.44272 13.9829 7.28256 14.1667 7.12604 14.356C6.97316 14.5398 6.78569 14.6089 6.55455 14.5398C6.33615 14.4178 6.18145 14.2431 6.11411 13.9992C6.06679 13.8263 6.07043 13.6534 6.15961 13.4969C6.21421 13.3986 6.23605 13.2949 6.25425 13.1875C6.29065 12.9691 6.42897 12.8271 6.64555 12.7816C6.77841 12.7525 6.91492 12.7434 7.0496 12.7289C7.08964 12.7252 7.12786 12.7198 7.16426 12.7052C7.27892 12.6961 7.37356 12.636 7.47366 12.5851C7.79581 12.4176 8.11977 12.2575 8.44009 12.0882C8.8314 11.8826 9.22816 11.6915 9.63221 11.5167C9.87427 11.413 10.0326 11.2455 10.1054 10.9926C10.1637 10.7887 10.2255 10.5885 10.282 10.3847C10.3293 10.2136 10.3948 10.048 10.4221 9.87143C10.7825 9.36547 11.0536 8.814 11.2284 8.21703C11.2921 8.00227 11.3357 7.78387 11.3867 7.56547C11.4959 7.52179 11.6106 7.49084 11.7289 7.51086C11.8089 7.52361 11.8854 7.54727 11.9655 7.56547C12.071 7.98771 12.1529 8.41541 12.2221 8.84494C12.2476 9.03968 12.2749 9.23624 12.304 9.43463Z", fill: "#FCCAAF" }),
+            React__default.createElement("path", { d: "M8.11411 3.48844C8.17781 3.41928 8.24515 3.39198 8.34889 3.412C8.49086 3.43748 8.631 3.39016 8.76022 3.32646C8.85668 3.27914 8.89308 3.18268 8.85304 3.09167C8.81118 2.99703 8.71472 2.95881 8.61098 2.99885C8.54 3.02615 8.47084 3.05527 8.39258 3.05527C8.35435 3.05527 8.33069 3.04617 8.32341 3.00249C8.30703 2.89147 8.28883 2.78227 8.27063 2.67125C8.26153 2.61665 8.28155 2.59299 8.33797 2.59845C8.4035 2.60573 8.47084 2.60755 8.53636 2.61483C8.6674 2.62757 8.76386 2.56205 8.77478 2.44921C8.7857 2.34365 8.70198 2.26175 8.57276 2.25265C8.49086 2.24719 8.41078 2.23809 8.32887 2.23627C8.28337 2.23627 8.27609 2.2217 8.28155 2.17802C8.29793 2.06336 8.32523 1.95416 8.35435 1.84132C8.37074 1.77398 8.4035 1.77216 8.45992 1.79036C8.70926 1.86862 8.8767 2.03788 9.00046 2.25993C9.10056 2.43829 9.16062 2.63121 9.21704 2.82595C9.30441 3.12443 9.49005 3.34102 9.78489 3.44112C9.99055 3.51028 10.0597 3.65042 10.0834 3.84698C10.1489 4.38571 10.1744 4.92625 10.1726 5.4668C10.1726 5.48136 10.1653 5.49592 10.1616 5.51048C9.89045 5.4941 9.63747 5.5851 9.37903 5.64334C9.20976 5.68156 9.0405 5.69976 8.86578 5.67428C8.64374 5.64152 8.50178 5.52322 8.43262 5.31392C8.38348 5.16468 8.35981 5.00816 8.34161 4.85345C8.49632 4.82979 8.65102 4.80613 8.79298 4.72969C8.89308 4.67509 8.92766 4.58227 8.88216 4.48763C8.83848 4.40027 8.73838 4.36387 8.64374 4.40391C8.52362 4.45487 8.39986 4.49127 8.26699 4.49127C8.19783 4.30381 8.08499 4.14729 7.94121 4.00896C7.84475 3.91614 7.84475 3.7942 7.92847 3.69046C7.98853 3.61948 8.05405 3.55578 8.11411 3.48844Z", fill: "#FCCAAF" }),
+            React__default.createElement("path", { d: "M10.0688 7.05225C10.056 7.29067 10.016 7.52545 9.97958 7.76205C9.86856 8.46276 9.7175 9.15619 9.47179 9.82414C9.40627 10.0043 9.33711 10.1863 9.23883 10.3519C9.23337 10.1754 9.15875 10.0498 9.00405 9.95154C8.67645 9.74224 8.45986 9.44375 8.40526 9.05427C8.36522 8.77399 8.44894 8.51554 8.64733 8.3117C8.88393 8.06782 9.15147 7.85306 9.40809 7.62919C9.59556 7.46721 9.77756 7.30159 9.9632 7.13597C9.99596 7.10503 10.0269 7.07227 10.0688 7.05225Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M10.418 9.86938C10.3925 10.0459 10.3252 10.2115 10.2779 10.3826C10.2214 10.5865 10.1595 10.7867 10.1013 10.9905C10.0303 11.2435 9.87199 11.4091 9.6281 11.5147C9.22406 11.6894 8.82547 11.8805 8.43599 12.0862C8.11567 12.2554 7.78988 12.4156 7.46956 12.583C7.37128 12.634 7.27482 12.6941 7.16016 12.7032C7.22568 12.5539 7.3367 12.4374 7.4368 12.3155C7.7098 11.9824 8.05197 11.7203 8.36865 11.4346C8.57431 11.249 8.77633 11.0597 8.98018 10.8704C9.05662 10.9796 9.1094 10.9942 9.23134 10.9305C9.66996 10.7011 10.0176 10.3626 10.3252 9.98041C10.3561 9.94401 10.3871 9.90579 10.418 9.86938Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M8.27148 4.48952C8.40435 4.48952 8.52629 4.45312 8.64823 4.40216C8.74287 4.36212 8.84297 4.40034 8.88665 4.48588C8.93397 4.58052 8.89757 4.67334 8.79747 4.72794C8.65733 4.80438 8.50081 4.82804 8.34611 4.8517C8.32244 4.73158 8.29696 4.61146 8.27148 4.48952Z", fill: "#FF6F4D" }),
+            React__default.createElement("path", { d: "M11.9596 7.56344C11.8814 7.54524 11.8031 7.52158 11.723 7.50884C11.6047 7.49064 11.4901 7.51976 11.3809 7.56344C11.43 7.1958 11.4773 6.82633 11.5265 6.45869C11.5319 6.42229 11.5465 6.39135 11.5847 6.38771C11.6357 6.38225 11.6484 6.42229 11.6611 6.46233C11.7667 6.80267 11.8613 7.14666 11.9432 7.49246C11.9505 7.51612 11.9542 7.53978 11.9596 7.56344Z", fill: "#2D87F3" }),
+            React__default.createElement("path", { d: "M9.83383 1.00415C8.25239 1.00415 6.70645 1.4731 5.39153 2.35171C4.0766 3.23031 3.05174 4.47911 2.44655 5.94018C1.84136 7.40124 1.68301 9.00896 1.99153 10.56C2.30006 12.1111 3.0616 13.5358 4.17985 14.6541C5.2981 15.7723 6.72284 16.5339 8.2739 16.8424C9.82496 17.1509 11.4327 16.9926 12.8937 16.3874C14.3548 15.7822 15.6036 14.7573 16.4822 13.4424C17.3608 12.1275 17.8298 10.5815 17.8298 9.00009C17.8296 6.87948 16.9871 4.84577 15.4876 3.34627C13.9882 1.84677 11.9544 1.0043 9.83383 1.00415ZM9.46497 2.25993C11.071 2.17018 12.656 2.65913 13.9323 3.63806C13.9644 3.66246 13.9908 3.69343 14.0099 3.72888C14.029 3.76433 14.0403 3.80345 14.043 3.84362C14.0458 3.88379 14.0399 3.92408 14.0258 3.9618C14.0117 3.99952 13.9897 4.03379 13.9613 4.06232L4.89607 13.1276C4.86753 13.156 4.83326 13.178 4.79555 13.1921C4.75783 13.2062 4.71754 13.212 4.67737 13.2093C4.63719 13.2065 4.59807 13.1952 4.56262 13.1762C4.52717 13.1571 4.4962 13.1306 4.4718 13.0986C3.72607 12.1236 3.26039 10.9636 3.12489 9.74363C2.98939 8.52363 3.1892 7.28977 3.70281 6.17488C4.21642 5.05999 5.02438 4.10629 6.03971 3.41645C7.05504 2.72661 8.23929 2.32676 9.46497 2.25993ZM9.83383 15.7501C8.38747 15.7523 6.97901 15.2876 5.81786 14.4253C5.7852 14.4011 5.75813 14.3702 5.73849 14.3347C5.71885 14.2992 5.7071 14.2598 5.70404 14.2193C5.70099 14.1788 5.70669 14.1381 5.72078 14.1001C5.73486 14.062 5.75699 14.0274 5.78566 13.9986L14.8323 4.95178C14.8611 4.92311 14.8957 4.90098 14.9338 4.88689C14.9719 4.87281 15.0126 4.8671 15.0531 4.87016C15.0935 4.87321 15.1329 4.88496 15.1684 4.90461C15.204 4.92425 15.2349 4.95132 15.259 4.98398C16.0027 5.98862 16.4528 7.18004 16.5592 8.42546C16.6657 9.67088 16.4242 10.9214 15.8617 12.0376C15.2992 13.1539 14.4378 14.092 13.3735 14.7475C12.3092 15.403 11.0838 15.7501 9.83383 15.7501Z", fill: "#F44D2C" }),
+            React__default.createElement("path", { d: "M10.1587 5.50871C10.1641 6.02559 13.1563 4.45492 13.1563 4.45492C13.1563 4.45492 13.0234 2.90426 12.8632 2.14167C12.805 1.86321 12.7486 1.5811 12.6175 1.32812C12.4028 0.911335 12.0861 0.578272 11.6748 0.345309C11.1069 0.0213455 10.4972 -0.0641954 9.85656 0.0450058C9.41793 0.117807 9.01389 0.277968 8.68446 0.594652C8.6426 0.634692 8.59164 0.658353 8.53704 0.680193C8.15848 0.829435 7.88911 1.09698 7.70893 1.45552C7.39407 2.08161 7.48507 2.80052 7.94371 3.27554C8.00559 3.34106 8.07112 3.40294 8.11116 3.48666C8.17486 3.4175 8.2422 3.3902 8.34594 3.41022C8.4879 3.43752 8.62804 3.38838 8.75726 3.32468C8.85372 3.27736 8.89012 3.1809 8.85008 3.0899C8.80822 2.99344 8.71176 2.95522 8.60802 2.99708C8.53704 3.02438 8.46788 3.0535 8.38962 3.0535C8.3514 3.0535 8.32592 3.0444 8.32046 3.00072C8.30408 2.8897 8.28588 2.7805 8.26768 2.66948C8.25858 2.61305 8.27678 2.58939 8.33502 2.59667C8.40054 2.60395 8.46788 2.60577 8.5334 2.61305C8.66444 2.62579 8.7609 2.55845 8.77182 2.44743C8.78092 2.34187 8.6972 2.25997 8.5698 2.25087L8.56294 2.25026C8.48342 2.24319 8.40553 2.23626 8.32592 2.23449C8.2786 2.23449 8.27314 2.21993 8.2786 2.17625C8.29498 2.06159 8.32228 1.95057 8.3514 1.83955C8.3696 1.77221 8.40054 1.77039 8.45696 1.78859C8.7063 1.86685 8.87374 2.03611 8.99751 2.25815C9.09579 2.43651 9.15767 2.62943 9.21409 2.82418C9.30145 3.12266 9.48891 3.33924 9.78193 3.43934C9.9876 3.51032 10.0568 3.64865 10.0804 3.84521C10.1459 4.38393 10.1714 4.92266 10.1696 5.46503L10.1587 5.50871Z", fill: "#1B3250" }),
+            React__default.createElement("path", { d: "M8.10728 3.48844C8.17098 3.41928 8.23832 3.39198 8.34206 3.412C8.48402 3.43748 8.62416 3.39016 8.75338 3.32646C8.84984 3.27914 8.88625 3.18268 8.8462 3.09167C8.80434 2.99703 8.70788 2.95881 8.60414 2.99885C8.53316 3.02615 8.464 3.05527 8.38574 3.05527C8.34752 3.05527 8.32386 3.04617 8.31658 3.00249C8.3002 2.89147 8.282 2.78227 8.2638 2.67125C8.2547 2.61665 8.27472 2.59299 8.33114 2.59845C8.39666 2.60573 8.464 2.60755 8.52952 2.61483C8.66056 2.62757 8.75702 2.56205 8.76794 2.44921C8.77886 2.34365 8.69514 2.26175 8.56592 2.25265C8.48402 2.24719 8.40394 2.23809 8.32204 2.23627C8.27654 2.23627 8.26926 2.2217 8.27472 2.17802C8.2911 2.06336 8.3184 1.95416 8.34752 1.84132C8.3639 1.77398 8.39666 1.77216 8.45308 1.79036C8.70242 1.86862 8.86986 2.03788 8.99363 2.25993C9.09373 2.43829 9.15379 2.63121 9.21021 2.82595C9.29757 3.12443 9.48321 3.34102 9.77805 3.44112C9.98372 3.51028 10.0529 3.65042 10.0765 3.84698C10.1421 4.38571 10.1675 4.92625 10.1657 5.4668C10.1657 5.48136 10.1584 5.49592 10.1548 5.51048C9.88362 5.4941 9.63063 5.5851 9.37219 5.64334C9.20293 5.68156 9.03367 5.69976 8.85894 5.67428C8.6369 5.64152 8.49494 5.52322 8.42578 5.31392C8.37664 5.16468 8.35298 5.00816 8.33478 4.85345C8.48948 4.82979 8.64418 4.80613 8.78614 4.72969C8.88625 4.67509 8.92083 4.58227 8.87532 4.48763C8.83164 4.40027 8.73154 4.36387 8.6369 4.40391C8.51678 4.45487 8.39302 4.49127 8.26016 4.49127C8.191 4.30381 8.07816 4.14729 7.93437 4.00896C7.83791 3.91614 7.83791 3.7942 7.92163 3.69046C7.98169 3.61948 8.04722 3.55578 8.10728 3.48844Z", fill: "#FCCAAF" }),
+            React__default.createElement("path", { d: "M8.26465 4.48952C8.39751 4.48952 8.51945 4.45312 8.64139 4.40216C8.73603 4.36212 8.83613 4.40034 8.87982 4.48588C8.92714 4.58052 8.89074 4.67334 8.79063 4.72794C8.65049 4.80438 8.49397 4.82804 8.33927 4.8517C8.31561 4.73158 8.29013 4.61146 8.26465 4.48952Z", fill: "#FF6F4D" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_1530_7251" },
+                React__default.createElement("rect", { width: "18", height: "18", fill: "white", transform: "translate(0.833984)" })))));
 };
 
-var OvulationCalculatorType;
-(function (OvulationCalculatorType) {
-    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
-    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
-    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
-})(OvulationCalculatorType || (OvulationCalculatorType = {}));
-const OvulationCalculator = ({ locale, onSubmitOvulation, isSide, siteType, }) => {
+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);
+    return isMarryBaby ? (React__default.createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M14.0177 9.15497C12.5961 10.2212 12.2407 10.932 12.9515 11.9982C13.5202 12.8511 15.0839 14.486 16.1501 15.5522C15.4393 17.6846 9.3975 16.9738 9.3975 16.9738L8.68669 18.3954L7.62049 21.594C6.55428 21.594 4.42188 21.7362 4.42188 22.3048C4.42188 23.0156 7.26509 25.148 7.97589 25.148C8.54453 25.148 9.63443 23.0156 10.1083 21.9494C11.6484 23.7264 15.5815 26.854 18.9933 25.148C23.2582 23.0156 25.3906 19.817 24.6798 17.3292C24.4058 16.3703 24.3958 15.8338 24.5481 15.5162C26.023 15.3318 27.2818 14.4521 27.9862 13.2156C28.7011 12.108 28.7658 10.7993 28.3832 9.56374C27.9728 7.90106 27.2324 6.60905 25.746 6.31176C22.3232 5.6272 19.3487 7.32808 19.3487 10.9319C19.3487 12.0002 19.7113 12.9837 20.32 13.7663C19.1357 14.0817 17.9063 13.5296 14.0177 9.15497Z", fill: "white" }),
+        React__default.createElement("path", { d: "M29.3002 10.8246C29.3002 7.94853 26.9528 5.60112 24.0767 5.60112C21.2006 5.60112 18.832 7.94853 18.832 10.8246C18.832 11.1842 19.1069 11.4591 19.4664 11.4591C19.826 11.4591 20.1009 11.1842 20.1009 10.8246C20.1009 8.64641 21.8773 6.86999 24.0767 6.86999C26.2761 6.86999 28.0313 8.64641 28.0313 10.8246C28.0313 12.876 26.4875 14.5467 24.4996 14.7581C24.3727 14.7158 24.2459 14.7158 24.119 14.737C24.0767 14.7581 24.0344 14.7581 24.0132 14.7793C23.696 14.8216 23.4422 15.0754 23.4422 15.4137C23.4422 15.6675 23.5903 15.879 23.8018 15.9847C23.9075 16.4711 23.9498 16.9787 23.9498 17.4862C23.9498 21.4409 20.7353 24.6553 16.7807 24.6553C14.5178 24.6553 12.3608 23.5768 11.0073 21.7581L10.9862 21.7369C11.4937 21.4197 12.8895 21.5677 13.397 21.6312C13.7354 21.6735 14.0526 21.4197 14.0949 21.0602C14.1372 20.7218 13.8834 20.4046 13.5239 20.3623C12.3396 20.2143 10.1402 19.9817 9.63269 21.5255C9.56925 21.7158 9.5058 21.9273 9.44236 22.1176C9.12514 23.1115 8.70219 24.465 8.17349 24.6976C7.53905 24.7611 5.25508 23.1115 5.00131 22.4137C5.21279 22.1387 6.24903 21.9696 7.62364 22.4137C7.79283 22.4771 7.98316 22.456 8.13119 22.3502C8.27923 22.2445 8.40612 22.1176 8.42726 21.9273C8.99825 19.2203 9.16744 18.6493 9.16744 18.6282V18.607C9.37892 17.7188 10.0345 17.6342 11.7052 17.6765C13.2278 17.7188 15.0888 17.7611 16.3789 16.2173C17.2671 16.7249 18.3456 17.1056 19.6145 17.2113C19.6356 17.2113 19.6568 17.2113 19.6568 17.2113C19.974 17.2113 20.2701 16.9575 20.2912 16.6191C20.3124 16.2596 20.0586 15.9636 19.7202 15.9424C15.3215 15.5829 13.6931 11.2899 13.6296 11.0996C13.6296 11.0996 13.6296 11.0784 13.6085 11.0784C13.3336 10.444 13.545 10.0422 13.7988 9.91528C13.968 9.80954 14.2429 9.80954 14.4121 10.0845C15.6598 12.0935 16.8441 13.4047 17.9861 14.1026C18.0072 14.1026 18.0284 14.1237 18.0284 14.1237C18.7051 14.4621 20.0797 14.885 21.6235 13.8276C21.9196 13.6373 21.983 13.2355 21.7927 12.9394C21.6024 12.6434 21.2006 12.5799 20.9045 12.7702C19.9528 13.4047 19.1281 13.2566 18.5994 13.0029C17.6689 12.4319 16.6115 11.2264 15.4906 9.42888C14.9831 8.64641 14.0103 8.39263 13.2067 8.81559C12.4454 9.2174 11.8955 10.2536 12.4454 11.586C12.5299 11.8397 13.3759 13.9545 15.3426 15.5195C15.1523 15.7098 14.962 15.879 14.7293 16.0059C14.7082 16.0059 14.7082 16.0059 14.687 15.9847C6.48166 13.4681 5.82608 7.39869 5.76263 6.21441C5.76263 5.85489 5.46656 5.57997 5.10705 5.60112C4.76868 5.62227 4.49376 5.91834 4.51491 6.2567C4.55721 7.48328 5.17049 13.3412 12.255 16.4288C12.0858 16.4288 11.9167 16.4288 11.7475 16.4288C10.2671 16.3865 8.40612 16.3442 7.94086 18.311C7.91971 18.4167 7.77168 18.9877 7.32757 21.0179C5.74149 20.6584 4.13425 20.891 3.75359 22.0541C3.56326 22.604 3.88047 23.2596 4.72639 24.0632C5.29738 24.613 6.98921 25.9665 8.17349 25.9665C8.32152 25.9665 8.46956 25.9454 8.59645 25.9031C9.5481 25.5435 10.0345 24.3593 10.4575 23.0904C12.0435 24.888 14.3698 25.9454 16.7807 25.9454C21.4332 25.9454 25.2187 22.1599 25.2187 17.5074C25.2187 16.9998 25.1764 16.4923 25.0706 15.9847C27.4815 15.4983 29.3002 13.3835 29.3002 10.8246Z", fill: "#3E3F58" }),
+        React__default.createElement("rect", { x: "23.0049", y: "8.44421", width: "1.94223", height: "1.42161", rx: "0.710803", transform: "rotate(34.869 23.0049 8.44421)", fill: "#FB8C00" }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M13.9961 8.62001V11.8411C15.0503 11.8763 15.6782 11.1359 15.8411 10.3741C16.05 9.39703 15.3971 8.33253 13.9961 8.62001Z", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M14.0547 10.6699C14.0213 10.6699 13.9884 10.6619 13.9587 10.6467C13.9291 10.6316 13.9034 10.6096 13.8838 10.5825C13.8643 10.5555 13.8514 10.5242 13.8463 10.4913C13.8411 10.4583 13.8439 10.4246 13.8543 10.3929C14.0215 9.88515 14.4488 9.70262 14.7746 9.74885C14.8023 9.75244 14.829 9.76148 14.8531 9.77544C14.8772 9.7894 14.8984 9.808 14.9153 9.83018C14.9322 9.85236 14.9445 9.87767 14.9516 9.90464C14.9586 9.93162 14.9603 9.95973 14.9564 9.98734C14.9525 10.015 14.9432 10.0415 14.929 10.0655C14.9148 10.0895 14.896 10.1105 14.8736 10.1271C14.8513 10.1438 14.8258 10.1559 14.7988 10.1626C14.7717 10.1694 14.7436 10.1708 14.716 10.1666C14.5528 10.1438 14.3469 10.2456 14.255 10.5249C14.2411 10.5671 14.2143 10.6038 14.1783 10.6298C14.1423 10.6559 14.0991 10.6699 14.0547 10.6699Z", fill: "#FF886C" }),
+        React__default.createElement("path", { d: "M2.15927 10.3741C2.32215 11.1359 2.95028 11.8761 4.00427 11.8411V8.62001C2.60322 8.33253 1.9504 9.39703 2.15927 10.3741Z", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M3.97976 10.6701C3.93534 10.6701 3.89206 10.6561 3.85608 10.63C3.8201 10.604 3.79325 10.5672 3.77937 10.525C3.6874 10.2457 3.48132 10.1436 3.31833 10.1668C3.2909 10.1706 3.26298 10.169 3.23616 10.1621C3.20935 10.1551 3.18416 10.143 3.16205 10.1263C3.13993 10.1096 3.12132 10.0887 3.10727 10.0649C3.09322 10.041 3.08401 10.0146 3.08017 9.98714C3.07632 9.9597 3.07792 9.93178 3.08487 9.90497C3.09181 9.87815 3.10397 9.85297 3.12066 9.83085C3.13734 9.80874 3.15821 9.79012 3.18208 9.77607C3.20596 9.76202 3.23236 9.75281 3.2598 9.74897C3.5858 9.70327 4.01295 9.88527 4.18015 10.393C4.19055 10.4247 4.1933 10.4584 4.18816 10.4914C4.18303 10.5243 4.17016 10.5556 4.15061 10.5826C4.13106 10.6097 4.10538 10.6317 4.07569 10.6469C4.04599 10.6621 4.01312 10.67 3.97976 10.67V10.6701Z", fill: "#FF886C" }),
+        React__default.createElement("path", { d: "M8.99967 15.8312C10.3251 15.8312 12.3646 15.2696 13.5343 13.539C14.5908 11.976 13.9696 9.39512 13.9958 8.37003C14.0488 6.291 12.5487 3.59082 8.99967 3.59082C5.45065 3.59082 3.95056 6.29082 4.00355 8.37003C4.0297 9.39512 3.40853 11.976 4.46501 13.539C5.63472 15.2696 7.67428 15.8312 8.99967 15.8312Z", fill: "#FECCBF" }),
+        React__default.createElement("path", { d: "M6.8812 10.5353C7.19096 10.5353 7.44208 10.2842 7.44208 9.97446C7.44208 9.66469 7.19096 9.41357 6.8812 9.41357C6.57143 9.41357 6.32031 9.66469 6.32031 9.97446C6.32031 10.2842 6.57143 10.5353 6.8812 10.5353Z", fill: "#A35961" }),
+        React__default.createElement("path", { d: "M7.11432 9.77733C7.07517 9.77736 7.03677 9.76649 7.00344 9.74594C6.97011 9.72539 6.94316 9.69596 6.92561 9.66096C6.87709 9.56428 6.72061 9.53876 6.65561 9.53232C6.4312 9.51007 6.21615 9.58752 6.17854 9.63554C6.16288 9.65864 6.1428 9.67841 6.11946 9.6937C6.09611 9.70898 6.06997 9.71948 6.04254 9.7246C6.0151 9.72971 5.98693 9.72932 5.95965 9.72347C5.93236 9.71761 5.90651 9.7064 5.88359 9.69049C5.86067 9.67457 5.84114 9.65427 5.82612 9.63075C5.8111 9.60723 5.8009 9.58096 5.79611 9.55347C5.79131 9.52599 5.79202 9.49782 5.79819 9.4706C5.80435 9.44339 5.81586 9.41767 5.83204 9.39493C5.98103 9.17971 6.3629 9.08883 6.66299 9.10957C6.96913 9.13112 7.19631 9.25979 7.30283 9.47168C7.31896 9.50382 7.32661 9.53956 7.32504 9.57549C7.32347 9.61142 7.31274 9.64635 7.29387 9.67697C7.275 9.70758 7.24861 9.73287 7.21722 9.75041C7.18582 9.76796 7.15047 9.77719 7.1145 9.77722L7.11432 9.77733Z", fill: "#8C2F39" }),
+        React__default.createElement("path", { d: "M11.1185 10.5353C11.4283 10.5353 11.6794 10.2842 11.6794 9.97446C11.6794 9.66469 11.4283 9.41357 11.1185 9.41357C10.8087 9.41357 10.5576 9.66469 10.5576 9.97446C10.5576 10.2842 10.8087 10.5353 11.1185 10.5353Z", fill: "#A35961" }),
+        React__default.createElement("path", { d: "M8.99967 13.3289C9.77662 13.3289 9.99385 12.7188 10.0463 12.4081C10.0774 12.2239 9.9144 12.0593 9.70589 12.0593H8.29345C8.08494 12.0593 7.92195 12.2239 7.95303 12.4081C8.00548 12.7188 8.22271 13.3289 8.99967 13.3289Z", fill: "#D84023" }),
+        React__default.createElement("path", { d: "M10.7625 7.93912C10.725 7.93914 10.6882 7.9291 10.6559 7.91005C10.6001 7.8837 10.5379 7.87371 10.4766 7.88126C10.4491 7.88645 10.4208 7.88611 10.3934 7.88025C10.366 7.87439 10.34 7.86313 10.317 7.84713C10.294 7.83113 10.2744 7.8107 10.2594 7.78705C10.2444 7.7634 10.2343 7.73699 10.2296 7.70937C10.2249 7.68174 10.2257 7.65346 10.2321 7.62617C10.2384 7.59888 10.2501 7.57313 10.2665 7.55042C10.2829 7.52771 10.3037 7.5085 10.3276 7.49391C10.3516 7.47931 10.3781 7.46963 10.4058 7.46543C10.5651 7.44125 10.728 7.46963 10.8697 7.54629C10.9096 7.56973 10.9407 7.60568 10.9582 7.64858C10.9757 7.69148 10.9786 7.73894 10.9664 7.78364C10.9543 7.82834 10.9277 7.86779 10.8909 7.8959C10.8541 7.92401 10.809 7.93921 10.7627 7.93916L10.7625 7.93912Z", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M7.23656 7.93892C7.19023 7.93897 7.14518 7.92377 7.10835 7.89566C7.07152 7.86755 7.04497 7.8281 7.0328 7.7834C7.02063 7.7387 7.02351 7.69124 7.041 7.64834C7.0585 7.60544 7.08962 7.56949 7.12958 7.54605C7.33486 7.42553 7.56756 7.46079 7.5934 7.46519C7.62095 7.46958 7.64736 7.47939 7.67109 7.49405C7.69483 7.50872 7.71542 7.52794 7.73167 7.55062C7.74792 7.5733 7.75951 7.59897 7.76577 7.62616C7.77203 7.65335 7.77284 7.68151 7.76814 7.70901C7.76345 7.73651 7.75334 7.7628 7.73841 7.78637C7.72348 7.80994 7.70403 7.83032 7.68117 7.84631C7.65831 7.86231 7.63251 7.87361 7.60525 7.87957C7.578 7.88553 7.54983 7.88602 7.52238 7.88101C7.46109 7.87298 7.39878 7.88298 7.34309 7.90981C7.31082 7.92885 7.27403 7.93891 7.23656 7.93892Z", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M10.8865 9.7773C10.8506 9.77727 10.8152 9.76804 10.7838 9.75049C10.7524 9.73295 10.726 9.70766 10.7072 9.67705C10.6883 9.64643 10.6776 9.6115 10.676 9.57557C10.6744 9.53964 10.6821 9.5039 10.6982 9.47176C10.8045 9.25977 11.0317 9.1311 11.3379 9.10965C11.638 9.08856 12.0199 9.17979 12.1688 9.39501C12.2007 9.44098 12.213 9.49773 12.2031 9.55279C12.1931 9.60784 12.1617 9.65668 12.1157 9.68857C12.0698 9.72046 12.013 9.73278 11.9579 9.72282C11.9029 9.71287 11.8541 9.68145 11.8222 9.63548C11.7843 9.58746 11.5695 9.51001 11.3452 9.5324C11.2802 9.53884 11.1238 9.56436 11.0752 9.66104C11.0577 9.69602 11.0307 9.72543 10.9974 9.74596C10.9641 9.76649 10.9257 9.77734 10.8865 9.7773Z", fill: "#8C2F39" }),
+        React__default.createElement("path", { d: "M9.28354 11.0209C9.23515 11.0247 9.18693 11.0117 9.147 10.9841C9.10706 10.9565 9.07787 10.916 9.06434 10.8694C9.06068 10.8552 9.0525 10.8427 9.04104 10.8336C9.02958 10.8245 9.01547 10.8194 9.00085 10.8191H8.99959C8.98497 10.8194 8.97086 10.8245 8.9594 10.8336C8.94794 10.8427 8.93976 10.8552 8.93609 10.8694C8.92256 10.916 8.89337 10.9565 8.85344 10.9841C8.81351 11.0117 8.76528 11.0247 8.71689 11.0209C8.65889 11.0139 8.606 10.9843 8.56983 10.9384C8.53367 10.8925 8.51717 10.8342 8.52396 10.7762C8.54224 10.5547 8.73686 10.3972 9.00022 10.3972C9.26357 10.3972 9.4582 10.5546 9.47648 10.7762C9.48327 10.8342 9.46677 10.8925 9.4306 10.9384C9.39443 10.9843 9.34155 11.0139 9.28354 11.0209Z", fill: "#FEAA96" }),
+        React__default.createElement("path", { d: "M9.54906 12.0593H8.45008C8.44832 12.0776 8.44727 12.0959 8.44727 12.1145C8.44727 12.261 8.50546 12.4015 8.60903 12.5051C8.71261 12.6086 8.85309 12.6668 8.99957 12.6668C9.14605 12.6668 9.28653 12.6086 9.39011 12.5051C9.49369 12.4015 9.55188 12.261 9.55188 12.1145C9.55188 12.0959 9.55082 12.0776 9.54906 12.0593Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.5892 11.2851L11.2996 11.8147C11.2902 11.8319 11.276 11.8461 11.2588 11.8555L10.7292 12.1451C10.7131 12.154 10.6996 12.167 10.6901 12.1829C10.6807 12.1987 10.6758 12.2169 10.6758 12.2353C10.6758 12.2537 10.6807 12.2718 10.6901 12.2877C10.6996 12.3036 10.7131 12.3166 10.7292 12.3255L11.2588 12.615C11.276 12.6245 11.2902 12.6386 11.2996 12.6559L11.5892 13.1854C11.5981 13.2016 11.6111 13.2151 11.627 13.2245C11.6428 13.2339 11.6609 13.2389 11.6794 13.2389C11.6978 13.2389 11.7159 13.2339 11.7318 13.2245C11.7477 13.2151 11.7607 13.2016 11.7695 13.1854L12.0591 12.6559C12.0686 12.6386 12.0827 12.6245 12.1 12.615L12.6295 12.3255C12.6457 12.3166 12.6592 12.3036 12.6686 12.2877C12.678 12.2718 12.683 12.2537 12.683 12.2353C12.683 12.2169 12.678 12.1987 12.6686 12.1829C12.6592 12.167 12.6457 12.154 12.6295 12.1451L12.1 11.8555C12.0827 11.8461 12.0686 11.8319 12.0591 11.8147L11.7695 11.2851C11.7607 11.269 11.7477 11.2555 11.7318 11.2461C11.7159 11.2367 11.6978 11.2317 11.6794 11.2317C11.6609 11.2317 11.6428 11.2367 11.627 11.2461C11.6111 11.2555 11.5981 11.269 11.5892 11.2851Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.0545 2.19344C10.908 1.77125 10.5309 1.4951 10.0457 1.45481C9.85508 1.4472 9.66709 1.50123 9.50962 1.6089C9.3038 1.76385 9.13963 1.96744 9.03181 2.20142C9.02889 2.20766 9.02425 2.21293 9.01844 2.21662C9.01262 2.22032 9.00588 2.22228 8.99899 2.22228C8.99211 2.22228 8.98536 2.22032 8.97955 2.21662C8.97374 2.21293 8.9691 2.20766 8.96618 2.20142C8.85931 1.96747 8.69583 1.76384 8.49051 1.60893C8.33304 1.5013 8.14507 1.44728 7.95448 1.45488C7.46933 1.49517 7.09214 1.77128 6.94571 2.19351C6.87874 2.38096 6.86759 2.5838 6.91362 2.77746C6.95965 2.97111 7.06088 3.14725 7.20502 3.28451C7.68378 3.731 8.36071 3.80244 8.74796 3.80191H9.25013C9.63685 3.80268 10.3156 3.73181 10.7951 3.28451C10.9393 3.14724 11.0405 2.97109 11.0866 2.77742C11.1326 2.58376 11.1214 2.38089 11.0545 2.19344ZM8.79039 3.24335C8.791 3.26119 8.78793 3.27896 8.78137 3.29556C8.77481 3.31216 8.7649 3.32724 8.75226 3.33984C8.73962 3.35245 8.72453 3.36232 8.70791 3.36884C8.69129 3.37537 8.67351 3.3784 8.65568 3.37775C8.33983 3.36632 7.83457 3.29446 7.49306 2.97595C7.40866 2.89442 7.34971 2.79016 7.32336 2.67581C7.29701 2.56146 7.30438 2.44192 7.34459 2.33168C7.3792 2.23229 7.43709 2.14263 7.51344 2.07019C7.58978 1.99775 7.68235 1.94464 7.78341 1.91528C8.02459 1.83703 8.18718 1.90896 8.23918 1.94756C8.68493 2.27866 8.77781 2.88036 8.79029 3.24335H8.79039ZM10.5075 2.97595C10.1659 3.29453 9.66072 3.36668 9.34477 3.37789C9.32694 3.37852 9.30917 3.37548 9.29257 3.36895C9.27597 3.36242 9.26088 3.35255 9.24826 3.33994C9.23563 3.32734 9.22573 3.31227 9.21918 3.29568C9.21262 3.27908 9.20955 3.26132 9.21016 3.24349C9.2226 2.88053 9.31545 2.27869 9.76127 1.94759C9.83608 1.90063 9.92255 1.87556 10.0109 1.87524C10.3294 1.90171 10.5646 2.06804 10.656 2.33168C10.6962 2.44193 10.7035 2.56148 10.6771 2.67583C10.6508 2.79018 10.5918 2.89443 10.5074 2.97595H10.5075Z", fill: "#2D87F3" }),
+        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 [calculatorType, setCalculatorType] = useState(OvulationCalculatorType.trackPeriod);
+    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(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: "#595959", style: { marginBottom: '9px', flex: '1' } }, t('ovulationPage.objectives')),
-            React__default.createElement(StyledMethodSwitcherContainer, { "data-is-side": isSide },
-                React__default.createElement(Dropdown, { options: calculatingMethods, placeholder: t('ovulationPage.trackPeriod'), id: "due-date-dropdown", size: "md", value: calculatingMethods[calculatorType], onChange: (o) => {
-                        setCalculatorType(o.value);
-                    } }))))),
-        React__default.createElement(OvulationForm, { siteType: siteType, locale: locale, onSubmit: ({ startDate, cycle, periodLength }) => {
-                if (onSubmitOvulation) {
-                    onSubmitOvulation({
-                        method: calculatorType,
-                        periodDateStart: startDate,
-                        cycle,
-                        periodLength,
-                    });
-                }
-            }, isSide: isSide })));
+    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 OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expertUrl, isSide = false, siteType, }) => {
-    var _a;
+const DefaultLayout = (_a) => {
+    var props = __rest(_a, []);
     const { t } = useTranslations();
-    return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
+    const { currentUrl, submitProps, form } = 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: {
+                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(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) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = 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.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default.createElement(DatePicker$1, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+            React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45 }, form.getInputProps('cycleLength')))),
+        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
+            React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15 }, form.getInputProps('periodLength')))),
+        React__default.createElement(HealthToolFormWrapper.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) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { currentUrl, submitProps, form } = 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.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: {
+                    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(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(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;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const OvulationForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form = useForm$1({
+        initialValues: {
+            calculatorType: String(OvulationCalculatorType.trackPeriod),
+            periodLength: 7,
+            cycleLength: 28,
+            lastPeriodDate: new Date(),
+        },
+    });
+    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 OvulationCardEmbed = (_a) => {
+    var _b;
+    var { ovulationPageInfo, expertUrl, formProps } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps"]);
+    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) ||
                     CommonGAssets.getAssetPath('health-tools/ovulation-icon.svg'), loading: "lazy" }), heading: t('healthTools.ovulationCalculator'), medicalReview: {
                 link: expertUrl,
-                reviewer: (_a = ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_by) === null || _a === void 0 ? void 0 : _a.display_name,
+                reviewer: (_b = ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
                 date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
             } }),
-        React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "ovulation-cal", "data-is-side": isSide },
-            React__default.createElement(OvulationCalculator, { siteType: siteType, locale: locale, onSubmitOvulation: onSubmitOvulation, isSide: isSide }))));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(OvulationForm, Object.assign({}, formProps)))));
 };
 
 const PWGFormContext = createContext({});
@@ -7446,4 +7580,4 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-export { MAPPING_CATEGORY_PREMIUM_API_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, PWGCardEmbed as L, MobileBottomNavigation as M, PWGForm as N, OvulationCardEmbed as O, Pagination as P, DateRangePicker as Q, Radio as R, ScrollList as S, Tag as T, Breadcrumbs as U, ShareContainer as V, ShareDrawer as W, AdBlock as X, FixedBottomAdBlock as Y, SurveyOrPremiumBanner as Z, MAPPING_CATEGORY_PREMIUM_TYPE as _, Avatar as a, SideBannerModal as a0, UserProfileNavigation as a1, NavHeader as a2, UserStats as a3, 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 { 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 };