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

package/build/esm/{index-f1997e45.js → index-16e7a2d7.js}

@@ -1,25 +1,26 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.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-024f8432.js';
+import { L as LOCALE } from './Locale-0a6a8d6f.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-079cc59b.js';
+import { D as DatePicker } from './index-bebb01f4.js';
+import { T as Text } from './index-e74207c5.js';
+import './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.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-a5667350.js';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.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-e38168c0.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-ad70b598.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-a36af882.js → index-1b6467b8.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { u as useStyles } from './index.styles-883d7842.js';
+import { u as useStyles } from './index.styles-6539ecd2.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-a565ea21.js → index-1bce2fdb.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2dd81c43.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-894fa786.js';
-import { L as Loading } from './index-124b650e.js';
-import './index-018f3348.js';
-import { g as formatArticle } from './dataTransform-d6a21d32.js';
+import { T as Tabs } from './index-354e4724.js';
+import { L as Loading } from './index-cf700bd0.js';
+import './index-ab8bcb93.js';
+import { g as formatArticle } from './dataTransform-a6a779de.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-cb10f0c9.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-6b347cfc.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-25335bbd.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import { C as CardAuthor } from './index-6d9b3854.js';
+import { L as LOCALE } from './Locale-0a6a8d6f.js';
 import '@hhgtech/icons/other';
-import './index-15e1b8ca.js';
-import './shared-7aa9f950.js';
-import './text-c1c3ae38.js';
-import './index-6b5ef864.js';
-import './index-698e287d.js';
-import './translationsContext-140a78c1.js';
-import './index-86df1763.js';
-import './index-796c8998.js';
+import './index-fb433ddc.js';
+import './shared-bb4f9a0a.js';
+import './index-a641808e.js';
+import './index-e74207c5.js';
+import './index-fe5bc42a.js';
+import './translationsContext-be0c8c4e.js';
+import './index-5d58e5a5.js';
+import './index-9a5ae666.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-fedfafa8.js';
+import './constants-d5757f04.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-3b8f9ca0.js';
-import './index-ec035017.js';
-import './paths-00557f58.js';
-import './constants-a10fbc8a.js';
-import './index-e02ef7d6.js';
+import './utils-332d66f9.js';
+import './index-4194da90.js';
+import './paths-df4cc20b.js';
+import './constants-0e7dd676.js';
+import './index-ad70b598.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-953523ca.js';
+import './index-6088c2f6.js';
 import './miscTheme.js';
-import './WhatsApp-e9a34aaf.js';
-import './Spinner-1f9ec7ca.js';
-import './index-d7f21a0a.js';
+import './WhatsApp-f7b8199f.js';
+import './Spinner-555c31a3.js';
+import './index-4dde8348.js';
 import '@emotion/styled';
-import './index-fe18b552.js';
-import './index-62988070.js';
-import './index-f6aeb770.js';
+import './index-6824fad6.js';
+import './index-a2567c68.js';
+import './index-effcfe04.js';
 import '@emotion/react';
-import './index-986954db.js';
-import './index-a36af882.js';
-import './index.styles-883d7842.js';
+import './index-b459211a.js';
+import './index-1b6467b8.js';
+import './index.styles-6539ecd2.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-7a78750d.js → index-201fa1a7.js}

@@ -1,22 +1,23 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { createContext, useContext } from 'react';
-import { createStyles, rem, useMantineTheme } from '@mantine/core';
+import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { I as Input } from './index-67e90cbd.js';
-import { D as DatePicker } from './index-3266848c.js';
-import { T as Text } from './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { I as Input } from './index-079cc59b.js';
+import { D as DatePicker } from './index-bebb01f4.js';
+import { T as Text } from './index-e74207c5.js';
+import './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import '@mantine/hooks';
-import './index-f2d03a1d.js';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { I as INPUT_RANGE } from './constants-100a4c50.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
-import { G as GenderOptionControl } from './index-2e3c6ea1.js';
-import { L as LOCALE } from './Locale-e2c9e644.js';
+import './index-a5667350.js';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { I as INPUT_RANGE } from './constants-303288ea.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.js';
+import { G as GenderOptionControl } from './index-e6aa914e.js';
+import { L as LOCALE } from './Locale-0a6a8d6f.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});
@@ -33,6 +34,7 @@ var useStyles$1 = createStyles((theme) => {
 const DefaultForm = (_a) => {
     var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t, locale } = useTranslations();
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
     const { classes } = useStyles$1(undefined, {
         name: 'BabyGrowthForm__DefaultForm',
@@ -60,39 +62,43 @@ const DefaultForm = (_a) => {
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.height'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.weight'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        locale !== LOCALE.Vietnam && (React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
-                t('babyGrowth.head'),
-                React__default.createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.height'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.weight'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.kg'),
+                        ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        locale !== LOCALE.Vietnam && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                    t('babyGrowth.head'),
+                    React__default.createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } })))),
         form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 var useStyles = createStyles((theme) => {
@@ -151,6 +157,7 @@ const InlineForm = (_a) => {
     var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
     const { t, locale } = useTranslations();
     const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     const theme = useMantineTheme();
     const { classes } = useStyles(undefined, {
         name: 'BabyGrowthForm__InlineForm',
@@ -211,7 +218,8 @@ const InlineForm = (_a) => {
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
             form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/{index-0b0e7693.js → index-20d5135c.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-6b5ef864.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { T as Text } from './index-e74207c5.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-e43d9883.js → index-2841b834.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-3b8f9ca0.js';
+import { M as MediaQueries } from './utils-332d66f9.js';
 
 const StyledInput = styled.div `
   position: relative;