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

package/build/esm/{index-efe47c94.js → index-3c5a50dd.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
-import { useMantineTheme, Group, Box, Flex, Tooltip } from '@mantine/core';
+import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-be9eb032.js';
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { L as LastPeriod } from './LastPeriod-bcc7f66e.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } 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 { R as Radio, I as Input, S as Select } 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 { H as HealthToolFormWrapper } from './index-d0b44796.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-73f4d56a.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-39bf919c.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {
@@ -246,7 +247,7 @@ const ConceptionFormContext = createContext({});
 const DefaultLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
@@ -273,6 +274,7 @@ const MbLayout$4 = () => {
 };
 
 const ConceptionForm = ({}) => {
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
@@ -295,7 +297,8 @@ const ConceptionForm = ({}) => {
     return (React__default.createElement(ConceptionFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$4, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$4, null)) : (React__default.createElement(DefaultLayout$4, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const IUIFormContext = createContext({});
@@ -303,7 +306,7 @@ const IUIFormContext = createContext({});
 const DefaultLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
-    return (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
@@ -330,6 +333,7 @@ const MbLayout$3 = () => {
 
 const IUIForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
     const form = useForm({
@@ -351,7 +355,8 @@ const IUIForm = ({}) => {
     return (React__default.createElement(IUIFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$3, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$3, null)) : (React__default.createElement(DefaultLayout$3, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const IVFFormContext = createContext({});
@@ -360,24 +365,28 @@ const DefaultLayout$2 = () => {
     const { t } = useTranslations();
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-            React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label }))))))));
 };
 
 const InlineLayout$2 = () => {
     const { t } = useTranslations();
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
-            React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-                React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label }))))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
+                React__default.createElement(Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                    React__default.createElement(Group, null, transferDateOptions.map((i, idx) => (React__default.createElement(Radio, { key: idx, value: i.value, label: i.label })))))))));
 };
 
 const MbLayout$2 = () => {
@@ -394,6 +403,7 @@ const MbLayout$2 = () => {
 
 const IVFForm = ({}) => {
     var _a;
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const { t } = useTranslations();
     const theme = useMantineTheme();
@@ -432,7 +442,8 @@ const IVFForm = ({}) => {
     return (React__default.createElement(IVFFormContext.Provider, { value: { form, transferDateOptions } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout$2, null)) : (React__default.createElement(DefaultLayout$2, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const LastPeriodFormContext = createContext({});
@@ -445,13 +456,15 @@ const DefaultLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
-            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
-                    content: t('dueDatePage.daysText', { number: 30 }),
-                }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength'))))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+                React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: t('dueDatePage.daysText', { number: 30 }),
+                    }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength')))))));
 };
 
 const InlineLayout$1 = () => {
@@ -462,15 +475,18 @@ const InlineLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
-            React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
-                    content: t('dueDatePage.daysText', { number: 30 }),
-                }), data: periodLengthDropDownOptions }, form.getInputProps('periodLength'), { error: null, withinPortal: true }))),
-        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
+                React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: t('dueDatePage.daysText', { number: 30 }),
+                    }), data: periodLengthDropDownOptions }, form.getInputProps('periodLength'), { error: null, withinPortal: true })))),
+        form.errors.periodLength && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.periodLength)))));
 };
 
 const MbLayout$1 = () => {
@@ -490,6 +506,7 @@ const MbLayout$1 = () => {
 
 const LastPeriodForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { t } = useTranslations();
     const theme = useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
@@ -515,7 +532,8 @@ const LastPeriodForm = ({}) => {
     return (React__default.createElement(LastPeriodFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout$1, null)) : isMarryBaby ? (React__default.createElement(MbLayout$1, null)) : (React__default.createElement(DefaultLayout$1, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const UltrasoundFormContext = createContext({});
@@ -534,10 +552,11 @@ const DefaultLayout = () => {
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default.createElement(Box, null,
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Flex, { align: "center", gap: 4, mb: 4 },
                 React__default.createElement(Text, { as: "label", size: "s4" }, t('dueDatePage.validation.one_is_required')),
                 React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
@@ -555,21 +574,23 @@ const InlineLayout = () => {
     const rightSection = (React__default.createElement(Text, { size: "p4", color: theme.colors.gray400 }, "mm"));
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
-    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), error: null }))),
-        React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default.createElement(Flex, { align: "center", gap: 4 },
-                React__default.createElement("span", null, t('dueDatePage.validation.one_is_required')),
-                React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
-                    React__default.createElement(Flex, null,
-                        React__default.createElement(Info, { size: 16 })))) },
-            React__default.createElement(Box, null,
-                React__default.createElement(Flex, { gap: 8 },
-                    React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
-                    React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))))),
-        (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date(), error: null })))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default.createElement(Flex, { align: "center", gap: 4 },
+                    React__default.createElement("span", null, t('dueDatePage.validation.one_is_required')),
+                    React__default.createElement(Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
+                        React__default.createElement(Flex, null,
+                            React__default.createElement(Info, { size: 16 })))) },
+                React__default.createElement(Box, null,
+                    React__default.createElement(Flex, { gap: 8 },
+                        React__default.createElement(Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
+                        React__default.createElement(Input, Object.assign({ placeholder: "MSD", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsMSD, { errorProps: { sx: { display: 'none' } } }))))),
+            (form.errors.ultrasoundCRL || form.errors.ultrasoundMSD) && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD)))));
 };
 
 const MbLayout = () => {
@@ -582,6 +603,7 @@ const MbLayout = () => {
 };
 
 const UltrasoundForm = ({}) => {
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = useContext(DueDateFormContext);
     const theme = useMantineTheme();
     const { t } = useTranslations();
@@ -628,7 +650,8 @@ const UltrasoundForm = ({}) => {
     return (React__default.createElement(UltrasoundFormContext.Provider, { value: { form } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default.createElement(InlineLayout, null)) : theme.other.template === 'mb' ? (React__default.createElement(MbLayout, null)) : (React__default.createElement(DefaultLayout, null)),
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+            React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 
 const FormSwitcher = () => {
@@ -700,8 +723,9 @@ const DueDateForm = (_a) => {
             setCalculatorType,
         } },
         React__default.createElement(HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
-            formLayout === 'default' ? (React__default.createElement(HealthToolFormWrapper.Control, null,
-                React__default.createElement(Select, { label: t('dueDatePage.calculationMethod'), value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)), icon: selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.icon }))) : (React__default.createElement(Box, null,
+            formLayout === 'default' ? (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+                React__default.createElement(HealthToolFormWrapper.Control, null,
+                    React__default.createElement(Select, { label: t('dueDatePage.calculationMethod'), value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)), icon: selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.icon })))) : (React__default.createElement(HealthToolFormWrapper.FormRow, null,
                 React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), width: 300 },
                     React__default.createElement(Select, { value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)) })))),
             React__default.createElement(FormSwitcher, null))));

package/build/esm/{index-206b9bef.js → index-3d2078ab.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
-import { A as ANIMATION_DURATION } from './shared-c74f5553.js';
-import { C as CustomStylesType, F as FontWeight } from './text-6f2656a6.js';
+import { A as ANIMATION_DURATION } from './shared-b9f1d3c2.js';
+import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-d0dddda4.js';
 
 var useStyles = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;
@@ -23,9 +23,11 @@ var useStyles = createStyles((_theme, _params) => {
         : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
     const isLeadgen = customStylesType === CustomStylesType.LEADGEN;
     return {
-        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
                 outline: 'none',
-            } }, (!children && {
+            } }, (isLeadgen && {
+            borderRadius: 12,
+        })), (!children && {
             paddingLeft: '10px',
             paddingRight: '10px',
             '.mantine-Button-icon': {
@@ -160,8 +162,9 @@ function filterObject(obj) {
 const Button = forwardRef((props, ref) => {
     var _a, _b;
     const theme = useMantineTheme();
-    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component"]);
     const isError = variant === 'error';
+    const variantStyle = useTemplateVariant();
     const { classes, cx } = useStyles({
         variant,
         size,
@@ -171,9 +174,9 @@ const Button = forwardRef((props, ref) => {
         isSuccess: variant === 'success',
         children,
         theme: themeProp,
-        customStylesType: theme.other.customStyleType || CustomStylesType.NONE,
+        customStylesType: variantStyle,
     });
-    return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
+    return (React__default.createElement(Button$1, Object.assign({ component: component, className: cx(className, variant), classNames: {
             root: classes.root,
             leftIcon: classes.leftIcon,
         }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, ref: ref, loaderProps: rest.disabled ? { color: 'currentColor' } : undefined }, rest), children));

package/build/esm/{index-6c8bb941.js → index-42cd171c.js}

@@ -1,24 +1,25 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-b6025b32.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-e72098ce.js';
-import { G as GenderOptionControl } from './index-0a769c42.js';
-import { I as Input, S as Select } from './index-85894b46.js';
-import { D as DatePicker } from './index-2bfb2578.js';
-import './index-f65d577c.js';
-import './index-206b9bef.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-49fd8c46.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-1f90e5f6.js';
+import { G as GenderOptionControl } from './index-481eacef.js';
+import { I as Input, S as Select } from './index-d7bd249f.js';
+import { D as DatePicker } from './index-6d40879d.js';
+import './index-15687d4c.js';
+import './index-3d2078ab.js';
 import '@mantine/core';
-import './index.styles-590ff17d.js';
+import './index-d0dddda4.js';
+import './index.styles-25051c24.js';
 import '@mantine/hooks';
-import './index-d830bd64.js';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import './index-73f4d56a.js';
-import { H as HealthToolFormWrapper } from './index-89ad9053.js';
+import './index-5d273446.js';
+import './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import './index-39bf919c.js';
+import { C as CardWrapperContext } from './context-98f996bd.js';
+import { H as HealthToolFormWrapper } from './index-d0b44796.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});
@@ -28,29 +29,35 @@ const DefaultForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
-        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
-                withinPortal: true,
-            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
-        React__default.createElement(Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
-                content: '60',
-            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
-                rightSection: {
-                    width: 'auto',
-                },
-            }) })),
-        isAdult && (React__default.createElement(Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                value: option.value,
-                label: option.label,
-            })), styles: {
-                item: {
-                    whiteSpace: 'nowrap',
-                    padding: '10px 12px',
-                    fontSize: '14px',
-                },
-            }, withinPortal: true }, form.getInputProps('activeValue')))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, label: t('targetHeartRate.ageInput'), maxDate: new Date() }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                    content: '60',
+                }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                    rightSection: {
+                        width: 'auto',
+                    },
+                }) }))),
+        isAdult && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const InlineForm = (_a) => {
@@ -58,6 +65,7 @@ const InlineForm = (_a) => {
     var props = __rest(_a, []);
     const { t, locale } = useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
@@ -79,18 +87,20 @@ const InlineForm = (_a) => {
                         },
                     }) }))),
             form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
