@hhgtech/hhg-components 1.29.520-beta-6 → 1.29.520-beta-8

package/build/esm/{index-3c41e938.js → index-0daedcc3.js}

@@ -1,54 +1,54 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-a0abd973.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-350742fb.js';
 import * as React from 'react';
 import React__default, { useContext, useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, S as SiteWideBanner, L as LanguageSwitcher } from './SiteWideBanner-269ef268.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-6cbaadf6.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-78f3f786.js';
-import { f as formatCommunity, a as formatPost } from './dataTransform-4ea3d741.js';
+import { i as isInternalLink, V as VideoItem, S as SiteWideBanner, L as LanguageSwitcher } from './SiteWideBanner-698a2021.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-4228f512.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-6d9e5dc6.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-44a2661f.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import { I as Input, D as DEBOUNCED_TIME } from './index-90513df8.js';
-import './translationsContext-e718046f.js';
-import { L as LOCALE } from './Locale-d48482fc.js';
+import { I as Input, D as DEBOUNCED_TIME } from './index-d687e90b.js';
+import './translationsContext-8fc152c0.js';
+import { L as LOCALE } from './Locale-1688d8d1.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-2e2f6143.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-7ff71353.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx, Flex } from '@mantine/core';
-import { L as Logo$1 } from './index-17b8dbc9.js';
+import { L as Logo$1 } from './index-0dadd193.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-b3e0fb04.js';
-import { C as CommonGAssets } from './index-0891b5cc.js';
-import './index-b976e03f.js';
-import { T as Text } from './index-427bb41a.js';
-import { B as Button } from './index-94b8185f.js';
-import './index-a8b5a5ad.js';
-import './index.styles-ae5f6bc4.js';
+import { V as VideoType } from './index-19f4b219.js';
+import { C as CommonGAssets } from './index-f1617edf.js';
+import './index-3b7e154b.js';
+import { T as Text } from './index-16a3a9e8.js';
+import { B as Button } from './index-36eb9b23.js';
+import './index-687e21d8.js';
+import './index.styles-592d298f.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-75dac26e.js';
-import './index-670e98eb.js';
-import { L as LOCALISED_SLUGS, C as CARE_BASE_PATH } from './constants-ac399363.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-76d0e816.js';
-import { L as LOCALISED_SLUGS$1 } from './constants-eb993a48.js';
-import { I as Indicator$1 } from './index-c5b35262.js';
-import { u as useTranslations } from './index-9acf0748.js';
-import { u as useIsInit, a as useCartCareService } from './useCartCareService-626ebf49.js';
-import { L as LOCALIZED_SLUGS } from './constants-09fb76fe.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-c212a04a.js';
+import './index-9457deb7.js';
+import { L as LOCALISED_SLUGS, C as CARE_BASE_PATH } from './constants-f410f63d.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-1a047767.js';
+import { L as LOCALISED_SLUGS$1 } from './constants-2ee15af0.js';
+import { I as Indicator$1 } from './index-3c1abdff.js';
+import { u as useTranslations } from './index-281f841c.js';
+import { u as useIsInit, a as useCartCareService } from './useCartCareService-fb00b209.js';
+import { L as LOCALIZED_SLUGS } from './constants-c2128ed0.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-ea4c0fa6.js';
-import { H as Heading } from './index-3a87e834.js';
-import { a as getCareSearchUrl, h as hexToRgb, r as rgbToHsb, b as hsbToRgb, Z as Z_INDEX, f as formatCategory, c as formatSpotlightsList, d as checkAvailableSpotlight, e as formatHealthTool, i as formatVideoItem, j as formatSpecialties, k as formatHospital } from './utils-5805f59d.js';
-import { C as Container } from './index-5d7e8dee.js';
+import { B as Button$1 } from './index-164836c6.js';
+import { H as Heading } from './index-ded4cbac.js';
+import { a as getCareSearchUrl, h as hexToRgb, r as rgbToHsb, b as hsbToRgb, Z as Z_INDEX, f as formatCategory, c as formatSpotlightsList, d as checkAvailableSpotlight, e as formatHealthTool, i as formatVideoItem, j as formatSpecialties, k as formatHospital } from './utils-36771e9f.js';
+import { C as Container } from './index-9e8ee695.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-15d631df.js';
+import { U as UserAvatar } from './index-fd8b6123.js';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { C as CartCareButton } from './index-49c45e2d.js';
+import { C as CartCareButton } from './index-c7ceb42b.js';
 import debounce from 'lodash/debounce';
 import { domainLocales } from './constantsDomainLocales.js';
-import { g as getDataWithCache } from './core-783b4d28.js';
+import { g as getDataWithCache } from './core-bd541401.js';
 
 /* eslint-disable prettier/prettier */
 const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none" }, props),
@@ -888,12 +888,12 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
                             : CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
 };
 const CategoriesItem = ({ href, menuItem, activeItem, siteType, onClick, }) => {
-    const { name, thumbnail, link, isNew, id, isMobileAppTool } = menuItem;
+    const { name, thumbnail, link, linkTarget, isNew, id, isMobileAppTool,
+    // Break line
+     } = menuItem;
     const { t } = useTranslations();
     const theme = useMantineTheme();
-    return (React__default.createElement(StyledItem$5, Object.assign({ className: clsx('iconMenu', `itemMenu-${id}`), "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": link, "data-is-heading-category": false, "data-active": id && id === activeItem, "data-is-mobile-tool": isMobileAppTool, href: href }, (!isInternalLink(href) && {
-        target: '_blank',
-    }), { "data-theme": siteType, onClick: onClick }),
+    return (React__default.createElement(StyledItem$5, { className: clsx('iconMenu', `itemMenu-${id}`), "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": link, "data-is-heading-category": false, "data-active": id && id === activeItem, "data-is-mobile-tool": isMobileAppTool, href: href, target: linkTarget || !isInternalLink(href) ? '_blank' : undefined, "data-theme": siteType, onClick: onClick },
         React__default.createElement("div", { className: "icon" },
             React__default.createElement("img", { loading: "lazy", alt: name, src: thumbnail || '/images/avatar.jpg', style: {
                     width: 32,
@@ -2029,7 +2029,7 @@ var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHA
 var img = "data:image/png;base64,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";
   var WhatsAppMessageIcon = img;
 
-const O2O_STICKY_PANEL_HEIGHT = 40;
+const O2O_MENU_DESKTOP_HEIGHT = 40;
 const O2O_MENU_ALLOWED_LOCALES = [
     LOCALE.Vietnam,
     LOCALE.Malaysia,
@@ -2040,15 +2040,17 @@ const getO2OContacts = (t) => {
             name: t('navigation.o2oMenu.consultADoctor'),
             imgUrl: FacebookMessageIcon,
             link: 'http://m.me/hellobacsi',
+            linkTarget: '_blank',
         },
         [LOCALE.Malaysia]: {
             name: t('navigation.o2oMenu.consultADoctor'),
             imgUrl: WhatsAppMessageIcon,
             link: 'https://api.whatsapp.com/send/?phone=601133221899&text=MULA+SEKARANG&type=phone_number&app_absent=0',
+            linkTarget: '_blank',
         },
     };
 };
-const checkIsDisplayO2OMenu = ({ locale, isHomepage, }) => {
+const canDisplayO2ONavigationMenu = ({ locale, isHomepage, }) => {
     return O2O_MENU_ALLOWED_LOCALES.includes(locale) && !isHomepage;
 };
 const getO2OCategoryItems = (t) => {
@@ -2092,14 +2094,19 @@ const getO2OCategoryItems = (t) => {
 const getO2OHamburgerMenuItems = (locale, t) => {
     const contacts = get(getO2OContacts(t), locale);
     const categories = get(getO2OCategoryItems(t), locale) || [];
-    return [...categories, contacts].filter(Boolean).map((item) => ({
-        name: item.name,
-        id: 'other',
-        link: item.link,
-        thumbnail: item.imgUrl,
-        popupType: 'categories',
-        icon: React__default.createElement("img", { width: 24, height: 24, loading: "lazy", src: item.imgUrl }),
-    }));
+    const menuItems = [...categories, contacts].filter(Boolean).map((item) => {
+        const data = {
+            name: item.name,
+            id: 'other',
+            link: item.link,
+            linkTarget: item.linkTarget,
+            thumbnail: item.imgUrl,
+            popupType: 'categories',
+            icon: React__default.createElement("img", { width: 24, height: 24, loading: "lazy", src: item.imgUrl }),
+        };
+        return data;
+    });
+    return menuItems;
 };
 
 const headerStickyPanelVisibilityCss = `
@@ -2108,6 +2115,7 @@ const headerStickyPanelVisibilityCss = `
     z-index: 10;
   }
 
+  // When sub navigation menu is open --> the sticky panel should be under the menu
   &:has(.hhgcomp-navigation-itemnav-headeritem:focus-within) {
     .header-sticky-panel {
       position: relative;
@@ -2117,8 +2125,8 @@ const headerStickyPanelVisibilityCss = `
 `;
 const StyledStickyPanel = styled.div `
   width: 100%;
-  height: ${O2O_STICKY_PANEL_HEIGHT}px;
-  max-height: ${O2O_STICKY_PANEL_HEIGHT}px;
+  height: ${O2O_MENU_DESKTOP_HEIGHT}px;
+  max-height: ${O2O_MENU_DESKTOP_HEIGHT}px;
   background-color: #ffffff;
   border-bottom: 1px solid #0000001a;
 `;
@@ -2469,14 +2477,14 @@ function O2ONavigationMenu() {
             React__default.createElement(StyledCategoryList, null, o2oCategoryItems.map((item) => (React__default.createElement("a", { key: item.name, tabIndex: 0, href: item.link, "data-event-category": "O2O Sticky Menu", "data-event-action": "Click", "data-event-label": item.link },
                 React__default.createElement(StyleButton, { variant: "tertiary", size: "sm", px: 8, leftIcon: React__default.createElement("img", { width: 24, height: 24, src: item.imgUrl }) }, item.name))))),
             React__default.createElement(Flex, { align: "center", justify: "center" },
-                React__default.createElement("a", { href: contact.link, "data-event-category": "O2O Sticky Menu", "data-event-action": "Click", "data-event-label": contact.link },
+                React__default.createElement("a", { href: contact.link, "data-event-category": "O2O Sticky Menu", "data-event-action": "Click", "data-event-label": contact.link, rel: "noopener noreferrer", target: "_blank" },
                     React__default.createElement(StyleButton, { variant: "tertiary", size: "sm", px: 8, styles: { leftIcon: { width: 20, height: 20 } }, leftIcon: React__default.createElement("img", { width: 20, height: 20, src: contact.imgUrl }) }, contact.name))))));
 }
 
 // Use this component for all product context,
 // .. if not --> use `subHead` prop to render specific component for separated product
 function StickyBottomPanel({ locale, isHomepage, }) {
-    const isDisplayO2OMenu = checkIsDisplayO2OMenu({
+    const isDisplayO2OMenu = canDisplayO2ONavigationMenu({
         locale,
         isHomepage,
     });
@@ -2550,7 +2558,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     }, 200), []);
     const getHamburgerMenuItems = () => {
         const isDisplayO2OMenu = enableO2ONavigationMenu
-            ? checkIsDisplayO2OMenu({
+            ? canDisplayO2ONavigationMenu({
                 locale,
                 isHomepage,
             })
@@ -2619,6 +2627,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 borderLeft: '1px solid #E4E8EC',
                             } })),
                         React__default.createElement(CartBadge, { "data-cart-menu": "true", "data-event-category": "Ecommerce", "data-event-action": "Cart Click", "data-event-label": currentUrl, count: cartNumber, locale: locale })))))),
+        !isMobile && enableO2ONavigationMenu && (React__default.createElement(StickyBottomPanel, { locale: locale, isHomepage: isHomepage })),
         isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, { className: "search-wrapper" },
             React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage }))),
         sponsorComponent
@@ -2630,7 +2639,6 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                     isMobile,
                 })
             : null,
-        !isMobile && enableO2ONavigationMenu && (React__default.createElement(StickyBottomPanel, { locale: locale, isHomepage: isHomepage })),
         subHead && subHead));
 };
 const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, isRedirectSearchPage = false, }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
@@ -2654,7 +2662,6 @@ const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBa
         if (window.scrollY <= newHeaderHeight + 200) {
             setHeaderHeight(newHeaderHeight);
             setHeaderBottom(((_d = headerRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().bottom) || headerHeight);
-            // setTimeout(() => debounceSetHeader(), 200)
         }
     }, 200), []);
     useEffect(() => {
@@ -2692,9 +2699,36 @@ const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBa
         }
         return res;
     }, [isMobile, isShowingSiteWideBanner, hasSponsoredBanners, isSponsored]);
+    // ResizeObserver for accurate height observation
+    useEffect(() => {
+        const element = headerRef.current;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            // Fallback for environments without ResizeObserver
+            debounceSetHeader();
+            return;
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === element) {
+                    const newHeight = entry.contentRect.height || entry.target.clientHeight;
+                    if (newHeight > 0) {
+                        setHeaderHeight(newHeight);
+                        setHeaderBottom(element.getBoundingClientRect().bottom || newHeight);
+                    }
+                }
+            }
+        });
+        resizeObserver.observe(element);
+        // Initial measurement
+        debounceSetHeader();
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [debounceSetHeader]);
+    const finalHeaderHeight = headerHeight || defaultHeaderHeight;
     return {
         defaultHeaderHeight,
-        headerHeight: headerHeight || defaultHeaderHeight,
+        headerHeight: finalHeaderHeight,
         headerBottom,
         headerRef,
     };
@@ -2846,40 +2880,54 @@ const StyledContainer = styled.div `
   }
 `;
 
-const getInstantStickyPanelHeight = ({ locale, isHomepage, }) => {
-    const isDisplayO2OMenu = checkIsDisplayO2OMenu({
-        locale,
-        isHomepage,
-    });
-    return isDisplayO2OMenu ? O2O_STICKY_PANEL_HEIGHT : 0;
+const CSS_VAR_DEFAULT_HEADER_HEIGHT = '--default-header-height';
+const CSS_VAR_HEADER_HEIGHT = '--header-height';
+const setRootCSSVariable = (name, value) => {
+    if (typeof document !== 'undefined') {
+        document.documentElement.style.setProperty(name, value);
+    }
+};
+/**
+ * Updates all header-related CSS variables on :root
+ */
+const updateRootHeaderVariables = ({ defaultHeaderHeight, headerHeight, }) => {
+    setRootCSSVariable(CSS_VAR_DEFAULT_HEADER_HEIGHT, `${defaultHeaderHeight}px`);
+    setRootCSSVariable(CSS_VAR_HEADER_HEIGHT, `${headerHeight}px`);
+};
+const useSetGlobalHeaderHeight = ({ headerHeight, defaultHeaderHeight, allowRootVariablesUpdate = true, }) => {
+    const finalHeaderHeight = headerHeight || defaultHeaderHeight;
+    useEffect(() => {
+        if (allowRootVariablesUpdate) {
+            updateRootHeaderVariables({
+                defaultHeaderHeight,
+                headerHeight: finalHeaderHeight,
+            });
+        }
+    }, [defaultHeaderHeight, finalHeaderHeight]);
 };
 
 const _NavigationV2 = (props) => {
     var _a, _b;
-    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, isHomepage, enableO2ONavigationMenu, } = props;
+    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, } = props;
     const services = useNavServices();
     useInsider();
     const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
     const isSponsored = !!sponsorComponent;
     const hasSponsoredBanners = !!((_b = (_a = sponsorComponent === null || sponsorComponent === void 0 ? void 0 : sponsorComponent.props) === null || _a === void 0 ? void 0 : _a.sponsoredBy) === null || _b === void 0 ? void 0 : _b.length);
-    const instantStickyMenuHeight = enableO2ONavigationMenu
-        ? getInstantStickyPanelHeight({
-            locale,
-            isHomepage,
-        })
-        : 0;
     const { headerRef, defaultHeaderHeight, headerHeight, headerBottom } = useHeaderHeight({
         isShowingSiteWideBanner,
         isSponsored,
         hasSponsoredBanners,
         isMobile,
     });
+    useSetGlobalHeaderHeight({
+        headerHeight,
+        defaultHeaderHeight,
+    });
     return (React__default.createElement(StyledContainer, { id: "navigation-v2", style: {
             '--default-header-height': defaultHeaderHeight + 'px',
             '--header-height': `calc(${headerHeight}px - var(--amp-site-wide-closed), 64px)`,
             '--header-bottom': headerBottom + 'px',
-            '--header-nav-bottom': `calc(${headerHeight}px - ${instantStickyMenuHeight}px)`,
-            '--header-instant-sticky-menu-height': instantStickyMenuHeight + 'px',
         }, className: className },
         React__default.createElement("section", { ref: headerRef },
             React__default.createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, projectType: projectType, languageMenu: React__default.createElement(LanguageSwitcher, { languageOptions: languageOptions, locale: locale }), customClasses: customClasses }))));

package/build/esm/{index-2294a959.js → index-0e83839d.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-b3e0fb04.js';
+import './index-19f4b219.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-0891b5cc.js';
+import { C as CommonGAssets } from './index-f1617edf.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-391aa9a0.js';
-import { T as Text } from './index-841a525e.js';
-import { L as LOCALE } from './Locale-d48482fc.js';
-import { f as CentralCarousel } from './index-90513df8.js';
+import { I as ImageWrap } from './index-dca896e9.js';
+import { T as Text } from './index-bd71aae7.js';
+import { L as LOCALE } from './Locale-1688d8d1.js';
+import { f as CentralCarousel } from './index-d687e90b.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-ea4c0fa6.js → index-164836c6.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-94b8185f.js';
+import { B as Button$1 } from './index-36eb9b23.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-427bb41a.js → index-16a3a9e8.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, useMantineTheme, Text as Text$1 } from '@mantine/core';
-import { a as GlobalTextStyle, C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-a8b5a5ad.js';
+import { a as GlobalTextStyle, C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-687e21d8.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/{index-b3e0fb04.js → index-19f4b219.js}

@@ -1,4 +1,4 @@
-import { L as LOCALE } from './Locale-d48482fc.js';
+import { L as LOCALE } from './Locale-1688d8d1.js';
 
 var Gender;
 (function (Gender) {

package/build/esm/{index-6f2e94af.js → index-2004960a.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-94b8185f.js';
+import { B as Button } from './index-36eb9b23.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-60260945.js → index-204db6c6.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { C as Container } from './index-5d7e8dee.js';
-import { T as Text } from './index-427bb41a.js';
+import { C as Container } from './index-9e8ee695.js';
+import { T as Text } from './index-16a3a9e8.js';
 
 const StyledTextDivider = styled.div `
   background-color: var(--neutral50);

package/build/esm/{index-9b96dae1.js → index-22075ff1.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-3f4a1a12.js';
-import { S as Spinner } from './Spinner-5bcaa7eb.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-334eb0d4.js';
+import { S as Spinner } from './Spinner-2e8c097a.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);

package/build/esm/{index-38fccaed.js → index-23ba56d9.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default, { createContext, useContext } from 'react';
 import { clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import './index-90513df8.js';
-import { D as DatePicker } from './index-3c964b90.js';
-import { T as Text } from './index-427bb41a.js';
-import './index-94b8185f.js';
-import './index-a8b5a5ad.js';
-import './index.styles-ae5f6bc4.js';
-import { u as useTranslations } from './index-9acf0748.js';
+import './index-d687e90b.js';
+import { D as DatePicker } from './index-b018ca79.js';
+import { T as Text } from './index-16a3a9e8.js';
+import './index-36eb9b23.js';
+import './index-687e21d8.js';
+import './index.styles-592d298f.js';
+import { u as useTranslations } from './index-281f841c.js';
 import '@mantine/hooks';
-import './index-b976e03f.js';
-import './utils-75dac26e.js';
-import './index-670e98eb.js';
-import { C as CardWrapperContext } from './context-3bccd273.js';
-import { H as HealthToolFormWrapper } from './index-ec848122.js';
-import { G as GenderOptionControl } from './index-10757c31.js';
+import './index-3b7e154b.js';
+import './utils-c212a04a.js';
+import './index-9457deb7.js';
+import { C as CardWrapperContext } from './context-13298862.js';
+import { H as HealthToolFormWrapper } from './index-61122940.js';
+import { G as GenderOptionControl } from './index-ec3f89f8.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyVaccineFormContext = createContext({});

package/build/esm/{index-7bacc26a.js → index-24b26415.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-a0abd973.js';
+import { a as __awaiter } from './tslib.es6-350742fb.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-3a87e834.js';
-import { T as Text } from './index-427bb41a.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-24227673.js';
+import { H as Heading } from './index-ded4cbac.js';
+import { T as Text } from './index-16a3a9e8.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-355023b3.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-eb993a48.js';
+import { D as DEFAULT_IMG } from './constants-2ee15af0.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-a6b08c4f.js → index-24c86689.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.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-8e2b461f.js';
-import { L as LOCALE } from './Locale-d48482fc.js';
+import { L as LastPeriod } from './LastPeriod-4392c2c4.js';
+import { L as LOCALE } from './Locale-1688d8d1.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-90513df8.js';
-import { D as DatePicker } from './index-3c964b90.js';
-import { T as Text } from './index-427bb41a.js';
-import './index-94b8185f.js';
-import './index-a8b5a5ad.js';
-import './index.styles-ae5f6bc4.js';
-import { u as useTranslations } from './index-9acf0748.js';
+import { R as Radio, I as Input, S as Select } from './index-d687e90b.js';
+import { D as DatePicker } from './index-b018ca79.js';
+import { T as Text } from './index-16a3a9e8.js';
+import './index-36eb9b23.js';
+import './index-687e21d8.js';
+import './index.styles-592d298f.js';
+import { u as useTranslations } from './index-281f841c.js';
 import '@mantine/hooks';
-import './index-b976e03f.js';
-import './utils-75dac26e.js';
-import './index-670e98eb.js';
-import { H as HealthToolFormWrapper } from './index-ec848122.js';
+import './index-3b7e154b.js';
+import './utils-c212a04a.js';
+import './index-9457deb7.js';
+import { H as HealthToolFormWrapper } from './index-61122940.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-3bccd273.js';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-6cbaadf6.js';
+import { C as CardWrapperContext } from './context-13298862.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-4228f512.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {

package/build/esm/{index-9acf0748.js → index-281f841c.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-e718046f.js';
+import { T as TranslationsContext } from './translationsContext-8fc152c0.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-ecca3644.js → index-2967a4c4.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-5d7e8dee.js';
+import { C as Container } from './index-9e8ee695.js';
 import dayjs from 'dayjs';
-import './index-6cbaadf6.js';
-import './index-90513df8.js';
+import './index-4228f512.js';
+import './index-d687e90b.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-b3e0fb04.js';
-import './index-0891b5cc.js';
-import './index-b976e03f.js';
-import { T as Text } from './index-427bb41a.js';
-import './index-94b8185f.js';
-import './index-a8b5a5ad.js';
-import './index.styles-ae5f6bc4.js';
-import './translationsContext-e718046f.js';
+import './index-19f4b219.js';
+import './index-f1617edf.js';
+import './index-3b7e154b.js';
+import { T as Text } from './index-16a3a9e8.js';
+import './index-36eb9b23.js';
+import './index-687e21d8.js';
+import './index.styles-592d298f.js';
+import './translationsContext-8fc152c0.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-75dac26e.js';
-import './index-670e98eb.js';
-import { u as useScreenSize } from './index-391aa9a0.js';
+import { M as MediaQueries } from './utils-c212a04a.js';
+import './index-9457deb7.js';
+import { u as useScreenSize } from './index-dca896e9.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-17b8dbc9.js';
-import { M as MarryBabyText } from './index-6549ee71.js';
+import { L as Logo } from './index-0dadd193.js';
+import { M as MarryBabyText } from './index-30313d13.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-749834d0.js → index-2deb57e1.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-427bb41a.js';
-import { u as useTranslations } from './index-9acf0748.js';
+import { T as Text } from './index-16a3a9e8.js';
+import { u as useTranslations } from './index-281f841c.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-6549ee71.js → index-30313d13.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-a0abd973.js';
+import { _ as __rest } from './tslib.es6-350742fb.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-a2de0e70.js → index-30881805.js}

@@ -1,9 +1,9 @@
-import { a as __awaiter } from './tslib.es6-a0abd973.js';
+import { a as __awaiter } from './tslib.es6-350742fb.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-78f3f786.js';
-import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-6cbaadf6.js';
+import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-6d9e5dc6.js';
+import { L as LOCALE_SPECS, k as BEARER_REFRESH_TOKEN_COOKIE } from './index-4228f512.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { L as LOCALE } from './Locale-d48482fc.js';
+import { L as LOCALE } from './Locale-1688d8d1.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const SSO_V2_PATHS = {

package/build/esm/{index-390ef88d.js → index-30a2c2ab.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-aa359000.js';
+import { u as useScrollbarSize } from './useScrollbarSize-31007d94.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-75dac26e.js';
+import { M as MediaQueries } from './utils-c212a04a.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';