@hhgtech/hhg-components 1.29.449 → 1.29.450

package/build/esm/index-e5420917.js

@@ -0,0 +1,301 @@
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
+import React__default, { useContext } from 'react';
+import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
+import { RedCross } from '@hhgtech/icons/other';
+import './index-8b442456.js';
+import '@mantine/dates';
+import './index-40ecee0c.js';
+import './index-710277d7.js';
+import './index-b2c9a4c2.js';
+import './index-9e02bd61.js';
+import { T as Text } from './index-d1bc6f02.js';
+import './index-5cfa52e0.js';
+import { F as FontWeight } from './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
+import { u as useTranslations } from './index-829d7698.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
+import { C as CardWrapperContext } from './context-bf166109.js';
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: rem(16),
+    },
+    container: {
+        width: '100%',
+        backgroundColor: bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]),
+        position: 'relative',
+        display: 'flex',
+        gap: 24,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: rem(-50),
+                        bottom: rem(-20),
+                        width: rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: rem(-20),
+                        [MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: rem(32),
+            img: {
+                width: rem(32),
+                height: rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: rem(48),
+            maxHeight: rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: rem(80),
+        height: rem(80),
+        borderRadius: '50%',
+        backgroundColor: '#fff',
+        flexShrink: 0,
+        img: {
+            maxWidth: rem(48),
+            maxHeight: rem(48),
+        },
+        [theme.fn.smallerThan('sm')]: {
+            width: rem(64),
+            height: rem(64),
+            img: {
+                maxWidth: rem(40),
+                maxHeight: rem(40),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = __rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
+        name: 'ToolsBannerCard',
+        styles,
+        classNames,
+    });
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
+            React__default.createElement(Box, { className: classes.avatarWrapper },
+                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default.createElement(RedCross, { size: 14 })))),
+        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                __html: t('toolPage.toolReviewer', {
+                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
+                    date: medicalReview.date,
+                }),
+            } }))) : null;
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default.createElement(Flex, { className: classes.headingWrapper },
+            React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default.createElement(Text, { size: "n1" }, medicalReviewEle)),
+        React__default.createElement(Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = __rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = useContext(CardWrapperContext);
+    const { isPregTool } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
+            container: wrapperClasses.bannerWrapper,
+            heading: wrapperClasses.bannerHeading,
+            reviewText: wrapperClasses.bannerReviewText,
+        }, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = __rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default.createElement(ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        })), (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+        })),
+        submitBtn: {},
+        bodyWrapper: {},
+        scrollAreaWrapper: {},
+        bannerWrapper: Object.assign({}, (variant === 'gray' && {
+            backgroundColor: 'transparent',
+            padding: `${rem(16)} ${rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(20),
+            lineHeight: rem(28),
+            fontWeight: FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(17),
+                lineHeight: rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(14),
+            lineHeight: rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(12),
+                lineHeight: rem(18),
+            },
+        })),
+        submitWrapper: Object.assign({ [theme.fn.smallerThan('sm')]: {
+                button: {
+                    width: '100%',
+                },
+            }, [theme.fn.largerThan('sm')]: {
+                textAlign: 'right',
+            } }, (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+            button: {
+                marginTop: 10,
+            },
+        })),
+        newsletterBlock: {},
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+export { HealthToolCardWrapper as H, ToolsBannerCard as T };

package/build/esm/{index-2703cdf4.js → index-eac1c6df.js}

@@ -1,51 +1,51 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-33ebf2e0.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-67e90cbd.js';
+import { R as Radio } from './index-8b442456.js';
 import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-e02ef7d6.js';
-import './index-018f3348.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import './index-f2d03a1d.js';
-import { T as Text } from './index-6b5ef864.js';
-import { B as Button$1 } from './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import './translationsContext-140a78c1.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-40ecee0c.js';
+import './index-710277d7.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
+import './index-9e02bd61.js';
+import { T as Text } from './index-d1bc6f02.js';
+import { B as Button$1 } from './index-5cfa52e0.js';
+import './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
+import './translationsContext-3ddec17e.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import { M as MediaQueries } from './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { i as isInternalLink } from './index-c08b664e.js';
+import { M as MediaQueries } from './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
+import { i as isInternalLink } from './index-f11ff568.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-87fb137e.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-11cefa64.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-b1df4dc0.js';
+import { L as Logo } from './index-7e0ca6af.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-dcb9783e.js';
+import { a as useOutsideClick } from './useOutsideClick-fcdb9672.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-86df1763.js';
-import { u as useScreenSize, I as ImageWrap } from './index-fe18b552.js';
-import { u as useTranslations } from './index-698e287d.js';
-import { D as Dropdown } from './index-87653e07.js';
+import { B as Button } from './index-35204583.js';
+import { u as useScreenSize, I as ImageWrap } from './index-849177cf.js';
+import { u as useTranslations } from './index-829d7698.js';
+import { D as Dropdown } from './index-2379cdaf.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-e43d9883.js';
-import { D as Drawer } from './index-df69c3f3.js';
+import { I as Input } from './index-660ea0e2.js';
+import { D as Drawer } from './index-0ca6acb9.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { L as LOCALE } from './Locale-2e01bfcb.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-c2ac6223.js';
-import { L as Loading } from './index-37ac608c.js';
+import { A as ArrowRightBlue } from './index-98f94fb7.js';
+import { L as Loading } from './index-2bb1409c.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 

package/build/esm/{index-4b7e8ade.js → index-ee390a74.js}

@@ -1,24 +1,25 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-44a0df67.js';
-import { u as useTranslations } from './index-698e287d.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-fedfafa8.js';
-import { G as GenderOptionControl } from './index-2e3c6ea1.js';
-import { I as Input, S as Select } from './index-67e90cbd.js';
-import { D as DatePicker } from './index-3266848c.js';
-import './index-6b5ef864.js';
-import './index-15e1b8ca.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-95f87d5f.js';
+import { u as useTranslations } from './index-829d7698.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-8011bba9.js';
+import { G as GenderOptionControl } from './index-72d47986.js';
+import { I as Input, S as Select } from './index-8b442456.js';
+import { D as DatePicker } from './index-dbe66efe.js';
+import './index-d1bc6f02.js';
+import './index-5cfa52e0.js';
 import '@mantine/core';
-import './index.styles-883d7842.js';
+import './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
 import '@mantine/hooks';
-import './index-f2d03a1d.js';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import './index-e02ef7d6.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
+import './index-9e02bd61.js';
+import './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
+import './index-40ecee0c.js';
+import { C as CardWrapperContext } from './context-bf166109.js';
+import { H as HealthToolFormWrapper } from './index-dbb26c73.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});
@@ -28,29 +29,35 @@ const DefaultForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     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'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            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(HealthToolFormWrapper.FormRow, null,
+            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(HealthToolFormWrapper.FormRow, null,
+            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.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const InlineForm = (_a) => {
@@ -58,6 +65,7 @@ const InlineForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     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' },
@@ -79,18 +87,20 @@ const InlineForm = (_a) => {
                         },
                     }) }))),
             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'))));
+        isAdult && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            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.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const ThrForm = (_a) => {

package/build/esm/{index-c08b664e.js → index-f11ff568.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-67e90cbd.js';
+import { F as Flag } from './index-8b442456.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-6b5ef864.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
-import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-e02ef7d6.js';
-import { V as VideoType } from './index-018f3348.js';
+import { T as Text } from './index-d1bc6f02.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
+import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-40ecee0c.js';
+import { V as VideoType } from './index-710277d7.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-5ca1ce5f.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { a as abbreviateNumber } from './number-05eba2b4.js';
+import { u as useTranslations } from './index-829d7698.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-a36af882.js';
-import { S as SocialLinkPreview } from './index-d6c03074.js';
+import { M as Modal } from './index-c8bbd423.js';
+import { S as SocialLinkPreview } from './index-f250ccdd.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [

package/build/esm/{index-f6aeb770.js → index-f19b9fc3.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { B as Button } from './index-86df1763.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { B as Button } from './index-35204583.js';
+import { u as useTranslations } from './index-829d7698.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-d6c03074.js → index-f250ccdd.js}

@@ -1,13 +1,13 @@
-import { a as __awaiter } from './tslib.es6-200f1963.js';
+import { a as __awaiter } from './tslib.es6-33ebf2e0.js';
 import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { Box, useMantineTheme } from '@mantine/core';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-cb10f0c9.js';
+import { I as ImageWrap } from './index-849177cf.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-b4a49e8c.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-fedfafa8.js';
-import { y as youtubeVidIdGetter } from './post-3b265413.js';
-import { L as Loading } from './index-f6aeb770.js';
+import { D as DEFAULT_IMG } from './constants-8011bba9.js';
+import { y as youtubeVidIdGetter } from './post-9f47ece3.js';
+import { L as Loading } from './index-f19b9fc3.js';
 
 const StyledSocialLinkPreview = styled.div `
   .link-info-container {

package/build/esm/{index-0e5b5786.js → index-f613c5e1.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-e02ef7d6.js';
+import { Z as ZINDEX_SSO } from './index-40ecee0c.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-953523ca.js → index-f6dbcd6c.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-e9a34aaf.js';
-import { S as Spinner } from './Spinner-1f9ec7ca.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-d860f05f.js';
+import { S as Spinner } from './Spinner-d53e3c33.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);

package/build/esm/{index-ee569944.js → index-f7177e71.js}

@@ -1,20 +1,20 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default from 'react';
-import './index-67e90cbd.js';
+import './index-8b442456.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-e02ef7d6.js';
-import './index-018f3348.js';
-import './index-62988070.js';
-import './index-f2d03a1d.js';
-import { T as Text$1 } from './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import './translationsContext-140a78c1.js';
+import './index-40ecee0c.js';
+import './index-710277d7.js';
+import './index-b2c9a4c2.js';
+import './index-9e02bd61.js';
+import { T as Text$1 } from './index-d1bc6f02.js';
+import './index-5cfa52e0.js';
+import './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
+import './translationsContext-3ddec17e.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
+import './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'