@hhgtech/hhg-components 1.29.13 → 1.29.15

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

@@ -1,68 +1,69 @@
 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-7f4204a4.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$6, T as TextArea, P as PureInput } from './index.styles-d2c0640d.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-963ef4e6.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-60ea9a7a.js';
+import { T as Text$1 } from './index-804a18b2.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2a8fd6d5.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-a948d6c4.js';
+import { H as Heading } from './index-e27f0cf4.js';
+import { t as theme } from './theme-5568fb17.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-3af4f7ca.js';
+import { G as Gender, L as LOCALE } from './Subot-ed487269.js';
+import './useMantineLocale-e4fd9737.js';
+import './translationsContext-3053e922.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-d6434646.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-9bf12571.js';
+import { B as Button } from './index-da43c9f8.js';
+import { I as Input } from './index-430150e2.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-ae7230d2.js';
+import { u as useTranslations } from './useTranslations-3600eb6d.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-a4c01ee9.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-a016fae8.js';
+import { D as DatePicker } from './index-5e391b96.js';
+import { M as MarryBabyText } from './index-37c2231f.js';
+import { S as Slider } from './index-18797474.js';
+import { D as Dropdown } from './index-6a498cd9.js';
+import { C as Container } from './index-e2dc8f25.js';
 import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-6b196ff6.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-020638e1.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 { D as DatePicker$1 } from './index-3835adb0.js';
+import { B as BabyGrowthGender, D as Drawer } from './index-f693859c.js';
+import { L as Label } from './constants-aec7f25a.js';
+import { f as formatUserProfileUrl } from './index-9a94d3f9.js';
+import './utils-805b54aa.js';
+import './index.styled-2ea5b0b5.js';
+import './index-89446d8e.js';
+import { a as useOutsideClick } from './useOutsideClick-0fde0c67.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-18e9f5cd.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-a1836539.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-d3bc362a.js';
+import { I as Icon } from './index-830957a9.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-fb0015a1.js';
+import { M as Modal } from './index-ce378796.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-553ac740.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-9b736530.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -327,7 +328,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$6(undefined, {
         name: 'GenderOptionControl',
         styles,
     });
@@ -496,7 +497,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$3 = createStyles((_theme, {}) => ({
+var useStyles$5 = createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -516,7 +517,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$5(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1735,7 +1736,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body
 });
 
-var useStyles$2 = createStyles((theme) => {
+var useStyles$4 = createStyles((theme) => {
     const itemLabelRef = getStylesRef('itemLabel');
     return {
         root: {
@@ -1787,7 +1788,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$4(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = useState(initialTab || 0);
     useEffect(() => {
         setActiveTab(initialTab);
@@ -4264,7 +4265,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 +4289,160 @@ 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$3 = createStyles(() => {
+    return {
+        root: {},
+    };
+});
+
+var useStyles$2 = createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        radioLabel: {
+            fontSize: rem(16),
+        },
+        radioRoot: {
+            padding: `${rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: rem(30),
+                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+            },
+        },
+        submitBtn: {},
+        switchRoot: {
+            padding: '16px 0',
+        },
+    };
+});
+
+const HorizonalForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = useContext(BabyGrowthFormContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'BabyGrowthForm__HorizonalForm',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
+        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
+                React__default.createElement(Radio$1.Group, { onChange: onChange, value: value },
+                    React__default.createElement(Group, { mt: "xs" },
+                        React__default.createElement(Radio$1, { value: "boy", label: t('gender.boy'), classNames: {
+                                root: classes.radioRoot,
+                                label: classes.radioLabel,
+                            } }),
+                        React__default.createElement(Radio$1, { value: "girl", label: t('gender.girl'), classNames: {
+                                label: classes.radioLabel,
+                            } }))))) }),
+        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => {
+                return (React__default.createElement(Box, { className: classes.row },
+                    React__default.createElement(Box, { className: classes.labelWrapper },
+                        React__default.createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
+                    React__default.createElement(DatePicker$1, { popoverProps: {
+                            withinPortal: true,
+                        }, className: cx(classes.control, error ? 'error' : ''), onChange: onChange, placeholder: "DD/MM/YYYY", defaultDate: value || new Date(), maxDate: new Date() })));
+            } }),
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Box, { className: classes.labelWrapper },
+                React__default.createElement("label", { className: classes.label }, "BMI")),
+            React__default.createElement(Flex, { align: 'center', gap: '8px' },
+                React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(Text, { size: "p2" },
+                            React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
+                            t('babyGrowth.kg.m2')))) }),
+                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
+                React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                        React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                            React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
+                        React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
+        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "head" },
+                        ' ',
+                        t('babyGrowth.headCircumference'))),
+                React__default.createElement(Box, { className: cx(classes.inputWithUnit__wrapper, classes.control, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default.createElement(Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                    React__default.createElement(Box, { className: classes.inputWithUnit__unit },
+                        React__default.createElement(Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
+        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value } }) => (React__default.createElement(Box, { className: classes.row },
+                React__default.createElement(Box, { className: classes.labelWrapper },
+                    React__default.createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
+                React__default.createElement(DatePicker$1, { popoverProps: {
+                        withinPortal: true,
+                    }, className: classes.control, placeholder: value && dayjs(value).format(DUE_DATE_FORMAT), defaultDate: value || new Date(), onChange: onChange, maxDate: new Date() }))) }),
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Button$1, { className: classes.submitBtn, size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))));
+};
 
 const StyledBabyGrowthWrapper$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   padding-block: 40px;
 
   &[data-theme='marryBaby'] {
@@ -4301,11 +4450,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 +4476,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, { className: "form-wrapper", "data-theme": siteType },
+        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default.createElement(BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
+        siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
+                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker, { 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,10 +4584,13 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
-    const { t } = useTranslations();
-    const _theme = useMantineTheme();
-    const isMarryBaby = _theme.other.template === 'mb';
+const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', styles, classNames, }) => {
+    const { classes, theme } = useStyles$3(undefined, {
+        name: 'BabyGrowthForm',
+        styles,
+        classNames,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
     const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = useForm({
         resolver: yupResolver(schema),
         mode: 'onSubmit',
@@ -4393,87 +4615,16 @@ 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(Box, { component: "form", onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? (React__default.createElement(VerticalForm, null)) : (React__default.createElement(HorizonalForm, { classNames: {
+                root: classes.root,
+            } })))));
 };
 
 const StyledBabyGrowthWrapper = styled.div `
@@ -4521,19 +4672,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 {