@hhgtech/hhg-components 1.29.498 → 1.29.500

package/build/{index-a598951a.js → index-789d20a1.js}

@@ -2,24 +2,24 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-b7fa667f.js');
+var utils = require('./utils-053ed913.js');
 var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
-var index = require('./index-0d497b99.js');
-var index$1 = require('./index-6e5dcfb0.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
+var index = require('./index-51161bde.js');
+var index$1 = require('./index-248ff166.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-4af2fae3.js');
-require('./index-8402a791.js');
-require('./index-d36d7cad.js');
-require('./index-b98c40f1.js');
-require('./index-9a41f4c2.js');
-require('./index-a80cc163.js');
-require('./index-c119b13b.js');
-require('./index.styles-2bbe7c2a.js');
-require('./translationsContext-cef5ed06.js');
+require('./index-03e1d5fd.js');
+require('./index-1d68a820.js');
+require('./index-25007710.js');
+require('./index-65bc602a.js');
+require('./index-51229c6c.js');
+require('./index-fef96902.js');
+require('./index-ebaf2c19.js');
+require('./index.styles-2fc37e7a.js');
+require('./translationsContext-a5de37cf.js');
 require('@mantine/hooks');
-require('./index-114070f9.js');
+require('./index-93151a6e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-49755f79.js → index-79544fc5.js}

@@ -1,25 +1,26 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-6e5dcfb0.js');
-var index$4 = require('./index-e5ec050c.js');
-var index$5 = require('./index-9a41f4c2.js');
-require('./index-a80cc163.js');
-require('./index-c119b13b.js');
-require('./index.styles-2bbe7c2a.js');
-var index = require('./index-775fa3c5.js');
+var index$3 = require('./index-248ff166.js');
+var index$5 = require('./index-afe5b4d7.js');
+var index$4 = require('./index-51229c6c.js');
+require('./index-fef96902.js');
+var miscTheme = require('./miscTheme.js');
+require('./index-ebaf2c19.js');
+require('./index.styles-2fc37e7a.js');
+var index = require('./index-6c650ac4.js');
 require('@mantine/hooks');
-require('./index-b98c40f1.js');
-require('./utils-b7fa667f.js');
-require('./index-114070f9.js');
-var context = require('./context-3aaeaa26.js');
-var constants = require('./constants-15104884.js');
-var index$1 = require('./index-bb5e8457.js');
-var index$2 = require('./index-fb46fecb.js');
-var Locale = require('./Locale-0aa25e48.js');
+require('./index-65bc602a.js');
+require('./utils-053ed913.js');
+require('./index-93151a6e.js');
+var context = require('./context-60530f29.js');
+var constants = require('./constants-63e847d3.js');
+var index$1 = require('./index-0cb74f84.js');
+var index$2 = require('./index-1240e733.js');
+var Locale = require('./Locale-a4854278.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -28,25 +29,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 const BabyGrowthFormContext = React.createContext({});
 
-var useStyles$1 = core.createStyles((theme) => {
-    return {
-        unit: {
-            color: theme.colors.gray[4],
-            fontWeight: 'normal',
-        },
-    };
-});
-
-const DefaultForm = (_a) => {
-    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
+const DefaultForm = (props) => {
     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',
-        styles,
-        classNames,
-    });
     const commonDateProps = {
         placeholder: 'DD/MM/YYYY',
         popoverProps: {
@@ -62,46 +48,37 @@ const DefaultForm = (_a) => {
                     } }, form.getInputProps('gender'), { error: null }))),
             form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$3.Input.Wrapper, { label: t('babyGrowth.input.birthday') },
-                React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
+            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
+                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                         v && form.validateField('measurementDate');
                         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$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                     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) => {
+                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${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,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                     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) => {
+                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${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,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                     t('babyGrowth.head'),
-                    React__default["default"].createElement("span", { className: classes.unit },
-                        "(",
-                        t('babyGrowth.cm'),
-                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${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 }))),
+            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
+                React__default["default"].createElement(index$5.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.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')))));
@@ -186,7 +163,7 @@ const InlineForm = (_a) => {
             form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
-                React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
+                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                         v && form.validateField('measurementDate');
                         form.getInputProps('birthday').onChange(v);
                     } }))),
@@ -199,7 +176,7 @@ const InlineForm = (_a) => {
                         },
                     },
                 } },
-                React__default["default"].createElement(index$5.Text, { size: "p3" },
+                React__default["default"].createElement(index$4.Text, { size: "p3" },
                     React__default["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))),
@@ -222,7 +199,7 @@ const InlineForm = (_a) => {
             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$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 }))),
+                React__default["default"].createElement(index$5.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.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')))));
@@ -247,7 +224,7 @@ const MbLayout = (_a) => {
                     } }, form.getInputProps('gender'), { error: null }))),
             form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-            React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
+            React__default["default"].createElement(index$5.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);
                 } }))),
@@ -278,7 +255,7 @@ const MbLayout = (_a) => {
         form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
             React__default["default"].createElement(index$3.Input.Wrapper, null,
-                React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
+                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, 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'))));
 };

package/build/{index-6c3e5c66.js → index-7dca6243.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
-require('./index-6e5dcfb0.js');
+require('./index-248ff166.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-4af2fae3.js');
-require('./index-8402a791.js');
-require('./index-d36d7cad.js');
-require('./index-b98c40f1.js');
-var index = require('./index-9a41f4c2.js');
-require('./index-a80cc163.js');
-require('./index-c119b13b.js');
-require('./index.styles-2bbe7c2a.js');
-require('./translationsContext-cef5ed06.js');
+require('./index-03e1d5fd.js');
+require('./index-1d68a820.js');
+require('./index-25007710.js');
+require('./index-65bc602a.js');
+var index = require('./index-51229c6c.js');
+require('./index-fef96902.js');
+require('./index-ebaf2c19.js');
+require('./index.styles-2fc37e7a.js');
+require('./translationsContext-a5de37cf.js');
 require('@mantine/hooks');
-require('./utils-b7fa667f.js');
-require('./index-114070f9.js');
+require('./utils-053ed913.js');
+require('./index-93151a6e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-a6764c8d.js → index-8474f1a3.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-7deb6095.js');
-var index = require('./index-775fa3c5.js');
+var index$1 = require('./index-3e3c4e5c.js');
+var index = require('./index-6c650ac4.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');

package/build/{index-bd91d0f0.js → index-8715b934.js}

@@ -1,30 +1,29 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-20cb8c88.js');
-var constants = require('./constants-32bfbdcf.js');
+var useHealthToolCache = require('./useHealthToolCache-52ff01c1.js');
+var constants = require('./constants-04b49430.js');
 var core = require('@mantine/core');
-var index$2 = require('./index-fb46fecb.js');
-var index$3 = require('./index-6e5dcfb0.js');
+var index$2 = require('./index-1240e733.js');
+var index$3 = require('./index-248ff166.js');
 require('@mantine/dates');
-require('./index-4af2fae3.js');
-require('./index-8402a791.js');
-require('./index-d36d7cad.js');
-require('./index-b98c40f1.js');
-var index$4 = require('./index-9a41f4c2.js');
-require('./index-a80cc163.js');
-var miscTheme = require('./miscTheme.js');
-require('./index-c119b13b.js');
-require('./index.styles-2bbe7c2a.js');
-var index = require('./index-775fa3c5.js');
+require('./index-03e1d5fd.js');
+require('./index-1d68a820.js');
+require('./index-25007710.js');
+require('./index-65bc602a.js');
+var index$4 = require('./index-51229c6c.js');
+require('./index-fef96902.js');
+require('./index-ebaf2c19.js');
+require('./index.styles-2fc37e7a.js');
+var index = require('./index-6c650ac4.js');
 require('@mantine/hooks');
-require('./utils-b7fa667f.js');
-require('./index-114070f9.js');
-var index$1 = require('./index-bb5e8457.js');
-var context = require('./context-3aaeaa26.js');
-var Locale = require('./Locale-0aa25e48.js');
+require('./utils-053ed913.js');
+require('./index-93151a6e.js');
+var index$1 = require('./index-0cb74f84.js');
+var context = require('./context-60530f29.js');
+var Locale = require('./Locale-a4854278.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
 
@@ -39,77 +38,88 @@ const DefaultForm = (props) => {
     const { t, locale } = index.useTranslations();
     const { classes: cardWrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = React.useContext(BmiFormContext);
+    const radioStyle = {
+        body: {
+            alignItems: 'center',
+        },
+    };
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
-                    return (React__default["default"].createElement(index$2.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
-                } })),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                            t('bmi.ageInput'),
-                            ' ',
-                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: '25',
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                            t('bmi.heightInput'),
-                            ' ',
-                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                            t('bmi.weightInput'),
-                            ' ',
-                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-                } })),
-        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
-                        return (React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+        React__default["default"].createElement(core.Grid, { gutter: 4, px: 16 },
+            React__default["default"].createElement(core.Grid.Col, { span: 12 },
+                React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                        return (React__default["default"].createElement(index$2.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
                     } })),
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                        return (React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(index$4.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+            React__default["default"].createElement(core.Grid.Col, { span: 12 },
+                React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                        return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
+                                rightSection: formWrapperClasses.inputRightSection,
+                            } }));
                     } })),
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { sx: { paddingLeft: 0, paddingRight: 0 } },
-                React__default["default"].createElement(core.Stack, { className: core.clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock), spacing: 16, sx: {
-                        paddingLeft: 16,
-                        paddingRight: 16,
-                    } },
-                    React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
-                            var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
-                            return (React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
-                        } }),
-                    React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
+            React__default["default"].createElement(core.Grid.Col, { span: 12 },
+                React__default["default"].createElement(core.Grid, { gutter: 8 },
+                    React__default["default"].createElement(core.Grid.Col, { span: 6 },
+                        React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } })),
+                    React__default["default"].createElement(core.Grid.Col, { span: 6 },
+                        React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } }))))),
+        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(core.Grid, { gutter: 4, px: 16 },
+                React__default["default"].createElement(core.Grid.Col, null,
+                    React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                            return (React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                                React__default["default"].createElement(core.Flex, { gap: "lg" },
+                                    React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(index$4.Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(index$4.Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } })),
+                React__default["default"].createElement(core.Grid.Col, null,
+                    React__default["default"].createElement(reactHookForm.Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                            return (React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(index$4.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                                React__default["default"].createElement(core.Flex, { gap: "lg" },
+                                    React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(index$4.Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(index$4.Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } }))),
+            React__default["default"].createElement(core.Box, { className: core.clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
+                React__default["default"].createElement(core.Grid, { gutter: 8, px: 16, py: 12 },
+                    React__default["default"].createElement(core.Grid.Col, null,
+                        React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                                var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
+                                return (React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p2" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                            } })),
+                    React__default["default"].createElement(core.Grid.Col, null,
+                        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default["default"].createElement(core.Box, { px: 16, sx: { paddingBottom: 8 } },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))));
 };
 
 var useStyles = core.createStyles((theme) => {
     return {
         newsletterBlock: {
             backgroundColor: theme.colors.neutral[0],
-            padding: `${core.rem(16)} 0`,
             borderBottomLeftRadius: 'inherit',
             borderBottomRightRadius: 'inherit',
             '.bmi-btn': {
                 marginTop: 0,
             },
         },
+        inputRightSection: {
+            fontSize: core.rem(13),
+            lineHeight: core.rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
     };
 });
 
@@ -178,7 +188,7 @@ const InlineForm = (props) => {
                             React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
                     } }),
                 React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
-                    React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: core.clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { py: 16, className: core.clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
                 React__default["default"].createElement(core.Stack, { spacing: 16 },
                     React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
                             var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);

package/build/{index-f0ddbead.js → index-8fc85234.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
 var core = require('@mantine/core');
 var vaul = require('vaul');
 var styled = require('@emotion/styled');
-var index = require('./index-4af2fae3.js');
+var index = require('./index-03e1d5fd.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ba405bcc.js → index-8fd14974.js}

@@ -1,29 +1,29 @@
 'use strict';
 
 var React = require('react');
-var index$3 = require('./index-7deb6095.js');
-var index$1 = require('./index-5a830abd.js');
-var index$2 = require('./index-9a41f4c2.js');
-var utils = require('./utils-b7fa667f.js');
+var index$3 = require('./index-3e3c4e5c.js');
+var index$1 = require('./index-e8b6202b.js');
+var index$2 = require('./index-51229c6c.js');
+var utils = require('./utils-053ed913.js');
 var ReactDOM = require('react-dom');
-var togetherComponentGlobalContext = require('./utils-b29201f8.js');
+var togetherComponentGlobalContext = require('./utils-95a57727.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
-var index$6 = require('./index-0d497b99.js');
-var index$4 = require('./index-775fa3c5.js');
-var dataTransform = require('./dataTransform-fce5ba90.js');
-var constants = require('./constants-32bfbdcf.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
+var index$6 = require('./index-51161bde.js');
+var index$4 = require('./index-6c650ac4.js');
+var dataTransform = require('./dataTransform-f6230995.js');
+var constants = require('./constants-04b49430.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var post = require('./post-75f0383c.js');
-var index$8 = require('./index-1476e100.js');
-var index$7 = require('./index-a6764c8d.js');
-var index$5 = require('./index-ddf68858.js');
-var togetherRichTextEditor = require('./editor-8c681d53.js');
+var post = require('./post-2bab3150.js');
+var index$8 = require('./index-998449e8.js');
+var index$7 = require('./index-8474f1a3.js');
+var index$5 = require('./index-341fc2a3.js');
+var togetherRichTextEditor = require('./editor-71920f9a.js');
 var core = require('@mantine/core');
 var other = require('@hhgtech/icons/other');
-var index = require('./index-292b5020.js');
-var togetherMoleculesPostImagePreview = require('./index-36eda0ad.js');
+var index = require('./index-f9dfc14c.js');
+var togetherMoleculesPostImagePreview = require('./index-5c4d582b.js');
 var togetherShareBox = require('./togetherShareBox.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-ff23eaa6.js → index-9223c638.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
-require('./index-8402a791.js');
+require('./index-1d68a820.js');
 var styled = require('@emotion/styled');
-var index$1 = require('./index-d36d7cad.js');
+var index$1 = require('./index-25007710.js');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-cd41ab00.js');
-var index$2 = require('./index-6c3e5c66.js');
-var Locale = require('./Locale-0aa25e48.js');
-var index$3 = require('./index-6e5dcfb0.js');
+var index = require('./index-c14c419b.js');
+var index$2 = require('./index-7dca6243.js');
+var Locale = require('./Locale-a4854278.js');
+var index$3 = require('./index-248ff166.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-114070f9.js → index-93151a6e.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5e70b71c.js');
+var tslib_es6 = require('./tslib.es6-7c7d06ab.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index = require('./index-a80cc163.js');
-var index$1 = require('./index-9a41f4c2.js');
+var index = require('./index-fef96902.js');
+var index$1 = require('./index-51229c6c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }