@hhgtech/hhg-components 1.29.60 → 1.29.62

package/build/esm/i18n-values/vi-VN_MB.js

@@ -39,7 +39,7 @@ var mbTranslations = {
 	"babyGrowth.babyInfo": "Thông tin của bé",
 	"babyGrowth.chartTitle": "WHO - Biểu đồ tăng trưởng cho {name}",
 	"babyGrowth.chartTitle.noName": "Biểu đồ tăng trưởng của bé",
-	"babyGrowth.cm": "(cm)",
+	"babyGrowth.cm": "cm",
 	"babyGrowth.drawer.addMeasurement": "Thêm số đo",
 	"babyGrowth.drawer.createBaby": "Tạo hồ sơ mới",
 	"babyGrowth.drawer.switchProfile": "Chọn hồ sơ khác",
@@ -62,8 +62,8 @@ var mbTranslations = {
 	"babyGrowth.input.checkSubmit": "Theo dõi sự phát triển của trẻ",
 	"babyGrowth.input.measurementDate": "Ngày đo lường",
 	"babyGrowth.input.submit": "Theo dõi sự phát triển của bé",
-	"babyGrowth.kg": "(kg)",
-	"babyGrowth.kg.m2": "(kg/ m2)",
+	"babyGrowth.kg": "kg",
+	"babyGrowth.kg.m2": "kg/ m2",
 	"babyGrowth.monthly": "Theo tháng",
 	"babyGrowth.nickname": "Biệt danh",
 	"babyGrowth.optional": "(tùy chọn)",
@@ -430,7 +430,7 @@ var mbTranslations = {
 	"ovulationPage.avoidPregnancy": "Tránh thai",
 	"ovulationPage.conceive": "Cơ hội thụ thai",
 	"ovulationPage.cycleLength": "Độ dài chu kỳ kinh nguyệt",
-	"ovulationPage.dayUnit": "(ngày)",
+	"ovulationPage.dayUnit": "ngày",
 	"ovulationPage.objectives": "Mục đích",
 	"ovulationPage.periodDuration": "Số ngày hành kinh",
 	"ovulationPage.trackPeriod": "Theo dõi chu kỳ kinh",

package/build/esm/i18n-values/zh-TW.js

@@ -39,7 +39,7 @@ var zhTranslations = {
 	"babyGrowth.babyInfo": "寶寶資訊",
 	"babyGrowth.chartTitle": "世界衛生組織 - {name} 生長曲線",
 	"babyGrowth.chartTitle.noName": "您寶貝的兒童生長曲線",
-	"babyGrowth.cm": "(公分)",
+	"babyGrowth.cm": "公分",
 	"babyGrowth.drawer.addMeasurement": "新增測量值",
 	"babyGrowth.drawer.createBaby": "新建小孩基本資料",
 	"babyGrowth.drawer.switchProfile": "切換基本資料",
@@ -62,8 +62,8 @@ var zhTranslations = {
 	"babyGrowth.input.checkSubmit": "追蹤您孩子的成長",
 	"babyGrowth.input.measurementDate": "量測日期",
 	"babyGrowth.input.submit": "追蹤您小孩的成長情況",
-	"babyGrowth.kg": "(公斤)",
-	"babyGrowth.kg.m2": "(公斤/平方公尺)",
+	"babyGrowth.kg": "公斤",
+	"babyGrowth.kg.m2": "公斤/平方公尺",
 	"babyGrowth.monthly": "每月",
 	"babyGrowth.nickname": "或暱稱",
 	"babyGrowth.optional": "選填",

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-fbb95f09.js';
-export { T as TranslationsContext } from './translationsContext-fbb95f09.js';
+import { T as TranslationsContext } from './translationsContext-a9c64944.js';
+export { T as TranslationsContext } from './translationsContext-a9c64944.js';
 import React__default, { useState, useEffect, useMemo } from 'react';
 import defaultTranslations from './i18n-values/en-PH.js';
 import hiTranslations from './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-fbb95f09.js';
-export { T as TranslationsContext } from './translationsContext-fbb95f09.js';
+import { T as TranslationsContext } from './translationsContext-a9c64944.js';
+export { T as TranslationsContext } from './translationsContext-a9c64944.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/{index-cbeb902c.js → index-0a713283.js}

@@ -1,64 +1,64 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, createContext, useContext, forwardRef } from 'react';
-import { T as Text } from './index-e0423b48.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-c8e35bfb.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-6541bb61.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, c as Input$1, B as Button$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-bffc209e.js';
-import { T as Text$1 } from './index-0f2446db.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-0ea8b977.js';
+import { T as Text } from './index-d923e380.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, T as TextArea, P as PureInput } from './index.styles-2a161512.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-75e5fda9.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, t as themeColors, c as Input$1, B as Button$1, S as Select, d as Checkbox$1, e as ChipButton } from './index-2976962f.js';
+import { T as Text$1 } from './index-c1d4e8aa.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-88a9e5c2.js';
 import { Bookmark, CalendarMB } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-897ac483.js';
-import { H as Heading } from './index-83f04e6e.js';
-import { t as theme } from './theme-b4671c6b.js';
+import { C as CommonGAssets } from './index-1feede96.js';
+import { H as Heading } from './index-4dd17fe7.js';
+import { t as theme } from './theme-de4e5929.js';
 import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem, Container, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-e730ead1.js';
-import { L as LOCALE } from './index-4d880f7e.js';
-import './useMantineLocale-2e2635e1.js';
-import './translationsContext-fbb95f09.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-93f7fdcd.js';
+import { L as LOCALE } from './index-e5a963a3.js';
+import './useMantineLocale-ce44cbda.js';
+import './translationsContext-a9c64944.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-a0706e5b.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-119e1858.js';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-a3553513.js';
-import { B as Button } from './index-2fe3b3d2.js';
-import { I as Input } from './index-c56fef78.js';
+import { L as Logo } from './index-531034de.js';
+import { B as Button } from './index-62383856.js';
+import { I as Input } from './index-baa2cf87.js';
 import { keyframes } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-5da025be.js';
-import { u as useTranslations } from './useTranslations-e7062948.js';
+import { i as isProduction } from './isProduction-8940d360.js';
+import { u as useTranslations } from './useTranslations-cf6fd3e4.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-eebba4f5.js';
-import { H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, I as INPUT_RANGE, D as Drawer } from './index-d35732f2.js';
-import { f as formatUserProfileUrl } from './index-816eef04.js';
-import { u as useHealthToolsCache } from './useHealthToolCache-89915ad0.js';
-import { s as setDefaultClass, H as HEALTH_TOOL_TYPE$1, b as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, d as getPremiumApiPath, e as getWebsiteUrlApi, f as getSsoApiPath } from './utils-d302e7ee.js';
+import { D as DatePicker } from './index-16c00591.js';
+import { H as HealthToolFormWrapper, G as GenderOptionControl, B as BabyGrowthForm, I as INPUT_RANGE, D as Drawer } from './index-e67ef62d.js';
+import { f as formatUserProfileUrl } from './index-9ea4b5e6.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-3e27635b.js';
+import { s as setDefaultClass, H as HEALTH_TOOL_TYPE$1, b as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, d as getPremiumApiPath, e as getWebsiteUrlApi, f as getSsoApiPath } from './utils-4a086f15.js';
 import { Controller, useForm as useForm$1 } from 'react-hook-form';
-import './constants-481fa3fd.js';
-import './utils-b6d720f7.js';
-import './WhatsApp-8f4e1273.js';
-import './index.styled-2eda9d30.js';
-import './index-2278eaac.js';
-import { a as useOutsideClick } from './useOutsideClick-b75b9a65.js';
+import './constants-8898d04d.js';
+import './utils-b54f5c81.js';
+import './WhatsApp-8f50e1bf.js';
+import './index.styled-fabb3b23.js';
+import './index-809cc43a.js';
+import { a as useOutsideClick } from './useOutsideClick-0b0fddf4.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { D as Dropdown } from './index-fb8c9868.js';
-import { g as getSocialList } from './getSocialList-7db45ce3.js';
+import { D as Dropdown } from './index-320c91f7.js';
+import { g as getSocialList } from './getSocialList-05454009.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-cbc174af.js';
-import { I as Icon } from './index-6cacb059.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-a8a01f2f.js';
+import { I as Icon } from './index-b7a0f534.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-71c590d2.js';
+import { M as Modal } from './index-de0eebee.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-ad2f84ef.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-1a150907.js';
+import { g as getCookie } from './cookieHelper-d4de0565.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-0e772229.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -159,7 +159,7 @@ const FileDropdown = ({ className, value, options, onUploadSelected, id, placeho
         isDropdownOpen && (React__default.createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": true }, options.map((option) => (React__default.createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => option.type === 'upload'
                 ? onUpload('#uploader-dropdown-input-' + id + '-' + option.value)
                 : onDownload(option.url) },
-            React__default.createElement(StyledIcon$1, null, option.icon || option.type === 'download' ? (React__default.createElement(DownloadIcon, null)) : (React__default.createElement(UploadIcon, null))),
+            React__default.createElement(StyledIcon, null, option.icon || option.type === 'download' ? (React__default.createElement(DownloadIcon, null)) : (React__default.createElement(UploadIcon, null))),
             option.label))))),
         React__default.createElement(React__default.Fragment, null, inputList.current)));
 };
@@ -3012,22 +3012,6 @@ const StyledContainer = styled.div `
       }
     }
   }
-`;
-const StyledIcon = styled.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 = {
@@ -3053,20 +3037,20 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                 }),
             } }))) : null;
     return (React__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.createElement(StyledWrapper$1, null,
-            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24) } },
+            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24), '.heading': {} } },
                 React__default.createElement(Box, null,
-                    React__default.createElement(Heading, { tag: "h5", as: headingAs }, heading),
+                    React__default.createElement(Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
                     medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                isMarryBaby ? (React__default.createElement(StyledIcon, null, icon)) : (React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: rem(84),
-                        height: rem(84),
-                        borderRadius: '50%',
+                React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
+                        width: rem(80),
+                        height: rem(80),
+                        borderRadius: isMarryBaby ? '24px' : '50%',
                         backgroundColor: '#fff',
                         flexShrink: 0,
                         img: {
@@ -3074,14 +3058,14 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
                             maxHeight: rem(48),
                         },
                         [theme.fn.smallerThan('sm')]: {
-                            width: rem(56),
-                            height: rem(56),
+                            width: rem(64),
+                            height: rem(64),
                             img: {
                                 maxWidth: rem(40),
                                 maxHeight: rem(40),
                             },
                         },
-                    }) }, icon))))));
+                    }) }, icon)))));
 };
 
 const ConceptionDate = (_a) => {
@@ -3182,6 +3166,15 @@ const InlineLayout$4 = () => {
         form.errors.lastPeriodDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
 };
 
+const MbLayout$5 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(ConceptionFormContext);
+    return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
+        React__default.createElement(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";
@@ -3241,6 +3234,7 @@ const getDueDateIVF = (IVFDate, numDayTransfer) => {
 
 const ConceptionForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const theme = useMantineTheme();
     const { t } = useTranslations();
     const form = useForm({
         initialValues: {
@@ -3255,7 +3249,7 @@ const ConceptionForm = ({}) => {
     };
     return (React__default.createElement(ConceptionFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default.createElement(DefaultLayout$4, null) : React__default.createElement(InlineLayout$4, null),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$4, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$5, null)) : (React__default.createElement(DefaultLayout$4, null)),
             React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3285,10 +3279,23 @@ const InlineLayout$3 = () => {
                 React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio$1, { key: idx, value: i.value, label: i.label }))))))));
 };
 
+const MbLayout$4 = () => {
+    const { t } = useTranslations();
+    const { form, transferDateOptions } = useContext(IVFFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), rightSection: null }))),
+        React__default.createElement(Radio$1.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio$1, { key: idx, value: i.value, label: i.label })))))));
+};
+
 const IVFForm = ({}) => {
     var _a;
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const { t } = useTranslations();
+    const theme = useMantineTheme();
     const transferDateOptions = [
         {
             value: '3',
@@ -3318,7 +3325,7 @@ const IVFForm = ({}) => {
     };
     return (React__default.createElement(IVFFormContext.Provider, { value: { form, transferDateOptions } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default.createElement(DefaultLayout$3, null) : React__default.createElement(InlineLayout$3, null),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$3, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$4, null)) : (React__default.createElement(DefaultLayout$3, null)),
             React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3348,12 +3355,30 @@ const InlineLayout$2 = () => {
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
             React__default.createElement(Input$1.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.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const MbLayout$3 = () => {
+    const { t } = useTranslations();
+    const { form } = useContext(LastPeriodFormContext);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
+            React__default.createElement(Input$1.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
 };
 
 const LastPeriodForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
     const form = useForm({
         initialValues: {
             lastPeriodDate: new Date(),
@@ -3370,7 +3395,7 @@ const LastPeriodForm = ({}) => {
     };
     return (React__default.createElement(LastPeriodFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
-            formLayout === 'default' ? React__default.createElement(DefaultLayout$2, null) : React__default.createElement(InlineLayout$2, null),
+            formLayout === 'inline' ? (React__default.createElement(InlineLayout$2, null)) : isMarryBaby ? (React__default.createElement(MbLayout$3, null)) : (React__default.createElement(DefaultLayout$2, null)),
             React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
@@ -3417,8 +3442,9 @@ const DueDateForm = (_a) => {
             setCalculatorType,
         } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: "default" }, props),
-            React__default.createElement(Input$1.Wrapper, { label: t('dueDatePage.calculationMethod') },
-                React__default.createElement(HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) })),
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(Input$1.Wrapper, { label: t('dueDatePage.calculationMethod') },
+                    React__default.createElement(HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) }))),
             React__default.createElement(FormSwitcher, null))));
 };
 
@@ -3613,29 +3639,25 @@ const InlineForm$2 = (props) => {
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
-                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
-                        React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
             } }),
         React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
-                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput') },
-                        React__default.createElement(Input$1.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.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
-                                rightSection: {
-                                    width: 'auto',
-                                },
-                            }) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(Input$1.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.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
             } }),
         React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
                     React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
                         React__default.createElement(Input$1.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.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(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.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
             } }),
         React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
@@ -3643,7 +3665,7 @@ const InlineForm$2 = (props) => {
                     React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
                         React__default.createElement(Input$1.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.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(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.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
             } }),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
@@ -3765,15 +3787,13 @@ var useStyles$1 = createStyles((theme, { hasOnClickFn }) => {
 const BabyPoopForm = (_a) => {
     var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
     const { t } = useTranslations();
-    const _theme = useMantineTheme();
-    const isMarryBaby = _theme.other.template === 'mb';
     const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
     return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
         sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
             React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
             React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
         React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
-        React__default.createElement(Button$1, 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.createElement(Button$1, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
 };
 
 const BabyPoopEmbed = (_a) => {
@@ -4096,12 +4116,13 @@ const DefaultLayout$1 = (_a) => {
     const { t } = useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod') }, form.getInputProps('calculatorType'))),
+        React__default.createElement(HealthToolFormWrapper.Control, null,
+            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod') }, form.getInputProps('calculatorType')))),
         React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                 withinPortal: true,
             }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
-        React__default.createElement(Input$1.Number, Object.assign({ label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -4132,16 +4153,19 @@ const MbLayout$2 = (_a) => {
     const { t } = useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(Input$1.Wrapper, { label: React__default.createElement(Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
-            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
-        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, { size: 24 }) },
+        React__default.createElement(HealthToolFormWrapper.Control, null,
+            React__default.createElement(Input$1.Wrapper, { label: React__default.createElement(Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
+                React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
             React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
             React__default.createElement(Input$1.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        form.errors.cycleLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
             React__default.createElement(Input$1.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength)),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
@@ -4186,7 +4210,7 @@ const OvulationForm = (_a) => {
             icon: React__default.createElement(AvoidPregnancy, null),
         },
     ];
-    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form, isMobile, calculatingMethods } }, isMarryBaby ? (React__default.createElement(MbLayout$2, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
+    return (React__default.createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form, isMobile, calculatingMethods } }, formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout$2, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout$1, Object.assign({}, commonProps)))));
 };
 
 const OvulationCardEmbed = (_a) => {
@@ -4240,16 +4264,15 @@ const MbLayout$1 = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
-                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
-            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.Control, null,
+            React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'), { error: null }))),
+        form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender)),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+            React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
                 React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
@@ -4272,7 +4295,7 @@ const BabyVaccineForm = (_a) => {
         },
     });
     const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, props);
-    return (React__default.createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form } }, isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
+    return (React__default.createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form } }, formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout$1, Object.assign({}, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps)))));
 };
 
 const BabyVaccineCardEmbed = (_a) => {
@@ -4325,15 +4348,15 @@ const InlineForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
             React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))),
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
             React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
                     content: '160',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) }))),
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
             React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))),
+                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
             React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
@@ -4348,19 +4371,25 @@ const MbLayout = (_a) => {
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
-                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'), { error: null }))),
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
             form.errors.pregnantWeek && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
-                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { error: null }))),
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
             form.errors.lastWeight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
-                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { error: null }))),
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }) }))),
             form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
-                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { error: null }))),
+                React__default.createElement(Input$1.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
             form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight))),
         React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
@@ -4398,7 +4427,7 @@ const PWGForm = (_a) => {
             linkTool,
             form,
             submitProps,
-        } }, isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
 };
 
 const PWGCardEmbed = (_a) => {