@hhgtech/hhg-components 1.29.13 → 1.29.14

package/build/esm/{index-11c307f3.js → index-8ad89342.js}

@@ -1,68 +1,68 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-42c96a0d.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$4, T as TextArea, P as PureInput } from './index.styles-3c2a0994.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-577218f8.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-3d204d3f.js';
-import { T as Text$1 } from './index-df4c863a.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-b386827f.js';
+import { T as Text } from './index-e48714bc.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$5, T as TextArea, P as PureInput } from './index.styles-5dccdad7.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-5e9c7d14.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-2e33da66.js';
+import { T as Text$1 } from './index-39387842.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-bb26aeee.js';
 import { Bookmark, CalendarMB, Calendar } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-dffe2a0e.js';
-import { H as Heading } from './index-1bc9e98c.js';
-import { t as theme } from './theme-045f7a4c.js';
+import { C as CommonGAssets } from './index-bf08fbea.js';
+import { H as Heading } from './index-4f1e5c9d.js';
+import { t as theme } from './theme-dde5133f.js';
 import { Box, Radio as Radio$2, Flex, rem, Card, Group, createStyles, Stack, getStylesRef, useMantineTheme, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import 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-5755597c.js';
-import { G as Gender, L as LOCALE } from './Subot-fe0f37a7.js';
-import './useMantineLocale-af6fc69e.js';
-import './translationsContext-10962889.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-31565015.js';
+import { G as Gender, L as LOCALE } from './Subot-d0129b23.js';
+import './useMantineLocale-d720e2e3.js';
+import './translationsContext-936616b7.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-2528eff5.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-74f3e438.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-f4337f9b.js';
-import { B as Button } from './index-78be75b3.js';
-import { I as Input } from './index-b3b2700b.js';
+import { L as Logo } from './index-a12b3ca3.js';
+import { B as Button } from './index-af49b148.js';
+import { I as Input } from './index-2d061fb3.js';
 import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-b948eb3f.js';
-import { u as useTranslations } from './useTranslations-b0e645f7.js';
+import { i as isProduction } from './isProduction-d763a32e.js';
+import { u as useTranslations } from './useTranslations-2cecf45b.js';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { D as DATE_FORMAT } from './types-49152b7b.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-9117c62e.js';
-import { D as DatePicker } from './index-9c3707bf.js';
-import { M as MarryBabyText } from './index-f162b0cf.js';
-import { S as Slider } from './index-f6f3a757.js';
-import { D as Dropdown } from './index-2ea06dfd.js';
-import { C as Container } from './index-f243053f.js';
+import { D as DATE_FORMAT } from './types-8ac9a2b8.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-e1dc7d7c.js';
+import { D as DatePicker } from './index-20d65b0b.js';
+import { M as MarryBabyText } from './index-b1650f4a.js';
+import { S as Slider } from './index-fd7da3a4.js';
+import { D as Dropdown } from './index-c64fc61c.js';
+import { C as Container } from './index-8c56d365.js';
 import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-6b196ff6.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-d81b699d.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { B as BabyGrowthGender, D as Drawer } from './index-007dfdf1.js';
-import { L as Label } from './constants-d85c8175.js';
-import { f as formatUserProfileUrl } from './index-fcd8c82e.js';
-import './utils-22437602.js';
-import './index.styled-12b83f13.js';
-import './index-c1353ae9.js';
-import { a as useOutsideClick } from './useOutsideClick-c4752c33.js';
+import { B as BabyGrowthGender, D as Drawer } from './index-495c3979.js';
+import { L as Label } from './constants-2b1bb3d5.js';
+import { f as formatUserProfileUrl } from './index-e8ee187e.js';
+import './utils-fee79004.js';
+import './index.styled-4e95f87a.js';
+import './index-429a47ff.js';
+import { a as useOutsideClick } from './useOutsideClick-62be5855.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-dac36ade.js';
+import { g as getSocialList } from './getSocialList-c6d6ab1a.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-fa4df5ed.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-d09787e5.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-d3bc362a.js';
+import { I as Icon } from './index-940d69dc.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-fb0015a1.js';
+import { M as Modal } from './index-3a33b451.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-f5c48224.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-35f046f7.js';
+import { g as getCookie } from './cookieHelper-fad0d79a.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-e3d125e4.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -327,7 +327,7 @@ const GenderOptionControl = (_a) => {
         female: 'female',
     } } = _a, radioGroupProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue"]);
     const { t } = useTranslations();
