@hhgtech/hhg-components 1.29.38 → 1.29.39

package/build/esm/{index-f48d3a5e.js → index-66d10b21.js}

@@ -1,70 +1,69 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-6e0f2380.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, u as useStyles$6, T as TextArea, P as PureInput } from './index.styles-6b051705.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-878fd685.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-866e1e59.js';
-import { T as Text$1 } from './index-ce5fd5ed.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-85c9ab93.js';
+import { T as Text } from './index-84a52876.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-e1757115.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-f7a8a1ca.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-68fab995.js';
+import { T as Text$1 } from './index-5a0f027e.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-64d6b81e.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-5f675e1c.js';
-import { H as Heading } from './index-8448ca14.js';
-import { t as theme } from './theme-42c08fa1.js';
-import { Box, Radio as Radio$2, Flex, rem, Card, Group, createStyles, Stack, getStylesRef, useMantineTheme, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
+import { C as CommonGAssets } from './index-cbda4cc1.js';
+import { H as Heading } from './index-de4b6341.js';
+import { t as theme } from './theme-970b90f0.js';
+import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container as Container$1, 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-1191e333.js';
-import { G as Gender, L as LOCALE } from './index-79a8b4ef.js';
-import './useMantineLocale-dbec4e01.js';
-import './translationsContext-abfd0776.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-7c16ac20.js';
+import { L as LOCALE } from './index-56e460c6.js';
+import './useMantineLocale-c9152268.js';
+import './translationsContext-494ae681.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-b06391df.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-db047eda.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-122290a6.js';
-import { B as Button } from './index-293feeaa.js';
-import { I as Input } from './index-8272466a.js';
+import { L as Logo } from './index-2761f711.js';
+import { B as Button } from './index-c3d30585.js';
+import { I as Input } from './index-8625e8d8.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-0e6640c6.js';
-import { u as useTranslations } from './useTranslations-182b98b0.js';
+import { i as isProduction } from './isProduction-434d302d.js';
+import { u as useTranslations } from './useTranslations-cdea23ca.js';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { D as DATE_FORMAT } from './types-7b4f784b.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-6a097926.js';
-import { D as DatePicker } from './index-da78c403.js';
-import { M as MarryBabyText } from './index-7f868691.js';
-import { S as Slider } from './index-698ba1fc.js';
-import { D as Dropdown } from './index-aa06ff69.js';
-import { C as Container } from './index-219ed8dd.js';
-import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-b64f14d8.js';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { D as DatePicker$1 } from './index-df0ff85e.js';
-import { B as BabyGrowthGender, D as Drawer } from './index-a83b3eb1.js';
-import { L as Label } from './constants-97ddb11b.js';
-import { f as formatUserProfileUrl } from './index-a94fad35.js';
-import './utils-d6c3851b.js';
-import './WhatsApp-9029e044.js';
-import './index.styled-34d5c912.js';
-import './index-1d94ce29.js';
-import { a as useOutsideClick } from './useOutsideClick-eb15471a.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-eb9b684f.js';
+import { D as DATE_FORMAT } from './types-39d5f930.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-e93e4c81.js';
+import { D as DatePicker } from './index-1b1be502.js';
+import { M as MarryBabyText } from './index-489dd441.js';
+import { S as Slider } from './index-e86bff41.js';
+import { D as Dropdown } from './index-c82b58c7.js';
+import { f as formatUserProfileUrl } from './index-1d8204a9.js';
+import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
+import { u as useHealthToolsCache } from './useHealthToolCache-33752ed2.js';
+import { D as DatePicker$1 } from './index-f06883d8.js';
+import { Controller, useForm } from 'react-hook-form';
+import './constants-ac51ae89.js';
+import './utils-e621db45.js';
+import { C as Container } from './index-0ed4c22b.js';
+import './WhatsApp-4464ab6c.js';
+import './index.styled-0bdbe990.js';
+import './index-4599e5b0.js';
+import { a as useOutsideClick } from './useOutsideClick-dc7a904e.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-5feda209.js';
+import { g as getSocialList } from './getSocialList-25eb0ec3.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-ce281ad0.js';
-import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-d7b8c2f4.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-0e8aa97d.js';
+import { I as Icon } from './index-f7bf305d.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-5caba3a3.js';
+import { M as Modal } from './index-3aca5854.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-36dd27eb.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-7581bee1.js';
+import { g as getCookie } from './cookieHelper-3d07347b.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-3d1f20d1.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -323,53 +322,6 @@ const RateStars = ({ gap = 2, size = 24, star, totalStars = 5, onSelect, hideEmp
     })));
 };
 
