@hhgtech/hhg-components 1.29.497-beta-7 → 1.29.497-beta-8

package/build/esm/{index-a355c8ff.js → index-31249641.js}

@@ -1,25 +1,25 @@
-import { _ as __rest } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-46a6cd84.js';
-import { u as useTranslations } from './index-ebdc034f.js';
-import { C as CommonGAssets } from './index-7ce961d8.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-5e6ef561.js';
-import { G as GenderOptionControl } from './index-6829477b.js';
-import { I as Input, S as Select } from './index-5b2746fc.js';
-import { D as DatePicker } from './index-8287ece7.js';
-import { T as Text } from './index-72c764dd.js';
-import './index-755acd20.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-445c35a8.js';
+import { u as useTranslations } from './index-7164c9af.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-40d1b4b3.js';
+import { G as GenderOptionControl } from './index-e1358195.js';
+import { I as Input, S as Select } from './index-ee50fca1.js';
+import { D as DatePicker } from './index-1b608a0b.js';
+import { T as Text } from './index-1e053a8a.js';
+import './index-82c299ee.js';
 import '@mantine/core';
-import './index-4d0f7f17.js';
-import './index.styles-e54de34d.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
 import '@mantine/hooks';
-import './index-e32c6547.js';
-import './utils-ed42867b.js';
-import './index-d69cbb65.js';
-import './index-b6cabf4b.js';
-import { C as CardWrapperContext } from './context-a1e63b80.js';
-import { H as HealthToolFormWrapper } from './index-61e5dd84.js';
+import './index-0f5feae4.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import './index-4f619596.js';
+import { C as CardWrapperContext } from './context-62322d3f.js';
+import { H as HealthToolFormWrapper } from './index-80b07363.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});
@@ -36,9 +36,9 @@ const DefaultForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
                     withinPortal: true,
-                }, label: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
+                }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, t('targetHeartRate.heartRateInput')), placeholder: t('tools.inputPlaceholder', {
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.heartRateInput')), placeholder: t('tools.inputPlaceholder', {
                     content: '60',
                 }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
                     rightSection: {
@@ -46,7 +46,7 @@ const DefaultForm = (_a) => {
                     },
                 }) }))),
         isAdult && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Select, Object.assign({ label: React__default.createElement(Text, { size: "p3", weight: "semiBold" }, 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) => ({
+            React__default.createElement(Select, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, 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: {

package/build/esm/{index-6586643c.js → index-39fe4fb5.js}

@@ -1,13 +1,13 @@
-import { a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { Box, useMantineTheme } from '@mantine/core';
-import { I as ImageWrap } from './index-263cf5d0.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-530fae23.js';
+import { I as ImageWrap } from './index-a405f8aa.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-a07e1db7.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-5e6ef561.js';
-import { y as youtubeVidIdGetter } from './post-a1c6b481.js';
-import { L as Loading } from './index-949543ff.js';
+import { D as DEFAULT_IMG } from './constants-40d1b4b3.js';
+import { y as youtubeVidIdGetter } from './post-821b830e.js';
+import { L as Loading } from './index-fd6d1c25.js';
 
 const StyledSocialLinkPreview = styled.div `
   .link-info-container {

package/build/esm/{index-3b19dc55.js → index-40c4120c.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-ed42867b.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-cdeadade.js → index-477041a3.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-3b19dc55.js';
+import { L as Label } from './index-40c4120c.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/{index-d29b3ab0.js → index-4ebb545e.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-ebdc034f.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-82345a11.js';
-import { L as LOCALIZED_SLUGS } from './constants-55c5059d.js';
-import { B as Button } from './index-755acd20.js';
-import './index-b6cabf4b.js';
-import { c as callApi, g as getCarePath } from './utils-530fae23.js';
+import { P as PATHS } from './paths-0b7d1534.js';
+import { L as LOCALIZED_SLUGS } from './constants-c1906b61.js';
+import { B as Button } from './index-82c299ee.js';
+import './index-4f619596.js';
+import { c as callApi, g as getCarePath } from './utils-a07e1db7.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-b6cabf4b.js → index-4f619596.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-8a252de3.js';
+import './index-76ee9e2c.js';
 import { siteHost, siteOptions, COUNTRY_CURRENCY_SYMBOL } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-8d8dfda0.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;

package/build/esm/{index-efbbd63d.js → index-58efba90.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-d166de6f.js';
-import { T as Text } from './index-72c764dd.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-530fae23.js';
+import { H as Heading } from './index-29d34526.js';
+import { T as Text } from './index-1e053a8a.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-a07e1db7.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-5e6ef561.js';
+import { D as DEFAULT_IMG } from './constants-40d1b4b3.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-53ce93a8.js → index-597cf3f1.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest } from './tslib.es6-7b43f420.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-b6cabf4b.js';
+import { Z as ZINDEX_SSO } from './index-4f619596.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-0551862a.js → index-6a23de7d.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
 import * as React from 'react';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-91a40628.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-b6cabf4b.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-142e5272.js';
-import { f as formatCommunity, a as formatPost } from './dataTransform-b523ce39.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-d7fab681.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-4f619596.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-0e358529.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-c26a540d.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-5e2fa959.js';
+import './translationsContext-a05c705a.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-5b2746fc.js';
+import { I as Input } from './index-ee50fca1.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-ea22abcb.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-8bfb6c4e.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-61988483.js';
+import { L as Logo$1 } from './index-d0a944a8.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-8a252de3.js';
-import { C as CommonGAssets } from './index-7ce961d8.js';
-import './index-e32c6547.js';
-import { T as Text } from './index-72c764dd.js';
-import { B as Button } from './index-755acd20.js';
-import './index-4d0f7f17.js';
-import './index.styles-e54de34d.js';
+import { V as VideoType } from './index-76ee9e2c.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import { B as Button } from './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-ed42867b.js';
-import './index-d69cbb65.js';
-import { L as LOCALISED_SLUGS } from './constants-66b5e08d.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-2b2b8d06.js';
-import { I as Indicator$1 } from './index-521353a8.js';
-import { u as useTranslations } from './index-ebdc034f.js';
-import { u as useIsInit } from './useIsInit-c5acafe4.js';
-import { L as LOCALIZED_SLUGS } from './constants-55c5059d.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { L as LOCALISED_SLUGS } from './constants-bde36e78.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-95d2bb9b.js';
+import { I as Indicator$1 } from './index-089312b7.js';
+import { u as useTranslations } from './index-7164c9af.js';
+import { u as useIsInit } from './useIsInit-ce98714e.js';
+import { L as LOCALIZED_SLUGS } from './constants-c1906b61.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-dacc19b1.js';
-import { H as Heading } from './index-d166de6f.js';
+import { B as Button$1 } from './index-c8cf7dbe.js';
+import { H as Heading } from './index-29d34526.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
-import { C as Container } from './index-65cdadf8.js';
+import { C as Container } from './index-abe419e6.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-decd1fc9.js';
-import { L as LOCALE } from './Locale-8d8dfda0.js';
+import { U as UserAvatar } from './index-fedc760b.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-c522b860.js';
+import { g as getDataWithCache } from './core-aa6037ed.js';
 
 const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),

package/build/esm/{index-27739fd9.js → index-6e702a0b.js}

@@ -1,28 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-46a6cd84.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-5e6ef561.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-445c35a8.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-40d1b4b3.js';
 import { Grid, Flex, Box, clsx, createStyles, rem, Stack } from '@mantine/core';
-import { G as GenderOptionControl } from './index-6829477b.js';
-import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-5b2746fc.js';
+import { G as GenderOptionControl } from './index-e1358195.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-ee50fca1.js';
 import '@mantine/dates';
-import './index-b6cabf4b.js';
-import './index-8a252de3.js';
-import './index-7ce961d8.js';
-import './index-e32c6547.js';
-import { T as Text } from './index-72c764dd.js';
-import './index-755acd20.js';
-import { theme } from './miscTheme.js';
-import './index-4d0f7f17.js';
-import './index.styles-e54de34d.js';
-import { u as useTranslations } from './index-ebdc034f.js';
+import './index-4f619596.js';
+import './index-76ee9e2c.js';
+import './index-60514791.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import '@mantine/hooks';
-import './utils-ed42867b.js';
-import './index-d69cbb65.js';
-import { H as HealthToolFormWrapper } from './index-61e5dd84.js';
-import { C as CardWrapperContext } from './context-a1e63b80.js';
-import { L as LOCALE } from './Locale-8d8dfda0.js';
+import './utils-082bfd0f.js';
+import './index-73e5f029.js';
+import { H as HealthToolFormWrapper } from './index-80b07363.js';
+import { C as CardWrapperContext } from './context-62322d3f.js';
+import { L as LOCALE } from './Locale-f844d80e.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 
@@ -46,55 +45,52 @@ const DefaultForm = (props) => {
                     } })),
             React__default.createElement(Grid.Col, { span: 12 },
                 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: "p3", weight: "semiBold" },
-                                t('bmi.ageInput'),
-                                ' ',
-                                React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.ageInput')), 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 }));
+                            }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
+                                rightSection: formWrapperClasses.inputRightSection,
+                            } }));
                     } })),
             React__default.createElement(Grid.Col, { span: 12 },
                 React__default.createElement(Grid, { gutter: 8 },
                     React__default.createElement(Grid.Col, { span: 6 },
                         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: "p3", weight: "semiBold" },
-                                        t('bmi.heightInput'),
-                                        ' ',
-                                        React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
                                         content: locale === LOCALE.Myanmar ? 6 : 170,
-                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
                             } })),
                     React__default.createElement(Grid.Col, { span: 6 },
                         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: "p3", weight: "semiBold" },
-                                        t('bmi.weightInput'),
-                                        ' ',
-                                        React__default.createElement(Text, { size: "p3", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
                                         content: locale === LOCALE.Myanmar ? 130 : 60,
-                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
                             } }))))),
         withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Grid, { gutter: 4, px: 16 },
                 React__default.createElement(Grid.Col, null,
                     React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
-                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p3", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
                                 React__default.createElement(Flex, { gap: "lg" },
-                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p3" }, t('switchBtn.yes')), styles: radioStyle }),
-                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p3" }, t('switchBtn.no')), styles: radioStyle }))));
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
                         } })),
                 React__default.createElement(Grid.Col, null,
                     React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p3", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
                                 React__default.createElement(Flex, { gap: "lg" },
-                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p3" }, t('switchBtn.yes')), styles: radioStyle }),
-                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p3" }, t('switchBtn.no')), styles: radioStyle }))));
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
                         } }))),
             React__default.createElement(Box, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
                 React__default.createElement(Grid, { gutter: 8, px: 16, py: 12 },
                     React__default.createElement(Grid.Col, null,
                         React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
                                 var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
-                                return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                                return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p2" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
                             } })),
                     React__default.createElement(Grid.Col, null,
                         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", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default.createElement(Box, { px: 16, sx: { paddingBottom: 8 } },
@@ -111,6 +107,13 @@ var useStyles = createStyles((theme) => {
                 marginTop: 0,
             },
         },
+        inputRightSection: {
+            fontSize: rem(13),
+            lineHeight: rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
     };
 });
 

package/build/esm/{index-3ee3eba8.js → index-6ff0f431.js}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
-import { T as Text } from './index-72c764dd.js';
+import { T as Text } from './index-1e053a8a.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-ed42867b.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-b7ec2bf7.js';
-import { R as Radio$1 } from './index-5b2746fc.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-1d9b6ec1.js';
-import { T as Text$1 } from './index-783ff75e.js';
+import { S as ShapedArrowDown } from './index-a0ce662f.js';
+import { R as Radio$1 } from './index-ee50fca1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
+import { T as Text$1 } from './index-e8cb7efc.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-d166de6f.js';
-import { C as Close } from './Close-0298091a.js';
-import { u as useTranslations } from './index-ebdc034f.js';
+import { H as Heading } from './index-29d34526.js';
+import { C as Close } from './Close-82768c4a.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-098462f1.js → index-71500223.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-2b404f0b.js';
+import { u as useScrollbarSize } from './useScrollbarSize-b4b7d0f3.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-ed42867b.js';
+import { M as MediaQueries } from './utils-082bfd0f.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-ebdc034f.js → index-7164c9af.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-5e2fa959.js';
+import { T as TranslationsContext } from './translationsContext-a05c705a.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-ac00e991.js → index-724cbaea.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b43f420.js';
 import React__default, { useState, useContext, useMemo, useRef, useCallback, useEffect, createContext } from 'react';
 import dayjs from 'dayjs';
-import { T as Tabs } from './index-d69cbb65.js';
-import { L as Loading } from './index-6f98df5b.js';
-import { a as formatPost, f as formatCommunity, g as formatArticle } from './dataTransform-b523ce39.js';
+import { T as Tabs } from './index-73e5f029.js';
+import { L as Loading } from './index-af884e9a.js';
+import { a as formatPost, f as formatCommunity, g as formatArticle } from './dataTransform-c26a540d.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, b as callApiWithAuth } from './utils-530fae23.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, b as callApiWithAuth } from './utils-a07e1db7.js';
 import { Plus } from '@hhgtech/icons/core';
 import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
-import { C as CommonGAssets } from './index-7ce961d8.js';
-import { I as ImageWrap } from './index-263cf5d0.js';
-import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-145a3e25.js';
-import { S as SocialType } from './index-8a252de3.js';
-import { u as useTranslations } from './index-ebdc034f.js';
+import { C as CommonGAssets } from './index-60514791.js';
+import { I as ImageWrap } from './index-a405f8aa.js';
+import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-f1072783.js';
+import { S as SocialType } from './index-76ee9e2c.js';
+import { u as useTranslations } from './index-7164c9af.js';
 import { theme } from './miscTheme.js';
 import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
-import { a as Anchor$1 } from './index-5b2746fc.js';
+import { a as Anchor$1 } from './index-ee50fca1.js';
 import '@mantine/dates';
-import './index-b6cabf4b.js';
-import './index-e32c6547.js';
-import { T as Text } from './index-72c764dd.js';
-import { B as Button } from './index-755acd20.js';
-import './index-4d0f7f17.js';
-import './index.styles-e54de34d.js';
+import './index-4f619596.js';
+import './index-0f5feae4.js';
+import { T as Text } from './index-1e053a8a.js';
+import { B as Button } from './index-82c299ee.js';
+import './index-637c938f.js';
+import './index.styles-fa779a7c.js';
 import '@mantine/hooks';
-import './utils-ed42867b.js';
+import './utils-082bfd0f.js';
 import styled from '@emotion/styled';
 import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
-import { d as decodeMention, b as decodePostUrl } from './post-a1c6b481.js';
-import { B as Button$1 } from './index-dacc19b1.js';
-import './translationsContext-5e2fa959.js';
+import { d as decodeMention, b as decodePostUrl } from './post-821b830e.js';
+import { B as Button$1 } from './index-c8cf7dbe.js';
+import './translationsContext-a05c705a.js';
 
 const StyledPostContent = styled.div `
   padding: 0.5rem 1rem 1rem;

package/build/esm/{index-d69cbb65.js → index-73e5f029.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-1d9b6ec1.js';
+import { _ as __rest } from './tslib.es6-7b43f420.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
-import { B as Button } from './index-755acd20.js';
-import { T as Text } from './index-72c764dd.js';
+import { B as Button } from './index-82c299ee.js';
+import { T as Text } from './index-1e053a8a.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;