@hhgtech/hhg-components 1.29.566-beta-1 → 1.29.566

package/build/esm/{index-290b4d58.js → index-20210b3b.js}

@@ -1,27 +1,27 @@
-import { a as __rest, _ as __awaiter } from './tslib.es6-19e36627.js';
+import { a as __rest, _ as __awaiter } from './tslib.es6-f8676dd9.js';
 import React__default, { createContext, useState, useContext, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-42d1e41f.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-eb405c26.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-48928f66.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-e9074c24.js';
 import { createStyles, Flex, Box, useMantineTheme, Menu, rem, UnstyledButton, Text as Text$1, Stack, clsx, Grid } from '@mantine/core';
-import { d as Checkbox, R as Radio, I as Input, e as ErrorLabel } from './index-64292d93.js';
+import { d as Checkbox, R as Radio, I as Input, e as ErrorLabel } from './index-351ff3dd.js';
 import '@mantine/dates';
-import './index-96b42b09.js';
-import { L as LOCALE } from './index-5b698e6e.js';
-import './index-e8b286e8.js';
-import './index-0d8a7d2c.js';
-import { T as Text } from './index-37937853.js';
-import './index-d42432aa.js';
-import { T as TemplateProvider, C as CustomStylesType } from './index-b75f3212.js';
-import './index.styles-c117a495.js';
-import { u as useTranslations } from './index-984b1af4.js';
+import './index-10f17701.js';
+import { L as LOCALE } from './index-32875b05.js';
+import './index-407dcda5.js';
+import './index-52f91d02.js';
+import { T as Text } from './index-794f95cb.js';
+import './index-5375eb4d.js';
+import { T as TemplateProvider, C as CustomStylesType } from './index-4477435c.js';
+import './index.styles-b0090ff0.js';
+import { u as useTranslations } from './index-db63bfc2.js';
 import '@mantine/hooks';
-import './utils-3e67c97e.js';
-import './index-57bd97a5.js';
-import { H as HealthToolFormWrapper } from './index-f46eb63d.js';
-import { C as ChevronDown } from './ChevronDown-fe19fd59.js';
-import { C as CardWrapperContext } from './context-861d5640.js';
-import { G as GenderOptionControl } from './index-998fcd0b.js';
+import './utils-d418c7c0.js';
+import './index-a71e34e6.js';
+import { H as HealthToolFormWrapper } from './index-904ce25d.js';
+import { C as ChevronDown } from './ChevronDown-cf7a70be.js';
+import { C as CardWrapperContext } from './context-d599e7dc.js';
+import { G as GenderOptionControl } from './index-353fb019.js';
 import '@hhgtech/icons/other';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';

package/build/esm/{index-d5a7c57f.js → index-21bd3377.js}

@@ -1,28 +1,26 @@
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { a as __rest } from './tslib.es6-f8676dd9.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-37e897d4.js';
-import { L as LOCALE } from './index-5b698e6e.js';
+import { L as LastPeriod } from './LastPeriod-183056b0.js';
+import { L as LOCALE } from './index-32875b05.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { H as HealthToolDatePicker } from './index-af3cafab.js';
-import { R as Radio, I as Input, S as Select } from './index-64292d93.js';
-import '@mantine/dates';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-96b42b09.js';
-import './index-e8b286e8.js';
-import './index-0d8a7d2c.js';
-import { T as Text } from './index-37937853.js';
-import './index-d42432aa.js';
-import './index-b75f3212.js';
-import './index.styles-c117a495.js';
-import { u as useTranslations } from './index-984b1af4.js';
+import { R as Radio, I as Input, S as Select } from './index-351ff3dd.js';
+import { D as DatePicker } from './index-9ca62747.js';
+import { T as Text } from './index-794f95cb.js';
+import './index-5375eb4d.js';
+import './index-4477435c.js';
+import './index.styles-b0090ff0.js';
+import { u as useTranslations } from './index-db63bfc2.js';
 import '@mantine/hooks';
-import './utils-3e67c97e.js';
-import './index-57bd97a5.js';
-import { H as HealthToolFormWrapper } from './index-f46eb63d.js';
+import './index-52f91d02.js';
+import './utils-d418c7c0.js';
+import './index-a71e34e6.js';
+import { H as HealthToolFormWrapper } from './index-904ce25d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-861d5640.js';
+import { C as CardWrapperContext } from './context-d599e7dc.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-10f17701.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {
@@ -250,7 +248,9 @@ const DefaultLayout$4 = () => {
     const { t } = useTranslations();
     const { form } = useContext(ConceptionFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        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(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() }))));
 };
 
 const InlineLayout$4 = () => {
@@ -258,7 +258,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { maxDate: new Date(), error: null }))),
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null }))),
         form.errors.lastPeriodDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
 };
 
@@ -266,7 +268,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
 };
 
 const ConceptionForm = ({}) => {
@@ -303,7 +307,9 @@ const DefaultLayout$3 = () => {
     const { t } = useTranslations();
     const { form } = useContext(IUIFormContext);
     return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-        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() }))));
+        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() }))));
 };
 
 const InlineLayout$3 = () => {
@@ -311,14 +317,18 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { maxDate: new Date(), error: null })))));
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+                    withinPortal: true,
+                }, 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfIUIProcedure'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
 };
 
 const IUIForm = ({}) => {
@@ -356,7 +366,9 @@ 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(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(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(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 }))))))));
@@ -368,7 +380,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('IVFDate'), { maxDate: new Date() })))),
+                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')),
@@ -380,7 +394,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('IVFDate'), { maxDate: new Date(), rightSection: null }))),
+            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { popoverProps: {
+                    withinPortal: true,
+                }, 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 })))))));
 };
@@ -441,7 +457,9 @@ const DefaultLayout$1 = () => {
     })), []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            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(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(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', {
@@ -459,7 +477,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { maxDate: new Date() })))),
+                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', {
@@ -474,7 +494,9 @@ 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(HealthToolDatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { maxDate: new Date() }))),
+            React__default.createElement(DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { popoverProps: {
+                    withinPortal: true,
+                }, 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',
@@ -531,7 +553,9 @@ const DefaultLayout = () => {
     const inputPropsMSD = form.getInputProps('ultrasoundMSD');
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            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(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(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')),
@@ -553,7 +577,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { maxDate: new Date(), error: null })))),
+                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')),
@@ -571,7 +597,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { rightSection: null, maxDate: new Date() }))));
+        React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('dateOfUltrasound'), { popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
 };
 
 const UltrasoundForm = ({}) => {

package/build/esm/{index-b74614d0.js → index-23a4bd81.js}

@@ -1,22 +1,22 @@
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { a as __rest } from './tslib.es6-f8676dd9.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, Box, clsx } from '@mantine/core';
-import './index-64292d93.js';
+import './index-351ff3dd.js';
 import '@mantine/dates';
-import './index-96b42b09.js';
-import './index-5b698e6e.js';
-import './index-e8b286e8.js';
-import './index-0d8a7d2c.js';
-import { T as Text } from './index-37937853.js';
-import { B as Button } from './index-d42432aa.js';
-import './index-b75f3212.js';
-import './index.styles-c117a495.js';
-import { u as useTranslations } from './index-984b1af4.js';
+import './index-10f17701.js';
+import './index-32875b05.js';
+import './index-407dcda5.js';
+import './index-52f91d02.js';
+import { T as Text } from './index-794f95cb.js';
+import { B as Button } from './index-5375eb4d.js';
+import './index-4477435c.js';
+import './index.styles-b0090ff0.js';
+import { u as useTranslations } from './index-db63bfc2.js';
 import '@mantine/hooks';
-import './utils-3e67c97e.js';
-import './index-57bd97a5.js';
-import { C as CardWrapperContext } from './context-861d5640.js';
-import { H as HealthToolFormWrapper } from './index-f46eb63d.js';
+import './utils-d418c7c0.js';
+import './index-a71e34e6.js';
+import { C as CardWrapperContext } from './context-d599e7dc.js';
+import { H as HealthToolFormWrapper } from './index-904ce25d.js';
 
 var useStyles = createStyles((theme, { hasOnClickFn }) => {
     return {

package/build/esm/{index-30af2bdf.js → index-346d44b5.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-3e67c97e.js';
+import { M as MediaQueries } from './utils-d418c7c0.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-64292d93.js → index-351ff3dd.js}

@@ -1,20 +1,20 @@
-import { a as __rest, _ as __awaiter } from './tslib.es6-19e36627.js';
+import { a as __rest, _ as __awaiter } from './tslib.es6-f8676dd9.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, CaretDown as CaretDown$1 } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Stack, Group, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-e8b286e8.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-b75f3212.js';
-import { u as useScreenSize, I as ImageWrap } from './index-090d1c75.js';
+import { C as CommonGAssets } from './index-407dcda5.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-4477435c.js';
+import { u as useScreenSize, I as ImageWrap } from './index-671b3b3f.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-37937853.js';
-import { t as themeColors } from './index-0d8a7d2c.js';
+import { T as Text } from './index-794f95cb.js';
+import { t as themeColors } from './index-52f91d02.js';
 import { theme } from './miscTheme.js';
-import cn from 'classnames';
+import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-98e298a4.js';
+import { a as useUniqueId } from './useUniqueId-700011ed.js';
 import { siteOptions } from './constantsSite.js';
 import { Search, Check, Plus } from '@hhgtech/icons/core';
 import debounce from 'lodash/debounce';
@@ -22,11 +22,11 @@ import throttle from 'lodash/throttle';
 import { getCountryCallingCode } from 'react-phone-number-input';
 import Flags from 'react-phone-number-input/flags';
 import { Drawer } from 'vaul';
-import { A as ANIMATION_DURATION } from './shared-d2273425.js';
+import { A as ANIMATION_DURATION } from './shared-b3ef7840.js';
 import { css } from '@emotion/react';
-import { u as useTranslations } from './index-984b1af4.js';
-import { c as ZINDEX_SSO } from './index-96b42b09.js';
-import { B as Button } from './index-d42432aa.js';
+import { u as useTranslations } from './index-db63bfc2.js';
+import { c as ZINDEX_SSO } from './index-10f17701.js';
+import { B as Button } from './index-5375eb4d.js';
 
 var useStyles$4 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
@@ -1311,7 +1311,7 @@ const DELETE = 46;
 const SPACEBAR = 32;
 const OTPInputFunction = (props, ref) => {
     const { maxLength = 1, placeholder, className } = props, restProps = __rest(props, ["maxLength", "placeholder", "className"]);
-    return (React__default.createElement("input", Object.assign({ maxLength: maxLength, className: cn(styles$2.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
+    return (React__default.createElement("input", Object.assign({ maxLength: maxLength, className: classNames(styles$2.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
 };
 const OTPInput = forwardRef(OTPInputFunction);
 const OTPFowardRef = (props, ref) => {
@@ -1426,7 +1426,7 @@ const OTPFowardRef = (props, ref) => {
         setOtp(() => transferValueToOtp(valueProps, valueLength));
         setValue(valueProps);
     }, [valueLength, valueProps]);
-    return (React__default.createElement(Flex, { justify: "center", columnGap: 8, className: cn(styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
+    return (React__default.createElement(Flex, { justify: "center", columnGap: 8, className: classNames(styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
         return (React__default.createElement(OTPInput, Object.assign({}, otpShareProps, { ref: (iRef) => {
                 inputRef.current[index] = iRef;
             }, key: '' + index, value: val, type: type, onChange: inputOnChange, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, onPaste: inputOnPaste, onBlur: onBlur, placeholder: placeholder })));
@@ -1787,13 +1787,13 @@ const PhoneForwardRef$1 = (props, ref) => {
             : '';
         return (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
-            React__default.createElement(Text, { size: "p2", variant: "primary", className: cn(styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
+            React__default.createElement(Text, { size: "p2", variant: "primary", className: classNames(styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
     }, [flagComponentProps, PhoneInputUtils]);
     const arrowComponent = useCallback(() => {
         if (arrowComponentProps) {
             return arrowComponentProps();
         }
-        return (React__default.createElement("div", { className: cn(styles.arrowSelect, 'PhoneInputArrowContainer') },
+        return (React__default.createElement("div", { className: classNames(styles.arrowSelect, 'PhoneInputArrowContainer') },
             React__default.createElement(CaretDown, null)));
     }, [arrowComponentProps]);
     const onChange = (val) => {
@@ -1816,7 +1816,7 @@ const PhoneForwardRef$1 = (props, ref) => {
         label,
         value,
         onChange,
-        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn(styles.phoneInput, {
+        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: classNames(styles.phoneInput, {
             isError,
             [styles.error]: isError,
             [styles.selectedCountry]: selectedCountry,
@@ -3102,7 +3102,7 @@ function CountrySelectWithIcon(_a) {
     const FlagSelected = Flags[selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value];
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "PhoneInputCountry", ref: countryDivRef },
-            React__default.createElement("div", Object.assign({}, rest, { className: cn('PhoneInputCountrySelect', className), onClick: () => {
+            React__default.createElement("div", Object.assign({}, rest, { className: classNames('PhoneInputCountrySelect', className), onClick: () => {
                     if (!disabled && !readOnly) {
                         setOpen(!open);
                     }
@@ -3257,7 +3257,7 @@ const PhoneForwardRef = (props, ref) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: ref, value: value, onChange: onChange, 
         // countries={countries}
-        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn(styles.phoneInput, { isError, [styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon, countrySelectProps: { trackingFn } }, inputProps)));
+        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: classNames(styles.phoneInput, { isError, [styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon, countrySelectProps: { trackingFn } }, inputProps)));
 };
 const PhoneWithCustomCountrySelect = forwardRef(PhoneForwardRef);
 

package/build/esm/{index-998fcd0b.js → index-353fb019.js}

@@ -1,21 +1,21 @@
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { a as __rest } from './tslib.es6-f8676dd9.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-64292d93.js';
+import { R as Radio } from './index-351ff3dd.js';
 import '@mantine/dates';
-import './index-96b42b09.js';
-import './index-5b698e6e.js';
-import { C as CommonGAssets } from './index-e8b286e8.js';
-import './index-0d8a7d2c.js';
-import { T as Text } from './index-37937853.js';
-import './index-d42432aa.js';
-import './index-b75f3212.js';
-import './index.styles-c117a495.js';
-import { u as useTranslations } from './index-984b1af4.js';
+import './index-10f17701.js';
+import './index-32875b05.js';
+import { C as CommonGAssets } from './index-407dcda5.js';
+import './index-52f91d02.js';
+import { T as Text } from './index-794f95cb.js';
+import './index-5375eb4d.js';
+import './index-4477435c.js';
+import './index.styles-b0090ff0.js';
+import { u as useTranslations } from './index-db63bfc2.js';
 import '@mantine/hooks';
-import './utils-3e67c97e.js';
-import './index-57bd97a5.js';
+import './utils-d418c7c0.js';
+import './index-a71e34e6.js';
 
 const sizeMap = {
     lg: {

package/build/esm/{index-23d90342.js → index-36934467.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-3e67c97e.js';
+import { t as toggleNoScroll } from './utils-d418c7c0.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-db4b9c0c.js';
-import { T as Text } from './index-37937853.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-ac253c4a.js';
+import { T as Text } from './index-794f95cb.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {

package/build/esm/{index-689079ff.js → index-4e22812e.js}

@@ -1,12 +1,12 @@
-import { _ as __awaiter } from './tslib.es6-19e36627.js';
+import { _ as __awaiter } from './tslib.es6-f8676dd9.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-b0e20ac1.js';
-import { T as Text } from './index-37937853.js';
-import { T as TogetherComponentGlobalContext, c as callApi, f as getApiPath } from './utils-9f2ef195.js';
+import { H as Heading } from './index-9d2e6a1f.js';
+import { T as Text } from './index-794f95cb.js';
+import { T as TogetherComponentGlobalContext, c as callApi, f as getApiPath } from './utils-4aeb889a.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { a as DEFAULT_IMG } from './constants-eb405c26.js';
+import { a as DEFAULT_IMG } from './constants-e9074c24.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-5f1c96e4.js → index-50bc9f66.js}

@@ -1,27 +1,25 @@
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { a as __rest } from './tslib.es6-f8676dd9.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-42d1e41f.js';
-import { u as useTranslations } from './index-984b1af4.js';
-import { C as CommonGAssets } from './index-e8b286e8.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-eb405c26.js';
-import { H as HealthToolDatePicker } from './index-af3cafab.js';
-import { G as GenderOptionControl } from './index-998fcd0b.js';
-import { I as Input, S as Select } from './index-64292d93.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-48928f66.js';
+import { u as useTranslations } from './index-db63bfc2.js';
+import { C as CommonGAssets } from './index-407dcda5.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-e9074c24.js';
+import { G as GenderOptionControl } from './index-353fb019.js';
+import { I as Input, S as Select } from './index-351ff3dd.js';
+import { D as DatePicker } from './index-9ca62747.js';
+import { T as Text } from './index-794f95cb.js';
+import './index-5375eb4d.js';
 import '@mantine/core';
-import '@mantine/dates';
-import './index-96b42b09.js';
-import './index-5b698e6e.js';
-import './index-0d8a7d2c.js';
-import { T as Text } from './index-37937853.js';
-import './index-d42432aa.js';
-import './index-b75f3212.js';
-import './index.styles-c117a495.js';
+import './index-4477435c.js';
+import './index.styles-b0090ff0.js';
 import '@mantine/hooks';
-import './utils-3e67c97e.js';
-import './index-57bd97a5.js';
-import { C as CardWrapperContext } from './context-861d5640.js';
-import { H as HealthToolFormWrapper } from './index-f46eb63d.js';
+import './index-52f91d02.js';
+import './utils-d418c7c0.js';
+import './index-a71e34e6.js';
+import './index-10f17701.js';
+import { C as CardWrapperContext } from './context-d599e7dc.js';
+import { H as HealthToolFormWrapper } from './index-904ce25d.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});
@@ -36,7 +34,9 @@ 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(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(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(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,7 +73,9 @@ 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(HealthToolDatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', error: null, maxDate: new Date() }))),
+                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, 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-bcf1f098.js → index-513bf860.js}

@@ -1,9 +1,9 @@
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { a as __rest } from './tslib.es6-f8676dd9.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-3e67c97e.js';
+import { M as MediaQueries } from './utils-d418c7c0.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-ac74a595.js → index-52a87433.js}

@@ -2,22 +2,22 @@ import React__default, { useMemo, useRef, useState, useCallback, forwardRef, use
 import { Search } from '@hhgtech/icons/core';
 import { Skeleton, clsx, Box, Input, rem, ScrollArea, useMantineTheme, Stack, Flex, Text as Text$1, Select, Divider, Tabs } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { P as PinIcon, i as checkMarkIconUrl, h as getApiPath, u as useGeolocation } from './utils-da0d08d1.js';
-import { a as useOutsideClick } from './useOutsideClick-6f896904.js';
-import { u as useTranslations } from './index-984b1af4.js';
+import { P as PinIcon, i as checkMarkIconUrl, h as getApiPath, u as useGeolocation } from './utils-e4361e09.js';
+import { a as useOutsideClick } from './useOutsideClick-aec33dda.js';
+import { u as useTranslations } from './index-db63bfc2.js';
 import debounce from 'lodash/debounce';
-import { a as ID_OPTION_CURRENT_LOCATION, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY, M as MAPPING_CLIENT_WITH_SLUG } from './constants-42f710d9.js';
+import { a as ID_OPTION_CURRENT_LOCATION, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY, M as MAPPING_CLIENT_WITH_SLUG } from './constants-3d1898d5.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-3e67c97e.js';
-import { C as Container } from './index-a44d86a6.js';
-import { T as Text } from './index-37937853.js';
-import { C as ChevronDown } from './ChevronDown-fe19fd59.js';
-import { a as __rest } from './tslib.es6-19e36627.js';
+import { M as MediaQueries } from './utils-d418c7c0.js';
+import { C as Container } from './index-1c980507.js';
+import { T as Text } from './index-794f95cb.js';
+import { C as ChevronDown } from './ChevronDown-cf7a70be.js';
+import { a as __rest } from './tslib.es6-f8676dd9.js';
 import { ArrowLeft } from '@hhgtech/icons/arrow';
-import { M as Modal } from './index-0555e5a6.js';
-import { P as PATHS } from './paths-606cfbc9.js';
-import { B as Button } from './index-d42432aa.js';
+import { M as Modal } from './index-5cf34dcc.js';
+import { P as PATHS } from './paths-1cfcec63.js';
+import { B as Button } from './index-5375eb4d.js';
 
 const StyledSearchBarWrapper = styled.div ``;
 const StyleWrapperContainer = styled.div `