@hhgtech/hhg-components 1.29.41 → 1.29.42

package/build/esm/{index-907973e2.js → index-031da05c.js}

@@ -1,69 +1,69 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-6ee914be.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-8f022797.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-906afdbb.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-4caf11b0.js';
-import { T as Text$1 } from './index-c5ea2b74.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-009190f5.js';
+import { T as Text } from './index-667832a2.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-924b4812.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-21e35369.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, B as Button$1, c as Input$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-ba777d71.js';
+import { T as Text$1 } from './index-7edac771.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-5160724c.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-2b8818a4.js';
-import { H as Heading } from './index-e8c205b6.js';
-import { t as theme } from './theme-809826c6.js';
+import { C as CommonGAssets } from './index-61c6842a.js';
+import { H as Heading } from './index-48d75d5b.js';
+import { t as theme } from './theme-03d89802.js';
 import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-5b9987c3.js';
-import { L as LOCALE } from './index-0473e274.js';
-import './useMantineLocale-6399cf90.js';
-import './translationsContext-4ccd0db6.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-62e5ab51.js';
+import { L as LOCALE } from './index-7dea2608.js';
+import './useMantineLocale-deeb986b.js';
+import './translationsContext-c2547a40.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-c21bddb6.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-b804ef2f.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-a185016f.js';
-import { B as Button } from './index-76270f83.js';
-import { I as Input } from './index-699e76d2.js';
+import { L as Logo } from './index-3fa61807.js';
+import { B as Button } from './index-0d9866a6.js';
+import { I as Input } from './index-7d1d6c79.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-0ea8dd7c.js';
-import { u as useTranslations } from './useTranslations-1b0c4139.js';
+import { i as isProduction } from './isProduction-d3299694.js';
+import { u as useTranslations } from './useTranslations-3a5b70f3.js';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-30a377c9.js';
-import { D as DATE_FORMAT } from './types-afd0ea24.js';
-import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-0fedf1d0.js';
-import { D as DatePicker } from './index-41775c3c.js';
-import { M as MarryBabyText } from './index-6afcded7.js';
-import { S as Slider } from './index-56358aaa.js';
-import { D as Dropdown } from './index-5990d81a.js';
-import { f as formatUserProfileUrl } from './index-14826726.js';
+import { S as StyledTextField, a as DateToInputValue, g as getDueDateConception, A as API_DATE_FORMAT, b as getDueDateIVF, c as getDueDateLastPeriod, d as DueDateCalculatorType, H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, D as Drawer } from './index-4ea3e525.js';
+import { D as DATE_FORMAT } from './types-19e68c3a.js';
+import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-b0732a5b.js';
+import { D as DatePicker } from './index-13578b4b.js';
+import { M as MarryBabyText } from './index-18250b0b.js';
+import { S as Slider } from './index-d73121f4.js';
+import { D as Dropdown } from './index-a367d535.js';
+import { f as formatUserProfileUrl } from './index-b03e8e5c.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-c34387eb.js';
-import { D as DatePicker$1 } from './index-f80ec000.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-807babad.js';
+import { D as DatePicker$1 } from './index-3723a2c1.js';
 import { Controller, useForm } from 'react-hook-form';
-import './constants-d0bd18cb.js';
-import './utils-e177afd9.js';
-import { C as Container } from './index-8843aecd.js';
-import './WhatsApp-3d6500ee.js';
-import './index.styled-1d3fb673.js';
-import './index-5f891b02.js';
-import { a as useOutsideClick } from './useOutsideClick-76556248.js';
+import './constants-0904669a.js';
+import './utils-cf5bebf5.js';
+import { C as Container } from './index-1aeb952a.js';
+import './WhatsApp-85f73100.js';
+import './index.styled-d9fe4f4b.js';
+import './index-eec6203c.js';
+import { a as useOutsideClick } from './useOutsideClick-371cb137.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-41f22902.js';
+import { g as getSocialList } from './getSocialList-77cc5472.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-ca806d7b.js';
-import { I as Icon } from './index-0008f40f.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-e559250d.js';
+import { I as Icon } from './index-f2de848c.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-f628810d.js';
+import { M as Modal } from './index-6201aa22.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-774acadd.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-93f71b8d.js';
+import { g as getCookie } from './cookieHelper-82442bba.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-09b7b732.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -3035,21 +3035,16 @@ const StyledIcon = styled.div `
   }
 `;
 
-const ToolsBannerCard = ({ className, heading, isMobile, bannerUrl, bannerUrlLarge, bannerColor, medicalReview = {
+const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
     link: '#',
     reviewer: '',
     date: '',
-}, icon, style, isEmbeded, isPregTool, }) => {
+}, icon, style, isPregTool, }) => {
     const { t } = useTranslations();
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
     const headingAs = 'h2';
-    const bannerBgUrl = isMobile
-        ? bannerUrl
-        : bannerUrlLarge
-            ? bannerUrlLarge
-            : bannerUrl;
     const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
             a: {
                 textUnderlineOffset: '2px',
@@ -3062,13 +3057,13 @@ const ToolsBannerCard = ({ className, heading, isMobile, bannerUrl, bannerUrlLar
                     date: medicalReview.date,
                 }),
             } }))) : null;
-    return (React__default.createElement(StyledContainer, { className: className, "data-is-mobile": isMobile, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
+    return (React__default.createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
             (isPregTool
-                ? theme.colors.pink[2]
+                ? theme.colors.pink[1]
                 : isMarryBaby
                     ? theme.colors.mb[2]
                     : theme.colors.blue[1]) },
-        React__default.createElement(StyledWrapper$1, { "data-banner-url": bannerBgUrl, "data-is-mobile": isMobile, "data-is-embedded": isEmbeded },
+        React__default.createElement(StyledWrapper$1, null,
             React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24) } },
                 React__default.createElement(Box, null,
                     React__default.createElement(Heading, { tag: "h5", as: headingAs }, heading),
@@ -3893,16 +3888,16 @@ const StyledRadioGroup = styled(RadioGroup) `
   }
 `;
 
-const DueDateCardEmbed = ({ isMobile, locale, onSubmitDueDate, dueDatePageInfo, expertUrl, isSide, siteType, }) => {
+const DueDateCardEmbed = ({ locale, onSubmitDueDate, dueDatePageInfo, expertUrl, isSide, siteType, }) => {
     var _a;
     const { t } = useTranslations();
     return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { isSide: isSide, bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
+        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
                     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,
-            }, isMobile: isMobile }),
+            } }),
         React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "due-date-cal", "data-is-side": isSide },
             React__default.createElement(DueDateCalculator, { siteType: siteType, locale: locale, onSubmitDueDate: onSubmitDueDate, isSide: isSide }))));
 };
@@ -4039,168 +4034,88 @@ const BmiForm = (_a) => {
         } }, formLayout === 'inline' ? (React__default.createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm$1, Object.assign({}, commonProps)))));
 };
 
-const BMICardEmbed = ({ isMobile, onSubmit, bmiContent, bmiGenerated, bmiUnit, locale, formLayout, }) => {
-    var _a, _b, _c;
+const BMICardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { bmiContent, bmiGenerated, bmiUnit, formProps } = _a, props = __rest(_a, ["bmiContent", "bmiGenerated", "bmiUnit", "formProps"]);
     const { t } = useTranslations();
-    return (React__default.createElement(HealthToolCardWrapper, null,
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/bmi.svg'), loading: "lazy" }), heading: t('bmi.heading'), medicalReview: {
-                link: (_a = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                reviewer: (_b = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer,
-                date: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-            }, isMobile: isMobile }),
+                link: (_b = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
+                date: (_d = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, formLayout: formLayout }))));
+            React__default.createElement(BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps)))));
 };
 
-const BabyGrowthCardEmbed = ({ isMobile, onSubmit, onError, schema, babyGrowthContent, formLayout, }) => {
-    var _a, _b, _c;
-    return (React__default.createElement(HealthToolCardWrapper, null,
-        React__default.createElement(HealthToolCardWrapper.Banner, { bannerUrl: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), isEmbeded: true, icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+const BabyGrowthCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { onError, schema, babyGrowthContent, formProps } = _a, props = __rest(_a, ["onError", "schema", "babyGrowthContent", "formProps"]);
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
                     CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
-                link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
-                date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-            }, isMobile: isMobile }),
+                link: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer.trim(),
+                date: (_d = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(BabyGrowthForm, { schema: schema, onSubmit: onSubmit, onError: onError, formLayout: formLayout }))));
+            React__default.createElement(BabyGrowthForm, Object.assign({ schema: schema, onError: onError }, formProps)))));
 };
 
-var useStyles$1 = createStyles((theme, params) => {
-    const { isMarryBaby, isSide, direction } = params;
+var useStyles$1 = createStyles((theme, { hasOnClickFn }) => {
     return {
-        root: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', display: 'flex' }, (direction === 'auto'
-            ? {
-                flexDirection: 'row',
-            }
-            : {
-                flexDirection: direction === 'column' ? 'column-reverse' : 'row',
-            })), { gap: '8px', padding: '16px', borderRadius: isMarryBaby ? '16px' : '8px' }), (!isMarryBaby && {
-            backgroundImage: `url(${CommonGAssets.getAssetPath('bgPattern/baby-poop.svg')})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-        })), { backgroundColor: isMarryBaby
-                ? theme.colors.toneGreen.toString()
-                : theme.colors[theme.primaryColor][0], [theme.fn.smallerThan('sm')]: Object.assign({}, (direction === 'auto'
-                ? {
-                    flexDirection: 'column-reverse',
-                }
-                : {})), [theme.fn.smallerThan('md')]: {
-                borderRadius: isMarryBaby ? '12px' : '8px',
-            }, [theme.fn.largerThan('md')]: { padding: '32px', gap: '20px' } }),
-        inner: {
-            display: 'flex',
-            gap: '16px',
-            flexDirection: 'column',
-            flex: 1,
-        },
-        content: {
+        root: {
+            position: 'relative',
             display: 'flex',
             flexDirection: 'column',
-            gap: '16px',
+            gap: rem(16),
         },
-        reviewText: {
+        sponsorBox: {
             display: 'flex',
-            gap: '4px',
-            a: {
-                color: theme.colors.gray[6],
-                fontWeight: 'bold',
-                '&:not(:hover)': {
-                    textDecoration: 'none',
-                },
-            },
+            gap: rem(12),
+            alignItems: 'center',
+            backgroundColor: theme.colors.neutral[0],
+            border: `1px solid ${theme.colors.neutral[1]}`,
+            borderRadius: rem(4),
+            padding: '4px 12px',
+            alignSelf: 'flex-start',
         },
-        reviewTextIcon: {
-            flexShrink: 0,
-            width: '16px',
-            height: '16px',
-            [theme.fn.largerThan('sm')]: { marginTop: '2px' },
-        },
-        thumbnail: Object.assign(Object.assign({ img: {
-                objectFit: 'contain',
-                objectPosition: 'bottom',
-                width: '100%',
-                height: '100%',
-            } }, (direction === 'column'
-            ? {
-                width: '80%',
-                alignSelf: 'center',
-            }
-            : direction === 'row'
-                ? {
-                    width: '40%',
-                }
-                : {})), { [theme.fn.smallerThan('sm')]: Object.assign({}, (direction === 'auto'
-                ? {
-                    width: '80%',
-                    alignSelf: 'center',
-                }
-                : {})), [theme.fn.largerThan('sm')]: Object.assign({}, (direction === 'auto'
-                ? {
-                    width: '40%',
-                }
-                : {})) }),
-        action: {
-            display: 'flex',
-            justifyContent: isMarryBaby ? 'center' : 'flex-start',
+        sponsorLogo: {
+            maxHeight: rem(32),
         },
         btn: {
-            minWidth: isMarryBaby ? 'auto' : '143px',
-            width: isSide || isMarryBaby ? '100%' : 'auto',
-            [theme.fn.smallerThan('md')]: { width: '100%' },
+            minWidth: rem(180),
+            [theme.fn.largerThan('sm')]: {
+                alignSelf: 'flex-end',
+            },
+            visibility: hasOnClickFn ? 'visible' : 'hidden',
         },
-        sponsorLogo: Object.assign(Object.assign({ position: 'absolute', top: 0, height: 40, objectFit: 'contain', objectPosition: 'top' }, (direction === 'column'
-            ? {
-                left: '16px',
-                height: 40,
-            }
-            : direction === 'row'
-                ? {
-                    height: 50,
-                    right: '40px',
-                }
-                : {
-                    left: '16px',
-                    height: 40,
-                })), { [theme.fn.largerThan('sm')]: Object.assign({}, (direction === 'auto'
-                ? {
-                    height: 50,
-                    right: '40px',
-                    left: 'unset',
-                }
-                : {})) }),
     };
 });
 
-const BabyPoopEmbed = ({ babyPoopPage, onClickFindOut, currentUrl, isSide, direction = 'auto', sponsorLogo, }) => {
+const BabyPoopEmbed = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps"]);
     const { t } = useTranslations();
     const _theme = useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
-    const { classes } = useStyles$1({ isMarryBaby, isSide, direction }, { name: 'BabyPoopEmbed' });
+    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopEmbed' });
     const { reviewedBy, reviewedDate } = babyPoopPage || {};
-    return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement("div", { className: classes.inner },
-            React__default.createElement(Heading, { tag: "h3", as: 'h2', color: !isMarryBaby && '#284A75' }, babyPoopPage.title),
-            React__default.createElement("div", { className: classes.content, "data-is-side": isSide },
-                React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
-                !!reviewedBy && (React__default.createElement("div", { className: classes.reviewText },
-                    React__default.createElement("img", { src: CommonGAssets.getAssetPath('reviewerCheck.svg'), alt: "check", className: classes.reviewTextIcon, loading: "lazy" }),
-                    React__default.createElement(Text, { size: "p4", color: theme.colors.gray600 },
-                        t('categoryPage.info.reviewed'),
-                        "\u00A0",
-                        React__default.createElement("a", { href: reviewedBy.profile_url }, reviewedBy.display_name),
-                        "\u00A0",
-                        t('categoryPage.onDate', { date: reviewedDate || '' })))),
-                React__default.createElement("div", { className: classes.action },
-                    React__default.createElement(Button$1, { className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl, style: {
-                            visibility: Boolean(onClickFindOut) ? 'visible' : 'hidden',
-                        } }, t('babyPoop.findOut'))))),
-        React__default.createElement("div", { className: classes.thumbnail },
-            React__default.createElement("img", { src: isMarryBaby
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: isMarryBaby
                     ? CommonGAssets.getAssetPath('baby-poop.svg')
-                    : babyPoopPage === null || babyPoopPage === void 0 ? void 0 : babyPoopPage.featuredImage, alt: babyPoopPage.title, loading: "lazy" })),
-        sponsorLogo && (React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))));
+                    : babyPoopPage === null || babyPoopPage === void 0 ? void 0 : babyPoopPage.featuredImage, loading: "lazy" }), heading: babyPoopPage.title, medicalReview: {
+                link: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.profileUrl,
+                reviewer: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.displayName,
+                date: reviewedDate,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(Box, { className: classes.root },
+                sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
+                    React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
+                    React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+                React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
+                React__default.createElement(Button$1, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))))));
 };
 
 const ThrFormContext = createContext({});
@@ -4209,7 +4124,7 @@ const DefaultForm = (_a) => {
     var _b;
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
-    const { isAdult, activeValueNote, linkTool, form } = useContext(ThrFormContext);
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
         React__default.createElement(DatePicker$1, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
@@ -4232,14 +4147,14 @@ const DefaultForm = (_a) => {
                     fontSize: '14px',
                 },
             }, withinPortal: true }, form.getInputProps('activeValue')))),
-        React__default.createElement(HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
 };
 
 const InlineForm = (_a) => {
     var _b;
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
-    const { isAdult, activeValueNote, linkTool, form } = useContext(ThrFormContext);
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender') },
@@ -4272,11 +4187,11 @@ const InlineForm = (_a) => {
                         fontSize: '14px',
                     },
                 }, withinPortal: true }, form.getInputProps('activeValue'))))),
-        React__default.createElement(HealthToolFormWrapper.Submit, { type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, t('bmi.submit'))));
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
 };
 
 const ThrForm = (_a) => {
-    var { formLayout, onSubmit, onError } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError"]);
+    var { formLayout, onSubmit, onError, submitProps } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
     const { t, locale } = useTranslations();
     const minRange = useRef(40);
     const { getHealthToolLink } = useHealthToolsCache(locale);
@@ -4409,39 +4324,40 @@ const ThrForm = (_a) => {
             activeValueNote,
             linkTool,
             form,
+            submitProps,
         } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
 };
 
