@hhgtech/hhg-components 1.29.449 → 1.29.450-beta-1

package/build/esm/{index-8a39a4ff.js → index-6f7f6f25.js}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
-import { T as Text } from './index-6b5ef864.js';
+import { T as Text } from './index-e74207c5.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-3b8f9ca0.js';
+import { M as MediaQueries } from './utils-332d66f9.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-6db8f518.js';
-import { R as Radio$1 } from './index-67e90cbd.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
-import { T as Text$1 } from './index-ee569944.js';
+import { S as ShapedArrowDown } from './index-e3064aac.js';
+import { R as Radio$1 } from './index-079cc59b.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2dd81c43.js';
+import { T as Text$1 } from './index-d270fdd2.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-986954db.js';
-import { C as Close } from './Close-cb4246c4.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { H as Heading } from './index-b459211a.js';
+import { C as Close } from './Close-db1c0170.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-a8154f36.js → index-7231c9d4.js}

@@ -1,20 +1,21 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { createContext, useContext } from 'react';
-import { useMantineTheme } from '@mantine/core';
+import { clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-9b827a5a.js';
-import { I as Input } from './index-67e90cbd.js';
-import { D as DatePicker } from './index-3266848c.js';
-import { T as Text } from './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { L as LastPeriod } from './LastPeriod-024f8432.js';
+import { I as Input } from './index-079cc59b.js';
+import { D as DatePicker } from './index-bebb01f4.js';
+import { T as Text } from './index-e74207c5.js';
+import './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import '@mantine/hooks';
-import './index-f2d03a1d.js';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
+import './index-a5667350.js';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {
@@ -72,28 +73,37 @@ const DefaultLayout = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods, isMobile } = useContext(OvulationFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.Control, null,
-            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType')))),
-        React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
-                withinPortal: true,
-            }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
-        React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineLayout = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = useContext(OvulationFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
-            React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
-            React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
+                React__default.createElement(HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+                React__default.createElement(DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('lastPeriodDate'))))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
                 React__default.createElement(Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
@@ -102,7 +112,8 @@ const InlineLayout = (_a) => {
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
                 React__default.createElement(Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
             form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/index-735af6d8.js

@@ -0,0 +1,237 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-2dd81c43.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-31414714.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-d5757f04.js';
+import { Flex, rem, Stack, clsx, createStyles, Box } from '@mantine/core';
+import { G as GenderOptionControl } from './index-e6aa914e.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-079cc59b.js';
+import '@mantine/dates';
+import './index-ad70b598.js';
+import './index-ab8bcb93.js';
+import './index-a2567c68.js';
+import './index-a5667350.js';
+import { T as Text } from './index-e74207c5.js';
+import './index-fb433ddc.js';
+import { theme } from './miscTheme.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
+import '@mantine/hooks';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { L as LOCALE } from './Locale-0a6a8d6f.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { getBmi } from './embeddedHeathToolCards_helpers.js';
+
+const BmiFormContext = createContext({});
+
+const DefaultForm = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { t, locale } = useTranslations();
+    const { classes: cardWrapperClasses = {} } = useContext(CardWrapperContext);
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                    return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+                } })),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                            t('bmi.ageInput'),
+                            ' ',
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                            content: '25',
+                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+                } })),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                            t('bmi.heightInput'),
+                            ' ',
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                            content: locale === LOCALE.Myanmar ? 6 : 170,
+                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
+                } })),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
+                            t('bmi.weightInput'),
+                            ' ',
+                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                            content: locale === LOCALE.Myanmar ? 130 : 60,
+                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+                } })),
+        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                        return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                    } })),
+            React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                        return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                    } })),
+            React__default.createElement(HealthToolFormWrapper.FormRow, { sx: { paddingLeft: 0, paddingRight: 0 } },
+                React__default.createElement(Stack, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock), spacing: 16, sx: {
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                    } },
+                    React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                            var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                            return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                        } }),
+                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
+};
+
+var useStyles = createStyles((theme) => {
+    return {
+        newsletterBlock: {
+            backgroundColor: theme.colors.neutral[0],
+            padding: `${rem(16)} 0`,
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            '.bmi-btn': {
+                marginTop: 0,
+            },
+        },
+    };
+});
+
+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 { classes: wrapperClasses = {}, variant: cardWrapperVariant } = useContext(CardWrapperContext);
+    const { classes: formWrapperClasses = {} } = useContext(BmiFormContext);
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange }))));
+            } }),
+        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                                rightSection: {
+                                    width: 'auto',
+                                },
+                            }) }))));
+            } }),
+        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(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')) }))));
+            } }),
+        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')) }))));
+            } }),
+        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 }, }) => {
+                    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                        React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(ErrorLabel, { label: error.message, textProps: {
+                                size: 'p4',
+                            }, sx: { marginTop: 6 } }))));
+                } }),
+            React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                        React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')) },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(ErrorLabel, { label: error.message, textProps: {
+                                size: 'p4',
+                            }, sx: { marginTop: 6 } }))));
+                } }),
+            cardWrapperVariant === 'gray' ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                        var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                        return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                            React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
+                    } }),
+                React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
+                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { className: formWrapperClasses.newsletterBlock },
+                React__default.createElement(Stack, { spacing: 16 },
+                    React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
+                            var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                            return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                        } }),
+                    React__default.createElement(Box, { className: clsx(wrapperClasses.submitWrapper) },
+                        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
+};
+
+const BmiForm = (_a) => {
+    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps, withAdditionalQuestion } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion"]);
+    const { classes } = useStyles(undefined, { name: 'BmiForm' });
+    const [isTouched, setIsTouched] = useState(false);
+    const { control, handleSubmit, setValue, watch } = useForm({
+        defaultValues: {
+            question1: undefined,
+            question2: undefined,
+            newsletter: true,
+        },
+    });
+    const data = watch();
+    const { locale } = useTranslations();
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    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 }) });
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    useEffect(() => {
+        Object.keys(valueProps || {}).forEach((k) => {
+            const key = k;
+            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
+                shouldTouch: false,
+                shouldDirty: false,
+                shouldValidate: false,
+            });
+        });
+    }, [valueProps]);
+    useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default.createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+            withAdditionalQuestion,
+            classes,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+export { BmiForm as B };

package/build/esm/{index-ee8214b0.js → index-7463e04e.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { createContext, useContext, useMemo } from 'react';
-import { useMantineTheme } from '@mantine/core';
+import { useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-44a0df67.js';
-import { u as useTranslations } from './index-698e287d.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-fedfafa8.js';
-import { I as Input } from './index-67e90cbd.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-31414714.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-d5757f04.js';
+import { I as Input } from './index-079cc59b.js';
 import '@mantine/dates';
-import './index-e02ef7d6.js';
-import './index-018f3348.js';
-import './index-62988070.js';
-import './index-f2d03a1d.js';
-import './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
+import './index-ad70b598.js';
+import './index-ab8bcb93.js';
+import './index-a2567c68.js';
+import './index-a5667350.js';
+import './index-e74207c5.js';
+import './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
-import { I as INPUT_RANGE } from './constants-100a4c50.js';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.js';
+import { I as INPUT_RANGE } from './constants-303288ea.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const PWGFormContext = createContext({});
@@ -28,47 +29,61 @@ const DefaultForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { linkTool, form, submitProps } = useContext(PWGFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, form.getInputProps('lastWeight'))),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
-                content: '160',
-            }) }, form.getInputProps('height'))),
-        React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                content: '50',
-            }) }, form.getInputProps('weight'))),
-        React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('lastWeight')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }) }, form.getInputProps('height')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }) }, form.getInputProps('weight')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { linkTool, form, submitProps } = useContext(PWGFormContext);
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
-            React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
-            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
-            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '160',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
-            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
-                    content: '50',
-                }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
-            React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+                React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+                React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/{index-c2ac6223.js → index-7869ed7b.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-ee569944.js';
+import { T as Text } from './index-d270fdd2.js';
 import cn from 'classnames';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as Text$1 } from './index-6b5ef864.js';
+import { I as ImageWrap } from './index-6824fad6.js';
+import { T as Text$1 } from './index-e74207c5.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),