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

package/build/{index-f76b92a3.js → index-8c06c103.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');

package/build/{index-b6aebf86.js → index-8f0730b6.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var dayjs = require('dayjs');
-require('./index-4dcccc49.js');
-var Locale = require('./Locale-31f8eddd.js');
+require('./index-ad838cce.js');
+var Locale = require('./Locale-c5305b05.js');
 var notifications = require('@mantine/notifications');
-var index$1 = require('./index-75ddd39f.js');
+var index$1 = require('./index-36a97f58.js');
 var core = require('@mantine/core');
-var index$2 = require('./index-c506a798.js');
+var index$2 = require('./index-d86bb5d3.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-93845b3a.js');
-var index = require('./index-b177cedc.js');
-var shared = require('./shared-71858ab9.js');
+var utils = require('./utils-9152c72c.js');
+var index = require('./index-8580e656.js');
+var shared = require('./shared-3b439c7e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-8f34aabe.js → index-919860d2.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$1 = require('./index-22a00d64.js');
-var index = require('./index-b177cedc.js');
+var index$1 = require('./index-0f836631.js');
+var index = require('./index-8580e656.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-dca68d05.js → index-924d41f2.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-06accc81.js');
-var index$1 = require('./index-49cebcc5.js');
-var index$2 = require('./index-f8605f53.js');
+var index = require('./index-0a18150e.js');
+var index$1 = require('./index-6ff5ccc5.js');
+var index$2 = require('./index-52b63b54.js');
 var flattenChildren = require('react-keyed-flatten-children');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-fcfb639d.js → index-978d3f7d.js}

@@ -5,24 +5,24 @@ var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$2 = require('./index-f8605f53.js');
-var utils = require('./utils-93845b3a.js');
-var index$1 = require('./index-6f40401c.js');
-var index$a = require('./index-c2de0346.js');
-var tslib_es6 = require('./tslib.es6-3834354f.js');
-var index = require('./index-ed4426e8.js');
-var index$4 = require('./index-aa6e4223.js');
-require('./index-75ddd39f.js');
-var index$7 = require('./index-c506a798.js');
-var togetherComponentGlobalContext = require('./utils-b506b2a8.js');
-var index$6 = require('./index-8ce0b228.js');
-var index$5 = require('./index-06accc81.js');
+var index$2 = require('./index-52b63b54.js');
+var utils = require('./utils-9152c72c.js');
+var index$1 = require('./index-8a3522b6.js');
+var index$a = require('./index-e64e49f7.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
+var index = require('./index-6b14772e.js');
+var index$4 = require('./index-784efbb8.js');
+require('./index-36a97f58.js');
+var index$7 = require('./index-d86bb5d3.js');
+var togetherComponentGlobalContext = require('./utils-66f85700.js');
+var index$6 = require('./index-4442f51e.js');
+var index$5 = require('./index-0a18150e.js');
 var miscTheme = require('./miscTheme.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$3 = require('./index-da0b88fb.js');
-var index$8 = require('./index-684d4380.js');
-var index$9 = require('./index-9875ce2b.js');
+var index$3 = require('./index-01db4fd9.js');
+var index$8 = require('./index-736d9eab.js');
+var index$9 = require('./index-82b9ccba.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -920,7 +920,7 @@ const _CardAuthor = (props) => {
     React.useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                Promise.resolve().then(function () { return require('./index-1a826b64.js'); }).then((module) => {
+                Promise.resolve().then(function () { return require('./index-37220284.js'); }).then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }

package/build/{index-c54e6901.js → index-9e6e0d54.js}

@@ -1,37 +1,37 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var dayjs = require('dayjs');
-var index$9 = require('./index-a5dff89a.js');
-var index$7 = require('./index-ec7b2ab0.js');
-var dataTransform = require('./dataTransform-a745eeef.js');
+var index$9 = require('./index-f331fc29.js');
+var index$7 = require('./index-067ea65b.js');
+var dataTransform = require('./dataTransform-cdb24d6c.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var togetherComponentGlobalContext = require('./utils-b506b2a8.js');
+var togetherComponentGlobalContext = require('./utils-66f85700.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$2 = require('./index-c506a798.js');
-var index$1 = require('./index-aa6e4223.js');
-var togetherMoleculesCardAuthor = require('./index-fcfb639d.js');
-var index$3 = require('./index-4dcccc49.js');
-var index = require('./index-f8605f53.js');
+var index$2 = require('./index-d86bb5d3.js');
+var index$1 = require('./index-784efbb8.js');
+var togetherMoleculesCardAuthor = require('./index-978d3f7d.js');
+var index$3 = require('./index-ad838cce.js');
+var index = require('./index-52b63b54.js');
 var miscTheme = require('./miscTheme.js');
 var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-22a00d64.js');
+var index$4 = require('./index-0f836631.js');
 require('@mantine/dates');
-require('./index-75ddd39f.js');
-require('./index-b6aebf86.js');
-var index$8 = require('./index-06accc81.js');
-var index$5 = require('./index-49cebcc5.js');
-require('./index-b177cedc.js');
-require('./index.styles-4fb7697b.js');
+require('./index-36a97f58.js');
+require('./index-8f0730b6.js');
+var index$8 = require('./index-0a18150e.js');
+var index$5 = require('./index-6ff5ccc5.js');
+require('./index-8580e656.js');
+require('./index.styles-7cd9c8eb.js');
 require('@mantine/hooks');
-require('./utils-93845b3a.js');
+require('./utils-9152c72c.js');
 var styled = require('@emotion/styled');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var post = require('./post-5af4477e.js');
-var index$6 = require('./index-8ce0b228.js');
-require('./translationsContext-0698eefd.js');
+var post = require('./post-be7a71ed.js');
+var index$6 = require('./index-4442f51e.js');
+require('./translationsContext-286541fc.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-37b609b7.js → index-9f10fad7.js}

@@ -1,30 +1,31 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-f9c0a7d5.js');
-var constants = require('./constants-45bf5186.js');
+var useHealthToolCache = require('./useHealthToolCache-1f629fd2.js');
+var constants = require('./constants-917075a5.js');
 var core = require('@mantine/core');
-var index$2 = require('./index-22a00d64.js');
+var index$2 = require('./index-0f836631.js');
 require('@mantine/dates');
-require('./index-75ddd39f.js');
-require('./index-4dcccc49.js');
-require('./index-c506a798.js');
-require('./index-b6aebf86.js');
-var index$1 = require('./index-06accc81.js');
-require('./index-49cebcc5.js');
-var index$5 = require('./index-b177cedc.js');
-require('./index.styles-4fb7697b.js');
-var index = require('./index-f8605f53.js');
+require('./index-36a97f58.js');
+require('./index-ad838cce.js');
+require('./index-d86bb5d3.js');
+require('./index-8f0730b6.js');
+var index$1 = require('./index-0a18150e.js');
+require('./index-6ff5ccc5.js');
+var index$5 = require('./index-8580e656.js');
+require('./index.styles-7cd9c8eb.js');
+var index = require('./index-52b63b54.js');
 require('@mantine/hooks');
-require('./utils-93845b3a.js');
-require('./index-a5dff89a.js');
-var index$3 = require('./index-dca68d05.js');
-var context = require('./context-dfaf077f.js');
-var index$4 = require('./index-16c2ea7d.js');
+require('./utils-9152c72c.js');
+require('./index-f331fc29.js');
+var index$3 = require('./index-924d41f2.js');
+var ChevronDown = require('./ChevronDown-8cfe2c4e.js');
+var context = require('./context-3a5204fb.js');
+var index$4 = require('./index-30de70fb.js');
 require('@hhgtech/icons/other');
-var Locale = require('./Locale-31f8eddd.js');
+var Locale = require('./Locale-c5305b05.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
 
@@ -94,11 +95,68 @@ const NewsletterCheckbox = (_a) => {
                 }, className: classes.label, lineClamp: show ? undefined : 1 }), t('bmi.newsletter.label')))));
 };
 
+const UnitPicker = ({ displayValue, field, onChange, }) => {
+    const theme = core.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["default"].createElement(core.Menu, { position: "bottom-end", withinPortal: true, offset: 0, styles: {
+            dropdown: {
+                backgroundColor: theme.white,
+                border: `${core.rem(1)} solid ${borderColor}`,
+                borderRadius: 12,
+                boxShadow: '0px 0px 1px 0px #0000000A,0px 2px 8px 0px #0000000A,0px 10px 16px 0px #0000000A',
+                padding: core.rem(4),
+                minWidth: core.rem(90),
+            },
+            item: {
+                fontSize: theme.fontSizes.sm,
+                lineHeight: 1.4,
+                padding: `${core.rem(6)} ${core.rem(10)}`,
+                borderRadius: theme.radius.xs,
+                color: theme.colors.dark[9],
+                '&[data-hovered]': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        } },
+        React__default["default"].createElement(core.Menu.Target, null,
+            React__default["default"].createElement(core.UnstyledButton, { type: "button", sx: (theme) => ({
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                    paddingRight: theme.spacing.xs,
+                    gap: 4,
+                }) },
+                React__default["default"].createElement(core.Text, { component: "span", size: "sm", sx: { lineHeight: 1 } }, displayValue),
+                React__default["default"].createElement(ChevronDown.ChevronDown, { style: { width: 18, height: 18 } }))),
+        React__default["default"].createElement(core.Menu.Dropdown, null, options.map((opt) => {
+            const isSelected = displayValue === opt.label;
+            return (React__default["default"].createElement(core.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 } = index.useTranslations();
     const { classes: cardWrapperClasses = {} } = React.useContext(context.CardWrapperContext);
-    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = React.useContext(BmiFormContext);
+    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = React.useContext(BmiFormContext);
     const radioStyle = {
         body: {
             alignItems: 'center',
@@ -126,21 +184,33 @@ const DefaultForm = (props) => {
                 React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
                     React__default["default"].createElement(reactHookForm.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["default"].createElement("div", null,
-                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
-                                        content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
-                                    }), name: name, value: value, onChange: onChange, min: 0, classNames: {
+                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["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["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["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                         } })),
                 React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
                     React__default["default"].createElement(reactHookForm.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["default"].createElement("div", null,
-                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
-                                        content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
-                                    }), name: name, value: value, onChange: onChange, precision: 1, min: 0, classNames: {
+                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["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["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["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                         } }))),
             withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -199,7 +269,7 @@ var useStyles = core.createStyles((theme) => {
 const InlineForm = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t, locale } = index.useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = React.useContext(BmiFormContext);
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = React.useContext(BmiFormContext);
     const { classes: wrapperClasses = {}, variant: cardWrapperVariant } = React.useContext(context.CardWrapperContext);
     const { classes: formWrapperClasses = {} } = React.useContext(BmiFormContext);
     return (React__default["default"].createElement(index$3.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
@@ -223,15 +293,27 @@ const InlineForm = (props) => {
                 return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                     React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                         React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: locale === 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["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: enableUnitPicker ? (React__default["default"].createElement(UnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.heightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
+                                ? () => ({
+                                    rightSection: {
+                                        paddingRight: 0,
+                                    },
+                                })
+                                : undefined }))));
             } }),
         React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                     React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                         React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
-                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default["default"].createElement(UnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.weightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
+                                ? () => ({
+                                    rightSection: {
+                                        paddingRight: 0,
+                                    },
+                                })
+                                : undefined }))));
             } }),
         withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
@@ -273,9 +355,12 @@ const InlineForm = (props) => {
 };
 
 const BmiForm = (_a) => {
-    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = tslib_es6.__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 = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "defaultUnitSystem", "enableUnitPicker", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
     const { classes } = useStyles(undefined, { name: 'BmiForm' });
+    const { locale } = index.useTranslations();
     const [isTouched, setIsTouched] = React.useState(false);
+    const initialUnitSystem = React.useMemo(() => defaultUnitSystem || 'metric', [defaultUnitSystem]);
+    const [unitSystem, setUnitSystem] = React.useState(initialUnitSystem);
     const { control, handleSubmit, setValue, watch } = reactHookForm.useForm({
         defaultValues: {
             question1: undefined,
@@ -284,14 +369,25 @@ const BmiForm = (_a) => {
         },
     });
     const data = watch();
-    const { locale } = index.useTranslations();
     const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
     const linkTool = React.useMemo(() => getHealthToolLink(constants.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) => tslib_es6.__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: embeddedHeathToolCards_helpers.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: embeddedHeathToolCards_helpers.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: embeddedHeathToolCards_helpers.getBmi({ height, weight }) });
+        })();
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -311,6 +407,21 @@ const BmiForm = (_a) => {
     React.useEffect(() => {
         onChangeProps && onChangeProps(data);
     }, [data]);
+    React.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["default"].createElement(index$5.TemplateProvider, { variant: index$5.CustomStylesType.LEADGEN },
         React__default["default"].createElement(BmiFormContext.Provider, { value: {
@@ -321,6 +432,11 @@ const BmiForm = (_a) => {
                 submitProps,
                 withAdditionalQuestion,
                 classes,
+                enableUnitPicker,
+                unitSystem,
+                unitHeight,
+                unitWeight,
+                onUnitChange,
             } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
 };
 

package/build/{index-5bd9cec1.js → index-a1df99c6.js}

@@ -1,36 +1,36 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
-var index$7 = require('./index-8ce0b228.js');
-var index$3 = require('./index-684d4380.js');
-var index = require('./index-f8605f53.js');
+var index$7 = require('./index-4442f51e.js');
+var index$3 = require('./index-736d9eab.js');
+var index = require('./index-52b63b54.js');
 var innertext = require('innertext');
-var index$1 = require('./index-eddef0b9.js');
-var index$2 = require('./index-c506a798.js');
-var constants = require('./constants-45bf5186.js');
+var index$1 = require('./index-55bf14db.js');
+var index$2 = require('./index-d86bb5d3.js');
+var constants = require('./constants-917075a5.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-b506b2a8.js');
-var treePopoverMenu = require('./treePopoverMenu-c11d10e6.js');
+var togetherComponentGlobalContext = require('./utils-66f85700.js');
+var treePopoverMenu = require('./treePopoverMenu-7b8e7d57.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-93845b3a.js');
+var utils = require('./utils-9152c72c.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-a745eeef.js');
+var dataTransform = require('./dataTransform-cdb24d6c.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$9 = require('./index-2e823d3f.js');
-var togetherMoleculesCardAuthor = require('./index-fcfb639d.js');
-var togetherMoleculesProfileDetail = require('./index-c54e6901.js');
-var togetherMoleculesPostImagePreview = require('./index-521b2ea1.js');
-var index$a = require('./index-0dd3671a.js');
-var index$8 = require('./index-344d3860.js');
-require('./index-75ddd39f.js');
+var index$9 = require('./index-28378242.js');
+var togetherMoleculesCardAuthor = require('./index-978d3f7d.js');
+var togetherMoleculesProfileDetail = require('./index-9e6e0d54.js');
+var togetherMoleculesPostImagePreview = require('./index-4fecbf3d.js');
+var index$a = require('./index-e61d8524.js');
+var index$8 = require('./index-76439c72.js');
+require('./index-36a97f58.js');
 var core$1 = require('@hhgtech/icons/core');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$6 = require('./index-bdc9f41c.js');
-var index$4 = require('./index-06accc81.js');
-var index$5 = require('./index-da0b88fb.js');
-var normalizeLink = require('./normalizeLink-96612202.js');
+var index$6 = require('./index-ed783f22.js');
+var index$4 = require('./index-0a18150e.js');
+var index$5 = require('./index-01db4fd9.js');
+var normalizeLink = require('./normalizeLink-6e07a4d8.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-4dcccc49.js → index-ad838cce.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Locale = require('./Locale-31f8eddd.js');
+var Locale = require('./Locale-c5305b05.js');
 
 exports.Gender = void 0;
 (function (Gender) {

package/build/{index-b8f9021c.js → index-ae282421.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var useScrollbarSize = require('./useScrollbarSize-7752d05f.js');
+var useScrollbarSize = require('./useScrollbarSize-a299b692.js');
 var ReactDOM = require('react-dom');
 var styled = require('@emotion/styled');
-var utils = require('./utils-93845b3a.js');
+var utils = require('./utils-9152c72c.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-39163d52.js → index-b3ef65d1.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var Locale = require('./Locale-31f8eddd.js');
-var index$1 = require('./index-c506a798.js');
+var Locale = require('./Locale-c5305b05.js');
+var index$1 = require('./index-d86bb5d3.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-93845b3a.js');
-var logoIcon = require('./logoIcon-90b1cbd2.js');
-require('./index-4dcccc49.js');
-var index = require('./index-aa6e4223.js');
+var utils = require('./utils-9152c72c.js');
+var logoIcon = require('./logoIcon-71ffd6d5.js');
+require('./index-ad838cce.js');
+var index = require('./index-784efbb8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-e0cb592b.js → index-b78624f9.js}

@@ -1,26 +1,26 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-22a00d64.js');
-var index$5 = require('./index-34be4454.js');
-var index$4 = require('./index-06accc81.js');
-require('./index-49cebcc5.js');
+var index$3 = require('./index-0f836631.js');
+var index$5 = require('./index-c99d3c81.js');
+var index$4 = require('./index-0a18150e.js');
+require('./index-6ff5ccc5.js');
 var miscTheme = require('./miscTheme.js');
-require('./index-b177cedc.js');
-require('./index.styles-4fb7697b.js');
-var index = require('./index-f8605f53.js');
+require('./index-8580e656.js');
+require('./index.styles-7cd9c8eb.js');
+var index = require('./index-52b63b54.js');
 require('@mantine/hooks');
-require('./index-b6aebf86.js');
-require('./utils-93845b3a.js');
-require('./index-a5dff89a.js');
-var context = require('./context-dfaf077f.js');
-var constants = require('./constants-b82a6403.js');
-var index$1 = require('./index-dca68d05.js');
-var index$2 = require('./index-16c2ea7d.js');
-var Locale = require('./Locale-31f8eddd.js');
+require('./index-8f0730b6.js');
+require('./utils-9152c72c.js');
+require('./index-f331fc29.js');
+var context = require('./context-3a5204fb.js');
+var constants = require('./constants-128785e4.js');
+var index$1 = require('./index-924d41f2.js');
+var index$2 = require('./index-30de70fb.js');
+var Locale = require('./Locale-c5305b05.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-74a058d5.js → index-b8d84c57.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-3834354f.js');
+var tslib_es6 = require('./tslib.es6-0519796c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var vaul = require('vaul');
 var styled = require('@emotion/styled');
-var index = require('./index-75ddd39f.js');
+var index = require('./index-36a97f58.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }