@hhgtech/hhg-components 1.29.447 → 1.29.449-beta-1

package/build/{index-55f9c668.js → index-bf2e69d2.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-3ea8ef9f.js');
+var utils = require('./utils-b1545b34.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var animation = require('./animation-6cf72a84.js');
-var index = require('./index-505b1d6d.js');
+var animation = require('./animation-6c13cef3.js');
+var index = require('./index-ecaaab9e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-d28a3eaa.js → index-c228a552.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-a85ac47f.js');
-var index$1 = require('./index-56eb0cbb.js');
+var index = require('./index-11edad6f.js');
+var index$1 = require('./index-dfc3ed82.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-53717590.js → index-c2ba340d.js}

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

package/build/{index-df85eb4f.js → index-c49a7688.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
-require('./index-230f438f.js');
+require('./index-9f5fbdee.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-12319903.js');
-require('./index-f8ac1bf2.js');
-require('./index-4a27456a.js');
-require('./index-aaaea7c1.js');
-var index = require('./index-505b1d6d.js');
-require('./index-38b56ca0.js');
-require('./index.styles-c7f5e0dc.js');
-require('./translationsContext-69b4e29c.js');
+require('./index-b319bb8a.js');
+require('./index-c4c50d31.js');
+require('./index-e04d610b.js');
+require('./index-93c1da83.js');
+var index = require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+require('./translationsContext-70cebab7.js');
 require('@mantine/hooks');
-require('./text-e637affa.js');
-require('./utils-3ea8ef9f.js');
-require('./index-dc205198.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-f8ac1bf2.js → index-c4c50d31.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Locale = require('./Locale-b35b0a4c.js');
+var Locale = require('./Locale-e810a743.js');
 
 exports.Gender = void 0;
 (function (Gender) {

package/build/{index-2a28b6d9.js → index-d2536a66.js}

@@ -1,22 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-require('./index-230f438f.js');
-var index$3 = require('./index-31a6d507.js');
-require('./index-505b1d6d.js');
-require('./index-38b56ca0.js');
-require('./index.styles-c7f5e0dc.js');
-var index = require('./index-a85ac47f.js');
+require('./index-9f5fbdee.js');
+var index$3 = require('./index-75ddddca.js');
+require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
 require('@mantine/hooks');
-require('./index-aaaea7c1.js');
-require('./text-e637affa.js');
-require('./utils-3ea8ef9f.js');
-require('./index-dc205198.js');
-var index$1 = require('./index-d22d99f1.js');
-var index$2 = require('./index-6782d333.js');
+require('./index-93c1da83.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
+var context = require('./context-4b2abfb2.js');
+var index$1 = require('./index-e3aeb6a1.js');
+var index$2 = require('./index-1ebb7538.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -29,18 +30,23 @@ const DefaultLayout = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = index.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
-        React__default["default"].createElement(index$3.DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() }, form.getInputProps('age'))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }, form.getInputProps('age')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineLayout = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = index.useTranslations();
     const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
@@ -52,7 +58,8 @@ const InlineLayout = (_a) => {
                         withinPortal: true,
                     }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
             form.errors.age && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.age))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/{index-0db0741a.js → index-d295dc6a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index$1 = require('./index-bf57499f.js');
-var index$2 = require('./index-12319903.js');
-var index = require('./index-f8ac1bf2.js');
+var index$1 = require('./index-3e900d81.js');
+var index$2 = require('./index-b319bb8a.js');
+var index = require('./index-c4c50d31.js');
 var Cookies = require('js-cookie');
 var uuid = require('uuid');
 var constantsIsProduction = require('./constantsIsProduction.js');

package/build/{index-e5dbd40e.js → index-d8f24439.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
-var togetherComponentGlobalContext = require('./utils-9137d090.js');
+var togetherComponentGlobalContext = require('./utils-14ecb205.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-ef1b650e.js → index-da5e5f8d.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-8b9b85a9.js');
-var index$1 = require('./index-505b1d6d.js');
+var index = require('./index-8202f305.js');
+var index$1 = require('./index-ecaaab9e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-56eb0cbb.js → index-dfc3ed82.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
-var index = require('./index-38b56ca0.js');
+var index = require('./index-2d80a747.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-de177d58.js → index-e308e687.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var miscTheme = require('./miscTheme.js');
-var WhatsApp = require('./WhatsApp-18a9382f.js');
-var Spinner = require('./Spinner-2c21fde8.js');
+var WhatsApp = require('./WhatsApp-ba6281f8.js');
+var Spinner = require('./Spinner-a41499a9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-d22d99f1.js → index-e3aeb6a1.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-505b1d6d.js');
-var index$1 = require('./index-38b56ca0.js');
-var index$2 = require('./index-a85ac47f.js');
+var index = require('./index-ecaaab9e.js');
+var index$1 = require('./index-2d80a747.js');
+var index$2 = require('./index-11edad6f.js');
 var flattenChildren = require('react-keyed-flatten-children');
 var miscTheme = require('./miscTheme.js');
 
@@ -108,6 +108,11 @@ const useStyles$7 = core.createStyles(() => {
             display: 'flex',
             flexDirection: 'column',
             gap: core.rem(8),
+            paddingLeft: 16,
+            paddingRight: 16,
+            '&:last-child': {
+                paddingBottom: 16,
+            },
         },
     };
 });
@@ -127,6 +132,7 @@ var useStyles$6 = core.createStyles((theme, { formLayout }) => {
             display: 'flex',
             flexDirection: 'column',
             gap: core.rem(formLayout === 'inline' ? 8 : 16),
+            borderRadius: 'inherit',
             '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
                 color: '#8C8C8C',
             },
@@ -298,6 +304,7 @@ var useStyles$2 = core.createStyles((theme, { width, direction }) => {
         })),
         label: {
             fontSize: core.rem(14),
+            lineHeight: core.rem(22),
             color: theme.colors.gray[6],
         },
         content: {

package/build/{index-505b1d6d.js → index-ecaaab9e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var text = require('./text-e637affa.js');
+var index = require('./index-4b72550f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -11,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 var useStyles = core.createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const TextConfig = text.GlobalTextStyle[_params === null || _params === void 0 ? void 0 : _params.customStylesType] ||
-        text.GlobalTextStyle[text.CustomStylesType.NONE];
+    const TextConfig = index.GlobalTextStyle[_params === null || _params === void 0 ? void 0 : _params.customStylesType] ||
+        index.GlobalTextStyle[index.CustomStylesType.NONE];
     const getFontSize = (_a = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _a === void 0 ? void 0 : _a[0];
     const getLineHeight = (_b = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _b === void 0 ? void 0 : _b[0];
     const getLetterSpacing = (_e = (_d = (_c = TextConfig.letterSpacing) === null || _c === void 0 ? void 0 : _c[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : 0;
@@ -22,10 +22,10 @@ var useStyles = core.createStyles((theme, _params) => {
     return {
         root: Object.assign({}, ((_params === null || _params === void 0 ? void 0 : _params.size) && {
             fontWeight: (_params === null || _params === void 0 ? void 0 : _params.as) === 'label'
-                ? text.FontWeight.semiBold
+                ? index.FontWeight.semiBold
                 : TextConfig.fontWeight[_params.weight] ||
                     TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] ||
-                    text.FontWeight.regular,
+                    index.FontWeight.regular,
             fontSize: `${getFontSize}`,
             lineHeight: `${getLineHeight}`,
             letterSpacing: getLetterSpacing,
@@ -42,11 +42,12 @@ const Text = React.forwardRef((_a, ref) => {
     var _b;
     var { size, color, weight, as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel, variant } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "variant"]);
     const theme = core.useMantineTheme();
+    const variantStyle = index.useTemplateVariant();
     const { classes, cx } = useStyles({
         size,
         weight: weight === 'caption' ? 'bold' : weight,
         as,
-        customStylesType: theme.other.customStyleType || text.CustomStylesType.NONE,
+        customStylesType: variantStyle,
     }, {
         name: 'Text',
         styles,

package/build/{index-07f21795.js → index-ecf3de0d.js}

@@ -1,20 +1,20 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-230f438f.js');
+var index$2 = require('./index-9f5fbdee.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-505b1d6d.js');
-var index$1 = require('./index-4a27456a.js');
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
-var index$6 = require('./index-12319903.js');
-var index$5 = require('./index-f8ac1bf2.js');
+var index = require('./index-ecaaab9e.js');
+var index$1 = require('./index-e04d610b.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
+var index$6 = require('./index-b319bb8a.js');
+var index$5 = require('./index-c4c50d31.js');
 var core = require('@mantine/core');
-var number = require('./number-b0514703.js');
-var index$3 = require('./index-a85ac47f.js');
+var number = require('./number-c577e228.js');
+var index$3 = require('./index-11edad6f.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-d6d389d5.js');
-var index$7 = require('./index-cbea48d4.js');
+var index$4 = require('./index-1258816e.js');
+var index$7 = require('./index-54bb1517.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -345,25 +345,6 @@ var useStyles = core.createStyles((theme, { active, layout }) => {
     };
 });
 
-function secondsTo24HoursFormat(sec_num = 0) {
-    const hours = Math.floor(sec_num / 3600);
-    const minutes = Math.floor((sec_num - hours * 3600) / 60);
-    const seconds = sec_num - hours * 3600 - minutes * 60;
-    let hoursStr = String(hours);
-    let minutesStr = String(minutes);
-    let secondsStr = String(seconds);
-    if (hours < 10) {
-        hoursStr = '0' + hours;
-    }
-    if (minutes < 10) {
-        minutesStr = '0' + minutes;
-    }
-    if (seconds < 10) {
-        secondsStr = '0' + seconds;
-    }
-    return (hours > 0 ? hoursStr + ':' : '') + minutesStr + ':' + secondsStr;
-}
-
 const VideoItem$1 = (_a) => {
     var { isMobile, data, styles, className, classNames, layout } = _a, boxProps = tslib_es6.__rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout"]);
     const { title, imageMedium, createTime, totalView, active, duration } = data;
@@ -391,7 +372,7 @@ const VideoItem$1 = (_a) => {
                                 e.currentTarget.src = index$1.CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
                             } })),
                     duration && (React__default["default"].createElement(core.Box, { className: classes.duration },
-                        React__default["default"].createElement(index.Text, { size: "n1", className: classes.durationTxt }, secondsTo24HoursFormat(duration)))),
+                        React__default["default"].createElement(index.Text, { size: "n1", className: classes.durationTxt }, duration))),
                     React__default["default"].createElement(core.Flex, { className: classes.overlay, align: 'center', justify: 'center' }, active ? (React__default["default"].createElement(index.Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default["default"].createElement(Play, { size: isMobile ? 32 : 46 }))))),
             React__default["default"].createElement(core.Stack, { sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
                 React__default["default"].createElement(index.Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2 }, title),

package/build/{index-881089df.js → index-f93c2cfe.js}

@@ -1,24 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-230f438f.js');
-var index$4 = require('./index-31a6d507.js');
-var index$5 = require('./index-505b1d6d.js');
-require('./index-38b56ca0.js');
-require('./index.styles-c7f5e0dc.js');
-var index = require('./index-a85ac47f.js');
+var index$3 = require('./index-9f5fbdee.js');
+var index$4 = require('./index-75ddddca.js');
+var index$5 = require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
 require('@mantine/hooks');
-require('./index-aaaea7c1.js');
-require('./text-e637affa.js');
-require('./utils-3ea8ef9f.js');
-require('./index-dc205198.js');
-var constants = require('./constants-86f7b021.js');
-var index$1 = require('./index-d22d99f1.js');
-var index$2 = require('./index-6782d333.js');
-var Locale = require('./Locale-b35b0a4c.js');
+require('./index-93c1da83.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
+var context = require('./context-4b2abfb2.js');
+var constants = require('./constants-7367b773.js');
+var index$1 = require('./index-e3aeb6a1.js');
+var index$2 = require('./index-1ebb7538.js');
+var Locale = require('./Locale-e810a743.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -39,6 +40,7 @@ var useStyles$1 = core.createStyles((theme) => {
 const DefaultForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
     const { classes } = useStyles$1(undefined, {
         name: 'BabyGrowthForm__DefaultForm',
@@ -66,39 +68,43 @@ const DefaultForm = (_a) => {
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.height'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.weight'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.head'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.height'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.weight'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.kg'),
+                        ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.head'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } })))),
         form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$3.Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 var useStyles = core.createStyles((theme) => {
@@ -157,6 +163,7 @@ const InlineForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const theme = core.useMantineTheme();
     const { classes } = useStyles(undefined, {
         name: 'BabyGrowthForm__InlineForm',
@@ -217,7 +224,8 @@ const InlineForm = (_a) => {
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: core.clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 const MbLayout = (_a) => {

package/build/{index-e1f2cfda.js → index-f9491279.js}

@@ -2,24 +2,24 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-3ea8ef9f.js');
+var utils = require('./utils-b1545b34.js');
 var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
-var index = require('./index-d74c3072.js');
-var index$1 = require('./index-230f438f.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
+var index = require('./index-54625114.js');
+var index$1 = require('./index-9f5fbdee.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-12319903.js');
-require('./index-f8ac1bf2.js');
-require('./index-4a27456a.js');
-require('./index-aaaea7c1.js');
-require('./index-505b1d6d.js');
-require('./index-38b56ca0.js');
-require('./index.styles-c7f5e0dc.js');
-require('./translationsContext-69b4e29c.js');
+require('./index-b319bb8a.js');
+require('./index-c4c50d31.js');
+require('./index-e04d610b.js');
+require('./index-93c1da83.js');
+require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+require('./translationsContext-70cebab7.js');
 require('@mantine/hooks');
-require('./text-e637affa.js');
-require('./index-dc205198.js');
+require('./index-01c0a05b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-39350a42.js → index-fdfb1f23.js}

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

package/build/{index-fcc313b5.js → index-ff9f695e.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var normalizeLink = require('./normalizeLink-2cee64ac.js');
-var index = require('./index-12319903.js');
+var normalizeLink = require('./normalizeLink-931f07df.js');
+var index = require('./index-b319bb8a.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var Locale = require('./Locale-b35b0a4c.js');
+var Locale = require('./Locale-e810a743.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 const SSO_V2_PATHS = {