@hhgtech/hhg-components 1.29.82 → 1.29.83

package/build/{index-71843eb4.js → index-6bcde89a.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
-var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
+var togetherComponentGlobalContext = require('./utils-e4d5701e.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -31,7 +31,7 @@ const StyledUserAvatar = styled__default["default"].div `
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${theme.theme.colors.secondaryBase};
+    background-color: ${miscTheme.theme.colors.secondaryBase};
     border-radius: 50%;
     color: white;
     font-size: 1em;
@@ -41,7 +41,7 @@ const StyledUserAvatar = styled__default["default"].div `
 
   &[data-is-marrybaby='true'] {
     .avatar-default {
-      background-color: ${theme.theme.mbColors.pink};
+      background-color: ${miscTheme.theme.mbColors.pink};
     }
   }
 `;

package/build/{index-7953fb8e.js → index-6daafc7b.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
-var utils = require('./utils-15a9772e.js');
+var miscTheme = require('./miscTheme.js');
+var utils = require('./utils-928b4701.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -18,15 +18,15 @@ const StyledInput = styled__default["default"].div `
 
   &[data-has-error] {
     input {
-      border-color: ${theme.theme.colors.red700};
+      border-color: ${miscTheme.theme.colors.red700};
     }
   }
 
   input {
     width: 100%;
     padding: 12px 16px;
-    border: solid 1px ${theme.theme.colors.gray200};
-    border-radius: ${theme.theme.borderRadius};
+    border: solid 1px ${miscTheme.theme.colors.gray200};
+    border-radius: ${miscTheme.theme.borderRadius};
 
     &:active,
     &:focus,
@@ -36,7 +36,7 @@ const StyledInput = styled__default["default"].div `
     }
 
     &:disabled {
-      background-color: ${theme.theme.colors.gray100};
+      background-color: ${miscTheme.theme.colors.gray100};
       cursor: not-allowed;
     }
   }
@@ -61,7 +61,7 @@ const StyledInput = styled__default["default"].div `
   &[data-size='lg'] {
     input {
       font-size: 16px;
-      font-weight: ${theme.theme.sizes.fwRegular};
+      font-weight: ${miscTheme.theme.sizes.fwRegular};
       ${utils.MediaQueries.mbDown} {
         font-size: 22px;
         line-height: 1.2;
@@ -75,7 +75,7 @@ const StyledInput = styled__default["default"].div `
   }
   &[data-size='md'] {
     input {
-      font-weight: ${theme.theme.sizes.fwRegular};
+      font-weight: ${miscTheme.theme.sizes.fwRegular};
       line-height: 22px;
       ${utils.MediaQueries.mbDown} {
         font-size: 14px;
@@ -90,7 +90,7 @@ const StyledInput = styled__default["default"].div `
   }
   &[data-size='sm'] {
     input {
-      font-weight: ${theme.theme.sizes.fwRegular};
+      font-weight: ${miscTheme.theme.sizes.fwRegular};
       line-height: 20px;
       ${utils.MediaQueries.mbDown} {
         font-size: 13px;
@@ -105,8 +105,8 @@ const StyledInput = styled__default["default"].div `
   }
 `;
 const StyledErrorLabel = styled__default["default"].label `
-  color: ${theme.theme.colors.red700};
-  font-weight: ${theme.theme.sizes.fwRegular};
+  color: ${miscTheme.theme.colors.red700};
+  font-weight: ${miscTheme.theme.sizes.fwRegular};
 `;
 const StyledActionIcon = styled__default["default"].div `
   position: absolute;

package/build/{index-64d8db08.js → index-6e7aede8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-e3bbd009.js');
-var isProduction = require('./isProduction-20cd663d.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';
@@ -16,7 +16,7 @@ class GAssets {
                     forceSubPath || this.subPath,
                     path,
                 ].join('/');
-            if (!isProduction.isProduction && !process.env.JEST_WORKER_ID) {
+            if (!constantsIsProduction.isProduction && !process.env.JEST_WORKER_ID) {
                 // don't add timestamp when running jest tests
                 // add timestamp to avoid caching if not production
                 return fileUrl + '?v=' + Math.floor(new Date().getTime() / 1000 / 60 / 3);
@@ -32,7 +32,7 @@ class GAssets {
         if (typeof window !== 'undefined') {
             const { host } = window.location;
             const hostParts = host.split('.');
-            const includeDomain = index.domainLocales[Object.keys(index.domainLocales).find((k) => host.includes(index.domainLocales[k]))];
+            const includeDomain = constantsDomainLocales.domainLocales[Object.keys(constantsDomainLocales.domainLocales).find((k) => host.includes(constantsDomainLocales.domainLocales[k]))];
             if (hostParts.includes('localhost') ||
                 hostParts.includes('hellohealthgroup') ||
                 hostParts.every((part) => isNumeric(part)) || // is IP address
@@ -48,7 +48,7 @@ const CommonGAssets = new GAssets();
 CommonGAssets.subPath = 'common';
 if (process.env.NEXT_PUBLIC_DEPLOY_LOCALE) {
     CommonGAssets.baseDomain =
-        index.domainLocales[process.env.NEXT_PUBLIC_DEPLOY_LOCALE];
+        constantsDomainLocales.domainLocales[process.env.NEXT_PUBLIC_DEPLOY_LOCALE];
 }
 
 exports.CommonGAssets = CommonGAssets;

package/build/index-6e85bdbb.js

@@ -0,0 +1,239 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var form = require('@mantine/form');
+var useHealthToolCache = require('./useHealthToolCache-9d59f009.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+var index$4 = require('./index-6e7aede8.js');
+var constants = require('./constants-1953275e.js');
+var index$1 = require('./index-48ef94cb.js');
+var index$3 = require('./index-df9447b3.js');
+var index$2 = require('./index-eeb7220e.js');
+require('@mantine/core');
+require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+require('@mantine/hooks');
+require('./index-d91f52cc.js');
+require('./utils-928b4701.js');
+require('./useMantineLocale-f9195d27.js');
+require('./index-617bff8c.js');
+require('./other-0edcc417.js');
+var index = require('./index-769ecf0d.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ThrFormContext = React.createContext({});
+
+const DefaultForm = (_a) => {
+    var _b;
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                content: '60',
+            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                rightSection: {
+                    width: 'auto',
+                },
+            }) })),
+        isAdult && (React__default["default"].createElement(index$3.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                value: option.value,
+                label: option.label,
+            })), styles: {
+                item: {
+                    whiteSpace: 'nowrap',
+                    padding: '10px 12px',
+                    fontSize: '14px',
+                },
+            }, withinPortal: true }, form.getInputProps('activeValue')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm = (_a) => {
+    var _b;
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
+                React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default["default"].createElement(index$3.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError, submitProps } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const minRange = React.useRef(40);
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const form$1 = form.useForm({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: form.isNotEmpty(t('validation.error.requiredField')),
+            age: form.isNotEmpty(t('validation.error.requiredField')),
+            heartRate: (value) => {
+                return Number(value) >= minRange.current && Number(value) <= 200
+                    ? null
+                    : t('tools.heartRateRangeErr', {
+                        min: minRange.current,
+                        max: 200,
+                    });
+            },
+        },
+    });
+    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
+    const [isAdult, setIsAdult] = React.useState(false);
+    const rangeHeartRateByAge = [
+        {
+            idAge: 0,
+            minAge: 0,
+            maxAge: 18,
+            rangeMale: 40,
+            rangeFemale: 40,
+        },
+        {
+            idAge: 1,
+            minAge: 18,
+            maxAge: 25,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 2,
+            minAge: 25,
+            maxAge: 35,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 3,
+            minAge: 35,
+            maxAge: 45,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 4,
+            minAge: 45,
+            maxAge: 55,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 5,
+            minAge: 55,
+            maxAge: 65,
+            rangeMale: 51,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 6,
+            minAge: 65,
+            maxAge: 120,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+    ];
+    const activeValueNote = [
+        {
+            value: 'low_intensity',
+            label: t('targetHeartRate.lowIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/low.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/low-active.svg`),
+            content: t('targetHeartRate.lowIntensity.note'),
+        },
+        {
+            value: 'moderate_intensity',
+            label: t('targetHeartRate.moderateIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/moderate.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/moderate-active.svg`),
+            content: t('targetHeartRate.moderateIntensity.note'),
+        },
+        {
+            value: 'aerobic_zone',
+            label: t('targetHeartRate.aerobicZone.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/aerobic.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
+            content: t('targetHeartRate.aerobicZone.note'),
+        },
+        {
+            value: 'vigorous_intensity',
+            label: t('targetHeartRate.vigorousIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/vigorous.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
+            content: t('targetHeartRate.vigorousIntensity.note'),
+        },
+        {
+            value: 'maximum_intensity',
+            label: t('targetHeartRate.maximumIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/maximum.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/maximum-active.svg`),
+            content: t('targetHeartRate.maximumIntensity.note'),
+        },
+    ];
+    React.useEffect(() => {
+        const ageDate = form$1.getInputProps('age').value;
+        const gender = form$1.getInputProps('gender').value;
+        if (ageDate instanceof Date) {
+            const age = (new Date().getTime() - ageDate.getTime()) / 1000;
+            if (age >= 18 * 365 * 24 * 60 * 60)
+                setIsAdult(true);
+            else
+                setIsAdult(false);
+            const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
+                age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
+            minRange.current =
+                gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
+        }
+    }, [form$1]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form$1.onSubmit(onSubmit, onError) });
+    return (React__default["default"].createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form: form$1,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.ThrForm = ThrForm;

package/build/{index-16ed0d98.js → index-70a7d73e.js}

@@ -1,15 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
-var useTranslations = require('./useTranslations-685f989b.js');
+var useTranslations = require('./useTranslations-80687df4.js');
 var core = require('@mantine/core');
-var paths = require('./paths-7da79c64.js');
-var constants = require('./constants-8743b014.js');
-var index$1 = require('./index-3eb666e6.js');
-var index = require('./index-e3bbd009.js');
-var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
-var isProduction = require('./isProduction-20cd663d.js');
+var paths = require('./paths-6b0114f1.js');
+var constants = require('./constants-2aeb65f2.js');
+var index = require('./index-8cb3f562.js');
+require('./index-617bff8c.js');
+var togetherComponentGlobalContext = require('./utils-e4d5701e.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -128,7 +129,7 @@ const BookingBtn = (_a) => {
             setLoading(true);
             const response = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(url, {
                 id: bookingId,
-                site: index.domainLocales[locale],
+                site: constantsDomainLocales.domainLocales[locale],
             }), 'get');
             if ((response === null || response === void 0 ? void 0 : response._status) === 1) {
                 const result = bookingType === 'doctor'
@@ -148,7 +149,7 @@ const BookingBtn = (_a) => {
                             slug: (_q = (_p = response === null || response === void 0 ? void 0 : response._data) === null || _p === void 0 ? void 0 : _p.service) === null || _q === void 0 ? void 0 : _q.slug,
                             localSlug: (_r = constants.LOCALIZED_SLUGS[locale]) === null || _r === void 0 ? void 0 : _r.SERVICE,
                         };
-                window.location.href = `https://${!isProduction.isProduction ? 'discover.' : ''}${index.domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
+                window.location.href = `https://${!constantsIsProduction.isProduction ? 'discover.' : ''}${constantsDomainLocales.domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
             }
             else {
                 setLoading(false);
@@ -159,7 +160,7 @@ const BookingBtn = (_a) => {
             setLoading(false);
         }
     }), []);
-    return bookingId && bookingType ? (React__default["default"].createElement(index$1.Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
+    return bookingId && bookingType ? (React__default["default"].createElement(index.Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
 };
 
 exports.AuthorBadge = AuthorBadge;

package/build/{index-fd3e1d16.js → index-72b989a7.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var core = require('@mantine/core');
-var theme = require('./theme-be20929b.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const Indicator = (_a) => {
-    var { styles, color = theme.theme.colors.red700 } = _a, props = tslib_es6.__rest(_a, ["styles", "color"]);
+    var { styles, color = miscTheme.theme.colors.red700 } = _a, props = tslib_es6.__rest(_a, ["styles", "color"]);
     return (React__default["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "top-end", offset: 4, styles: Object.assign({ processing: {
                 // FIX: Safari blink
                 animationDirection: 'alternate',

package/build/index-72e5dba6.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var useHealthToolCache = require('./useHealthToolCache-9d59f009.js');
+var constants = require('./constants-1953275e.js');
+var index$1 = require('./index-48ef94cb.js');
+var index$2 = require('./index-df9447b3.js');
+require('@mantine/core');
+require('@mantine/dates');
+require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+var index$3 = require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+var miscTheme = require('./miscTheme.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+require('@mantine/hooks');
+require('./utils-928b4701.js');
+require('./other-0edcc417.js');
+var index = require('./index-769ecf0d.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const BmiFormContext = React.createContext({});
+
+const DefaultForm = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default["default"].createElement(index$1.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '25',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '170',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+            } }),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$1.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                            content: '25',
+                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '170',
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '60',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
+
+const BmiForm = (_a) => {
+    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
+    const [isTouched, setIsTouched] = React.useState(false);
+    const { control, handleSubmit, setValue, watch } = reactHookForm.useForm();
+    const data = watch();
+    const { locale } = useTranslations.useTranslations();
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    const onValid = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        const height = bmiUnit.heightConvert(data.height);
+        const weight = bmiUnit.weightConvert(data.weight);
+        const submitValue = {
+            gender: data.gender,
+            age: data.age,
+            height,
+            weight,
+            bmi: embeddedHeathToolCards_helpers.getBmi({ height, weight }),
+        };
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    React.useEffect(() => {
+        Object.keys(valueProps || {}).forEach((k) => {
+            const key = k;
+            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
+                shouldTouch: false,
+                shouldDirty: false,
+                shouldValidate: false,
+            });
+        });
+    }, [valueProps]);
+    React.useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default["default"].createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.BmiForm = BmiForm;