@hhgtech/hhg-components 1.29.50 → 1.29.52

package/build/{index-08cd8d89.js → index-b3b3b671.js}

@@ -2,36 +2,33 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-0aa72d17.js');
-var index_styles = require('./index.styles-6c93de7f.js');
-var index = require('./index-45a0e378.js');
-var theme = require('./theme-96521ad9.js');
-var index$1 = require('./index-2ac1aef4.js');
-var index$2 = require('./index-63f65918.js');
-var useScrollbarSize = require('./useScrollbarSize-535e231b.js');
+var utils = require('./utils-6b130b4d.js');
+var index_styles = require('./index.styles-a831c092.js');
+var index = require('./index-ad05c025.js');
+var theme = require('./theme-000e9faf.js');
+var index$1 = require('./index-6d6aa136.js');
+var index$2 = require('./index-f8aa0489.js');
+var useScrollbarSize = require('./useScrollbarSize-e31eaad0.js');
 var ReactDOM = require('react-dom');
 var styled = require('@emotion/styled');
-var utils$1 = require('./utils-05ac5a9f.js');
-var tslib_es6 = require('./tslib.es6-6acd8f78.js');
-var yup = require('@hookform/resolvers/yup');
-var index$7 = require('./index-4a248667.js');
-var reactHookForm = require('react-hook-form');
-var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-28749094.js');
-var index$3 = require('./index-b7a61ad0.js');
-var index$5 = require('./index-093a15c9.js');
-require('./utils-5fe87759.js');
-var index$6 = require('./index-5e7693cb.js');
-var useTranslations = require('./useTranslations-bc60e1a4.js');
+var utils$1 = require('./utils-116a01c0.js');
+var tslib_es6 = require('./tslib.es6-74ec9016.js');
+var form = require('@mantine/form');
+var index$4 = require('./index-ce2c211e.js');
+var index$3 = require('./index-7d75636e.js');
+require('./constants-ae50d420.js');
+require('./index-42f69aed.js');
+require('./utils-c88d0fe2.js');
+var index$5 = require('./index-9abffef7.js');
+var useTranslations = require('./useTranslations-009eb48b.js');
 require('@mantine/hooks');
-require('./useMantineLocale-4a8a3d64.js');
-require('./index-923c1723.js');
-require('./WhatsApp-9f6f69af.js');
-require('./index.styled-b863d776.js');
-require('./index-95dd48d9.js');
-var constants = require('./constants-d3f55eb5.js');
+require('./useMantineLocale-b4e13a21.js');
+require('./index-b9de628d.js');
+require('./WhatsApp-f40127bd.js');
+require('./index.styled-42d385d1.js');
+require('./index-cbe6a47b.js');
+var other = require('@hhgtech/icons/other');
 require('@mantine/dates');
-require('date-fns');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -167,12 +164,14 @@ const StyledModal = utils$1.setDefaultClass(styled__default["default"].div `
         position: relative;
         z-index: 111;
         height: 100%;
+        padding: 24px;
       }
     }
     .hhg-modal__content {
       position: relative;
       z-index: 111;
       height: 100%;
+      padding: 16px;
     }
     .hhg-modal__video {
       position: relative;
@@ -393,17 +392,7 @@ const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, cla
                 children))), elRef.current);
 };
 
-exports.DueDateCalculatorType = void 0;
-(function (DueDateCalculatorType) {
-    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
-    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
-    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
-})(exports.DueDateCalculatorType || (exports.DueDateCalculatorType = {}));
-const DateToInputValue = (date) => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-};
-
-var useStyles$9 = core.createStyles(() => {
+var useStyles$a = core.createStyles(() => {
     return {
         root: {
             justifyContent: 'flex-start',
@@ -424,7 +413,7 @@ var useStyles$9 = core.createStyles(() => {
 
 const ChipGroup = (_a) => {
     var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = tslib_es6.__rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
-    const { classes, theme } = useStyles$9(undefined, {
+    const { classes, theme } = useStyles$a(undefined, {
         name: 'ChipGroup',
         classNames,
         styles,
@@ -491,7 +480,7 @@ const ChipGroup = (_a) => {
 
 const FormLayoutContext = React.createContext({});
 
-const useStyles$8 = core.createStyles(() => {
+const useStyles$9 = core.createStyles(() => {
     return {
         root: {
             display: 'flex',
@@ -502,7 +491,7 @@ const useStyles$8 = core.createStyles(() => {
 });
 const FormRow = (_a) => {
     var { styles, classNames, className, children } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className", "children"]);
-    const { classes, cx } = useStyles$8(undefined, {
+    const { classes, cx } = useStyles$9(undefined, {
         name: 'HealthToolFormWrapper__FormRow',
         styles,
         classNames,
@@ -510,7 +499,7 @@ const FormRow = (_a) => {
     return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, props), children));
 };
 
-var useStyles$7 = core.createStyles((theme, { formLayout }) => {
+var useStyles$8 = core.createStyles((theme, { formLayout }) => {
     return {
         root: {
             display: 'flex',
@@ -532,7 +521,7 @@ var useStyles$7 = core.createStyles((theme, { formLayout }) => {
     };
 });
 
-const useStyles$6 = core.createStyles((theme, { formLayout }) => {
+const useStyles$7 = core.createStyles((theme, { formLayout }) => {
     const isMarryBaby = theme.other.template === 'mb';
     return {
         root: Object.assign(Object.assign({ minWidth: core.rem(180) }, (formLayout === 'inline' && {
@@ -546,7 +535,7 @@ const useStyles$6 = core.createStyles((theme, { formLayout }) => {
 const SubmitBtn = (_a) => {
     var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
     const { formLayout } = React.useContext(FormLayoutContext);
-    const { classes, cx } = useStyles$6({ formLayout }, {
+    const { classes, cx } = useStyles$7({ formLayout }, {
         name: 'HealthToolFormWrapper__SubmitBtn',
         styles,
         classNames,
@@ -589,7 +578,7 @@ const Switching = (_a) => {
             }) }))));
 };
 
-const useStyles$5 = core.createStyles((theme) => {
+const useStyles$6 = core.createStyles((theme) => {
     return {
         root: {
             color: theme.colors.gray[6],
@@ -600,7 +589,7 @@ const useStyles$5 = core.createStyles((theme) => {
 });
 const Unit = (_a) => {
     var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$5(undefined, {
+    const { classes, cx } = useStyles$6(undefined, {
         name: 'HealthToolFormWrapper__UnitText',
         styles,
         classNames,
@@ -608,7 +597,7 @@ const Unit = (_a) => {
     return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
 };
 
-var useStyles$4 = core.createStyles(() => {
+var useStyles$5 = core.createStyles(() => {
     return {
         root: {
             display: 'flex',
@@ -649,7 +638,7 @@ var useStyles$4 = core.createStyles(() => {
 
 const BorderBoxControl = (_a) => {
     var { label, rightSection, children, styles, className, classNames } = _a, props = tslib_es6.__rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
-    const { classes, cx } = useStyles$4(undefined, {
+    const { classes, cx } = useStyles$5(undefined, {
         name: 'HealthToolFormWrapper__BorderBoxControl',
         styles,
         classNames,
@@ -661,7 +650,7 @@ const BorderBoxControl = (_a) => {
         rightSection && (React__default["default"].createElement(core.Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default["default"].createElement(index.Text, { size: "p4" }, rightSection)) : (rightSection)))));
 };
 
-var useStyles$3 = core.createStyles((theme, { width, direction }) => {
+var useStyles$4 = core.createStyles((theme, { width, direction }) => {
     return {
         row: {
             display: 'flex',
@@ -699,7 +688,7 @@ var useStyles$3 = core.createStyles((theme, { width, direction }) => {
 });
 
 const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, }) => {
-    const { classes } = useStyles$3({ width, direction }, {
+    const { classes } = useStyles$4({ width, direction }, {
         name: 'HealthToolFormWrapper__BorderInlineControl',
         styles,
         classNames,
@@ -709,7 +698,7 @@ const BorderInlineControl = ({ label, children, styles, classNames, direction =
         React__default["default"].createElement(core.Box, { className: classes.content }, flattenChildren__default["default"](children).map((i, idx) => (React__default["default"].createElement(core.Box, { key: idx, className: classes.control }, i))))));
 };
 
-const useStyles$2 = core.createStyles(() => {
+const useStyles$3 = core.createStyles(() => {
     return {
         root: {
             color: 'red',
@@ -720,7 +709,7 @@ const useStyles$2 = core.createStyles(() => {
 });
 const Error = (_a) => {
     var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
+    const { classes, cx } = useStyles$3(undefined, {
         name: 'HealthToolFormWrapper__UnitText',
         styles,
         classNames,
@@ -728,7 +717,7 @@ const Error = (_a) => {
     return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
 };
 
-var useStyles$1 = core.createStyles((theme$1) => {
+var useStyles$2 = core.createStyles((theme$1) => {
     const isMarryBaby = theme$1.other.template === 'mb';
     return {
         root: {
@@ -743,7 +732,7 @@ var useStyles$1 = core.createStyles((theme$1) => {
 
 const Control = (_a) => {
     var { className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["className", "styles", "classNames"]);
-    const { classes, cx } = useStyles$1(undefined, {
+    const { classes, cx } = useStyles$2(undefined, {
         name: 'HealthToolFormWrapper__Control',
         styles,
         classNames,
@@ -754,7 +743,7 @@ const Control = (_a) => {
 const _HealthToolFormWrapper = (_a) => {
     var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = tslib_es6.__rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
     const formLayout = formLayoutProp || 'default';
-    const { classes, cx } = useStyles$7({ formLayout }, {
+    const { classes, cx } = useStyles$8({ formLayout }, {
         name: 'HealthToolFormWrapper',
         styles,
         classNames,
@@ -777,150 +766,39 @@ HealthToolFormWrapper.ChipGroup = ChipGroup;
 
 const BabyGrowthFormContext = React.createContext({});
 
-styled__default["default"](index_styles.PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.theme.mbColors.lightGray};
-    background-color: ${theme.theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled__default["default"](index$5.Input) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${theme.theme.mbColors.midGray};
-    pointer-events: none;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 240px;
-
-    &[data-size='label2'] {
-      font-size: 12px;
-    }
-
-    ${utils.MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.theme.mbColors.lightGray} !important;
-    background-color: ${theme.theme.colors.white};
-    border-radius: 16px !important;
-    transition: all 0.2s ease;
-    padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-
-    &:focus,
-    &:hover {
-      border-color: ${theme.theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-  .mantine-Input-rightSection,
-  .mantine-Input-leftSection {
-    padding-top: 20px;
-  }
-
-  &[data-has-action-icon] {
-    input,
-    .mantine-Input-input {
-      padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-      padding-bottom: ${(props) => (props.value ? '16px' : '27px')} !important;
-      height: unset !important;
-    }
-
-    label {
-      position: absolute;
-      z-index: 1;
-      top: 16px;
-      padding-right: 46px;
-    }
-  }
-`;
-
-styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-block: 40px;
-
-  &[data-theme='true'] {
-    padding-block: 0;
-    padding-top: 12px;
-  }
-`;
-const StyledFormControl = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: auto;
+const INPUT_RANGE = {
+    height: {
+        min: 1,
+        max: 300,
+    },
+    weight: {
+        min: 1,
+        max: 200,
+    },
+    pregnantWeek: {
+        min: 1,
+        max: 40,
+    },
+};
 
-  .error-input input {
-    border: 1px solid ${theme.theme.colors.red700};
-  }
-`;
-const StyledInlineLabel = styled__default["default"](constants.Label) `
-  display: inline-flex;
-  padding-bottom: 6px;
-  gap: 4px;
-`;
-const StyledRow = styled__default["default"].div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  > div {
-    width: 100%;
-  }
-`;
+var useStyles$1 = core.createStyles((theme) => {
+    return {
+        unit: {
+            color: theme.colors.gray[4],
+            fontWeight: 'normal',
+        },
+    };
+});
 
-const DefaultForm = (props) => {
+const DefaultForm = (_a) => {
+    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t } = useTranslations.useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, siteType, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { classes } = useStyles$1(undefined, {
+        name: 'BabyGrowthForm__DefaultForm',
+        styles,
+        classNames,
+    });
     const commonDateProps = {
         placeholder: 'DD/MM/YYYY',
         popoverProps: {
@@ -928,67 +806,44 @@ const DefaultForm = (props) => {
         },
     };
     return (React__default["default"].createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.Control, null,
-                React__default["default"].createElement(GenderOptionControl, { isBaby: true, genderValue: {
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(HealthToolFormWrapper.Control, null,
+                React__default["default"].createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                         male: 'boy',
                         female: 'girl',
-                    }, onChange: onChange }))) }),
-        siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
-            React__default["default"].createElement(StyledRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
-            React__default["default"].createElement(StyledRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
-                                    ? 'error-input'
-                                    : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
-                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), maxDate: new Date(), onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
-            React__default["default"].createElement(HealthToolFormWrapper.Submit, { type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                        React__default["default"].createElement(index.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default["default"].createElement(StyledRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg'))),
-                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
-            React__default["default"].createElement(StyledRow, null,
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
-                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
-                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                        React__default["default"].createElement(index$5.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
-                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                        React__default["default"].createElement(index.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default["default"].createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", variant: 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))))));
+                    } }, form.getInputProps('gender'), { error: null }))),
+            form.errors.gender && (React__default["default"].createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Input.Wrapper, { label: 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(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default["default"].createElement(index$4.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: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('height').onChange(v);
+            } })),
+        React__default["default"].createElement(index$4.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: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('weight').onChange(v);
+            } })),
+        React__default["default"].createElement(index$4.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.kg'))) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('head').onChange(v);
+            } })),
+        form.errors.checkMesureVal && (React__default["default"].createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Input.Wrapper, { label: 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(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        React__default["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'))));
 };
 
 var useStyles = core.createStyles((theme) => {
@@ -1008,54 +863,6 @@ var useStyles = core.createStyles((theme) => {
     };
 });
 
-const InlineForm = (_a) => {
-    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations.useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, submitProps } = React.useContext(BabyGrowthFormContext);
-    const { classes, cx } = useStyles(undefined, {
-        name: 'BabyGrowthForm__InlineForm',
-        styles,
-        classNames,
-    });
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default["default"].createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline", className: classes.root }, props),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
-                React__default["default"].createElement(GenderOptionControl, { type: "radio", hideLabel: true, isBaby: true, genderValue: {
-                        male: 'boy',
-                        female: 'girl',
-                    }, onChange: onChange }))) }),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
-                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { className: cx(error ? 'error' : ''), onChange: onChange, maxDate: new Date() }))));
-            } }),
-        React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
-                control: {
-                    '&:first-child': {
-                        width: 'auto',
-                    },
-                },
-            } },
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index.Text, { size: "p3" },
-                        React__default["default"].createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
-                        t('babyGrowth.kg.m2')))) }),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default["default"].createElement(index$4.Input, { name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))) }),
-            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default["default"].createElement(index$4.Input, { name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))) })),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.headCircumference') },
-                React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default["default"].createElement(index$4.Input, { name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))) }),
-        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
-                React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
-        React__default["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'))));
-};
-
 /**
  * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
  * @param {number} num - Number to convert
@@ -1089,42 +896,103 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
+const InlineForm = (_a) => {
+    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations.useTranslations();
+    const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { classes } = useStyles(undefined, {
+        name: 'BabyGrowthForm__InlineForm',
+        styles,
+        classNames,
+    });
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default["default"].createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
+                React__default["default"].createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: 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(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
+                    control: {
+                        '&:first-child': {
+                            width: 'auto',
+                        },
+                    },
+                } },
+                React__default["default"].createElement(index.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))),
+                    t('babyGrowth.kg.m2')),
+                React__default["default"].createElement(index$4.Input.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);
+                    }, rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                React__default["default"].createElement(index$4.Input.Number, Object.assign({}, 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);
+                    }, rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+            React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
+                React__default["default"].createElement(index$4.Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                        v && form.validateField('checkMesureVal');
+                        form.getInputProps('head').onChange(v);
+                    }, rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+            form.errors.checkMesureVal && (React__default["default"].createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
+        React__default["default"].createElement(HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
+                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(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        React__default["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 BabyGrowthForm = (_a) => {
-    var { onSubmit, onError, schema, formLayout = 'default', submitProps } = _a, rest = tslib_es6.__rest(_a, ["onSubmit", "onError", "schema", "formLayout", "submitProps"]);
-    const theme = core.useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
-    const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = reactHookForm.useForm({
-        resolver: yup.yupResolver(schema),
-        mode: 'onSubmit',
-        defaultValues: {
-            name: '',
-            gender: index$7.Gender.Boy,
+    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = tslib_es6.__rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
+    const { t } = useTranslations.useTranslations();
+    const form$1 = form.useForm({
+        initialValues: {
             measurementDate: new Date(),
         },
+        validate: {
+            gender: form.isNotEmpty(t('validation.error.requiredField')),
+            birthday: form.isNotEmpty(t('validation.error.requiredField')),
+            measurementDate: (value, values) => {
+                return values.birthday
+                    ? values.birthday instanceof Date &&
+                        value instanceof Date &&
+                        values.birthday.getTime() <= value.getTime()
+                        ? null
+                        : t('babyGrowth.error.measurementDateLowerThanBirthday', {
+                            name: '',
+                        })
+                    : null;
+            },
+            checkMesureVal: (_value, values) => {
+                return values.head || values.height || values.weight
+                    ? null
+                    : t('babyGrowth.error.atLeastOneOf');
+            },
+        },
     });
-    const weight = watch('weight');
-    const height = watch('height');
-    const head = watch('head');
-    const isEmptyThreeFields = React.useMemo(() => isSubmitted && !weight && !height && !head, [isSubmitted, weight, height, head]);
-    React.useEffect(() => {
-        const bmi = bmiCalculate(height, weight);
-        setValue('bmi', String(bmi) || '0');
-    }, [weight, height]);
-    const currentUrl = React.useMemo(() => {
-        if (typeof window !== 'undefined') {
-            return window.location.href;
-        }
-        else
-            return '';
-    }, []);
-    const commonProps = Object.assign({ onSubmit: handleSubmit(onSubmit, onError) }, rest);
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form$1.getInputProps('height').value), Number(form$1.getInputProps('weight').value)).toString() }))) }, rest);
     return (React__default["default"].createElement(BabyGrowthFormContext.Provider, { value: {
-            isEmptyThreeFields,
-            control,
-            currentUrl,
-            siteType,
             submitProps,
+            currentUrl,
+            form: form$1,
         } }, formLayout === 'default' ? (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps)))));
 };
 
@@ -1132,5 +1000,6 @@ exports.BabyGrowthForm = BabyGrowthForm;
 exports.Drawer = Drawer;
 exports.GenderOptionControl = GenderOptionControl;
 exports.HealthToolFormWrapper = HealthToolFormWrapper;
+exports.INPUT_RANGE = INPUT_RANGE;
 exports.Modal = Modal;
 exports.RadioImageGroup = RadioImageGroup;