-const GenderOptionControl = (_a) => {
-    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
-        male: 'male',
-        female: 'female',
-    } } = _a, radioGroupProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue"]);
-    const { t } = useTranslations();
-    const { classes, cx } = useStyles$6(undefined, {
-        name: 'GenderOptionControl',
-        styles,
-    });
-    const [availableValue, setAvailableValue] = useState();
-    const ref = useRef(null);
-    const genderOptions = useMemo(() => [
-        {
-            value: genderValue.male,
-            label: isBaby ? t('gender.boy') : t('gender.male'),
-            icon: CommonGAssets.getAssetPath(isBaby ? 'health-tools/boy-icon.svg' : 'health-tools/male-icon.svg'),
-        },
-        {
-            value: genderValue.female,
-            label: isBaby ? t('gender.girl') : t('gender.female'),
-            icon: CommonGAssets.getAssetPath(isBaby
-                ? 'health-tools/girl-icon.svg'
-                : 'health-tools/female-icon.svg'),
-        },
-    ], []);
-    useEffect(() => {
-        setAvailableValue(availableValueInit);
-    }, [availableValueInit]);
-    return (React__default.createElement(Box, { ref: ref, className: classes.root },
-        React__default.createElement(Radio$2.Group, Object.assign({ className: "radio-group", label: React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
-                (isBaby ? t('tools.selectBabyGender') : t('tools.selectGender'))), size: "lg" }, radioGroupProps, { classNames: {
-                error: classes.groupErr,
-            } }),
-            React__default.createElement(Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default.createElement(Radio$2, Object.assign({ className: "gender-item", classNames: {
-                    root: classes.itemRoot,
-                    labelWrapper: classes.itemLabelWrapper,
-                    label: classes.itemLabel,
-                    inner: classes.itemInner,
-                }, key: i.value, value: i.value }, (availableValue &&
-                i.value !== availableValue && {
-                disabled: true,
-            }), { label: React__default.createElement(Flex, { gap: rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
-                    React__default.createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" }),
-                    React__default.createElement(Text, { size: "p3" }, i.label)) }))))))));
-};
-
 var styles$6 = {"expertName":"PiqKaXk","anchor":"HgbW6-m","card":"_6lkfLYy","author":"j7c-onH","pointer":"wwI1--d"};
 
 const CardAuthor = ({ avatarImg, authorName, authorLink, uploadTime, size, }) => {
@@ -498,7 +450,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$5 = createStyles((_theme, {}) => ({
+var useStyles$6 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -518,7 +470,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$5(
+    const { classes, cx } = useStyles$6(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1724,7 +1676,7 @@ const StyledTableBody = styled.tbody `
     }
   }
 `;
-const Body = ({ children, className, style, isHoverable, isStriped, }) => {
+const Body$1 = ({ children, className, style, isHoverable, isStriped, }) => {
     return (React__default.createElement(StyledTableBody, { className: className, style: style, "data-is-striped": isStriped || undefined, "data-is-hoverable": isHoverable || undefined }, children));
 };
 
@@ -1734,10 +1686,10 @@ var index = /*#__PURE__*/Object.freeze({
   Cell: Cell,
   Head: Head,
   Row: Row,
-  Body: Body
+  Body: Body$1
 });
 
-var useStyles$4 = createStyles((theme) => {
+var useStyles$5 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1789,7 +1741,7 @@ var useStyles$4 = createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$4(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$5(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -3020,31 +2972,16 @@ const StyledWrapper$1 = setDefaultClass(styled.div `
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: inherit;
-
-    &[data-site='marryBaby'] {
-      background-color: ${(props) => props['data-banner-color'] || '#5EC08F'};
-      background-image: none;
-      padding-bottom: 0;
-      &[data-is-embedded='true'] {
-        border-top-left-radius: 16px;
-        border-top-right-radius: 16px;
-      }
-    }
-    /* due to emotion lib error, have to move this to last */
-    background: ${(props) => props.bgColor};
   `, 'hhgcomp-toolbanner-wrapper');
-const StyledContainer$4 = styled.div `
+const StyledContainer = styled.div `
   width: 100%;
-  ${MediaQueries.mbDown} {
-    padding-bottom: 24px;
-  }
-
   a {
     text-decoration: none;
     color: inherit;
   }
 
+  background-color: ${(props) => props['data-banner-color'] || themeColors.blue[1]};
+
   &[data-site='marryBaby'] {
     a {
       text-decoration: underline;
@@ -3081,18 +3018,6 @@ const StyledContainer$4 = styled.div `
     }
   }
 `;
-const StyledWrapEmbedded = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px 24px;
-  gap: 16px;
-  width: 100%;
-  /* background-color: ; */
-  ${MediaQueries.mbDown} {
-    padding: 16px 0;
-  }
-`;
 const StyledIcon = styled.div `
   background: #ffffff;
   border-radius: 16px;
@@ -3108,64 +3033,26 @@ const StyledIcon = styled.div `
     max-height: 24px;
     transform: translate(-50%, -50%);
   }
-`;
-const StyledHeadingMB = styled.div `
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 0;
-  width: 100%;
-`;
-const StyledMedicalReviewedMB = styled.div `
-  display: flex;
-  align-items: flex-start;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 18px;
-  letter-spacing: -0.2px;
-  color: #f3f3f3;
-
-  > img {
-    margin-top: 2px;
-    margin-right: 4px;
-  }
-  &[data-is-mobile='false'] {
-    > img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-  &[data-is-mobile='true'] {
-    > img {
-      width: 14px;
-      height: 14px;
-    }
-  }
 `;
 
-const ToolsBannerCard = ({ className, heading, color = 'blue', isMobile, bannerUrl, bannerUrlLarge, bannerColor, medicalReview = {
+const ToolsBannerCard = ({ className, heading, isMobile, bannerUrl, bannerUrlLarge, bannerColor, medicalReview = {
     link: '#',
     reviewer: '',
     date: '',
-}, icon, style, siteType, isEmbeded, }) => {
-    var _a, _b;
+}, icon, style, isEmbeded, isPregTool, }) => {
     const { t } = useTranslations();
     const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
     const headingAs = 'h2';
     const bannerBgUrl = isMobile
         ? bannerUrl
         : bannerUrlLarge
             ? bannerUrlLarge
             : bannerUrl;
-    const colorShade = {
-        pink: [8, 6],
-    };
-    const bgColorShade = theme.colors[color] || theme.colors.blue;
-    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", color: "#fff", as: "div", className: "embedded-review", sx: {
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
             a: {
                 textUnderlineOffset: '2px',
-                color: '#fff',
                 textDecoration: 'underline',
             },
         } },
@@ -3175,22 +3062,22 @@ const ToolsBannerCard = ({ className, heading, color = 'blue', isMobile, bannerU
                     date: medicalReview.date,
                 }),
             } }))) : null;
-    return (React__default.createElement(StyledContainer$4, { "data-is-mobile": isMobile, style: style, "data-site": siteType },
-        React__default.createElement(StyledWrapper$1, { className: className, "data-banner-url": bannerBgUrl, "data-is-mobile": isMobile, "data-site": siteType, "data-banner-color": bannerColor, "data-is-embedded": isEmbeded, bgColor: `linear-gradient(71deg, ${bgColorShade === null || bgColorShade === void 0 ? void 0 : bgColorShade[((_a = colorShade[color]) === null || _a === void 0 ? void 0 : _a[0]) || 7]} -4.07%, ${bgColorShade === null || bgColorShade === void 0 ? void 0 : bgColorShade[((_b = colorShade[color]) === null || _b === void 0 ? void 0 : _b[1]) || 4]} 90.13%)}` }, siteType === 'marryBaby' && isEmbeded ? (React__default.createElement(StyledWrapEmbedded, null,
-            React__default.createElement(StyledIcon, null, icon),
-            React__default.createElement(StyledHeadingMB, null,
-                React__default.createElement(Heading, { color: 'white', tag: "h5", as: headingAs }, heading),
-                medicalReview && (React__default.createElement(StyledMedicalReviewedMB, { "data-is-mobile": isMobile }, medicalReviewEle))))) : (React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: `${rem(13)} ${rem(20)}`, gap: rem(24) } },
-            React__default.createElement(Box, null,
-                React__default.createElement(Heading, { tag: "h5", as: headingAs, color: "#fff" }, heading),
-                medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
-            React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => {
-                    var _a, _b;
-                    return ({
+    return (React__default.createElement(StyledContainer, { className: className, "data-is-mobile": isMobile, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
+            (isPregTool
+                ? theme.colors.pink[2]
+                : isMarryBaby
+                    ? theme.colors.mb[2]
+                    : theme.colors.blue[1]) },
+        React__default.createElement(StyledWrapper$1, { "data-banner-url": bannerBgUrl, "data-is-mobile": isMobile, "data-is-embedded": isEmbeded },
+            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24) } },
+                React__default.createElement(Box, null,
+                    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),
                         borderRadius: '50%',
-                        background: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b[0]) || theme.colors.blue[0],
+                        backgroundColor: '#fff',
                         flexShrink: 0,
                         img: {
                             maxWidth: rem(48),
@@ -3204,8 +3091,7 @@ const ToolsBannerCard = ({ className, heading, color = 'blue', isMobile, bannerU
                                 maxHeight: rem(40),
                             },
                         },
-                    });
-                } }, icon))))));
+                    }) }, icon))))));
 };
 
 const StyledDropDown = styled(Dropdown) `
@@ -3237,110 +3123,6 @@ const StyledDropDown = styled(Dropdown) `
   }
 `;
 
-styled(PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.mbColors.lightGray};
-    background-color: ${theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled(Input) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${theme.mbColors.midGray};
-    pointer-events: none;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 240px;
-
-    &[data-size='label2'] {
-      font-size: 12px;
-    }
-
-    ${MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.mbColors.lightGray} !important;
-    background-color: ${theme.colors.white};
-    border-radius: 16px !important;
-    transition: all 0.2s ease;
-    padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-
-    &:focus,
-    &:hover {
-      border-color: ${theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-  .mantine-Input-rightSection,
-  .mantine-Input-leftSection {
-    padding-top: 20px;
-  }
-
-  &[data-has-action-icon] {
-    input,
-    .mantine-Input-input {
-      padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-      padding-bottom: ${(props) => (props.value ? '16px' : '27px')} !important;
-      height: unset !important;
-    }
-
-    label {
-      position: absolute;
-      z-index: 1;
-      top: 16px;
-      padding-right: 46px;
-    }
-  }
-`;
-
 const StyledMethodContainer = styled.div `
   width: 100%;
 `;
