@hhgtech/hhg-components 1.29.60 → 1.29.62

package/build/{index-912f63c7.js → index-5ba2dbd8.js}

@@ -1,66 +1,66 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-ef4a6ca2.js');
-var index_styles = require('./index.styles-eae61260.js');
-var utils = require('./utils-f2c05a1a.js');
-var index$3 = require('./index-657a7517.js');
-var index$4 = require('./index-718007fe.js');
-var tslib_es6 = require('./tslib.es6-0b7ef9db.js');
+var index$2 = require('./index-d10c16ae.js');
+var index_styles = require('./index.styles-ee913855.js');
+var utils = require('./utils-9d404b9b.js');
+var index$3 = require('./index-fc7a35e4.js');
+var index$4 = require('./index-ab46b7b1.js');
+var tslib_es6 = require('./tslib.es6-c96f77e2.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-9b450bd9.js');
-var index$5 = require('./index-f78158ab.js');
-var theme = require('./theme-81d045c1.js');
+var index$6 = require('./index-c366417f.js');
+var index$5 = require('./index-98e609f3.js');
+var theme = require('./theme-991e77d4.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
 require('@mantine/dates');
-var index$b = require('./index-6b4c9dee.js');
-var index$g = require('./index-96e1e9c5.js');
-require('./useMantineLocale-fabf9527.js');
-require('./translationsContext-328d6aef.js');
+var index$b = require('./index-7611f400.js');
+var index$g = require('./index-ac7aa0ce.js');
+require('./useMantineLocale-e18d4ed6.js');
+require('./translationsContext-2a1e6e04.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-a2f76563.js');
+var index$7 = require('./index-620454c4.js');
 var styled = require('@emotion/styled');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-29075b41.js');
-var index$a = require('./index-9dab6935.js');
-var index$9 = require('./index-dd4fc7ca.js');
+var index$8 = require('./index-9ace28d8.js');
+var index$a = require('./index-306bea55.js');
+var index$9 = require('./index-b9268074.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-4285f612.js');
-var useTranslations = require('./useTranslations-1ad80d77.js');
+var isProduction = require('./isProduction-5aa2ebcc.js');
+var useTranslations = require('./useTranslations-ff8010a9.js');
 var dateFns = require('date-fns');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index$c = require('./index-f952f896.js');
-var index$d = require('./index-d2a52817.js');
-var index$e = require('./index-66fc5445.js');
-var useHealthToolCache = require('./useHealthToolCache-07d45a33.js');
-var utils$1 = require('./utils-b18babcf.js');
+var index$c = require('./index-ea4553c5.js');
+var index$d = require('./index-9c927505.js');
+var index$e = require('./index-349048ed.js');
+var useHealthToolCache = require('./useHealthToolCache-37aad87d.js');
+var utils$1 = require('./utils-a1c4c7f3.js');
 var reactHookForm = require('react-hook-form');
-require('./constants-1c3bb3f1.js');
-require('./utils-1614f35c.js');
-require('./WhatsApp-88149661.js');
-require('./index.styled-2168ca1e.js');
-require('./index-490e0b0f.js');
-var useOutsideClick = require('./useOutsideClick-42e2d1b8.js');
+require('./constants-a454b425.js');
+require('./utils-ba634fc8.js');
+require('./WhatsApp-8ff330e4.js');
+require('./index.styled-8e2e9812.js');
+require('./index-967e63e9.js');
+var useOutsideClick = require('./useOutsideClick-75ea269b.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 index$f = require('./index-31e590ef.js');
-var getSocialList = require('./getSocialList-b56e3b81.js');
+var index$f = require('./index-75cf4571.js');
+var getSocialList = require('./getSocialList-4bd2da4c.js');
 var uuid = require('uuid');
-var routing = require('./routing-c369aff5.js');
-var index$h = require('./index-f658f864.js');
+var routing = require('./routing-283c0157.js');
+var index$h = require('./index-d701f2f0.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$i = require('./index-7872bdc8.js');
+var index$i = require('./index-a11dbe7a.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var cookieHelper = require('./cookieHelper-539bbfad.js');
-var normalizeLink = require('./normalizeLink-d4cc54f8.js');
+var cookieHelper = require('./cookieHelper-4eee6575.js');
+var normalizeLink = require('./normalizeLink-b66bb05c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -3030,22 +3030,6 @@ const StyledContainer = styled__default["default"].div `
       }
     }
   }
-`;
-const StyledIcon = styled__default["default"].div `
-  background: #ffffff;
-  border-radius: 16px;
-  width: 48px;
-  height: 48px;
-  position: relative;
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-width: 24px;
-    max-height: 24px;
-    transform: translate(-50%, -50%);
-  }
 `;
 
 const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
@@ -3071,20 +3055,20 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                 }),
             } }))) : null;
     return (React__default["default"].createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
-            (isPregTool
-                ? theme.colors.pink[1]
-                : isMarryBaby
-                    ? theme.colors.mb[2]
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
                     : theme.colors.blue[1]) },
         React__default["default"].createElement(StyledWrapper$1, null,
-            React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24) } },
+            React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24), '.heading': {} } },
                 React__default["default"].createElement(core.Box, null,
-                    React__default["default"].createElement(index$5.Heading, { tag: "h5", as: headingAs }, heading),
+                    React__default["default"].createElement(index$2.Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
                     medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                isMarryBaby ? (React__default["default"].createElement(StyledIcon, null, icon)) : (React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: core.rem(84),
-                        height: core.rem(84),
-                        borderRadius: '50%',
+                React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
+                        width: core.rem(80),
+                        height: core.rem(80),
+                        borderRadius: isMarryBaby ? '24px' : '50%',
                         backgroundColor: '#fff',
                         flexShrink: 0,
                         img: {
@@ -3092,14 +3076,14 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                             maxHeight: core.rem(48),
                         },
                         [theme.fn.smallerThan('sm')]: {
-                            width: core.rem(56),
-                            height: core.rem(56),
+                            width: core.rem(64),
+                            height: core.rem(64),
                             img: {
                                 maxWidth: core.rem(40),
                                 maxHeight: core.rem(40),
                             },
                         },
-                    }) }, icon))))));
+                    }) }, icon)))));
 };
 
 const ConceptionDate = (_a) => {
@@ -3200,6 +3184,15 @@ const InlineLayout$4 = () => {
         form.errors.lastPeriodDate && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
 };
 
+const MbLayout$5 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(ConceptionFormContext);
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+        React__default["default"].createElement(index$c.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
 var DueDateCalculatorType;
 (function (DueDateCalculatorType) {
     DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
@@ -3259,6 +3252,7 @@ const getDueDateIVF = (IVFDate, numDayTransfer) => {
 
 const ConceptionForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const theme = core.useMantineTheme();
     const { t } = useTranslations.useTranslations();
     const form$1 = form.useForm({
         initialValues: {
@@ -3273,7 +3267,7 @@ const ConceptionForm = ({}) => {
     };
     return (React__default["default"].createElement(ConceptionFormContext.Provider, { value: { form: form$1 } },
         React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default["default"].createElement(DefaultLayout$4, null) : React__default["default"].createElement(InlineLayout$4, null),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$4, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$5, null)) : (React__default["default"].createElement(DefaultLayout$4, null)),
             React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3303,10 +3297,23 @@ const InlineLayout$3 = () => {
                 React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$3.Radio, { key: idx, value: i.value, label: i.label }))))))));
 };
 
+const MbLayout$4 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form, transferDateOptions } = React.useContext(IVFFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index$c.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), rightSection: null }))),
+        React__default["default"].createElement(index$3.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$3.Radio, { key: idx, value: i.value, label: i.label })))))));
+};
+
 const IVFForm = ({}) => {
     var _a;
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
     const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
     const transferDateOptions = [
         {
             value: '3',
@@ -3336,7 +3343,7 @@ const IVFForm = ({}) => {
     };
     return (React__default["default"].createElement(IVFFormContext.Provider, { value: { form: form$1, transferDateOptions } },
         React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default["default"].createElement(DefaultLayout$3, null) : React__default["default"].createElement(InlineLayout$3, null),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$3, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$4, null)) : (React__default["default"].createElement(DefaultLayout$3, null)),
             React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3366,12 +3373,30 @@ const InlineLayout$2 = () => {
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
                     content: '30',
-                }) }, form.getInputProps('periodLength'))))));
+                }) }, form.getInputProps('periodLength'), { error: null }))),
+        form.errors.periodLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const MbLayout$3 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(LastPeriodFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index$c.DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
 };
 
 const LastPeriodForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
     const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
     const form$1 = form.useForm({
         initialValues: {
             lastPeriodDate: new Date(),
@@ -3388,7 +3413,7 @@ const LastPeriodForm = ({}) => {
     };
     return (React__default["default"].createElement(LastPeriodFormContext.Provider, { value: { form: form$1 } },
         React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default["default"].createElement(DefaultLayout$2, null) : React__default["default"].createElement(InlineLayout$2, null),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$2, null)) : isMarryBaby ? (React__default["default"].createElement(MbLayout$3, null)) : (React__default["default"].createElement(DefaultLayout$2, null)),
             React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3435,8 +3460,9 @@ const DueDateForm = (_a) => {
             setCalculatorType,
         } },
         React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ component: "div", formLayout: "default" }, props),
-            React__default["default"].createElement(index$3.Input.Wrapper, { label: t('dueDatePage.calculationMethod') },
-                React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) })),
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.Control, null,
+                React__default["default"].createElement(index$3.Input.Wrapper, { label: t('dueDatePage.calculationMethod') },
+                    React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) }))),
             React__default["default"].createElement(FormSwitcher, null))));
 };
 
@@ -3631,29 +3657,25 @@ const InlineForm$2 = (props) => {
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
     return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
-                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
-                        React__default["default"].createElement(index$d.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+                return (React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$d.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })));
             } }),
         React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
-                    React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput') },
-                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: '25',
-                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
-                                rightSection: {
-                                    width: 'auto',
-                                },
-                            }) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
+                return (React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                            content: '25',
+                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
             } }),
         React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                 return (React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
                     React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
                         React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                 content: '170',
-                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) })),
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
             } }),
         React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
@@ -3661,7 +3683,7 @@ const InlineForm$2 = (props) => {
                     React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
                         React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                 content: '60',
-                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) })),
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, error.message))));
             } }),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
@@ -3783,15 +3805,13 @@ var useStyles$1 = core.createStyles((theme, { hasOnClickFn }) => {
 const BabyPoopForm = (_a) => {
     var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
     const { t } = useTranslations.useTranslations();
-    const _theme = core.useMantineTheme();
-    const isMarryBaby = _theme.other.template === 'mb';
     const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
     return (React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
         sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('common.sponsoredBy')),
             React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
         React__default["default"].createElement(index$2.Text, { size: "p3", className: "description" }, babyPoopPage.description),
-        React__default["default"].createElement(index$3.Button, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
+        React__default["default"].createElement(index$3.Button, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
 };
 
 const BabyPoopEmbed = (_a) => {
@@ -4114,12 +4134,13 @@ const DefaultLayout$1 = (_a) => {
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
     return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod') }, form.getInputProps('calculatorType'))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Control, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod') }, form.getInputProps('calculatorType')))),
         React__default["default"].createElement(index$c.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                 withinPortal: true,
             }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -4150,16 +4171,19 @@ const MbLayout$2 = (_a) => {
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
     return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$2.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
-            React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
-        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, { size: 24 }) },
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Control, null,
+            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$2.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
+                React__default["default"].createElement(index$d.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
             React__default["default"].createElement(index$c.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        form.errors.cycleLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.periodLength)),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -4204,7 +4228,7 @@ const OvulationForm = (_a) => {
             icon: React__default["default"].createElement(AvoidPregnancy, null),
         },
     ];
-    return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1, isMobile, calculatingMethods } }, isMarryBaby ? (React__default["default"].createElement(MbLayout$2, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$1, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
+    return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1, isMobile, calculatingMethods } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$1, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout$2, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
 };
 
 const OvulationCardEmbed = (_a) => {
@@ -4258,16 +4282,15 @@ const MbLayout$1 = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = useTranslations.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
-    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
-                React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
-            form.errors.gender && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Control, null,
+            React__default["default"].createElement(index$d.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'), { error: null }))),
+        form.errors.gender && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender)),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
                 React__default["default"].createElement(index$c.DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
                         withinPortal: true,
-                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+                    }, maxDate: new Date(), rightSection: null }, form.getInputProps('age'), { error: null }))),
             form.errors.age && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
@@ -4290,7 +4313,7 @@ const BabyVaccineForm = (_a) => {
         },
     });
     const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
-    return (React__default["default"].createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form: form$1 } }, isMarryBaby ? (React__default["default"].createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
+    return (React__default["default"].createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form: form$1 } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout$1, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
 };
 
 const BabyVaccineCardEmbed = (_a) => {
@@ -4343,15 +4366,15 @@ const InlineForm = (_a) => {
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
-                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))),
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('height'), { min: index$d.INPUT_RANGE.height.min, max: index$d.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
                     content: '160',
-                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) }))),
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
             React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
-                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))),
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
             React__default["default"].createElement(index$d.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
@@ -4366,19 +4389,25 @@ const MbLayout = (_a) => {
     return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
-                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.pregnantWeek.min, max: index$d.INPUT_RANGE.pregnantWeek.max, placeholder: `${index$d.INPUT_RANGE.pregnantWeek.min} - ${index$d.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'), { error: null }))),
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.pregnantWeek.min, max: index$d.INPUT_RANGE.pregnantWeek.max, placeholder: `${index$d.INPUT_RANGE.pregnantWeek.min} - ${index$d.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
             form.errors.pregnantWeek && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
-                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { error: null }))),
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
             form.errors.lastWeight && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
-                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.height.min, max: index$d.INPUT_RANGE.height.max }, form.getInputProps('height'), { error: null }))),
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.height.min, max: index$d.INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }) }))),
             form.errors.height && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.height))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
-                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max }, form.getInputProps('weight'), { error: null }))),
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: index$d.INPUT_RANGE.weight.min, max: index$d.INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
             form.errors.weight && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.weight))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
@@ -4416,7 +4445,7 @@ const PWGForm = (_a) => {
             linkTool,
             form: form$1,
             submitProps,
-        } }, isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
 };
 
 const PWGCardEmbed = (_a) => {