@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/esm/index-d6cfeea2.js

@@ -0,0 +1,147 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-9430520e.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-73e49d74.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-1dda168b.js';
+import { G as GenderOptionControl } from './index-7d0b67e7.js';
+import { c as Input } from './index-83cc8492.js';
+import '@mantine/core';
+import '@mantine/dates';
+import './index-3dcece1c.js';
+import './index-99a12287.js';
+import './index-562833a7.js';
+import './useMantineLocale-845c1956.js';
+import { T as Text } from './index-88ff7c55.js';
+import './index-c7b7301d.js';
+import { theme } from './miscTheme.js';
+import { u as useTranslations } from './useTranslations-32ff6c72.js';
+import '@mantine/hooks';
+import './utils-94f8d19f.js';
+import './other-af591390.js';
+import { H as HealthToolFormWrapper } from './index-b4dc58c1.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { getBmi } from './embeddedHeathToolCards_helpers.js';
+
+const BmiFormContext = createContext({});
+
+const DefaultForm = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(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.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+            } }),
+        React__default.createElement(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.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: 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.createElement(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.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: 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.createElement(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.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: 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.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm = (props) => {
+    var _a, _b, _c, _d;
+    const { t, locale } = useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(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.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
+            } }),
+        React__default.createElement(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.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(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.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
+            } }),
+        React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default.createElement(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.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default.createElement(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.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${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 = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
+    const [isTouched, setIsTouched] = useState(false);
+    const { control, handleSubmit, setValue, watch } = useForm();
+    const data = watch();
+    const { locale } = useTranslations();
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    const onValid = (data) => __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: getBmi({ height, weight }),
+        };
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    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]);
+    useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default.createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+export { BmiForm as B };

package/build/esm/index-e91300f9.js

@@ -0,0 +1,101 @@
+import React__default from 'react';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-94f8d19f.js';
+import { theme } from './miscTheme.js';
+
+const StyledPopup = styled.div `
+  position: fixed;
+  left: 50%;
+
+  padding: 0 16px 32px;
+  background-color: ${theme.colors.white};
+  border-radius: ${theme.borderRadius};
+  box-shadow: 0px 4px 8px ${theme.colors.gray200};
+  transform: translate(-50%, -50%);
+  transition: all 0.5s ease-in-out;
+  visibility: hidden;
+
+  &[data-open='true'] {
+    z-index: 400;
+    top: 50%;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &[data-open='false'] {
+    top: -50%;
+  }
+
+  &[data-type='lead'] {
+    width: 332px;
+    height: 460px;
+
+    div {
+      top: -15px;
+      right: -15px;
+    }
+  }
+
+  &[data-type='form'] {
+    width: 496px;
+    height: 548px;
+    ${MediaQueries.mbDown} {
+      width: 340px;
+    }
+  }
+
+  &[data-type='confirm'] {
+    ${MediaQueries.mbDown} {
+      width: calc(100% - 32px);
+    }
+    ${MediaQueries.mbUp} {
+      width: 100%;
+      max-width: 407px;
+    }
+  }
+
+  .popup-content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 0;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+`;
+const StyledPopupWrapper = styled.div `
+  position: fixed;
+  z-index: 110;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  background: rgba(38, 38, 38, 0.3);
+
+  &[data-open='false'] {
+    display: none;
+  }
+`;
+
+const Popup = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', enableAnimation = true, }) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledPopup, { "data-open": isOpen, "data-type": type, "data-animation": enableAnimation },
+            React__default.createElement("div", { className: `${className || ''} popup-content` },
+                !!closeIcon && (React__default.createElement("div", { className: "close-button", onClick: onClose }, closeIcon)),
+                children)),
+        React__default.createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: onClose })));
+};
+
+export { Popup as P };

package/build/esm/{index-f4b938f2.js → index-eb03fb5b.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-7dadf4a1.js';
+import { theme } from './miscTheme.js';
 
 const StyledDivider = styled.hr `
   border-width: 1px;

package/build/esm/{index-9b9c1499.js → index-f34b4053.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-06ba3978.js';
+import { _ as __rest } from './tslib.es6-9430520e.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-1d3c6ce7.js';
+import { B as Button$1 } from './index-c7b7301d.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-01405723.js → index-f417df8c.js}

@@ -1,19 +1,20 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-06ba3978.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-9430520e.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { c as Input, S as Select } from './index-9b3a8b6d.js';
+import { c as Input, S as Select } from './index-83cc8492.js';
 import '@mantine/dates';
-import { C as CDN_ADDRESS } from './index-6210f454.js';
-import { L as LOCALE } from './index-189d7601.js';
-import './index-9471fca1.js';
-import './useMantineLocale-453f8013.js';
-import './index-5723381f.js';
-import './index-1d3c6ce7.js';
-import './theme-7dadf4a1.js';
-import { u as useTranslations } from './useTranslations-b970f667.js';
+import { C as CDN_ADDRESS } from './index-3dcece1c.js';
+import './index-99a12287.js';
+import './index-562833a7.js';
+import './useMantineLocale-845c1956.js';
+import './index-88ff7c55.js';
+import './index-c7b7301d.js';
+import { u as useTranslations } from './useTranslations-32ff6c72.js';
 import '@mantine/hooks';
-import './utils-d7bbdb52.js';
-import { M as MAPPED_LOCALE } from './utils-6d45bdd1.js';
+import './utils-94f8d19f.js';
+import './other-af591390.js';
+import { M as MAPPED_LOCALE } from './utils-feb0c914.js';
+import { L as LOCALE } from './Locale-50ec684c.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/index-f4d8dd94.js

@@ -0,0 +1,233 @@
+import { _ as __rest } from './tslib.es6-9430520e.js';
+import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
+import { useForm, isNotEmpty } from '@mantine/form';
+import { u as useHealthToolsCache } from './useHealthToolCache-73e49d74.js';
+import { u as useTranslations } from './useTranslations-32ff6c72.js';
+import { C as CommonGAssets } from './index-562833a7.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-1dda168b.js';
+import { G as GenderOptionControl } from './index-7d0b67e7.js';
+import { c as Input, S as Select } from './index-83cc8492.js';
+import { D as DatePicker } from './index-1baef0ed.js';
+import '@mantine/core';
+import './index-88ff7c55.js';
+import './index-c7b7301d.js';
+import '@mantine/hooks';
+import './index-99a12287.js';
+import './utils-94f8d19f.js';
+import './useMantineLocale-845c1956.js';
+import './index-3dcece1c.js';
+import './other-af591390.js';
+import { H as HealthToolFormWrapper } from './index-b4dc58c1.js';
+import { domainLocales } from './constantsDomainLocales.js';
+
+const ThrFormContext = createContext({});
+
+const DefaultForm = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
+        React__default.createElement(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.createElement(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.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm = (_a) => {
+    var _b;
+    var props = __rest(_a, []);
+    const { t, locale } = useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
+                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, 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('targetHeartRate.ageInput') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default.createElement(Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default.createElement(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.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError, submitProps } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
+    const { t, locale } = useTranslations();
+    const minRange = useRef(40);
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const form = useForm({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            age: 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 = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
+    const [isAdult, setIsAdult] = 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: CommonGAssets.getAssetPath(`/low.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/low-active.svg`),
+            content: t('targetHeartRate.lowIntensity.note'),
+        },
+        {
+            value: 'moderate_intensity',
+            label: t('targetHeartRate.moderateIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/moderate.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/moderate-active.svg`),
+            content: t('targetHeartRate.moderateIntensity.note'),
+        },
+        {
+            value: 'aerobic_zone',
+            label: t('targetHeartRate.aerobicZone.title'),
+            image: CommonGAssets.getAssetPath(`/aerobic.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/aerobic-active.svg`),
+            content: t('targetHeartRate.aerobicZone.note'),
+        },
+        {
+            value: 'vigorous_intensity',
+            label: t('targetHeartRate.vigorousIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/vigorous.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/vigorous-active.svg`),
+            content: t('targetHeartRate.vigorousIntensity.note'),
+        },
+        {
+            value: 'maximum_intensity',
+            label: t('targetHeartRate.maximumIntensity.title'),
+            image: CommonGAssets.getAssetPath(`/maximum.svg`),
+            imageActive: CommonGAssets.getAssetPath(`/maximum-active.svg`),
+            content: t('targetHeartRate.maximumIntensity.note'),
+        },
+    ];
+    useEffect(() => {
+        const ageDate = form.getInputProps('age').value;
+        const gender = form.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]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form.onSubmit(onSubmit, onError) });
+    return (React__default.createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+export { ThrForm as T };