@hhgtech/hhg-components 1.29.50 → 1.29.52

package/build/esm/{index-19f4092d.js → index-26808cfe.js}

@@ -1,35 +1,32 @@
 import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
 import { Portal, Box, Flex, rem, createStyles, Input, Chip, useMantineTheme, Switch } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-e45859ac.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$a, P as PureInput } from './index.styles-7320c409.js';
-import { T as Text } from './index-61feed82.js';
-import { t as theme } from './theme-74f03581.js';
-import { M as MarryBabyText } from './index-ca3fe93b.js';
-import { T as Text$1 } from './index-ae40da42.js';
-import { u as useScrollbarSize } from './useScrollbarSize-df8e096a.js';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-fb3af6f2.js';
+import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$b } from './index.styles-c952a50d.js';
+import { T as Text } from './index-5c40f305.js';
+import { t as theme } from './theme-1d964e10.js';
+import { M as MarryBabyText } from './index-4aaf653e.js';
+import { T as Text$1 } from './index-065ddaab.js';
+import { u as useScrollbarSize } from './useScrollbarSize-1ea0e6f3.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { s as setDefaultClass } from './utils-5add73a5.js';
-import { _ as __rest } from './tslib.es6-2db0387d.js';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { G as Gender } from './index-c96af862.js';
-import { Controller, useForm } from 'react-hook-form';
-import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
-import { R as Radio, B as Button, c as Input$2 } from './index-82899714.js';
-import { C as CommonGAssets } from './index-f39a4894.js';
-import { I as Input$1 } from './index-b13711f0.js';
-import './utils-05639753.js';
-import { D as DatePicker } from './index-15a971ba.js';
-import { u as useTranslations } from './useTranslations-92cd9bf1.js';
+import { s as setDefaultClass } from './utils-f8e04d49.js';
+import { _ as __rest } from './tslib.es6-774c232c.js';
+import { useForm, isNotEmpty } from '@mantine/form';
+import { R as Radio, B as Button, c as Input$1 } from './index-d1a29587.js';
+import { C as CommonGAssets } from './index-249e0999.js';
+import './constants-3e3e3680.js';
+import './index-ad64a253.js';
+import './utils-18d37208.js';
+import { D as DatePicker } from './index-ab3620a8.js';
+import { u as useTranslations } from './useTranslations-1224dd3c.js';
 import '@mantine/hooks';
-import './useMantineLocale-71f69a40.js';
-import './index-b3a3e26b.js';
-import './WhatsApp-1be66710.js';
-import './index.styled-f4fc1284.js';
-import './index-530a553a.js';
-import { L as Label } from './constants-4a7e0e4d.js';
+import './useMantineLocale-ff4c2bdd.js';
+import './index-5cd52fbe.js';
+import './WhatsApp-2e4a47c3.js';
+import './index.styled-5e0dbc0e.js';
+import './index-7349f216.js';
+import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import '@mantine/dates';
-import 'date-fns';
 import flattenChildren from 'react-keyed-flatten-children';
 
 const Backdrop = ({ open = false, onClickOutside, }) => {
@@ -101,7 +98,7 @@ const GenderOptionControl = (_a) => {
         female: 'female',
     }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
     const { t } = useTranslations();
-    const { classes, cx, theme } = useStyles$a({ type }, {
+    const { classes, cx, theme } = useStyles$b({ type }, {
         name: 'GenderOptionControl',
         styles,
     });
@@ -159,12 +156,14 @@ const StyledModal = setDefaultClass(styled.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;
@@ -385,17 +384,7 @@ const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, cla
                 children))), elRef.current);
 };
 
-var DueDateCalculatorType;
-(function (DueDateCalculatorType) {
-    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
-    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
-    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
-})(DueDateCalculatorType || (DueDateCalculatorType = {}));
-const DateToInputValue = (date) => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-};
-
-var useStyles$9 = createStyles(() => {
+var useStyles$a = createStyles(() => {
     return {
         root: {
             justifyContent: 'flex-start',
@@ -416,7 +405,7 @@ var useStyles$9 = createStyles(() => {
 
 const ChipGroup = (_a) => {
     var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
-    const { classes, theme } = useStyles$9(undefined, {
+    const { classes, theme } = useStyles$a(undefined, {
         name: 'ChipGroup',
         classNames,
         styles,
@@ -483,7 +472,7 @@ const ChipGroup = (_a) => {
 
 const FormLayoutContext = createContext({});
 
-const useStyles$8 = createStyles(() => {
+const useStyles$9 = createStyles(() => {
     return {
         root: {
             display: 'flex',
@@ -494,7 +483,7 @@ const useStyles$8 = createStyles(() => {
 });
 const FormRow = (_a) => {
     var { styles, classNames, className, children } = _a, props = __rest(_a, ["styles", "classNames", "className", "children"]);
-    const { classes, cx } = useStyles$8(undefined, {
+    const { classes, cx } = useStyles$9(undefined, {
         name: 'HealthToolFormWrapper__FormRow',
         styles,
         classNames,
@@ -502,7 +491,7 @@ const FormRow = (_a) => {
     return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, props), children));
 };
 
-var useStyles$7 = createStyles((theme, { formLayout }) => {
+var useStyles$8 = createStyles((theme, { formLayout }) => {
     return {
         root: {
             display: 'flex',
@@ -524,7 +513,7 @@ var useStyles$7 = createStyles((theme, { formLayout }) => {
     };
 });
 
-const useStyles$6 = createStyles((theme, { formLayout }) => {
+const useStyles$7 = createStyles((theme, { formLayout }) => {
     const isMarryBaby = theme.other.template === 'mb';
     return {
         root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
@@ -538,7 +527,7 @@ const useStyles$6 = createStyles((theme, { formLayout }) => {
 const SubmitBtn = (_a) => {
     var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
     const { formLayout } = useContext(FormLayoutContext);
-    const { classes, cx } = useStyles$6({ formLayout }, {
+    const { classes, cx } = useStyles$7({ formLayout }, {
         name: 'HealthToolFormWrapper__SubmitBtn',
         styles,
         classNames,
@@ -581,7 +570,7 @@ const Switching = (_a) => {
             }) }))));
 };
 
-const useStyles$5 = createStyles((theme) => {
+const useStyles$6 = createStyles((theme) => {
     return {
         root: {
             color: theme.colors.gray[6],
@@ -592,7 +581,7 @@ const useStyles$5 = createStyles((theme) => {
 });
 const Unit = (_a) => {
     var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$5(undefined, {
+    const { classes, cx } = useStyles$6(undefined, {
         name: 'HealthToolFormWrapper__UnitText',
         styles,
         classNames,
@@ -600,7 +589,7 @@ const Unit = (_a) => {
     return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
 };
 
-var useStyles$4 = createStyles(() => {
+var useStyles$5 = createStyles(() => {
     return {
         root: {
             display: 'flex',
@@ -641,7 +630,7 @@ var useStyles$4 = createStyles(() => {
 
 const BorderBoxControl = (_a) => {
     var { label, rightSection, children, styles, className, classNames } = _a, props = __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,
@@ -653,7 +642,7 @@ const BorderBoxControl = (_a) => {
         rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : (rightSection)))));
 };
 
-var useStyles$3 = createStyles((theme, { width, direction }) => {
+var useStyles$4 = createStyles((theme, { width, direction }) => {
     return {
         row: {
             display: 'flex',
@@ -691,7 +680,7 @@ var useStyles$3 = 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,
@@ -701,7 +690,7 @@ const BorderInlineControl = ({ label, children, styles, classNames, direction =
         React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))));
 };
 
-const useStyles$2 = createStyles(() => {
+const useStyles$3 = createStyles(() => {
     return {
         root: {
             color: 'red',
@@ -712,7 +701,7 @@ const useStyles$2 = createStyles(() => {
 });
 const Error = (_a) => {
     var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
+    const { classes, cx } = useStyles$3(undefined, {
         name: 'HealthToolFormWrapper__UnitText',
         styles,
         classNames,
@@ -720,7 +709,7 @@ const Error = (_a) => {
     return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
 };
 
-var useStyles$1 = createStyles((theme$1) => {
+var useStyles$2 = createStyles((theme$1) => {
     const isMarryBaby = theme$1.other.template === 'mb';
     return {
         root: {
@@ -735,7 +724,7 @@ var useStyles$1 = createStyles((theme$1) => {
 
 const Control = (_a) => {
     var { className, styles, classNames } = _a, rest = __rest(_a, ["className", "styles", "classNames"]);
-    const { classes, cx } = useStyles$1(undefined, {
+    const { classes, cx } = useStyles$2(undefined, {
         name: 'HealthToolFormWrapper__Control',
         styles,
         classNames,
@@ -746,7 +735,7 @@ const Control = (_a) => {
 const _HealthToolFormWrapper = (_a) => {
     var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __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,
@@ -769,150 +758,39 @@ HealthToolFormWrapper.ChipGroup = ChipGroup;
 
 const BabyGrowthFormContext = createContext({});
 
-styled(PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.mbColors.lightGray};
-    background-color: ${theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled(Input$1) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${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;
-    }
-
-    ${MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.mbColors.lightGray} !important;
-    background-color: ${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.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.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-block: 40px;
-
-  &[data-theme='true'] {
-    padding-block: 0;
-    padding-top: 12px;
-  }
-`;
-const StyledFormControl = styled.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.colors.red700};
-  }
-`;
-const StyledInlineLabel = styled(Label) `
-  display: inline-flex;
-  padding-bottom: 6px;
-  gap: 4px;
-`;
-const StyledRow = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  > div {
-    width: 100%;
-  }
-`;
+var useStyles$1 = createStyles((theme) => {
+    return {
+        unit: {
+            color: theme.colors.gray[4],
+            fontWeight: 'normal',
+        },
+    };
+});
 
-const DefaultForm = (props) => {
+const DefaultForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t } = useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, siteType, submitProps } = useContext(BabyGrowthFormContext);
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes } = useStyles$1(undefined, {
+        name: 'BabyGrowthForm__DefaultForm',
+        styles,
+        classNames,
+    });
     const commonDateProps = {
         placeholder: 'DD/MM/YYYY',
         popoverProps: {
@@ -920,67 +798,44 @@ const DefaultForm = (props) => {
         },
     };
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default.createElement(HealthToolFormWrapper.Control, null,
-                React__default.createElement(GenderOptionControl, { isBaby: true, genderValue: {
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                         male: 'boy',
                         female: 'girl',
-                    }, onChange: onChange }))) }),
-        siteType === 'marryBaby' ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default.createElement(CalendarMB, { size: 32 }) })) }))) }),
-            React__default.createElement(StyledRow, null,
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(StyledRow, null,
-                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
-            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default.createElement(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.createElement(CalendarMB, { size: 32 }) })) }))) }),
-            React__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.createElement(React__default.Fragment, null,
-            React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
-                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
-                    React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
-            React__default.createElement(StyledRow, null,
-                React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg'))),
-                        React__default.createElement(Input$1, { 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.createElement(StyledRow, null,
-                React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
-                            React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                        React__default.createElement(Input$1, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
-            React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
-                    React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
-                        React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
-                    React__default.createElement(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.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.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input$1.Wrapper, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.height'),
+                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.cm'))) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('height').onChange(v);
+            } })),
+        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.weight'),
+                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.kg'))) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('weight').onChange(v);
+            } })),
+        React__default.createElement(Input$1.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.head'),
+                React__default.createElement("span", { className: classes.unit }, t('babyGrowth.kg'))) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                v && form.validateField('checkMesureVal');
+                form.getInputProps('head').onChange(v);
+            } })),
+        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input$1.Wrapper, { label: t('babyGrowth.input.measurementDate') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
+            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
 };
 
 var useStyles = createStyles((theme) => {
@@ -1000,54 +855,6 @@ var useStyles = createStyles((theme) => {
     };
 });
 
-const InlineForm = (_a) => {
-    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
-    const { t } = useTranslations();
-    const { control, currentUrl, isEmptyThreeFields, submitProps } = useContext(BabyGrowthFormContext);
-    const { classes, cx } = useStyles(undefined, {
-        name: 'BabyGrowthForm__InlineForm',
-        styles,
-        classNames,
-    });
-    const commonDateProps = {
-        placeholder: 'DD/MM/YYYY',
-        popoverProps: {
-            withinPortal: true,
-        },
-    };
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline", className: classes.root }, props),
-        React__default.createElement(Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
-                React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, isBaby: true, genderValue: {
-                        male: 'boy',
-                        female: 'girl',
-                    }, onChange: onChange }))) }),
-        React__default.createElement(Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
-                    React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { className: cx(error ? 'error' : ''), onChange: onChange, maxDate: new Date() }))));
-            } }),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
-                control: {
-                    '&:first-child': {
-                        width: 'auto',
-                    },
-                },
-            } },
-            React__default.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Text, { size: "p3" },
-                        React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
-                        t('babyGrowth.kg.m2')))) }),
-            React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))) }),
-            React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))) })),
-        React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.headCircumference') },
-                React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))) }),
-        React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
-                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
-};
-
 /**
  * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
  * @param {number} num - Number to convert
@@ -1081,43 +888,104 @@ const bmiCalculate = (height = 0, weight = 0) => {
     return 0;
 };
 
+const InlineForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations();
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes } = useStyles(undefined, {
+        name: 'BabyGrowthForm__InlineForm',
+        styles,
+        classNames,
+    });
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
+                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
+                    control: {
+                        '&:first-child': {
+                            width: 'auto',
+                        },
+                    },
+                } },
+                React__default.createElement(Text, { size: "p3" },
+                    React__default.createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
+                        form.getInputProps('weight').value &&
+                        bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
+                    t('babyGrowth.kg.m2')),
+                React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                        v && form.validateField('checkMesureVal');
+                        form.getInputProps('height').onChange(v);
+                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                React__default.createElement(Input$1.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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
+                React__default.createElement(Input$1.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                        v && form.validateField('checkMesureVal');
+                        form.getInputProps('head').onChange(v);
+                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+            form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
+            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+};
+
 const BabyGrowthForm = (_a) => {
-    var { onSubmit, onError, schema, formLayout = 'default', submitProps } = _a, rest = __rest(_a, ["onSubmit", "onError", "schema", "formLayout", "submitProps"]);
-    const theme = useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
-    const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = useForm({
-        resolver: yupResolver(schema),
-        mode: 'onSubmit',
-        defaultValues: {
-            name: '',
-            gender: Gender.Boy,
+    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
+    const { t } = useTranslations();
+    const form = useForm({
+        initialValues: {
             measurementDate: new Date(),
         },
+        validate: {
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            birthday: 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 = useMemo(() => isSubmitted && !weight && !height && !head, [isSubmitted, weight, height, head]);
-    useEffect(() => {
-        const bmi = bmiCalculate(height, weight);
-        setValue('bmi', String(bmi) || '0');
-    }, [weight, height]);
-    const currentUrl = 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.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value)).toString() }))) }, rest);
     return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
-            isEmptyThreeFields,
-            control,
-            currentUrl,
-            siteType,
             submitProps,
+            currentUrl,
+            form,
         } }, formLayout === 'default' ? (React__default.createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
 };
 
-export { BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, Modal as M, RadioImageGroup as R, DueDateCalculatorType as a };
+export { BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, INPUT_RANGE as I, Modal as M, RadioImageGroup as R };