@hhgtech/hhg-components 1.29.523-beta-2 → 1.29.523-beta-3

package/build/esm/{index-0e0a72f9.js → index-9eab062c.js}

@@ -1,54 +1,54 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-8a99c435.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-10b43ce2.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-ccc85fbb.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-9bb94409.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-37633db8.js';
-import { f as formatCommunity, a as formatPost } from './dataTransform-de5bf9e2.js';
+import { i as isInternalLink, V as VideoItem, S as SiteWideBanner, L as LanguageSwitcher } from './SiteWideBanner-312e276d.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-5d76c2bb.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-67cb5840.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-bfbcbe4a.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import { I as Input, D as DEBOUNCED_TIME } from './index-69a9774d.js';
-import './translationsContext-a89e95ee.js';
-import { L as LOCALE } from './Locale-8228c4ce.js';
+import { I as Input, D as DEBOUNCED_TIME } from './index-75013e8c.js';
+import './translationsContext-cef3e0ab.js';
+import { L as LOCALE } from './Locale-85589b2b.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-23497d93.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-f519cc06.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-9ae1cd65.js';
+import { L as Logo$1 } from './index-79784012.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-83d5c9d8.js';
-import { C as CommonGAssets } from './index-60c8557f.js';
-import './index-2862b6a4.js';
-import { T as Text } from './index-7ae1a66e.js';
-import { B as Button } from './index-caab512d.js';
-import './index-0909a338.js';
-import './index.styles-8a43e0a1.js';
+import { V as VideoType } from './index-13c31075.js';
+import { C as CommonGAssets } from './index-18c9e4ba.js';
+import './index-f631de01.js';
+import { T as Text } from './index-58a9d196.js';
+import { B as Button } from './index-de4d4903.js';
+import './index-82c1621e.js';
+import './index.styles-e5f6d5b2.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-254ccd04.js';
-import './index-806d8c73.js';
-import { L as LOCALISED_SLUGS, C as CARE_BASE_PATH } from './constants-d982f10a.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-2ce2003e.js';
-import { L as LOCALISED_SLUGS$1 } from './constants-07ca8872.js';
-import { I as Indicator$1 } from './index-37616353.js';
-import { u as useTranslations } from './index-9bec6c0a.js';
-import { u as useIsInit, a as useCartCareService } from './useCartCareService-d286815a.js';
-import { L as LOCALIZED_SLUGS } from './constants-dcad8b16.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-11c3806f.js';
+import './index-ff6784e6.js';
+import { L as LOCALISED_SLUGS, C as CARE_BASE_PATH } from './constants-016c0fd5.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-c96304c5.js';
+import { L as LOCALISED_SLUGS$1 } from './constants-02cff657.js';
+import { I as Indicator$1 } from './index-1535fed9.js';
+import { u as useTranslations } from './index-2e16cd84.js';
+import { u as useIsInit, a as useCartCareService } from './useCartCareService-6235daa2.js';
+import { L as LOCALIZED_SLUGS } from './constants-bd1fa7b7.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-f57dd313.js';
-import { H as Heading } from './index-150be86c.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-ecf4447d.js';
-import { C as Container } from './index-4ec07dda.js';
+import { B as Button$1 } from './index-8160fbf8.js';
+import { H as Heading } from './index-d65315ba.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-a20b73cd.js';
+import { C as Container } from './index-56962804.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-ac2ee0fe.js';
+import { U as UserAvatar } from './index-5d65a332.js';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { C as CartCareButton } from './index-874a3c63.js';
+import { C as CartCareButton } from './index-0b666f60.js';
 import debounce from 'lodash/debounce';
 import { domainLocales } from './constantsDomainLocales.js';
-import { g as getDataWithCache } from './core-e45c6d6a.js';
+import { g as getDataWithCache } from './core-9b4c4a01.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, linkTarget, isNew, id, isMobileAppTool,
-    // Break line
-     } = menuItem;
+    const { name, thumbnail, link, isNew, id, isMobileAppTool } = menuItem;
     const { t } = useTranslations();
     const theme = useMantineTheme();
-    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 },
+    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 }),
         React__default.createElement("div", { className: "icon" },
             React__default.createElement("img", { loading: "lazy", alt: name, src: thumbnail || '/images/avatar.jpg', style: {
                     width: 32,
@@ -914,11 +914,11 @@ const CategoriesItem = ({ href, menuItem, activeItem, siteType, onClick, }) => {
         React__default.createElement(StyledIconNav, { className: "arrow-icon" },
             React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
 };
-const ExtraCategories = ({ menuItems, siteType, onClick, }) => {
+const ExtraCategories = ({ menuItems, siteType, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(StyledCategoryDivider, null),
         React__default.createElement(StyledCategoryList$1, null, menuItems.map((item, index) => {
-            return (React__default.createElement(CategoriesItem, { key: index, menuItem: item, href: item.link, siteType: siteType, onClick: onClick }));
+            return (React__default.createElement(CategoriesItem, { key: index, menuItem: item, href: item.link, siteType: siteType }));
         }))));
 };
 
@@ -1990,7 +1990,7 @@ const MenuServiceList = ({ closePopup, menuItems = [], extraMenuItems = [], proj
             React__default.createElement(Categories, { UrlFE: statics.HOME_PAGE_URL, menuItems: menuItems, headingTitle: t('home.navigator.menuItem.healthCategories'), titleBtnViewMore: (extraMenuItems === null || extraMenuItems === void 0 ? void 0 : extraMenuItems.length)
                     ? undefined
                     : t('home.navigator.menuItem.allCategories'), onClosePopup: closePopup, activeItem: activeMenuService }),
-            !!(extraMenuItems === null || extraMenuItems === void 0 ? void 0 : extraMenuItems.length) && (React__default.createElement(ExtraCategories, { menuItems: extraMenuItems, siteType: siteType, onClick: closePopup })),
+            !!(extraMenuItems === null || extraMenuItems === void 0 ? void 0 : extraMenuItems.length) && (React__default.createElement(ExtraCategories, { menuItems: extraMenuItems, siteType: siteType })),
             activeMenuService === 'categories' && (React__default.createElement(CategorySpotlights, { spotlightsList: (categories === null || categories === void 0 ? void 0 : categories.spotlights) || [], hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })),
             activeMenuService === 'tools' && (React__default.createElement(ToolSpotlights, { spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}` })),
             activeMenuService === 'care' && (React__default.createElement(CareSpotlights, { spotlights: care === null || care === void 0 ? void 0 : care.spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_b = LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b.SPECIALTIES}` })),
@@ -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_MENU_DESKTOP_HEIGHT = 40;
+const O2O_STICKY_PANEL_HEIGHT = 40;
 const O2O_MENU_ALLOWED_LOCALES = [
     LOCALE.Vietnam,
     LOCALE.Malaysia,
@@ -2040,17 +2040,15 @@ 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 canDisplayO2ONavigationMenu = ({ locale, isHomepage, }) => {
+const checkIsDisplayO2OMenu = ({ locale, isHomepage, }) => {
     return O2O_MENU_ALLOWED_LOCALES.includes(locale) && !isHomepage;
 };
 const getO2OCategoryItems = (t) => {
@@ -2094,19 +2092,14 @@ const getO2OCategoryItems = (t) => {
 const getO2OHamburgerMenuItems = (locale, t) => {
     const contacts = get(getO2OContacts(t), locale);
     const categories = get(getO2OCategoryItems(t), locale) || [];
-    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;
+    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 headerStickyPanelVisibilityCss = `
@@ -2115,7 +2108,6 @@ 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;
@@ -2125,8 +2117,8 @@ const headerStickyPanelVisibilityCss = `
 `;
 const StyledStickyPanel = styled.div `
   width: 100%;
-  height: ${O2O_MENU_DESKTOP_HEIGHT}px;
-  max-height: ${O2O_MENU_DESKTOP_HEIGHT}px;
+  height: ${O2O_STICKY_PANEL_HEIGHT}px;
+  max-height: ${O2O_STICKY_PANEL_HEIGHT}px;
   background-color: #ffffff;
   border-bottom: 1px solid #0000001a;
 `;
@@ -2477,14 +2469,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, rel: "noopener noreferrer", target: "_blank" },
+                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(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 = canDisplayO2ONavigationMenu({
+    const isDisplayO2OMenu = checkIsDisplayO2OMenu({
         locale,
         isHomepage,
     });
@@ -2558,7 +2550,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     }, 200), []);
     const getHamburgerMenuItems = () => {
         const isDisplayO2OMenu = enableO2ONavigationMenu
-            ? canDisplayO2ONavigationMenu({
+            ? checkIsDisplayO2OMenu({
                 locale,
                 isHomepage,
             })
@@ -2627,7 +2619,6 @@ 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
@@ -2639,6 +2630,7 @@ 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' : ''}` },
@@ -2662,6 +2654,7 @@ 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(() => {
@@ -2699,36 +2692,9 @@ 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: finalHeaderHeight,
+        headerHeight: headerHeight || defaultHeaderHeight,
         headerBottom,
         headerRef,
     };
@@ -2880,54 +2846,40 @@ const StyledContainer = styled.div `
   }
 `;
 
-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 getInstantStickyPanelHeight = ({ locale, isHomepage, }) => {
+    const isDisplayO2OMenu = checkIsDisplayO2OMenu({
+        locale,
+        isHomepage,
+    });
+    return isDisplayO2OMenu ? O2O_STICKY_PANEL_HEIGHT : 0;
 };
 
 const _NavigationV2 = (props) => {
     var _a, _b;
-    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, } = props;
+    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, isHomepage, enableO2ONavigationMenu, } = 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-31354098.js → index-a02ec526.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-9bec6c0a.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-254ccd04.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-e50f43e4.js';
-import { I as Icon } from './index-8c1615f0.js';
-import { _ as __rest } from './tslib.es6-8a99c435.js';
-import { U as UserAvatar } from './index-ac2ee0fe.js';
-import { I as ImageWrap, u as useScreenSize } from './index-3798c9ce.js';
-import './index-9bb94409.js';
-import { C as CommonGAssets } from './index-60c8557f.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-d5891e05.js';
-import { B as Button } from './index-f57dd313.js';
-import { T as Text } from './index-7ae1a66e.js';
+import { u as useTranslations } from './index-2e16cd84.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-11c3806f.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-b71df3ac.js';
+import { I as Icon } from './index-cb18c7cd.js';
+import { _ as __rest } from './tslib.es6-10b43ce2.js';
+import { U as UserAvatar } from './index-5d65a332.js';
+import { I as ImageWrap, u as useScreenSize } from './index-2fd90efb.js';
+import './index-5d76c2bb.js';
+import { C as CommonGAssets } from './index-18c9e4ba.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-cff63fce.js';
+import { B as Button } from './index-8160fbf8.js';
+import { T as Text } from './index-58a9d196.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-db327246.js';
-import { H as Heading } from './index-150be86c.js';
-import { M as Modal } from './index-9c7aa3cd.js';
+import { L as Loading } from './index-c9e0cc59.js';
+import { H as Heading } from './index-d65315ba.js';
+import { M as Modal } from './index-bc2dd152.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -911,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-0e8bf9db.js').then((module) => {
+                import('./index-25088636.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }

package/build/esm/{index-02671e46.js → index-a189e639.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-8a99c435.js';
+import { _ as __rest } from './tslib.es6-10b43ce2.js';
 import React__default from 'react';
 import { MantineProvider as MantineProvider$1 } from '@mantine/core';
-import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-2862b6a4.js';
-import { C as CustomStylesType, T as TemplateProvider } from './index-0909a338.js';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-f631de01.js';
+import { C as CustomStylesType, T as TemplateProvider } from './index-82c1621e.js';
 
 const MantineProvider = (_a) => {
     var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);

package/build/esm/{index-6311a0b1.js → index-a1c99b9f.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-150be86c.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-254ccd04.js';
-import { u as useTranslations } from './index-9bec6c0a.js';
-import { T as TogetherComponentGlobalContext } from './utils-d5891e05.js';
+import { H as Heading } from './index-d65315ba.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-11c3806f.js';
+import { u as useTranslations } from './index-2e16cd84.js';
+import { T as TogetherComponentGlobalContext } from './utils-cff63fce.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-7ae1a66e.js';
+import { T as Text } from './index-58a9d196.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-8a99c435.js';
+import { _ as __rest } from './tslib.es6-10b43ce2.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-b08f602f.js → index-a2553f5d.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-8a99c435.js';
+import { _ as __rest } from './tslib.es6-10b43ce2.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-83d5c9d8.js';
+import './index-13c31075.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-60c8557f.js';
+import { C as CommonGAssets } from './index-18c9e4ba.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-3798c9ce.js';
-import { T as Text } from './index-73cd2894.js';
-import { L as LOCALE } from './Locale-8228c4ce.js';
-import { f as CentralCarousel } from './index-69a9774d.js';
+import { I as ImageWrap } from './index-2fd90efb.js';
+import { T as Text } from './index-e2fd2cf4.js';
+import { L as LOCALE } from './Locale-85589b2b.js';
+import { f as CentralCarousel } from './index-75013e8c.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-b837604d.js → index-ac54d21d.js}

@@ -1,48 +1,48 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-8a99c435.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-10b43ce2.js';
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-da12e361.js';
-import { u as useTranslations } from './index-9bec6c0a.js';
+import { D as Dropdown } from './index-4fe6e2d7.js';
+import { u as useTranslations } from './index-2e16cd84.js';
 import innertext from 'innertext';
 import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-69a9774d.js';
+import { I as Input$1 } from './index-75013e8c.js';
 import { useMantineTheme, SegmentedControl, Popover } from '@mantine/core';
 import '@mantine/dates';
-import './index-9bb94409.js';
-import './index-83d5c9d8.js';
-import './index-60c8557f.js';
-import './index-2862b6a4.js';
-import { T as Text } from './index-7ae1a66e.js';
-import { B as Button } from './index-caab512d.js';
-import './index-0909a338.js';
-import './index.styles-8a43e0a1.js';
+import './index-5d76c2bb.js';
+import './index-13c31075.js';
+import './index-18c9e4ba.js';
+import './index-f631de01.js';
+import { T as Text } from './index-58a9d196.js';
+import { B as Button } from './index-de4d4903.js';
+import './index-82c1621e.js';
+import './index.styles-e5f6d5b2.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-254ccd04.js';
-import './index-806d8c73.js';
-import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-a6b3fa6f.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-d5891e05.js';
+import { M as MediaQueries } from './utils-11c3806f.js';
+import './index-ff6784e6.js';
+import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-2b80355e.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-cff63fce.js';
 import styled from '@emotion/styled';
-import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-de5bf9e2.js';
-import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-07ca8872.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-50868581.js';
-import { C as CardAuthor } from './index-31354098.js';
-import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-85df8129.js';
-import { I as Input } from './index-7448b404.js';
+import { a as formatPost, f as formatCommunity, c as formatTopic } from './dataTransform-bfbcbe4a.js';
+import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-02cff657.js';
+import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-ba32fdc3.js';
+import { C as CardAuthor } from './index-a02ec526.js';
+import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-18710783.js';
+import { I as Input } from './index-b755aafa.js';
 import debounce from 'lodash/debounce';
 import ContentEditable from 'react-contenteditable';
 import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-21418e2e.js';
-import { C as CardLink } from './index-61bd85e0.js';
-import { B as BtnChoice } from './index-eb4e9bc1.js';
-import { L as LOCALE } from './Locale-8228c4ce.js';
+import { L as Loading } from './index-ccdd33e9.js';
+import { C as CardLink } from './index-bd7bb47d.js';
+import { B as BtnChoice } from './index-5d98477b.js';
+import { L as LOCALE } from './Locale-85589b2b.js';
 import * as ReactDOM from 'react-dom';
-import { L as Loading$1 } from './index-db327246.js';
-import { b as IconArrowLeft } from './index-6311a0b1.js';
-import { B as Button$1 } from './index-f57dd313.js';
+import { L as Loading$1 } from './index-c9e0cc59.js';
+import { b as IconArrowLeft } from './index-a1c99b9f.js';
+import { B as Button$1 } from './index-8160fbf8.js';
 import { getCookie } from './miscCookieHelper.js';
-import { a as useUniqueId } from './useUniqueId-e0a82109.js';
-import { U as UserAvatar } from './index-ac2ee0fe.js';
-import { P as PopoverMenu } from './index-1f5a441f.js';
+import { a as useUniqueId } from './useUniqueId-82e67ba5.js';
+import { U as UserAvatar } from './index-5d65a332.js';
+import { P as PopoverMenu } from './index-98183f10.js';
 import { Close, Check } from '@hhgtech/icons/core';
 
 const StyledCreateNewPost$1 = styled.div `

package/build/esm/{index-5f868d85.js → index-af9e94d0.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-8a99c435.js';
+import { _ as __rest } from './tslib.es6-10b43ce2.js';
 import React__default, { createContext, useContext, useMemo } from 'react';
 import { useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-4ac309c7.js';
-import { u as useTranslations } from './index-9bec6c0a.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-07ca8872.js';
-import { I as Input } from './index-69a9774d.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-668ba0b1.js';
+import { u as useTranslations } from './index-2e16cd84.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-02cff657.js';
+import { I as Input } from './index-75013e8c.js';
 import '@mantine/dates';
-import './index-9bb94409.js';
-import './index-83d5c9d8.js';
-import './index-60c8557f.js';
-import './index-2862b6a4.js';
-import { T as Text } from './index-7ae1a66e.js';
-import './index-caab512d.js';
-import './index-0909a338.js';
-import './index.styles-8a43e0a1.js';
+import './index-5d76c2bb.js';
+import './index-13c31075.js';
+import './index-18c9e4ba.js';
+import './index-f631de01.js';
+import { T as Text } from './index-58a9d196.js';
+import './index-de4d4903.js';
+import './index-82c1621e.js';
+import './index.styles-e5f6d5b2.js';
 import '@mantine/hooks';
-import './utils-254ccd04.js';
-import './index-806d8c73.js';
-import { C as CardWrapperContext } from './context-97598b5e.js';
-import { H as HealthToolFormWrapper } from './index-25fe4260.js';
-import { I as INPUT_RANGE } from './constants-fa2544a4.js';
+import './utils-11c3806f.js';
+import './index-ff6784e6.js';
+import { C as CardWrapperContext } from './context-085a8fdd.js';
+import { H as HealthToolFormWrapper } from './index-30d5c078.js';
+import { I as INPUT_RANGE } from './constants-2077a3a3.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const PWGFormContext = createContext({});

package/build/esm/{index-b66d05a6.js → index-b00e2095.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-264d4299.js';
+import { u as useScrollbarSize } from './useScrollbarSize-9d3de823.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-254ccd04.js';
+import { M as MediaQueries } from './utils-11c3806f.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';