npm - @hhgtech/hhg-components - Versions diffs - 1.29.449 → 1.29.450-beta-1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (568) hide show

package/build/{index-11f819fa.js → index-ee98ef67.js} RENAMED Viewed

@@ -1,27 +1,28 @@
 'use strict';
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-ac9de441.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dateFns = require('date-fns');
-var LastPeriod = require('./LastPeriod-e2255d94.js');
-var Locale = require('./Locale-21703205.js');
+var LastPeriod = require('./LastPeriod-947efbac.js');
+var Locale = require('./Locale-5e92eeb8.js');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index$4 = require('./index-7481f662.js');
-var index$1 = require('./index-8b68f0a5.js');
-var index$5 = require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
-var index = require('./index-2f23d479.js');
+var index$4 = require('./index-6c3d81bf.js');
+var index$2 = require('./index-c683aa32.js');
+var index$5 = require('./index-2f80f215.js');
+require('./index-eff68a82.js');
+require('./index-e9a11463.js');
+require('./index.styles-459c49a4.js');
+var index = require('./index-2f06f74e.js');
 require('@mantine/hooks');
-require('./index-18acca73.js');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var index$2 = require('./index-5322f269.js');
+require('./index-99b7ebde.js');
+require('./utils-e5b6fd8d.js');
+require('./index-4b7ca682.js');
+var index$1 = require('./index-23ba90fd.js');
 var other = require('@hhgtech/icons/other');
-var index$3 = require('./index-2d74352f.js');
+var context = require('./context-1711fcfb.js');
+var index$3 = require('./index-c6272c6f.js');
 var miscTheme = require('./miscTheme.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -253,8 +254,8 @@ const ConceptionFormContext = React.createContext({});
 const DefaultLayout$4 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(ConceptionFormContext);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
 };
@@ -262,24 +263,25 @@ const DefaultLayout$4 = () => {
 const InlineLayout$4 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(ConceptionFormContext);
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.FormRow, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), error: null }))),
-        form.errors.lastPeriodDate && (React__default["default"].createElement(index$2.HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
+        form.errors.lastPeriodDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
 };
 const MbLayout$4 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(ConceptionFormContext);
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
                 withinPortal: true,
             }, rightSection: null, maxDate: new Date() }))));
 };
 const ConceptionForm = ({}) => {
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
     const theme = core.useMantineTheme();
     const { t } = index.useTranslations();
@@ -300,9 +302,10 @@ const ConceptionForm = ({}) => {
         }),
     };
     return (React__default["default"].createElement(ConceptionFormContext.Provider, { value: { form: form$1 } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$4, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$4, null)) : (React__default["default"].createElement(DefaultLayout$4, null)),
-            React__default["default"].createElement(index$2.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 const IUIFormContext = React.createContext({});
@@ -310,8 +313,8 @@ const IUIFormContext = React.createContext({});
 const DefaultLayout$3 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(IUIFormContext);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('dueDatePage.date_of_IUI_procedure') }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                 withinPortal: true,
             }, maxDate: new Date() }))));
 };
@@ -319,9 +322,9 @@ const DefaultLayout$3 = () => {
 const InlineLayout$3 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(IUIFormContext);
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.FormRow, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_IUI_procedure') },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_IUI_procedure') },
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), error: null })))));
 };
@@ -329,14 +332,15 @@ const InlineLayout$3 = () => {
 const MbLayout$3 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(IUIFormContext);
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_IUI_procedure'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_IUI_procedure'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
                 withinPortal: true,
             }, rightSection: null, maxDate: new Date() }))));
 };
 const IUIForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const theme = core.useMantineTheme();
     const { t } = index.useTranslations();
     const form$1 = form.useForm({
@@ -356,9 +360,10 @@ const IUIForm = ({}) => {
         }),
     };
     return (React__default["default"].createElement(IUIFormContext.Provider, { value: { form: form$1 } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$3, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$3, null)) : (React__default["default"].createElement(DefaultLayout$3, null)),
-            React__default["default"].createElement(index$2.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 const IVFFormContext = React.createContext({});
@@ -367,32 +372,36 @@ const DefaultLayout$2 = () => {
     const { t } = index.useTranslations();
     const { form, transferDateOptions } = React.useContext(IVFFormContext);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default["default"].createElement(index$4.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-            React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$4.Radio, { key: idx, value: i.value, label: i.label })))))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$4.Radio, { key: idx, value: i.value, label: i.label }))))))));
 };
 const InlineLayout$2 = () => {
     const { t } = index.useTranslations();
     const { form, transferDateOptions } = React.useContext(IVFFormContext);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
-            React__default["default"].createElement(index$4.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
-                React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$4.Radio, { key: idx, value: i.value, label: i.label }))))))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.ivf.transferDate') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
+                React__default["default"].createElement(index$4.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                    React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$4.Radio, { key: idx, value: i.value, label: i.label })))))))));
 };
 const MbLayout$2 = () => {
     const { t } = index.useTranslations();
     const { form, transferDateOptions } = React.useContext(IVFFormContext);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }))),
         React__default["default"].createElement(index$4.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
@@ -401,6 +410,7 @@ const MbLayout$2 = () => {
 const IVFForm = ({}) => {
     var _a;
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
     const { t } = index.useTranslations();
     const theme = core.useMantineTheme();
@@ -437,9 +447,10 @@ const IVFForm = ({}) => {
         }),
     };
     return (React__default["default"].createElement(IVFFormContext.Provider, { value: { form: form$1, transferDateOptions } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$2, null)) : (React__default["default"].createElement(DefaultLayout$2, null)),
-            React__default["default"].createElement(index$2.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 const LastPeriodFormContext = React.createContext({});
@@ -452,13 +463,15 @@ const DefaultLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default["default"].createElement(index$4.Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
-            React__default["default"].createElement(index$4.Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
-                    content: t('dueDatePage.daysText', { number: 30 }),
-                }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength'))))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+                React__default["default"].createElement(index$4.Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: t('dueDatePage.daysText', { number: 30 }),
+                    }), data: periodLengthDropDownOptions, withinPortal: true }, form.getInputProps('periodLength')))))));
 };
 const InlineLayout$1 = () => {
@@ -469,34 +482,38 @@ const InlineLayout$1 = () => {
         value: `${index + 20}`,
     })), []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
