@hhgtech/hhg-components 1.29.501 → 1.29.503

package/build/{index-e7735a49.js → index-35008f60.js}

@@ -1,24 +1,24 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-306bd046.js');
+var tslib_es6 = require('./tslib.es6-b0022ccb.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-9dc8eff2.js');
+var index$2 = require('./index-258dd8b0.js');
 require('@mantine/dates');
-var index = require('./index-c7954cd4.js');
-require('./index-15a38c51.js');
-require('./index-64eabc62.js');
-require('./index-99227221.js');
-require('./index-d5da9573.js');
-require('./index-df7b43db.js');
-require('./index-6f691efd.js');
-require('./index.styles-38f5439f.js');
-var index$1 = require('./index-9c751136.js');
+var index = require('./index-bd8a349e.js');
+require('./index-5881bc43.js');
+require('./index-149d4d82.js');
+require('./index-1f89af21.js');
+require('./index-96ec795a.js');
+require('./index-9c9bdd88.js');
+require('./index-370a2531.js');
+require('./index.styles-77e26658.js');
+var index$1 = require('./index-25deeb04.js');
 require('@mantine/hooks');
-require('./utils-af957497.js');
-require('./index-6b924a8a.js');
-var utils = require('./utils-44d56050.js');
-var Locale = require('./Locale-68bec006.js');
+require('./utils-6c4879f4.js');
+require('./index-4dc76eb3.js');
+var utils = require('./utils-a8498889.js');
+var Locale = require('./Locale-7c22db2d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-35ab4956.js

@@ -0,0 +1,391 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-b0022ccb.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var useHealthToolCache = require('./useHealthToolCache-04d1c4f9.js');
+var constants = require('./constants-7e6f0e70.js');
+var core = require('@mantine/core');
+var index$2 = require('./index-258dd8b0.js');
+require('@mantine/dates');
+require('./index-bd8a349e.js');
+require('./index-5881bc43.js');
+require('./index-149d4d82.js');
+require('./index-1f89af21.js');
+var index$1 = require('./index-96ec795a.js');
+require('./index-9c9bdd88.js');
+var index$5 = require('./index-370a2531.js');
+require('./index.styles-77e26658.js');
+var index = require('./index-25deeb04.js');
+require('@mantine/hooks');
+require('./utils-6c4879f4.js');
+require('./index-4dc76eb3.js');
+var index$3 = require('./index-328083e4.js');
+var context = require('./context-7f5ecaaf.js');
+var index$4 = require('./index-4c17e64e.js');
+require('@hhgtech/icons/other');
+var Locale = require('./Locale-7c22db2d.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Question1Label = (_a) => {
+    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
+    const { t } = index.useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || index$1.Text;
+    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.weightLossSupport')));
+};
+const Question2Label = (_a) => {
+    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
+    const { t } = index.useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || index$1.Text;
+    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness')));
+};
+const Question2Description = (_a) => {
+    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
+    const { t } = index.useTranslations();
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
+    const Component = LabelWrapper || index$1.Text;
+    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness.desc')));
+};
+
+const BmiFormContext = React.createContext({});
+
+var useStyles$1 = core.createStyles(() => {
+    return {
+        label: {
+            marginTop: 2,
+            cursor: 'pointer',
+            userSelect: 'none',
+        },
+    };
+});
+
+const NewsletterCheckbox = (_a) => {
+    var { labelTextProps, checked: checkedProps, LabelWrapper, useCollapse = true } = _a, props = tslib_es6.__rest(_a, ["labelTextProps", "checked", "LabelWrapper", "useCollapse"]);
+    const { t } = index.useTranslations();
+    const [show, setShow] = React.useState(!useCollapse);
+    const [firstTime, setFirstTime] = React.useState(true);
+    const [checked, setChecked] = React.useState(checkedProps);
+    const labelProps = !LabelWrapper ? Object.assign({ size: 'p3' }, labelTextProps) : {};
+    const Component = LabelWrapper || index$1.Text;
+    const { classes } = useStyles$1(undefined, { name: 'NewsletterCheckbox' });
+    return (React__default["default"].createElement(core.Flex, { gap: 8, align: 'flex-start' },
+        React__default["default"].createElement(index$2.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["default"].createElement(core.Box, null,
+            React__default["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 } = index.useTranslations();
+    const { classes: cardWrapperClasses = {} } = React.useContext(context.CardWrapperContext);
+    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = React.useContext(BmiFormContext);
+    const radioStyle = {
+        body: {
+            alignItems: 'center',
+        },
+    };
+    return (React__default["default"].createElement(index$3.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(HealthToolDefaultLayout$1, { isMobile: props.isMobile, gutter: 4 },
+            React__default["default"].createElement(HealthToolDefaultLayout$1.Row, { px: 16 },
+                React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default["default"].createElement(reactHookForm.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["default"].createElement("div", null,
+                                React__default["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["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default["default"].createElement(reactHookForm.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["default"].createElement("div", null,
+                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["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["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                            return (React__default["default"].createElement("div", null,
+                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
+                                    }), name: name, value: value, onChange: onChange, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } })),
+                React__default["default"].createElement(HealthToolDefaultLayout$1.Col, { span: 12 },
+                    React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                            return (React__default["default"].createElement("div", null,
+                                React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }),
+                                (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                        } }))),
+            withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(core.Grid, { gutter: 4, px: 16 },
+                    React__default["default"].createElement(HealthToolDefaultLayout$1.Col, null,
+                        React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                                return (React__default["default"].createElement("div", null,
+                                    React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(Question1Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg" },
+                                        React__default["default"].createElement(core.Flex, { gap: "lg" },
+                                            React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
+                                            React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
+                                    (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                            } })),
+                    React__default["default"].createElement(HealthToolDefaultLayout$1.Col, null,
+                        React__default["default"].createElement(reactHookForm.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["default"].createElement("div", null,
+                                    React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(Question2Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(Question2Description, { LabelWrapper: HealthToolDefaultLayout$1.SubLabel })) },
+                                        React__default["default"].createElement(core.Flex, { gap: "lg" },
+                                            React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
+                                            React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
+                                    (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
+                            } }))),
+                React__default["default"].createElement(core.Box, { className: core.clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
+                    React__default["default"].createElement(core.Grid, { gutter: 8, px: 16, py: 12 },
+                        React__default["default"].createElement(HealthToolDefaultLayout$1.Col, null,
+                            React__default["default"].createElement(reactHookForm.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 = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
+                                    return (React__default["default"].createElement(NewsletterCheckbox, Object.assign({ size: "sm", onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                                } })),
+                        React__default["default"].createElement(HealthToolDefaultLayout$1.Col, null,
+                            React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default["default"].createElement(core.Box, { px: 16, sx: { paddingBottom: 8 } },
+                React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))));
+};
+
+var useStyles = core.createStyles((theme) => {
+    return {
+        newsletterBlock: {
+            backgroundColor: theme.colors.neutral[0],
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            '.bmi-btn': {
+                marginTop: 0,
+            },
+        },
+        inputRightSection: {
+            fontSize: core.rem(13),
+            lineHeight: core.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 } = index.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = React.useContext(BmiFormContext);
+    const { classes: wrapperClasses = {}, variant: cardWrapperVariant } = React.useContext(context.CardWrapperContext);
+    const { classes: formWrapperClasses = {} } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index$3.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$4.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange }))));
+            } }),
+        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$2.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["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                                rightSection: {
+                                    width: 'auto',
+                                },
+                            }) }))));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) }))));
+            } }),
+        React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
+                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) }))));
+            } }),
+        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                    return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                        React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
+                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
+                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$2.ErrorLabel, { label: error.message, textProps: {
+                                size: 'p4',
+                            }, sx: { marginTop: 6 } }))));
+                } }),
+            React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                        React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(index$1.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))) },
+                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
+                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$2.ErrorLabel, { label: error.message, textProps: {
+                                size: 'p4',
+                            }, sx: { marginTop: 6 } }))));
+                } }),
+            cardWrapperVariant === 'gray' || cardWrapperVariant === 'violet' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(reactHookForm.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 = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
+                        return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
+                            React__default["default"].createElement(index$2.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$1.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
+                    } }),
+                React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
+                    React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { py: 16, className: core.clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
+                React__default["default"].createElement(core.Stack, { spacing: 16 },
+                    React__default["default"].createElement(reactHookForm.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 = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
+                            return (React__default["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["default"].createElement(core.Box, { className: core.clsx(wrapperClasses.submitWrapper) },
+                        React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))))) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
+            React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.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 = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
+    const { classes } = useStyles(undefined, { name: 'BmiForm' });
+    const [isTouched, setIsTouched] = React.useState(false);
+    const { control, handleSubmit, setValue, watch } = reactHookForm.useForm({
+        defaultValues: {
+            question1: undefined,
+            question2: undefined,
+            newsletter: true,
+        },
+    });
+    const data = watch();
+    const { locale } = index.useTranslations();
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    const onValid = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        const height = bmiUnit.heightConvert(data.height);
+        const weight = bmiUnit.weightConvert(data.weight);
+        const submitValue = Object.assign(Object.assign({}, data), { height,
+            weight, bmi: embeddedHeathToolCards_helpers.getBmi({ height, weight }) });
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    React.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]);
+    React.useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default["default"].createElement(index$5.TemplateProvider, { variant: index$5.CustomStylesType.LEADGEN },
+        React__default["default"].createElement(BmiFormContext.Provider, { value: {
+                control,
+                bmiGenerated,
+                isTouched,
+                linkTool,
+                submitProps,
+                withAdditionalQuestion,
+                classes,
+            } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
+};
+
+const HealthToolDefaultLayoutContext = React.createContext({});
+
+const Row = (_a) => {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    const { gutter } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement(core.Grid, Object.assign({ gutter: gutter }, props), children));
+};
+const Col = (_a) => {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    return (React__default["default"].createElement(core.Grid.Col, Object.assign({ span: 12 }, props), children));
+};
+const Label = (_a) => {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    const { labelSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: labelSize, weight: "semiBold" }, props, { span: true }), children));
+};
+const OptionLabel = (_a) => {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    const { optionLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: optionLabelSize, weight: "regular" }, props, { span: true }), children));
+};
+const SubLabel = (_a) => {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    const { subLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: subLabelSize }, props), children));
+};
+const InputNumber = (_a) => {
+    var { error } = _a, props = tslib_es6.__rest(_a, ["error"]);
+    const { inputSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement(index$2.Input.Number, Object.assign({ size: inputSize }, props)),
+        error && React__default["default"].createElement(Error, { label: error })));
+};
+const GenderControl = (props) => {
+    const { inputSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return React__default["default"].createElement(index$4.GenderOptionControl, Object.assign({ size: inputSize }, props));
+};
+const Error = (props) => {
+    const { errorLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
+    return (React__default["default"].createElement(index$2.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 = tslib_es6.__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["default"].createElement(HealthToolDefaultLayoutContext.Provider, { value: merged }, children));
+};
+var HealthToolDefaultLayout$1 = Object.assign(HealthToolDefaultLayout, {
+    Row,
+    Col,
+    SubLabel,
+    Label,
+    OptionLabel,
+    Input: index$2.Input,
+    InputNumber,
+    GenderControl,
+    Error,
+});
+
+exports.BmiForm = BmiForm;
+exports.HealthToolDefaultLayout = HealthToolDefaultLayout$1;
+exports.NewsletterCheckbox = NewsletterCheckbox;
+exports.Question1Label = Question1Label;
+exports.Question2Description = Question2Description;
+exports.Question2Label = Question2Label;

package/build/{index-13b3926c.js → index-3aca5ce9.js}

@@ -1,27 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-306bd046.js');
+var tslib_es6 = require('./tslib.es6-b0022ccb.js');
 var React = require('react');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-73b767a3.js');
-var index = require('./index-9c751136.js');
-var index$6 = require('./index-64eabc62.js');
-var constants = require('./constants-d8ede4db.js');
-var index$2 = require('./index-47efd5e7.js');
-var index$5 = require('./index-9dc8eff2.js');
-var index$3 = require('./index-52b9b07f.js');
-var index$4 = require('./index-d5da9573.js');
-require('./index-df7b43db.js');
+var useHealthToolCache = require('./useHealthToolCache-04d1c4f9.js');
+var index = require('./index-25deeb04.js');
+var index$6 = require('./index-149d4d82.js');
+var constants = require('./constants-7e6f0e70.js');
+var index$2 = require('./index-4c17e64e.js');
+var index$5 = require('./index-258dd8b0.js');
+var index$3 = require('./index-fa4de9e1.js');
+var index$4 = require('./index-96ec795a.js');
+require('./index-9c9bdd88.js');
 require('@mantine/core');
-require('./index-6f691efd.js');
-require('./index.styles-38f5439f.js');
+require('./index-370a2531.js');
+require('./index.styles-77e26658.js');
 require('@mantine/hooks');
-require('./index-99227221.js');
-require('./utils-af957497.js');
-require('./index-6b924a8a.js');
-require('./index-c7954cd4.js');
-var context = require('./context-02826e87.js');
-var index$1 = require('./index-c996e017.js');
+require('./index-1f89af21.js');
+require('./utils-6c4879f4.js');
+require('./index-4dc76eb3.js');
+require('./index-bd8a349e.js');
+var context = require('./context-7f5ecaaf.js');
+var index$1 = require('./index-328083e4.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-47efd5e7.js → index-4c17e64e.js}

@@ -1,35 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-306bd046.js');
+var tslib_es6 = require('./tslib.es6-b0022ccb.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$2 = require('./index-9dc8eff2.js');
+var index$2 = require('./index-258dd8b0.js');
 require('@mantine/dates');
-require('./index-c7954cd4.js');
-require('./index-15a38c51.js');
-var index$1 = require('./index-64eabc62.js');
-require('./index-99227221.js');
-var index$3 = require('./index-d5da9573.js');
-require('./index-df7b43db.js');
-require('./index-6f691efd.js');
-require('./index.styles-38f5439f.js');
-var index = require('./index-9c751136.js');
+require('./index-bd8a349e.js');
+require('./index-5881bc43.js');
+var index$1 = require('./index-149d4d82.js');
+require('./index-1f89af21.js');
+var index$3 = require('./index-96ec795a.js');
+require('./index-9c9bdd88.js');
+require('./index-370a2531.js');
+require('./index.styles-77e26658.js');
+var index = require('./index-25deeb04.js');
 require('@mantine/hooks');
-require('./utils-af957497.js');
-require('./index-6b924a8a.js');
+require('./utils-6c4879f4.js');
+require('./index-4dc76eb3.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var useStyles = core.createStyles((theme, { type }) => {
+const sizeMap = {
+    lg: {
+        height: 48,
+    },
+    md: {
+        height: 40,
+    },
+    sm: {
+        height: 32,
+    },
+    xs: {
+        height: 32,
+    },
+};
+var useStyles = core.createStyles((theme, { type, gap, size }) => {
     const isMarryBaby = theme.other.template === 'mb';
+    const base = sizeMap[size] || {};
+    const height = base.height;
     return {
         root: {},
-        wrapper: Object.assign({ gap: core.rem(8) }, (type === 'radio' && {
+        wrapper: Object.assign({ gap: core.rem(gap || 8) }, (type === 'radio' && {
             justifyContent: 'flex-end',
-            gap: core.rem(24),
+            gap: core.rem(gap || 24),
         })),
         groupErr: {
             fontSize: core.rem(14),
@@ -54,10 +70,15 @@ var useStyles = core.createStyles((theme, { type }) => {
         itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
             ? {
                 position: 'relative',
-                padding: `${core.rem(6)} ${core.rem(16)}`,
+                padding: `${core.rem(2)} ${core.rem(16)}`,
                 border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
+                backgroundColor: '#fff',
                 borderRadius: core.rem(isMarryBaby ? 16 : 4),
                 cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height,
                 '&[data-disabled="true"]': {
                     background: theme.colors.gray[1],
                     color: `${theme.colors.gray[4]} !important`,
@@ -66,7 +87,7 @@ var useStyles = core.createStyles((theme, { type }) => {
                     },
                 },
                 img: {
-                    height: core.rem(26),
+                    height: core.rem(size === 'lg' ? 26 : 22),
                 },
             }
             : type === 'radio'
@@ -87,15 +108,18 @@ const GenderOptionControl = (_a) => {
     var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
         male: 'male',
         female: 'female',
-    }, type = 'button', hideLabel } = _a, radioProps = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    }, type = 'button', hideLabel, labelTextProps, gap, size = 'md', LabelWrapper } = _a, radioProps = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "gap", "size", "LabelWrapper"]);
     const { t } = index.useTranslations();
-    const { classes, cx, theme } = useStyles({ type }, {
+    const { classes, cx, theme } = useStyles({ type, gap, size }, {
         name: 'GenderOptionControl',
         styles,
     });
     const isMarryBaby = theme.other.template === 'mb';
     const [availableValue, setAvailableValue] = React.useState();
     const ref = React.useRef(null);
+    const labelProps = !LabelWrapper
+        ? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
+    const LabelComponent = LabelWrapper || index$3.Text;
     const genderOptions = React.useMemo(() => [
         {
             value: genderValue.male,
@@ -112,7 +136,7 @@ const GenderOptionControl = (_a) => {
         setAvailableValue(availableValueInit);
     }, [availableValueInit]);
     return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
-        React__default["default"].createElement(index$2.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["default"].createElement(index$3.Text, { as: "label", size: "p2", weight: "semiBold", variant: "primary" }, label ||
+        React__default["default"].createElement(index$2.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["default"].createElement(LabelComponent, Object.assign({}, labelProps), label ||
                 (isBaby
                     ? t('tools.selectBabyGender')
                     : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {

package/build/{index-6b924a8a.js → index-4dc76eb3.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-306bd046.js');
+var tslib_es6 = require('./tslib.es6-b0022ccb.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index = require('./index-df7b43db.js');
-var index$1 = require('./index-d5da9573.js');
+var index = require('./index-9c9bdd88.js');
+var index$1 = require('./index-96ec795a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }