@hhgtech/hhg-components 1.29.449 → 1.29.450

package/build/{index-b1449c55.js → index-b0c2adba.js}

@@ -1,26 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
 var React = require('react');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-dcb0cf9f.js');
-var index = require('./index-2f23d479.js');
-var index$5 = require('./index-d7818ca5.js');
-var constants = require('./constants-ffa1b205.js');
-var index$2 = require('./index-7fed156e.js');
-var index$4 = require('./index-7481f662.js');
-var index$3 = require('./index-8b68f0a5.js');
-require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
+var useHealthToolCache = require('./useHealthToolCache-3c99a9ba.js');
+var index = require('./index-cd21f814.js');
+var index$5 = require('./index-134c792d.js');
+var constants = require('./constants-087ac86c.js');
+var index$2 = require('./index-696a1e19.js');
+var index$4 = require('./index-a6aadc84.js');
+var index$3 = require('./index-b595c075.js');
+require('./index-32116925.js');
+require('./index-9496500d.js');
 require('@mantine/core');
-require('./index.styles-61ce234f.js');
+require('./index-a8da1594.js');
+require('./index.styles-adef4db1.js');
 require('@mantine/hooks');
-require('./index-18acca73.js');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-require('./index-2d74352f.js');
-var index$1 = require('./index-5322f269.js');
+require('./index-4f34d088.js');
+require('./utils-46f1609b.js');
+require('./index-108141c3.js');
+require('./index-9add285b.js');
+var context = require('./context-b7e4de87.js');
+var index$1 = require('./index-cedba3bc.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -34,29 +35,35 @@ const DefaultForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
-        React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
-                withinPortal: true,
-            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
-        React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
-                content: '60',
-            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
-                rightSection: {
-                    width: 'auto',
-                },
-            }) })),
-        isAdult && (React__default["default"].createElement(index$4.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                value: option.value,
-                label: option.label,
-            })), styles: {
-                item: {
-                    whiteSpace: 'nowrap',
-                    padding: '10px 12px',
-                    fontSize: '14px',
-                },
-            }, withinPortal: true }, form.getInputProps('activeValue')))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, label: t('targetHeartRate.ageInput'), maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                    content: '60',
+                }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                    rightSection: {
+                        width: 'auto',
+                    },
+                }) }))),
+        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const InlineForm = (_a) => {
@@ -64,6 +71,7 @@ const InlineForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
@@ -85,18 +93,20 @@ const InlineForm = (_a) => {
                         },
                     }) }))),
             form.errors.heartRate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
-        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
-            React__default["default"].createElement(index$4.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                    value: option.value,
-                    label: option.label,
-                })), styles: {
-                    item: {
-                        whiteSpace: 'nowrap',
-                        padding: '10px 12px',
-                        fontSize: '14px',
-                    },
-                }, withinPortal: true }, form.getInputProps('activeValue'))))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+                React__default["default"].createElement(index$4.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                        value: option.value,
+                        label: option.label,
+                    })), styles: {
+                        item: {
+                            whiteSpace: 'nowrap',
+                            padding: '10px 12px',
+                            fontSize: '14px',
+                        },
+                    }, withinPortal: true }, form.getInputProps('activeValue')))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const ThrForm = (_a) => {

package/build/{index-8b68f0a5.js → index-b595c075.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
-var index = require('./index-2d74352f.js');
-require('./index-fd836996.js');
-var index$2 = require('./index-d7818ca5.js');
-var index$1 = require('./index-18acca73.js');
-var Locale = require('./Locale-21703205.js');
+var index = require('./index-9add285b.js');
+require('./index-d7cb03d8.js');
+var index$2 = require('./index-134c792d.js');
+var index$1 = require('./index-4f34d088.js');
+var Locale = require('./Locale-6e02741f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-b89b06df.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
+var React = require('react');
+var core = require('@mantine/core');
+var other = require('@hhgtech/icons/other');
+require('./index-a6aadc84.js');
+require('@mantine/dates');
+require('./index-9add285b.js');
+require('./index-d7cb03d8.js');
+require('./index-134c792d.js');
+require('./index-4f34d088.js');
+var index$1 = require('./index-32116925.js');
+require('./index-9496500d.js');
+var index$2 = require('./index-a8da1594.js');
+require('./index.styles-adef4db1.js');
+var index = require('./index-cd21f814.js');
+require('@mantine/hooks');
+var utils = require('./utils-46f1609b.js');
+require('./index-108141c3.js');
+var context = require('./context-b7e4de87.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: core.rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+    },
+    container: {
+        width: '100%',
+        backgroundColor: bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]),
+        position: 'relative',
+        display: 'flex',
+        gap: 24,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [utils.MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [utils.MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [utils.MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: core.rem(-50),
+                        bottom: core.rem(-20),
+                        width: core.rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: core.rem(-20),
+                        [utils.MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: core.rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: core.rem(32),
+            img: {
+                width: core.rem(32),
+                height: core.rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? core.rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: core.rem(80),
+        height: core.rem(80),
+        borderRadius: '50%',
+        backgroundColor: '#fff',
+        flexShrink: 0,
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        [theme.fn.smallerThan('sm')]: {
+            width: core.rem(64),
+            height: core.rem(64),
+            img: {
+                maxWidth: core.rem(40),
+                maxHeight: core.rem(40),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = index.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
+        name: 'ToolsBannerCard',
+        styles,
+        classNames,
+    });
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
+            React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
+                React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default["default"].createElement(other.RedCross, { size: 14 })))),
+        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                __html: t('toolPage.toolReviewer', {
+                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
+                    date: medicalReview.date,
+                }),
+            } }))) : null;
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
+            React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle)),
+        React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = core.createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
+    const { isPregTool } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
+            container: wrapperClasses.bannerWrapper,
+            heading: wrapperClasses.bannerHeading,
+            reviewText: wrapperClasses.bannerReviewText,
+        }, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = core.createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        })), (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+        })),
+        submitBtn: {},
+        bodyWrapper: {},
+        scrollAreaWrapper: {},
+        bannerWrapper: Object.assign({}, (variant === 'gray' && {
+            backgroundColor: 'transparent',
+            padding: `${core.rem(16)} ${core.rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(20),
+            lineHeight: core.rem(28),
+            fontWeight: index$2.FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(17),
+                lineHeight: core.rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(14),
+            lineHeight: core.rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(12),
+                lineHeight: core.rem(18),
+            },
+        })),
+        submitWrapper: Object.assign({ [theme.fn.smallerThan('sm')]: {
+                button: {
+                    width: '100%',
+                },
+            }, [theme.fn.largerThan('sm')]: {
+                textAlign: 'right',
+            } }, (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+            button: {
+                marginTop: 10,
+            },
+        })),
+        newsletterBlock: {},
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+exports.HealthToolCardWrapper = HealthToolCardWrapper;
+exports.ToolsBannerCard = ToolsBannerCard;

package/build/{index-f335bea0.js → index-c0fd5016.js}

@@ -1,24 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-7481f662.js');
-var index$4 = require('./index-8b68f0a5.js');
-var index$5 = require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
-var index = require('./index-2f23d479.js');
+var index$3 = require('./index-a6aadc84.js');
+var index$4 = require('./index-b595c075.js');
+var index$5 = require('./index-32116925.js');
+require('./index-9496500d.js');
+require('./index-a8da1594.js');
+require('./index.styles-adef4db1.js');
+var index = require('./index-cd21f814.js');
 require('@mantine/hooks');
-require('./index-18acca73.js');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var constants = require('./constants-ab886302.js');
-var index$1 = require('./index-5322f269.js');
-var index$2 = require('./index-7fed156e.js');
-var Locale = require('./Locale-21703205.js');
+require('./index-4f34d088.js');
+require('./utils-46f1609b.js');
+require('./index-108141c3.js');
+var context = require('./context-b7e4de87.js');
+var constants = require('./constants-c09c6304.js');
+var index$1 = require('./index-cedba3bc.js');
+var index$2 = require('./index-696a1e19.js');
+var Locale = require('./Locale-6e02741f.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -39,6 +40,7 @@ var useStyles$1 = core.createStyles((theme) => {
 const DefaultForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
     const { classes } = useStyles$1(undefined, {
         name: 'BabyGrowthForm__DefaultForm',
@@ -66,39 +68,43 @@ const DefaultForm = (_a) => {
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.height'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.weight'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.head'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.height'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.weight'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.kg'),
+                        ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.head'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } })))),
         form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$3.Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 var useStyles = core.createStyles((theme) => {
@@ -157,6 +163,7 @@ const InlineForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const theme = core.useMantineTheme();
     const { classes } = useStyles(undefined, {
         name: 'BabyGrowthForm__InlineForm',
@@ -217,7 +224,8 @@ const InlineForm = (_a) => {
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: core.clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 const MbLayout = (_a) => {

package/build/{index-8b77ee34.js → index-c967cc36.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-b1020b33.js');
+var index = require('./index-e2b457dc.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-d9dc3d04.js → index-cc033f1d.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-1af0eb18.js');
 var React = require('react');
 var miscTheme = require('./miscTheme.js');
-var WhatsApp = require('./WhatsApp-4f269b5e.js');
-var Spinner = require('./Spinner-0e5580dd.js');
+var WhatsApp = require('./WhatsApp-2996e7b1.js');
+var Spinner = require('./Spinner-189a4509.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }