@hhgtech/hhg-components 1.29.13 → 1.29.14

package/build/{index-be3ab088.js → index-60365516.js}

@@ -1,70 +1,70 @@
 '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-fb59d3e1.js');
+var index_styles = require('./index.styles-d0a4abf7.js');
+var utils = require('./utils-8dff9cbe.js');
+var index$3 = require('./index-b7af06c0.js');
+var index$4 = require('./index-a34eab5f.js');
+var tslib_es6 = require('./tslib.es6-a3da506b.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-09a0d3b4.js');
+var index$6 = require('./index-72453ef3.js');
+var theme = require('./theme-982fb303.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-aaa645ed.js');
+var Subot = require('./Subot-241b89e0.js');
+require('./useMantineLocale-bdad35ac.js');
+require('./translationsContext-7443463a.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-cf4f9fe3.js');
+var index$7 = require('./index-1371c158.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-c950a7e5.js');
+var index$a = require('./index-b8af7c59.js');
+var index$9 = require('./index-ea0b6421.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-3313e9c8.js');
+var useTranslations = require('./useTranslations-ef9b0bba.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-d4ad26bd.js');
+var utils$1 = require('./utils-b91ad597.js');
+var index$d = require('./index-2cb6f2ec.js');
+var index$e = require('./index-50b78bf8.js');
+var index$f = require('./index-0e8dd968.js');
+var index$c = require('./index-d3f7c20c.js');
+var index$g = require('./index-94084c0f.js');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-ab5fcc56.js');
+var useHealthToolCache = require('./useHealthToolCache-ae2cfc7e.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-d255b8ec.js');
+var constants = require('./constants-44f09550.js');
+var index$i = require('./index-d7f814d2.js');
+require('./utils-926599a5.js');
+require('./index.styled-1ea0e8b5.js');
+require('./index-26e225cb.js');
+var useOutsideClick = require('./useOutsideClick-08f8e841.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-3faf264c.js');
 var uuid = require('uuid');
-var routing = require('./routing-b9e48b5d.js');
+var routing = require('./routing-3a77c9e9.js');
 var form = require('@mantine/form');
-var index$j = require('./index-d07d1be8.js');
+var index$j = require('./index-1c5dc79a.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$k = require('./index-b1469502.js');
+var index$k = require('./index-b22d1226.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-8f3b2717.js');
+var normalizeLink = require('./normalizeLink-8533ee3c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -514,7 +514,7 @@ const _Horizontal = (_a) => {
 
 // MyComponent.styles.ts
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$3 = core.createStyles((_theme, {}) => ({
+var useStyles$4 = core.createStyles((_theme, {}) => ({
     // add all styles as usual
     root: {},
     image: {},
@@ -534,7 +534,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$4(
     // First argument of useStyles is styles params
     {}, 
     // Second argument is responsible for styles api integration
@@ -1753,7 +1753,7 @@ var index = /*#__PURE__*/Object.freeze({
   Body: Body
 });
 
-var useStyles$2 = core.createStyles((theme) => {
+var useStyles$3 = core.createStyles((theme) => {
     const itemLabelRef = core.getStylesRef('itemLabel');
     return {
         root: {
@@ -1805,7 +1805,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$3(undefined, { name: 'Tabs', styles });
     const [activeTab, setActiveTab] = React.useState(initialTab || 0);
     React.useEffect(() => {
         setActiveTab(initialTab);
@@ -4282,7 +4282,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 +4306,146 @@ const _BMICardEmbed = ({ isMobile, onSubmit, bmiContent, isSide, bmiGenerated, b
                 date: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.date,
             }, isMobile: isMobile }),
         React__default["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$2 = core.createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(16),
+        },
+        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,
+        },
+        radioLabel: {
+            fontSize: core.rem(16),
+        },
+        radioRoot: {
+            padding: `${core.rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+            minWidth: core.rem(40),
+            marginLeft: core.rem(10),
+            textAlign: 'center',
+        },
+        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),
+            },
+        },
+        submitBtn: {},
+    };
+});
+
+const HorizonalForm = () => {
+    const { t } = useTranslations.useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, isMarryBaby } = React.useContext(BabyGrowthFormContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'BabyGrowthForm__HorizonalForm',
+    });
+    return (React__default["default"].createElement(core.Box, { className: classes.root },
+        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 } }) => (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$d.DatePicker, { className: classes.control, onChange: onChange, placeholder: "dd/mm/yyyy", pickedDate: value || new Date(), displayDateFormat: 'dd/MM/yyyy', disabledDays: {
+                        after: new Date(),
+                    }, customInput: (props) => {
+                        return (React__default["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(core.Box, { className: classes.row },
+            React__default["default"].createElement(core.Box, { className: classes.labelWrapper },
+                React__default["default"].createElement("label", { className: classes.label }, t('babyGrowth.babyInfo'))),
+            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", null, "BMI"),
+                            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) },
+                        React__default["default"].createElement(index$9.Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                        React__default["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) },
+                        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, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }))),
+        React__default["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) },
+                    React__default["default"].createElement(index$9.Input, { className: `${cx(classes.inputWithUnit__input, isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '')}`, name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }),
+                    React__default["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 }, 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: "measurementDate" }, t('babyGrowth.input.measurementDate'))),
+                React__default["default"].createElement(index$d.DatePicker, { className: classes.control, 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(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 +4453,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 +4479,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, { "data-theme": siteType },
+        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'))))));
+};
+
 /**
  * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
  * @param {number} num - Number to convert
@@ -4383,8 +4587,7 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
-const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, }) => {
-    const { t } = useTranslations.useTranslations();
+const BabyGrowthForm = ({ onSubmit, onError, schema, siteType, layout = 'vertical', }) => {
     const _theme = core.useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
     const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = reactHookForm.useForm({
@@ -4411,87 +4614,14 @@ 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("form", { onSubmit: handleSubmit(onSubmit, onError) }, layout === 'vertical' ? React__default["default"].createElement(VerticalForm, null) : React__default["default"].createElement(HorizonalForm, null))));
 };
 
 const StyledBabyGrowthWrapper = styled__default["default"].div `
@@ -4539,19 +4669,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 {

package/build/{index-2dea76db.js → index-72453ef3.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-4a65586f.js');
+var tslib_es6 = require('./tslib.es6-a3da506b.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-2f6bc47b.js');
+var index = require('./index-fb59d3e1.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }