@hhgtech/hhg-components 1.29.565 → 1.29.566-beta-2

package/build/esm/{index-37c9075d.js → index-da2d68ca.js}

@@ -1,8 +1,8 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-79263af0.js';
-import { S as Spinner } from './Spinner-5d699f7c.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-5f84f600.js';
+import { S as Spinner } from './Spinner-119b3f17.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);

package/build/esm/{index-7ae18d58.js → index-dc0c8398.js}

@@ -1,6 +1,6 @@
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { B as Button } from './index-279ba381.js';
-import { T as TogetherComponentGlobalContext } from './utils-9c8af8c7.js';
+import { B as Button } from './index-e7110faf.js';
+import { T as TogetherComponentGlobalContext } from './utils-a1143b61.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-337c95b1.js → index-e059e12d.js}

@@ -1,25 +1,27 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-b2d67311.js';
-import { u as useTranslations } from './index-689f8290.js';
-import { C as CommonGAssets } from './index-a63e9dda.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-2d90e3fc.js';
-import { G as GenderOptionControl } from './index-21936404.js';
-import { I as Input, S as Select } from './index-5b03f045.js';
-import { D as DatePicker } from './index-cc26530a.js';
-import { T as Text } from './index-778adb1e.js';
-import './index-fb5e2812.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-7e730a4d.js';
+import { u as useTranslations } from './index-a59e1fbf.js';
+import { C as CommonGAssets } from './index-69b35709.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-fe18e546.js';
+import { H as HealthToolDatePicker } from './index-63662110.js';
+import { G as GenderOptionControl } from './index-41e019e0.js';
+import { I as Input, S as Select } from './index-5815d1fa.js';
 import '@mantine/core';
-import './index-68110318.js';
-import './index.styles-83fa1b1f.js';
+import '@mantine/dates';
+import './index-1bf883fd.js';
+import './index-8f9c77a6.js';
+import './index-c15d7948.js';
+import { T as Text } from './index-63740996.js';
+import './index-2f652511.js';
+import './index-9c412539.js';
+import './index.styles-0c038ca8.js';
 import '@mantine/hooks';
-import './index-4446c376.js';
-import './utils-e1dd1c18.js';
-import './index-0a2a56d8.js';
-import './index-a43c5e07.js';
-import { C as CardWrapperContext } from './context-a71ecb0d.js';
-import { H as HealthToolFormWrapper } from './index-2db7bd81.js';
+import './utils-c85e6dc6.js';
+import './index-6db90eae.js';
+import { C as CardWrapperContext } from './context-6d8c0aa6.js';
+import { H as HealthToolFormWrapper } from './index-73740f77.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});
@@ -34,9 +36,7 @@ const DefaultForm = (_a) => {
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
-                    withinPortal: true,
-                }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.heartRateInput')), placeholder: t('tools.inputPlaceholder', {
                     content: '60',
@@ -73,9 +73,7 @@ const InlineForm = (_a) => {
             form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
-                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
-                        withinPortal: true,
-                    }, error: null, maxDate: new Date() }))),
+                React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', error: null, maxDate: new Date() }))),
             form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },

package/build/esm/{index-279ba381.js → index-e7110faf.js}

@@ -1,6 +1,6 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-fb5e2812.js';
+import { B as Button$1 } from './index-2f652511.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-768f6dc8.js → index-ef2540c1.js}

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import React__default from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import styled from '@emotion/styled';
 import { Box } from '@mantine/core';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-e1dd1c18.js';
-import { u as useTranslations } from './index-689f8290.js';
-import { T as Text } from './index-778adb1e.js';
+import { M as MediaQueries } from './utils-c85e6dc6.js';
+import { u as useTranslations } from './index-a59e1fbf.js';
+import { T as Text } from './index-63740996.js';
 
 /* eslint-disable prettier/prettier */
 const ShoppingCartCare = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
@@ -92,11 +92,11 @@ const StyledCartCareButtonCount = styled(Box) `
 const CartCareButton = (props) => {
     const { count = 0, href, classes, boxProps, anchorProps, tracking } = props;
     const { t } = useTranslations();
-    return (React__default.createElement("a", Object.assign({ className: classNames('cart-care-button'), href: href, "data-testid": "cart-care-button", "data-event-category": "Hamburger Navigation", "data-event-action": "Cart Click", "data-event-label": href }, tracking, anchorProps),
-        React__default.createElement(StyledCartCareBox, Object.assign({ className: classNames('cart-care-button-box', classes === null || classes === void 0 ? void 0 : classes.box) }, boxProps),
+    return (React__default.createElement("a", Object.assign({ className: cn('cart-care-button'), href: href, "data-testid": "cart-care-button", "data-event-category": "Hamburger Navigation", "data-event-action": "Cart Click", "data-event-label": href }, tracking, anchorProps),
+        React__default.createElement(StyledCartCareBox, Object.assign({ className: cn('cart-care-button-box', classes === null || classes === void 0 ? void 0 : classes.box) }, boxProps),
             React__default.createElement(ShoppingCartCare, { className: "cart-care-icon" }),
             React__default.createElement(Text, { size: "label1", color: theme.colors.white, fw: 500, className: "cart-care-button-text" }, t('navigation.button.cartCareService')),
-            count > 0 && (React__default.createElement(StyledCartCareButtonCount, { className: classNames('cart-care-button-count-box', classes === null || classes === void 0 ? void 0 : classes.count) },
+            count > 0 && (React__default.createElement(StyledCartCareButtonCount, { className: cn('cart-care-button-count-box', classes === null || classes === void 0 ? void 0 : classes.count) },
                 React__default.createElement(Text, { size: count > 99 ? 'label2' : 'c1', color: theme.colors.white, fw: 600, className: "cart-care-button-count-text" }, count > 99 ? '99+' : count))))));
 };
 

package/build/esm/{index-d6af757c.js → index-f558f6ee.js}

@@ -1,10 +1,10 @@
-import { _ as __awaiter } from './tslib.es6-8ec24ff1.js';
+import { _ as __awaiter } from './tslib.es6-1ff2c2df.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, c as getCurrentSsoUrl } from './routing-a87b5a72.js';
-import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-a43c5e07.js';
+import { n as normalizeLinkSlash, c as getCurrentSsoUrl } from './routing-6034d571.js';
+import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-1bf883fd.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
 import { domainLocales, getDomainLocaleKey } from './constantsDomainLocales.js';
-import { L as LOCALE } from './index-4fb882a5.js';
+import { L as LOCALE } from './index-8f9c77a6.js';
 
 const SSO_V2_PATHS = {
     LOGIN_BY_SOCIAL: 'member/social-login',

package/build/esm/{index-cc26530a.js → index-f73770d8.js}

@@ -1,11 +1,11 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-a43c5e07.js';
-import { L as LOCALE } from './index-4fb882a5.js';
-import { C as CommonGAssets } from './index-a63e9dda.js';
-import { M as MAPPED_LOCALE } from './index-4446c376.js';
+import { I as ISO_FORMAT } from './index-1bf883fd.js';
+import { L as LOCALE } from './index-8f9c77a6.js';
+import { C as CommonGAssets } from './index-69b35709.js';
+import { M as MAPPED_LOCALE } from './index-c15d7948.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/{index-5c71dafe.js → index-fa99c8fa.js}

@@ -1,26 +1,28 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
 import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-17983800.js';
-import { L as LOCALE } from './index-4fb882a5.js';
+import { L as LastPeriod } from './LastPeriod-7be19032.js';
+import { L as LOCALE } from './index-8f9c77a6.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-5b03f045.js';
-import { D as DatePicker } from './index-cc26530a.js';
-import { T as Text } from './index-778adb1e.js';
-import './index-fb5e2812.js';
-import './index-68110318.js';
-import './index.styles-83fa1b1f.js';
-import { u as useTranslations } from './index-689f8290.js';
+import { H as HealthToolDatePicker } from './index-63662110.js';
+import { R as Radio, I as Input, S as Select } from './index-5815d1fa.js';
+import '@mantine/dates';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-1bf883fd.js';
+import './index-69b35709.js';
+import './index-c15d7948.js';
+import { T as Text } from './index-63740996.js';
+import './index-2f652511.js';
+import './index-9c412539.js';
+import './index.styles-0c038ca8.js';
+import { u as useTranslations } from './index-a59e1fbf.js';
 import '@mantine/hooks';
-import './index-4446c376.js';
-import './utils-e1dd1c18.js';
-import './index-0a2a56d8.js';
-import { H as HealthToolFormWrapper } from './index-2db7bd81.js';
+import './utils-c85e6dc6.js';
+import './index-6db90eae.js';
+import { H as HealthToolFormWrapper } from './index-73740f77.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-a71ecb0d.js';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-a43c5e07.js';
+import { C as CardWrapperContext } from './context-6d8c0aa6.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {
@@ -248,9 +250,7 @@ const DefaultLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.lastPeriodLabel')) }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() }))));
+        React__default.createElement(HealthToolDatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.lastPeriodLabel')) }, form.getInputProps('lastPeriodDate'), { maxDate: new Date() }))));
 };
 
 const InlineLayout$4 = () => {
@@ -258,9 +258,7 @@ const InlineLayout$4 = () => {
     const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), error: null }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { maxDate: new Date(), error: null }))),
         form.errors.lastPeriodDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
 };
 
@@ -268,9 +266,7 @@ const MbLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
-        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                withinPortal: true,
-            }, rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { rightSection: null, maxDate: new Date() }))));
 };
 
 const ConceptionForm = ({}) => {
@@ -307,9 +303,7 @@ const DefaultLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.date_of_IUI_procedure')) }, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() }))));
+        React__default.createElement(HealthToolDatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.date_of_IUI_procedure')) }, form.getInputProps('dateOfIUIProcedure'), { maxDate: new Date() }))));
 };
 
 const InlineLayout$3 = () => {
@@ -317,18 +311,14 @@ const InlineLayout$3 = () => {
     const { form } = useContext(IUIFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
         React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { width: 300, label: t('dueDatePage.date_of_IUI_procedure') },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), error: null })))));
+            React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { maxDate: new Date(), error: null })))));
 };
 
 const MbLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
     return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_IUI_procedure'), rightSection: React__default.createElement(CalendarMB, null) },
-        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
-                withinPortal: true,
-            }, rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { rightSection: null, maxDate: new Date() }))));
 };
 
 const IUIForm = ({}) => {
@@ -366,9 +356,7 @@ const DefaultLayout$2 = () => {
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.ivf.transferDate')) }, form.getInputProps('IVFDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.ivf.transferDate')) }, form.getInputProps('IVFDate'), { 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 }))))))));
@@ -380,9 +368,7 @@ const InlineLayout$2 = () => {
     return (React__default.createElement(React__default.Fragment, null,
         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(HealthToolDatePicker, Object.assign({}, form.getInputProps('IVFDate'), { 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')),
@@ -394,9 +380,7 @@ const MbLayout$2 = () => {
     const { form, transferDateOptions } = useContext(IVFFormContext);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default.createElement(CalendarMB, null) },
-            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date(), rightSection: null }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('IVFDate'), { maxDate: new Date(), rightSection: 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 })))))));
 };
@@ -457,9 +441,7 @@ const DefaultLayout$1 = () => {
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.lastPeriodLabel')) }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.lastPeriodLabel')) }, form.getInputProps('lastPeriodDate'), { maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.lastPeriod.periodLengthLabel')) },
                 React__default.createElement(Select, Object.assign({ placeholder: t('tools.inputPlaceholder', {
@@ -477,9 +459,7 @@ const InlineLayout$1 = () => {
     return (React__default.createElement(React__default.Fragment, null,
         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(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { 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', {
@@ -494,9 +474,7 @@ const MbLayout$1 = () => {
     const { form } = useContext(LastPeriodFormContext);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default.createElement(CalendarMB, null) },
-            React__default.createElement(DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
             React__default.createElement(Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
                     content: '30',
@@ -553,9 +531,7 @@ const DefaultLayout = () => {
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.date_of_ultrasound')) }, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }))),
+            React__default.createElement(HealthToolDatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.date_of_ultrasound')) }, form.getInputProps('dateOfUltrasound'), { maxDate: new Date() }))),
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
             React__default.createElement(Flex, { align: "center", gap: 4, mb: 4 },
                 React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('dueDatePage.validation.one_is_required')),
@@ -577,9 +553,7 @@ const InlineLayout = () => {
     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(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { 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')),
@@ -597,9 +571,7 @@ const MbLayout = () => {
     const { t } = useTranslations();
     const { form } = useContext(UltrasoundFormContext);
     return (React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.date_of_ultrasound'), rightSection: React__default.createElement(CalendarMB, null) },
-        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
-                withinPortal: true,
-            }, rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { rightSection: null, maxDate: new Date() }))));
 };
 
 const UltrasoundForm = ({}) => {

package/build/esm/{index-f7965f23.js → index-fd1ba6b5.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-37c9075d.js';
-import { u as useTranslations } from './index-689f8290.js';
+import { I as Icon } from './index-da2d68ca.js';
+import { u as useTranslations } from './index-a59e1fbf.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-d36dcab9.js → index-fd472558.js}

@@ -1,8 +1,8 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default from 'react';
 import { Textarea } from '@mantine/core';
-import { u as useStyles } from './index-5b03f045.js';
-import { u as useTemplateVariant } from './index-68110318.js';
+import { u as useStyles } from './index-5815d1fa.js';
+import { u as useTemplateVariant } from './index-9c412539.js';
 
 const TextArea = (_a) => {
     var { styles } = _a, props = __rest(_a, ["styles"]);

package/build/esm/{index-eea4081d.js → index-ffececce.js}

@@ -1,20 +1,20 @@
-import { a as __rest } from './tslib.es6-8ec24ff1.js';
+import { a as __rest } from './tslib.es6-1ff2c2df.js';
 import React__default from 'react';
-import './index-5b03f045.js';
+import './index-5815d1fa.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-a43c5e07.js';
-import './index-4fb882a5.js';
-import './index-a63e9dda.js';
-import './index-4446c376.js';
-import { T as Text$1 } from './index-778adb1e.js';
-import './index-fb5e2812.js';
-import './index-68110318.js';
-import './index.styles-83fa1b1f.js';
-import './translationsContext-e80e1a7f.js';
+import './index-1bf883fd.js';
+import './index-8f9c77a6.js';
+import './index-69b35709.js';
+import './index-c15d7948.js';
+import { T as Text$1 } from './index-63740996.js';
+import './index-2f652511.js';
+import './index-9c412539.js';
+import './index.styles-0c038ca8.js';
+import './translationsContext-a7106dbe.js';
 import '@mantine/hooks';
-import './utils-e1dd1c18.js';
-import './index-0a2a56d8.js';
+import './utils-c85e6dc6.js';
+import './index-6db90eae.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'