@hhgtech/hhg-components 1.29.449 → 1.29.450

package/build/esm/{index-f1997e45.js → index-67f78112.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.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-9b827a5a.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { L as LastPeriod } from './LastPeriod-a8614ad3.js';
+import { L as LOCALE } from './Locale-2e01bfcb.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } 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 { R as Radio, I as Input, S as Select } from './index-8b442456.js';
+import { D as DatePicker } from './index-dbe66efe.js';
+import { T as Text } from './index-d1bc6f02.js';
+import './index-5cfa52e0.js';
+import './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
+import { u as useTranslations } from './index-829d7698.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-9e02bd61.js';
+import './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
+import { H as HealthToolFormWrapper } from './index-dbb26c73.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-e02ef7d6.js';
+import { C as CardWrapperContext } from './context-bf166109.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-40ecee0c.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-d7f21a0a.js → index-6e828256.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-cb10f0c9.js';
+import { T as TogetherComponentGlobalContext } from './utils-b4a49e8c.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-6db8f518.js → index-7060050d.js}

@@ -2,13 +2,13 @@ import * as React from 'react';
 import React__default, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as Text } from './index-6b5ef864.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { I as ImageWrap } from './index-849177cf.js';
+import { T as Text } from './index-d1bc6f02.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import { clsx, Modal } from '@mantine/core';
-import { D as DrawerComponent, u as useDrawerDrag } from './index-0e5b5786.js';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-f613c5e1.js';
 import { Drawer } from 'vaul';
-import { Z as ZINDEX_SSO } from './index-e02ef7d6.js';
+import { Z as ZINDEX_SSO } from './index-40ecee0c.js';
 
 /* eslint-disable prettier/prettier */
 const ShapedArrowDown = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),

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

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

package/build/esm/{index-2e3c6ea1.js → index-72d47986.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-67e90cbd.js';
+import { R as Radio } from './index-8b442456.js';
 import '@mantine/dates';
-import './index-e02ef7d6.js';
-import './index-018f3348.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import './index-f2d03a1d.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 './index-40ecee0c.js';
+import './index-710277d7.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
+import './index-9e02bd61.js';
+import { T as Text } from './index-d1bc6f02.js';
+import './index-5cfa52e0.js';
+import './index-627f0e7b.js';
+import './index.styles-b9966dab.js';
+import { u as useTranslations } from './index-829d7698.js';
 import '@mantine/hooks';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
+import './utils-2b2c0dc2.js';
+import './index-cf0d138a.js';
 
 var useStyles = createStyles((theme, { type }) => {
     const isMarryBaby = theme.other.template === 'mb';

package/build/esm/{index-e4cce86c.js → index-792c0069.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-e43d9883.js';
+import { L as Label } from './index-660ea0e2.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/{index-bba98932.js → index-7dc2c6d1.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';

package/build/esm/{index-b1df4dc0.js → index-7e0ca6af.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-e2c9e644.js';
-import { C as CommonGAssets } from './index-62988070.js';
+import { L as LOCALE } from './Locale-2e01bfcb.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-3b8f9ca0.js';
-import { L as LogoIcon } from './logoIcon-e4cf9191.js';
-import './index-018f3348.js';
-import { I as ImageWrap } from './index-fe18b552.js';
+import { M as MediaQueries } from './utils-2b2c0dc2.js';
+import { L as LogoIcon } from './logoIcon-b84e3ff9.js';
+import './index-710277d7.js';
+import { I as ImageWrap } from './index-849177cf.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-698e287d.js → index-829d7698.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-140a78c1.js';
+import { T as TranslationsContext } from './translationsContext-3ddec17e.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-fe18b552.js → index-849177cf.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Breakpoints } from './utils-3b8f9ca0.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { B as Breakpoints } from './utils-2b2c0dc2.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import styled from '@emotion/styled';
 
 const getIsMobile = () => {

package/build/esm/{index-009dcc31.js → index-87bd4f66.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-33ebf2e0.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-018f3348.js';
+import './index-710277d7.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-62988070.js';
+import { C as CommonGAssets } from './index-b2c9a4c2.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as Text } from './index-ee569944.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
-import { e as CentralCarousel } from './index-67e90cbd.js';
+import { I as ImageWrap } from './index-849177cf.js';
+import { T as Text } from './index-f7177e71.js';
+import { L as LOCALE } from './Locale-2e01bfcb.js';
+import { e as CentralCarousel } from './index-8b442456.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-67e90cbd.js → index-8b442456.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-33ebf2e0.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-b2c9a4c2.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-627f0e7b.js';
+import { u as useScreenSize, I as ImageWrap } from './index-849177cf.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-d1bc6f02.js';
+import { t as themeColors } from './index-9e02bd61.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-ceabba69.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-5cfa52e0.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-c2ac6223.js → index-98f94fb7.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-ee569944.js';
+import { T as Text } from './index-f7177e71.js';
 import cn from 'classnames';
-import { I as ImageWrap } from './index-fe18b552.js';
-import { T as Text$1 } from './index-6b5ef864.js';
+import { I as ImageWrap } from './index-849177cf.js';
+import { T as Text$1 } from './index-d1bc6f02.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),