-    const { classes, cx } = useStyles$4(undefined, {
+    const { classes, cx } = useStyles$5(undefined, {
         name: 'GenderOptionControl',
         styles,
     });
@@ -496,7 +496,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$3 = createStyles((_theme, {}) => ({
+var useStyles$4 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -516,7 +516,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = useScreenSize();
-    const { classes, cx } = useStyles$3(
+    const { classes, cx } = useStyles$4(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1735,7 +1735,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body
 });
 
-var useStyles$2 = createStyles((theme) => {
+var useStyles$3 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1787,7 +1787,7 @@ var useStyles$2 = createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$2(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$3(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -4264,7 +4264,7 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
                 React__default.createElement(StyledButton$2, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, t('bmi.submit'))))));
 };
 
-const Form = () => {
+const Form$1 = () => {
     const { onSubmit, bmiGenerated, locale, bmiUnit, isSide } = useContext(BmiEmbedContext);
     return (React__default.createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, isSide: isSide }));
 };
@@ -4288,12 +4288,146 @@ const _BMICardEmbed = ({ isMobile, onSubmit, bmiContent, isSide, bmiGenerated, b
                 date: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
             }, isMobile: isMobile }),
         React__default.createElement(Container, null,
-            React__default.createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default.createElement(Form, null)))))));
+            React__default.createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default.createElement(Form$1, null)))))));
 };
 const BMICardEmbed = _BMICardEmbed;
-BMICardEmbed.Form = Form;
+BMICardEmbed.Form = Form$1;
+
+const BabyGrowthEmbedContext = createContext({});
+
+const BabyGrowthFormContext = createContext({});
+
+var useStyles$2 = createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(16),
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+        },
+        radioLabel: {
+            fontSize: rem(16),
+        },
+        radioRoot: {
+            padding: `${rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+            minWidth: rem(40),
+            marginLeft: rem(10),
+            textAlign: 'center',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: rem(30),
+            },
+        },
+        submitBtn: {},
+    };
+});
+
+const HorizonalForm = () => {
+    const { t } = useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = useContext(BabyGrowthFormContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'BabyGrowthForm__HorizonalForm',
+    });
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
+                React__default.createElement(Radio$1.Group, { onChange: onChange, value: value },
+                    React__default.createElement(Group, { mt: "xs" },
+                        React__default.createElement(Radio$1, { value: "boy", label: t('gender.boy'), classNames: {
+                                root: classes.radioRoot,
+                                label: classes.radioLabel,
+                            } }),
+                        React__default.createElement(Radio$1, { value: "girl", label: t('gender.girl'), classNames: {
+                                label: classes.radioLabel,
+                            } }))))) }),
+        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
+                React__default.createElement(DatePicker, { className: classes.control, onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                        after: new Date(),
+                    }, customInput: (props) => {
+                        return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: `${(error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : ''}`, name: "birthday", size: "md", actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
+                    } }))) }),
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Box, { className: classes.labelWrapper },
+                React__default.createElement("label", { className: classes.label }, t('babyGrowth.babyInfo'))),
+            React__default.createElement(Flex, { align: 'center', gap: '8px' },
+                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(Text, { size: "p2" },
+                            React__default.createElement("span", null, "BMI"),
+                            React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
+                            t('babyGrowth.kg.m2')))) }),
+                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper) },
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
+                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper) },
+                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
+        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "head" },
+                        ' ',
+                        t('babyGrowth.headCircumference'))),
+                React__default.createElement(Box, { className: cx(classes.inputWithUnit__wrapper, classes.control) },
+                    React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                    React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                        React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
+        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
+                React__default.createElement(DatePicker, { className: classes.control, placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
+                        after: new Date(),
+                    }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: `${(error === null || error === void 0 ? void 0 : error.message) && 'error-input'}`, name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }))) }),
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Button$1, { className: classes.submitBtn, size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))));
+};
 
 const StyledBabyGrowthWrapper$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   padding-block: 40px;
 
   &[data-theme='marryBaby'] {
@@ -4301,11 +4435,6 @@ const StyledBabyGrowthWrapper$1 = styled.div `
     padding-top: 12px;
   }
 `;
-const StyledBabyGrowthForm = styled.form `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
 const StyledFormControl = styled.div `
   display: flex;
   flex-direction: column;
@@ -4332,6 +4461,81 @@ const StyledRow$2 = styled.div `
   }
 `;
 
+const VerticalForm = () => {
+    const { t } = useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby, siteType } = useContext(BabyGrowthFormContext);
+    return (React__default.createElement(StyledBabyGrowthWrapper$1, { "data-theme": siteType },
+        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
+        siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
+                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                                after: new Date(),
+                            }, customInput: (props) => {
+                                return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md" }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
+                            } }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) }))) }),
+            React__default.createElement(StyledRow$2, null,
+                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
+            React__default.createElement(StyledRow$2, null,
+                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
+            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
+                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default.createElement(DatePicker, { placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
+                                after: new Date(),
+                            }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) }))) }),
+            React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
+                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
+                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
+                    React__default.createElement(DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                            after: new Date(),
+                        }, customInput: (props) => {
+                            return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md", actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
+                        } }))) }),
+            React__default.createElement(StyledRow$2, null,
+                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
+                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
+                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg'))),
+                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
+            React__default.createElement(StyledRow$2, null,
+                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
+                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
+                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
+                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
+                        React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
+            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
+                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
+                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
+                    React__default.createElement(DatePicker, { placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
+                            after: new Date(),
+                        }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }))) }),
+            React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))));
+};
+
 /**
  * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
  * @param {number} num - Number to convert
@@ -4365,8 +4569,7 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
-    const { t } = useTranslations();
+const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', }) => {
     const _theme = useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
     const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = useForm({
@@ -4393,87 +4596,14 @@ const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
         else
             return '';
     }, []);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledBabyGrowthWrapper$1, { "data-theme": siteType },
-            React__default.createElement(StyledBabyGrowthForm, { onSubmit: handleSubmit(onSubmit, onError) },
-                React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
-                siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                            React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                                        after: new Date(),
-                                    }, customInput: (props) => {
-                                        return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md" }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
-                                    } }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) }))) }),
-                    React__default.createElement(StyledRow$2, null,
-                        React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                        React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
-                    React__default.createElement(StyledRow$2, null,
-                        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                        React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-                    React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                            React__default.createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default.createElement(DatePicker, { placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
-                                        after: new Date(),
-                                    }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }), actionIcon: React__default.createElement(CalendarMB, { size: 32 }) }))) }),
-                    React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                            React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                                React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                            React__default.createElement(DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                                    after: new Date(),
-                                }, customInput: (props) => {
-                                    return (React__default.createElement(Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md", actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) })));
-                                } }))) }),
-                    React__default.createElement(StyledRow$2, null,
-                        React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                                    React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                                React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                        React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                                    React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg'))),
-                                React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
-                    React__default.createElement(StyledRow$2, null,
-                        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                                    React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                                React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                        React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                                React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                                    React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                                    React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                                React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-                    React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                            React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                                React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                            React__default.createElement(DatePicker, { placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
-                                    after: new Date(),
-                                }, customInput: (props) => (React__default.createElement(Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default.createElement(Calendar, null) }, props, { value: value && dayjs(value).format(DUE_DATE_FORMAT) }))) }))) }),
-                    React__default.createElement(Button$1, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))))));
+    return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
+            isEmptyThreeFields,
+            control,
+            currentUrl,
+            isMarryBaby,
+            siteType,
+        } },
+        React__default.createElement("form", { onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? React__default.createElement(VerticalForm, null) : React__default.createElement(HorizonalForm, null))));
 };
 
 const StyledBabyGrowthWrapper = styled.div `
@@ -4521,19 +4651,28 @@ styled(ToolsBannerCard) `
   }
 `;
 
-const BabyGrowthCardEmbed = ({ isMobile, className, onSubmit, onError, schema, babyGrowthContent, siteType, }) => {
-    var _a, _b, _c;
-    return (React__default.createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
-        React__default.createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
-                    CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
-                link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
-                date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-            }, isMobile: isMobile }),
-        React__default.createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
-            React__default.createElement(StyleForm, { siteType: siteType, schema: schema, className: className, onSubmit: onSubmit, onError: onError }))));
+const Form = (_a) => {
+    var form = __rest(_a, []);
+    const { formLayout, siteType, schema, onSubmit, onError } = useContext(BabyGrowthEmbedContext);
+    return (React__default.createElement(StyleForm, Object.assign({ siteType: siteType, schema: schema, onSubmit: onSubmit, onError: onError, layout: formLayout }, form)));
 };
 
+const _BabyGrowthCardEmbed = ({ isMobile, onSubmit, onError, schema, babyGrowthContent, siteType, children, formLayout, }) => {
+    var _a, _b, _c;
+    return (React__default.createElement(BabyGrowthEmbedContext.Provider, { value: { formLayout, siteType, schema, onSubmit, onError } }, children || (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
+            React__default.createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.mbColors.mint, isEmbeded: true, icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+                        CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
+                    link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
+                    reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
+                    date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
+                }, isMobile: isMobile }),
+            React__default.createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
+                React__default.createElement(Form, { layout: formLayout })))))));
+};
+const BabyGrowthCardEmbed = _BabyGrowthCardEmbed;
+BabyGrowthCardEmbed.Form = Form;
+
 var useStyles$1 = createStyles((theme, params) => {
     const { isMarryBaby, isSide, direction } = params;
     return {

package/build/esm/{index-d3bc362a.js → index-940d69dc.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-b386827f.js';
+import { _ as __rest } from './tslib.es6-bb26aeee.js';
 import React__default from 'react';
-import { t as theme } from './theme-045f7a4c.js';
-import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-9117c62e.js';
+import { t as theme } from './theme-dde5133f.js';
+import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-e1dc7d7c.js';
 
 const ArrowRightTail = (_a) => {
     var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);

package/build/esm/{index-f4337f9b.js → index-a12b3ca3.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Subot-fe0f37a7.js';
-import { C as CommonGAssets } from './index-dffe2a0e.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-22437602.js';
-import { I as ImageWrap } from './index-3d204d3f.js';
+import { L as LOCALE } from './Subot-d0129b23.js';
+import { C as CommonGAssets } from './index-bf08fbea.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-fee79004.js';
+import { I as ImageWrap } from './index-2e33da66.js';
 
 const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
     const [seasonalChecks, setSeasonalChecks] = useState({