@hhgtech/hhg-components 1.29.88 → 1.29.90

package/build/esm/{index-11bc6557.js → index-391aad5b.js}

@@ -1,9 +1,9 @@
 import React__default, { useState } from 'react';
-import { F as Flag } from './index-a2704991.js';
+import { F as Flag } from './index-21c80677.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-7d97103f.js';
-import { C as CommonGAssets } from './index-24f2f569.js';
+import { T as Text } from './index-5d2f2783.js';
+import { C as CommonGAssets } from './index-d4eef69b.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',

package/build/esm/{index-63d30402.js → index-405b11d3.js}

@@ -1,22 +1,23 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { c as Input } from './index-a2704991.js';
-import { D as DatePicker } from './index-ef2b1e44.js';
-import { T as Text } from './index-7d97103f.js';
-import './index-2f06b1d8.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
+import { I as Input } from './index-21c80677.js';
+import { D as DatePicker } from './index-b87e6e0b.js';
+import { T as Text } from './index-5d2f2783.js';
+import './index-51179764.js';
+import './index.styles-793c0b30.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
 import '@mantine/hooks';
-import './index-5a81cbdd.js';
-import './index-24f2f569.js';
-import './utils-cee25689.js';
-import './useMantineLocale-2ece6eac.js';
-import './index-69ca7b6a.js';
-import './other-811b7d93.js';
-import { I as INPUT_RANGE } from './constants-247d5eb0.js';
-import { H as HealthToolFormWrapper } from './index-d10d5d1f.js';
-import { G as GenderOptionControl } from './index-478546e8.js';
+import './index-e7128232.js';
+import './index-d4eef69b.js';
+import './utils-1dbd61fa.js';
+import './useMantineLocale-bef42461.js';
+import './index-d5543323.js';
+import './other-f8b0155f.js';
+import { I as INPUT_RANGE } from './constants-785ee28c.js';
+import { H as HealthToolFormWrapper } from './index-5f04e701.js';
+import { G as GenderOptionControl } from './index-f8cc91fb.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});

package/build/esm/{index-d3c3615e.js → index-42286f3e.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-2f06b1d8.js';
+import { B as Button$1 } from './index-51179764.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-1f944c2d.js → index-44ced5ce.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useRef, useMemo, useEffect, Fragment, createContext } from 'react';
-import { T as Text } from './index-7d97103f.js';
+import { T as Text } from './index-5d2f2783.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-cee25689.js';
-import { R as Radio$1 } from './index-a2704991.js';
-import { T as Text$1 } from './index-b927d85a.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-1dbd61fa.js';
+import { R as Radio$1 } from './index-21c80677.js';
+import { T as Text$1 } from './index-1778704d.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import flattenChildren from 'react-keyed-flatten-children';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-140ea208.js → index-4d512cd9.js}

@@ -1,23 +1,24 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-e6e0e96c.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
-import { C as CommonGAssets } from './index-24f2f569.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-f9614464.js';
-import { G as GenderOptionControl } from './index-478546e8.js';
-import { c as Input, S as Select } from './index-a2704991.js';
-import { D as DatePicker } from './index-ef2b1e44.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-41375a2b.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
+import { C as CommonGAssets } from './index-d4eef69b.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-7628355c.js';
+import { G as GenderOptionControl } from './index-f8cc91fb.js';
+import { I as Input, S as Select } from './index-21c80677.js';
+import { D as DatePicker } from './index-b87e6e0b.js';
 import '@mantine/core';
-import './index-7d97103f.js';
-import './index-2f06b1d8.js';
+import './index-5d2f2783.js';
+import './index-51179764.js';
+import './index.styles-793c0b30.js';
 import '@mantine/hooks';
-import './index-5a81cbdd.js';
-import './utils-cee25689.js';
-import './useMantineLocale-2ece6eac.js';
-import './index-69ca7b6a.js';
-import './other-811b7d93.js';
-import { H as HealthToolFormWrapper } from './index-d10d5d1f.js';
+import './index-e7128232.js';
+import './utils-1dbd61fa.js';
+import './useMantineLocale-bef42461.js';
+import './index-d5543323.js';
+import './other-f8b0155f.js';
+import { H as HealthToolFormWrapper } from './index-5f04e701.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});

package/build/esm/{index-2f06b1d8.js → index-51179764.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default from 'react';
 import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
 

package/build/esm/{index-fcf9a2ce.js → index-52f07e54.js}

@@ -1,25 +1,26 @@
 import React__default from 'react';
-import { C as Container } from './index-fcd9b927.js';
+import { C as Container } from './index-0b230567.js';
 import dayjs from 'dayjs';
-import './index-69ca7b6a.js';
-import { u as useScreenSize } from './index-a2704991.js';
+import './index-d5543323.js';
+import './index-21c80677.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-5a81cbdd.js';
-import './index-24f2f569.js';
-import './useMantineLocale-2ece6eac.js';
-import { T as Text } from './index-7d97103f.js';
-import './index-2f06b1d8.js';
-import './translationsContext-0cbb21e6.js';
+import './index-e7128232.js';
+import './index-d4eef69b.js';
+import './useMantineLocale-bef42461.js';
+import { T as Text } from './index-5d2f2783.js';
+import './index-51179764.js';
+import { u as useScreenSize } from './index.styles-793c0b30.js';
+import './translationsContext-982b80f4.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-cee25689.js';
-import './other-811b7d93.js';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
+import './other-f8b0155f.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-29676661.js';
-import { M as MarryBabyText } from './index-05075062.js';
+import { L as Logo } from './index-8002ffd2.js';
+import { M as MarryBabyText } from './index-b013dd09.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-b4cab951.js → index-54d714a2.js}

@@ -1,24 +1,25 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-3970c414.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-e6e0e96c.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-f9614464.js';
-import { G as GenderOptionControl } from './index-478546e8.js';
-import { c as Input } from './index-a2704991.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-41375a2b.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-7628355c.js';
+import { G as GenderOptionControl } from './index-f8cc91fb.js';
+import { I as Input } from './index-21c80677.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-69ca7b6a.js';
-import './index-5a81cbdd.js';
-import './index-24f2f569.js';
-import './useMantineLocale-2ece6eac.js';
-import { T as Text } from './index-7d97103f.js';
-import './index-2f06b1d8.js';
+import './index-d5543323.js';
+import './index-e7128232.js';
+import './index-d4eef69b.js';
+import './useMantineLocale-bef42461.js';
+import { T as Text } from './index-5d2f2783.js';
+import './index-51179764.js';
 import { theme } from './miscTheme.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
+import './index.styles-793c0b30.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
 import '@mantine/hooks';
-import './utils-cee25689.js';
-import './other-811b7d93.js';
-import { H as HealthToolFormWrapper } from './index-d10d5d1f.js';
+import './utils-1dbd61fa.js';
+import './other-f8b0155f.js';
+import { H as HealthToolFormWrapper } from './index-5f04e701.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 

package/build/esm/index-5bd382e3.js

@@ -0,0 +1,281 @@
+import { a as __awaiter } from './tslib.es6-fd8cab49.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { User } from '@hhgtech/icons/core';
+import { a as Avatar } from './index-21c80677.js';
+import { B as Button } from './index-51179764.js';
+import { T as Text } from './index-5d2f2783.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
+import './index-e7128232.js';
+import { C as CommonGAssets } from './index-d4eef69b.js';
+import { a as normalizeLinkSlash } from './normalizeLink-136a636d.js';
+import { theme } from './miscTheme.js';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
+import { setDefaultClass } from './miscDefaultClassWrapper.js';
+import { ProfileNavigation } from './profileNavigation.js';
+import { NavigationLogoutPopup } from './navigationLogoutPopup.js';
+import { L as LOCALE } from './Locale-ecfc005f.js';
+
+const useCSSFocusPopupHelper = (configs) => {
+    const { allowBgScroll } = configs || {};
+    const ref = useRef();
+    return {
+        containerRef: ref,
+        onContainerFocus: () => {
+            if (!allowBgScroll)
+                document.documentElement.style.overflow = 'hidden';
+        },
+        onContainerBlur: () => {
+            if (!allowBgScroll)
+                document.documentElement.style.overflow = '';
+        },
+        onButtonMouseDown: (e) => {
+            // this close popup when click, run after REact init
+            if (ref.current &&
+                (document.activeElement === ref.current ||
+                    ref.current.contains(document.activeElement))) {
+                ref.current.blur();
+                document.activeElement.blur();
+                e.preventDefault();
+            }
+        },
+        onClose: () => {
+            if (ref.current &&
+                (document.activeElement === ref.current ||
+                    ref.current.contains(document.activeElement))) {
+                ref.current.blur();
+                document.activeElement.blur();
+            }
+        },
+    };
+};
+
+const StyledPopup = setDefaultClass(styled.div `
+    position: absolute;
+    right: 0;
+    transition: all 0.5s ease-in-out;
+    overflow-y: auto;
+
+    &[data-open='true'] {
+      z-index: 200;
+      top: 120%;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &[data-open='false'] {
+      display: none;
+    }
+
+    .popup-content {
+      z-index: 111;
+      height: 100%;
+      border: 1px solid #0000001a;
+      border-radius: 16px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    /* min-height: 415px; */
+    ${MediaQueries.mbUp} {
+      width: 320px;
+    }
+    ${MediaQueries.mbDown} {
+      position: fixed;
+      left: 0;
+      width: 100%;
+      padding-bottom: 70px;
+    }
+  `, 'hhgcomp-navprofilebutton-popup');
+const StyledPopupWrapper = setDefaultClass(styled.div `
+    position: fixed;
+    z-index: 150;
+    top: var(--header-bottom, 56px);
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+
+    ${MediaQueries.mbUp} {
+      background-color: transparent;
+      &[data-type='welcome'] {
+        background: rgba(38, 38, 38, 0.3);
+      }
+      &[data-type='due-date'] {
+        background: rgba(38, 38, 38, 0.3);
+      }
+    }
+
+    ${MediaQueries.mbDown} {
+      background: rgba(38, 38, 38, 0.3);
+    }
+
+    &[data-type='welcome'] {
+      top: 0;
+    }
+
+    &[data-open='false'] {
+      display: none;
+    }
+  `, 'hhgcomp-navprofilebutton-popupwrapper');
+const StyledAvatar = styled.div `
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+
+  img {
+    border-radius: 50%;
+  }
+
+  .avatar {
+    width: 36px;
+    height: 36px;
+    object-fit: cover;
+  }
+
+  .avatar-default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${theme.colors.secondaryBase};
+    border-radius: 50%;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+  }
+`;
+const StyledImageWrapper = styled.div `
+  display: inline-flex;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  .user-close-icon {
+    display: none;
+  }
+  &:focus-within {
+    .user-close-icon {
+      display: block;
+    }
+    .user-avatar {
+      display: none;
+    }
+    ${StyledPopup.classSelector} {
+      z-index: 200;
+      top: 120%;
+      opacity: 1;
+      visibility: visible;
+      display: initial;
+      ${MediaQueries.mbDown} {
+        top: 100%;
+      }
+    }
+    ${StyledPopupWrapper.classSelector} {
+      display: initial;
+    }
+  }
+`;
+const StyledLoggedOutAnchor = styled.a `
+  display: inline-flex;
+  .login-btn[data-color='tertiary'][data-size='md'] {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  .mobile-only {
+    ${MediaQueries.mbUp} {
+      display: none;
+    }
+  }
+  .login-btn {
+    display: none;
+    ${MediaQueries.mbUp} {
+      display: block;
+    }
+  }
+`;
+
+const ProfilePopup = ({ isOpen, userInfo, closePopup, siteType = 'helloSites', dispatchLogout, }) => {
+    const handleClickLogout = () => {
+        if (dispatchLogout) {
+            dispatchLogout();
+            closePopup();
+        }
+    };
+    return (React__default.createElement(StyledPopup, { "data-open": isOpen },
+        React__default.createElement("div", { className: "popup-content" },
+            React__default.createElement(ProfileNavigation, { siteType: siteType, onLogout: handleClickLogout, userInfo: userInfo }))));
+};
+
+const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, currentUrl, isMinifyLogin, onLogout, style, isLoading, locale, }) => {
+    const { t } = useTranslations();
+    const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false);
+    const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
+    const [init, setInit] = useState(false);
+    useEffect(() => {
+        setInit(true);
+    }, []);
+    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper();
+    if (isLoading)
+        return React__default.createElement(Button, { size: "sm", color: "transparent", loading: true });
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledImageWrapper, { ref: containerRef, style: style, tabIndex: 0, onBlur: onContainerBlur, onFocus: () => {
+                var _a;
+                onContainerFocus();
+                const popup = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#desktop-sticky-header .hhgcomp-navprofilebutton-popup');
+                if (popup) {
+                    const bound = popup.getBoundingClientRect();
+                    const top = bound.top;
+                    const maxHeight = `calc(100vh - ${top}px)`;
+                    popup.setAttribute('style', `max-height: ${maxHeight};`);
+                }
+            } },
+            React__default.createElement("div", { onMouseDown: onButtonMouseDown },
+                React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "user-close-icon" },
+                    React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" })),
+                React__default.createElement(Avatar, { size: 36, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
+                        ? theme.mbColors.pink
+                        : theme.colors.secondaryBase, placeholderText: name && name.length ? name[0].toUpperCase() : 'A' })),
+            React__default.createElement(ProfilePopup, { dispatchLogout: () => {
+                    onClose();
+                    setIsLogoutConfirmOpen(true);
+                }, isOpen: false, closePopup: onClose, siteType: siteType, userInfo: userInfo })),
+        React__default.createElement(NavigationLogoutPopup, { openLogoutPopup: isLogoutConfirmOpen, onCloseHandler: () => {
+                document.body.classList.toggle('noscroll', false);
+                setIsLogoutConfirmOpen(false);
+            }, siteType: siteType, onLogoutHandler: () => __awaiter(void 0, void 0, void 0, function* () {
+                setIsLogoutConfirmOpen(false);
+                document.body.classList.toggle('noscroll', false);
+                yield onLogout();
+            }) }))) : (React__default.createElement(StyledLoggedOutAnchor, { style: Object.assign({ textDecoration: 'none' }, style), "data-event-category": "Sign Up", "data-event-action": "Button Click", "data-event-label": currentUrl, href: !init
+            ? normalizeLinkSlash(`${SSO_URL}?returnUrl=${currentUrl}`)
+            : undefined, "data-site-type": siteType, onClick: onLoginClick }, isMinifyLogin ? (React__default.createElement(StyledAvatar, null,
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('lock.png'), className: "avatar", loading: "lazy", alt: "avatar" }))) : (
+    // LOGIC:
+    // - DEsktop: always show button
+    // - Mobile: show button only for helloSites, show text for MarryBaby
+    React__default.createElement(React__default.Fragment, null,
+        siteType === 'helloSites' &&
+            (locale === LOCALE.Indonesia ||
+                locale === LOCALE.PhilippinesTagalog ||
+                locale === LOCALE.PhilippinesEnglish ? (React__default.createElement("img", { className: "mobile-only", src: CommonGAssets.getAssetPath('login.svg'), style: {
+                    cursor: 'pointer',
+                    height: 24,
+                    width: 24,
+                } })) : (React__default.createElement(Button, { className: "mobile-only", size: "sm", leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }), sx: {
+                    paddingLeft: '8px',
+                    paddingRight: '12px',
+                } }, t('navigation.loginJoin')))),
+        siteType === 'marryBaby' && (React__default.createElement("div", { className: "mobile-only", style: {
+                paddingLeft: 16,
+            } },
+            React__default.createElement(Text, { size: "p3", color: theme.mbColors.pink }, t('navigation.loginJoin')))),
+        siteType === 'marryBaby' ? (React__default.createElement(Button, { className: "login-btn", size: "md", leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default.createElement(Button, { className: "login-btn", size: "md", leftIcon: React__default.createElement(User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
+};
+
+export { NavigationProfileButton as N, useCSSFocusPopupHelper as u };

package/build/esm/{index-7d97103f.js → index-5d2f2783.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './other-811b7d93.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './other-f8b0155f.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-d10d5d1f.js → index-5f04e701.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-7d97103f.js';
-import { B as Button } from './index-2f06b1d8.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
+import { T as Text } from './index-5d2f2783.js';
+import { B as Button } from './index-51179764.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-04146795.js → index-670afcce.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-cee25689.js';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `
@@ -89,13 +89,15 @@ const StyledPopupWrapper = styled.div `
   }
 `;
 
-const Popup = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', enableAnimation = true, }) => {
+const Popup = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', enableAnimation = true, disableClickOutside = false, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(StyledPopup, { "data-open": isOpen, "data-type": type, "data-animation": enableAnimation },
             React__default.createElement("div", { className: `${className || ''} popup-content` },
                 !!closeIcon && (React__default.createElement("div", { className: "close-button", onClick: onClose }, closeIcon)),
                 children)),
-        React__default.createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: onClose })));
+        React__default.createElement(StyledPopupWrapper, { "data-open": isOpen, onClick: () => {
+                !disableClickOutside && onClose();
+            } })));
 };
 
 export { Popup as P };

package/build/esm/{index-17115a3b.js → index-6ce0d042.js}

@@ -1,21 +1,22 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-fcd2b5ec.js';
-import { c as Input } from './index-a2704991.js';
-import { D as DatePicker } from './index-ef2b1e44.js';
-import { T as Text } from './index-7d97103f.js';
-import './index-2f06b1d8.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
+import { L as LastPeriod } from './LastPeriod-cd2e1a56.js';
+import { I as Input } from './index-21c80677.js';
+import { D as DatePicker } from './index-b87e6e0b.js';
+import { T as Text } from './index-5d2f2783.js';
+import './index-51179764.js';
+import './index.styles-793c0b30.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
 import '@mantine/hooks';
-import './index-5a81cbdd.js';
-import './index-24f2f569.js';
-import './utils-cee25689.js';
-import './useMantineLocale-2ece6eac.js';
-import './index-69ca7b6a.js';
-import './other-811b7d93.js';
-import { H as HealthToolFormWrapper } from './index-d10d5d1f.js';
+import './index-e7128232.js';
+import './index-d4eef69b.js';
+import './utils-1dbd61fa.js';
+import './useMantineLocale-bef42461.js';
+import './index-d5543323.js';
+import './other-f8b0155f.js';
+import { H as HealthToolFormWrapper } from './index-5f04e701.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {

package/build/esm/{index-e5797070.js → index-6ebc4e40.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-cee25689.js';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
 import { theme } from './miscTheme.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-f42f0c66.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-918a026b.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-fbe76c43.js → index-714d2892.js}

@@ -1,12 +1,13 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-5a81cbdd.js';
+import './index-e7128232.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-24f2f569.js';
+import { C as CommonGAssets } from './index-d4eef69b.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap, d as CentralCarousel } from './index-a2704991.js';
-import { T as Text } from './index-b927d85a.js';
-import { L as LOCALE } from './Locale-81beb37e.js';
+import { I as ImageWrap } from './index-d034201a.js';
+import { T as Text } from './index-1778704d.js';
+import { L as LOCALE } from './Locale-ecfc005f.js';
+import { c as CentralCarousel } from './index-21c80677.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;