@hhgtech/hhg-components 1.29.448 → 1.29.449-beta-2

package/build/{index-8f425df7.js → index-540862c0.js}

@@ -1,52 +1,52 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
 var React = require('react');
-var index$5 = require('./index-8128ad91.js');
+var index$5 = require('./index-2d074d2e.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-d8b7b7c8.js');
-require('./index-c0083606.js');
-var index$b = require('./index-7fd03876.js');
-require('./index-cb14a9dc.js');
-var index$3 = require('./index-4ecc708d.js');
-var index$f = require('./index-edff4458.js');
-require('./index.styles-9aebaca8.js');
-require('./translationsContext-8aeaf409.js');
+var index$7 = require('./index-c81f3722.js');
+require('./index-17ae9969.js');
+var index$b = require('./index-584516cc.js');
+require('./index-a779e325.js');
+var index$3 = require('./index-e55b34fa.js');
+var index$f = require('./index-ecc141b9.js');
+require('./index-54f85690.js');
+require('./index.styles-96a814d0.js');
+require('./translationsContext-a6328c5e.js');
 require('@mantine/hooks');
-require('./text-4cc51fce.js');
-var utils = require('./utils-2a996ffd.js');
-require('./index-cbebb87e.js');
-var index$2 = require('./index-0f643834.js');
+var utils = require('./utils-d873e1b3.js');
+require('./index-27b83fe5.js');
+var index$2 = require('./index-b5ab5be4.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-1a78668d.js');
+var index$4 = require('./index-88479846.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$6 = require('./index-80e5eb4a.js');
+var index$6 = require('./index-8a1108f2.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-f9988d3a.js');
+var useOutsideClick = require('./useOutsideClick-2cc4a221.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-75bb7acd.js');
-var index$8 = require('./index-515ec2da.js');
-var index$9 = require('./index-aaf078ac.js');
-var index$c = require('./index-140042b2.js');
+var index$a = require('./index-dd93ef14.js');
+var index$8 = require('./index-0b97e7cc.js');
+var index$9 = require('./index-dac13ed8.js');
+var index$c = require('./index-cd00e2b2.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$e = require('./index-d395161d.js');
-var index$d = require('./index-d3b61b31.js');
+var index$e = require('./index-e6d4dc90.js');
+var index$d = require('./index-2f66681f.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-0044edae.js');
+var Locale = require('./Locale-dfeb2ac7.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
-var index$g = require('./index-f8bcbae7.js');
-var index$h = require('./index-3079d639.js');
+var index$g = require('./index-c9e3efe6.js');
+var index$h = require('./index-95b22e3f.js');
 var get = require('lodash/get');
 var debounce = require('lodash/debounce');
 

package/build/{text-4cc51fce.js → index-54f85690.js}

@@ -1,6 +1,11 @@
 'use strict';
 
 var core = require('@mantine/core');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 exports.CustomStylesType = void 0;
 (function (CustomStylesType) {
@@ -142,6 +147,8 @@ const GlobalTextStyle = {
             h6: [core.rem(16), core.rem(14)],
             title1: [core.rem(17), core.rem(17)],
             title2: [core.rem(15), core.rem(15)],
+            overline: [core.rem(11), core.rem(11)],
+            subText: [core.rem(10), core.rem(10)],
         },
         lineHeight: {
             base: [core.rem(24), core.rem(24)],
@@ -171,6 +178,8 @@ const GlobalTextStyle = {
             h6: [core.rem(24), core.rem(22)],
             title1: [core.rem(24), core.rem(24)],
             title2: [core.rem(24), core.rem(24)],
+            overline: [core.rem(12), core.rem(12)],
+            subText: [core.rem(12), core.rem(12)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -196,6 +205,8 @@ const GlobalTextStyle = {
             n1: [-0.2, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            overline: [-0.2, -0.2],
+            subText: [-0.2, -0.2],
         },
         fontWeightBySize: {
             s1: exports.FontWeight.semiBold,
@@ -257,5 +268,13 @@ const GlobalTextStyleNew = (theme) => ({
     },
 });
 
+const TemplateContext = React.createContext(exports.CustomStylesType.NONE);
+const TemplateProvider = ({ variant = exports.CustomStylesType.NONE, children, }) => {
+    return (React__default["default"].createElement(TemplateContext.Provider, { value: variant }, children));
+};
+const useTemplateVariant = () => React.useContext(TemplateContext);
+
 exports.GlobalTextStyle = GlobalTextStyle;
 exports.GlobalTextStyleNew = GlobalTextStyleNew;
+exports.TemplateProvider = TemplateProvider;
+exports.useTemplateVariant = useTemplateVariant;

package/build/{index-a02ac8e8.js → index-5819148d.js}

@@ -1,55 +1,55 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
 var React = require('react');
-var index$1 = require('./index-cbebb87e.js');
-var index = require('./index-e161ca2e.js');
-require('./index-c0083606.js');
-var dataTransform = require('./dataTransform-d30942f7.js');
+var index$1 = require('./index-27b83fe5.js');
+var index = require('./index-063c06d3.js');
+require('./index-17ae9969.js');
+var dataTransform = require('./dataTransform-c4abb13f.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var togetherComponentGlobalContext = require('./utils-d77f3661.js');
+var togetherComponentGlobalContext = require('./utils-63ab0c9a.js');
 var core = require('@hhgtech/icons/core');
 var core$1 = require('@mantine/core');
-var togetherMoleculesCardAuthor = require('./index-0d47b185.js');
-var Locale = require('./Locale-0044edae.js');
+var togetherMoleculesCardAuthor = require('./index-a0d41921.js');
+var Locale = require('./Locale-dfeb2ac7.js');
 require('@hhgtech/icons/other');
-require('./index-edff4458.js');
-require('./shared-25c64a9a.js');
-require('./text-4cc51fce.js');
-require('./index-4ecc708d.js');
-require('./index-aaf078ac.js');
-require('./translationsContext-8aeaf409.js');
-require('./index-75bb7acd.js');
-require('./index-f0d40aad.js');
+require('./index-ecc141b9.js');
+require('./shared-e4b9a260.js');
+require('./index-54f85690.js');
+require('./index-e55b34fa.js');
+require('./index-dac13ed8.js');
+require('./translationsContext-a6328c5e.js');
+require('./index-dd93ef14.js');
+require('./index-ea8a5d9c.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('./constantsIsProduction.js');
 require('string-format');
-require('./constants-2d7796a3.js');
+require('./constants-361f4405.js');
 require('dayjs');
 require('dayjs/plugin/relativeTime');
-require('./utils-2a996ffd.js');
-require('./index-e53ca5e8.js');
-require('./paths-d9348f30.js');
-require('./constants-e864d238.js');
-require('./index-d8b7b7c8.js');
+require('./utils-d873e1b3.js');
+require('./index-cb7ac864.js');
+require('./paths-4b6e3ccf.js');
+require('./constants-da4c452f.js');
+require('./index-c81f3722.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
-require('./index-8aa0eefe.js');
+require('./index-0c313b9b.js');
 require('./miscTheme.js');
-require('./WhatsApp-f3f9d19b.js');
-require('./Spinner-b04b16b0.js');
-require('./index-44cafc35.js');
+require('./WhatsApp-fa3dd484.js');
+require('./Spinner-419e3b76.js');
+require('./index-fdd20a63.js');
 require('@emotion/styled');
-require('./index-515ec2da.js');
-require('./index-7fd03876.js');
-require('./index-68e72fb0.js');
+require('./index-0b97e7cc.js');
+require('./index-584516cc.js');
+require('./index-65cf86d9.js');
 require('@emotion/react');
-require('./index-743a7542.js');
-require('./index-fb50037f.js');
-require('./index.styles-9aebaca8.js');
+require('./index-f618337e.js');
+require('./index-bcab07ca.js');
+require('./index.styles-96a814d0.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-5b8eefce.js

@@ -0,0 +1,243 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var useHealthToolCache = require('./useHealthToolCache-627d55f2.js');
+var constants = require('./constants-361f4405.js');
+var core = require('@mantine/core');
+var index$2 = require('./index-af2ab8a2.js');
+var index$3 = require('./index-2d074d2e.js');
+require('@mantine/dates');
+require('./index-c81f3722.js');
+require('./index-17ae9969.js');
+require('./index-584516cc.js');
+require('./index-a779e325.js');
+var index$4 = require('./index-e55b34fa.js');
+require('./index-ecc141b9.js');
+var miscTheme = require('./miscTheme.js');
+require('./index-54f85690.js');
+require('./index.styles-96a814d0.js');
+var index = require('./index-dac13ed8.js');
+require('@mantine/hooks');
+require('./utils-d873e1b3.js');
+require('./index-27b83fe5.js');
+var index$1 = require('./index-9ffabafd.js');
+var context = require('./context-d9f513d2.js');
+var Locale = require('./Locale-dfeb2ac7.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 BmiFormContext = React.createContext({});
+
+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, isTouched, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            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$2.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
+                } })),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            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.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                            t('bmi.ageInput'),
+                            ' ',
+                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            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.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                            t('bmi.heightInput'),
+                            ' ',
+                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                            content: locale === 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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            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.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                            t('bmi.weightInput'),
+                            ' ',
+                            React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), 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 : '', precision: 1, min: 0 }));
+                } })),
+        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, 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.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                    } })),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, 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(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default["default"].createElement(index$4.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')), error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                    } })),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { sx: { paddingLeft: 0, paddingRight: 0 } },
+                React__default["default"].createElement(core.Stack, { className: core.clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock), spacing: 16, sx: {
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                    } },
+                    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.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                        } }),
+                    React__default["default"].createElement(index$1.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')))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.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'))))));
+};
+
+var useStyles = core.createStyles((theme) => {
+    return {
+        newsletterBlock: {
+            backgroundColor: theme.colors.neutral[0],
+            padding: `${core.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 } = 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$1.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$1.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$2.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$1.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$3.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$1.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$1.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$3.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$1.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$1.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                        React__default["default"].createElement(index$3.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$1.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$1.HealthToolFormWrapper.FormRow, null,
+                        React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.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$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$3.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$1.HealthToolFormWrapper.FormRow, null,
+                        React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default["default"].createElement(index$4.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$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$3.ErrorLabel, { label: error.message, textProps: {
+                                size: 'p4',
+                            }, sx: { marginTop: 6 } }))));
+                } }),
+            cardWrapperVariant === 'gray' ? (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$1.HealthToolFormWrapper.FormRow, null,
+                            React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
+                    } }),
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
+                    React__default["default"].createElement(index$1.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$1.HealthToolFormWrapper.FormRow, { className: formWrapperClasses.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(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                        } }),
+                    React__default["default"].createElement(core.Box, { className: core.clsx(wrapperClasses.submitWrapper) },
+                        React__default["default"].createElement(index$1.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$1.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
+            React__default["default"].createElement(index$1.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 } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion"]);
+    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(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)))));
+};
+
+exports.BmiForm = BmiForm;

package/build/{index-cb1024b8.js → index-5e5381fb.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$1 = require('./index-743a7542.js');
-var index = require('./index-4ecc708d.js');
-var togetherComponentGlobalContext = require('./utils-d77f3661.js');
+var index$1 = require('./index-f618337e.js');
+var index = require('./index-e55b34fa.js');
+var togetherComponentGlobalContext = require('./utils-63ab0c9a.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var constants = require('./constants-2d7796a3.js');
+var constants = require('./constants-361f4405.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-f9082c79.js → index-605a6925.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@mantine/core');
-var text = require('./text-4cc51fce.js');
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var index$1 = require('./index-54f85690.js');
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
 var React = require('react');
 var hooks = require('@mantine/hooks');
 var react = require('@emotion/react');
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var useTextStyles = core.createStyles((theme) => {
-    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
+    return index$1.GlobalTextStyleNew(theme)[index$1.CustomStylesType.LEADGEN];
 });
 
 const TextFieldContext = React.createContext({});