@@ -3422,66 +3204,6 @@ styled(StyledImageIcon) `
   margin-right: 4px;
 `;
 
-var DueDateCalculatorType;
-(function (DueDateCalculatorType) {
-    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
-    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
-    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
-})(DueDateCalculatorType || (DueDateCalculatorType = {}));
-const API_DATE_FORMAT = 'yyyy-MM-dd';
-const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
-    const pregnancyLength = 272 + (periodLength - 21);
-    const dueDate = new Date(lastPeriodDate);
-    dueDate.setDate(dueDate.getDate() + pregnancyLength);
-    return {
-        startDate: lastPeriodDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.lastPeriod + 1,
-            first_day: format(lastPeriodDate, API_DATE_FORMAT),
-            cycle_length_days: periodLength,
-            conception_date: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
-        },
-    };
-};
-const getDueDateConception = (conceptionDate) => {
-    const dueDate = new Date(conceptionDate);
-    dueDate.setDate(dueDate.getDate() + 265);
-    return {
-        startDate: conceptionDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.conception + 1,
-            conception_date: format(conceptionDate, API_DATE_FORMAT),
-            first_day: null,
-            cycle_length_days: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
-        },
-    };
-};
-const getDueDateIVF = (IVFDate, numDayTransfer) => {
-    const dueDate = new Date(IVFDate);
-    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
-    return {
-        startDate: IVFDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.IVF + 1,
-            ivf_transfer_date: format(IVFDate, API_DATE_FORMAT),
-            days_transfer: numDayTransfer,
-            conception_date: null,
-            first_day: null,
-            cycle_length_days: null,
-        },
-    };
-};
-const DateToInputValue = (date) => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-};
-
 const DueDateFormConception = ({ locale, onClick, siteType, pageUrl, }) => {
     const { t } = useTranslations();
     const [conceptionDate, setConceptionDate] = useState(new Date());
@@ -3611,7 +3333,7 @@ const StyledTwins = styled.div `
     }
   }
 `;
-const StyledInputForm = styled.div `
+styled.div `
   margin-bottom: 20px;
   width: 100%;
 
@@ -3698,7 +3420,7 @@ const StyledFormInput = styled.div `
     }
   }
 `;
-const StyledActive = styled.div `
+styled.div `
   margin-bottom: 24px;
   width: 100%;
 
@@ -3788,6 +3510,139 @@ 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(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const CardWrapperContext = createContext({});
+
+const Banner = (_a) => {
+    var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$4(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        styles,
+        classNames,
+    });
+    const { isPregTool } = useContext(CardWrapperContext);
+    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$3 = createStyles(() => {
+    return {
+        root: {
+            padding: rem(16),
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$3(undefined, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
+};
+
+var useStyles$2 = createStyles((theme, { isPregTool }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: rem(isMarryBaby ? 16 : 8),
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        radioLabel: {
+            fontSize: rem(16),
+        },
+        radioRoot: {
+            padding: `${rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: rem(30),
+                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+            },
+        },
+        submitBtn: {},
+        switchRoot: {
+            padding: '16px 0',
+        },
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
+    const { classes, cx } = useStyles$2({ isPregTool }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+        } },
+        React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
 const StyledContent = setDefaultClass(styled.form `
     margin: auto;
     ${MediaQueries.mbUp} {
@@ -3876,7 +3731,7 @@ const StyledContent = setDefaultClass(styled.form `
       }
     }
   `, 'hhgcomp-embedtoolcard-content');
-const StyledContainer$3 = styled.div `
+styled.div `
   padding: 0;
   background-color: white;
   border: 1px solid #e4e8ec;
@@ -4041,8 +3896,8 @@ const StyledRadioGroup = styled(RadioGroup) `
 const DueDateCardEmbed = ({ isMobile, locale, onSubmitDueDate, dueDatePageInfo, expertUrl, isSide, siteType, }) => {
     var _a;
     const { t } = useTranslations();
-    return (React__default.createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default.createElement(ToolsBannerCard, { isSide: isSide, siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, 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, { isPregTool: true },
+        React__default.createElement(HealthToolCardWrapper.Banner, { isSide: isSide, bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, 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,
@@ -4052,155 +3907,99 @@ const DueDateCardEmbed = ({ isMobile, locale, onSubmitDueDate, dueDatePageInfo,
             React__default.createElement(DueDateCalculator, { siteType: siteType, locale: locale, onSubmitDueDate: onSubmitDueDate, isSide: isSide }))));
 };
 
-const BmiEmbedContext = createContext({});
+const BmiFormContext = createContext({});
 
-const StyledButton$2 = styled(Button$1) `
-  margin: 0 auto 24px;
-  ${MediaQueries.mbUp} {
-    max-width: 200px;
-    margin: 24px auto;
-  }
-`;
-const StyledInput = styled(PureInput) `
-  &.bmi--input {
-    + .bmi--input {
-      margin-top: 24px;
-    }
-    .inputLabel {
-      display: inline-block;
-      margin-bottom: 5px;
-      color: #595959;
-      font-weight: bold;
-      font-size: 12px;
-    }
-    .errorLabel {
-      line-height: 1.3;
-    }
-    input[type='radio'] {
-      padding: 0;
-    }
-    .bmi--input-radio_gender {
-      width: 100%;
-      gap: 16px;
-      > div {
-        ${MediaQueries.mbDown} {
-          width: calc(50% - 8px);
-        }
-        width: calc(33% - 8px);
-      }
-      & > div > div {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-content: center;
-        gap: 8px;
-        padding-block: 5px;
-      }
-    }
-    .bmi-side-embed {
-      > div {
-        ${MediaQueries.mbUp} {
-          width: calc(50% - 8px);
-        }
-      }
-    }
-    .radio-group-item-heading {
-      margin-top: 0;
-    }
-  }
+const DefaultForm$1 = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+            } }),
+        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '25',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '170',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+            } }),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
 
-  ${MediaQueries.mbDown} {
-    &.bmi--input {
-      .bmi--input-radio_gender {
-        > div {
-          .gender-image {
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-  }
-`;
-const StyledContainer$2 = styled.div `
-  width: 100%;
-`;
-const FormControl$2 = styled.div `
-  margin-bottom: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  input {
-    font-size: 12px;
-    ::placeholder {
-      color: #8c8c8c;
-      opacity: 1;
-    }
-  }
-  .input-label {
-    label {
-      display: inline-block;
-      margin-bottom: 9px;
-      color: #595959;
-      font-weight: bold;
-      font-size: 12px;
-    }
-  }
-`;
-const StyledRow$3 = styled.div `
-  ${MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    > div {
-      width: 100%;
-    }
-    &[data-is-side='true'] {
-      ${MediaQueries.mbUp} {
-        display: flex;
-        flex-direction: column;
-        gap: 0px;
-      }
-    }
-  }
-  ${MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-  }
-`;
+const InlineForm$1 = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
+                        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))));
+            } }),
+        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput') },
+                        React__default.createElement(Input$1.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                                rightSection: {
+                                    width: 'auto',
+                                },
+                            }) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default.createElement(Input$1.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '170',
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default.createElement(Input$1.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '60',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
 
-function getBmi({ weight: weightProps, height: heightProps }) {
+function getBmi({ weight: weightProps, height: heightProps, }) {
     const height = heightProps / 100;
     const weight = weightProps;
     return Math.round((weight / (height * height)) * 10) / 10;
 }
 
-const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, disabled, bmiGenerated, bmiUnit, locale, isSide, }) => {
-    var _a, _b, _c, _d;
+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 data = watch();
-    const { t } = useTranslations();
-    const { gender: disabledGender = false, age: disabledAge = false, height: disabledHeight = false, weight: disabledWeight = false, objective: disabledObjective = true, } = disabled || {};
+    const { locale } = useTranslations();
     const { getHealthToolLink } = useHealthToolsCache(locale);
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.OVULATION), [getHealthToolLink]);
-    const objectOptions = useMemo(() => [
-        {
-            value: 'lose-weight',
-            label: t('bmi.objective.loseWeight'),
-        },
-        {
-            value: 'maintain-weight',
-            label: t('bmi.objective.maintainWeight'),
-        },
-        {
-            value: 'gain-weight',
-            label: t('bmi.objective.gainWeight'),
-        },
-    ], []);
     const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
         const height = bmiUnit.heightConvert(data.height);
         const weight = bmiUnit.weightConvert(data.weight);
@@ -4211,9 +4010,6 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
             weight,
             bmi: getBmi({ height, weight }),
         };
-        if (!disabledObjective) {
-            submitValue['objective'] = data.objective;
-        }
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -4233,477 +4029,42 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
     useEffect(() => {
         onChangeProps && onChangeProps(data);
     }, [data]);
-    return (React__default.createElement(StyledContainer$2, null,
-        React__default.createElement("form", { onSubmit: handleSubmit(onValid, onInValid) },
-            !disabledGender && (React__default.createElement(FormControl$2, { "data-is-side": isSide },
-                React__default.createElement(Controller, { name: "gender", control: control, defaultValue: "male", render: ({ field: { onChange } }) => {
-                        return (React__default.createElement(GenderOptionControl, { defaultValue: "male", onChange: (v) => onChange(v), styles: (theme) => ({
-                                root: !isSide && {
-                                    [theme.fn.largerThan('sm')]: {
-                                        width: 'calc((100% - 24px) * 2/3 + 12px)',
-                                    },
-                                },
-                                wrapper: {
-                                    [theme.fn.largerThan('sm')]: {
-                                        gap: rem(12),
-                                    },
-                                },
-                            }) }));
-                    } }))),
-            React__default.createElement(StyledRow$3, { "data-is-side": isSide },
-                !disabledAge && (React__default.createElement(FormControl$2, null,
-                    React__default.createElement(Controller, { name: "age", control: control, rules: (_a = bmiGenerated.age) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                            return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                                    t('bmi.ageInput'),
-                                    ' ',
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('healthtool.placeholder.age'), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                        } }))),
-                !disabledHeight && (React__default.createElement(FormControl$2, null,
-                    React__default.createElement(Controller, { name: "height", control: control, rules: (_b = bmiGenerated.height) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                            return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                                    t('bmi.heightInput'),
-                                    ' ',
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('pwg.placeholder.height'), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                        } }))),
-                !disabledWeight && (React__default.createElement(FormControl$2, null,
-                    React__default.createElement(Controller, { name: "weight", control: control, rules: (_c = bmiGenerated.weight) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                            return (React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                                    t('bmi.weightInput'),
-                                    ' ',
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('pwg.placeholder.weight'), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-                        } }))),
-                !disabledObjective && (React__default.createElement(FormControl$2, null,
-                    React__default.createElement(Controller, { name: "objective", control: control, defaultValue: "lose-weight", rules: (_d = bmiGenerated.objective) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                            return (React__default.createElement(StyledInput, { size: "md", name: name, label: bmiGenerated.objective.label, CustomInput: React__default.createElement(RadioGroup, { id: "bmi-objective", className: "bmi-objective", direction: "vertical", size: "small", options: objectOptions, value: value, onChange: onChange }), errorMessage: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', className: "bmi--input bmi--input-objective" }));
-                        } })))),
-            React__default.createElement("div", { style: { display: 'flex' } },
-                React__default.createElement(StyledButton$2, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, t('bmi.submit'))))));
-};
-
-const Form$1 = () => {
-    const { onSubmit, bmiGenerated, locale, bmiUnit, isSide } = useContext(BmiEmbedContext);
-    return (React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, isSide: isSide }));
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default.createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$1, Object.assign({}, commonProps)))));
 };
 
-const _BMICardEmbed = ({ isMobile, onSubmit, bmiContent, isSide, bmiGenerated, bmiUnit, bmiLink, locale, children, }) => {
+const BMICardEmbed = ({ isMobile, onSubmit, bmiContent, bmiGenerated, bmiUnit, locale, formLayout, }) => {
     var _a, _b, _c;
     const { t } = useTranslations();
-    return (React__default.createElement(BmiEmbedContext.Provider, { value: {
-            isMobile,
-            onSubmit,
-            isSide,
-            bmiGenerated,
-            bmiUnit,
-            bmiLink,
-            locale,
-        } }, children || (React__default.createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default.createElement(ToolsBannerCard, { isSide: isSide, icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
+    return (React__default.createElement(HealthToolCardWrapper, null,
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/bmi.svg'), loading: "lazy" }), heading: t('bmi.heading'), medicalReview: {
                 link: (_a = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
                 reviewer: (_b = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer,
                 date: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
             }, isMobile: isMobile }),
-        React__default.createElement(Container, null,
-            React__default.createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default.createElement(Form$1, null)))))));
-};
-const BMICardEmbed = _BMICardEmbed;
-BMICardEmbed.Form = Form$1;
-
-const BabyGrowthEmbedContext = createContext({});
-
-const BabyGrowthFormContext = createContext({});
-
-var useStyles$3 = createStyles(() => {
-    return {
-        root: {},
-    };
-});
-
-var useStyles$2 = createStyles((theme) => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(8),
-        },
-        row: {
-            display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: rem(16),
-        },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        },
-        label: {
-            fontSize: rem(14),
-            color: theme.colors.gray[6],
-        },
-        control: {
-            width: rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        radioLabel: {
-            fontSize: rem(16),
-        },
-        radioRoot: {
-            padding: `${rem(10)} 0`,
-            margin: 0,
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        inputWithUnit__wrapper: {
-            position: 'relative',
-        },
-        inputWithUnit__unit: {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingRight: rem(10),
-            display: 'flex',
-            alignItems: 'center',
-        },
-        inputWithUnit__unitText: {
-            color: theme.colors.gray[6],
-        },
-        inputWithUnit__input: {
-            input: {
-                paddingRight: rem(30),
-                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
-            },
-        },
-        submitBtn: {},
-        switchRoot: {
-            padding: '16px 0',
-        },
-    };
-});
-
-const HorizonalForm = (_a) => {
-    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = useContext(BabyGrowthFormContext);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'BabyGrowthForm__HorizonalForm',
-        styles,
-        classNames,
-    });
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
-        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
-                React__default.createElement(Box, { className: classes.labelWrapper },
-                    React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
-                React__default.createElement(Radio$1.Group, { onChange: onChange, value: value },
-                    React__default.createElement(Group, { mt: "xs" },
-                        React__default.createElement(Radio$1, { value: "boy", label: t('gender.boy'), classNames: {
-                                root: classes.radioRoot,
-                                label: classes.radioLabel,
-                            } }),
-                        React__default.createElement(Radio$1, { value: "girl", label: t('gender.girl'), classNames: {
-                                label: classes.radioLabel,
-                            } }))))) }),
-        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default.createElement(Box, { className: classes.row },
-                    React__default.createElement(Box, { className: classes.labelWrapper },
-                        React__default.createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
-                    React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { className: cx(classes.control, error ? 'error' : ''), onChange: onChange, maxDate: new Date() }))));
-            } }),
-        React__default.createElement(Box, { className: classes.row },
-            React__default.createElement(Box, { className: classes.labelWrapper },
-                React__default.createElement("label", { className: classes.label }, "BMI")),
-            React__default.createElement(Flex, { align: 'center', gap: '8px' },
-                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(Text, { size: "p2" },
-                            React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
-                            t('babyGrowth.kg.m2')))) }),
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
-                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
-                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
-                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
-                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
-                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
-        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
-                React__default.createElement(Box, { className: classes.labelWrapper },
-                    React__default.createElement("label", { className: classes.label, htmlFor: "head" },
-                        ' ',
-                        t('babyGrowth.headCircumference'))),
-                React__default.createElement(Box, { className: cx(classes.inputWithUnit__wrapper, classes.control, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
-                    React__default.createElement(Box, { className: classes.inputWithUnit__unit },
-                        React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
-        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default.createElement(Box, { className: classes.row },
-                React__default.createElement(Box, { className: classes.labelWrapper },
-                    React__default.createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
-                React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { className: classes.control, defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
-        React__default.createElement(Box, { className: classes.row },
-            React__default.createElement(Button$1, { className: classes.submitBtn, size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))));
-};
-
-const StyledBabyGrowthWrapper$1 = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-block: 40px;
-
-  &[data-theme='marryBaby'] {
-    padding-block: 0;
-    padding-top: 12px;
-  }
-`;
-const StyledFormControl = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: auto;
-
-  .error-input input {
-    border: 1px solid ${theme.colors.red700};
-  }
-`;
-const StyledInlineLabel = styled(Label) `
-  display: inline-flex;
-  padding-bottom: 6px;
-  gap: 4px;
-`;
-const StyledRow$2 = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  > div {
-    width: 100%;
-  }
-`;
-
-const VerticalForm = () => {
-    const { t } = useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, isMarryBaby, siteType } = useContext(BabyGrowthFormContext);
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(StyledBabyGrowthWrapper$1, { className: "form-wrapper", "data-theme": siteType },
-        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
-        siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default.createElement(CalendarMB, { size: 32 }) })) }))) }),
-            React__default.createElement(StyledRow$2, null,
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
-            React__default.createElement(StyledRow$2, null,
-                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { defaultValue: new Date(), maxDate: new Date(), onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default.createElement(CalendarMB, { size: 32 }) })) }))) }),
-            React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                    React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default.createElement(StyledRow$2, null,
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg'))),
-                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
-            React__default.createElement(StyledRow$2, null,
-                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                        React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                    React__default.createElement(DatePicker$1, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))));
-};
-
-/**
- * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
- * @param {number} num - Number to convert
- * @param {number} maximumFractionDigits - Number of decimal digits
- * @returns {string} - String based number
- */
-const localizeNumberFormat = (num, maximumFractionDigits = 2) => {
-    return Intl.NumberFormat(undefined, {
-        maximumFractionDigits,
-    }).format(num);
-};
-
-/**
- * Calculate BMI
- * Using {@link localizeNumberFormat} to convert number based on locale
- * @param {number} height - Height in number
- * @param {number} weight - Weight in number
- * @returns {number} - BMI with 2 decimal digits
- */
-const bmiCalculate = (height = 0, weight = 0) => {
-    try {
-        if (height && weight) {
-            const bmi = Number(weight) / Math.pow(Number(height) / 100, 2);
-            return Number(localizeNumberFormat(bmi));
-        }
-        else {
-            return 0;
-        }
-    }
-    catch (error) { }
-    return 0;
-};
-
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', styles, classNames, }) => {
-    const { classes, theme } = useStyles$3(undefined, {
-        name: 'BabyGrowthForm',
-        styles,
-        classNames,
-    });
-    const isMarryBaby = theme.other.template === 'mb';
-    const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = useForm({
-        resolver: yupResolver(schema),
-        mode: 'onSubmit',
-        defaultValues: {
-            name: '',
-            gender: Gender.Boy,
-            measurementDate: new Date(),
-        },
-    });
-    const weight = watch('weight');
-    const height = watch('height');
-    const head = watch('head');
-    const isEmptyThreeFields = useMemo(() => isSubmitted && !weight && !height && !head, [isSubmitted, weight, height, head]);
-    useEffect(() => {
-        const bmi = bmiCalculate(height, weight);
-        setValue('bmi', String(bmi) || '0');
-    }, [weight, height]);
-    const currentUrl = useMemo(() => {
-        if (typeof window !== 'undefined') {
-            return window.location.href;
-        }
-        else
-            return '';
-    }, []);
-    return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
-            isEmptyThreeFields,
-            control,
-            currentUrl,
-            isMarryBaby,
-            siteType,
-        } },
-        React__default.createElement(Box, { component: "form", onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? (React__default.createElement(VerticalForm, null)) : (React__default.createElement(HorizonalForm, { classNames: {
-                root: classes.root,
-            } })))));
-};
-
-const StyledBabyGrowthWrapper = styled.div `
-  padding: 36px;
-  padding-top: 0;
-  background-color: white;
-  ${MediaQueries.mbDown} {
-    padding: 16px;
-    padding-top: 0;
-  }
-  &[data-theme='marryBaby'] {
-    background-color: ${theme.mbColors.green};
-    padding: 24px;
-    border-bottom-right-radius: 16px;
-    border-bottom-left-radius: 16px;
-    ${MediaQueries.mbDown} {
-      padding: 16px;
-    }
-  }
-`;
-const StyleForm = styled(BabyGrowthForm) `
-  padding-block: 0;
-`;
-styled(ToolsBannerCard) `
-  padding-inline: 20px;
-
-  img.embedded-icon {
-    width: 140px;
-    margin-left: 50%;
-    align-self: center;
-  }
-
-  ${MediaQueries.mbDown} {
-    padding-inline: 0;
-    img.embedded-icon {
-      width: 125px;
-      align-self: end;
-      margin-left: 0;
-      position: absolute;
-      transform: translateY(50%);
-    }
-    .embedded-review {
-      max-width: 200px;
-    }
-  }
-`;
-
-const Form = (_a) => {
-    var form = __rest(_a, []);
-    const { formLayout, siteType, schema, onSubmit, onError } = useContext(BabyGrowthEmbedContext);
-    return (React__default.createElement(StyleForm, Object.assign({ siteType: siteType, schema: schema, onSubmit: onSubmit, onError: onError, layout: formLayout }, form)));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, formLayout: formLayout }))));
 };
 
-const _BabyGrowthCardEmbed = ({ isMobile, onSubmit, onError, schema, babyGrowthContent, siteType, children, formLayout, }) => {
+const BabyGrowthCardEmbed = ({ isMobile, onSubmit, onError, schema, babyGrowthContent, formLayout, }) => {
     var _a, _b, _c;
-    return (React__default.createElement(BabyGrowthEmbedContext.Provider, { value: { formLayout, siteType, schema, onSubmit, onError } }, children || (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
-            React__default.createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
-                        CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
-                    link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                    reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
-                    date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-                }, isMobile: isMobile }),
-            React__default.createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
-                React__default.createElement(Form, { layout: formLayout })))))));
-};
-const BabyGrowthCardEmbed = _BabyGrowthCardEmbed;
-BabyGrowthCardEmbed.Form = Form;
+    return (React__default.createElement(HealthToolCardWrapper, null,
+        React__default.createElement(HealthToolCardWrapper.Banner, { bannerUrl: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), isEmbeded: true, icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+                    CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
+                link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
+                reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
+                date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
+            }, isMobile: isMobile }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyGrowthForm, { schema: schema, onSubmit: onSubmit, onError: onError, formLayout: formLayout }))));
+};
 
 var useStyles$1 = createStyles((theme, params) => {
     const { isMarryBaby, isSide, direction } = params;
@@ -4842,186 +4203,103 @@ const BabyPoopEmbed = ({ babyPoopPage, onClickFindOut, currentUrl, isSide, direc
         sponsorLogo && (React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))));
 };
 
-const StyledRadioImageGroup = styled.div `
-  display: flex;
-  width: 100%;
-
-  &[data-direction='vertical'] {
-    flex-direction: column;
-  }
-
-  &[data-direction='horizontal'] {
-    flex-wrap: wrap;
-  }
-`;
-const StyledRadioImageItem = styled.div `
-  display: flex;
-
-  padding: 8px;
-
-  border-radius: ${theme.borderRadius};
-  cursor: pointer;
-
-  & > div {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  &[data-selected='true'] {
-    border: 1px solid #2d87f3;
-    background: white;
+const ThrFormContext = createContext({});
 
-    .radio-group-item-heading {
-      color: #2d87f3;
-    }
-  }
-  &[data-selected='false'] {
-    border: 1px solid #f2f2f2;
-    box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
-    .radio-group-item-heading {
-      color: #262626;
-    }
-  }
-  &[data-disabled='true'] {
-    cursor: auto;
-  }
-
-  .radio-group-item-heading {
-    margin-top: 8px;
-    text-align: center;
-  }
-
-  .gender-image {
-    width: 23px;
-    height: 36px;
-    object-fit: contain;
-  }
-`;
-
-const RadioImageGroupForTool = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, }) => {
-    const [check, setCheck] = useState(value);
-    const handleOnChange = (v) => {
-        if (isDisabled)
-            return;
-        setCheck(v);
-        onChange && onChange(v);
-    };
-    return (React__default.createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default.createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-disabled": isDisabled, key: `health-tool${index}`, onClick: () => {
-            handleOnChange(option.value);
-        } },
-        React__default.createElement("div", null,
-            React__default.createElement("img", { src: (value || check) === option.value
-                    ? option.imageActive
-                    : option.image, className: "gender-image", alt: "", loading: "lazy" }),
-            option.label && (React__default.createElement(Text, { weight: "bold", className: "radio-group-item-heading", size: "label1" }, option.label))))))));
+const DefaultForm = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form } = 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: {
+                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', {
+                content: '60',
+            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                rightSection: {
+                    width: 'auto',
+                },
+            }) })),
+        isAdult && (React__default.createElement(Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                value: option.value,
+                label: option.label,
+            })), styles: {
+                item: {
+                    whiteSpace: 'nowrap',
+                    padding: '10px 12px',
+                    fontSize: '14px',
+                },
+            }, withinPortal: true }, form.getInputProps('activeValue')))),
+        React__default.createElement(HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
 };
 
-const StyledButton$1 = styled(Button$1) `
-  margin: 0 auto 24px;
-  width: 100%;
-  ${MediaQueries.mbUp} {
-    max-width: 200px;
-  }
-`;
-const StyledContainer$1 = styled.div ``;
-const FormControl$1 = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  input {
-    font-size: 12px;
-  }
-  .gender-option {
-    gap: 16px;
-    > div {
-      width: calc(50% - 8px);
-    }
-  }
-  .input-label {
-    label {
-      display: inline-block;
-      margin-bottom: 9px;
-      color: #595959;
-      font-weight: bold;
-      font-size: 12px;
-    }
-  }
-`;
-const StyledRow$1 = styled.div `
-  ${MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 24px;
-    > div {
-      width: 100%;
-    }
-  }
-
-  ${MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-bottom: 8px;
-  }
-  &[data-is-side='true'] {
-    ${MediaQueries.mbUp} {
-      display: flex;
-      flex-direction: column-reverse;
-      gap: 0px;
-    }
-  }
-`;
-
-const ThrForm = ({ info, className, style, onChange, errorMessage = {}, locale, }) => {
-    const { t } = useTranslations();
-    const [dob, setDob] = useState(new Date());
-    const [isEdit, setIsEdit] = useState({
-        age: false,
-        rate: false,
-    });
-    const onAgeChanged = (dob) => {
-        setDob(dob);
-        setIsEdit((value) => (Object.assign(Object.assign({}, value), { age: true })));
-        const newInfo = Object.assign(Object.assign({}, info), { age: format(new Date(dob), API_DATE_FORMAT) });
-        onChange && onChange(newInfo);
-    };
-    useEffect(() => {
-        setIsEdit({
-            age: false,
-            rate: false,
-        });
-    }, [errorMessage]);
-    return (React__default.createElement(StyledContainer$1, { style: style, className: className },
-        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('targetHeartRate.ageInput')), value: DateToInputValue(dob), 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(dob) }))), disabledDays: {
-                    after: new Date(addDays(new Date(), 0)),
-                }, locale: locale, pickedDate: dob, displayDateFormat: 'dd/MM/yyyy', onChange: (date) => {
-                    onAgeChanged(date);
-                }, placeholder: "placeholder" }), errorMessage: !isEdit.age ? errorMessage.age : '' })));
+const InlineForm = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form } = 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(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
+                React__default.createElement(DatePicker$1, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default.createElement(Input$1.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default.createElement(Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default.createElement(HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
 };
 
-const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMessage, onFormChange, onSubmit, }) => {
-    var _a, _b, _c;
-    const { t } = useTranslations();
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError"]);
+    const { t, locale } = useTranslations();
+    const minRange = useRef(40);
     const { getHealthToolLink } = useHealthToolsCache(locale);
+    const form = useForm$1({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: isNotEmpty(t('tools.requiredErrorMess.gender')),
+            age: isNotEmpty(t('tools.requiredErrorMess.age')),
+            heartRate: (value) => {
+                return Number(value) >= minRange.current && Number(value) <= 200
+                    ? null
+                    : t('tools.heartRateRangeErr', {
+                        min: minRange.current,
+                        max: 200,
+                    });
+            },
+        },
+    });
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.THR), [getHealthToolLink]);
     const [isAdult, setIsAdult] = useState(false);
-    const [activeValue, setActiveValue] = useState('low_intensity');
-    const [genderValue, setGenderValue] = useState('male');
-    const [heartRate, setHeartRate] = useState(60);
-    const [range, setRange] = useState({
-        idAge: 0,
-        minAge: 0,
-        maxAge: 18,
-        rangeMale: 40,
-        rangeFemale: 40,
-    });
     const rangeHeartRateByAge = [
         {
             idAge: 0,
@@ -5111,18 +4389,34 @@ const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMe
         },
     ];
     useEffect(() => {
-        const age = (new Date().getTime() - new Date(info === null || info === void 0 ? void 0 : info.age).getTime()) / 1000;
-        if (age >= 18 * 365 * 24 * 60 * 60)
-            setIsAdult(true);
-        else
-            setIsAdult(false);
-        const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
-            age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
-        setRange(rangeByAge);
-        setHeartRate(60);
-    }, [info === null || info === void 0 ? void 0 : info.age]);
-    return (React__default.createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default.createElement(ToolsBannerCard, { isSide: isSide, icon: React__default.createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
+        const ageDate = form.getInputProps('age').value;
+        const gender = form.getInputProps('gender').value;
+        if (ageDate instanceof Date) {
+            const age = (new Date().getTime() - ageDate.getTime()) / 1000;
+            if (age >= 18 * 365 * 24 * 60 * 60)
+                setIsAdult(true);
+            else
+                setIsAdult(false);
+            const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
+                age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
+            minRange.current =
+                gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
+        }
+    }, [form]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form.onSubmit(onSubmit, onError) });
+    return (React__default.createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+const THRCardEmbed = ({ thrContent, isMobile, formLayout, onSubmit, }) => {
+    var _a, _b;
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, null,
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_a = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name)
                 ? {
                     link: formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
@@ -5130,230 +4424,24 @@ const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMe
                     date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
                 }
                 : undefined, isMobile: isMobile }),
-        React__default.createElement(Container, null,
-            React__default.createElement(StyledContent, { className: "heart-rate-cal", onSubmit: (e) => e.preventDefault(), "data-is-side": isSide },
-                React__default.createElement(StyledRow$1, { "data-is-side": isSide },
-                    React__default.createElement(FormControl$1, null,
-                        React__default.createElement(GenderOptionControl, { defaultValue: "male", onChange: (v) => {
-                                setGenderValue(v);
-                                setHeartRate(60);
-                            }, styles: (theme) => ({
-                                root: !isSide && {
-                                    [theme.fn.largerThan('sm')]: {
-                                        width: 'calc((100% - 24px) * 2/3 + 12px)',
-                                    },
-                                },
-                                wrapper: {
-                                    [theme.fn.largerThan('sm')]: {
-                                        gap: rem(12),
-                                    },
-                                },
-                            }) }))),
-                React__default.createElement(StyledRow$1, null,
-                    React__default.createElement(ThrForm, { info: info, locale: locale, errorMessage: inputErrorMessage, onChange: onFormChange })),
-                React__default.createElement("div", { className: "slider-heart-rate" },
-                    React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 }, t('targetHeartRate.heartRateInput')),
-                    React__default.createElement("div", { className: "slider-outer-wrapper" },
-                        React__default.createElement(Slider, { containerStyle: {
-                                flex: 1,
-                            }, min: genderValue === 'male' ? range.rangeMale : range.rangeFemale, max: 200, step: 1, value: heartRate, withControl: true, onChange: setHeartRate }))),
-                isAdult && (React__default.createElement(FormControl$1, null,
-                    React__default.createElement(StyledActive, null,
-                        React__default.createElement(Text, { size: "s4", style: {
-                                display: 'inline-block',
-                                fontWeight: 'bold',
-                                color: theme.colors.gray600,
-                                marginBottom: '9px',
-                            } }, t('targetHeartRate.selectActive')),
-                        React__default.createElement("div", { className: "card" },
-                            React__default.createElement(RadioImageGroupForTool, { options: activeValueNote.map((option) => ({
-                                    value: option.value,
-                                    label: option.label,
-                                    image: option.image,
-                                    imageActive: option.imageActive,
-                                })), value: activeValue, onChange: (v) => {
-                                    setActiveValue(v);
-                                }, className: "gender-selector" })),
-                        activeValue && (React__default.createElement("div", { className: "note" },
-                            React__default.createElement("img", { style: {
-                                    height: '16px',
-                                    width: '16px',
-                                }, src: CommonGAssets.getAssetPath(`/infoIcon.svg`), alt: "", loading: "lazy" }),
-                            React__default.createElement(Text, { size: "s4", color: "#595959" }, (_c = activeValueNote[activeValueNote.findIndex((x) => x.value == activeValue) || 0]) === null || _c === void 0 ? void 0 : _c.content))),
-                        !activeValue && (React__default.createElement("span", { style: { color: '#e64728' } }, inputErrorMessage.intensity)))))),
-            React__default.createElement("div", { style: { display: 'flex' } },
-                React__default.createElement(StyledButton$1, { size: "lg", onClick: () => {
-                        onSubmit(genderValue, activeValue, [heartRate]);
-                    }, dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))))));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(ThrForm, { onSubmit: onSubmit, formLayout: formLayout }))));
 };
 
-const StyledButton = styled(Button$1) `
-  margin: 0 auto 24px;
-  ${MediaQueries.mbUp} {
-    max-width: 200px;
-    margin: 24px auto;
-  }
-`;
-const StyledContainer = styled.div ``;
-const FormControl = styled.div `
-  margin-bottom: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  input {
-    font-size: 12px;
-    ::placeholder {
-      color: #8c8c8c;
-      opacity: 1;
-    }
-  }
-  .gender-option {
-    gap: 16px;
-    > div {
-      width: calc(50% - 8px);
-    }
-  }
-  .input-label {
-    label {
-      display: inline-block;
-      margin-bottom: 9px;
-      color: #595959;
-      font-weight: bold;
-      font-size: 12px;
-    }
-  }
-`;
-const StyledRow = styled.div `
-  ${MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    > div {
-      width: 100%;
-    }
-    &[data-is-side='true'] {
-      ${MediaQueries.mbUp} {
-        display: flex;
-        flex-direction: column;
-        gap: 0px;
-      }
-    }
-  }
-  ${MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-  }
-`;
-
-const BmrInputForm = ({ info, className, style, onChange, errorMessage = {}, locale, onClick, isSide, }) => {
-    const { t } = useTranslations();
-    const [isEdit, setIsEdit] = useState({
-        age: false,
-        height: false,
-        weight: false,
-    });
-    const { getHealthToolLink } = useHealthToolsCache(locale);
-    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.OVULATION), [getHealthToolLink]);
-    const [genderValue, setGenderValue] = useState('male');
-    const checkValidInputIsANumber = (s, cb) => {
-        if (s === '' || (!isNaN(s) && !isNaN(parseFloat(s)))) {
-            cb(s);
-        }
-    };
-    const checkValidInputIsAnInterger = (s, cb) => {
-        if (s === '' ||
-            (!isNaN(s) && !isNaN(parseFloat(s)) && !s.includes('.'))) {
-            cb(s);
-        }
-    };
-    const onAgeChanged = (age) => {
-        checkValidInputIsAnInterger(age, (a) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { age: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { age: a });
-            // setInfo(newInfo)
-            onChange && onChange(newInfo);
-        });
-    };
-    const onHeightChanged = (height) => {
-        checkValidInputIsANumber(height, (h) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { height: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { height: h });
-            // setInfo(newInfo)
-            onChange && onChange(newInfo);
-        });
-    };
-    const onWeightChanged = (weight) => {
-        setIsEdit((value) => (Object.assign(Object.assign({}, value), { weight: true })));
-        checkValidInputIsANumber(weight, (w) => {
-            const newInfo = Object.assign(Object.assign({}, info), { weight: w });
-            // setInfo(newInfo)
-            onChange && onChange(newInfo);
-        });
-    };
-    useEffect(() => {
-        onChange &&
-            onChange(Object.assign(Object.assign({}, info), { objective: 'lose-fat', activeLevel: 'sedentary' }));
-    }, []);
-    useEffect(() => {
-        setIsEdit({
-            age: false,
-            height: false,
-            weight: false,
-        });
-    }, [errorMessage]);
-    return (React__default.createElement(StyledContainer, { style: style, className: className },
-        React__default.createElement(FormControl, { "data-is-side": isSide },
-            React__default.createElement(GenderOptionControl, { defaultValue: "male", onChange: (v) => setGenderValue(v), styles: (theme) => ({
-                    root: !isSide && {
-                        [theme.fn.largerThan('sm')]: {
-                            width: 'calc((100% - 24px) * 2/3 + 12px)',
-                        },
-                    },
-                    wrapper: {
-                        [theme.fn.largerThan('sm')]: {
-                            gap: rem(12),
-                        },
-                    },
-                }) })),
-        React__default.createElement(StyledRow, { "data-is-side": isSide },
-            React__default.createElement(FormControl, null,
-                React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.ageInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('healthtool.placeholder.age'), value: Number(info.age), onChange: (v) => onAgeChanged(String(v)), error: !isEdit.age ? errorMessage.age : '', min: 0 })),
-            React__default.createElement(FormControl, null,
-                React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.heightInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('pwg.placeholder.height'), value: Number(info.height), onChange: (v) => onHeightChanged(String(v)), error: !isEdit.height ? errorMessage.height : '', min: 0 })),
-            React__default.createElement(FormControl, null,
-                React__default.createElement(Input$1.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.weightInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('pwg.placeholder.weight'), value: Number(info.weight), onChange: (v) => onWeightChanged(String(v)), error: !isEdit.weight ? errorMessage.weight : '', min: 0, precision: 1 }))),
-        React__default.createElement("div", { style: { display: 'flex' } },
-            React__default.createElement(StyledButton, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, onClick: () => {
-                    onClick(genderValue);
-                } }, t('bmi.submit')))));
-};
-
-const BMRCardEmbed = ({ isSide, locale, bmrContent, isMobile, info, inputErrorMessage, onFormChange, onSubmit, }) => {
+const BMRCardEmbed = ({ bmrContent, isMobile, onSubmit, formLayout, bmiGenerated, bmiUnit, }) => {
     var _a, _b, _c;
     const { t } = useTranslations();
-    return (React__default.createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default.createElement(ToolsBannerCard, { isSide: isSide, icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
+    return (React__default.createElement(HealthToolCardWrapper, null,
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/bmr.svg'), loading: "lazy" }), heading: t('bmr.heading'), medicalReview: {
                 link: (_a = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
                 reviewer: (_b = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer,
                 date: (_c = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
             }, isMobile: isMobile }),
-        React__default.createElement(Container, null,
-            React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), "data-is-side": isSide },
-                React__default.createElement(StyledInputForm, null,
-                    React__default.createElement(BmrInputForm, { info: info, locale: locale, errorMessage: inputErrorMessage, onChange: onFormChange, onClick: onSubmit, isSide: isSide }))))));
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, bmiUnit: bmiUnit, formLayout: formLayout, submitProps: {
+                    dataEventAction: 'BMR',
+                } }))));
 };
 
 const OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
@@ -5468,8 +4556,8 @@ const OvulationCalculator = ({ locale, onSubmitOvulation, isSide, siteType, }) =
 const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expertUrl, isSide = false, siteType, isMobile, }) => {
     var _a;
     const { t } = useTranslations();
-    return (React__default.createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default.createElement(ToolsBannerCard, { isSide: isSide, bannerUrl: CommonGAssets.getAssetPath('embedToolBannerPink.svg'), siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
+    return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
+        React__default.createElement(HealthToolCardWrapper.Banner, { bannerUrl: CommonGAssets.getAssetPath('embedToolBannerPink.svg'), bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", 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,
@@ -5586,8 +4674,8 @@ const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormCh
     })), []);
     const { getHealthToolLink } = useHealthToolsCache(locale);
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.PWG), [getHealthToolLink]);
-    return (React__default.createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default.createElement(ToolsBannerCard, { siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+    return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
+        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
                     CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
                 link: formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
                 reviewer: (_a = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name,
@@ -8473,4 +7561,4 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-export { NavHeader as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, THRCardEmbed as E, FileDropdown as F, Grid as G, BMRCardEmbed as H, IconText as I, PWGCardEmbed as J, DateRangePicker as K, Breadcrumbs as L, MobileBottomNavigation as M, ShareContainer as N, OvulationCardEmbed as O, Pagination as P, ShareDrawer as Q, Radio as R, ScrollList as S, Tag as T, AdBlock as U, FixedBottomAdBlock as V, SurveyOrPremiumBanner as W, MAPPING_CATEGORY_PREMIUM_TYPE as X, MAPPING_CATEGORY_PREMIUM_API_TYPE as Y, SideBannerModal as Z, UserProfileNavigation as _, Avatar as a, UserStats as a0, BorderHeading as b, Toggle as c, RateStars as d, GenderOptionControl as e, ArticleCard$1 as f, ArticleCard as g, CategoryCard as h, CheckboxGroup as i, ProgressBar as j, RadioGroup as k, index$1 as l, StatisticCard as m, index as n, Tabs as o, SurveyQuestionCard as p, SurveyThankyouCard as q, FloatButtonGroup as r, CookieAcceptConfirm as s, MobileBottomNavigationIcon as t, SeoHead as u, ToolsBannerCard as v, DueDateCardEmbed as w, BMICardEmbed as x, BabyGrowthCardEmbed as y, BabyPoopEmbed as z };
+export { UserProfileNavigation as $, Alert as A, Badge as B, Checkbox as C, DoctorInfo as D, THRCardEmbed as E, FileDropdown as F, Grid as G, ThrForm as H, IconText as I, BMRCardEmbed as J, PWGCardEmbed as K, DateRangePicker as L, MobileBottomNavigation as M, Breadcrumbs as N, OvulationCardEmbed as O, Pagination as P, ShareContainer as Q, Radio as R, ScrollList as S, Tag as T, ShareDrawer as U, AdBlock as V, FixedBottomAdBlock as W, SurveyOrPremiumBanner as X, MAPPING_CATEGORY_PREMIUM_TYPE as Y, MAPPING_CATEGORY_PREMIUM_API_TYPE as Z, SideBannerModal as _, Avatar as a, NavHeader as a0, UserStats as a1, 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 };