-        isAdult && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
-            React__default.createElement(Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                    value: option.value,
-                    label: option.label,
-                })), styles: {
-                    item: {
-                        whiteSpace: 'nowrap',
-                        padding: '10px 12px',
-                        fontSize: '14px',
-                    },
-                }, withinPortal: true }, form.getInputProps('activeValue'))))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        isAdult && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+                React__default.createElement(Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                        value: option.value,
+                        label: option.label,
+                    })), styles: {
+                        item: {
+                            whiteSpace: 'nowrap',
+                            padding: '10px 12px',
+                            fontSize: '14px',
+                        },
+                    }, withinPortal: true }, form.getInputProps('activeValue')))))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const ThrForm = (_a) => {

package/build/esm/{index-7428f659.js → index-433f52c6.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-59da60a7.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-05e3b4d6.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-4f2ea78b.js';
-import { I as Icon } from './index-a106b9cb.js';
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
-import { U as UserAvatar } from './index-0765c99d.js';
-import { I as ImageWrap, u as useScreenSize } from './index-5efeab14.js';
-import './index-73f4d56a.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-766da2de.js';
-import { B as Button } from './index-b79fc8a1.js';
-import { T as Text } from './index-f65d577c.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-ff8e88ec.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-573469a3.js';
+import { I as Icon } from './index-75b1ae62.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
+import { U as UserAvatar } from './index-dd14e9a1.js';
+import { I as ImageWrap, u as useScreenSize } from './index-5e4c4c9c.js';
+import './index-39bf919c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-3c6f8119.js';
+import { B as Button } from './index-b88aba78.js';
+import { T as Text } from './index-15687d4c.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-5f94e77c.js';
-import { H as Heading } from './index-623e7f2c.js';
-import { M as Modal } from './index-b0854ce5.js';
+import { L as Loading } from './index-36cec9eb.js';
+import { H as Heading } from './index-fd175154.js';
+import { M as Modal } from './index-2ad629e0.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -911,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-62cad5ea.js').then((module) => {
+                import('./index-7c5807c6.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }