@hhgtech/hhg-components 1.29.533 → 1.29.534-beta-1

package/build/esm/{index-dfab374b.js → index-af19ea6b.js}

@@ -42,9 +42,11 @@ const GlobalTextStyle = {
             h3: [rem(26), rem(20)],
             h4: [rem(22), rem(18)],
             h5: [rem(18), rem(16)],
+            h5New: [rem(20), rem(18)],
             h6: [rem(16), rem(14)],
             title1: [rem(17), rem(17)],
             title2: [rem(15), rem(15)],
+            body2: [rem(15), rem(15)],
         },
         lineHeight: {
             base: [rem(24), rem(24)],
@@ -71,9 +73,11 @@ const GlobalTextStyle = {
             h3: [rem(36), rem(26)],
             h4: [rem(32), rem(26)],
             h5: [rem(28), rem(24)],
+            h5New: [rem(28), rem(24)],
             h6: [rem(24), rem(22)],
             title1: [rem(24), rem(24)],
             title2: [rem(24), rem(24)],
+            body2: [rem(24), rem(24)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -93,9 +97,11 @@ const GlobalTextStyle = {
             h3: [-0.8, -0.7],
             h4: [-0.6, -0.6],
             h5: [-0.2, -0.2],
+            h5New: [-0.4, -0.4],
             h6: [0, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            body2: [-0.3, -0.3],
         },
         fontWeightBySize: {
             s1: FontWeight.semiBold,
@@ -107,6 +113,7 @@ const GlobalTextStyle = {
             h3: FontWeight.bold,
             h4: FontWeight.bold,
             h5: FontWeight.bold,
+            h5New: FontWeight.semiBold,
             h6: FontWeight.bold,
         },
         fontWeight: FontWeight,
@@ -138,9 +145,11 @@ const GlobalTextStyle = {
             h3: [rem(26), rem(22)],
             h4: [rem(22), rem(20)],
             h5: [rem(18), rem(16)],
+            h5New: [rem(20), rem(18)],
             h6: [rem(16), rem(14)],
             title1: [rem(17), rem(17)],
             title2: [rem(15), rem(15)],
+            body2: [rem(15), rem(15)],
             overline: [rem(11), rem(11)],
             subText: [rem(10), rem(10)],
         },
@@ -169,9 +178,11 @@ const GlobalTextStyle = {
             h3: [rem(32), rem(32)],
             h4: [rem(32), rem(28)],
             h5: [rem(28), rem(24)],
+            h5New: [rem(28), rem(24)],
             h6: [rem(24), rem(22)],
             title1: [rem(24), rem(24)],
             title2: [rem(24), rem(24)],
+            body2: [rem(24), rem(24)],
             overline: [rem(12), rem(12)],
             subText: [rem(12), rem(12)],
         },
@@ -195,10 +206,12 @@ const GlobalTextStyle = {
             h3: [-0.6, -0.6],
             h4: [-0.6, -0.4],
             h5: [-0.2, -0.2],
+            h5New: [-0.4, -0.4],
             h6: [0, -0.2],
             n1: [-0.2, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            body2: [-0.3, -0.3],
             overline: [-0.2, -0.2],
             subText: [-0.2, -0.2],
         },
@@ -212,6 +225,7 @@ const GlobalTextStyle = {
             h3: FontWeight.bold,
             h4: FontWeight.bold,
             h5: FontWeight.bold,
+            h5New: FontWeight.semiBold,
             h6: FontWeight.bold,
         },
         fontWeight: FontWeight,

package/build/esm/{index-cc67ce76.js → index-b140a520.js}

@@ -1,41 +1,41 @@
 import React__default, { createContext, useContext, useMemo, useCallback, useState, useEffect, forwardRef, useRef } from 'react';
 import { rem, Container, createStyles, Box, Stack, Flex, AspectRatio, ScrollArea, Chip, Group, Badge, MultiSelect, Stepper } from '@mantine/core';
-import { C as CommonGAssets } from './index-c606ffec.js';
-import { b as callApiWithAuth, e as getApiPath, T as TogetherComponentGlobalContext, f as getPremiumApiPath, h as getWebsiteUrlApi, i as getSsoApiPath } from './utils-420c3d45.js';
-import { G as GA_TOKEN_COOKIE } from './index-724c4432.js';
-import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-be75bc10.js';
+import { C as CommonGAssets } from './index-0b4dbc4c.js';
+import { b as callApiWithAuth, e as getApiPath, T as TogetherComponentGlobalContext, f as getPremiumApiPath, h as getWebsiteUrlApi, i as getSsoApiPath } from './utils-3bd9323b.js';
+import { G as GA_TOKEN_COOKIE } from './index-2c7b61b4.js';
+import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-f4ad832c.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-71ad0055.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-83930fe3.js';
-import { I as ImageWrap } from './index-e5353815.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-f46d3286.js';
-import { u as useTranslations } from './index-964dfe8b.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8419d6e2.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-77abab70.js';
+import { I as ImageWrap } from './index-645441b6.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-05d204f3.js';
+import { u as useTranslations } from './index-80a96e77.js';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { d as Checkbox, g as ChipButton, I as Input, c as AspectRatio$1 } from './index-bf9af8be.js';
+import { d as Checkbox, g as ChipButton, I as Input, c as AspectRatio$1 } from './index-ec14c53d.js';
 import '@mantine/dates';
-import './index-263cb755.js';
-import { t as themeColors } from './index-95cac1fa.js';
-import { T as Text } from './index-2ef375e9.js';
-import { B as Button } from './index-e1986667.js';
-import './index-dfab374b.js';
-import './index.styles-0d3c923d.js';
+import './index-9eceee8e.js';
+import { t as themeColors } from './index-4605698e.js';
+import { T as Text } from './index-f0b1ad20.js';
+import { B as Button } from './index-4225fecc.js';
+import './index-af19ea6b.js';
+import './index.styles-80500a29.js';
 import { useViewportSize } from '@mantine/hooks';
-import './utils-130552c2.js';
-import './index-99b9d586.js';
+import './utils-443e9105.js';
+import './index-8226c0a3.js';
 import { PATHS as PATHS$2 } from './togetherApiPaths.js';
-import './translationsContext-1f728673.js';
-import { H as Heading } from './index-5112bc07.js';
-import { u as useHealthToolsCache } from './useHealthToolCache-d985d82a.js';
-import { I as Icon } from './index-cca3fbb6.js';
+import './translationsContext-27f431de.js';
+import { H as Heading } from './index-7d83d9ad.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-b8b19248.js';
+import { I as Icon } from './index-49d47387.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { i as isVideo } from './index-e51ee216.js';
-import { M as Modal } from './index-6b6f510e.js';
+import { i as isVideo } from './index-f2b345fd.js';
+import { M as Modal } from './index-f83ccbcc.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { L as LOCALE } from './Locale-c4635284.js';
+import { L as LOCALE } from './Locale-f237fbe6.js';
 
 const PREFER_TOPICS = [
     {

package/build/esm/{index-3d8b9120.js → index-b6edfcff.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import React__default, { createContext, useContext } from 'react';
 import { clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import './index-bf9af8be.js';
-import { D as DatePicker } from './index-c210a057.js';
-import { T as Text } from './index-2ef375e9.js';
-import './index-e1986667.js';
-import './index-dfab374b.js';
-import './index.styles-0d3c923d.js';
-import { u as useTranslations } from './index-964dfe8b.js';
+import './index-ec14c53d.js';
+import { D as DatePicker } from './index-c037206f.js';
+import { T as Text } from './index-f0b1ad20.js';
+import './index-4225fecc.js';
+import './index-af19ea6b.js';
+import './index.styles-80500a29.js';
+import { u as useTranslations } from './index-80a96e77.js';
 import '@mantine/hooks';
-import './index-95cac1fa.js';
-import './utils-130552c2.js';
-import './index-99b9d586.js';
-import { C as CardWrapperContext } from './context-3e1c6a34.js';
-import { H as HealthToolFormWrapper } from './index-ca108d47.js';
-import { G as GenderOptionControl } from './index-04d44ef2.js';
+import './index-4605698e.js';
+import './utils-443e9105.js';
+import './index-8226c0a3.js';
+import { C as CardWrapperContext } from './context-f14f234c.js';
+import { H as HealthToolFormWrapper } from './index-efab3a9d.js';
+import { G as GenderOptionControl } from './index-7fcc5cf6.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyVaccineFormContext = createContext({});

package/build/esm/{index-21c4ca2d.js → index-bb9a6878.js}

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MarryBabyText } from './index-69b561fa.js';
-import { T as Text } from './index-bcad88cc.js';
+import { M as MarryBabyText } from './index-7bea5c16.js';
+import { T as Text } from './index-902a9bfe.js';
 
 const StyledRadioImageGroup = styled.div `
   display: flex;

package/build/esm/{index-39acc511.js → index-bde721e0.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-dfab374b.js';
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-af19ea6b.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
 import { useClickOutside } from '@mantine/hooks';
 import { css } from '@emotion/react';

package/build/esm/{index-1aa8c0b0.js → index-bfa04b00.js}

@@ -1,9 +1,9 @@
-import { a as __awaiter } from './tslib.es6-71ad0055.js';
+import { a as __awaiter } from './tslib.es6-8419d6e2.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-f46d3286.js';
-import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-724c4432.js';
+import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-05d204f3.js';
+import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-2c7b61b4.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { L as LOCALE } from './Locale-c4635284.js';
+import { L as LOCALE } from './Locale-f237fbe6.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const SSO_V2_PATHS = {

package/build/esm/{index-c210a057.js → index-c037206f.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-724c4432.js';
-import './index-263cb755.js';
-import { C as CommonGAssets } from './index-c606ffec.js';
-import { M as MAPPED_LOCALE } from './index-95cac1fa.js';
-import { L as LOCALE } from './Locale-c4635284.js';
+import { I as ISO_FORMAT } from './index-2c7b61b4.js';
+import './index-9eceee8e.js';
+import { C as CommonGAssets } from './index-0b4dbc4c.js';
+import { M as MAPPED_LOCALE } from './index-4605698e.js';
+import { L as LOCALE } from './Locale-f237fbe6.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-cf81258c.js → index-c2c7b2bb.js}

@@ -3,10 +3,10 @@ import React__default from 'react';
 import classNames from 'classnames';
 import styled from '@emotion/styled';
 import { Box } from '@mantine/core';
-import { M as MediaQueries } from './utils-130552c2.js';
+import { M as MediaQueries } from './utils-443e9105.js';
 import { theme } from './miscTheme.js';
-import { u as useTranslations } from './index-964dfe8b.js';
-import { T as Text } from './index-2ef375e9.js';
+import { u as useTranslations } from './index-80a96e77.js';
+import { T as Text } from './index-f0b1ad20.js';
 
 /* eslint-disable prettier/prettier */
 const ShoppingCartCare = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),

package/build/esm/{index-3c0e0dde.js → index-d07b8a7e.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-4c2a1a10.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-724c4432.js';
-import { N as NodeIntentType } from './index-263cb755.js';
+import { c as cookie } from './index-d1eeab74.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-2c7b61b4.js';
+import { N as NodeIntentType } from './index-9eceee8e.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-f42a5835.js → index-d17ee21a.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-5112bc07.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-130552c2.js';
-import { u as useTranslations } from './index-964dfe8b.js';
-import { T as TogetherComponentGlobalContext } from './utils-420c3d45.js';
+import { H as Heading } from './index-7d83d9ad.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-443e9105.js';
+import { u as useTranslations } from './index-80a96e77.js';
+import { T as TogetherComponentGlobalContext } from './utils-3bd9323b.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-2ef375e9.js';
+import { T as Text } from './index-f0b1ad20.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-adf054ec.js → index-d7863ee9.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import React__default from 'react';
 import { MantineProvider as MantineProvider$1 } from '@mantine/core';
-import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-95cac1fa.js';
-import { C as CustomStylesType, T as TemplateProvider } from './index-dfab374b.js';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-4605698e.js';
+import { C as CustomStylesType, T as TemplateProvider } from './index-af19ea6b.js';
 
 const MantineProvider = (_a) => {
     var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);

package/build/esm/{index-c33da490.js → index-dae3d4ca.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-71ad0055.js';
+import { _ as __rest } from './tslib.es6-8419d6e2.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-420c3d45.js';
+import { T as TogetherComponentGlobalContext } from './utils-3bd9323b.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-034d0df8.js → index-df5b8ffe.js}

@@ -1,28 +1,29 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-71ad0055.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8419d6e2.js';
 import React__default, { createContext, useState, useContext, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-d985d82a.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-ef668be4.js';
-import { createStyles, Flex, Box, Grid, clsx, rem, Stack } from '@mantine/core';
-import { d as Checkbox, R as Radio, I as Input, e as ErrorLabel } from './index-bf9af8be.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-b8b19248.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-80f7b8b8.js';
+import { createStyles, Flex, Box, useMantineTheme, Menu, rem, UnstyledButton, Text as Text$1, Grid, clsx, Stack } from '@mantine/core';
+import { d as Checkbox, R as Radio, I as Input, e as ErrorLabel } from './index-ec14c53d.js';
 import '@mantine/dates';
-import './index-724c4432.js';
-import './index-263cb755.js';
-import './index-c606ffec.js';
-import './index-95cac1fa.js';
-import { T as Text } from './index-2ef375e9.js';
-import './index-e1986667.js';
-import { T as TemplateProvider, C as CustomStylesType } from './index-dfab374b.js';
-import './index.styles-0d3c923d.js';
-import { u as useTranslations } from './index-964dfe8b.js';
+import './index-2c7b61b4.js';
+import './index-9eceee8e.js';
+import './index-0b4dbc4c.js';
+import './index-4605698e.js';
+import { T as Text } from './index-f0b1ad20.js';
+import './index-4225fecc.js';
+import { T as TemplateProvider, C as CustomStylesType } from './index-af19ea6b.js';
+import './index.styles-80500a29.js';
+import { u as useTranslations } from './index-80a96e77.js';
 import '@mantine/hooks';
-import './utils-130552c2.js';
-import './index-99b9d586.js';
-import { H as HealthToolFormWrapper } from './index-ca108d47.js';
-import { C as CardWrapperContext } from './context-3e1c6a34.js';
-import { G as GenderOptionControl } from './index-04d44ef2.js';
+import './utils-443e9105.js';
+import './index-8226c0a3.js';
+import { H as HealthToolFormWrapper } from './index-efab3a9d.js';
+import { C as ChevronDown } from './ChevronDown-a5001eb1.js';
+import { C as CardWrapperContext } from './context-f14f234c.js';
+import { G as GenderOptionControl } from './index-7fcc5cf6.js';
 import '@hhgtech/icons/other';
-import { L as LOCALE } from './Locale-c4635284.js';
+import { L as LOCALE } from './Locale-f237fbe6.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 
@@ -88,11 +89,68 @@ const NewsletterCheckbox = (_a) => {
                 }, className: classes.label, lineClamp: show ? undefined : 1 }), t('bmi.newsletter.label')))));
 };
 
+const UnitPicker = ({ displayValue, field, onChange, }) => {
+    const theme = useMantineTheme();
+    const borderColor = theme.colors.gray[1];
+    const options = field === 'height'
+        ? [
+            { label: 'cm', system: 'metric' },
+            { label: 'ft', system: 'imperial' },
+        ]
+        : [
+            { label: 'kg', system: 'metric' },
+            { label: 'lbs', system: 'imperial' },
+        ];
+    return (React__default.createElement(Menu, { position: "bottom-end", withinPortal: true, offset: 0, styles: {
+            dropdown: {
+                backgroundColor: theme.white,
+                border: `${rem(1)} solid ${borderColor}`,
+                borderRadius: 12,
+                boxShadow: '0px 0px 1px 0px #0000000A,0px 2px 8px 0px #0000000A,0px 10px 16px 0px #0000000A',
+                padding: rem(4),
+                minWidth: rem(90),
+            },
+            item: {
+                fontSize: theme.fontSizes.sm,
+                lineHeight: 1.4,
+                padding: `${rem(6)} ${rem(10)}`,
+                borderRadius: theme.radius.xs,
+                color: theme.colors.dark[9],
+                '&[data-hovered]': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        } },
+        React__default.createElement(Menu.Target, null,
+            React__default.createElement(UnstyledButton, { type: "button", sx: (theme) => ({
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                    paddingRight: theme.spacing.xs,
+                    gap: 4,
+                }) },
+                React__default.createElement(Text$1, { component: "span", size: "sm", sx: { lineHeight: 1 } }, displayValue),
+                React__default.createElement(ChevronDown, { style: { width: 18, height: 18 } }))),
+        React__default.createElement(Menu.Dropdown, null, options.map((opt) => {
+            const isSelected = displayValue === opt.label;
+            return (React__default.createElement(Menu.Item, { key: opt.label, onClick: () => onChange(opt.system, field), sx: {
+                    backgroundColor: isSelected ? theme.colors.gray[1] : undefined,
+                    '&[data-hovered]': {
+                        backgroundColor: isSelected
+                            ? theme.colors.gray[1]
+                            : 'transparent',
+                    },
+                } }, opt.label));
+        }))));
+};
+
 const DefaultForm = (props) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { t, locale } = useTranslations();
     const { classes: cardWrapperClasses = {} } = useContext(CardWrapperContext);
-    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = useContext(BmiFormContext);
+    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = useContext(BmiFormContext);
     const radioStyle = {
         body: {
             alignItems: 'center',
@@ -120,21 +178,33 @@ const DefaultForm = (props) => {
                 React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
                     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("div", null,
-                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
-                                        content: locale === LOCALE.Myanmar ? 6 : 170,
-                                    }), name: name, value: value, onChange: onChange, min: 0, classNames: {
+                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), placeholder: t('tools.inputPlaceholder', {
+                                        content: unitSystem === 'imperial' ? 6 : 170,
+                                    }), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", rightSection: enableUnitPicker ? (React__default.createElement(UnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (t('bmi.heightInput.desc')), rightSectionWidth: 70, classNames: {
                                         rightSection: formWrapperClasses.inputRightSection,
-                                    } }),
+                                    }, styles: !enableUnitPicker
+                                        ? () => ({
+                                            rightSection: {
+                                                paddingRight: 0,
+                                            },
+                                        })
+                                        : undefined }),
                                 (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                         } })),
                 React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
                     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("div", null,
-                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
-                                        content: locale === LOCALE.Myanmar ? 130 : 60,
-                                    }), name: name, value: value, onChange: onChange, precision: 1, min: 0, classNames: {
+                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), placeholder: t('tools.inputPlaceholder', {
+                                        content: unitSystem === 'imperial' ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default.createElement(UnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (t('bmi.weightInput.desc')), rightSectionWidth: 70, classNames: {
                                         rightSection: formWrapperClasses.inputRightSection,
-                                    } }),
+                                    }, styles: !enableUnitPicker
+                                        ? () => ({
+                                            rightSection: {
+                                                paddingRight: 0,
+                                            },
+                                        })
+                                        : undefined }),
                                 (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                         } }))),
             withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
@@ -193,7 +263,7 @@ var useStyles = createStyles((theme) => {
 const InlineForm = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t, locale } = useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = useContext(BmiFormContext);
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = useContext(BmiFormContext);
     const { classes: wrapperClasses = {}, variant: cardWrapperVariant } = useContext(CardWrapperContext);
     const { classes: formWrapperClasses = {} } = useContext(BmiFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
@@ -217,15 +287,27 @@ const InlineForm = (props) => {
                 return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
                     React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                         React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: locale === LOCALE.Myanmar ? 6 : 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('bmi.heightInput.desc')) }))));
+                                content: unitSystem === 'imperial' ? 6 : 170,
+                            }), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: enableUnitPicker ? (React__default.createElement(UnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (React__default.createElement(HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.heightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
+                                ? () => ({
+                                    rightSection: {
+                                        paddingRight: 0,
+                                    },
+                                })
+                                : undefined }))));
             } }),
         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'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                         React__default.createElement(Input.Number, { 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) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))));
+                                content: unitSystem === 'imperial' ? 130 : 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, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default.createElement(UnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (React__default.createElement(HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.weightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
+                                ? () => ({
+                                    rightSection: {
+                                        paddingRight: 0,
+                                    },
+                                })
+                                : undefined }))));
             } }),
         withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, 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 }, }) => {
@@ -267,9 +349,12 @@ const InlineForm = (props) => {
 };
 
 const BmiForm = (_a) => {
-    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
+    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, defaultUnitSystem, enableUnitPicker = true, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "defaultUnitSystem", "enableUnitPicker", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
     const { classes } = useStyles(undefined, { name: 'BmiForm' });
+    const { locale } = useTranslations();
     const [isTouched, setIsTouched] = useState(false);
+    const initialUnitSystem = useMemo(() => defaultUnitSystem || 'metric', [defaultUnitSystem]);
+    const [unitSystem, setUnitSystem] = useState(initialUnitSystem);
     const { control, handleSubmit, setValue, watch } = useForm({
         defaultValues: {
             question1: undefined,
@@ -278,14 +363,25 @@ const BmiForm = (_a) => {
         },
     });
     const data = watch();
-    const { locale } = useTranslations();
     const { getHealthToolLink } = useHealthToolsCache(locale);
     const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    const unitHeight = unitSystem === 'imperial' ? 'ft' : 'cm';
+    const unitWeight = unitSystem === 'imperial' ? 'lbs' : 'kg';
+    const convertHeightToCm = (value) => unitSystem === 'imperial' ? value * 30.48 : value;
+    const convertWeightToKg = (value) => unitSystem === 'imperial' ? value * 0.45359237 : value;
     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 = Object.assign(Object.assign({}, data), { height,
-            weight, bmi: getBmi({ height, weight }) });
+        const rawHeight = typeof data.height === 'number' ? data.height : Number(data.height);
+        const rawWeight = typeof data.weight === 'number' ? data.weight : Number(data.weight);
+        const submitValue = enableUnitPicker
+            ? Object.assign(Object.assign({}, data), { bmi: getBmi({
+                    height: convertHeightToCm(rawHeight),
+                    weight: convertWeightToKg(rawWeight),
+                }), unit: unitSystem }) : (() => {
+            const height = bmiUnit.heightConvert(rawHeight);
+            const weight = bmiUnit.weightConvert(rawWeight);
+            return Object.assign(Object.assign({}, data), { height,
+                weight, bmi: getBmi({ height, weight }) });
+        })();
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -305,6 +401,21 @@ const BmiForm = (_a) => {
     useEffect(() => {
         onChangeProps && onChangeProps(data);
     }, [data]);
+    useEffect(() => {
+        setUnitSystem(initialUnitSystem);
+    }, [initialUnitSystem]);
+    const onUnitChange = (next, _changedField) => {
+        if (!enableUnitPicker)
+            return;
+        if (next === unitSystem)
+            return;
+        setUnitSystem(next);
+        // Clear both inputs when unit changes to avoid mixing unit systems.
+        // `Input.Number` in this repo supports `value` as `number | ''`,
+        // so we clear with '' to make the UI reset properly.
+        setValue('height', '', { shouldDirty: true, shouldValidate: false });
+        setValue('weight', '', { shouldDirty: true, shouldValidate: false });
+    };
     const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
     return (React__default.createElement(TemplateProvider, { variant: CustomStylesType.LEADGEN },
         React__default.createElement(BmiFormContext.Provider, { value: {
@@ -315,6 +426,11 @@ const BmiForm = (_a) => {
                 submitProps,
                 withAdditionalQuestion,
                 classes,
+                enableUnitPicker,
+                unitSystem,
+                unitHeight,
+                unitWeight,
+                onUnitChange,
             } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
 };
 

package/build/esm/{index-bc6c5b03.js → index-e224e0e7.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-130552c2.js';
+import { t as toggleNoScroll } from './utils-443e9105.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-50c61b67.js';
-import { T as Text } from './index-2ef375e9.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-c98d2ab8.js';
+import { T as Text } from './index-f0b1ad20.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {