@hhgtech/hhg-components 1.28.86 → 1.28.89

package/build/esm/{index-d0888d0f.js → index-a757de1f.js}

@@ -1,43 +1,42 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-9d8cd796.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-c6ca5150.js';
 import React__default, { useState, useMemo, useRef, Fragment, useEffect, useContext, useCallback } from 'react';
-import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-5354718e.js';
+import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-9fca458c.js';
 import styled, { css } from 'styled-components';
-import { t as theme } from './theme-9446fcad.js';
-import { T as Text } from './index-c6bfa0bc.js';
-import { C as CommonGAssets } from './index-46aa9e12.js';
-import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-fa525018.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-119538c0.js';
-import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-9e7b6555.js';
-import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-132c9dba.js';
-import { L as Logo } from './index-65421853.js';
-import { u as useTranslations } from './useTranslations-fcdf9edd.js';
+import { t as theme } from './theme-d3fa6e0d.js';
+import { T as Text } from './index-9953c742.js';
+import { C as CommonGAssets } from './index-5876f65d.js';
+import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-f26dc08a.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-f549d1bf.js';
+import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-0a0924df.js';
+import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-e7d07cb0.js';
+import { L as Logo } from './index-bf3a2f61.js';
+import { u as useTranslations } from './useTranslations-ac93a9ff.js';
 import throttle from 'lodash/throttle';
-import { createStyles, rem, Box, Indicator, Portal } from '@mantine/core';
+import { createStyles, Box, Indicator, Portal } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE } from './Subot-def34324.js';
-import './translationsContext-a3cdc7ca.js';
+import { L as LOCALE } from './Subot-db4f37fe.js';
+import './translationsContext-1c13c477.js';
 import formatString from 'string-format';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-740c9196.js';
-import { L as LOCALISED_SLUGS } from './constants-c1a4b8e0.js';
-import { I as Icon } from './index-332d983d.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-eefaddcc.js';
+import { L as LOCALISED_SLUGS } from './constants-4c26ce25.js';
 import { User } from '@hhgtech/icons/core';
-import { t as getDefaultClassWrapper } from './index.styles-8fdb4f9b.js';
-import { C as ChevronDown } from './ChevronDown-683a4df9.js';
-import { B as Button } from './index-2eb701e3.js';
-import { l as domainLocalesMarryBaby } from './utils-76a3077b.js';
-import { a as LOCALIZED_SLUGS } from './constants-cdc41777.js';
-import { H as Heading } from './index-fb0bc04e.js';
-import { I as Indicator$1 } from './index-7e86bd11.js';
-import { u as useIsInit } from './useIsInit-6f6be51c.js';
-import './utils-13d20489.js';
-import './index.styled-37e6a61c.js';
-import './index-6f2a88ae.js';
+import { t as getDefaultClassWrapper } from './index.styles-1d5bf8b1.js';
+import { C as ChevronDown } from './ChevronDown-066cf838.js';
+import { B as Button } from './index-f10977ca.js';
+import { l as domainLocalesMarryBaby } from './utils-33cd0168.js';
+import { a as LOCALIZED_SLUGS } from './constants-af46fc71.js';
+import { H as Heading } from './index-db94347c.js';
+import { I as Indicator$1 } from './index-b9e2b795.js';
+import { u as useIsInit } from './useIsInit-af876717.js';
+import './utils-9bc0b9b8.js';
+import './index.styled-89514be1.js';
+import './index-0dfe4172.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { C as Container } from './index-f791e727.js';
+import { C as Container } from './index-9dd212ca.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-624959c3.js';
+import { g as getDataWithCache } from './core-82b411c4.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',
@@ -189,9 +188,6 @@ var useStyles = createStyles(() => {
         root: {
             textDecoration: 'none',
         },
-        indicatorRoot: {
-            marginRight: rem(10),
-        },
         iconText: {
             color: '#fff',
         },
@@ -206,10 +202,9 @@ const CartBadge = (_a) => {
         classNames,
     });
     return typeof count !== 'undefined' ? (React__default.createElement(Box, Object.assign({ component: "a", href: getEcomUrl({ path: 'CART', locale }), className: cx(classes.root, className) }, boxProps),
-        React__default.createElement(Indicator, { classNames: {
-                root: classes.indicatorRoot,
-            }, withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default.createElement(Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
-            React__default.createElement(Icon.Cart, { size: 24 })))) : null;
+        React__default.createElement(Indicator, { withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default.createElement(Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
+            React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                React__default.createElement("path", { d: "M5.308 21.5q-.748 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278V8.308q0-.75.53-1.278.53-.53 1.278-.53H7.5q0-1.873 1.313-3.187Q10.127 2 12 2t3.187 1.313T16.5 6.5h2.192q.749 0 1.278.53.53.53.53 1.278v11.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h13.384a.3.3 0 0 0 .212-.096.3.3 0 0 0 .096-.212V8.308a.3.3 0 0 0-.096-.212.3.3 0 0 0-.212-.096H5.308a.3.3 0 0 0-.212.096.3.3 0 0 0-.096.212v11.384q0 .116.096.212a.3.3 0 0 0 .212.096M9 6.5h6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5m2.985 7q1.695 0 3.047-1.148 1.35-1.148 1.335-2.606a.74.74 0 0 0-.207-.528.7.7 0 0 0-.527-.218.7.7 0 0 0-.471.182 1 1 0 0 0-.295.506 2.8 2.8 0 0 1-1.036 1.665 2.9 2.9 0 0 1-1.846.647 2.93 2.93 0 0 1-1.854-.647A2.73 2.73 0 0 1 9.1 9.688q-.086-.34-.278-.514A.66.66 0 0 0 8.367 9a.72.72 0 0 0-.534.218.72.72 0 0 0-.216.528q0 1.457 1.336 2.606 1.335 1.148 3.032 1.148", fill: "#2D87F3" }))))) : null;
 };
 
 const StyledDisplayWrapper = styled.div `
@@ -281,12 +276,9 @@ const _StyledPopup = styled.div `
     z-index: 111;
     height: 100%;
     border: 1px solid #0000001a;
-    ${MediaQueries.mbDown} {
-      > div {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
+    border-radius: 16px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 
   /* min-height: 415px; */
@@ -335,8 +327,8 @@ const _StyledPopupWrapper = styled.div `
 const StyledPopupWrapperClass = 'hhgcomp-navprofilebutton-popupwrapper';
 getDefaultClassWrapper(_StyledPopupWrapper, StyledPopupWrapperClass);
 const StyledAvatar = styled.div `
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   cursor: pointer;
 
   img {
@@ -344,8 +336,8 @@ const StyledAvatar = styled.div `
   }
 
   .avatar {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     object-fit: cover;
   }
 
@@ -363,8 +355,8 @@ const StyledAvatar = styled.div `
 const StyledImageWrapper$1 = styled.div `
   display: inline-flex;
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -954,7 +946,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
             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: 40, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
+                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: () => {
@@ -991,7 +983,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
                 paddingLeft: 16,
             } },
             React__default.createElement(Text, { size: "p3", color: theme.mbColors.pink }, t('navigation.loginJoin')))),
-        React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))))));
+        siteType === 'marryBaby' ? (React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
 };
 
 var styles$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
@@ -1311,30 +1303,21 @@ const StyledViewMore$1 = styled.a `
   }
 `;
 
-var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","careIconContainer":"gB4rp89","scale":"EDlp5Zf"};
+var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
 
-const CareIcon = () => {
-    return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-        React__default.createElement("path", { d: "M13.475 21.5q-2.5 0-4.25-1.75t-1.75-4.25v-.55q-2.025-.25-3.387-1.8T2.725 9.5V4.65a.87.87 0 0 1 .262-.638.87.87 0 0 1 .638-.262h2.1V3.5a.73.73 0 0 1 .75-.75q.325 0 .538.212a.73.73 0 0 1 .212.538v2a.73.73 0 0 1-.75.75.726.726 0 0 1-.75-.75v-.25h-1.5V9.5q0 1.65 1.175 2.825T8.225 13.5t2.825-1.175T12.225 9.5V5.25h-1.5v.25a.73.73 0 0 1-.75.75.726.726 0 0 1-.75-.75v-2a.73.73 0 0 1 .75-.75q.325 0 .538.212a.73.73 0 0 1 .212.538v.25h2.1a.87.87 0 0 1 .638.262.87.87 0 0 1 .262.638V9.5q0 2.1-1.362 3.65t-3.388 1.8v.55q0 1.875 1.313 3.188Q11.6 20 13.475 20t3.188-1.312q1.312-1.313 1.312-3.188v-1.625a2.6 2.6 0 0 1-1.287-.913 2.4 2.4 0 0 1-.513-1.512q0-1.075.75-1.825t1.8-.75q1.075 0 1.825.75t.75 1.825q0 .85-.512 1.512-.513.663-1.313.913V15.5q0 2.5-1.75 4.25t-4.25 1.75", fill: "#2D87F3", strokeWidth: 0 })));
-};
 const ItemMenu = ({ item, menu }) => {
-    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper({
+    const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
         allowBgScroll: true,
     });
     const isInit = useIsInit();
     if (!item.popupType && item.link) {
         return (React__default.createElement(NewWrapper, { isNew: item.isNew },
-            React__default.createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''} ${item.id === 'care' ? 'force-focus' : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
-                React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton },
-                    item.id === 'care' && (React__default.createElement("div", { className: styles$1.careIconContainer },
-                        React__default.createElement(CareIcon, null))),
-                    item.name))));
+            React__default.createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
+                React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton }, item.name))));
     }
     return (React__default.createElement(NewWrapper, { isNew: item.isNew },
-        React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''} ${item.id === 'care' ? 'force-focus' : ''}`, tabIndex: 0, key: item.id, onBlur: onContainerBlur, onFocus: onContainerFocus, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
+        React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
             React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$1.menuButton },
-                item.id === 'care' && (React__default.createElement("a", { className: styles$1.careIconContainer, href: normalizeLinkSlash(item.link + '/') },
-                    React__default.createElement(CareIcon, null))),
                 item.name,
                 item.popupType && (React__default.createElement("div", { className: styles$1.menuIconWrapper },
                     React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
@@ -2865,6 +2848,69 @@ const MenuHealthToolsList = ({ locale, onClose, isOpen, spotlightHealthTools = [
         React__default.createElement(ToolSpotlights, { spotlightHealthTools: spotlightHealthTools, hrefViewMore: hrefViewMore })));
 };
 
+const ItemNavButton = ({ item, color = 'blue' }) => {
+    const [Lottie, setLottie] = useState();
+    const [iconJson, setIconJson] = useState();
+    const { locale, ssrMenuContent: { categories, healthTools, care, together }, } = useContext(NavigationContext);
+    const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
+        allowBgScroll: true,
+    });
+    useEffect(() => {
+        setTimeout(() => {
+            if (item.id === 'care' || item.id === 'ecom') {
+                import('react-lottie').then((lottie) => {
+                    setLottie(() => lottie.default);
+                });
+            }
+            if (item.id === 'care') {
+                import('./doctor-da03d5ce.js').then((data) => {
+                    if (data === null || data === void 0 ? void 0 : data.default)
+                        setIconJson(() => data.default);
+                });
+            }
+            else if (item.id === 'ecom') {
+                import('./cart-ea90eef2.js').then((data) => {
+                    if (data === null || data === void 0 ? void 0 : data.default)
+                        setIconJson(() => data.default);
+                });
+            }
+        }, 500);
+    }, [item.id]);
+    const hasIcon = item.id === 'care' || item.id === 'ecom';
+    const linkOnly = !item.popupType && !!item.link;
+    const Tag = linkOnly ? 'a' : 'div';
+    const buttonStyle = color === 'gray'
+        ? {
+            border: '1px solid #E4E8EC',
+            background: '#F7F9FC',
+        }
+        : {
+            border: '1px solid #BCDEFF',
+            background: '#E3F2FF',
+        };
+    return (React__default.createElement(Tag, { tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.itemNavButton, ref: containerRef, onMouseDown: onButtonMouseDown },
+        React__default.createElement(Button$1, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default.createElement(Lottie, { options: {
+                    loop: true,
+                    autoplay: true,
+                    animationData: iconJson,
+                }, height: 28, width: 28 })) : (React__default.createElement("a", { href: normalizeLinkSlash(item.link + '/') },
+                React__default.createElement(Lottie, { options: {
+                        loop: true,
+                        autoplay: true,
+                        animationData: iconJson,
+                    }, height: 28, width: 28 })))) : hasIcon ? (React__default.createElement("div", { style: {
+                    width: 28,
+                    height: 28,
+                } })) : null, styles: {
+                leftIcon: {
+                    marginRight: 4,
+                },
+            }, style: Object.assign(Object.assign({}, buttonStyle), { padding: '6px 8px 6px 8px', color: '#262626', height: 'unset' }), size: "sm", rightIcon: item.popupType ? (React__default.createElement("div", { className: styles$1.menuIconWrapper },
+                React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
+                    React__default.createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" })))) : (React__default.createElement("div", null)) }, item.name),
+        item.popupType === 'categories' ? (React__default.createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights, onClose: onClose })) : item.popupType === 'tools' ? (React__default.createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, onClose: onClose })) : item.popupType === 'together' ? (React__default.createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights, onClose: onClose })) : item.popupType === 'care' ? (React__default.createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights, onClose: onClose })) : null));
+};
+
 const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, }) => {
     var _a;
     const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, onBookingClick, currentUrl, onLoginClick, cartNumber, 
@@ -2929,6 +2975,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             scrolling();
     }, [isMobile]);
     const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
+    const ecomNavItem = menuItems.find((m) => m.id === 'ecom');
+    const careNavItem = menuItems.find((m) => m.id === 'care');
     return (React__default.createElement(StyledHeaderWrapper, { "data-site-type": siteType, "data-sponsored": isSponsored, "data-sitewide-banner-shown": isShowingSiteWideBanner, "data-header-type": "home", "data-collapsed": isCollapsed, "data-is-displayed": true, id: "site-header", ref: headerRef },
         sitewideBanner,
         React__default.createElement(StyledHeader, { "data-site-type": siteType },
@@ -2943,13 +2991,23 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                             }, type: logoType, badge: locale === 'id-ID' && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('sehat-badge.png'), width: "56", height: "23", loading: "lazy" })), dateForSeasonal: new Date(), locale: locale, key: typeof window !== 'undefined' ? 'client' : 'server' })))),
                 !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType }))))),
             React__default.createElement(StyledRightGroup, { "data-site-type": siteType },
-                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType })) : (React__default.createElement(NavigationMenu, { menuItems: menuItems })))),
+                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType })) : (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })))),
                 React__default.createElement(StyledProfileNavGroup, null,
-                    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 }),
-                    enableNavCareBooking && (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp" },
-                        React__default.createElement(BookingButton, { careUrlFe: statics.CARE_URL_FE, currentUrl: currentUrl, btnName: t('login.booking'), onCareHeaderClick: onBookingClick }))),
+                    !isMobile && (React__default.createElement(React__default.Fragment, null,
+                        ecomNavItem ? React__default.createElement(ItemNavButton, { item: ecomNavItem }) : null,
+                        careNavItem ? (React__default.createElement(ItemNavButton, { item: careNavItem, color: "gray" })) : null,
+                        enableNavCareBooking && (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp" },
+                            React__default.createElement(BookingButton, { careUrlFe: statics.CARE_URL_FE, currentUrl: currentUrl, btnName: t('login.booking'), onCareHeaderClick: onBookingClick }))))),
                     languageMenu,
