@hhgtech/hhg-components 1.29.61 → 1.29.63

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-24fa9c1f.js';
-export { T as TranslationsContext } from './translationsContext-24fa9c1f.js';
+import { T as TranslationsContext } from './translationsContext-6a6737f9.js';
+export { T as TranslationsContext } from './translationsContext-6a6737f9.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-24fa9c1f.js';
-export { T as TranslationsContext } from './translationsContext-24fa9c1f.js';
+import { T as TranslationsContext } from './translationsContext-6a6737f9.js';
+export { T as TranslationsContext } from './translationsContext-6a6737f9.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/{index-a3d909bc.js → index-15ca738b.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
-import { t as theme } from './theme-2cab734a.js';
-import { E as Eye, S as Spinner } from './utils-5fae0186.js';
-import { I as Instagram } from './Instagram-1a65c7a7.js';
-import { W as WhatsApp } from './WhatsApp-cec8440d.js';
+import { t as theme } from './theme-ce12028f.js';
+import { E as Eye, S as Spinner } from './utils-debcc866.js';
+import { I as Instagram } from './Instagram-2661e429.js';
+import { W as WhatsApp } from './WhatsApp-bc8ae032.js';
 
 const ArrowRightTail = (_a) => {
     var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);

package/build/esm/{index-95823e6a.js → index-169e83e3.js}

@@ -1,18 +1,18 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
-import './index-51f79a77.js';
+import './index-dedc36e9.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-f3a492e5.js';
-import './index-9f857ac5.js';
-import './index-036bbef6.js';
-import './useMantineLocale-9cbb1827.js';
-import { T as Text$1 } from './index-38222f65.js';
-import './theme-2cab734a.js';
-import './translationsContext-24fa9c1f.js';
+import './index-7caa180f.js';
+import './index-5dcec671.js';
+import './index-2a5b96fa.js';
+import './useMantineLocale-c46c81fe.js';
+import { T as Text$1 } from './index-94870595.js';
+import './theme-ce12028f.js';
+import './translationsContext-6a6737f9.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-b28e77e7.js';
+import './utils-042ed806.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-036bbef6.js → index-2a5b96fa.js}

@@ -1,5 +1,5 @@
-import { d as domainLocales } from './index-f3a492e5.js';
-import { i as isProduction } from './isProduction-b95a0408.js';
+import { d as domainLocales } from './index-7caa180f.js';
+import { i as isProduction } from './isProduction-f79fc5e4.js';
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/esm/{index-900ddedd.js → index-4135b933.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-2cab734a.js';
+import { t as theme } from './theme-ce12028f.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{index-d35a8ec2.js → index-45b0df8a.js}

@@ -1,13 +1,13 @@
 import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
-import { t as StyledDivider, u as useStyles, v as StyledContainer } from './index.styles-52138e14.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-5450db07.js';
-import { u as useTranslations } from './useTranslations-b308515e.js';
-import { B as Button } from './index-51f79a77.js';
-import { P as PATHS } from './paths-d0378c1d.js';
-import { a as LOCALIZED_SLUGS } from './constants-97326532.js';
-import { d as domainLocales } from './index-f3a492e5.js';
-import { h as callApi, i as getCarePath } from './utils-5fae0186.js';
-import { i as isProduction } from './isProduction-b95a0408.js';
+import { t as StyledDivider, u as useStyles, v as StyledContainer } from './index.styles-d1f8a5a0.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-92360751.js';
+import { u as useTranslations } from './useTranslations-1daa069a.js';
+import { B as Button } from './index-dedc36e9.js';
+import { P as PATHS } from './paths-4504e552.js';
+import { a as LOCALIZED_SLUGS } from './constants-f503af61.js';
+import { d as domainLocales } from './index-7caa180f.js';
+import { h as callApi, i as getCarePath } from './utils-debcc866.js';
+import { i as isProduction } from './isProduction-f79fc5e4.js';
 
 /**
  * @deprecated Consider to use mantine

package/build/esm/{index-834e477b.js → index-4ba30b8a.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { g as useStyles } from './index-51f79a77.js';
+import { g as useStyles } from './index-dedc36e9.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-99f5d353.js → index-5245513a.js}

@@ -1,18 +1,18 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-5450db07.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-92360751.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { c as Input, S as Select } from './index-51f79a77.js';
+import { c as Input, S as Select } from './index-dedc36e9.js';
 import '@mantine/dates';
-import { c as CDN_ADDRESS } from './index-f3a492e5.js';
-import { L as LOCALE } from './index-9f857ac5.js';
-import './index-036bbef6.js';
-import './useMantineLocale-9cbb1827.js';
-import './index-38222f65.js';
-import './theme-2cab734a.js';
-import { u as useTranslations } from './useTranslations-b308515e.js';
+import { c as CDN_ADDRESS } from './index-7caa180f.js';
+import { L as LOCALE } from './index-5dcec671.js';
+import './index-2a5b96fa.js';
+import './useMantineLocale-c46c81fe.js';
+import './index-94870595.js';
+import './theme-ce12028f.js';
+import { u as useTranslations } from './useTranslations-1daa069a.js';
 import '@mantine/hooks';
-import './utils-b28e77e7.js';
-import { M as MAPPED_LOCALE } from './utils-6eef912a.js';
+import './utils-042ed806.js';
+import { M as MAPPED_LOCALE } from './utils-8d2cc281.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-9aa58011.js → index-54d9dfcf.js}

@@ -1,9 +1,9 @@
 import React__default, { useContext, useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-b28e77e7.js';
-import { t as theme } from './theme-2cab734a.js';
-import { _ as __rest } from './tslib.es6-5450db07.js';
-import { T as TogetherComponentGlobalContext } from './utils-5fae0186.js';
+import { M as MediaQueries } from './utils-042ed806.js';
+import { t as theme } from './theme-ce12028f.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
+import { T as TogetherComponentGlobalContext } from './utils-debcc866.js';
 
 const StyledPopup = styled.div `
   position: fixed;

package/build/esm/{index-8f887d1a.js → index-55a05623.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-51f79a77.js';
+import { B as Button$1 } from './index-dedc36e9.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-d8639939.js → index-6487b625.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-2cab734a.js';
+import { t as theme } from './theme-ce12028f.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-f3a492e5.js → index-7caa180f.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './index-9f857ac5.js';
-import { i as isProduction } from './isProduction-b95a0408.js';
+import { L as LOCALE } from './index-5dcec671.js';
+import { i as isProduction } from './isProduction-f79fc5e4.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/esm/{index-3ca3bfd4.js → index-7dc1b597.js}

@@ -1,31 +1,31 @@
 import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
 import { Portal, Box, Flex, rem, createStyles, Input, Chip, useMantineTheme, Switch } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-b28e77e7.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$b } from './index.styles-52138e14.js';
-import { T as Text } from './index-38222f65.js';
-import { t as theme } from './theme-2cab734a.js';
-import { M as MarryBabyText } from './index-21f69a62.js';
-import { T as Text$1 } from './index-95823e6a.js';
-import { u as useScrollbarSize } from './useScrollbarSize-9a756f42.js';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-042ed806.js';
+import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$b } from './index.styles-d1f8a5a0.js';
+import { T as Text } from './index-94870595.js';
+import { t as theme } from './theme-ce12028f.js';
+import { M as MarryBabyText } from './index-8a7335e0.js';
+import { T as Text$1 } from './index-169e83e3.js';
+import { u as useScrollbarSize } from './useScrollbarSize-3433fefa.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { s as setDefaultClass } from './utils-5fae0186.js';
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { s as setDefaultClass } from './utils-debcc866.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { R as Radio, B as Button, c as Input$1 } from './index-51f79a77.js';
-import { C as CommonGAssets } from './index-036bbef6.js';
-import './constants-97326532.js';
-import './index-9f857ac5.js';
-import './utils-73013c02.js';
-import { D as DatePicker } from './index-a0add3e6.js';
-import { u as useTranslations } from './useTranslations-b308515e.js';
+import { R as Radio, B as Button, c as Input$1 } from './index-dedc36e9.js';
+import { C as CommonGAssets } from './index-2a5b96fa.js';
+import './constants-f503af61.js';
+import './index-5dcec671.js';
+import './utils-ff4489d0.js';
+import { D as DatePicker } from './index-b1527198.js';
+import { u as useTranslations } from './useTranslations-1daa069a.js';
 import '@mantine/hooks';
-import './useMantineLocale-9cbb1827.js';
-import './index-f3a492e5.js';
-import './WhatsApp-cec8440d.js';
-import './index.styled-bca18810.js';
-import './index-d0fa15c7.js';
-import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
+import './useMantineLocale-c46c81fe.js';
+import './index-7caa180f.js';
+import './WhatsApp-bc8ae032.js';
+import './index.styled-5c9b09ca.js';
+import './index-206d61be.js';
+import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
 import '@mantine/dates';
 import flattenChildren from 'react-keyed-flatten-children';
 
@@ -596,7 +596,7 @@ var useStyles$5 = createStyles(() => {
             gap: rem(8),
             border: '1px solid #EAEAEC',
             borderRadius: rem(16),
-            padding: '10px 16px',
+            padding: '10px 16px 12px 16px',
             flex: '1 1 0px',
             '.mantine-Input-input': {
                 border: 0,
@@ -612,7 +612,8 @@ var useStyles$5 = createStyles(() => {
         info: {
             display: 'flex',
             flexDirection: 'column',
-            gap: rem(8),
+            gap: 0,
+            flex: '1 1 0px',
         },
         label: {
             color: '#7C7C8F',
@@ -638,12 +639,22 @@ const BorderBoxControl = (_a) => {
     return (React__default.createElement(Box, Object.assign({ className: cx(classes.root, className) }, props),
         React__default.createElement(Box, { className: classes.info },
             label && (React__default.createElement(Text, { size: "n1", as: "label", className: classes.label }, label)),
-            React__default.createElement(Box, { className: classes.content }, children)),
-        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : (rightSection)))));
+            React__default.createElement(Box, { className: classes.content }, React__default.isValidElement(children)
+                ? React__default.cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
+                : null)),
+        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : React__default.isValidElement(rightSection) ? (React__default.cloneElement(rightSection, {
+            size: 24,
+        })) : null))));
 };
 
 var useStyles$4 = createStyles((theme, { width, direction }) => {
+    const isMarryBaby = theme.other.template === 'mb';
     return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
         row: {
             display: 'flex',
             flexDirection: direction,
@@ -670,24 +681,33 @@ var useStyles$4 = createStyles((theme, { width, direction }) => {
         control: {
             width: typeof width === 'number' ? rem(width) : width,
             flexShrink: 1,
+            input: Object.assign({}, (isMarryBaby && {
+                borderRadius: rem(12),
+            })),
             '&.error': {
                 'button, input': {
                     borderColor: theme.colors.red[7],
                 },
             },
         },
+        error: {
+            color: 'red',
+            textAlign: 'right',
+        },
     };
 });
 
-const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, }) => {
+const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, errorMess, }) => {
     const { classes } = useStyles$4({ width, direction }, {
         name: 'HealthToolFormWrapper__BorderInlineControl',
         styles,
         classNames,
     });
-    return (React__default.createElement(Box, { className: classes.row },
-        React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
-        React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))));
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
+            React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))),
+        errorMess && (React__default.createElement(Text, { size: "p4", className: classes.error }, errorMess))));
 };
 
 const useStyles$3 = createStyles(() => {
@@ -814,19 +834,28 @@ const DefaultForm = (_a) => {
             form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
         React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
                 t('babyGrowth.height'),
-                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.cm'))) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.cm'),
+                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                 v && form.validateField('checkMesureVal');
                 form.getInputProps('height').onChange(v);
             } })),
         React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
                 t('babyGrowth.weight'),
-                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.kg'))) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.kg'),
+                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
                 v && form.validateField('checkMesureVal');
                 form.getInputProps('weight').onChange(v);
             } })),
         React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
                 t('babyGrowth.head'),
-                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.kg'))) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.cm'),
+                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                 v && form.validateField('checkMesureVal');
                 form.getInputProps('head').onChange(v);
             } })),
@@ -930,7 +959,9 @@ const InlineForm = (_a) => {
                     React__default.createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
                         form.getInputProps('weight').value &&
                         bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
-                    t('babyGrowth.kg.m2')),
+                    "(",
+                    t('babyGrowth.kg.m2'),
+                    ")"),
                 React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                         v && form.validateField('checkMesureVal');
                         form.getInputProps('height').onChange(v);
@@ -952,9 +983,65 @@ const InlineForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
 };
 
+const MbLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender'), { error: null }))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
+                    v && form.validateField('measurementDate');
+                    form.getInputProps('birthday').onChange(v);
+                } }))),
+        form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                    v && form.validateField('checkMesureVal');
+                    form.getInputProps('height').onChange(v);
+                } }))),
+        form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                    v && form.validateField('checkMesureVal');
+                    form.getInputProps('weight').onChange(v);
+                } }))),
+        form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
+            React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), onChange: (v) => {
+                    v && form.validateField('checkMesureVal');
+                    form.getInputProps('head').onChange(v);
+                } }))),
+        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(Input$1.Wrapper, null,
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
+        form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+};
+
 const BabyGrowthForm = (_a) => {
     var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
     const { t } = useTranslations();
+    const theme = useMantineTheme();
     const form = useForm({
         initialValues: {
             measurementDate: new Date(),
@@ -985,7 +1072,7 @@ const BabyGrowthForm = (_a) => {
             submitProps,
             currentUrl,
             form,
-        } }, formLayout === 'default' ? (React__default.createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
+        } }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default.createElement(MbLayout, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
 };
 
 export { BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, INPUT_RANGE as I, Modal as M, RadioImageGroup as R };

package/build/esm/{index-21f69a62.js → index-8a7335e0.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
-import { S as StyledHeading, a as StyledText } from './index.styled-bca18810.js';
+import { S as StyledHeading, a as StyledText } from './index.styled-5c9b09ca.js';
 
 const MarryBabyHeading = (_a) => {
     var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);

package/build/esm/{index-71a385cb.js → index-8ef24d03.js}

@@ -1,22 +1,22 @@
 import React__default from 'react';
-import { C as Container } from './index-be1a7a94.js';
+import { C as Container } from './index-b2baf07d.js';
 import dayjs from 'dayjs';
-import { d as domainLocales } from './index-f3a492e5.js';
-import { u as useScreenSize } from './index-51f79a77.js';
+import { d as domainLocales } from './index-7caa180f.js';
+import { u as useScreenSize } from './index-dedc36e9.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-9f857ac5.js';
-import './index-036bbef6.js';
-import './useMantineLocale-9cbb1827.js';
-import { T as Text } from './index-38222f65.js';
-import { t as theme } from './theme-2cab734a.js';
-import './translationsContext-24fa9c1f.js';
+import './index-5dcec671.js';
+import './index-2a5b96fa.js';
+import './useMantineLocale-c46c81fe.js';
+import { T as Text } from './index-94870595.js';
+import { t as theme } from './theme-ce12028f.js';
+import './translationsContext-6a6737f9.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-b28e77e7.js';
+import { M as MediaQueries } from './utils-042ed806.js';
 import styled from '@emotion/styled';
-import { L as Logo } from './index-595d3775.js';
-import { M as MarryBabyText } from './index-21f69a62.js';
+import { L as Logo } from './index-eb413906.js';
+import { M as MarryBabyText } from './index-8a7335e0.js';
 
 const StyledFooter = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-38222f65.js → index-94870595.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5450db07.js';
+import { _ as __rest } from './tslib.es6-92360751.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-b28e77e7.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-042ed806.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;