-const THRCardEmbed = ({ thrContent, isMobile, formLayout, onSubmit, }) => {
-    var _a, _b;
+const THRCardEmbed = (_a) => {
+    var _b, _c;
+    var { thrContent, formProps } = _a, props = __rest(_a, ["thrContent", "formProps"]);
     const { t } = useTranslations();
-    return (React__default.createElement(HealthToolCardWrapper, null,
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
-                    CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_a = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name)
+                    CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_b = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name)
                 ? {
                     link: 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,
+                    reviewer: (_c = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _c === void 0 ? void 0 : _c.display_name,
                     date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
                 }
-                : undefined, isMobile: isMobile }),
+                : undefined }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(ThrForm, { onSubmit: onSubmit, formLayout: formLayout }))));
+            React__default.createElement(ThrForm, Object.assign({}, formProps)))));
 };
 
-const BMRCardEmbed = ({ bmrContent, isMobile, onSubmit, formLayout, bmiGenerated, bmiUnit, }) => {
-    var _a, _b, _c;
+const BMRCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { bmrContent, bmiGenerated, bmiUnit, formProps } = _a, props = __rest(_a, ["bmrContent", "bmiGenerated", "bmiUnit", "formProps"]);
     const { t } = useTranslations();
-    return (React__default.createElement(HealthToolCardWrapper, null,
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
         React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
                     CommonGAssets.getAssetPath('health-tools/bmr.svg'), loading: "lazy" }), heading: t('bmr.heading'), medicalReview: {
-                link: (_a = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                reviewer: (_b = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer,
-                date: (_c = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-            }, isMobile: isMobile }),
+                link: (_b = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
+                date: (_d = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
         React__default.createElement(HealthToolCardWrapper.Body, null,
-            React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, bmiUnit: bmiUnit, formLayout: formLayout, submitProps: {
-                    dataEventAction: 'BMR',
-                } }))));
+            React__default.createElement(BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps, { submitProps: Object.assign(Object.assign({}, formProps === null || formProps === void 0 ? void 0 : formProps.submitProps), { dataEventAction: 'BMR' }) })))));
 };
 
 const OvulationForm = ({ locale, onSubmit, isSide, siteType }) => {
@@ -4553,16 +4469,16 @@ const OvulationCalculator = ({ locale, onSubmitOvulation, isSide, siteType, }) =
             }, isSide: isSide })));
 };
 
-const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expertUrl, isSide = false, siteType, isMobile, }) => {
+const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expertUrl, isSide = false, siteType, }) => {
     var _a;
     const { t } = useTranslations();
     return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { bannerUrl: CommonGAssets.getAssetPath('embedToolBannerPink.svg'), bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
+        React__default.createElement(HealthToolCardWrapper.Banner, { color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
                     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,
-            }, isMobile: isMobile }),
+            } }),
         React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "ovulation-cal", "data-is-side": isSide },
             React__default.createElement(OvulationCalculator, { siteType: siteType, locale: locale, onSubmitOvulation: onSubmitOvulation, isSide: isSide }))));
 };
@@ -4660,7 +4576,7 @@ const PWGInputForm = ({ siteType, info, onChange, errorMessage = {}, }) => {
                         } }, t('pregnancyWeightGain.weightInput.desc'))), errorMessage: !isEdit.weight ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', size: "sm", isNumerousKeyboard: true, name: "pwg-weight", value: info === null || info === void 0 ? void 0 : info.weight, onChange: onWeightChanged }))));
 };
 
-const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormChange, info, isMobile, isSide = false, siteType, }) => {
+const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormChange, info, isSide = false, siteType, }) => {
     var _a;
     const { t } = useTranslations();
     const [isTwins, setIsTwins] = useState('notwins');
@@ -4675,12 +4591,12 @@ const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormCh
     const { getHealthToolLink } = useHealthToolsCache(locale);
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE$1.PWG), [getHealthToolLink]);
     return (React__default.createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+        React__default.createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
                     CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
                 link: formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
                 reviewer: (_a = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name,
                 date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
-            }, isMobile: isMobile, isSide: isSide }),
+            } }),
         React__default.createElement(Container, null,
             React__default.createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "pwg-view-mobile", "data-is-side": isSide },
                 siteType !== 'marryBaby' && (React__default.createElement(StyledTwins, { className: "hide-asking-mobile", "data-is-side": isSide },

package/build/esm/{index-76270f83.js → index-0d9866a6.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-009190f5.js';
+import { _ as __rest } from './tslib.es6-5160724c.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-4caf11b0.js';
+import { B as Button$1 } from './index-ba777d71.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-41775c3c.js → index-13578b4b.js}

@@ -1,10 +1,10 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-0008f40f.js';
-import { u as useTranslations } from './useTranslations-1b0c4139.js';
+import { I as Icon } from './index-f2de848c.js';
+import { u as useTranslations } from './useTranslations-3a5b70f3.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-809826c6.js';
+import { t as theme } from './theme-03d89802.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-6afcded7.js → index-18250b0b.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-009190f5.js';
+import { _ as __rest } from './tslib.es6-5160724c.js';
 import React__default from 'react';
-import { S as StyledHeading, a as StyledText } from './index.styled-1d3fb673.js';
+import { S as StyledHeading, a as StyledText } from './index.styled-d9fe4f4b.js';
 
 const MarryBabyHeading = (_a) => {
     var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);

package/build/esm/{index-f80ec000.js → index-3723a2c1.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-009190f5.js';
+import { _ as __rest } from './tslib.es6-5160724c.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-5b9987c3.js';
-import { L as LOCALE } from './index-0473e274.js';
-import { C as CommonGAssets } from './index-2b8818a4.js';
-import { M as MAPPED_LOCALE } from './useMantineLocale-6399cf90.js';
+import { I as ISO_FORMAT } from './index-62e5ab51.js';
+import { L as LOCALE } from './index-7dea2608.js';
+import { C as CommonGAssets } from './index-61c6842a.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-deeb986b.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-a185016f.js → index-3fa61807.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './index-0473e274.js';
-import { C as CommonGAssets } from './index-2b8818a4.js';
-import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-e177afd9.js';
-import { I as ImageWrap } from './index-4caf11b0.js';
+import { L as LOCALE } from './index-7dea2608.js';
+import { C as CommonGAssets } from './index-61c6842a.js';
+import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-cf5bebf5.js';
+import { I as ImageWrap } from './index-ba777d71.js';
 
 const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
     const [seasonalChecks, setSeasonalChecks] = useState({