@hhgtech/hhg-components 1.29.533-beta-2 → 1.29.533-beta-3

package/build/esm/{index-beda55c1.js → index-44c50b17.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { _ as __rest } from './tslib.es6-35158f2a.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-d6f6b595.js';
+import { R as Radio } from './index-65070f9c.js';
 import '@mantine/dates';
-import './index-43af2123.js';
-import './index-aa69f1a9.js';
-import { C as CommonGAssets } from './index-40a681f5.js';
-import './index-56c17ad3.js';
-import { T as Text } from './index-db36636a.js';
-import './index-e8e03414.js';
-import './index-098487ec.js';
-import './index.styles-9e934a7f.js';
-import { u as useTranslations } from './index-032eadac.js';
+import './index-2820ead8.js';
+import './index-a3facc62.js';
+import { C as CommonGAssets } from './index-57f6f354.js';
+import './index-af192483.js';
+import { T as Text } from './index-746a0c22.js';
+import './index-6f9cacea.js';
+import './index-cd528862.js';
+import './index.styles-8813f8dc.js';
+import { u as useTranslations } from './index-53458511.js';
 import '@mantine/hooks';
-import './utils-7250305e.js';
-import './index-77179a51.js';
+import './utils-8e74376a.js';
+import './index-5c9cbde3.js';
 
 const sizeMap = {
     lg: {

package/build/esm/{index-038af1ec.js → index-44fbbf3c.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-7a563e82.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-7250305e.js';
-import { u as useTranslations } from './index-032eadac.js';
-import { T as TogetherComponentGlobalContext } from './utils-bf6be335.js';
+import { H as Heading } from './index-1949e71f.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-8e74376a.js';
+import { u as useTranslations } from './index-53458511.js';
+import { T as TogetherComponentGlobalContext } from './utils-8e1fd934.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-db36636a.js';
+import { T as Text } from './index-746a0c22.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { _ as __rest } from './tslib.es6-35158f2a.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-a6ed627b.js → index-4989a631.js}

@@ -1,22 +1,22 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-35158f2a.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { I as Input, S as Select } from './index-d6f6b595.js';
+import { I as Input, S as Select } from './index-65070f9c.js';
 import '@mantine/dates';
-import { g as CDN_ADDRESS } from './index-43af2123.js';
-import './index-aa69f1a9.js';
-import './index-40a681f5.js';
-import './index-56c17ad3.js';
-import './index-db36636a.js';
-import './index-e8e03414.js';
-import './index-098487ec.js';
-import './index.styles-9e934a7f.js';
-import { u as useTranslations } from './index-032eadac.js';
+import { g as CDN_ADDRESS } from './index-2820ead8.js';
+import './index-a3facc62.js';
+import './index-57f6f354.js';
+import './index-af192483.js';
+import './index-746a0c22.js';
+import './index-6f9cacea.js';
+import './index-cd528862.js';
+import './index.styles-8813f8dc.js';
+import { u as useTranslations } from './index-53458511.js';
 import '@mantine/hooks';
-import './utils-7250305e.js';
-import './index-77179a51.js';
-import { M as MAPPED_LOCALE } from './utils-35709853.js';
-import { L as LOCALE } from './Locale-b45f64dd.js';
+import './utils-8e74376a.js';
+import './index-5c9cbde3.js';
+import { M as MAPPED_LOCALE } from './utils-b34cad0c.js';
+import { L as LOCALE } from './Locale-60b7c758.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-1aebdee9.js → index-4c91199e.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-700c50e4.js';
+import { T as Text } from './index-39c0c274.js';
 import classNames from 'classnames';
-import { I as ImageWrap } from './index-66653ef8.js';
-import { T as Text$1 } from './index-db36636a.js';
+import { I as ImageWrap } from './index-9612bafb.js';
+import { T as Text$1 } from './index-746a0c22.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),

package/build/esm/{index-34d21427.js → index-51aedd66.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-7250305e.js';
+import { t as toggleNoScroll } from './utils-8e74376a.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-4ef3beec.js';
-import { T as Text } from './index-db36636a.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-6957bfde.js';
+import { T as Text } from './index-746a0c22.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {

package/build/esm/{index-032eadac.js → index-53458511.js}

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

package/build/esm/{index-609df880.js → index-54b7e8ef.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { _ as __rest } from './tslib.es6-35158f2a.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-d645f8fa.js';
-import { I as Input } from './index-d6f6b595.js';
-import { D as DatePicker } from './index-40f4488b.js';
-import { T as Text } from './index-db36636a.js';
-import './index-e8e03414.js';
-import './index-098487ec.js';
-import './index.styles-9e934a7f.js';
-import { u as useTranslations } from './index-032eadac.js';
+import { L as LastPeriod } from './LastPeriod-57c9723a.js';
+import { I as Input } from './index-65070f9c.js';
+import { D as DatePicker } from './index-0b250eb8.js';
+import { T as Text } from './index-746a0c22.js';
+import './index-6f9cacea.js';
+import './index-cd528862.js';
+import './index.styles-8813f8dc.js';
+import { u as useTranslations } from './index-53458511.js';
 import '@mantine/hooks';
-import './index-56c17ad3.js';
-import './utils-7250305e.js';
-import './index-77179a51.js';
-import { C as CardWrapperContext } from './context-e32c6b73.js';
-import { H as HealthToolFormWrapper } from './index-3c223867.js';
+import './index-af192483.js';
+import './utils-8e74376a.js';
+import './index-5c9cbde3.js';
+import { C as CardWrapperContext } from './context-e67b881d.js';
+import { H as HealthToolFormWrapper } from './index-ee5a03f0.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {

package/build/esm/{index-36734b35.js → index-590b450b.js}

@@ -1,48 +1,48 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-35158f2a.js';
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-1150677c.js';
-import { u as useTranslations } from './index-032eadac.js';
+import { D as Dropdown } from './index-8da54ad9.js';
+import { u as useTranslations } from './index-53458511.js';
 import innertext from 'innertext';
 import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-d6f6b595.js';
+import { I as Input$1 } from './index-65070f9c.js';
 import { useMantineTheme, SegmentedControl, Popover } from '@mantine/core';
 import '@mantine/dates';
-import './index-43af2123.js';
-import './index-aa69f1a9.js';
-import './index-40a681f5.js';
-import './index-56c17ad3.js';
-import { T as Text } from './index-db36636a.js';
-import { B as Button } from './index-e8e03414.js';
-import './index-098487ec.js';
-import './index.styles-9e934a7f.js';
+import './index-2820ead8.js';
+import './index-a3facc62.js';
+import './index-57f6f354.js';
+import './index-af192483.js';
+import { T as Text } from './index-746a0c22.js';
+import { B as Button } from './index-6f9cacea.js';
+import './index-cd528862.js';
+import './index.styles-8813f8dc.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-7250305e.js';
-import './index-77179a51.js';
-import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-50a2593d.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-bf6be335.js';
+import { M as MediaQueries } from './utils-8e74376a.js';
+import './index-5c9cbde3.js';
+import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-8aac0d18.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-8e1fd934.js';
 import styled from '@emotion/styled';
-import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-513198eb.js';
-import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-9194bfe5.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-b9081b6c.js';
-import { C as CardAuthor } from './index-e7d01b29.js';
-import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-45b768b8.js';
-import { I as Input } from './index-b89ba068.js';
+import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-0b4be8ba.js';
+import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-5e8b5e56.js';
+import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-51802ec7.js';
+import { C as CardAuthor } from './index-5bc14fcc.js';
+import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-34330147.js';
+import { I as Input } from './index-00262e4e.js';
 import debounce from 'lodash/debounce';
 import ContentEditable from 'react-contenteditable';
 import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-bf3862b2.js';
-import { C as CardLink } from './index-1d2cd200.js';
-import { B as BtnChoice } from './index-dbaa0063.js';
-import { L as LOCALE } from './Locale-b45f64dd.js';
+import { L as Loading } from './index-5d10026f.js';
+import { C as CardLink } from './index-8ff5328b.js';
+import { B as BtnChoice } from './index-0cc10d6d.js';
+import { L as LOCALE } from './Locale-60b7c758.js';
 import * as ReactDOM from 'react-dom';
-import { L as Loading$1 } from './index-f4e242fa.js';
-import { b as IconArrowLeft } from './index-038af1ec.js';
-import { B as Button$1 } from './index-c651a487.js';
+import { L as Loading$1 } from './index-d6ef61ab.js';
+import { b as IconArrowLeft } from './index-44fbbf3c.js';
+import { B as Button$1 } from './index-6b6f49b3.js';
 import { getCookie } from './miscCookieHelper.js';
-import { a as useUniqueId } from './useUniqueId-5c2a2bfb.js';
-import { U as UserAvatar } from './index-77cf65fa.js';
-import { P as PopoverMenu } from './index-c37ef324.js';
+import { a as useUniqueId } from './useUniqueId-918f7dd8.js';
+import { U as UserAvatar } from './index-77730dbd.js';
+import { P as PopoverMenu } from './index-fb0925af.js';
 import { Close, Check } from '@hhgtech/icons/core';
 
 const StyledCreateNewPost$1 = styled.div `

package/build/esm/{index-e7d01b29.js → index-5bc14fcc.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-032eadac.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-7250305e.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-a1e76985.js';
-import { I as Icon } from './index-ccfa9c9e.js';
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
-import { U as UserAvatar } from './index-77cf65fa.js';
-import { I as ImageWrap, u as useScreenSize } from './index-66653ef8.js';
-import './index-43af2123.js';
-import { C as CommonGAssets } from './index-40a681f5.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-bf6be335.js';
-import { B as Button } from './index-c651a487.js';
-import { T as Text } from './index-db36636a.js';
+import { u as useTranslations } from './index-53458511.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-8e74376a.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-343483ed.js';
+import { I as Icon } from './index-d678747d.js';
+import { _ as __rest } from './tslib.es6-35158f2a.js';
+import { U as UserAvatar } from './index-77730dbd.js';
+import { I as ImageWrap, u as useScreenSize } from './index-9612bafb.js';
+import './index-2820ead8.js';
+import { C as CommonGAssets } from './index-57f6f354.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-8e1fd934.js';
+import { B as Button } from './index-6b6f49b3.js';
+import { T as Text } from './index-746a0c22.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-f4e242fa.js';
-import { H as Heading } from './index-7a563e82.js';
-import { M as Modal } from './index-28f55c7c.js';
+import { L as Loading } from './index-d6ef61ab.js';
+import { H as Heading } from './index-1949e71f.js';
+import { M as Modal } from './index-a8a3d179.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -911,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-f892d3d1.js').then((module) => {
+                import('./index-e104ee9a.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }

package/build/esm/{index-77179a51.js → index-5c9cbde3.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
+import { _ as __rest } from './tslib.es6-35158f2a.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-e8e03414.js';
-import { T as Text } from './index-db36636a.js';
+import { B as Button } from './index-6f9cacea.js';
+import { T as Text } from './index-746a0c22.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

package/build/esm/{index-bf3862b2.js → index-5d10026f.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-ccfa9c9e.js';
-import { u as useTranslations } from './index-032eadac.js';
+import { I as Icon } from './index-d678747d.js';
+import { u as useTranslations } from './index-53458511.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-9698198d.js → index-5f673d96.js}

@@ -1,25 +1,25 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-7250305e.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-8e74376a.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-f2b7e9c3.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-b89ba068.js';
-import { I as Input } from './index-d6f6b595.js';
+import { _ as __rest } from './tslib.es6-35158f2a.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-00262e4e.js';
+import { I as Input } from './index-65070f9c.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-43af2123.js';
-import './index-aa69f1a9.js';
-import './index-40a681f5.js';
-import './index-56c17ad3.js';
-import './index-db36636a.js';
-import './index-e8e03414.js';
-import './index-098487ec.js';
-import './index.styles-9e934a7f.js';
-import './translationsContext-e21176c1.js';
+import './index-2820ead8.js';
+import './index-a3facc62.js';
+import './index-57f6f354.js';
+import './index-af192483.js';
+import './index-746a0c22.js';
+import './index-6f9cacea.js';
+import './index-cd528862.js';
+import './index.styles-8813f8dc.js';
+import './translationsContext-dc31e143.js';
 import '@mantine/hooks';
-import './index-77179a51.js';
-import { C as Close } from './Close-25ad16e1.js';
+import './index-5c9cbde3.js';
+import { C as Close } from './Close-c625cd5a.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),

package/build/esm/{index-a89f3931.js → index-60d3b888.js}

@@ -1,28 +1,29 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-f2b7e9c3.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-35158f2a.js';
 import React__default, { createContext, useState, useContext, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-0154ed13.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-9194bfe5.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-d6f6b595.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-12b0fc88.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-5e8b5e56.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-65070f9c.js';
 import '@mantine/dates';
-import './index-43af2123.js';
-import './index-aa69f1a9.js';
-import './index-40a681f5.js';
-import './index-56c17ad3.js';
-import { T as Text } from './index-db36636a.js';
-import './index-e8e03414.js';
-import { T as TemplateProvider, C as CustomStylesType } from './index-098487ec.js';
-import './index.styles-9e934a7f.js';
-import { u as useTranslations } from './index-032eadac.js';
+import './index-2820ead8.js';
+import './index-a3facc62.js';
+import './index-57f6f354.js';
+import './index-af192483.js';
+import { T as Text } from './index-746a0c22.js';
+import './index-6f9cacea.js';
+import { T as TemplateProvider, C as CustomStylesType } from './index-cd528862.js';
+import './index.styles-8813f8dc.js';
+import { u as useTranslations } from './index-53458511.js';
 import '@mantine/hooks';
-import './utils-7250305e.js';
-import './index-77179a51.js';
-import { H as HealthToolFormWrapper } from './index-3c223867.js';
-import { C as CardWrapperContext } from './context-e32c6b73.js';
-import { G as GenderOptionControl } from './index-beda55c1.js';
+import './utils-8e74376a.js';
+import './index-5c9cbde3.js';
+import { H as HealthToolFormWrapper } from './index-ee5a03f0.js';
+import { C as ChevronDown } from './ChevronDown-30a3ea39.js';
+import { C as CardWrapperContext } from './context-e67b881d.js';
+import { G as GenderOptionControl } from './index-44c50b17.js';
 import '@hhgtech/icons/other';
-import { L as LOCALE } from './Locale-b45f64dd.js';
+import { L as LOCALE } from './Locale-60b7c758.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 = {}, unitSystem, unitHeight, unitWeight, onUnitChange, } = useContext(BmiFormContext);
     const radioStyle = {
         body: {
             alignItems: 'center',
@@ -120,9 +178,9 @@ 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: React__default.createElement(UnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange }), rightSectionWidth: 70, classNames: {
                                         rightSection: formWrapperClasses.inputRightSection,
                                     } }),
                                 (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
@@ -130,9 +188,9 @@ const DefaultForm = (props) => {
                 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: React__default.createElement(UnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange }), rightSectionWidth: 70, classNames: {
                                         rightSection: formWrapperClasses.inputRightSection,
                                     } }),
                                 (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
@@ -193,7 +251,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, 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 +275,15 @@ 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: React__default.createElement(UnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange }), rightSectionWidth: 70 }))));
             } }),
         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: React__default.createElement(UnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange }), rightSectionWidth: 70 }))));
             } }),
         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 +325,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, defaultUnitSystem, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "defaultUnitSystem", "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 +339,16 @@ 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 convertedHeight = convertHeightToCm(data.height);
+        const convertedWeight = convertWeightToKg(data.weight);
+        const submitValue = Object.assign(Object.assign({}, data), { bmi: getBmi({ height: convertedHeight, weight: convertedWeight }), unit: unitSystem });
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -305,6 +368,20 @@ const BmiForm = (_a) => {
     useEffect(() => {
         onChangeProps && onChangeProps(data);
     }, [data]);
+    useEffect(() => {
+        setUnitSystem(initialUnitSystem);
+    }, [initialUnitSystem]);
+    const onUnitChange = (next, changedField) => {
+        setUnitSystem(next);
+        if (changedField === 'height') {
+            setValue('weight', undefined, {
+                shouldDirty: true,
+                shouldValidate: false,
+            });
+            return;
+        }
+        setValue('height', undefined, { 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 +392,10 @@ const BmiForm = (_a) => {
                 submitProps,
                 withAdditionalQuestion,
                 classes,
+                unitSystem,
+                unitHeight,
+                unitWeight,
+                onUnitChange,
             } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
 };