@hhgtech/hhg-components 1.29.13 → 1.29.15

package/build/{index-be3ab088.js → index-430d389f.js}

@@ -1,70 +1,71 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-2f6bc47b.js');
-var index_styles = require('./index.styles-d3506089.js');
-var utils = require('./utils-96cc366b.js');
-var index$3 = require('./index-17de9f00.js');
-var index$4 = require('./index-3cb9126e.js');
-var tslib_es6 = require('./tslib.es6-4a65586f.js');
+var index$2 = require('./index-d8356339.js');
+var index_styles = require('./index.styles-358a6fa7.js');
+var utils = require('./utils-af50e5f3.js');
+var index$3 = require('./index-8c59b55a.js');
+var index$4 = require('./index-efccbd0e.js');
+var tslib_es6 = require('./tslib.es6-146cdf4b.js');
 var other = require('@hhgtech/icons/other');
-var index$5 = require('./index-e6f52767.js');
-var index$6 = require('./index-2dea76db.js');
-var theme = require('./theme-3b54ec5b.js');
+var index$5 = require('./index-593699ec.js');
+var index$6 = require('./index-fd34c526.js');
+var theme = require('./theme-949f1110.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
 require('@mantine/dates');
-var index$b = require('./index-2032e587.js');
-var Subot = require('./Subot-c80eaa9a.js');
-require('./useMantineLocale-c3e74e28.js');
-require('./translationsContext-119be95a.js');
+var index$b = require('./index-bb3ab3a9.js');
+var Subot = require('./Subot-a6cccdc3.js');
+require('./useMantineLocale-fbec6417.js');
+require('./translationsContext-d2857902.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-cf4f9fe3.js');
+var index$7 = require('./index-6a70c989.js');
 var styled = require('@emotion/styled');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-6d9485f7.js');
-var index$a = require('./index-d1fd55e1.js');
-var index$9 = require('./index-9190a7d5.js');
+var index$8 = require('./index-a069b0fb.js');
+var index$a = require('./index-79fcd8b9.js');
+var index$9 = require('./index-ff2cf963.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-fd673402.js');
-var useTranslations = require('./useTranslations-700dceda.js');
+var isProduction = require('./isProduction-505f5133.js');
+var useTranslations = require('./useTranslations-105e0a90.js');
 var dateFns = require('date-fns');
 var dayjs = require('dayjs');
-var types = require('./types-ed42d236.js');
-var utils$1 = require('./utils-2608e5ac.js');
-var index$d = require('./index-8216153d.js');
-var index$e = require('./index-5dfdde72.js');
-var index$f = require('./index-0bb74786.js');
-var index$c = require('./index-3dc39fe7.js');
-var index$g = require('./index-ea20167e.js');
+var types = require('./types-130e49a4.js');
+var utils$1 = require('./utils-c375bf37.js');
+var index$d = require('./index-0f593a38.js');
+var index$e = require('./index-ca1c890d.js');
+var index$f = require('./index-69415a4f.js');
+var index$c = require('./index-121cb1e7.js');
+var index$g = require('./index-423ee312.js');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-ab5fcc56.js');
+var useHealthToolCache = require('./useHealthToolCache-bd29093f.js');
 var yup = require('@hookform/resolvers/yup');
-var index$h = require('./index-abb687b1.js');
-var constants = require('./constants-4010d1af.js');
-var index$i = require('./index-f76e7259.js');
-require('./utils-bcc5b10c.js');
-require('./index.styled-4213a558.js');
-require('./index-d972dd22.js');
-var useOutsideClick = require('./useOutsideClick-9a510cd5.js');
+var index$h = require('./index-3b1766eb.js');
+var index$i = require('./index-3cd1d2b5.js');
+var constants = require('./constants-93ab6885.js');
+var index$j = require('./index-5395352b.js');
+require('./utils-04f63d72.js');
+require('./index.styled-843e34c9.js');
+require('./index-6db685bf.js');
+var useOutsideClick = require('./useOutsideClick-bea7c9a9.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var getSocialList = require('./getSocialList-595a7157.js');
+var getSocialList = require('./getSocialList-bf307d99.js');
 var uuid = require('uuid');
-var routing = require('./routing-b9e48b5d.js');
+var routing = require('./routing-479b2c8a.js');
 var form = require('@mantine/form');
-var index$j = require('./index-d07d1be8.js');
+var index$k = require('./index-9f0db240.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$k = require('./index-b1469502.js');
+var index$l = require('./index-61ff51d2.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var cookieHelper = require('./cookieHelper-2cf3ffa0.js');
-var normalizeLink = require('./normalizeLink-e1288bb0.js');
+var cookieHelper = require('./cookieHelper-932412ee.js');
+var normalizeLink = require('./normalizeLink-0f03af41.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -514,7 +515,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$3 = core.createStyles((_theme, {}) => ({
+var useStyles$5 = core.createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -534,7 +535,7 @@ const _Vertical = (_a) => {
     // size = 'lg',
     classNames, styles, unstyled, className } = _a, rest = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
     const { isMobile } = index$3.useScreenSize();
-    const { classes, cx } = useStyles$3(
+    const { classes, cx } = useStyles$5(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1753,7 +1754,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body
 });
 
-var useStyles$2 = core.createStyles((theme) => {
+var useStyles$4 = core.createStyles((theme) => {
     const itemLabelRef = core.getStylesRef('itemLabel');
     return {
         root: {
@@ -1805,7 +1806,7 @@ var useStyles$2 = core.createStyles((theme) => {
  * @deprecated Consider to use mantine
  */
 const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
-    const { classes, cx, theme } = useStyles$2(undefined, { name: 'Tabs', styles });
+    const { classes, cx, theme } = useStyles$4(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = React.useState(initialTab || 0);
     React.useEffect(() => {
         setActiveTab(initialTab);
@@ -4282,7 +4283,7 @@ const BmiForm = ({ value: valueProps, onChange: onChangeProps, onSubmit: onSubmi
                 React__default["default"].createElement(StyledButton$2, { size: "lg", fullWidth: true, className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, type: "submit" }, t('bmi.submit'))))));
 };
 
-const Form = () => {
+const Form$1 = () => {
     const { onSubmit, bmiGenerated, locale, bmiUnit, isSide } = React.useContext(BmiEmbedContext);
     return (React__default["default"].createElement(BmiForm, { onSubmit: onSubmit, bmiGenerated: bmiGenerated, locale: locale, bmiUnit: bmiUnit, isSide: isSide }));
 };
@@ -4306,12 +4307,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["default"].createElement(index$g.Container, null,
-            React__default["default"].createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default["default"].createElement(Form, null)))))));
+            React__default["default"].createElement(StyledContent, { as: "div", "data-is-side": isSide }, bmiLink && React__default["default"].createElement(Form$1, null)))))));
 };
 const BMICardEmbed = _BMICardEmbed;
-BMICardEmbed.Form = Form;
+BMICardEmbed.Form = Form$1;
+
+const BabyGrowthEmbedContext = React.createContext({});
+
+const BabyGrowthFormContext = React.createContext({});
+
+var useStyles$3 = core.createStyles(() => {
+    return {
+        root: {},
+    };
+});
+
+var useStyles$2 = core.createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(8),
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: core.rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: core.rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: core.rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        radioLabel: {
+            fontSize: core.rem(16),
+        },
+        radioRoot: {
+            padding: `${core.rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: core.rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: core.rem(30),
+                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+            },
+        },
+        submitBtn: {},
+        switchRoot: {
+            padding: '16px 0',
+        },
+    };
+});
+
+const HorizonalForm = (_a) => {
+    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations.useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = React.useContext(BabyGrowthFormContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'BabyGrowthForm__HorizonalForm',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
+                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, t('tools.selectBabyGender'))),
+                React__default["default"].createElement(index$3.Radio.Group, { onChange: onChange, value: value },
+                    React__default["default"].createElement(core.Group, { mt: "xs" },
+                        React__default["default"].createElement(index$3.Radio, { value: "boy", label: t('gender.boy'), classNames: {
+                                root: classes.radioRoot,
+                                label: classes.radioLabel,
+                            } }),
+                        React__default["default"].createElement(index$3.Radio, { value: "girl", label: t('gender.girl'), classNames: {
+                                label: classes.radioLabel,
+                            } }))))) }),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => {
+                return (React__default["default"].createElement(core.Box, { className: classes.row },
+                    React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                        React__default["default"].createElement("label", { className: classes.label, htmlFor: "birthday" }, t('babyGrowth.input.birthday'))),
+                    React__default["default"].createElement(index$h.DatePicker, { popoverProps: {
+                            withinPortal: true,
+                        }, className: cx(classes.control, error ? 'error' : ''), onChange: onChange, placeholder: "DD/MM/YYYY", defaultDate: value || new Date(), maxDate: new Date() })));
+            } }),
+        React__default["default"].createElement(core.Box, { className: classes.row },
+            React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                React__default["default"].createElement("label", { className: classes.label }, "BMI")),
+            React__default["default"].createElement(core.Flex, { align: 'center', gap: '8px' },
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement(index$2.Text, { size: "p2" },
+                            React__default["default"].createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
+                            t('babyGrowth.kg.m2')))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                        React__default["default"].createElement(index$9.Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                        React__default["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm'))))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(classes.control, classes.inputWithUnit__wrapper, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                        React__default["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.kg'))),
+                        React__default["default"].createElement(index$9.Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
+                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "head" },
+                        ' ',
+                        t('babyGrowth.headCircumference'))),
+                React__default["default"].createElement(core.Box, { className: cx(classes.inputWithUnit__wrapper, classes.control, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default["default"].createElement(index$9.Input, { className: `${cx(classes.inputWithUnit__input)}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                    React__default["default"].createElement(core.Box, { className: classes.inputWithUnit__unit },
+                        React__default["default"].createElement(index$2.Text, { as: "span", size: "p2", className: classes.inputWithUnit__unitText }, t('babyGrowth.cm')))))) }),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(core.Box, { className: classes.row },
+                React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                    React__default["default"].createElement("label", { className: classes.label, htmlFor: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
+                React__default["default"].createElement(index$h.DatePicker, { popoverProps: {
+                        withinPortal: true,
+                    }, className: classes.control, placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), defaultDate: value || new Date(), onChange: onChange, maxDate: new Date() }))) }),
+        React__default["default"].createElement(core.Box, { className: classes.row },
+            React__default["default"].createElement(index$3.Button, { className: classes.submitBtn, size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))));
+};
 
 const StyledBabyGrowthWrapper$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   padding-block: 40px;
 
   &[data-theme='marryBaby'] {
@@ -4319,11 +4468,6 @@ const StyledBabyGrowthWrapper$1 = styled__default["default"].div `
     padding-top: 12px;
   }
 `;
-const StyledBabyGrowthForm = styled__default["default"].form `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
 const StyledFormControl = styled__default["default"].div `
   display: flex;
   flex-direction: column;
@@ -4350,6 +4494,81 @@ const StyledRow$2 = styled__default["default"].div `
   }
 `;
 
+const VerticalForm = () => {
+    const { t } = useTranslations.useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby, siteType } = React.useContext(BabyGrowthFormContext);
+    return (React__default["default"].createElement(StyledBabyGrowthWrapper$1, { className: "form-wrapper", "data-theme": siteType },
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(index$i.BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
+        siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                                after: new Date(),
+                            }, customInput: (props) => {
+                                return (React__default["default"].createElement(index$9.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__default["default"](value).format(utils$1.DUE_DATE_FORMAT) })));
+                            } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) }))) }),
+            React__default["default"].createElement(StyledRow$2, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
+            React__default["default"].createElement(StyledRow$2, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default["default"].createElement(index$d.DatePicker, { placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
+                                after: new Date(),
+                            }, customInput: (props) => (React__default["default"].createElement(index$9.Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), onChange: onChange }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) }))) }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) }))) }),
+            React__default["default"].createElement(index$3.Button, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
+                        React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
+                    React__default["default"].createElement(index$d.DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                            after: new Date(),
+                        }, customInput: (props) => {
+                            return (React__default["default"].createElement(index$9.Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md", actionIcon: React__default["default"].createElement(other.Calendar, null) }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) })));
+                        } }))) }),
+            React__default["default"].createElement(StyledRow$2, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
+                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
+                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg'))),
+                        React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
+            React__default["default"].createElement(StyledRow$2, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
+                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
+                            React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
+                            React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
+                        React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
+                        React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
+                    React__default["default"].createElement(index$d.DatePicker, { placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
+                            after: new Date(),
+                        }, customInput: (props) => (React__default["default"].createElement(index$9.Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default["default"].createElement(other.Calendar, null) }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) }))) }))) }),
+            React__default["default"].createElement(index$3.Button, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))));
+};
+
 /**
  * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
  * @param {number} num - Number to convert
@@ -4383,10 +4602,13 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
-    const { t } = useTranslations.useTranslations();
-    const _theme = core.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 }, } = reactHookForm.useForm({
         resolver: yup.yupResolver(schema),
         mode: 'onSubmit',
@@ -4411,87 +4633,16 @@ const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
         else
             return '';
     }, []);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledBabyGrowthWrapper$1, { "data-theme": siteType },
-            React__default["default"].createElement(StyledBabyGrowthForm, { onSubmit: handleSubmit(onSubmit, onError) },
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange, value } }) => (React__default["default"].createElement(index$h.BabyGrowthGender, { onChange: onChange, value: value, siteType: siteType })) }),
-                siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                            React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$d.DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                                        after: new Date(),
-                                    }, customInput: (props) => {
-                                        return (React__default["default"].createElement(index$9.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__default["default"](value).format(utils$1.DUE_DATE_FORMAT) })));
-                                    } }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) }))) }),
-                    React__default["default"].createElement(StyledRow$2, null,
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
-                    React__default["default"].createElement(StyledRow$2, null,
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                            ? 'error-input'
-                                            : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                            e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-                    React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                            React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default["default"].createElement(index$d.DatePicker, { placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
-                                        after: new Date(),
-                                    }, customInput: (props) => (React__default["default"].createElement(index$9.Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), onChange: onChange }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) }))) }), actionIcon: React__default["default"].createElement(other.CalendarMB, { size: 32 }) }))) }),
-                    React__default["default"].createElement(index$3.Button, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                            React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                                React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                            React__default["default"].createElement(index$d.DatePicker, { onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
-                                    after: new Date(),
-                                }, customInput: (props) => {
-                                    return (React__default["default"].createElement(index$9.Input, Object.assign({ onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "birthday", size: "md", actionIcon: React__default["default"].createElement(other.Calendar, null) }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) })));
-                                } }))) }),
-                    React__default["default"].createElement(StyledRow$2, null,
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                                    React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                                React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                                    React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg'))),
-                                React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
-                    React__default["default"].createElement(StyledRow$2, null,
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                                    React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                                React__default["default"].createElement(index$9.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                        ? 'error-input'
-                                        : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                        e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                                React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                                    React__default["default"].createElement(index$2.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                                React__default["default"].createElement(index$9.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-                    React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                            React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                                React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                            React__default["default"].createElement(index$d.DatePicker, { placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', onChange: onChange, disabledDays: {
-                                    after: new Date(),
-                                }, customInput: (props) => (React__default["default"].createElement(index$9.Input, Object.assign({ className: (error === null || error === void 0 ? void 0 : error.message) && 'error-input', name: "measurementDate", size: "md", placeholder: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT), onChange: onChange, actionIcon: React__default["default"].createElement(other.Calendar, null) }, props, { value: value && dayjs__default["default"](value).format(utils$1.DUE_DATE_FORMAT) }))) }))) }),
-                    React__default["default"].createElement(index$3.Button, { size: "lg", type: "submit", variant: isMarryBaby ? 'secondary' : 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))))));
+    return (React__default["default"].createElement(BabyGrowthFormContext.Provider, { value: {
+            isEmptyThreeFields,
+            control,
+            currentUrl,
+            isMarryBaby,
+            siteType,
+        } },
+        React__default["default"].createElement(core.Box, { component: "form", onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? (React__default["default"].createElement(VerticalForm, null)) : (React__default["default"].createElement(HorizonalForm, { classNames: {
+                root: classes.root,
+            } })))));
 };
 
 const StyledBabyGrowthWrapper = styled__default["default"].div `
@@ -4539,19 +4690,28 @@ styled__default["default"](ToolsBannerCard) `
   }
 `;
 
-const BabyGrowthCardEmbed = ({ isMobile, className, onSubmit, onError, schema, babyGrowthContent, siteType, }) => {
-    var _a, _b, _c;
-    return (React__default["default"].createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
-        React__default["default"].createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, icon: React__default["default"].createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
-                    index$5.CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
-                link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
-                reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
-                date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
-            }, isMobile: isMobile }),
-        React__default["default"].createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
-            React__default["default"].createElement(StyleForm, { siteType: siteType, schema: schema, className: className, onSubmit: onSubmit, onError: onError }))));
+const Form = (_a) => {
+    var form = tslib_es6.__rest(_a, []);
+    const { formLayout, siteType, schema, onSubmit, onError } = React.useContext(BabyGrowthEmbedContext);
+    return (React__default["default"].createElement(StyleForm, Object.assign({ siteType: siteType, schema: schema, onSubmit: onSubmit, onError: onError, layout: formLayout }, form)));
 };
 
+const _BabyGrowthCardEmbed = ({ isMobile, onSubmit, onError, schema, babyGrowthContent, siteType, children, formLayout, }) => {
+    var _a, _b, _c;
+    return (React__default["default"].createElement(BabyGrowthEmbedContext.Provider, { value: { formLayout, siteType, schema, onSubmit, onError } }, children || (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(StyledContainer$3, { "babyGrowthContent-is-mobile": isMobile, "data-site": siteType },
+            React__default["default"].createElement(ToolsBannerCard, { siteType: siteType, bannerUrl: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerUrlLarge: index$5.CommonGAssets.getAssetPath('embedToolBannerBlue.svg'), bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, icon: React__default["default"].createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+                        index$5.CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
+                    link: (_a = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _a === void 0 ? void 0 : _a.link,
+                    reviewer: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.reviewer.trim(),
+                    date: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
+                }, isMobile: isMobile }),
+            React__default["default"].createElement(StyledBabyGrowthWrapper, { "data-theme": siteType },
+                React__default["default"].createElement(Form, { layout: formLayout })))))));
+};
+const BabyGrowthCardEmbed = _BabyGrowthCardEmbed;
+BabyGrowthCardEmbed.Form = Form;
+
 var useStyles$1 = core.createStyles((theme, params) => {
     const { isMarryBaby, isSide, direction } = params;
     return {
@@ -4972,7 +5132,7 @@ const THRCardEmbed = ({ isSide, locale, thrContent, isMobile, info, inputErrorMe
         React__default["default"].createElement(ToolsBannerCard, { isSide: isSide, icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
                     index$5.CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_a = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name)
                 ? {
-                    link: index$i.formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
+                    link: index$j.formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
                     reviewer: (_b = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
                     date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
                 }
@@ -5436,7 +5596,7 @@ const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormCh
     return (React__default["default"].createElement(StyledContainer$3, { "data-is-side": isSide, "data-site": siteType },
         React__default["default"].createElement(ToolsBannerCard, { siteType: siteType, bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, isEmbeded: true, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
                     index$5.CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
-                link: index$i.formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
+                link: index$j.formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
                 reviewer: (_a = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name,
                 date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
             }, isMobile: isMobile, isSide: isSide }),
@@ -5958,7 +6118,7 @@ const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
             React__default["default"].createElement(index$a.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
 };
 
-const StyledShareDrawer = styled__default["default"](index$h.Drawer) `
+const StyledShareDrawer = styled__default["default"](index$i.Drawer) `
   padding-bottom: 24px;
   .share-container {
     display: flex;
@@ -6844,7 +7004,7 @@ const BannerWithOptions = (props) => {
                             cursor: 'pointer',
                         },
                     } }))))),
-            React__default["default"].createElement(index$3.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$j.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
+            React__default["default"].createElement(index$3.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$k.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
                     const curValues = form$1.getInputProps('bannerOptions').value;
                     saveStep(curValues.join('|'));
                     handleClickOption(curValues.join('|'));
@@ -6943,7 +7103,7 @@ const SideBannerModal = (_a) => {
     const curBannerHeight = (viewportWidth * mobileBannerRatio.height) / mobileBannerRatio.width;
     const minHeightNha = (viewportHeight <= 667 ? 190 : 265) + curBannerHeight + 74;
     const [isFullScreen, setIsFullScreen] = React.useState(false);
-    return (React__default["default"].createElement(index$k.Modal, Object.assign({ styles: (theme) => ({
+    return (React__default["default"].createElement(index$l.Modal, Object.assign({ styles: (theme) => ({
             content: {
                 flex: 'auto',
                 background: 'transparent',