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

package/build/esm/{index-ee569944.js → index-d57d8265.js}

@@ -1,20 +1,20 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-ca64e265.js';
 import React__default from 'react';
-import './index-67e90cbd.js';
+import './index-e20d91bd.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-e02ef7d6.js';
-import './index-018f3348.js';
-import './index-62988070.js';
-import './index-f2d03a1d.js';
-import { T as Text$1 } from './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import './translationsContext-140a78c1.js';
+import './index-8c5ae17d.js';
+import './index-ea149e42.js';
+import './index-28b62464.js';
+import './index-f64c6e39.js';
+import { T as Text$1 } from './index-68a819a2.js';
+import './index-fcd5837c.js';
+import './index-8f8bea46.js';
+import './index.styles-cb591c86.js';
+import './translationsContext-60b63e2f.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
+import './utils-23deda17.js';
+import './index-ac89e9ed.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

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

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

package/build/esm/index-e1de3577.js

@@ -0,0 +1,68 @@
+import { _ as __rest } from './tslib.es6-ca64e265.js';
+import React__default, { useContext } from 'react';
+import { createStyles, rem, Box, clsx } from '@mantine/core';
+import './index-e20d91bd.js';
+import '@mantine/dates';
+import './index-8c5ae17d.js';
+import './index-ea149e42.js';
+import './index-28b62464.js';
+import './index-f64c6e39.js';
+import { T as Text } from './index-68a819a2.js';
+import { B as Button } from './index-fcd5837c.js';
+import './index-8f8bea46.js';
+import './index.styles-cb591c86.js';
+import { u as useTranslations } from './index-1184c9d4.js';
+import '@mantine/hooks';
+import './utils-23deda17.js';
+import './index-ac89e9ed.js';
+import { C as CardWrapperContext } from './context-9666df99.js';
+import { H as HealthToolFormWrapper } from './index-409faa8a.js';
+
+var useStyles = createStyles((theme, { hasOnClickFn }) => {
+    return {
+        root: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(16),
+        },
+        sponsorBox: {
+            display: 'flex',
+            gap: rem(12),
+            alignItems: 'center',
+            backgroundColor: theme.colors.neutral[0],
+            border: `1px solid ${theme.colors.neutral[1]}`,
+            borderRadius: rem(4),
+            padding: '4px 12px',
+            alignSelf: 'flex-start',
+        },
+        sponsorLogo: {
+            maxHeight: rem(32),
+        },
+        btn: {
+            minWidth: rem(180),
+            [theme.fn.largerThan('sm')]: {
+                alignSelf: 'flex-end',
+            },
+            visibility: hasOnClickFn ? 'visible' : 'hidden',
+        },
+    };
+});
+
+const BabyPoopForm = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
+    const { t } = useTranslations();
+    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+        React__default.createElement(Box, Object.assign({ className: classes.root }, props),
+            sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
+                React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
+                React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+            React__default.createElement(Text, { size: "p3", as: "div", className: "description", dangerouslySetInnerHTML: {
+                    __html: babyPoopPage.description,
+                } }),
+            React__default.createElement(Button, Object.assign({ className: clsx(classes.btn, wrapperClasses.submitBtn), onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut')))));
+};
+
+export { BabyPoopForm as B };

package/build/esm/{index-67e90cbd.js → index-e20d91bd.js}

@@ -1,27 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-ca64e265.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-62988070.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-c1c3ae38.js';
-import { u as useScreenSize, I as ImageWrap } from './index-fe18b552.js';
+import { C as CommonGAssets } from './index-28b62464.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-8f8bea46.js';
+import { u as useScreenSize, I as ImageWrap } from './index-11bf3a00.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-6b5ef864.js';
-import { t as themeColors } from './index-f2d03a1d.js';
+import { T as Text } from './index-68a819a2.js';
+import { t as themeColors } from './index-f64c6e39.js';
 import { theme } from './miscTheme.js';
 import cn from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-44fbd151.js';
+import { a as useUniqueId } from './useUniqueId-e14cf3f5.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-15e1b8ca.js';
+import { B as Button } from './index-fcd5837c.js';
 
-var useStyles$4 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$4 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -60,7 +60,8 @@ const _AutoComplete = forwardRef((_a, ref) => {
 });
 const _Select = forwardRef((_a, ref) => {
     var { searchValue, onSearchChange, styles } = _a, props = __rest(_a, ["searchValue", "onSearchChange", "styles"]);
-    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$4({ variantStyle }, { name: 'MantineSelect', styles });
     const [_searchValue, handleSearchChange] = useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -241,8 +242,8 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-var useStyles$2 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$2 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -321,8 +322,8 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$1 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -749,7 +750,8 @@ FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
     var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
-    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -941,6 +943,7 @@ const CheckboxWithState = (_a) => {
 const CheckboxWrapper = (_a) => {
     var { color = 'blue', label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -948,7 +951,7 @@ const CheckboxWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.colors.blue[6];
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Checkbox$1, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
             ? (_a) => {
@@ -1098,6 +1101,7 @@ const RadioWithState = (_a) => {
 const RadioWrapper = (_a) => {
     var { color, label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -1105,7 +1109,7 @@ const RadioWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.fn.primaryColor();
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Radio$1, Object.assign({ label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
             ? (_a) => {

package/build/esm/{index-37ac608c.js → index-e36c859b.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-953523ca.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { I as Icon } from './index-a8b6cf2f.js';
+import { u as useTranslations } from './index-1184c9d4.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/index-e8ae7229.js

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

package/build/esm/{index-018f3348.js → index-ea149e42.js}

@@ -1,4 +1,4 @@
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { L as LOCALE } from './Locale-a6078fd4.js';
 
 var Gender;
 (function (Gender) {