@hhgtech/hhg-components 1.29.502 → 1.29.504-beta-1

package/build/esm/index-5a9befd0.js

@@ -0,0 +1,380 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-84a4e01b.js';
+import React__default, { createContext, useState, useContext, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-410b479f.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-2e3db2ea.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-dd138032.js';
+import '@mantine/dates';
+import './index-60311461.js';
+import './index-1f276643.js';
+import './index-09aa88fc.js';
+import './index-4ead6f5b.js';
+import { T as Text } from './index-58654ce9.js';
+import './index-1fb7dccd.js';
+import { T as TemplateProvider, C as CustomStylesType } from './index-17fca51b.js';
+import './index.styles-68a2685d.js';
+import { u as useTranslations } from './index-7f6e3580.js';
+import '@mantine/hooks';
+import './utils-bca4ed20.js';
+import './index-ae1638d4.js';
+import { H as HealthToolFormWrapper } from './index-47405faa.js';
+import { C as CardWrapperContext } from './context-9c63e324.js';
+import { G as GenderOptionControl } from './index-974c6923.js';
+import '@hhgtech/icons/other';
+import { L as LOCALE } from './Locale-5cc6b290.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { getBmi } from './embeddedHeathToolCards_helpers.js';
+
+const Question1Label = (_a) => {
+    var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
+    const { t } = useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || Text;
+    return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.weightLossSupport')));
+};
+const Question2Label = (_a) => {
+    var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
+    const { t } = useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || Text;
+    return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness')));
+};
+const Question2Description = (_a) => {
+    var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
+    const { t } = useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || Text;
+    return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness.desc')));
+};
+
+const BmiFormContext = createContext({});
+
+var useStyles$1 = createStyles(() => {
+    return {
+        label: {
+            marginTop: 2,
+            cursor: 'pointer',
+            userSelect: 'none',
+        },
+    };
+});
+
+const NewsletterCheckbox = (_a) => {
+    var { labelTextProps, checked: checkedProps, LabelWrapper, useCollapse = true } = _a, props = __rest(_a, ["labelTextProps", "checked", "LabelWrapper", "useCollapse"]);
+    const { t } = useTranslations();
+    const [show, setShow] = useState(!useCollapse);
+    const [firstTime, setFirstTime] = useState(true);
+    const [checked, setChecked] = useState(checkedProps);
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p3' }, labelTextProps) : {};
+    const Component = LabelWrapper || Text;
+    const { classes } = useStyles$1(undefined, { name: 'NewsletterCheckbox' });
+    return (React__default.createElement(Flex, { gap: 8, align: 'flex-start' },
+        React__default.createElement(Checkbox, Object.assign({}, props, { label: undefined, size: "sm", checked: checked, onChange: (event) => {
+                if (firstTime) {
+                    setFirstTime(false);
+                }
+                else {
+                    setChecked(event.currentTarget.checked);
+                }
+            }, styles: {
+                labelWrapper: {
+                    display: 'none',
+                },
+            } })),
+        React__default.createElement(Box, null,
+            React__default.createElement(Component, Object.assign({}, labelProps, { onClick: () => {
+                    useCollapse && setShow((v) => !v);
+                }, className: classes.label, lineClamp: show ? undefined : 1 }), t('bmi.newsletter.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 radioStyle = {
+        body: {
+            alignItems: 'center',
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolDefaultLayout$1, { isMobile: props.isMobile, gutter: 4 },
+            React__default.createElement(HealthToolDefaultLayout$1.Row, { px: 16 },
+                React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    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("div", null,
+                                React__default.createElement(HealthToolDefaultLayout$1.GenderControl, { LabelWrapper: HealthToolDefaultLayout$1.Label, error: undefined, onChange: onChange, gap: 4 }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default.createElement(Controller, { name: "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("div", null,
+                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
+                                        content: '25',
+                                    }), name: name, value: value, onChange: onChange, min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default.createElement(Controller, { name: "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: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default.createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                            return (React__default.createElement("div", null,
+                                React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === LOCALE.Myanmar ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } }))),
+            withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Grid, { gutter: 4, px: 16 },
+                    React__default.createElement(HealthToolDefaultLayout$1.Col, null,
+                        React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                                return (React__default.createElement("div", null,
+                                    React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Question1Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg" },
+                                        React__default.createElement(Flex, { gap: "lg" },
+                                            React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
+                                            React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
+                                    (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                            } })),
+                    React__default.createElement(HealthToolDefaultLayout$1.Col, null,
+                        React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default.createElement("div", null,
+                                    React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Question2Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Question2Description, { LabelWrapper: HealthToolDefaultLayout$1.SubLabel })) },
+                                        React__default.createElement(Flex, { gap: "lg" },
+                                            React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
+                                            React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
+                                    (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                            } }))),
+                React__default.createElement(Box, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
+                    React__default.createElement(Grid, { gutter: 8, px: 16, py: 12 },
+                        React__default.createElement(HealthToolDefaultLayout$1.Col, null,
+                            React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                                    var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                                    return (React__default.createElement(NewsletterCheckbox, Object.assign({ size: "sm", onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                                } })),
+                        React__default.createElement(HealthToolDefaultLayout$1.Col, null,
+                            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default.createElement(Box, { px: 16, sx: { paddingBottom: 8 } },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))));
+};
+
+var useStyles = createStyles((theme) => {
+    return {
+        newsletterBlock: {
+            backgroundColor: theme.colors.neutral[0],
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            '.bmi-btn': {
+                marginTop: 0,
+            },
+        },
+        inputRightSection: {
+            fontSize: rem(13),
+            lineHeight: rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+            whiteSpace: 'nowrap',
+        },
+    };
+});
+
+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: locale !== LOCALE.Malaysia && (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' || cardWrapperVariant === 'violet' ? (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, { py: 16, className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.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(NewsletterCheckbox, Object.assign({ size: "sm", labelTextProps: { size: 'p4' }, onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value, useCollapse: false }, 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, isMobile } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
+    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(TemplateProvider, { variant: CustomStylesType.LEADGEN },
+        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, { isMobile: isMobile }))))));
+};
+
+const HealthToolDefaultLayoutContext = createContext({});
+
+const Row = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { gutter } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement(Grid, Object.assign({ gutter: gutter }, props), children));
+};
+const Col = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React__default.createElement(Grid.Col, Object.assign({ span: 12 }, props), children));
+};
+const Label = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { labelSize } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement(Text, Object.assign({ size: labelSize, weight: "semiBold" }, props, { span: true }), children));
+};
+const OptionLabel = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { optionLabelSize } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement(Text, Object.assign({ size: optionLabelSize, weight: "regular" }, props, { span: true }), children));
+};
+const SubLabel = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { subLabelSize } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement(Text, Object.assign({ size: subLabelSize }, props), children));
+};
+const InputNumber = (_a) => {
+    var { error } = _a, props = __rest(_a, ["error"]);
+    const { inputSize } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement("div", null,
+        React__default.createElement(Input.Number, Object.assign({ size: inputSize }, props)),
+        error && React__default.createElement(Error, { label: error })));
+};
+const GenderControl = (props) => {
+    const { inputSize } = useContext(HealthToolDefaultLayoutContext);
+    return React__default.createElement(GenderOptionControl, Object.assign({ size: inputSize }, props));
+};
+const Error = (props) => {
+    const { errorLabelSize } = useContext(HealthToolDefaultLayoutContext);
+    return (React__default.createElement(ErrorLabel, Object.assign({ textProps: { size: errorLabelSize }, sx: { marginTop: 5 } }, props)));
+};
+const HealthToolDefaultLayout = (_a) => {
+    var _b, _c, _d, _e, _f, _g;
+    var { children, isMobile } = _a, props = __rest(_a, ["children", "isMobile"]);
+    const merged = Object.assign({ isMobile, labelSize: (_b = props.labelSize) !== null && _b !== void 0 ? _b : (isMobile ? 'p2' : 's4'), subLabelSize: (_c = props.subLabelSize) !== null && _c !== void 0 ? _c : 'subText', optionLabelSize: (_d = props.optionLabelSize) !== null && _d !== void 0 ? _d : (isMobile ? 'p2' : 's4'), inputSize: (_e = props.inputSize) !== null && _e !== void 0 ? _e : (isMobile ? 'sm' : 'md'), gutter: (_f = props.gutter) !== null && _f !== void 0 ? _f : (isMobile ? 4 : 12), errorLabelSize: (_g = props.errorLabelSize) !== null && _g !== void 0 ? _g : 'p3' }, props);
+    return (React__default.createElement(HealthToolDefaultLayoutContext.Provider, { value: merged }, children));
+};
+var HealthToolDefaultLayout$1 = Object.assign(HealthToolDefaultLayout, {
+    Row,
+    Col,
+    SubLabel,
+    Label,
+    OptionLabel,
+    Input,
+    InputNumber,
+    GenderControl,
+    Error,
+});
+
+export { BmiForm as B, HealthToolDefaultLayout$1 as H, NewsletterCheckbox as N, Question1Label as Q, Question2Label as a, Question2Description as b };

package/build/esm/{index-c80af3fd.js → index-60311461.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-a8dd988b.js';
+import './index-1f276643.js';
 import { siteHost, siteOptions, COUNTRY_CURRENCY_SYMBOL } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-4f54dec0.js';
+import { L as LOCALE } from './Locale-5cc6b290.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
@@ -157,6 +157,18 @@ const LOCALE_SPECS = {
         ABOUT_US_IMAGE: '/fil/images/aboutus/PH.png',
     },
 };
+const COUNTRY_LIST = [
+    { countryCode: 'VN', countryName: 'Việt Nam', languageCode: 'vi' },
+    { countryCode: 'PH', countryName: 'Philippines', languageCode: 'en' },
+    { countryCode: 'TH', countryName: 'ประเทศไทย', languageCode: 'th' },
+    { countryCode: 'KH', countryName: 'កម្ពុជា', languageCode: 'km' },
+    { countryCode: 'MM', countryName: 'မြန်မာ', languageCode: 'my' },
+    { countryCode: 'TW', countryName: '台灣', languageCode: 'zh' },
+    { countryCode: 'SG', countryName: '新加坡', languageCode: 'zh' },
+    { countryCode: 'ID', countryName: 'Indonesia', languageCode: 'id' },
+    { countryCode: 'IN', countryName: 'भारत', languageCode: 'hi' },
+    { countryCode: 'MY', countryName: 'Malaysia', languageCode: 'ms' },
+];
 const STATIC_PAGES = {
     'vi-VN': {
         PRIVACY: '/privacy',
@@ -387,9 +399,9 @@ const LOCALE_HAS_COMMUNITY_SITE = [
     LOCALE.Myanmar,
 ];
 const HAS_CLINITY_DOWNLOAD_SITE = [
-    LOCALE.Vietnam,
+    // LOCALE.Vietnam,
     LOCALE.Indonesia,
-    LOCALE.Malaysia,
+    // LOCALE.Malaysia,
     LOCALE.PhilippinesEnglish,
     LOCALE.PhilippinesTagalog,
     LOCALE.Thailand,
@@ -815,6 +827,7 @@ var index = /*#__PURE__*/Object.freeze({
   SSO_URL: SSO_URL,
   USER_GEOLOCATION_COORDINATES_COOKIE: USER_GEOLOCATION_COORDINATES_COOKIE,
   LOCALE_SPECS: LOCALE_SPECS,
+  COUNTRY_LIST: COUNTRY_LIST,
   STATIC_PAGES: STATIC_PAGES,
   UP_BASEPATH: UP_BASEPATH,
   LOCALE_HAS_COMMUNITY_SITE: LOCALE_HAS_COMMUNITY_SITE,
@@ -850,4 +863,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, HAS_CLINITY_DOWNLOAD_SITE as H, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_LOCALES as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, LOCALE_HAS_COMMUNITY_SITE as c, CARE_BOOKING_LOCALES as d, VIDEO_DETAIL_TEMP_STORAGE as e, CDN_ADDRESS as f, DATE_FNS_LOCALE as g, BEARER_REFRESH_TOKEN_COOKIE as h, index as i, SSO_URL as j, UP_BASEPATH as k, DATE_FNS_DATE_FORMAT as l, EMERGENCY_STATUS as m, ServicePrice as n, SERVICE_TYPE as o };
+export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, HAS_CLINITY_DOWNLOAD_SITE as H, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_LOCALES as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, LOCALE_HAS_COMMUNITY_SITE as c, CARE_BOOKING_LOCALES as d, VIDEO_DETAIL_TEMP_STORAGE as e, CDN_ADDRESS as f, DATE_FNS_LOCALE as g, BEARER_REFRESH_TOKEN_COOKIE as h, index as i, SSO_URL as j, COUNTRY_LIST as k, UP_BASEPATH as l, DATE_FNS_DATE_FORMAT as m, EMERGENCY_STATUS as n, ServicePrice as o, SERVICE_TYPE as p };

package/build/esm/{index-13f14f3d.js → index-61a513d4.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-30239d68.js';
+import { a as __awaiter } from './tslib.es6-84a4e01b.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-3c950bc2.js';
-import { T as Text } from './index-ee0e07c2.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-335aa685.js';
+import { H as Heading } from './index-43399539.js';
+import { T as Text } from './index-58654ce9.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-0e5f5152.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-a34084bc.js';
+import { D as DEFAULT_IMG } from './constants-2e3db2ea.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-ff3703f7.js → index-6519d2c4.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-30239d68.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-84a4e01b.js';
 import * as React from 'react';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-d2863e9f.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-c80af3fd.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-2892a93f.js';
-import { f as formatCommunity, a as formatPost } from './dataTransform-99c99d38.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-226f6f33.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-60311461.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-5dc5abcc.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-399cf1af.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-26059208.js';
+import './translationsContext-8a37b301.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-c7f0c8c5.js';
+import { I as Input } from './index-dd138032.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-7eaf794c.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-e5605609.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-625367e5.js';
+import { L as Logo$1 } from './index-99e49918.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-a8dd988b.js';
-import { C as CommonGAssets } from './index-455d6c13.js';
-import './index-775acaac.js';
-import { T as Text } from './index-ee0e07c2.js';
-import { B as Button } from './index-80a2f314.js';
-import './index-8895cfb2.js';
-import './index.styles-8c49d75c.js';
+import { V as VideoType } from './index-1f276643.js';
+import { C as CommonGAssets } from './index-09aa88fc.js';
+import './index-4ead6f5b.js';
+import { T as Text } from './index-58654ce9.js';
+import { B as Button } from './index-1fb7dccd.js';
+import './index-17fca51b.js';
+import './index.styles-68a2685d.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-d6658365.js';
-import './index-2f0baed4.js';
-import { L as LOCALISED_SLUGS } from './constants-d0729f75.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-50ce758c.js';
-import { I as Indicator$1 } from './index-ef3c6c25.js';
-import { u as useTranslations } from './index-af067d95.js';
-import { u as useIsInit } from './useIsInit-6efef225.js';
-import { L as LOCALIZED_SLUGS } from './constants-c19aa9af.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-bca4ed20.js';
+import './index-ae1638d4.js';
+import { L as LOCALISED_SLUGS } from './constants-5216e579.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-374672f8.js';
+import { I as Indicator$1 } from './index-cff7f77a.js';
+import { u as useTranslations } from './index-7f6e3580.js';
+import { u as useIsInit } from './useIsInit-14b0769f.js';
+import { L as LOCALIZED_SLUGS } from './constants-06d0cfca.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-91604e15.js';
-import { H as Heading } from './index-3c950bc2.js';
+import { B as Button$1 } from './index-98ee5066.js';
+import { H as Heading } from './index-43399539.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
-import { C as Container } from './index-b3614ac9.js';
+import { C as Container } from './index-5d970156.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-eb766205.js';
-import { L as LOCALE } from './Locale-4f54dec0.js';
+import { U as UserAvatar } from './index-920060a2.js';
+import { L as LOCALE } from './Locale-5cc6b290.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-db1dc444.js';
+import { g as getDataWithCache } from './core-d25b1335.js';
 
 const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -2108,6 +2108,10 @@ const StyledHeaderWrapper = styled.div `
 
   &[data-win-cash-back-theme='true'] {
     background-color: ${theme.colors.blue900};
+
+    .search-wrapper {
+      padding: 8px 16px;
+    }
   }
 
   &[data-site-type='helloSites'] {
@@ -2404,7 +2408,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     }, [isMobile]);
     const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
     return (React__default.createElement(StyledHeaderWrapper, { "data-site-type": siteType, "data-sponsored": isSponsored, "data-sitewide-banner-shown": isShowingSiteWideBanner, "data-header-type": "home", "data-collapsed": isCollapsed, "data-is-displayed": true, "data-win-cash-back-theme": winCashBackTheme, id: "site-header", ref: headerRef, className: customClasses.wrapper },
-        sitewideBanner,
+        isShowingSiteWideBanner && sitewideBanner,
         React__default.createElement(StyledHeader, { className: customClasses.header, "data-site-type": siteType, "data-win-cash-back-theme": winCashBackTheme },
             React__default.createElement(StyledLeftGroup, { className: customClasses.leftGroup, "data-site-type": siteType },
                 isMobile && (React__default.createElement(HamburgerMenu, { menuItems: menuItems.filter((m) => !!m.link), isHomepage: isHomepage, projectType: projectType })),
@@ -2440,7 +2444,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 borderLeft: '1px solid #E4E8EC',
                             } })),
                         React__default.createElement(CartBadge, { "data-cart-menu": "true", "data-event-category": "Ecommerce", "data-event-action": "Cart Click", "data-event-label": currentUrl, count: cartNumber, locale: locale })))))),
-        isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, { style: { padding: winCashBackTheme ? '12px 16px' : undefined } },
+        isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, { className: "search-wrapper" },
             React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage }))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
@@ -2500,7 +2504,7 @@ const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBa
         headerRef.current,
     ]);
     const defaultHeaderHeight = useMemo(() => {
-        let res = isMobile ? 56 : 56;
+        let res = isMobile ? 56 : 60;
         if (isShowingSiteWideBanner) {
             res += 64;
         }

package/build/esm/{index-4677f7f3.js → index-67adb864.js}

@@ -1,9 +1,9 @@
-import { a as __awaiter } from './tslib.es6-30239d68.js';
+import { a as __awaiter } from './tslib.es6-84a4e01b.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-2892a93f.js';
-import { L as LOCALE_SPECS, h as BEARER_REFRESH_TOKEN_COOKIE } from './index-c80af3fd.js';
+import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-5dc5abcc.js';
+import { L as LOCALE_SPECS, h as BEARER_REFRESH_TOKEN_COOKIE } from './index-60311461.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { L as LOCALE } from './Locale-4f54dec0.js';
+import { L as LOCALE } from './Locale-5cc6b290.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const SSO_V2_PATHS = {