@hhgtech/hhg-components 1.29.38 → 1.29.39

package/build/{index-56c06c8a.js → index-16865f4f.js}

@@ -1,72 +1,71 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-4b9c6b05.js');
-var index_styles = require('./index.styles-1b468115.js');
-var utils = require('./utils-2627ae1b.js');
-var index$3 = require('./index-98501021.js');
-var index$4 = require('./index-ecdd422d.js');
-var tslib_es6 = require('./tslib.es6-37852941.js');
+var index$2 = require('./index-31d3a0cd.js');
+var index_styles = require('./index.styles-157337bd.js');
+var utils = require('./utils-e385ce42.js');
+var index$3 = require('./index-a5aa5d5c.js');
+var index$4 = require('./index-e1bfc5cd.js');
+var tslib_es6 = require('./tslib.es6-cda3ff06.js');
 var other = require('@hhgtech/icons/other');
-var index$5 = require('./index-549b661c.js');
-var index$6 = require('./index-113434f0.js');
-var theme = require('./theme-8dd065df.js');
+var index$6 = require('./index-7c76f198.js');
+var index$5 = require('./index-a9805dbb.js');
+var theme = require('./theme-986ab943.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
 require('@mantine/dates');
-var index$b = require('./index-0bcbb4c0.js');
-var index$j = require('./index-91525876.js');
-require('./useMantineLocale-ce50b703.js');
-require('./translationsContext-5f2a4595.js');
+var index$b = require('./index-0a0b5799.js');
+var index$k = require('./index-ccb48ca2.js');
+require('./useMantineLocale-5f5000f2.js');
+require('./translationsContext-5c637723.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-94897f2e.js');
+var index$7 = require('./index-5d5594a7.js');
 var styled = require('@emotion/styled');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-8a895fa3.js');
-var index$a = require('./index-0df51825.js');
-var index$9 = require('./index-94ac3eb7.js');
+var index$8 = require('./index-317d0c1c.js');
+var index$a = require('./index-38ffe95c.js');
+var index$9 = require('./index-4d5f141c.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-ed69b5df.js');
-var useTranslations = require('./useTranslations-f93487c0.js');
+var isProduction = require('./isProduction-34667756.js');
+var useTranslations = require('./useTranslations-e5a4e00e.js');
 var dateFns = require('date-fns');
 var dayjs = require('dayjs');
-var types = require('./types-ad40ba6a.js');
-var utils$1 = require('./utils-bff8f8a5.js');
-var index$d = require('./index-8907f43d.js');
-var index$e = require('./index-3274ae34.js');
-var index$f = require('./index-d26020a5.js');
-var index$c = require('./index-41fb9b9e.js');
-var index$g = require('./index-dc672229.js');
+var index$d = require('./index-49e98004.js');
+var types = require('./types-351db239.js');
+var utils$1 = require('./utils-29574e04.js');
+var index$e = require('./index-885e1cdd.js');
+var index$f = require('./index-fbb66d3d.js');
+var index$g = require('./index-f91097ba.js');
+var index$c = require('./index-2ed6b546.js');
+var index$i = require('./index-deae37ab.js');
+var form = require('@mantine/form');
+var useHealthToolCache = require('./useHealthToolCache-75252b30.js');
+var index$h = require('./index-65ed0de1.js');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-07ed2426.js');
-var yup = require('@hookform/resolvers/yup');
-var index$h = require('./index-8448e097.js');
-var index$i = require('./index-efa41cd3.js');
-var constants = require('./constants-5feace15.js');
-var index$k = require('./index-dfa0a536.js');
-require('./utils-715f6b2e.js');
-require('./WhatsApp-d99c7df1.js');
-require('./index.styled-50cdab30.js');
-require('./index-d731f94b.js');
-var useOutsideClick = require('./useOutsideClick-89a3e499.js');
+require('./constants-e7f8b0d2.js');
+require('./utils-a7153a3d.js');
+var index$j = require('./index-f1979569.js');
+require('./WhatsApp-7c990a33.js');
+require('./index.styled-02090cfc.js');
+require('./index-d9e9dcc3.js');
+var useOutsideClick = require('./useOutsideClick-75a9127e.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var getSocialList = require('./getSocialList-d48ed635.js');
+var getSocialList = require('./getSocialList-64b3658e.js');
 var uuid = require('uuid');
-var routing = require('./routing-30c0c0cc.js');
-var form = require('@mantine/form');
-var index$l = require('./index-de163db7.js');
+var routing = require('./routing-a06d4f70.js');
+var index$l = require('./index-30b8b836.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$m = require('./index-9624b24c.js');
+var index$m = require('./index-3ee0bbab.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var cookieHelper = require('./cookieHelper-74cb509b.js');
-var normalizeLink = require('./normalizeLink-ca17c715.js');
+var cookieHelper = require('./cookieHelper-cdee4e84.js');
+var normalizeLink = require('./normalizeLink-75a55356.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -341,53 +340,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 = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue"]);
-    const { t } = useTranslations.useTranslations();
-    const { classes, cx } = index_styles.useStyles(undefined, {
-        name: 'GenderOptionControl',
-        styles,
-    });
-    const [availableValue, setAvailableValue] = React.useState();
-    const ref = React.useRef(null);
-    const genderOptions = React.useMemo(() => [
-        {
-            value: genderValue.male,
-            label: isBaby ? t('gender.boy') : t('gender.male'),
-            icon: index$5.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: index$5.CommonGAssets.getAssetPath(isBaby
-                ? 'health-tools/girl-icon.svg'
-                : 'health-tools/female-icon.svg'),
-        },
-    ], []);
-    React.useEffect(() => {
-        setAvailableValue(availableValueInit);
-    }, [availableValueInit]);
-    return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
-        React__default["default"].createElement(core.Radio.Group, Object.assign({ className: "radio-group", label: React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
-                (isBaby ? t('tools.selectBabyGender') : t('tools.selectGender'))), size: "lg" }, radioGroupProps, { classNames: {
-                error: classes.groupErr,
-            } }),
-            React__default["default"].createElement(core.Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default["default"].createElement(core.Radio, 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["default"].createElement(core.Flex, { gap: core.rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
-                    React__default["default"].createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" }),
-                    React__default["default"].createElement(index$2.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, }) => {
@@ -408,10 +360,10 @@ const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }
         React__default["default"].createElement("div", { className: "author" },
             React__default["default"].createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
             React__default["default"].createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$6.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
+                React__default["default"].createElement(index$5.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
                 React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$6.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$6.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
+                React__default["default"].createElement(index$5.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(index$5.Heading, { tag: "h6", className: "expert__name", color: theme.theme.colors.gray600 }, name),
                 React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("h6", { color: theme.theme.colors.gray600, className: `${styles$6.expertName} expert__name` }, name),
                 React__default["default"].createElement(index$2.Text, { color: theme.theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
@@ -445,14 +397,14 @@ const ArticleCard$1 = ({ articleLink, authorLink, authorName, avatarImg, banner,
     return (React__default["default"].createElement("article", { className: `${styles$6.card} ${className || ''}`, "data-size": size, style: style, "data-direction": direction, "data-is-expert": type === 'expert' || undefined },
         React__default["default"].createElement("div", { className: "banner", style: styleBanner },
             React__default["default"].createElement("a", { className: styles$6.anchor, "data-event-category": dataEventCategoryForBanner, "data-event-action": dataEventActionForBanner, "data-event-label": dataEventLabelForBanner, href: articleLink || '#', target: articleLinkTarget }, banner),
-            isPremium && (React__default["default"].createElement("img", { loading: "lazy", className: "premium", src: index$5.CommonGAssets.getAssetPath('premium-crown.svg') })),
+            isPremium && (React__default["default"].createElement("img", { loading: "lazy", className: "premium", src: index$6.CommonGAssets.getAssetPath('premium-crown.svg') })),
             hasAffiliate && React__default["default"].createElement(AffiliateIcon, null)),
         React__default["default"].createElement("div", { className: "content" },
             React__default["default"].createElement("div", { className: "inner-content" },
                 React__default["default"].createElement(index$2.Text, { style: styleLabel, className: "label", size: categoryLabelTag, weight: "caption" },
                     React__default["default"].createElement("a", { className: styles$6.anchor, "data-event-category": dataEventCategoryForCategory, "data-event-action": dataEventActionForCategory, "data-event-label": dataEventLabelForCategory, href: categoryLink || '#', onClick: onClickCategoryName }, categoryName),
                     isBookmarkDisplayed && (React__default["default"].createElement("a", { className: "bookmark", onClick: handleClick }, !isBookmark ? (React__default["default"].createElement(other.Bookmark, { size: 18, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark })) : (React__default["default"].createElement(other.Bookmark, { size: 18, isActive: true, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark, activeColor: "#2ED69E" }))))),
-                React__default["default"].createElement(index$6.Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
+                React__default["default"].createElement(index$5.Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
                     React__default["default"].createElement("a", { className: styles$6.anchor, "data-event-category": dataEventCategoryForTitle, "data-event-action": dataEventActionForTitle, "data-event-label": dataEventLabelForTitle, href: articleLink || '#', target: articleLinkTarget }, title)),
                 text && (React__default["default"].createElement("a", { href: articleLink || '#', target: articleLinkTarget },
                     React__default["default"].createElement(index$2.Text, { size: descriptionTag, className: "text" }, text)))),
@@ -516,7 +468,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$5 = core.createStyles((_theme, {}) => ({
+var useStyles$6 = core.createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -536,7 +488,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = index$3.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
@@ -1742,7 +1694,7 @@ const StyledTableBody = styled__default["default"].tbody `
     }
   }
 `;
-const Body = ({ children, className, style, isHoverable, isStriped, }) => {
+const Body$1 = ({ children, className, style, isHoverable, isStriped, }) => {
     return (React__default["default"].createElement(StyledTableBody, { className: className, style: style, "data-is-striped": isStriped || undefined, "data-is-hoverable": isHoverable || undefined }, children));
 };
 
@@ -1752,10 +1704,10 @@ var index = /*#__PURE__*/Object.freeze({
   Cell: Cell,
   Head: Head,
   Row: Row,
-  Body: Body
+  Body: Body$1
 });
 
-var useStyles$4 = core.createStyles((theme) => {
+var useStyles$5 = core.createStyles((theme) => {
     const itemLabelRef = core.getStylesRef('itemLabel');
     return {
         root: {
@@ -1807,7 +1759,7 @@ var useStyles$4 = core.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] = React.useState(initialTab || 0);
     React.useEffect(() => {
         setActiveTab(initialTab);
@@ -2127,7 +2079,7 @@ const SurveyQuestionContent = ({ question, description, onOptionsChange, onTextO
     }, [!!onTextOptionsChange, textOptions]);
     return (React__default["default"].createElement(StyledSurveyQuestionContent, { className: className, style: style },
         React__default["default"].createElement("div", { className: "survey-question-text-wrapper" },
-            title && (React__default["default"].createElement(index$6.Heading, { "data-nosubtitle": !subtitle, className: "survey-question-title", tag: "h4" }, title)),
+            title && (React__default["default"].createElement(index$5.Heading, { "data-nosubtitle": !subtitle, className: "survey-question-title", tag: "h4" }, title)),
             subtitle && (React__default["default"].createElement(index$2.Text, { className: "survey-question-subtitle", size: "p2" }, subtitle)),
             description && (React__default["default"].createElement(index$2.Text, { className: "survey-question-description", size: "p2" }, description))),
         image && (React__default["default"].createElement("img", { src: image, className: "survey-question-image", loading: "lazy" })),
@@ -2260,7 +2212,7 @@ const SurveyThankyouCard = ({ thankyou, thankyouSubtitle, className, style, }) =
                         React__default["default"].createElement("path", { d: "M1.533 62c-.269 1.413 1.142 2.337 2.82 1.848l.672-.218c1.678-.543 3.089.38 2.82 1.848l-.134.544c-.269 1.413 1.141 2.337 2.82 1.848l.671-.218c1.68-.543 3.09.38 2.82 1.848l-.134.543c-.201 1.087.538 1.848 1.612 1.957M118 92a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM82 3.187l1.188 4.348 4.347-1.188L86.347 2 82 3.187Z", stroke: "#00B16A" }),
                         React__default["default"].createElement("path", { stroke: "#FE921D", d: "M17 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" }),
                         React__default["default"].createElement("path", { d: "M61.5 26.667c-7.364 0-13.333 5.97-13.333 13.333 0 7.364 5.969 13.333 13.333 13.333S74.833 47.364 74.833 40 68.864 26.667 61.5 26.667Zm7.61 10.276-9.334 9.333a1.33 1.33 0 0 1-1.885 0l-4-4a1.332 1.332 0 1 1 1.885-1.885l3.057 3.057 8.391-8.39a1.332 1.332 0 1 1 1.885 1.885Z", fill: "#00CB8A" })),
-                    thankyou && (React__default["default"].createElement(index$6.Heading, { className: "survey-thankyou-title", tag: "h3" }, thankyou)),
+                    thankyou && (React__default["default"].createElement(index$5.Heading, { className: "survey-thankyou-title", tag: "h3" }, thankyou)),
                     thankyouSubtitle && (React__default["default"].createElement(index$2.Text, { className: "survey-thankyou-subtitle", size: "p3" }, thankyouSubtitle)))))));
 };
 
@@ -3038,31 +2990,16 @@ const StyledWrapper$1 = utils$1.setDefaultClass(styled__default["default"].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__default["default"].div `
+const StyledContainer = styled__default["default"].div `
   width: 100%;
-  ${utils.MediaQueries.mbDown} {
-    padding-bottom: 24px;
-  }
-
   a {
     text-decoration: none;
     color: inherit;
   }
 
+  background-color: ${(props) => props['data-banner-color'] || index$3.themeColors.blue[1]};
+
   &[data-site='marryBaby'] {
     a {
       text-decoration: underline;
@@ -3099,18 +3036,6 @@ const StyledContainer$4 = styled__default["default"].div `
     }
   }
 `;
-const StyledWrapEmbedded = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px 24px;
-  gap: 16px;
-  width: 100%;
-  /* background-color: ; */
-  ${utils.MediaQueries.mbDown} {
-    padding: 16px 0;
-  }
-`;
 const StyledIcon = styled__default["default"].div `
   background: #ffffff;
   border-radius: 16px;
@@ -3126,64 +3051,26 @@ const StyledIcon = styled__default["default"].div `
     max-height: 24px;
     transform: translate(-50%, -50%);
   }
-`;
-const StyledHeadingMB = styled__default["default"].div `
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 0;
-  width: 100%;
-`;
-const StyledMedicalReviewedMB = styled__default["default"].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.useTranslations();
     const theme = core.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["default"].createElement(index$2.Text, { size: "label2", color: "#fff", as: "div", className: "embedded-review", sx: {
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$2.Text, { size: "label2", as: "div", className: "embedded-review", sx: {
             a: {
                 textUnderlineOffset: '2px',
-                color: '#fff',
                 textDecoration: 'underline',
             },
         } },
@@ -3193,22 +3080,22 @@ const ToolsBannerCard = ({ className, heading, color = 'blue', isMobile, bannerU
                     date: medicalReview.date,
                 }),
             } }))) : null;
-    return (React__default["default"].createElement(StyledContainer$4, { "data-is-mobile": isMobile, style: style, "data-site": siteType },
-        React__default["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["default"].createElement(StyledWrapEmbedded, null,
-            React__default["default"].createElement(StyledIcon, null, icon),
-            React__default["default"].createElement(StyledHeadingMB, null,
-                React__default["default"].createElement(index$6.Heading, { color: 'white', tag: "h5", as: headingAs }, heading),
-                medicalReview && (React__default["default"].createElement(StyledMedicalReviewedMB, { "data-is-mobile": isMobile }, medicalReviewEle))))) : (React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: `${core.rem(13)} ${core.rem(20)}`, gap: core.rem(24) } },
-            React__default["default"].createElement(core.Box, null,
-                React__default["default"].createElement(index$6.Heading, { tag: "h5", as: headingAs, color: "#fff" }, heading),
-                medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
-            React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => {
-                    var _a, _b;
-                    return ({
+    return (React__default["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["default"].createElement(StyledWrapper$1, { "data-banner-url": bannerBgUrl, "data-is-mobile": isMobile, "data-is-embedded": isEmbeded },
+            React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24) } },
+                React__default["default"].createElement(core.Box, null,
+                    React__default["default"].createElement(index$5.Heading, { tag: "h5", as: headingAs }, heading),
+                    medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
+                isMarryBaby ? (React__default["default"].createElement(StyledIcon, null, icon)) : (React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
                         width: core.rem(64),
                         height: core.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: core.rem(48),
@@ -3222,8 +3109,7 @@ const ToolsBannerCard = ({ className, heading, color = 'blue', isMobile, bannerU
                                 maxHeight: core.rem(40),
                             },
                         },
-                    });
-                } }, icon))))));
+                    }) }, icon))))));
 };
 
 const StyledDropDown = styled__default["default"](index$c.Dropdown) `
@@ -3255,110 +3141,6 @@ const StyledDropDown = styled__default["default"](index$c.Dropdown) `
   }
 `;
 
-styled__default["default"](index_styles.PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.theme.mbColors.lightGray};
-    background-color: ${theme.theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled__default["default"](index$9.Input) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${theme.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;
-    }
-
-    ${utils.MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.theme.mbColors.lightGray} !important;
-    background-color: ${theme.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.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__default["default"].div `
   width: 100%;
 `;
@@ -3440,90 +3222,30 @@ styled__default["default"](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: dateFns.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: dateFns.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: dateFns.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.useTranslations();
     const [conceptionDate, setConceptionDate] = React.useState(new Date());
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(StyledTextField, { label: t('dueDatePage.conceptionDate'), name: "date", size: "md", value: DateToInputValue(conceptionDate), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: (date) => {
+        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(index$d.StyledTextField, { label: t('dueDatePage.conceptionDate'), name: "date", size: "md", value: index$d.DateToInputValue(conceptionDate), CustomInput: React__default["default"].createElement(index$e.DatePicker, { onChange: (date) => {
                     setConceptionDate(date);
                 }, placeholder: "dd/mm/yyyy", pickedDate: conceptionDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, customInput: (props) => {
                     return (React__default["default"].createElement(index$9.Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: conceptionDate &&
                             dayjs__default["default"](conceptionDate).format(utils$1.DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.conceptionDate')), value: DateToInputValue(conceptionDate), name: "date", size: "md", 
+                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.conceptionDate')), value: index$d.DateToInputValue(conceptionDate), name: "date", size: "md", 
             // type={'date' as 'text'}
             className: "due-date-input", 
             // onChange={(value) => {
             //   setConceptionDate(new Date(value))
             // }}
-            CustomInput: React__default["default"].createElement(index$d.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(conceptionDate) }))), disabledDays: {
+            CustomInput: React__default["default"].createElement(index$e.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: index$d.DateToInputValue(conceptionDate) }))), disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, locale: locale, pickedDate: conceptionDate, displayDateFormat: types.DATE_FORMAT, onChange: (date) => {
                     setConceptionDate(date);
                 }, placeholder: "placeholder" }) }))),
         React__default["default"].createElement(index$3.Button, { className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, onClick: () => {
-                onClick(getDueDateConception(conceptionDate), `${index$b.QUERY_HEALTH_TOOL.type}=1&sd=${dateFns.format(conceptionDate, API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}= `);
+                onClick(index$d.getDueDateConception(conceptionDate), `${index$b.QUERY_HEALTH_TOOL.type}=1&sd=${dateFns.format(conceptionDate, index$d.API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}= `);
             }, role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -3532,19 +3254,19 @@ const DueDateFormIVF = ({ locale, onClick, siteType, pageUrl }) => {
     const [IVFDate, setIVFDate] = React.useState(new Date());
     const [dayTransfer, setDayTransfer] = React.useState('3');
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(StyledTextField, { label: t('dueDatePage.ivf.transferDate'), name: "date", size: "md", value: DateToInputValue(IVFDate), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: (date) => {
+        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(index$d.StyledTextField, { label: t('dueDatePage.ivf.transferDate'), name: "date", size: "md", value: index$d.DateToInputValue(IVFDate), CustomInput: React__default["default"].createElement(index$e.DatePicker, { onChange: (date) => {
                     setIVFDate(date);
                 }, placeholder: "dd/mm/yyyy", pickedDate: IVFDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, customInput: (props) => {
                     return (React__default["default"].createElement(index$9.Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: IVFDate && dayjs__default["default"](IVFDate).format(utils$1.DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray700, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.ivf.transferDate')), value: DateToInputValue(IVFDate), name: "date", size: "md", 
+                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray700, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.ivf.transferDate')), value: index$d.DateToInputValue(IVFDate), name: "date", size: "md", 
             // type={'date' as 'text'}
             className: "due-date-input", 
             // onChange={(value) => {
             //   setIVFDate(new Date(value))
             // }}
-            CustomInput: React__default["default"].createElement(index$d.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(IVFDate) }))), disabledDays: {
+            CustomInput: React__default["default"].createElement(index$e.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: index$d.DateToInputValue(IVFDate) }))), disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, locale: locale, pickedDate: IVFDate, displayDateFormat: types.DATE_FORMAT, onChange: (date) => {
                     setIVFDate(date);
@@ -3567,7 +3289,7 @@ const DueDateFormIVF = ({ locale, onClick, siteType, pageUrl }) => {
                     },
                 ] })),
         React__default["default"].createElement(index$3.Button, { className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, onClick: () => {
-                onClick(getDueDateIVF(IVFDate, Number(dayTransfer)), `${index$b.QUERY_HEALTH_TOOL.type}=2&${index$b.QUERY_HEALTH_TOOL.startDate}=${dateFns.format(IVFDate, API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}=${dayTransfer}`);
+                onClick(index$d.getDueDateIVF(IVFDate, Number(dayTransfer)), `${index$b.QUERY_HEALTH_TOOL.type}=2&${index$b.QUERY_HEALTH_TOOL.startDate}=${dateFns.format(IVFDate, index$d.API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}=${dayTransfer}`);
             }, role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -3576,26 +3298,26 @@ const DueDateFormLastPeriod = ({ locale, onClick, siteType, pageUrl, }) => {
     const [periodLength, setPeriodLength] = React.useState(28);
     const [lastPeriodDate, setLastPeriodDate] = React.useState(new Date());
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(StyledTextField, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), name: "date", size: "md", value: DateToInputValue(lastPeriodDate), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: (date) => {
+        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(index$d.StyledTextField, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), name: "date", size: "md", value: index$d.DateToInputValue(lastPeriodDate), CustomInput: React__default["default"].createElement(index$e.DatePicker, { onChange: (date) => {
                     setLastPeriodDate(date);
                 }, placeholder: "dd/mm/yyyy", pickedDate: lastPeriodDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, customInput: (props) => {
                     return (React__default["default"].createElement(index$9.Input, Object.assign({ name: "birthday", size: "md" }, props, { value: lastPeriodDate &&
                             dayjs__default["default"](lastPeriodDate).format(utils$1.DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { className: "input-section due-date-input", label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: DateToInputValue(lastPeriodDate), name: "date", size: "md", CustomInput: React__default["default"].createElement(index$d.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(lastPeriodDate) }))), disabledDays: {
+                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { className: "input-section due-date-input", label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: index$d.DateToInputValue(lastPeriodDate), name: "date", size: "md", CustomInput: React__default["default"].createElement(index$e.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: index$d.DateToInputValue(lastPeriodDate) }))), disabledDays: {
                     before: new Date(new Date().getTime() - 40 * 7 * 24 * 3600000),
                 }, locale: locale, pickedDate: lastPeriodDate, displayDateFormat: types.DATE_FORMAT, onChange: (date) => {
                     setLastPeriodDate(date);
                 }, placeholder: "placeholder" }) }))),
         React__default["default"].createElement("div", { className: "slider-due-date", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '' },
-            siteType === 'marryBaby' ? (React__default["default"].createElement(index$e.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('dueDatePage.lastPeriod.periodLengthLabel'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '0.5rem' } }, t('dueDatePage.lastPeriod.periodLengthLabel'))),
+            siteType === 'marryBaby' ? (React__default["default"].createElement(index$f.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('dueDatePage.lastPeriod.periodLengthLabel'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '0.5rem' } }, t('dueDatePage.lastPeriod.periodLengthLabel'))),
             React__default["default"].createElement("div", { className: "slider-outer-wrapper" },
                 siteType === 'marryBaby' && (React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold", color: theme.theme.colors.gray600 }, periodLength)),
-                React__default["default"].createElement(index$f.Slider, { containerStyle: {
+                React__default["default"].createElement(index$g.Slider, { containerStyle: {
                         flex: 1,
                     }, min: 20, max: 40, step: 1, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', onChange: setPeriodLength, value: periodLength, label: siteType !== 'marryBaby' ? undefined : null }))),
-        React__default["default"].createElement(index$3.Button, { dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(getDueDateLastPeriod(lastPeriodDate, periodLength), `${index$b.QUERY_HEALTH_TOOL.type}=0&${index$b.QUERY_HEALTH_TOOL.startDate}=${dateFns.format(lastPeriodDate, API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}=${periodLength}`), role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$3.Button, { dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(index$d.getDueDateLastPeriod(lastPeriodDate, periodLength), `${index$b.QUERY_HEALTH_TOOL.type}=0&${index$b.QUERY_HEALTH_TOOL.startDate}=${dateFns.format(lastPeriodDate, index$d.API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}=${periodLength}`), role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
 };
 
 const StyledTwins = styled__default["default"].div `
@@ -3629,7 +3351,7 @@ const StyledTwins = styled__default["default"].div `
     }
   }
 `;
-const StyledInputForm = styled__default["default"].div `
+styled__default["default"].div `
   margin-bottom: 20px;
   width: 100%;
 
@@ -3716,7 +3438,7 @@ const StyledFormInput = styled__default["default"].div `
     }
   }
 `;
-const StyledActive = styled__default["default"].div `
+styled__default["default"].div `
   margin-bottom: 24px;
   width: 100%;
 
@@ -3770,18 +3492,18 @@ const StyledActive = styled__default["default"].div `
 
 const DueDateCalculator = ({ onSubmitDueDate, locale, isSide, siteType, }) => {
     const { t } = useTranslations.useTranslations();
-    const [calculatorType, setCalculatorType] = React.useState(DueDateCalculatorType.lastPeriod);
+    const [calculatorType, setCalculatorType] = React.useState(index$d.DueDateCalculatorType.lastPeriod);
     const calculatingMethods = [
         {
-            value: DueDateCalculatorType.lastPeriod,
+            value: index$d.DueDateCalculatorType.lastPeriod,
             label: t('dueDatePage.lastPeriod'),
         },
         {
-            value: DueDateCalculatorType.conception,
+            value: index$d.DueDateCalculatorType.conception,
             label: t('dueDatePage.conceptionDate'),
         },
         {
-            value: DueDateCalculatorType.IVF,
+            value: index$d.DueDateCalculatorType.IVF,
             label: t('dueDatePage.ivf'),
         },
     ];
@@ -3801,11 +3523,144 @@ const DueDateCalculator = ({ onSubmitDueDate, locale, isSide, siteType, }) => {
                 React__default["default"].createElement(index$c.Dropdown, { options: calculatingMethods, placeholder: t('dueDatePage.lastPeriod'), id: "due-date-dropdown", size: "md", value: calculatingMethods[calculatorType], onChange: (o) => {
                         setCalculatorType(o.value);
                     } }))))),
-        calculatorType === DueDateCalculatorType.lastPeriod ? (React__default["default"].createElement(DueDateFormLastPeriod, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
-        calculatorType === DueDateCalculatorType.conception ? (React__default["default"].createElement(DueDateFormConception, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
-        calculatorType === DueDateCalculatorType.IVF ? (React__default["default"].createElement(DueDateFormIVF, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null));
+        calculatorType === index$d.DueDateCalculatorType.lastPeriod ? (React__default["default"].createElement(DueDateFormLastPeriod, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
+        calculatorType === index$d.DueDateCalculatorType.conception ? (React__default["default"].createElement(DueDateFormConception, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null,
+        calculatorType === index$d.DueDateCalculatorType.IVF ? (React__default["default"].createElement(DueDateFormIVF, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null));
+};
+
+var useStyles$4 = core.createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const CardWrapperContext = React.createContext({});
+
+const Banner = (_a) => {
+    var { styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$4(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        styles,
+        classNames,
+    });
+    const { isPregTool } = React.useContext(CardWrapperContext);
+    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
 };
 
+var useStyles$3 = core.createStyles(() => {
+    return {
+        root: {
+            padding: core.rem(16),
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$3(undefined, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
+};
+
+var useStyles$2 = core.createStyles((theme, { isPregTool }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: core.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: core.rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: core.rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: core.rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        radioLabel: {
+            fontSize: core.rem(16),
+        },
+        radioRoot: {
+            padding: `${core.rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: core.rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: core.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 = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
+    const { classes, cx } = useStyles$2({ isPregTool }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
 const StyledContent = utils$1.setDefaultClass(styled__default["default"].form `
     margin: auto;
     ${utils.MediaQueries.mbUp} {
@@ -3894,7 +3749,7 @@ const StyledContent = utils$1.setDefaultClass(styled__default["default"].form `
       }
     }
   `, 'hhgcomp-embedtoolcard-content');
-const StyledContainer$3 = styled__default["default"].div `
+styled__default["default"].div `
   padding: 0;
   background-color: white;
   border: 1px solid #e4e8ec;
@@ -4059,9 +3914,9 @@ const StyledRadioGroup = styled__default["default"](RadioGroup) `
 const DueDateCardEmbed = ({ isMobile, locale, onSubmitDueDate, dueDatePageInfo, expertUrl, isSide, siteType, }) => {
     var _a;
     const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'), loading: "lazy" }), heading: t('healthTools.dueDateCalculator'), medicalReview: {
+    return (React__default["default"].createElement(HealthToolCardWrapper, { isPregTool: true },
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { isSide: isSide, bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
+                    index$6.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,
                 date: dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_date,
@@ -4070,155 +3925,99 @@ const DueDateCardEmbed = ({ isMobile, locale, onSubmitDueDate, dueDatePageInfo,
             React__default["default"].createElement(DueDateCalculator, { siteType: siteType, locale: locale, onSubmitDueDate: onSubmitDueDate, isSide: isSide }))));
 };
 
-const BmiEmbedContext = React.createContext({});
+const BmiFormContext = React.createContext({});
 
-const StyledButton$2 = styled__default["default"](index$3.Button) `
-  margin: 0 auto 24px;
-  ${utils.MediaQueries.mbUp} {
-    max-width: 200px;
-    margin: 24px auto;
-  }
-`;
-const StyledInput = styled__default["default"](index_styles.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 {
-        ${utils.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 {
-        ${utils.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.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$d.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+            } }),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
 
-  ${utils.MediaQueries.mbDown} {
-    &.bmi--input {
-      .bmi--input-radio_gender {
-        > div {
-          .gender-image {
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-  }
-`;
-const StyledContainer$2 = styled__default["default"].div `
-  width: 100%;
-`;
-const FormControl$2 = styled__default["default"].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__default["default"].div `
-  ${utils.MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    > div {
-      width: 100%;
-    }
-    &[data-is-side='true'] {
-      ${utils.MediaQueries.mbUp} {
-        display: flex;
-        flex-direction: column;
-        gap: 0px;
-      }
-    }
-  }
-  ${utils.MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-  }
-`;
+const InlineForm$1 = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
+                        React__default["default"].createElement(index$d.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput') },
+                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                                rightSection: {
+                                    width: 'auto',
+                                },
+                            }) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '170',
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '60',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.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 = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
     const [isTouched, setIsTouched] = React.useState(false);
     const { control, handleSubmit, setValue, watch } = reactHookForm.useForm();
     const data = watch();
-    const { t } = useTranslations.useTranslations();
-    const { gender: disabledGender = false, age: disabledAge = false, height: disabledHeight = false, weight: disabledWeight = false, objective: disabledObjective = true, } = disabled || {};
+    const { locale } = useTranslations.useTranslations();
     const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
     const linkTool = React.useMemo(() => getHealthToolLink(utils$1.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
-    const objectOptions = React.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         const height = bmiUnit.heightConvert(data.height);
         const weight = bmiUnit.weightConvert(data.weight);
@@ -4229,9 +4028,6 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
             weight,
             bmi: getBmi({ height, weight }),
         };
-        if (!disabledObjective) {
-            submitValue['objective'] = data.objective;
-        }
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -4251,477 +4047,42 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
     React.useEffect(() => {
         onChangeProps && onChangeProps(data);
     }, [data]);
-    return (React__default["default"].createElement(StyledContainer$2, null,
-        React__default["default"].createElement("form", { onSubmit: handleSubmit(onValid, onInValid) },
-            !disabledGender && (React__default["default"].createElement(FormControl$2, { "data-is-side": isSide },
-                React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, defaultValue: "male", render: ({ field: { onChange } }) => {
-                        return (React__default["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: core.rem(12),
-                                    },
-                                },
-                            }) }));
-                    } }))),
-            React__default["default"].createElement(StyledRow$3, { "data-is-side": isSide },
-                !disabledAge && (React__default["default"].createElement(FormControl$2, null,
-                    React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                                    t('bmi.ageInput'),
-                                    ' ',
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(FormControl$2, null,
-                    React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                                    t('bmi.heightInput'),
-                                    ' ',
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(FormControl$2, null,
-                    React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                                    t('bmi.weightInput'),
-                                    ' ',
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(FormControl$2, null,
-                    React__default["default"].createElement(reactHookForm.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["default"].createElement(StyledInput, { size: "md", name: name, label: bmiGenerated.objective.label, CustomInput: React__default["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["default"].createElement("div", { style: { display: 'flex' } },
-                React__default["default"].createElement(StyledButton$2, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, type: "submit" }, t('bmi.submit'))))));
-};
-
-const Form$1 = () => {
-    const { onSubmit, bmiGenerated, locale, bmiUnit, isSide } = React.useContext(BmiEmbedContext);
-    return (React__default["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["default"].createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default["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.useTranslations();
-    return (React__default["default"].createElement(BmiEmbedContext.Provider, { value: {
-            isMobile,
-            onSubmit,
-            isSide,
-            bmiGenerated,
-            bmiUnit,
-            bmiLink,
-            locale,
-        } }, children || (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/bmi.svg'), loading: "lazy" }), heading: t('bmi.heading'), medicalReview: {
+    return (React__default["default"].createElement(HealthToolCardWrapper, null,
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
+                    index$6.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["default"].createElement(index$g.Container, null,
-            React__default["default"].createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default["default"].createElement(Form$1, null)))))));
-};
-const BMICardEmbed = _BMICardEmbed;
-BMICardEmbed.Form = Form$1;
-
-const BabyGrowthEmbedContext = React.createContext({});
-
-const BabyGrowthFormContext = React.createContext({});
-
-var useStyles$3 = core.createStyles(() => {
-    return {
-        root: {},
-    };
-});
-
-var useStyles$2 = core.createStyles((theme) => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: core.rem(8),
-        },
-        row: {
-            display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: core.rem(16),
-        },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        },
-        label: {
-            fontSize: core.rem(14),
-            color: theme.colors.gray[6],
-        },
-        control: {
-            width: core.rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        radioLabel: {
-            fontSize: core.rem(16),
-        },
-        radioRoot: {
-            padding: `${core.rem(10)} 0`,
-            margin: 0,
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        inputWithUnit__wrapper: {
-            position: 'relative',
-        },
-        inputWithUnit__unit: {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingRight: core.rem(10),
-            display: 'flex',
-            alignItems: 'center',
-        },
-        inputWithUnit__unitText: {
-            color: theme.colors.gray[6],
-        },
-        inputWithUnit__input: {
-            input: {
-                paddingRight: core.rem(30),
-                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
-            },
-        },
-        submitBtn: {},
-        switchRoot: {
-            padding: '16px 0',
-        },
-    };
-});
-
-const HorizonalForm = (_a) => {
-    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations.useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = React.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["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
-                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
-                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
-                React__default["default"].createElement(index$3.Radio.Group, { onChange: onChange, value: value },
-                    React__default["default"].createElement(core.Group, { mt: "xs" },
-                        React__default["default"].createElement(index$3.Radio, { value: "boy", label: t('gender.boy'), classNames: {
-                                root: classes.radioRoot,
-                                label: classes.radioLabel,
-                            } }),
-                        React__default["default"].createElement(index$3.Radio, { value: "girl", label: t('gender.girl'), classNames: {
-                                label: classes.radioLabel,
-                            } }))))) }),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default["default"].createElement(core.Box, { className: classes.row },
-                    React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
-                        React__default["default"].createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
-                    React__default["default"].createElement(index$h.DatePicker, Object.assign({}, commonDateProps, { className: cx(classes.control, error ? 'error' : ''), onChange: onChange, maxDate: new Date() }))));
-            } }),
-        React__default["default"].createElement(core.Box, { className: classes.row },
-            React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
-                React__default["default"].createElement("label", { className: classes.label }, "BMI")),
-            React__default["default"].createElement(core.Flex, { align: 'center', gap: '8px' },
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(index$2.Text, { size: "p2" },
-                            React__default["default"].createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
-                            t('babyGrowth.kg.m2')))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                        React__default["default"].createElement(index$9.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["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                        React__default["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
-                        React__default["default"].createElement(index$9.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["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
-                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
-                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "head" },
-                        ' ',
-                        t('babyGrowth.headCircumference'))),
-                React__default["default"].createElement(core.Box, { className: cx(classes.inputWithUnit__wrapper, classes.control, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default["default"].createElement(index$9.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["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
-                        React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
-                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
-                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
-                React__default["default"].createElement(index$h.DatePicker, Object.assign({}, commonDateProps, { className: classes.control, defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
-        React__default["default"].createElement(core.Box, { className: classes.row },
-            React__default["default"].createElement(index$3.Button, { 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__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-block: 40px;
-
-  &[data-theme='marryBaby'] {
-    padding-block: 0;
-    padding-top: 12px;
-  }
-`;
-const StyledFormControl = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: auto;
-
-  .error-input input {
-    border: 1px solid ${theme.theme.colors.red700};
-  }
-`;
-const StyledInlineLabel = styled__default["default"](constants.Label) `
-  display: inline-flex;
-  padding-bottom: 6px;
-  gap: 4px;
-`;
-const StyledRow$2 = styled__default["default"].div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  > div {
-    width: 100%;
-  }
-`;
-
-const VerticalForm = () => {
-    const { t } = useTranslations.useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, isMarryBaby, siteType } = React.useContext(BabyGrowthFormContext);
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default["default"].createElement(StyledBabyGrowthWrapper$1, { className: "form-wrapper", "data-theme": siteType },
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(index$i.BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
-        siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$h.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
-            React__default["default"].createElement(StyledRow$2, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.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["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.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["default"].createElement(StyledRow$2, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.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["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default["default"].createElement(index$h.DatePicker, 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["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
-            React__default["default"].createElement(index$3.Button, { 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["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                        React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                    React__default["default"].createElement(index$h.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default["default"].createElement(StyledRow$2, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default["default"].createElement(index$9.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["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg'))),
-                        React__default["default"].createElement(index$9.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["default"].createElement(StyledRow$2, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default["default"].createElement(index$9.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["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                        React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                        React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                    React__default["default"].createElement(index$h.DatePicker, 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["default"].createElement(index$3.Button, { 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["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, formLayout: formLayout }))));
 };
 
-/**
- * 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 }, } = reactHookForm.useForm({
-        resolver: yup.yupResolver(schema),
-        mode: 'onSubmit',
-        defaultValues: {
-            name: '',
-            gender: index$j.Gender.Boy,
-            measurementDate: new Date(),
-        },
-    });
-    const weight = watch('weight');
-    const height = watch('height');
-    const head = watch('head');
-    const isEmptyThreeFields = React.useMemo(() => isSubmitted && !weight && !height && !head, [isSubmitted, weight, height, head]);
-    React.useEffect(() => {
-        const bmi = bmiCalculate(height, weight);
-        setValue('bmi', String(bmi) || '0');
-    }, [weight, height]);
-    const currentUrl = React.useMemo(() => {
-        if (typeof window !== 'undefined') {
-            return window.location.href;
-        }
-        else
-            return '';
-    }, []);
-    return (React__default["default"].createElement(BabyGrowthFormContext.Provider, { value: {
-            isEmptyThreeFields,
-            control,
-            currentUrl,
-            isMarryBaby,
-            siteType,
-        } },
-        React__default["default"].createElement(core.Box, { component: "form", onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? (React__default["default"].createElement(VerticalForm, null)) : (React__default["default"].createElement(HorizonalForm, { classNames: {
-                root: classes.root,
-            } })))));
-};
-
-const StyledBabyGrowthWrapper = styled__default["default"].div `
-  padding: 36px;
-  padding-top: 0;
-  background-color: white;
-  ${utils.MediaQueries.mbDown} {
-    padding: 16px;
-    padding-top: 0;
-  }
-  &[data-theme='marryBaby'] {
-    background-color: ${theme.theme.mbColors.green};
-    padding: 24px;
-    border-bottom-right-radius: 16px;
-    border-bottom-left-radius: 16px;
-    ${utils.MediaQueries.mbDown} {
-      padding: 16px;
-    }
-  }
-`;
-const StyleForm = styled__default["default"](BabyGrowthForm) `
-  padding-block: 0;
-`;
-styled__default["default"](ToolsBannerCard) `
-  padding-inline: 20px;
-
-  img.embedded-icon {
-    width: 140px;
-    margin-left: 50%;
-    align-self: center;
-  }
-
-  ${utils.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 = tslib_es6.__rest(_a, []);
-    const { formLayout, siteType, schema, onSubmit, onError } = React.useContext(BabyGrowthEmbedContext);
-    return (React__default["default"].createElement(StyleForm, Object.assign({ siteType: siteType, schema: schema, onSubmit: onSubmit, onError: onError, layout: formLayout }, form)));
-};
-
-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["default"].createElement(BabyGrowthEmbedContext.Provider, { value: { formLayout, siteType, schema, onSubmit, onError } }, children || (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
-            React__default["default"].createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, icon: React__default["default"].createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
-                        index$5.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["default"].createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
-                React__default["default"].createElement(Form, { layout: formLayout })))))));
-};
-const BabyGrowthCardEmbed = _BabyGrowthCardEmbed;
-BabyGrowthCardEmbed.Form = Form;
+    return (React__default["default"].createElement(HealthToolCardWrapper, null,
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { bannerUrl: index$6.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: index$6.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), isEmbeded: true, icon: React__default["default"].createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+                    index$6.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["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(index$d.BabyGrowthForm, { schema: schema, onSubmit: onSubmit, onError: onError, formLayout: formLayout }))));
+};
 
 var useStyles$1 = core.createStyles((theme, params) => {
     const { isMarryBaby, isSide, direction } = params;
@@ -4733,7 +4094,7 @@ var useStyles$1 = core.createStyles((theme, params) => {
             : {
                 flexDirection: direction === 'column' ? 'column-reverse' : 'row',
             })), { gap: '8px', padding: '16px', borderRadius: isMarryBaby ? '16px' : '8px' }), (!isMarryBaby && {
-            backgroundImage: `url(${index$5.CommonGAssets.getAssetPath('bgPattern/baby-poop.svg')})`,
+            backgroundImage: `url(${index$6.CommonGAssets.getAssetPath('bgPattern/baby-poop.svg')})`,
             backgroundRepeat: 'no-repeat',
             backgroundSize: 'cover',
             backgroundPosition: 'center',
@@ -4838,11 +4199,11 @@ const BabyPoopEmbed = ({ babyPoopPage, onClickFindOut, currentUrl, isSide, direc
     const { reviewedBy, reviewedDate } = babyPoopPage || {};
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement("div", { className: classes.inner },
-            React__default["default"].createElement(index$6.Heading, { tag: "h3", as: 'h2', color: !isMarryBaby && '#284A75' }, babyPoopPage.title),
+            React__default["default"].createElement(index$5.Heading, { tag: "h3", as: 'h2', color: !isMarryBaby && '#284A75' }, babyPoopPage.title),
             React__default["default"].createElement("div", { className: classes.content, "data-is-side": isSide },
                 React__default["default"].createElement(index$2.Text, { size: "p3", className: "description" }, babyPoopPage.description),
                 !!reviewedBy && (React__default["default"].createElement("div", { className: classes.reviewText },
-                    React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('reviewerCheck.svg'), alt: "check", className: classes.reviewTextIcon, loading: "lazy" }),
+                    React__default["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('reviewerCheck.svg'), alt: "check", className: classes.reviewTextIcon, loading: "lazy" }),
                     React__default["default"].createElement(index$2.Text, { size: "p4", color: theme.theme.colors.gray600 },
                         t('categoryPage.info.reviewed'),
                         "\u00A0",
@@ -4855,191 +4216,108 @@ const BabyPoopEmbed = ({ babyPoopPage, onClickFindOut, currentUrl, isSide, direc
                         } }, t('babyPoop.findOut'))))),
         React__default["default"].createElement("div", { className: classes.thumbnail },
             React__default["default"].createElement("img", { src: isMarryBaby
-                    ? index$5.CommonGAssets.getAssetPath('baby-poop.svg')
+                    ? index$6.CommonGAssets.getAssetPath('baby-poop.svg')
                     : babyPoopPage === null || babyPoopPage === void 0 ? void 0 : babyPoopPage.featuredImage, alt: babyPoopPage.title, loading: "lazy" })),
         sponsorLogo && (React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))));
 };
 
-const StyledRadioImageGroup = styled__default["default"].div `
-  display: flex;
-  width: 100%;
+const ThrFormContext = React.createContext({});
 
-  &[data-direction='vertical'] {
-    flex-direction: column;
-  }
-
-  &[data-direction='horizontal'] {
-    flex-wrap: wrap;
-  }
-`;
-const StyledRadioImageItem = styled__default["default"].div `
-  display: flex;
-
-  padding: 8px;
-
-  border-radius: ${theme.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;
-
-    .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] = React.useState(value);
-    const handleOnChange = (v) => {
-        if (isDisabled)
-            return;
-        setCheck(v);
-        onChange && onChange(v);
-    };
-    return (React__default["default"].createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default["default"].createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-disabled": isDisabled, key: `health-tool${index}`, onClick: () => {
-            handleOnChange(option.value);
-        } },
-        React__default["default"].createElement("div", null,
-            React__default["default"].createElement("img", { src: (value || check) === option.value
-                    ? option.imageActive
-                    : option.image, className: "gender-image", alt: "", loading: "lazy" }),
-            option.label && (React__default["default"].createElement(index$2.Text, { weight: "bold", className: "radio-group-item-heading", size: "label1" }, option.label))))))));
+const DefaultForm = (_a) => {
+    var _b;
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
+        React__default["default"].createElement(index$h.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                content: '60',
+            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                rightSection: {
+                    width: 'auto',
+                },
+            }) })),
+        isAdult && (React__default["default"].createElement(index$3.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["default"].createElement(index$d.HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
 };
 
-const StyledButton$1 = styled__default["default"](index$3.Button) `
-  margin: 0 auto 24px;
-  width: 100%;
-  ${utils.MediaQueries.mbUp} {
-    max-width: 200px;
-  }
-`;
-const StyledContainer$1 = styled__default["default"].div ``;
-const FormControl$1 = styled__default["default"].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__default["default"].div `
-  ${utils.MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 24px;
-    > div {
-      width: 100%;
-    }
-  }
-
-  ${utils.MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-bottom: 8px;
-  }
-  &[data-is-side='true'] {
-    ${utils.MediaQueries.mbUp} {
-      display: flex;
-      flex-direction: column-reverse;
-      gap: 0px;
-    }
-  }
-`;
-
-const ThrForm = ({ info, className, style, onChange, errorMessage = {}, locale, }) => {
-    const { t } = useTranslations.useTranslations();
-    const [dob, setDob] = React.useState(new Date());
-    const [isEdit, setIsEdit] = React.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: dateFns.format(new Date(dob), API_DATE_FORMAT) });
-        onChange && onChange(newInfo);
-    };
-    React.useEffect(() => {
-        setIsEdit({
-            age: false,
-            rate: false,
-        });
-    }, [errorMessage]);
-    return (React__default["default"].createElement(StyledContainer$1, { style: style, className: className },
-        React__default["default"].createElement(index$9.Input, { className: "input-section due-date-input", label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600, style: { marginBottom: '9px', flex: '1' } }, t('targetHeartRate.ageInput')), value: DateToInputValue(dob), name: "date", size: "md", CustomInput: React__default["default"].createElement(index$d.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({ type: "date", className: "due-date-input" }, props, { value: DateToInputValue(dob) }))), disabledDays: {
-                    after: new Date(dateFns.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 = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
+                React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
+                React__default["default"].createElement(index$h.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default["default"].createElement(index$3.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["default"].createElement(index$d.HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
 };
 
-const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMessage, onFormChange, onSubmit, }) => {
-    var _a, _b, _c;
-    const { t } = useTranslations.useTranslations();
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "onSubmit", "onError"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const minRange = React.useRef(40);
     const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const form$1 = form.useForm({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: form.isNotEmpty(t('tools.requiredErrorMess.gender')),
+            age: form.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 = React.useMemo(() => getHealthToolLink(utils$1.HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
     const [isAdult, setIsAdult] = React.useState(false);
-    const [activeValue, setActiveValue] = React.useState('low_intensity');
-    const [genderValue, setGenderValue] = React.useState('male');
-    const [heartRate, setHeartRate] = React.useState(60);
-    const [range, setRange] = React.useState({
-        idAge: 0,
-        minAge: 0,
-        maxAge: 18,
-        rangeMale: 40,
-        rangeFemale: 40,
-    });
     const rangeHeartRateByAge = [
         {
             idAge: 0,
@@ -5095,283 +4373,93 @@ const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMe
         {
             value: 'low_intensity',
             label: t('targetHeartRate.lowIntensity.title'),
-            image: index$5.CommonGAssets.getAssetPath(`/low.svg`),
-            imageActive: index$5.CommonGAssets.getAssetPath(`/low-active.svg`),
+            image: index$6.CommonGAssets.getAssetPath(`/low.svg`),
+            imageActive: index$6.CommonGAssets.getAssetPath(`/low-active.svg`),
             content: t('targetHeartRate.lowIntensity.note'),
         },
         {
             value: 'moderate_intensity',
             label: t('targetHeartRate.moderateIntensity.title'),
-            image: index$5.CommonGAssets.getAssetPath(`/moderate.svg`),
-            imageActive: index$5.CommonGAssets.getAssetPath(`/moderate-active.svg`),
+            image: index$6.CommonGAssets.getAssetPath(`/moderate.svg`),
+            imageActive: index$6.CommonGAssets.getAssetPath(`/moderate-active.svg`),
             content: t('targetHeartRate.moderateIntensity.note'),
         },
         {
             value: 'aerobic_zone',
             label: t('targetHeartRate.aerobicZone.title'),
-            image: index$5.CommonGAssets.getAssetPath(`/aerobic.svg`),
-            imageActive: index$5.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
+            image: index$6.CommonGAssets.getAssetPath(`/aerobic.svg`),
+            imageActive: index$6.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
             content: t('targetHeartRate.aerobicZone.note'),
         },
         {
             value: 'vigorous_intensity',
             label: t('targetHeartRate.vigorousIntensity.title'),
-            image: index$5.CommonGAssets.getAssetPath(`/vigorous.svg`),
-            imageActive: index$5.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
+            image: index$6.CommonGAssets.getAssetPath(`/vigorous.svg`),
+            imageActive: index$6.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
             content: t('targetHeartRate.vigorousIntensity.note'),
         },
         {
             value: 'maximum_intensity',
             label: t('targetHeartRate.maximumIntensity.title'),
-            image: index$5.CommonGAssets.getAssetPath(`/maximum.svg`),
-            imageActive: index$5.CommonGAssets.getAssetPath(`/maximum-active.svg`),
+            image: index$6.CommonGAssets.getAssetPath(`/maximum.svg`),
+            imageActive: index$6.CommonGAssets.getAssetPath(`/maximum-active.svg`),
             content: t('targetHeartRate.maximumIntensity.note'),
         },
     ];
     React.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["default"].createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
-                    index$5.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)
+        const ageDate = form$1.getInputProps('age').value;
+        const gender = form$1.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$1]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form$1.onSubmit(onSubmit, onError) });
+    return (React__default["default"].createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form: form$1,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+const THRCardEmbed = ({ thrContent, isMobile, formLayout, onSubmit, }) => {
+    var _a, _b;
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement(HealthToolCardWrapper, null,
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
+                    index$6.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: index$k.formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
+                    link: index$i.formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
                     reviewer: (_b = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
                     date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
                 }
                 : undefined, isMobile: isMobile }),
-        React__default["default"].createElement(index$g.Container, null,
-            React__default["default"].createElement(StyledContent, { className: "heart-rate-cal", onSubmit: (e) => e.preventDefault(), "data-is-side": isSide },
-                React__default["default"].createElement(StyledRow$1, { "data-is-side": isSide },
-                    React__default["default"].createElement(FormControl$1, null,
-                        React__default["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: core.rem(12),
-                                    },
-                                },
-                            }) }))),
-                React__default["default"].createElement(StyledRow$1, null,
-                    React__default["default"].createElement(ThrForm, { info: info, locale: locale, errorMessage: inputErrorMessage, onChange: onFormChange })),
-                React__default["default"].createElement("div", { className: "slider-heart-rate" },
-                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 }, t('targetHeartRate.heartRateInput')),
-                    React__default["default"].createElement("div", { className: "slider-outer-wrapper" },
-                        React__default["default"].createElement(index$f.Slider, { containerStyle: {
-                                flex: 1,
-                            }, min: genderValue === 'male' ? range.rangeMale : range.rangeFemale, max: 200, step: 1, value: heartRate, withControl: true, onChange: setHeartRate }))),
-                isAdult && (React__default["default"].createElement(FormControl$1, null,
-                    React__default["default"].createElement(StyledActive, null,
-                        React__default["default"].createElement(index$2.Text, { size: "s4", style: {
-                                display: 'inline-block',
-                                fontWeight: 'bold',
-                                color: theme.theme.colors.gray600,
-                                marginBottom: '9px',
-                            } }, t('targetHeartRate.selectActive')),
-                        React__default["default"].createElement("div", { className: "card" },
-                            React__default["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["default"].createElement("div", { className: "note" },
-                            React__default["default"].createElement("img", { style: {
-                                    height: '16px',
-                                    width: '16px',
-                                }, src: index$5.CommonGAssets.getAssetPath(`/infoIcon.svg`), alt: "", loading: "lazy" }),
-                            React__default["default"].createElement(index$2.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["default"].createElement("span", { style: { color: '#e64728' } }, inputErrorMessage.intensity)))))),
-            React__default["default"].createElement("div", { style: { display: 'flex' } },
-                React__default["default"].createElement(StyledButton$1, { size: "lg", onClick: () => {
-                        onSubmit(genderValue, activeValue, [heartRate]);
-                    }, dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))))));
-};
-
-const StyledButton = styled__default["default"](index$3.Button) `
-  margin: 0 auto 24px;
-  ${utils.MediaQueries.mbUp} {
-    max-width: 200px;
-    margin: 24px auto;
-  }
-`;
-const StyledContainer = styled__default["default"].div ``;
-const FormControl = styled__default["default"].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__default["default"].div `
-  ${utils.MediaQueries.mbUp} {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    > div {
-      width: 100%;
-    }
-    &[data-is-side='true'] {
-      ${utils.MediaQueries.mbUp} {
-        display: flex;
-        flex-direction: column;
-        gap: 0px;
-      }
-    }
-  }
-  ${utils.MediaQueries.mbDown} {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-  }
-`;
-
-const BmrInputForm = ({ info, className, style, onChange, errorMessage = {}, locale, onClick, isSide, }) => {
-    const { t } = useTranslations.useTranslations();
-    const [isEdit, setIsEdit] = React.useState({
-        age: false,
-        height: false,
-        weight: false,
-    });
-    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
-    const linkTool = React.useMemo(() => getHealthToolLink(utils$1.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
-    const [genderValue, setGenderValue] = React.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);
-        });
-    };
-    React.useEffect(() => {
-        onChange &&
-            onChange(Object.assign(Object.assign({}, info), { objective: 'lose-fat', activeLevel: 'sedentary' }));
-    }, []);
-    React.useEffect(() => {
-        setIsEdit({
-            age: false,
-            height: false,
-            weight: false,
-        });
-    }, [errorMessage]);
-    return (React__default["default"].createElement(StyledContainer, { style: style, className: className },
-        React__default["default"].createElement(FormControl, { "data-is-side": isSide },
-            React__default["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: core.rem(12),
-                        },
-                    },
-                }) })),
-        React__default["default"].createElement(StyledRow, { "data-is-side": isSide },
-            React__default["default"].createElement(FormControl, null,
-                React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                        t('bmi.ageInput'),
-                        ' ',
-                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(FormControl, null,
-                React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                        t('bmi.heightInput'),
-                        ' ',
-                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement(FormControl, null,
-                React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.theme.colors.gray600 },
-                        t('bmi.weightInput'),
-                        ' ',
-                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: theme.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["default"].createElement("div", { style: { display: 'flex' } },
-            React__default["default"].createElement(StyledButton, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMR", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, onClick: () => {
-                    onClick(genderValue);
-                } }, t('bmi.submit')))));
+        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(ThrForm, { onSubmit: onSubmit, formLayout: formLayout }))));
 };
 
-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.useTranslations();
-    return (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide },
-        React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/bmr.svg'), loading: "lazy" }), heading: t('bmr.heading'), medicalReview: {
+    return (React__default["default"].createElement(HealthToolCardWrapper, null,
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
+                    index$6.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["default"].createElement(index$g.Container, null,
-            React__default["default"].createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), "data-is-side": isSide },
-                React__default["default"].createElement(StyledInputForm, null,
-                    React__default["default"].createElement(BmrInputForm, { info: info, locale: locale, errorMessage: inputErrorMessage, onChange: onFormChange, onClick: onSubmit, isSide: isSide }))))));
+        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, bmiUnit: bmiUnit, formLayout: formLayout, submitProps: {
+                    dataEventAction: 'BMR',
+                } }))));
 };
 
 const OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
@@ -5392,7 +4480,7 @@ const OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
             return '';
     }, []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form input-section", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(StyledTextField, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), name: "date", size: "md", value: DateToInputValue(lastPeriodDate), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: (date) => {
+        React__default["default"].createElement(StyledLastPeriodFormContainer, { className: "input-form input-section", "data-is-side": true }, siteType === 'marryBaby' ? (React__default["default"].createElement(index$d.StyledTextField, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), name: "date", size: "md", value: index$d.DateToInputValue(lastPeriodDate), CustomInput: React__default["default"].createElement(index$e.DatePicker, { onChange: (date) => {
                     setLastPeriodDate(date);
                 }, placeholder: "dd/mm/yyyy", pickedDate: lastPeriodDate, displayDateFormat: 'dd/MM/yyyy', disabledDays: {
                     before: dateFns.addDays(new Date(), -45),
@@ -5400,28 +4488,28 @@ const OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
                 }, customInput: (props) => {
                     return (React__default["default"].createElement(index$9.Input, Object.assign({ className: "due-date-input", name: "birthday", size: "md" }, props, { value: lastPeriodDate &&
                             dayjs__default["default"](lastPeriodDate).format(utils$1.DUE_DATE_FORMAT) })));
-                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959", style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: DateToInputValue(lastPeriodDate), size: "md", name: "date", className: "due-date-input", CustomInput: React__default["default"].createElement(index$d.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({}, props, { type: "date", className: "due-date-input", value: DateToInputValue(lastPeriodDate) }))), locale: locale, pickedDate: lastPeriodDate, displayDateFormat: types.DATE_FORMAT, onChange: (date) => {
+                } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) : (React__default["default"].createElement(index$9.Input, { label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959", style: { marginBottom: '9px', flex: '1' } }, t('dueDatePage.lastPeriod.lastPeriodLabel')), value: index$d.DateToInputValue(lastPeriodDate), size: "md", name: "date", className: "due-date-input", CustomInput: React__default["default"].createElement(index$e.DatePicker, { customInput: (props) => (React__default["default"].createElement("input", Object.assign({}, props, { type: "date", className: "due-date-input", value: index$d.DateToInputValue(lastPeriodDate) }))), locale: locale, pickedDate: lastPeriodDate, displayDateFormat: types.DATE_FORMAT, onChange: (date) => {
                     setLastPeriodDate(date);
                 }, disabledDays: {
                     before: dateFns.addDays(new Date(), -45),
                     after: new Date(),
                 }, placeholder: "Ch\u1ECDn ng\u00E0y" }) }))),
         React__default["default"].createElement("div", { className: "slider-ovulation day-slider", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '', "data-is-side": isSide },
-            siteType === 'marryBaby' ? (React__default["default"].createElement(index$e.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('ovulationPage.cycleLength'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959" },
+            siteType === 'marryBaby' ? (React__default["default"].createElement(index$f.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('ovulationPage.cycleLength'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959" },
                 t('ovulationPage.cycleLength') + ' ',
                 React__default["default"].createElement("span", { style: { minHeight: '36px' } }, t('ovulationPage.dayUnit')))),
             React__default["default"].createElement("div", { className: "slider-outer-wrapper" },
                 siteType === 'marryBaby' && (React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold", color: theme.theme.colors.gray600 }, cycleValue)),
-                React__default["default"].createElement(index$f.Slider, { containerStyle: {
+                React__default["default"].createElement(index$g.Slider, { containerStyle: {
                         flex: 1,
                     }, min: 21, max: 45, step: 1, value: cycleValue, onChange: setCycleValue, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', label: siteType !== 'marryBaby' ? undefined : null }))),
         React__default["default"].createElement("div", { className: "slider-ovulation day-slider", "data-theme": siteType === 'marryBaby' ? 'marryBaby' : '', "data-is-side": isSide },
-            siteType === 'marryBaby' ? (React__default["default"].createElement(index$e.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('ovulationPage.periodDuration'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959" },
+            siteType === 'marryBaby' ? (React__default["default"].createElement(index$f.MarryBabyText, { type: "bodytext-3", color: theme.theme.mbColors.midGray }, t('ovulationPage.periodDuration'))) : (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959" },
                 t('ovulationPage.periodDuration') + ' ',
                 React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: "#595959", style: { display: 'inline', minHeight: '36px' } }, t('ovulationPage.dayUnit')))),
             React__default["default"].createElement("div", { className: "slider-outer-wrapper" },
                 siteType === 'marryBaby' && (React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold", color: theme.theme.colors.gray600 }, periodDurationValue)),
-                React__default["default"].createElement(index$f.Slider, { containerStyle: {
+                React__default["default"].createElement(index$g.Slider, { containerStyle: {
                         flex: 1,
                     }, min: 1, max: 15, step: 1, value: periodDurationValue, onChange: setPeriodDurationValue, labelAlwaysOn: siteType !== 'marryBaby', withControl: siteType !== 'marryBaby', label: siteType !== 'marryBaby' ? undefined : null }))),
         React__default["default"].createElement("div", { style: {
@@ -5486,9 +4574,9 @@ const OvulationCalculator = ({ locale, onSubmitOvulation, isSide, siteType, }) =
 const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expertUrl, isSide = false, siteType, isMobile, }) => {
     var _a;
     const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, bannerUrl: index$5.CommonGAssets.getAssetPath('embedToolBannerPink.svg'), siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/ovulation-icon.svg'), loading: "lazy" }), heading: t('healthTools.ovulationCalculator'), medicalReview: {
+    return (React__default["default"].createElement(HealthToolCardWrapper, { isPregTool: true },
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { bannerUrl: index$6.CommonGAssets.getAssetPath('embedToolBannerPink.svg'), bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
+                    index$6.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,
                 date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
@@ -5549,11 +4637,11 @@ const PWGInputForm = ({ siteType, info, onChange, errorMessage = {}, }) => {
     }, [errorMessage]);
     return siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(StyledTextField, { label: t('pregnancyWeightGain.heightInput'), name: "pwg-height", size: "md", value: info === null || info === void 0 ? void 0 : info.height, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? 'error-input' : '', name: "pwg-height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.height, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onHeightChanged }) })),
+            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.heightInput'), name: "pwg-height", size: "md", value: info === null || info === void 0 ? void 0 : info.height, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? 'error-input' : '', name: "pwg-height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.height, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onHeightChanged }) })),
         React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(StyledTextField, { label: t('pregnancyWeightGain.weightBeforeInput'), name: "pwg-weightBefore", size: "md", value: info === null || info === void 0 ? void 0 : info.weightBefore, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? 'error-input' : '', name: "pwg-weightBefore", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weightBefore, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onWeightBeforeChanged }) })),
+            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.weightBeforeInput'), name: "pwg-weightBefore", size: "md", value: info === null || info === void 0 ? void 0 : info.weightBefore, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? 'error-input' : '', name: "pwg-weightBefore", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weightBefore, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onWeightBeforeChanged }) })),
         React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(StyledTextField, { label: t('pregnancyWeightGain.weightInput'), name: "pwg-weight", size: "md", value: info === null || info === void 0 ? void 0 : info.weight, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? 'error-input' : '', name: "pwg-weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weight, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', showErrorMessage: false, onChange: onWeightChanged }) })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.weightInput'), name: "pwg-weight", size: "md", value: info === null || info === void 0 ? void 0 : info.weight, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? 'error-input' : '', name: "pwg-weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weight, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', showErrorMessage: false, onChange: onWeightChanged }) })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: "input-form-pwg" },
             React__default["default"].createElement(index_styles.PureInput, { placeholder: t('pwg.placeholder.height'), className: "input-section", label: React__default["default"].createElement("span", { style: {
                         color: theme.theme.colors.gray600,
@@ -5604,14 +4692,14 @@ const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormCh
     })), []);
     const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
     const linkTool = React.useMemo(() => getHealthToolLink(utils$1.HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
-    return (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
-        React__default["default"].createElement(ToolsBannerCard, { siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
-                link: index$k.formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
+    return (React__default["default"].createElement(HealthToolCardWrapper, { isPregTool: true },
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+                    index$6.CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
+                link: index$i.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,
                 date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
             }, isMobile: isMobile, isSide: isSide }),
-        React__default["default"].createElement(index$g.Container, null,
+        React__default["default"].createElement(index$j.Container, null,
             React__default["default"].createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "pwg-view-mobile", "data-is-side": isSide },
                 siteType !== 'marryBaby' && (React__default["default"].createElement(StyledTwins, { className: "hide-asking-mobile", "data-is-side": isSide },
                     React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", style: {
@@ -5948,11 +5036,11 @@ range, setRange, onChange, goToPreviousMonth, goToNextMonth, minDate, maxDate, c
     }
     return (React__default["default"].createElement(StyledCalendarWrapper$1, { className: "calendar-wrapper" },
         React__default["default"].createElement(StyledCalendarHead, null,
-            React__default["default"].createElement(index$a.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
+            React__default["default"].createElement(index$a.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
             React__default["default"].createElement("div", { className: "calendar-month" },
                 monthLabel,
                 React__default["default"].createElement("strong", null, dateFns.format(date, 'yyyy'))),
-            React__default["default"].createElement(index$a.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
+            React__default["default"].createElement(index$a.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
         React__default["default"].createElement(StyledCalendarCellsWrapper, null,
             React__default["default"].createElement("div", null, renderWeekDays()),
             React__default["default"].createElement("div", null, renderMonth()))));
@@ -6028,7 +5116,7 @@ function DateRangePicker({ inputSize = 'md', name = 'date-range-picker', value,
     }
     return (React__default["default"].createElement(StyledWrapper, { className: [className, opened && 'focused'].filter(Boolean).join(' '), ref: ref },
         React__default["default"].createElement("label", { htmlFor: name },
-            React__default["default"].createElement(index_styles.PureInput, { size: inputSize, value: fieldValue, name: name, actionIcon: React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('calendar.svg'), loading: "lazy" }), onFocus: () => setOpened(true) })),
+            React__default["default"].createElement(index_styles.PureInput, { size: inputSize, value: fieldValue, name: name, actionIcon: React__default["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('calendar.svg'), loading: "lazy" }), onFocus: () => setOpened(true) })),
         opened ? (React__default["default"].createElement(StyledCalendarWrapper, { onMouseDown: (e) => {
                 e.stopPropagation();
             } }, renderCalendar())) : null));
@@ -6129,7 +5217,7 @@ const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
             React__default["default"].createElement(index$a.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
 };
 
-const StyledShareDrawer = styled__default["default"](index$i.Drawer) `
+const StyledShareDrawer = styled__default["default"](index$d.Drawer) `
   padding-bottom: 24px;
   .share-container {
     display: flex;
@@ -6294,7 +5382,7 @@ const StyledAdHeader = styled__default["default"].div `
 `;
 const StyledCloseBtn = styled__default["default"].div `
   background-color: white;
-  background-image: url(${index$5.CommonGAssets.getAssetPath('close-blue.svg')});
+  background-image: url(${index$6.CommonGAssets.getAssetPath('close-blue.svg')});
   background-repeat: no-repeat;
   background-size: 10px;
   background-position: center;
@@ -6364,7 +5452,7 @@ const DEFAULT_30S_AD_POS = [
 const ForwaredAdBlock = React.forwardRef(function InfinityAdBlock({ className, adUnitPath, size, divId, pos, sizeMapping, contentId, isHidden, hideIfHasSubot, isSticky, refreshInterval, // seconds
 customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, headerBottom, wrapperProps, locale, isMarryBaby, }, ref) {
     const defaultRefreshInterval = refreshInterval ||
-        (locale === index$j.LOCALE.Vietnam
+        (locale === index$k.LOCALE.Vietnam
             ? pos.some((p) => DEFAULT_30S_AD_POS.includes(p))
                 ? 30
                 : undefined
@@ -6453,8 +5541,8 @@ customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, head
         React__default["default"].createElement(StyledAdContainer, { ref: containerRef, className: className, style: style, "data-no-wrapper": !!noWrapper, "data-header-bottom": !!headerBottom }, noWrapper ? (AdContent) : (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(StyledAdHeader, { "data-header-bottom": !!headerBottom },
                 React__default["default"].createElement("img", { src: isMarryBaby
-                        ? index$5.CommonGAssets.getAssetPath('adsIcon-mb.svg')
-                        : index$5.CommonGAssets.getAssetPath('adsIcon.svg'), alt: "", loading: "lazy" }),
+                        ? index$6.CommonGAssets.getAssetPath('adsIcon-mb.svg')
+                        : index$6.CommonGAssets.getAssetPath('adsIcon.svg'), alt: "", loading: "lazy" }),
                 React__default["default"].createElement("span", null, t('adBanner.title'))),
             React__default["default"].createElement("div", { style: {
                     minWidth: minWidth || '100%',
@@ -6521,21 +5609,21 @@ const PREFER_TOPICS = [
     {
         title: 'Health News & Current Affairs',
         description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
-        icon: index$5.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-health.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-health.svg'),
         checked: false,
         id: 1,
     },
     {
         title: 'Educational Medical Hello Bacsi Content',
         description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
-        icon: index$5.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-education.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-education.svg'),
         checked: false,
         id: 2,
     },
     {
         title: 'Hello Health Community Feed',
         description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
-        icon: index$5.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-community.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-community.svg'),
         checked: false,
         id: 3,
     },
@@ -6567,7 +5655,7 @@ const HEALTH_TOOL_TYPE = {
     BABY_POOP: HEALTH_TOOL_NAME.BABY_POOP,
 };
 const HEALTH_TOOL_DEFAULT_IMG = {
-    [HEALTH_TOOL_TYPE.DUE_DATE]: index$5.CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'),
+    [HEALTH_TOOL_TYPE.DUE_DATE]: index$6.CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'),
 };
 
 var BannerCategory;
@@ -6608,8 +5696,8 @@ const FLOW = (t, currentUrl) => ({
             description: t('pnBanner.pregnancy.desc'),
             styleType: OptionBannerStyleType.Button,
             thumbnail: {
-                desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-desktop.png`),
-                mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-mobile.png`),
+                desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-desktop.png`),
+                mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-mobile.png`),
             },
             buttonProps: {
                 variant: 'white',
@@ -6659,8 +5747,8 @@ const FLOW = (t, currentUrl) => ({
             heading: t('pnBanner.parenting.heading'),
             description: t('pnBanner.parenting.desc'),
             thumbnail: {
-                desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
-                mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
+                desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
+                mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
             },
             hideDescOnMobile: true,
             styleType: OptionBannerStyleType.Checkbox,
@@ -6694,8 +5782,8 @@ const FLOW = (t, currentUrl) => ({
                     heading: t('pnBanner.teenager.heading'),
                     description: t('pnBanner.parenting.desc'),
                     thumbnail: {
-                        desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
-                        mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
+                        desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
+                        mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
                     },
                     buttonProps: {
                         variant: 'white',
@@ -6739,8 +5827,8 @@ const FLOW = (t, currentUrl) => ({
                     heading: t('pnBanner.both.heading'),
                     description: t('pnBanner.both.desc'),
                     thumbnail: {
-                        desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
-                        mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
+                        desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
+                        mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
                     },
                     hideDescOnMobile: true,
                     buttonProps: {
@@ -6787,8 +5875,8 @@ const FLOW = (t, currentUrl) => ({
                     heading: t('pnBanner.both.heading'),
                     description: t('pnBanner.both.desc'),
                     thumbnail: {
-                        desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
-                        mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
+                        desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
+                        mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
                     },
                     hideDescOnMobile: true,
                     buttonProps: {
@@ -6846,8 +5934,8 @@ const TOOL_BANNERS_PROPS = (t) => ({
         heading: t('pnBanner.hpv.heading'),
         description: t('pnBanner.hpv.desc'),
         thumbnail: {
-            desktop: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-desktop.png`),
-            mobile: index$5.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-mobile.png`),
+            desktop: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-desktop.png`),
+            mobile: index$6.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-mobile.png`),
         },
         isRiskScreener: true,
         btnLabel: t('pnBanner.checkNow'),
@@ -6879,8 +5967,8 @@ const PnBannerEle = (_a) => {
             cursor: 'pointer',
         }, onClick: bannerClick, "data-event-category": "Newsletter", "data-event-action": "Banner Click", "data-event-label": currentUrl, className: "pointer-event-child-none" }, rest),
         React__default["default"].createElement(index$3.ImageWrap, { src: isMarketing
-                ? index$5.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_Marketing.png`)
-                : index$5.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_${type}.png`), style: { maxWidth: '100%' }, alt: "newsletter banner" })));
+                ? index$6.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_Marketing.png`)
+                : index$6.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_${type}.png`), style: { maxWidth: '100%' }, alt: "newsletter banner" })));
 };
 
 const PATHS$1 = {
@@ -6947,7 +6035,7 @@ const BannerLayout = ({ heading, description, thumbnail = {
                             maxWidth: '70%',
                         },
                     }) },
-                    heading && React__default["default"].createElement(index$6.Heading, { tag: "h4" }, heading),
+                    heading && React__default["default"].createElement(index$5.Heading, { tag: "h4" }, heading),
                     !(hideDescOnMobile && isMobile) && description && (React__default["default"].createElement(index$2.Text, { size: "p4" }, description))),
                 React__default["default"].createElement(core.Box, null, children)))));
 };
@@ -7061,7 +6149,7 @@ const ToolBanner = (props) => {
         }) },
         React__default["default"].createElement(core.Stack, { spacing: core.rem(12) },
             React__default["default"].createElement(core.Stack, { spacing: core.rem(4) },
-                heading && React__default["default"].createElement(index$6.Heading, { tag: "h4" }, heading),
+                heading && React__default["default"].createElement(index$5.Heading, { tag: "h4" }, heading),
                 !(isMobile && hideDescOnMobile) && description && (React__default["default"].createElement(index$2.Text, { size: "p4" }, description))),
             React__default["default"].createElement(core.Flex, { gap: core.rem(8), sx: {
                     button: {
@@ -7100,7 +6188,7 @@ const HandlerBanner = () => {
 };
 
 const SideBannerModal = (_a) => {
-    var { isMobile, children, desktopBanner = index$5.CommonGAssets.getAssetPath('friso/onboarding-banner.jpg'), mobileBanner = index$5.CommonGAssets.getAssetPath('friso/onboarding-banner-mobile.jpg'), modalRatio = {
+    var { isMobile, children, desktopBanner = index$6.CommonGAssets.getAssetPath('friso/onboarding-banner.jpg'), mobileBanner = index$6.CommonGAssets.getAssetPath('friso/onboarding-banner-mobile.jpg'), modalRatio = {
         width: 937,
         height: 536,
     }, mobileBannerRatio = {
@@ -7300,7 +6388,7 @@ const Layout = (_a) => {
     var { heading, children, stickyActions } = _a, scrollAreaProps = tslib_es6.__rest(_a, ["heading", "children", "stickyActions"]);
     const { isMobile } = React.useContext(PremiumNewsletterModalContext);
     const content = (React__default["default"].createElement(core.Stack, { spacing: core.rem(24), sx: { height: '100%' } },
-        React__default["default"].createElement(index$6.Heading, { tag: "h4", style: {
+        React__default["default"].createElement(index$5.Heading, { tag: "h4", style: {
                 textAlign: 'center',
             } }, heading),
         React__default["default"].createElement(core.Box, null, children)));
@@ -7847,15 +6935,15 @@ const Result = () => {
                         React__default["default"].createElement("path", { d: "M9.99984 18.3334C14.6022 18.3334 18.3332 14.6025 18.3332 10.0001C18.3332 5.39771 14.6022 1.66675 9.99984 1.66675C5.39746 1.66675 1.6665 5.39771 1.6665 10.0001C1.6665 14.6025 5.39746 18.3334 9.99984 18.3334Z", fill: "#00B16A" }),
                         React__default["default"].createElement("path", { d: "M9.58558 12.6674C9.22944 12.668 8.87668 12.5983 8.54752 12.4623C8.21835 12.3264 7.91925 12.1268 7.66732 11.8751L6.68587 10.8931C6.55607 10.7587 6.48424 10.5787 6.48587 10.3919C6.48749 10.2051 6.56243 10.0263 6.69455 9.89422C6.82667 9.7621 7.00539 9.68716 7.19222 9.68554C7.37906 9.68391 7.55906 9.75574 7.69345 9.88554L8.67491 10.8675C8.79344 10.986 8.93415 11.08 9.08902 11.1442C9.24389 11.2083 9.40987 11.2413 9.5775 11.2413C9.74513 11.2413 9.91111 11.2083 10.066 11.1442C10.2208 11.08 10.3616 10.986 10.4801 10.8675L16.7033 5.24335C16.8443 5.12184 17.0272 5.06032 17.213 5.07195C17.3987 5.08358 17.5726 5.16744 17.6973 5.30558C17.8221 5.44373 17.8878 5.6252 17.8805 5.81118C17.8731 5.99717 17.7933 6.17291 17.6581 6.30081L11.4592 11.8998C11.2128 12.1448 10.9205 12.3387 10.5989 12.4705C10.2774 12.6022 9.93304 12.6692 9.58558 12.6674Z", fill: "white" }))),
                 React__default["default"].createElement(index$2.Text, { size: "p3" }, disclaimerText || t('pnModal.disclaimer'))),
-            React__default["default"].createElement(index$6.Heading, { tag: "h5" }, t('healthToolPNModal.yourPre')),
+            React__default["default"].createElement(index$5.Heading, { tag: "h5" }, t('healthToolPNModal.yourPre')),
             selectCategory.length > 0 && (React__default["default"].createElement(TopicSection, { topicsGroup: [{ label: '', topics: selectCategory }], selectedTopics: selectCategory, readonly: true })))));
 };
 
 const PremiumNewsletterModal = ({ isMobile, isLoggedIn, pnSuggestCategory = [], acquisitionInfo, currentUrl, opened, close, finishLabelOnResult, onRegisterSuccess, disclaimerText, }) => {
     const { t, locale } = useTranslations.useTranslations();
     const { action: { pushNotifications }, } = React.useContext(utils$1.TogetherComponentGlobalContext);
-    const desktopBanner = index$5.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-desktop.jpg');
-    const mobileBanner = index$5.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-mobile.jpg');
+    const desktopBanner = index$6.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-desktop.jpg');
+    const mobileBanner = index$6.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-mobile.jpg');
     const [categoryLibs, setCategoryLibs] = React.useState([]);
     const [selectCategory, setSelectCategory] = React.useState([]);
     const [activeStep, setActiveStep] = React.useState(0);
@@ -7881,7 +6969,7 @@ const PremiumNewsletterModal = ({ isMobile, isLoggedIn, pnSuggestCategory = [],
                     ga_client_id: Cookies__default["default"].get(index$b.GA_TOKEN_COOKIE),
                     client_ip: window.clientIP || '',
                     user_info: Object.assign(Object.assign({}, acquisitionInfo.userInfo), { name: name || formValues.name, type_subscription: 1 }),
-                    domain: index$b.domainLocales[locale || index$j.LOCALE.Vietnam],
+                    domain: index$b.domainLocales[locale || index$k.LOCALE.Vietnam],
                     category: selectCategory,
                     perferred: acquisitionInfo.preferredTopics.map(({ id }) => ({
                         id,
@@ -7957,7 +7045,7 @@ const PremiumNewsletterModal = ({ isMobile, isLoggedIn, pnSuggestCategory = [],
             finishLabelOnResult,
             disclaimerText,
         } },
-        React__default["default"].createElement(SideBannerModal, { isMobile: isMobile, desktopBanner: index$5.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-desktop.jpg'), mobileBanner: index$5.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-mobile.jpg'), modalRatio: {
+        React__default["default"].createElement(SideBannerModal, { isMobile: isMobile, desktopBanner: index$6.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-desktop.jpg'), mobileBanner: index$6.CommonGAssets.getAssetPath('premiumNewsletter/side-banner-mobile.jpg'), modalRatio: {
                 width: 960,
                 height: 588,
             }, desktopBannerRatio: {
@@ -8200,8 +7288,8 @@ function NavHeader({ userInfo, onClickMyProfileButton, themeName = 'helloSites',
         React__default["default"].createElement("div", { className: styles$4.navHeaderUserInfos },
             React__default["default"].createElement("div", { className: styles$4.navHeaderUserName }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username)),
             React__default["default"].createElement("div", { className: styles$4.navHeaderMyProfileButton, style: {
-                    '--bg-hellosites': `url(${index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
-                    '--bg-marrybaby': `url(${index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
+                    '--bg-hellosites': `url(${index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
+                    '--bg-marrybaby': `url(${index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
                 } }, t('userProfile.nav.header.viewProfile')))));
 }
 
@@ -8215,17 +7303,17 @@ const iconBgColorMap = {
 // type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
 const cardIconUrlMap = {
     helloSites: {
-        myBooking: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
-        myCommunity: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
-        myFamily: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
-        myHealth: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
-        mySaved: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
-        eCom: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
+        myBooking: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
+        myCommunity: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
+        myFamily: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
+        myHealth: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
+        mySaved: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
+        eCom: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
     },
     marryBaby: {
-        mySaved: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
-        myCommunity: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
-        myHealth: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
+        mySaved: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
+        myCommunity: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
+        myHealth: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
     },
 };
 const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
@@ -8254,7 +7342,7 @@ const NavigationCard = ({ type, themeName, className, onClick = () => undefined,
 const navMenuItemsHelloSites = () => [
     {
         key: 'userProfile.nav.menu.accountSettings',
-        icon: index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-settingsWheel.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-settingsWheel.svg'),
         subMenu: [
             // {
             //   key: 'common.profileNavigator.newsletterSubscription',
@@ -8284,19 +7372,19 @@ const navMenuItemsHelloSites = () => [
     },
     {
         key: 'userProfile.nav.menu.help',
-        icon: index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
         link: 'help',
     },
 ];
 const navMenuItemsMarryBaby = () => [
     {
         key: 'userProfile.nav.menu.password',
-        icon: index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
         link: 'password',
     },
     {
         key: 'userProfile.nav.menu.logout',
-        icon: index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-logOut.svg'),
+        icon: index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-logOut.svg'),
         link: 'logout',
     },
 ];
@@ -8334,7 +7422,7 @@ const NavMenuItem = ({ item, openKey, onClickItem, locale, }) => {
             item.icon && (React__default["default"].createElement("div", { className: styles$2.navMenuItemIcon, style: { backgroundImage: `url("${item.icon}")` } })),
             t(item.key),
             item.subMenu && (React__default["default"].createElement("div", { className: styles$2.navMenuItemDropdown, style: {
-                    '--after-bg': `url(${index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
+                    '--after-bg': `url(${index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
                 } }))),
         item.subMenu && (React__default["default"].createElement("div", { className: styles$2.navFooterSubMenu }, item.subMenu.map((subItem) => (React__default["default"].createElement(NavMenuItem, { key: subItem.key, item: subItem, openKey: openKey, onClickItem: onClickItem, locale: locale })))))));
 };
@@ -8345,18 +7433,18 @@ var styles = {"userStats":"_4y-O0w3","wrapper":"kO8iNgD","header":"a1d4E10","hea
 
 const rankIconUrlMap = {
     helloSites: {
-        member: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
-        ambassador: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
-        doctor: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
-        expert: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
-        influencer: () => index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
+        member: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
+        ambassador: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
+        doctor: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
+        expert: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
+        influencer: () => index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
     },
     marryBaby: {
-        member: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
-        ambassador: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
-        doctor: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
-        expert: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
-        influencer: () => index$5.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
+        member: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
+        ambassador: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
+        doctor: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
+        expert: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
+        influencer: () => index$6.CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
     },
 };
 const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
@@ -8437,7 +7525,7 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
         if (themeName === 'marryBaby') {
             return null;
         }
-        return (React__default["default"].createElement(index$a.Button, { color: "tertiary", icon: React__default["default"].createElement("img", { src: index$5.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-logOut.svg'), width: 15, height: 15, loading: "lazy" }), size: "md", onClick: onClickLogout, className: styles$1.logoutButton }, t('userProfile.nav.menu.logout')));
+        return (React__default["default"].createElement(index$a.Button, { color: "tertiary", icon: React__default["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-logOut.svg'), width: 15, height: 15, loading: "lazy" }), size: "md", onClick: onClickLogout, className: styles$1.logoutButton }, t('userProfile.nav.menu.logout')));
     }, [themeName]);
     const push = (link) => {
         if (link.startsWith('http') || link.startsWith('/')) {
@@ -8501,6 +7589,7 @@ exports.BMRCardEmbed = BMRCardEmbed;
 exports.BabyGrowthCardEmbed = BabyGrowthCardEmbed;
 exports.BabyPoopEmbed = BabyPoopEmbed;
 exports.Badge = Badge;
+exports.BmiForm = BmiForm;
 exports.BorderHeading = BorderHeading;
 exports.Breadcrumbs = Breadcrumbs;
 exports.CategoryCard = CategoryCard;
@@ -8513,7 +7602,6 @@ exports.DueDateCardEmbed = DueDateCardEmbed;
 exports.FileDropdown = FileDropdown;
 exports.FixedBottomAdBlock = FixedBottomAdBlock;
 exports.FloatButtonGroup = FloatButtonGroup;
-exports.GenderOptionControl = GenderOptionControl;
 exports.Grid = Grid;
 exports.IconText = IconText;
 exports.MAPPING_CATEGORY_PREMIUM_API_TYPE = MAPPING_CATEGORY_PREMIUM_API_TYPE;
@@ -8540,6 +7628,7 @@ exports.SurveyThankyouCard = SurveyThankyouCard;
 exports.THRCardEmbed = THRCardEmbed;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.ThrForm = ThrForm;
 exports.Toggle = Toggle;
 exports.ToolsBannerCard = ToolsBannerCard;
 exports.UserProfileNavigation = UserProfileNavigation;