-                    React__default.createElement(NavigationProfileButton, { userInfo: userInfo, siteType: siteType, onLoginClick: onLoginClick || goToLogin, SSO_URL: normalizeLink(statics.SSO_URL), currentUrl: currentUrl, onLogout: onLogout, isLoading: isUserLoading, locale: locale })))),
+                    React__default.createElement(NavigationProfileButton, { userInfo: userInfo, siteType: siteType, onLoginClick: onLoginClick || goToLogin, SSO_URL: normalizeLink(statics.SSO_URL), currentUrl: currentUrl, onLogout: onLogout, isLoading: isUserLoading, locale: locale }),
+                    cartNumber !== undefined && (React__default.createElement(React__default.Fragment, null,
+                        !isMobile && (React__default.createElement("hr", { style: {
+                                height: 20,
+                                width: 0,
+                                border: 'none',
+                                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 })))))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
                 ? sponsorComponent

package/build/esm/{index-7e86bd11.js → index-b9e2b795.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-9446fcad.js';
+import { t as theme } from './theme-d3fa6e0d.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-65421853.js → index-bf3a2f61.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Subot-def34324.js';
-import { C as CommonGAssets } from './index-46aa9e12.js';
-import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-13d20489.js';
-import { I as ImageWrap } from './index-5354718e.js';
+import { L as LOCALE } from './Subot-db4f37fe.js';
+import { C as CommonGAssets } from './index-5876f65d.js';
+import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-9bc0b9b8.js';
+import { I as ImageWrap } from './index-9fca458c.js';
 
 const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
     const [seasonalChecks, setSeasonalChecks] = useState({

package/build/esm/{index-8f5d5ae9.js → index-cf039789.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
-import { S as StyledHeading, a as StyledText } from './index.styled-37e6a61c.js';
+import { S as StyledHeading, a as StyledText } from './index.styled-89514be1.js';
 
 const MarryBabyHeading = (_a) => {
     var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);

package/build/esm/{index-7268f163.js → index-d8903783.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
 import { Modal as Modal$1, CloseButton } from '@mantine/core';
-import { C as CommonGAssets } from './index-46aa9e12.js';
-import { i as useStyles } from './index-5354718e.js';
-import { T as Text } from './index-c6bfa0bc.js';
+import { C as CommonGAssets } from './index-5876f65d.js';
+import { i as useStyles } from './index-9fca458c.js';
+import { T as Text } from './index-9953c742.js';
 
 const Modal = (_a) => {
     var { title, styles } = _a, rest = __rest(_a, ["title", "styles"]);

package/build/esm/{index-fe18d67d.js → index-d8f5b856.js}

@@ -1,13 +1,13 @@
 import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
-import { v as StyledDivider, w as useStyles } from './index.styles-8fdb4f9b.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-9d8cd796.js';
-import { u as useTranslations } from './useTranslations-fcdf9edd.js';
-import { B as Button } from './index-5354718e.js';
-import { P as PATHS } from './paths-2d1d97d3.js';
-import { a as LOCALIZED_SLUGS } from './constants-cdc41777.js';
-import { d as domainLocales } from './index-fa525018.js';
-import { i as callApi, j as getCarePath } from './utils-76a3077b.js';
-import { i as isProduction } from './isProduction-0823170a.js';
+import { v as StyledDivider, w as useStyles } from './index.styles-1d5bf8b1.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-c6ca5150.js';
+import { u as useTranslations } from './useTranslations-ac93a9ff.js';
+import { B as Button } from './index-9fca458c.js';
+import { P as PATHS } from './paths-608ec6d6.js';
+import { a as LOCALIZED_SLUGS } from './constants-af46fc71.js';
+import { d as domainLocales } from './index-f26dc08a.js';
+import { i as callApi, j as getCarePath } from './utils-33cd0168.js';
+import { i as isProduction } from './isProduction-23fdd658.js';
 
 /**
  * @deprecated Consider to use mantine

package/build/esm/{index-fb0bc04e.js → index-db94347c.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-c6bfa0bc.js';
+import { T as Text } from './index-9953c742.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'

package/build/esm/{index-132c9dba.js → index-e7d07cb0.js}

@@ -1,9 +1,9 @@
 import React__default, { useContext, useState } from 'react';
-import { M as MediaQueries } from './utils-740c9196.js';
+import { M as MediaQueries } from './utils-eefaddcc.js';
 import styled from 'styled-components';
-import { t as theme } from './theme-9446fcad.js';
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
-import { T as TogetherComponentGlobalContext } from './utils-76a3077b.js';
+import { t as theme } from './theme-d3fa6e0d.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
+import { T as TogetherComponentGlobalContext } from './utils-33cd0168.js';
 
 const StyledPopup = styled.div `
   position: fixed;

package/build/esm/{index-9186594c.js → index-f03549e0.js}

@@ -1,17 +1,17 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
-import './index-5354718e.js';
+import './index-9fca458c.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-fa525018.js';
-import './Subot-def34324.js';
-import './index-46aa9e12.js';
-import { T as Text$1 } from './index-c6bfa0bc.js';
-import './theme-9446fcad.js';
-import './translationsContext-a3cdc7ca.js';
+import './index-f26dc08a.js';
+import './Subot-db4f37fe.js';
+import './index-5876f65d.js';
+import { T as Text$1 } from './index-9953c742.js';
+import './theme-d3fa6e0d.js';
+import './translationsContext-1c13c477.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-740c9196.js';
+import './utils-eefaddcc.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-2eb701e3.js → index-f10977ca.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-9d8cd796.js';
+import { _ as __rest } from './tslib.es6-c6ca5150.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-5354718e.js';
+import { B as Button$1 } from './index-9fca458c.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-fa525018.js → index-f26dc08a.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './Subot-def34324.js';
-import { i as isProduction } from './isProduction-0823170a.js';
+import { L as LOCALE } from './Subot-db4f37fe.js';
+import { i as isProduction } from './isProduction-23fdd658.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/esm/{index-20995a2d.js → index-ffc9e72f.js}

@@ -1,66 +1,66 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, forwardRef, createContext, useContext } from 'react';
-import { T as Text } from './index-c6bfa0bc.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$4, T as TextArea, t as getDefaultClassWrapper, P as PureInput } from './index.styles-8fdb4f9b.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-740c9196.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-5354718e.js';
-import { T as Text$1 } from './index-9186594c.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-9d8cd796.js';
-import { C as CommonGAssets } from './index-46aa9e12.js';
-import { H as Heading } from './index-fb0bc04e.js';
-import { t as theme } from './theme-9446fcad.js';
+import { T as Text } from './index-9953c742.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$4, T as TextArea, t as getDefaultClassWrapper, P as PureInput } from './index.styles-1d5bf8b1.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-eefaddcc.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-9fca458c.js';
+import { T as Text$1 } from './index-f03549e0.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-c6ca5150.js';
+import { C as CommonGAssets } from './index-5876f65d.js';
+import { H as Heading } from './index-db94347c.js';
+import { t as theme } from './theme-d3fa6e0d.js';
 import { Box, Radio as Radio$2, Flex, rem, Card, Group, createStyles, Stack, getStylesRef, useMantineTheme, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-fa525018.js';
-import { G as Gender, L as LOCALE } from './Subot-def34324.js';
-import './translationsContext-a3cdc7ca.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-f26dc08a.js';
+import { G as Gender, L as LOCALE } from './Subot-db4f37fe.js';
+import './translationsContext-1c13c477.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-d0888d0f.js';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-a757de1f.js';
 import styled, { keyframes, css } from 'styled-components';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-65421853.js';
-import { B as Button } from './index-2eb701e3.js';
-import { I as Input } from './index-106cde5e.js';
+import { L as Logo } from './index-bf3a2f61.js';
+import { B as Button } from './index-f10977ca.js';
+import { I as Input } from './index-1ec7bbde.js';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-0823170a.js';
-import { u as useTranslations } from './useTranslations-fcdf9edd.js';
+import { i as isProduction } from './isProduction-23fdd658.js';
+import { u as useTranslations } from './useTranslations-ac93a9ff.js';
 import { CalendarMB, Calendar } from '@hhgtech/icons/other';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { D as DATE_FORMAT } from './types-7cbb7b8e.js';
-import { Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-76a3077b.js';
-import { D as DatePicker } from './index-ec25e5e8.js';
-import { M as MarryBabyText } from './index-8f5d5ae9.js';
-import { S as Slider } from './index-e2db9d2f.js';
-import { D as Dropdown } from './index-35d9f1fe.js';
-import { C as Container } from './index-f791e727.js';
+import { D as DATE_FORMAT } from './types-deed19fb.js';
+import { Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-33cd0168.js';
+import { D as DatePicker } from './index-5f441340.js';
+import { M as MarryBabyText } from './index-cf039789.js';
+import { S as Slider } from './index-74b68904.js';
+import { D as Dropdown } from './index-635ba61a.js';
+import { C as Container } from './index-9dd212ca.js';
 import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-2a3b5488.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-c89ebecf.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { B as BabyGrowthGender, D as Drawer } from './index-2dc99627.js';
-import { L as Label } from './constants-cdc41777.js';
-import { f as formatUserProfileUrl } from './index-132c9dba.js';
-import './utils-13d20489.js';
-import './index.styled-37e6a61c.js';
-import './index-6f2a88ae.js';
-import { a as useOutsideClick } from './useOutsideClick-2d71c96a.js';
+import { B as BabyGrowthGender, D as Drawer } from './index-3aed1b80.js';
+import { L as Label } from './constants-af46fc71.js';
+import { f as formatUserProfileUrl } from './index-e7d07cb0.js';
+import './utils-9bc0b9b8.js';
+import './index.styled-89514be1.js';
+import './index-0dfe4172.js';
+import { a as useOutsideClick } from './useOutsideClick-bde18914.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-86b19f8c.js';
+import { g as getSocialList } from './getSocialList-a4ce6615.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-9e7b6555.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-0a0924df.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-332d983d.js';
+import { I as Icon } from './index-60aa94a1.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-7268f163.js';
+import { M as Modal } from './index-d8903783.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-e155c826.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-119538c0.js';
+import { g as getCookie } from './cookieHelper-aff01920.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-f549d1bf.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};