-            React__default["default"].createElement(index$4.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["default"].createElement(index$2.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), width: 300 },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), width: 300 },
+                React__default["default"].createElement(index$4.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength)))));
 };
 const MbLayout$1 = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(LastPeriodFormContext);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date() }))),
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
             React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
                     content: '30',
                 }) }, form.getInputProps('periodLength')))),
-        form.errors.periodLength && (React__default["default"].createElement(index$2.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+        form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
 };
 const LastPeriodForm = ({}) => {
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { t } = index.useTranslations();
     const theme = core.useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
@@ -520,9 +537,10 @@ const LastPeriodForm = ({}) => {
         }),
     };
     return (React__default["default"].createElement(LastPeriodFormContext.Provider, { value: { form: form$1 } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$1, null)) : isMarryBaby ? (React__default["default"].createElement(MbLayout$1, null)) : (React__default["default"].createElement(DefaultLayout$1, null)),
-            React__default["default"].createElement(index$2.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 const UltrasoundFormContext = React.createContext({});
@@ -541,10 +559,11 @@ const DefaultLayout = () => {
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() })),
-        React__default["default"].createElement(core.Box, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('dueDatePage.date_of_ultrasound') }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(core.Flex, { align: "center", gap: 4, mb: 4 },
                 React__default["default"].createElement(index$5.Text, { as: "label", size: "s4" }, t('dueDatePage.validation.one_is_required')),
                 React__default["default"].createElement(core.Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
@@ -562,33 +581,36 @@ const InlineLayout = () => {
     const rightSection = (React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray400 }, "mm"));
     const inputPropsCRL = form.getInputProps('ultrasoundCRL');
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.FormRow, null,
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
-            React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), error: null }))),
-        React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default["default"].createElement(core.Flex, { align: "center", gap: 4 },
-                React__default["default"].createElement("span", null, t('dueDatePage.validation.one_is_required')),
-                React__default["default"].createElement(core.Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
-                    React__default["default"].createElement(core.Flex, null,
-                        React__default["default"].createElement(Info, { size: 16 })))) },
-            React__default["default"].createElement(core.Box, null,
-                React__default["default"].createElement(core.Flex, { gap: 8 },
-                    React__default["default"].createElement(index$4.Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
-                    React__default["default"].createElement(index$4.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["default"].createElement(index$2.HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_ultrasound') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date(), error: null })))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 300, label: React__default["default"].createElement(core.Flex, { align: "center", gap: 4 },
+                    React__default["default"].createElement("span", null, t('dueDatePage.validation.one_is_required')),
+                    React__default["default"].createElement(core.Tooltip, { withinPortal: true, withArrow: true, width: 300, multiline: true, label: t('dueDatePage.ultrasound.tooltip') },
+                        React__default["default"].createElement(core.Flex, null,
+                            React__default["default"].createElement(Info, { size: 16 })))) },
+                React__default["default"].createElement(core.Box, null,
+                    React__default["default"].createElement(core.Flex, { gap: 8 },
+                        React__default["default"].createElement(index$4.Input, Object.assign({ placeholder: "CRL", sx: { flex: 1 }, rightSection: rightSection, type: "number", min: 0, step: 0.01 }, inputPropsCRL, { errorProps: { sx: { display: 'none' } } })),
+                        React__default["default"].createElement(index$4.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["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.ultrasoundCRL || form.errors.ultrasoundMSD)))));
 };
 const MbLayout = () => {
     const { t } = index.useTranslations();
     const { form } = React.useContext(UltrasoundFormContext);
-    return (React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_ultrasound'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
-        React__default["default"].createElement(index$1.DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_ultrasound'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
                 withinPortal: true,
             }, rightSection: null, maxDate: new Date() }))));
 };
 const UltrasoundForm = ({}) => {
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
     const theme = core.useMantineTheme();
     const { t } = index.useTranslations();
@@ -633,9 +655,10 @@ const UltrasoundForm = ({}) => {
         }),
     };
     return (React__default["default"].createElement(UltrasoundFormContext.Provider, { value: { form: form$1 } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
             formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout, null)) : (React__default["default"].createElement(DefaultLayout, null)),
-            React__default["default"].createElement(index$2.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate'))))));
 };
 const FormSwitcher = () => {
@@ -706,10 +729,11 @@ const DueDateForm = (_a) => {
             calculatorType,
             setCalculatorType,
         } },
-        React__default["default"].createElement(index$2.HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
-            formLayout === 'default' ? (React__default["default"].createElement(index$2.HealthToolFormWrapper.Control, null,
-                React__default["default"].createElement(index$4.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["default"].createElement(core.Box, null,
-                React__default["default"].createElement(index$2.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), width: 300 },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ component: "div", formLayout: formLayout }, props),
+            formLayout === 'default' ? (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
+                    React__default["default"].createElement(index$4.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), width: 300 },
                     React__default["default"].createElement(index$4.Select, { value: String(calculatorType), data: calculatingMethods, itemComponent: SelectMethodItem, onChange: (v) => setCalculatorType(Number(v)) })))),
             React__default["default"].createElement(FormSwitcher, null))));
 };

package/build/{index-ce0a7efa.js → index-eff68a82.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 'use strict';
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-ac9de441.js');
 var React = require('react');
 var core = require('@mantine/core');
-var shared = require('./shared-8aee16d5.js');
-var text = require('./text-92a095cb.js');
+var shared = require('./shared-d458c0f9.js');
+var index = require('./index-e9a11463.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -14,7 +14,7 @@ var useStyles = core.createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;
     const { other } = _theme;
     const { template } = other;
-    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, customStylesType, } = _params;
+    const { size, variant, skipHover, withColorHover, isError, isSuccess, color, children, theme: themeProp, customStylesType, } = _params;
     const isMb = template === 'mb' || themeProp === 'marryBaby';
     const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
     const isHexColor = finalColor.startsWith('#');
@@ -27,11 +27,13 @@ var useStyles = core.createStyles((_theme, _params) => {
     const hoverHexColor = isHexColor
         ? _theme.fn.darken(color, 0.05)
         : (_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 === text.CustomStylesType.LEADGEN;
+    const isLeadgen = customStylesType === index.CustomStylesType.LEADGEN;
     return {
-        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${shared.ANIMATION_DURATION} ease-in-out`, '&:focus': {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${shared.ANIMATION_DURATION} ease-in-out`, '&:focus': {
                 outline: 'none',
-            } }, (!children && {
+            } }, (isLeadgen && {
+            borderRadius: 12,
+        })), (!children && {
             paddingLeft: '10px',
             paddingRight: '10px',
             '.mantine-Button-icon': {
@@ -40,23 +42,23 @@ var useStyles = core.createStyles((_theme, _params) => {
         })), (() => {
             switch (size) {
                 case 'xl':
-                    return Object.assign({ height: 56, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
+                    return Object.assign({ height: 56, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'lg':
-                    return Object.assign({ height: 48, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
+                    return Object.assign({ height: 48, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'md':
-                    return Object.assign({ height: 40, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
+                    return Object.assign({ height: 40, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
                         letterSpacing: '-0.3px',
                     }));
                 case 'sm':
-                    return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
+                    return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
                         letterSpacing: '-0.2px',
                     })), { paddingLeft: '16px', paddingRight: '16px' });
                 case 'xs':
-                    return Object.assign({ height: 24, fontWeight: isLeadgen ? text.FontWeight.halfBold : text.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
+                    return Object.assign({ height: 24, fontWeight: isLeadgen ? index.FontWeight.halfBold : index.FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
                         letterSpacing: '-0.2px',
                     }));
             }
@@ -70,11 +72,17 @@ var useStyles = core.createStyles((_theme, _params) => {
                     }));
                 }
                 case 'secondary':
-                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
+                    return Object.assign(Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
                         '&:hover': {
                             backgroundColor: hexColor50,
                             border: `1px solid ${hexColor}`,
                         },
+                    })), (withColorHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor,
+                            border: `1px solid ${hexColor}`,
+                            color: '#fff',
+                        },
                     }));
                 case 'white':
                     return {
@@ -166,20 +174,22 @@ function filterObject(obj) {
 const Button = React.forwardRef((props, ref) => {
     var _a, _b;
     const theme = core.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 = tslib_es6.__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, withColorHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "skipHover", "withColorHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component"]);
     const isError = variant === 'error';
+    const variantStyle = index.useTemplateVariant();
     const { classes, cx } = useStyles({
         variant,
         size,
         color,
         skipHover,
+        withColorHover,
         isError,
         isSuccess: variant === 'success',
         children,
         theme: themeProp,
-        customStylesType: theme.other.customStyleType || text.CustomStylesType.NONE,
+        customStylesType: variantStyle,
     });
-    return (React__default["default"].createElement(core.Button, Object.assign({ className: cx(className, variant), classNames: {
+    return (React__default["default"].createElement(core.Button, 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));