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

package/build/esm/index-6233f58e.js

@@ -0,0 +1,237 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-49fd8c46.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-1f90e5f6.js';
+import { Flex, rem, Stack, clsx, createStyles, Box } from '@mantine/core';
+import { G as GenderOptionControl } from './index-481eacef.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-d7bd249f.js';
+import '@mantine/dates';
+import './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import './index-f8a949a8.js';
+import './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import './index-3d2078ab.js';
+import { theme } from './miscTheme.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import '@mantine/hooks';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { H as HealthToolFormWrapper } from './index-d0b44796.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { L as LOCALE } from './Locale-932c7523.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-47d3c758.js → index-66d2473a.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-3e2f300a.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-73f4d56a.js';
-import { N as NodeIntentType } from './index-52825707.js';
+import { c as cookie } from './index-cc4d020b.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-39bf919c.js';
+import { N as NodeIntentType } from './index-d18ed0e7.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-2bfb2578.js → index-6d40879d.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-73f4d56a.js';
-import './index-52825707.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { M as MAPPED_LOCALE } from './index-d830bd64.js';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { I as ISO_FORMAT } from './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { M as MAPPED_LOCALE } from './index-5d273446.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-6d667650.js → index-6d6446c4.js}

@@ -1,20 +1,20 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import React__default, { useMemo, useEffect, useRef, useContext, useState } from 'react';
 import { User } from '@hhgtech/icons/core';
-import { S as Spinner } from './Spinner-9fe584c3.js';
-import { a as Avatar } from './index-85894b46.js';
-import { B as Button } from './index-206b9bef.js';
-import { T as Text } from './index-f65d577c.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
+import { S as Spinner } from './Spinner-c4dbd709.js';
+import { a as Avatar } from './index-d7bd249f.js';
+import { B as Button } from './index-3d2078ab.js';
+import { T as Text } from './index-15687d4c.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-05e3b4d6.js';
+import { M as MediaQueries } from './utils-ff8e88ec.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import cn from 'classnames';
-import { c as CARE_LOCALES, d as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, e as VIDEO_LOCALES } from './index-73f4d56a.js';
-import { i as domainLocalesMarryBaby } from './utils-766da2de.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain } from './normalizeLink-fdde228f.js';
+import { c as CARE_LOCALES, d as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, e as VIDEO_LOCALES } from './index-39bf919c.js';
+import { i as domainLocalesMarryBaby } from './utils-3c6f8119.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain } from './normalizeLink-a4d2f4ed.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { ProfileNavigation } from './profileNavigation.js';
 import { NavigationLogoutPopup } from './navigationLogoutPopup.js';

package/build/esm/{index-48b4a8da.js → index-6fa16935.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { C as Container } from './index-e97a55a1.js';
-import { T as Text } from './index-f65d577c.js';
+import { C as Container } from './index-89cc39f2.js';
+import { T as Text } from './index-15687d4c.js';
 
 const StyledTextDivider = styled.div `
   background-color: var(--neutral50);

package/build/esm/{index-a106b9cb.js → index-75b1ae62.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-e6cbb3d7.js';
-import { S as Spinner } from './Spinner-9fe584c3.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-c5e0815b.js';
+import { S as Spinner } from './Spinner-c4dbd709.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);

package/build/esm/{index-99a46d0d.js → index-772d6fb3.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { a as __awaiter } from './tslib.es6-8570c30c.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-623e7f2c.js';
-import { T as Text } from './index-f65d577c.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-766da2de.js';
+import { H as Heading } from './index-fd175154.js';
+import { T as Text } from './index-15687d4c.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-3c6f8119.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-e72098ce.js';
+import { D as DEFAULT_IMG } from './constants-1f90e5f6.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-d1ad341c.js → index-7ad0855d.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-05e3b4d6.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-ff8e88ec.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-176c6145.js';
-import { I as Input } from './index-85894b46.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-48639f99.js';
+import { I as Input } from './index-d7bd249f.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import './index-f65d577c.js';
-import './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import './translationsContext-59e5652c.js';
+import './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import './index-f8a949a8.js';
+import './index-5d273446.js';
+import './index-15687d4c.js';
+import './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import './translationsContext-47869a7a.js';
 import '@mantine/hooks';
-import './text-6f2656a6.js';
-import './index-13586e44.js';
+import './index-0bb898db.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),

package/build/esm/{index-62cad5ea.js → index-7c5807c6.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-13586e44.js';
-import { L as Loading } from './index-54914b2a.js';
-import './index-52825707.js';
-import { g as formatArticle } from './dataTransform-d43fdd1a.js';
+import { T as Tabs } from './index-0bb898db.js';
+import { L as Loading } from './index-17c80719.js';
+import './index-d18ed0e7.js';
+import { g as formatArticle } from './dataTransform-fa959101.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-766da2de.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-3c6f8119.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-7428f659.js';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { C as CardAuthor } from './index-433f52c6.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 import '@hhgtech/icons/other';
-import './index-206b9bef.js';
-import './shared-c74f5553.js';
-import './text-6f2656a6.js';
-import './index-f65d577c.js';
-import './index-59da60a7.js';
-import './translationsContext-59e5652c.js';
-import './index-b79fc8a1.js';
-import './index-3e2f300a.js';
+import './index-3d2078ab.js';
+import './shared-b9f1d3c2.js';
+import './index-d0dddda4.js';
+import './index-15687d4c.js';
+import './index-e6601f2c.js';
+import './translationsContext-47869a7a.js';
+import './index-b88aba78.js';
+import './index-cc4d020b.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-e72098ce.js';
+import './constants-1f90e5f6.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-05e3b4d6.js';
-import './index-4f2ea78b.js';
-import './paths-012e6e0e.js';
-import './constants-ebbd4a69.js';
-import './index-73f4d56a.js';
+import './utils-ff8e88ec.js';
+import './index-573469a3.js';
+import './paths-419c8cbd.js';
+import './constants-43303b1b.js';
+import './index-39bf919c.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-a106b9cb.js';
+import './index-75b1ae62.js';
 import './miscTheme.js';
-import './WhatsApp-e6cbb3d7.js';
-import './Spinner-9fe584c3.js';
-import './index-0765c99d.js';
+import './WhatsApp-c5e0815b.js';
+import './Spinner-c4dbd709.js';
+import './index-dd14e9a1.js';
 import '@emotion/styled';
-import './index-5efeab14.js';
-import './index-f59d4d8a.js';
-import './index-5f94e77c.js';
+import './index-5e4c4c9c.js';
+import './index-f8a949a8.js';
+import './index-36cec9eb.js';
 import '@emotion/react';
-import './index-623e7f2c.js';
-import './index-b0854ce5.js';
-import './index.styles-590ff17d.js';
+import './index-fd175154.js';
+import './index-2ad629e0.js';
+import './index.styles-25051c24.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-bdd4f96f.js → index-7c5a09d2.js}

@@ -1,20 +1,21 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.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-be9eb032.js';
-import { I as Input } from './index-85894b46.js';
-import { D as DatePicker } from './index-2bfb2578.js';
-import { T as Text } from './index-f65d577c.js';
-import './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import { u as useTranslations } from './index-59da60a7.js';
+import { L as LastPeriod } from './LastPeriod-bcc7f66e.js';
+import { I as Input } from './index-d7bd249f.js';
+import { D as DatePicker } from './index-6d40879d.js';
+import { T as Text } from './index-15687d4c.js';
+import './index-3d2078ab.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import '@mantine/hooks';
-import './index-d830bd64.js';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import { H as HealthToolFormWrapper } from './index-89ad9053.js';
+import './index-5d273446.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { H as HealthToolFormWrapper } from './index-d0b44796.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) => {