@hhgtech/hhg-components 1.29.387 → 1.29.388-beta-2

package/build/esm/{index-4731bfda.js → index-0de9d03c.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-d43b98ec.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e400d322.js';
 import React__default, { useMemo, useEffect, useContext, useState, useRef, useCallback } from 'react';
-import { V as VideoType } from './index-0e536e9a.js';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-b103631b.js';
-import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as VIDEO_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-fbe69519.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-441b1fa5.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-ad8757f8.js';
-import { Close, Download } from '@hhgtech/icons/core';
+import { V as VideoType } from './index-2524cb69.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-f018d924.js';
+import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as VIDEO_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-28b4a515.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-3cc2633f.js';
+import { a as formatCommunity, b as formatPost } from './dataTransform-26f74cf1.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme } from '@mantine/core';
-import { L as Logo } from './index-34d4358a.js';
-import { u as useTranslations } from './index-67a509a3.js';
+import { L as Logo$1 } from './index-969fce25.js';
 import throttle from 'lodash/throttle';
-import { I as Input } from './index-23920678.js';
+import { I as Input } from './index-a0ef41e7.js';
 import '@mantine/dates';
-import { C as CommonGAssets } from './index-849b60a4.js';
-import './useMantineLocale-e898d879.js';
-import { T as Text } from './index-a41001e5.js';
-import { B as Button$1 } from './index-00c9caac.js';
-import './index.styles-8a5a8379.js';
-import './translationsContext-98c686c8.js';
+import { C as CommonGAssets } from './index-1128849f.js';
+import './useMantineLocale-f35261c4.js';
+import { T as Text } from './index-0bfb4dbd.js';
+import { B as Button$1 } from './index-f4a5706b.js';
+import './index.styles-756d24bf.js';
+import './translationsContext-4d8567bd.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-e2e28d2d.js';
-import './other-b518010d.js';
-import './index-d837e83a.js';
-import { L as LOCALISED_SLUGS } from './constants-5e345bc2.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-b74b8437.js';
+import './other-d11565f3.js';
+import './index-d6a5f110.js';
+import { L as LOCALISED_SLUGS } from './constants-e74bc32e.js';
 import styled from '@emotion/styled';
-import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-703df8ad.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-b480f007.js';
-import { B as Button } from './index-a16d3125.js';
-import { i as domainLocalesMarryBaby } from './utils-66ca369c.js';
+import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-5eb5c77c.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-f6e272da.js';
+import { i as domainLocalesMarryBaby } from './utils-97e9cadb.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as LOCALIZED_SLUGS } from './constants-b775b8a6.js';
+import { L as LOCALIZED_SLUGS } from './constants-2da9eabe.js';
+import { u as useTranslations } from './index-6637a13c.js';
 import { theme } from './miscTheme.js';
-import { H as Heading } from './index-e91363cc.js';
-import { I as Indicator$1 } from './index-a0d0e279.js';
-import { u as useIsInit } from './useIsInit-d27ec28c.js';
+import { H as Heading } from './index-ac78c200.js';
+import { Close, Logo } from '@hhgtech/icons/core';
+import { I as Indicator$1 } from './index-8944d332.js';
+import { u as useIsInit } from './useIsInit-99268c7f.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
+import { B as Button } from './index-fb2ff12c.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-940d483c.js';
+import { U as UserAvatar } from './index-1da4a006.js';
 import formatString from 'string-format';
-import { C as Container } from './index-0b218c43.js';
+import { C as Container } from './index-2b5b440a.js';
 import debounce from 'lodash/debounce';
-import { L as LOCALE } from './Locale-c5b574bc.js';
-import { g as getDataWithCache } from './core-1b091191.js';
+import { L as LOCALE } from './Locale-320d7fb1.js';
+import { g as getDataWithCache } from './core-c0b2770c.js';
 
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
@@ -86,16 +86,6 @@ const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, styl
     return (React__default.createElement(StyledDisplayWrapper, { lowerBound: forceDisplay ? 0 : lowerBoundValue, upperBound: forceDisplay ? 0 : upperBoundValue, className: className, style: style }, children));
 };
 
-var styles$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
-
-const BookingButton = ({ onCareHeaderClick, currentUrl, careUrlFe, btnName, }) => {
-    return onCareHeaderClick ? (React__default.createElement(Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl, onClick: (e) => onCareHeaderClick(e), style: {
-            paddingLeft: 10,
-            paddingRight: 10,
-        } }, btnName)) : (React__default.createElement("a", { href: careUrlFe, className: `${styles$3.bookingButtonAnchor} care-button no-replace-click` },
-        React__default.createElement(Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl }, btnName)));
-};
-
 var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
 
 const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
@@ -198,12 +188,12 @@ function ClosePopupIcon({ className }) {
             React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
 }
 
-function HamburgerIcon({ siteType, enableSearch, className }) {
+function HamburgerIcon({ siteType, enableSearch, className, style, }) {
     if (siteType === 'helloSites') {
-        return (React__default.createElement("div", null,
+        return (React__default.createElement("div", { className: "hamburger-container" },
             React__default.createElement("img", { "data-list-type": "Header", "data-content-type": "Navigation", "data-content-topic": "Hamburger", src: enableSearch
                     ? CommonGAssets.getAssetPath('hamburgerMenuNewWithSearch.svg')
-                    : CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: { width: '24px', height: '24px' }, alt: "home", className: className, loading: "lazy" })));
+                    : CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: Object.assign({ width: '24px', height: '24px' }, style), alt: "home", className: className, loading: "lazy" })));
     }
     /** Marry Baby */
     return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
@@ -405,9 +395,12 @@ const ItemMenu = ({ item, menu }) => {
         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.name,
-                item.popupType && (React__default.createElement("div", { className: styles$1.menuIconWrapper },
+                item.popupType && (React__default.createElement(React__default.Fragment, null, (item === null || item === void 0 ? void 0 : item.icon) ? (React__default.createElement("div", { className: "wrapper-menu-icon" },
+                    React__default.createElement("div", { className: "origin-icon" }, item.icon),
+                    React__default.createElement("div", { className: "close-icon", onClick: onClose },
+                        React__default.createElement(Close, { size: 16 })))) : (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("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))))),
             React__default.isValidElement(menu)
                 ? React__default.cloneElement(menu, {
                     onClose,
@@ -1738,6 +1731,12 @@ const StyledWrapMenuItems = styled.div `
   &[data-site-type='marryBaby'] {
     gap: 26px;
   }
+
+  .hamburger-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 const StyleWrapperNavigtionSearch = styled.div `
   padding: 0 16px 6px;
@@ -1745,6 +1744,12 @@ const StyleWrapperNavigtionSearch = styled.div `
 const StyleButtonAiChat = styled(Button$1) `
   border-radius: 28px;
   border: 1px solid ${theme.colors.neutral200};
+  &.ai-doctor-btn {
+    pointer-events: none !important;
+    * {
+      pointer-events: none !important;
+    }
+  }
   ${MediaQueries.mbDown} {
     padding: 0px 12px 0px 10px;
     height: 36px;
@@ -1755,74 +1760,102 @@ const StyleButtonAiChat = styled(Button$1) `
   }
 `;
 
-const InitialCart = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "512", height: "512", style: {
-        width: '100%',
-        height: '100%',
-        contentVisibility: 'visible',
-    }, viewBox: "0 0 512 512" },
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "__lottie_element_2" },
-            React__default.createElement("path", { d: "M0 0h512v512H0z" })),
-        React__default.createElement("path", { fill: "#FFF", d: "m139 0-13 174h244l-30 292 165 1 4-466z", opacity: "1", id: "__lottie_element_6", display: "block" }),
-        React__default.createElement("mask", { id: "__lottie_element_6_1", "mask-type": "alpha" },
-            React__default.createElement("use", { xlinkHref: "#__lottie_element_6" }))),
-    React__default.createElement("g", { clipPath: "url(#__lottie_element_2)" },
-        React__default.createElement("path", { fill: "#2B62CD", d: "m430 181-40 41-111-120a18 18 0 0 1-5-13c0-5 2-9 5-13l6-5a18 18 0 0 1 25-1zm-348 0 40 41 111-120a18 18 0 0 0 0-26l-6-5a18 18 0 0 0-25-1z", display: "block" }),
-        React__default.createElement("g", { display: "block" },
-            React__default.createElement("path", { fill: "#2D87F3", d: "M385 427H125c-4 0-9-1-13-5a20 20 0 0 1-6-12L88 239h335l-18 171a20 20 0 0 1-7 12c-3 4-8 5-13 5" }),
-            React__default.createElement("path", { fill: "#2B62CD", d: "m160 402-5-2a6 6 0 0 1-1-4l-8-114v-2a6 6 0 0 1 3-4 6 6 0 0 1 5 0 6 6 0 0 1 4 5l8 115-1 2a6 6 0 0 1-1 2 6 6 0 0 1-4 2m61 0-5-2a6 6 0 0 1-1-4l-2-114c0-2 0-3 2-5a6 6 0 0 1 4-1l4 1a6 6 0 0 1 2 4l2 115a6 6 0 0 1-2 4 6 6 0 0 1-4 2zm131 0a6 6 0 0 1-5-4l-1-2 8-115a6 6 0 0 1 2-4l2-1a6 6 0 0 1 2 0 6 6 0 0 1 5 2 6 6 0 0 1 1 4l-8 114a6 6 0 0 1-6 6m-61 0a6 6 0 0 1-6-6l2-114 2-5a6 6 0 0 1 4-1 6 6 0 0 1 5 1 6 6 0 0 1 1 5l-2 114a6 6 0 0 1-1 4 6 6 0 0 1-5 2" }),
-            React__default.createElement("path", { fill: "#91CAFF", d: "M424 243H88a20 20 0 0 1-21-18l-3-28a20 20 0 0 1 20-23h344a20 20 0 0 1 20 23l-3 28a20 20 0 0 1-21 18" })),
-        React__default.createElement("g", { mask: "url(#__lottie_element_6_1)", display: "block" },
-            React__default.createElement("path", { fill: "#FFC326", d: "m294 198-16 123a5 5 0 0 1-5 5h-80l-4-2a5 5 0 0 1-1-4l15-115h1z" }),
-            React__default.createElement("path", { fill: "#FFD658", d: "M272 189c0 3 0 7 2 10a12 12 0 0 0 10 6h-81l-3-1c-3-1-5-3-6-5a15 15 0 0 1 5-19 17 17 0 0 1 9-3h80c-4 0-7 1-9 3a15 15 0 0 0-7 9" }),
-            React__default.createElement("path", { fill: "#FEA21E", d: "M277 326h-4c3 0 5-2 5-4l15-115 1-9v1l-1 1a9 9 0 0 1-5 4 11 11 0 0 1-8 0c-3-1-5-3-6-5-4-7-2-15 5-19 2-2 5-3 9-3h1c4 0 7 2 10 4l6 9 1 11 14 119-1 4z" }),
-            React__default.createElement("path", { fill: "#FC7419", d: "M303 310v-74a3 3 0 1 0-5 0v74l-21 16h38l4-2zm-5-109a13 13 0 0 1-5 6l1-9c0-1 0 0 0 0 0-3-1-6-4-7a4 4 0 0 0-5 1v1c0 2-1 3-2 3a3 3 0 0 1-3-2l1-4a9 9 0 0 1 11-4c3 1 5 3 6 6v9" })),
-        React__default.createElement("g", { display: "block" },
-            React__default.createElement("path", { fill: "#FFC326", d: "m460 330-16 123a5 5 0 0 1-5 5h-80l-4-2a5 5 0 0 1-1-4l15-115h1z" }),
-            React__default.createElement("path", { fill: "#FFD658", d: "M438 321c0 3 0 6 2 9a12 12 0 0 0 10 7h-81l-3-1c-3-1-5-3-6-6a15 15 0 0 1 5-18 17 17 0 0 1 9-3h80c-4 0-7 1-9 3a15 15 0 0 0-7 9" }),
-            React__default.createElement("path", { fill: "#FEA21E", d: "M443 458h-4c3 0 5-2 5-5l15-114 1-9v1l-1 1a9 9 0 0 1-5 4 11 11 0 0 1-8 0c-3-1-5-3-6-6-4-6-2-14 5-18 2-2 5-3 9-3h1c4 0 7 2 10 4s5 5 6 9l1 11 14 119-1 4z" }),
-            React__default.createElement("path", { fill: "#FC7419", d: "M469 442v-74a3 3 0 1 0-5 0v74l-21 16h38l4-2zm-5-109a13 13 0 0 1-5 6l1-9c0-1 0 0 0 0 0-3-1-6-4-7a4 4 0 0 0-4 1l-1 1-2 3a3 3 0 0 1-3-3l1-3a9 9 0 0 1 11-4c3 1 5 3 6 5 1 3 2 7 0 10" })))));
+const StyleInput = styled(Input) `
+  .mantine-Input-input {
+    border-radius: 40px;
+    background: ${theme.colors.white};
+    border: 1px solid ${theme.colors.blue200};
 
-const InitialDoctor = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "512", height: "512", style: {
-        width: '100%',
-        height: '100%',
-        contentVisibility: 'visible',
-    }, viewBox: "0 0 512 512" },
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "__lottie_element_23" },
-            React__default.createElement("path", { d: "M0 0h512v512H0z" }))),
-    React__default.createElement("g", { clipPath: "url(#__lottie_element_23)" },
-        React__default.createElement("g", { display: "block" },
-            React__default.createElement("path", { fill: "#1B3250", d: "M430 332c-13-17-52-37-42-63 16-41-9-72-28-84-22-14-23-43-30-66-15-50-53-73-103-73s-88 21-103 71c-7 22-7 53-29 67-19 12-61 41-45 82 10 26-15 52-28 69-39 53 13 89 72 98l255 2c59-9 120-50 81-103" }),
-            React__default.createElement("path", { fill: "#FFB497", d: "M120 202c-11 4-13 17-10 29a29 29 0 0 0 14 17 29 29 0 0 0 22 3l-8-49a25 25 0 0 0-18 0" }),
-            React__default.createElement("path", { fill: "#FF977B", d: "M147 235a5 5 0 0 1-4-2c-6-8-17-8-17-8a5 5 0 0 1-4-2 5 5 0 0 1 0-7l4-1c1 0 16 0 25 11a5 5 0 0 1-4 9" }),
-            React__default.createElement("path", { fill: "#FFB497", d: "M332 202a25 25 0 0 0-18 0l-8 49a29 29 0 0 0 22-3c7-3 12-10 14-17 3-12 1-25-10-29" }),
-            React__default.createElement("path", { fill: "#FF977B", d: "M305 235a5 5 0 0 1-5-3 5 5 0 0 1 1-6c9-11 24-11 25-11a5 5 0 0 1 5 5 5 5 0 0 1-5 5s-11 0-17 8a5 5 0 0 1-4 2" }),
-            React__default.createElement("path", { fill: "#E3F2FF", d: "M366 452H86a3 3 0 0 1-4-4c5-19 19-47 37-65a153 153 0 0 1 42-28l1-1a85 85 0 0 1 29-19h70a84 84 0 0 1 29 19l1 1a153 153 0 0 1 42 28c18 18 32 46 37 65a3 3 0 0 1-1 3 3 3 0 0 1-3 1" }),
-            React__default.createElement("path", { fill: "#FCCAAF", d: "M261 335c-25 32-48 32-70 0l5-10v-1a45 45 0 0 0 2-13h56a48 48 0 0 0 2 13v1l5 10" }),
-            React__default.createElement("path", { fill: "#2D87F3", d: "M281 452H175c-14-93 16-117 16-117 7 9 20 15 35 15s28-6 35-15c0 0 9 12 16 37 5 20 6 60 4 80" }),
-            React__default.createElement("path", { fill: "#BCDEFF", d: "M191 335a84 84 0 0 0-30 19 53 53 0 0 0-13 28c0 3 11 1 16 0h1v1c-13 8-17 19-16 25 2 15 6 30 13 44h26s-12-72 3-117m96 48a1 1 0 0 1 0-1h1c1 0 0 0 0 0 5 1 16 3 16 0a53 53 0 0 0-13-28 83 83 0 0 0-30-19c15 45 3 117 3 117h26a157 157 0 0 0 13-44c1-6-3-17-16-25" }),
-            React__default.createElement("path", { fill: "#FF977B", d: "M256 325c-20 18-40 18-60 0v-1a46 46 0 0 0 2-13h56a48 48 0 0 0 2 13v1" }),
-            React__default.createElement("path", { fill: "#FCCAAF", d: "M314 205c-3 54-17 80-39 96-14 11-37 24-49 24s-35-13-49-24c-22-16-36-42-39-96 52-21 30-127 85-99a7 7 0 0 0 6 0c55-28 33 78 85 99" }),
-            React__default.createElement("path", { fill: "#FFB497", d: "M221 106c-27-12-34 12-43 40-7 25-16 54-41 63l1 3c43 0 71-62 83-106" })),
-        React__default.createElement("path", { fill: "#FF977B", d: "M233 233a5 5 0 0 0-4 2l-3 1-3-1a5 5 0 0 0-2-2 5 5 0 0 0-4 0 5 5 0 0 0-3 5c0 6 9 8 12 8s12-2 12-8a5 5 0 0 0-2-3 5 5 0 0 0-3-2", display: "block" }),
-        React__default.createElement("path", { fill: "#1B3250", d: "m261 199 9-5a27 27 0 0 1 11-1c4 0 7 0 11 2l8 4a2 2 0 0 1 1 2 2 2 0 0 1 0 1h-1l-10-1h-9a20 20 0 0 0-7 2 65 65 0 0 0-7 4 5 5 0 0 1-4 1 5 5 0 0 1-3-2 5 5 0 0 1-1-2 5 5 0 0 1 2-5", display: "block" }),
-        React__default.createElement("path", { fill: "#284A75", d: "M280 218a9 9 0 1 0 0-19 9 9 0 0 0 0 19", display: "block" }),
-        React__default.createElement("path", { fill: "#1B3250", d: "m192 210-7-4-7-2h-9l-9 1a2 2 0 0 1-2-1v-1l1-1 9-4c3-2 6-2 10-2 4-1 7 0 11 1l9 5a5 5 0 0 1 2 3v4a5 5 0 0 1-7 2l-1-1", display: "block" }),
-        React__default.createElement("path", { fill: "#284A75", d: "M184 218a9 9 0 1 0 0-19 9 9 0 0 0 0 19", display: "block" }),
-        React__default.createElement("g", { fill: "#FFF", display: "block" },
-            React__default.createElement("path", { d: "m216 213-4-1a5 5 0 0 1-1-3v-4a5 5 0 0 1 3-2 33 33 0 0 1 24 0 5 5 0 0 1 3 7 5 5 0 0 1-3 2h-3a23 23 0 0 0-18 1h-1" }),
-            React__default.createElement("path", { d: "M183 249a38 38 0 0 1-35-23 38 38 0 0 1-2-22 38 38 0 0 1 11-19 38 38 0 0 1 19-11c7-1 15 0 22 2a38 38 0 0 1 16 14 38 38 0 0 1 7 21 38 38 0 0 1-11 27 38 38 0 0 1-27 11m0-65a27 27 0 0 0-25 17 27 27 0 0 0-2 15 27 27 0 0 0 8 14 27 27 0 0 0 42-4c3-4 4-9 4-15a27 27 0 0 0-8-19 27 27 0 0 0-19-8zm86 65a38 38 0 0 1-35-24 38 38 0 0 1 27-51 38 38 0 0 1 39 16 38 38 0 0 1 6 21 38 38 0 0 1-11 27 38 38 0 0 1-26 11m0-65a27 27 0 0 0-25 17 27 27 0 0 0-2 15 27 27 0 0 0 8 14 27 27 0 0 0 46-19 27 27 0 0 0-8-19 27 27 0 0 0-19-8z" })),
-        React__default.createElement("path", { d: "m205 180-2-1c-10-4-39-9-47-1a5 5 0 0 1-3 2 5 5 0 0 1-4-2 5 5 0 0 1-2-3l1-4c14-15 52-4 59-1a5 5 0 0 1 3 6 5 5 0 0 1-2 3l-3 1zm42 0-3-1a5 5 0 0 1-1-7 5 5 0 0 1 2-2c7-3 45-14 59 1a5 5 0 0 1 1 4l-2 3a5 5 0 0 1-4 2l-3-2c-8-8-37-3-47 1l-2 1", fill: "#284A75", display: "block" }),
-        React__default.createElement("path", { fill: "#FF886C", d: "M208 260a4 4 0 0 0-3 1 4 4 0 0 0-1 3c2 8 6 19 22 19s21-11 22-19a4 4 0 0 0-4-4l-18-1-18 1", display: "block" }),
-        React__default.createElement("g", { display: "block" },
-            React__default.createElement("g", { fill: "#FFF" },
-                React__default.createElement("path", { d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" }),
-                React__default.createElement("path", { d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" })),
-            React__default.createElement("path", { fill: "#E4E8EC", d: "M384 480a75 75 0 1 0 0-149 75 75 0 0 0 0 149m0 11a85 85 0 1 0 0-171 85 85 0 0 0 0 171" }),
-            React__default.createElement("path", { fill: "#FFF", d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" }),
-            React__default.createElement("path", { fill: "#E4E8EC", d: "M384 480a75 75 0 1 0 0-149 75 75 0 0 0 0 149m0 11a85 85 0 1 0 0-171 85 85 0 0 0 0 171" }),
-            React__default.createElement("path", { fill: "#FF6F4D", d: "M389 358h-11a17 17 0 0 0-12 5 17 17 0 0 0-5 12v3l-1 3a4 4 0 0 1-3 1h-3a17 17 0 0 0-17 17v12a17 17 0 0 0 17 17h3a4 4 0 0 1 4 3v3a17 17 0 0 0 17 17h11c5 0 9-2 12-5s5-7 5-12v-3a4 4 0 0 1 4-3h3c4 0 9-2 12-5s5-8 5-12v-12c0-5-2-9-5-12a17 17 0 0 0-12-5h-3a4 4 0 0 1-4-4v-3a17 17 0 0 0-5-12 17 17 0 0 0-12-5" })))));
+    &:focus {
+      border: 1px solid ${theme.colors.primaryBase};
+    }
+  }
+
+  .close-icon-wrapper {
+    display: flex;
+    background-color: ${theme.colors.gray400};
+    border-radius: 100%;
+    cursor: pointer;
+
+    svg {
+      pointer-events: none;
+    }
+  }
+
+  .search-icon-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
+    const { locale, configs: { statics }, siteType, } = useContext(NavigationContext);
+    const [keyword, setKeyword] = useState('');
+    const [eventCategoryTracking, setEventCategoryTracking] = useState('Search From Another Page');
+    const { t } = useTranslations();
+    const goToSearchPage = (searchValue = '') => {
+        let sourceParam = '';
+        if (projectType === 'together') {
+            sourceParam = 'community';
+        }
+        if (projectType === 'discover') {
+            if (window.location.pathname.startsWith('/health-tools/')) {
+                sourceParam = 'health-tools';
+            }
+            else {
+                sourceParam = projectType;
+            }
+        }
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set('source', sourceParam);
+        searchParams.set('s', searchValue);
+        searchParams.delete('page');
+        window.location.href = `${statics.HOME_PAGE_URL}/search/?${searchParams.toString()}`;
+    };
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const url = new URL(window.location.href);
+            const params = new URLSearchParams(url.search);
+            const searchValue = params.get('s');
+            if (projectType === 'discover' &&
+                window.location.pathname.startsWith('/search/')) {
+                setEventCategoryTracking('Search Page');
+            }
+            setKeyword(searchValue);
+        }
+    }, []);
+    return isMobile && !isHomepage ? (React__default.createElement(Button$1, { variant: "tertiary", style: {
+            padding: '6px',
+        }, size: "sm", onClick: () => {
+            goToSearchPage('');
+        } },
+        React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
+                verticalAlign: 'bottom',
+            } },
+            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": eventCategoryTracking, "data-event-action": "Search", "data-event-label": keyword, placeholder: siteType === 'marryBaby'
+            ? t('navigation.search.input.placeholder')
+            : t('home.search', {
+                site: LOCALE_SPECS[locale || 'en-PH']
+                    ? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
+                    : '',
+            }), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
+            goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
+            e.preventDefault();
+            if ((isMobile && isHomepage) || isRedirectSearchPage) {
+                goToSearchPage('');
+            }
+        }, rightSection: keyword ? (React__default.createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
+            React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+                if ((isMobile && isHomepage) || isRedirectSearchPage) {
+                    goToSearchPage('');
+                }
+            } },
+            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
+                    verticalAlign: 'bottom',
+                } },
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" }))) }));
+};
 
 const formatSponsor = (sponsor) => {
     if (!sponsor)
@@ -2006,12 +2039,12 @@ const BtnClosePopup = ({ onClosePopup }) => {
             React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
 };
 
-const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, }) => {
+const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, stylesContainer, }) => {
     return (React__default.createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
         React__default.createElement(Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
             !hideCloseBtn && (React__default.createElement("div", { className: styles.container },
                 React__default.createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
-            React__default.createElement(Container, { className: styles.gridContainer }, children))));
+            React__default.createElement(Container, { className: styles.gridContainer, style: stylesContainer }, children))));
 };
 
 const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
@@ -2111,181 +2144,135 @@ const MenuVideoList = ({ spotlightsList = [], onClose, isOpen }) => {
         React__default.createElement(VideoSpotlights, { spotlightsList: spotlightsList })));
 };
 
-const ItemNavButton = ({ item, color = 'blue' }) => {
-    const [Lottie, setLottie] = useState();
-    const [iconJson, setIconJson] = useState();
-    const { locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = useContext(NavigationContext);
-    const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
-        allowBgScroll: true,
-    });
-    useEffect(() => {
-        setTimeout(() => {
-            // if (item.id === 'care' || item.id === 'ecom') {
-            if (item.id === 'care') {
-                import('lottie-light-react').then((lottie) => {
-                    setLottie(() => lottie.default);
-                });
-            }
-            if (item.id === 'care') {
-                import('./doctor-f2a043d8.js').then((data) => {
-                    if (data === null || data === void 0 ? void 0 : data.default)
-                        setIconJson(() => data.default);
-                });
-            }
-            // else if (item.id === 'ecom') {
-            //   import('./cart.json').then((data) => {
-            //     if (data?.default) setIconJson(() => data.default)
-            //   })
-            // }
-        }, 1000);
-    }, [item.id]);
-    const hasIcon = item.id === 'care';
-    const linkOnly = !item.popupType && !!item.link;
-    const Tag = linkOnly ? 'a' : 'div';
-    const buttonStyle = color === 'gray'
-        ? {
-            border: '1px solid #E4E8EC',
-            background: '#F7F9FC',
-        }
-        : color === 'blue'
-            ? {
-                border: '1px solid #BCDEFF',
-                background: '#E3F2FF',
-            }
-            : {
-                border: '1px solid transparent',
-                background: 'transparent',
-            };
-    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 },
-        React__default.createElement(Button$1, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default.createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
-                    width: 28,
-                    height: 28,
-                } })) : (React__default.createElement("a", { href: normalizeLinkSlash(item.link + '/') },
-                React__default.createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
-                        width: 28,
-                        height: 28,
-                    } })))) : hasIcon ? (React__default.createElement("div", { style: {
-                    width: 28,
-                    height: 28,
-                } }, item.id === 'care' ? (React__default.createElement(InitialDoctor, null)) : item.id === 'ecom' ? (React__default.createElement(InitialCart, null)) : null)) : null, styles: {
-                leftIcon: {
-                    marginRight: 4,
-                    svg: {
-                        // this fix blurry image due to Lottie transform translate3d(0,0,0)
-                        transform: 'none !important',
-                        g: {
-                            willChange: 'transform',
-                        },
-                    },
-                },
-            }, 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)), onMouseDown: onButtonMouseDown }, 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 })) : item.popupType === 'video' ? (React__default.createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights, onClose: onClose })) : null));
-};
-
-const StyleInput = styled(Input) `
-  .mantine-Input-input {
-    border-radius: 40px;
-    background: ${theme.colors.white};
-    border: 1px solid ${theme.colors.blue200};
-
-    &:focus {
-      border: 1px solid ${theme.colors.primaryBase};
-    }
+styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  ${MediaQueries.tdDown} {
+    gap: 12px;
+    grid-template-columns: 1fr;
   }
-
-  .close-icon-wrapper {
-    display: flex;
-    background-color: ${theme.colors.gray400};
-    border-radius: 100%;
-    cursor: pointer;
-
-    svg {
-      pointer-events: none;
-    }
+`;
+const StyleButton = styled(Button$1) `
+  border: 1px solid ${theme.colors.white} !important;
+  .mantine-Button-leftIcon {
+    width: 24px;
+    height: 24px;
   }
+`;
+const StyleWrapperIcon = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-  .search-icon-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+  border-radius: 5px;
+  background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.1) 15.1%,
+      rgba(0, 0, 0, 0.01) 100%
+    ),
+    linear-gradient(180deg, #65b5ff 0%, #2685f1 100%);
+  background-blend-mode: soft-light, normal;
 `;
 
-const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
-    const { locale, configs: { statics }, siteType, } = useContext(NavigationContext);
-    const [keyword, setKeyword] = useState('');
-    const [eventCategoryTracking, setEventCategoryTracking] = useState('Search From Another Page');
-    const { t } = useTranslations();
-    const goToSearchPage = (searchValue = '') => {
-        let sourceParam = '';
-        if (projectType === 'together') {
-            sourceParam = 'community';
-        }
-        if (projectType === 'discover') {
-            if (window.location.pathname.startsWith('/health-tools/')) {
-                sourceParam = 'health-tools';
-            }
-            else {
-                sourceParam = projectType;
-            }
-        }
-        const searchParams = new URLSearchParams(window.location.search);
-        searchParams.set('source', sourceParam);
-        searchParams.set('s', searchValue);
-        searchParams.delete('page');
-        window.location.href = `${statics.HOME_PAGE_URL}/search/?${searchParams.toString()}`;
-    };
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const url = new URL(window.location.href);
-            const params = new URLSearchParams(url.search);
-            const searchValue = params.get('s');
-            if (projectType === 'discover' &&
-                window.location.pathname.startsWith('/search/')) {
-                setEventCategoryTracking('Search Page');
-            }
-            setKeyword(searchValue);
-        }
-    }, []);
-    return isMobile && !isHomepage ? (React__default.createElement(Button$1, { variant: "tertiary", style: {
-            padding: '6px',
-        }, size: "sm", onClick: () => {
-            goToSearchPage('');
+const InitialCart = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "512", height: "512", style: {
+        width: '100%',
+        height: '100%',
+        contentVisibility: 'visible',
+    }, viewBox: "0 0 512 512" },
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "__lottie_element_2" },
+            React__default.createElement("path", { d: "M0 0h512v512H0z" })),
+        React__default.createElement("path", { fill: "#FFF", d: "m139 0-13 174h244l-30 292 165 1 4-466z", opacity: "1", id: "__lottie_element_6", display: "block" }),
+        React__default.createElement("mask", { id: "__lottie_element_6_1", "mask-type": "alpha" },
+            React__default.createElement("use", { xlinkHref: "#__lottie_element_6" }))),
+    React__default.createElement("g", { clipPath: "url(#__lottie_element_2)" },
+        React__default.createElement("path", { fill: "#2B62CD", d: "m430 181-40 41-111-120a18 18 0 0 1-5-13c0-5 2-9 5-13l6-5a18 18 0 0 1 25-1zm-348 0 40 41 111-120a18 18 0 0 0 0-26l-6-5a18 18 0 0 0-25-1z", display: "block" }),
+        React__default.createElement("g", { display: "block" },
+            React__default.createElement("path", { fill: "#2D87F3", d: "M385 427H125c-4 0-9-1-13-5a20 20 0 0 1-6-12L88 239h335l-18 171a20 20 0 0 1-7 12c-3 4-8 5-13 5" }),
+            React__default.createElement("path", { fill: "#2B62CD", d: "m160 402-5-2a6 6 0 0 1-1-4l-8-114v-2a6 6 0 0 1 3-4 6 6 0 0 1 5 0 6 6 0 0 1 4 5l8 115-1 2a6 6 0 0 1-1 2 6 6 0 0 1-4 2m61 0-5-2a6 6 0 0 1-1-4l-2-114c0-2 0-3 2-5a6 6 0 0 1 4-1l4 1a6 6 0 0 1 2 4l2 115a6 6 0 0 1-2 4 6 6 0 0 1-4 2zm131 0a6 6 0 0 1-5-4l-1-2 8-115a6 6 0 0 1 2-4l2-1a6 6 0 0 1 2 0 6 6 0 0 1 5 2 6 6 0 0 1 1 4l-8 114a6 6 0 0 1-6 6m-61 0a6 6 0 0 1-6-6l2-114 2-5a6 6 0 0 1 4-1 6 6 0 0 1 5 1 6 6 0 0 1 1 5l-2 114a6 6 0 0 1-1 4 6 6 0 0 1-5 2" }),
+            React__default.createElement("path", { fill: "#91CAFF", d: "M424 243H88a20 20 0 0 1-21-18l-3-28a20 20 0 0 1 20-23h344a20 20 0 0 1 20 23l-3 28a20 20 0 0 1-21 18" })),
+        React__default.createElement("g", { mask: "url(#__lottie_element_6_1)", display: "block" },
+            React__default.createElement("path", { fill: "#FFC326", d: "m294 198-16 123a5 5 0 0 1-5 5h-80l-4-2a5 5 0 0 1-1-4l15-115h1z" }),
+            React__default.createElement("path", { fill: "#FFD658", d: "M272 189c0 3 0 7 2 10a12 12 0 0 0 10 6h-81l-3-1c-3-1-5-3-6-5a15 15 0 0 1 5-19 17 17 0 0 1 9-3h80c-4 0-7 1-9 3a15 15 0 0 0-7 9" }),
+            React__default.createElement("path", { fill: "#FEA21E", d: "M277 326h-4c3 0 5-2 5-4l15-115 1-9v1l-1 1a9 9 0 0 1-5 4 11 11 0 0 1-8 0c-3-1-5-3-6-5-4-7-2-15 5-19 2-2 5-3 9-3h1c4 0 7 2 10 4l6 9 1 11 14 119-1 4z" }),
+            React__default.createElement("path", { fill: "#FC7419", d: "M303 310v-74a3 3 0 1 0-5 0v74l-21 16h38l4-2zm-5-109a13 13 0 0 1-5 6l1-9c0-1 0 0 0 0 0-3-1-6-4-7a4 4 0 0 0-5 1v1c0 2-1 3-2 3a3 3 0 0 1-3-2l1-4a9 9 0 0 1 11-4c3 1 5 3 6 6v9" })),
+        React__default.createElement("g", { display: "block" },
+            React__default.createElement("path", { fill: "#FFC326", d: "m460 330-16 123a5 5 0 0 1-5 5h-80l-4-2a5 5 0 0 1-1-4l15-115h1z" }),
+            React__default.createElement("path", { fill: "#FFD658", d: "M438 321c0 3 0 6 2 9a12 12 0 0 0 10 7h-81l-3-1c-3-1-5-3-6-6a15 15 0 0 1 5-18 17 17 0 0 1 9-3h80c-4 0-7 1-9 3a15 15 0 0 0-7 9" }),
+            React__default.createElement("path", { fill: "#FEA21E", d: "M443 458h-4c3 0 5-2 5-5l15-114 1-9v1l-1 1a9 9 0 0 1-5 4 11 11 0 0 1-8 0c-3-1-5-3-6-6-4-6-2-14 5-18 2-2 5-3 9-3h1c4 0 7 2 10 4s5 5 6 9l1 11 14 119-1 4z" }),
+            React__default.createElement("path", { fill: "#FC7419", d: "M469 442v-74a3 3 0 1 0-5 0v74l-21 16h38l4-2zm-5-109a13 13 0 0 1-5 6l1-9c0-1 0 0 0 0 0-3-1-6-4-7a4 4 0 0 0-4 1l-1 1-2 3a3 3 0 0 1-3-3l1-3a9 9 0 0 1 11-4c3 1 5 3 6 5 1 3 2 7 0 10" })))));
+
+const InitialDoctor = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "512", height: "512", style: {
+        width: '100%',
+        height: '100%',
+        contentVisibility: 'visible',
+    }, viewBox: "0 0 512 512" },
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "__lottie_element_23" },
+            React__default.createElement("path", { d: "M0 0h512v512H0z" }))),
+    React__default.createElement("g", { clipPath: "url(#__lottie_element_23)" },
+        React__default.createElement("g", { display: "block" },
+            React__default.createElement("path", { fill: "#1B3250", d: "M430 332c-13-17-52-37-42-63 16-41-9-72-28-84-22-14-23-43-30-66-15-50-53-73-103-73s-88 21-103 71c-7 22-7 53-29 67-19 12-61 41-45 82 10 26-15 52-28 69-39 53 13 89 72 98l255 2c59-9 120-50 81-103" }),
+            React__default.createElement("path", { fill: "#FFB497", d: "M120 202c-11 4-13 17-10 29a29 29 0 0 0 14 17 29 29 0 0 0 22 3l-8-49a25 25 0 0 0-18 0" }),
+            React__default.createElement("path", { fill: "#FF977B", d: "M147 235a5 5 0 0 1-4-2c-6-8-17-8-17-8a5 5 0 0 1-4-2 5 5 0 0 1 0-7l4-1c1 0 16 0 25 11a5 5 0 0 1-4 9" }),
+            React__default.createElement("path", { fill: "#FFB497", d: "M332 202a25 25 0 0 0-18 0l-8 49a29 29 0 0 0 22-3c7-3 12-10 14-17 3-12 1-25-10-29" }),
+            React__default.createElement("path", { fill: "#FF977B", d: "M305 235a5 5 0 0 1-5-3 5 5 0 0 1 1-6c9-11 24-11 25-11a5 5 0 0 1 5 5 5 5 0 0 1-5 5s-11 0-17 8a5 5 0 0 1-4 2" }),
+            React__default.createElement("path", { fill: "#E3F2FF", d: "M366 452H86a3 3 0 0 1-4-4c5-19 19-47 37-65a153 153 0 0 1 42-28l1-1a85 85 0 0 1 29-19h70a84 84 0 0 1 29 19l1 1a153 153 0 0 1 42 28c18 18 32 46 37 65a3 3 0 0 1-1 3 3 3 0 0 1-3 1" }),
+            React__default.createElement("path", { fill: "#FCCAAF", d: "M261 335c-25 32-48 32-70 0l5-10v-1a45 45 0 0 0 2-13h56a48 48 0 0 0 2 13v1l5 10" }),
+            React__default.createElement("path", { fill: "#2D87F3", d: "M281 452H175c-14-93 16-117 16-117 7 9 20 15 35 15s28-6 35-15c0 0 9 12 16 37 5 20 6 60 4 80" }),
+            React__default.createElement("path", { fill: "#BCDEFF", d: "M191 335a84 84 0 0 0-30 19 53 53 0 0 0-13 28c0 3 11 1 16 0h1v1c-13 8-17 19-16 25 2 15 6 30 13 44h26s-12-72 3-117m96 48a1 1 0 0 1 0-1h1c1 0 0 0 0 0 5 1 16 3 16 0a53 53 0 0 0-13-28 83 83 0 0 0-30-19c15 45 3 117 3 117h26a157 157 0 0 0 13-44c1-6-3-17-16-25" }),
+            React__default.createElement("path", { fill: "#FF977B", d: "M256 325c-20 18-40 18-60 0v-1a46 46 0 0 0 2-13h56a48 48 0 0 0 2 13v1" }),
+            React__default.createElement("path", { fill: "#FCCAAF", d: "M314 205c-3 54-17 80-39 96-14 11-37 24-49 24s-35-13-49-24c-22-16-36-42-39-96 52-21 30-127 85-99a7 7 0 0 0 6 0c55-28 33 78 85 99" }),
+            React__default.createElement("path", { fill: "#FFB497", d: "M221 106c-27-12-34 12-43 40-7 25-16 54-41 63l1 3c43 0 71-62 83-106" })),
+        React__default.createElement("path", { fill: "#FF977B", d: "M233 233a5 5 0 0 0-4 2l-3 1-3-1a5 5 0 0 0-2-2 5 5 0 0 0-4 0 5 5 0 0 0-3 5c0 6 9 8 12 8s12-2 12-8a5 5 0 0 0-2-3 5 5 0 0 0-3-2", display: "block" }),
+        React__default.createElement("path", { fill: "#1B3250", d: "m261 199 9-5a27 27 0 0 1 11-1c4 0 7 0 11 2l8 4a2 2 0 0 1 1 2 2 2 0 0 1 0 1h-1l-10-1h-9a20 20 0 0 0-7 2 65 65 0 0 0-7 4 5 5 0 0 1-4 1 5 5 0 0 1-3-2 5 5 0 0 1-1-2 5 5 0 0 1 2-5", display: "block" }),
+        React__default.createElement("path", { fill: "#284A75", d: "M280 218a9 9 0 1 0 0-19 9 9 0 0 0 0 19", display: "block" }),
+        React__default.createElement("path", { fill: "#1B3250", d: "m192 210-7-4-7-2h-9l-9 1a2 2 0 0 1-2-1v-1l1-1 9-4c3-2 6-2 10-2 4-1 7 0 11 1l9 5a5 5 0 0 1 2 3v4a5 5 0 0 1-7 2l-1-1", display: "block" }),
+        React__default.createElement("path", { fill: "#284A75", d: "M184 218a9 9 0 1 0 0-19 9 9 0 0 0 0 19", display: "block" }),
+        React__default.createElement("g", { fill: "#FFF", display: "block" },
+            React__default.createElement("path", { d: "m216 213-4-1a5 5 0 0 1-1-3v-4a5 5 0 0 1 3-2 33 33 0 0 1 24 0 5 5 0 0 1 3 7 5 5 0 0 1-3 2h-3a23 23 0 0 0-18 1h-1" }),
+            React__default.createElement("path", { d: "M183 249a38 38 0 0 1-35-23 38 38 0 0 1-2-22 38 38 0 0 1 11-19 38 38 0 0 1 19-11c7-1 15 0 22 2a38 38 0 0 1 16 14 38 38 0 0 1 7 21 38 38 0 0 1-11 27 38 38 0 0 1-27 11m0-65a27 27 0 0 0-25 17 27 27 0 0 0-2 15 27 27 0 0 0 8 14 27 27 0 0 0 42-4c3-4 4-9 4-15a27 27 0 0 0-8-19 27 27 0 0 0-19-8zm86 65a38 38 0 0 1-35-24 38 38 0 0 1 27-51 38 38 0 0 1 39 16 38 38 0 0 1 6 21 38 38 0 0 1-11 27 38 38 0 0 1-26 11m0-65a27 27 0 0 0-25 17 27 27 0 0 0-2 15 27 27 0 0 0 8 14 27 27 0 0 0 46-19 27 27 0 0 0-8-19 27 27 0 0 0-19-8z" })),
+        React__default.createElement("path", { d: "m205 180-2-1c-10-4-39-9-47-1a5 5 0 0 1-3 2 5 5 0 0 1-4-2 5 5 0 0 1-2-3l1-4c14-15 52-4 59-1a5 5 0 0 1 3 6 5 5 0 0 1-2 3l-3 1zm42 0-3-1a5 5 0 0 1-1-7 5 5 0 0 1 2-2c7-3 45-14 59 1a5 5 0 0 1 1 4l-2 3a5 5 0 0 1-4 2l-3-2c-8-8-37-3-47 1l-2 1", fill: "#284A75", display: "block" }),
+        React__default.createElement("path", { fill: "#FF886C", d: "M208 260a4 4 0 0 0-3 1 4 4 0 0 0-1 3c2 8 6 19 22 19s21-11 22-19a4 4 0 0 0-4-4l-18-1-18 1", display: "block" }),
+        React__default.createElement("g", { display: "block" },
+            React__default.createElement("g", { fill: "#FFF" },
+                React__default.createElement("path", { d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" }),
+                React__default.createElement("path", { d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" })),
+            React__default.createElement("path", { fill: "#E4E8EC", d: "M384 480a75 75 0 1 0 0-149 75 75 0 0 0 0 149m0 11a85 85 0 1 0 0-171 85 85 0 0 0 0 171" }),
+            React__default.createElement("path", { fill: "#FFF", d: "M469 405a85 85 0 1 1-170 0 85 85 0 0 1 170 0" }),
+            React__default.createElement("path", { fill: "#E4E8EC", d: "M384 480a75 75 0 1 0 0-149 75 75 0 0 0 0 149m0 11a85 85 0 1 0 0-171 85 85 0 0 0 0 171" }),
+            React__default.createElement("path", { fill: "#FF6F4D", d: "M389 358h-11a17 17 0 0 0-12 5 17 17 0 0 0-5 12v3l-1 3a4 4 0 0 1-3 1h-3a17 17 0 0 0-17 17v12a17 17 0 0 0 17 17h3a4 4 0 0 1 4 3v3a17 17 0 0 0 17 17h11c5 0 9-2 12-5s5-7 5-12v-3a4 4 0 0 1 4-3h3c4 0 9-2 12-5s5-8 5-12v-12c0-5-2-9-5-12a17 17 0 0 0-12-5h-3a4 4 0 0 1-4-4v-3a17 17 0 0 0-5-12 17 17 0 0 0-12-5" })))));
+
+const MenuViewMore = ({ menuItems = [], isOpen, onClose }) => {
+    const { locale, configs: { enableAppIntroPage }, } = useContext(NavigationContext);
+    const ecomNavItem = menuItems.find((m) => m.id === 'ecom');
+    const careNavItem = menuItems.find((m) => m.id === 'care');
+    return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true, hideCloseBtn: true, stylesContainer: {
+            display: 'flex',
+            gap: 0,
+            padding: 0,
         } },
-        React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
-                verticalAlign: 'bottom',
-            } },
-            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": eventCategoryTracking, "data-event-action": "Search", "data-event-label": keyword, placeholder: siteType === 'marryBaby'
-            ? t('navigation.search.input.placeholder')
-            : t('home.search', {
-                site: LOCALE_SPECS[locale || 'en-PH']
-                    ? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
-                    : '',
-            }), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
-            goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
-            e.preventDefault();
-            if ((isMobile && isHomepage) || isRedirectSearchPage) {
-                goToSearchPage('');
-            }
-        }, rightSection: keyword ? (React__default.createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
-            React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
-                if ((isMobile && isHomepage) || isRedirectSearchPage) {
-                    goToSearchPage('');
-                }
-            } },
-            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
-                    verticalAlign: 'bottom',
-                } },
-                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" }))) }));
+        ecomNavItem && (React__default.createElement("a", { tabIndex: 0, href: ecomNavItem.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": ecomNavItem.link },
+            React__default.createElement(StyleButton, { variant: "tertiary", leftIcon: React__default.createElement(InitialCart, null) }, ecomNavItem.name))),
+        careNavItem && (React__default.createElement("a", { tabIndex: 0, href: careNavItem.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": careNavItem.link },
+            React__default.createElement(StyleButton, { variant: "tertiary", leftIcon: React__default.createElement(InitialDoctor, null) }, careNavItem.name))),
+        enableAppIntroPage && (React__default.createElement("a", { tabIndex: 0, href: "https://applink.hellobacsi.com/o9Q88rQh7Mb", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": `https://applink.hellobacsi.com/o9Q88rQh7Mb` },
+            React__default.createElement(StyleButton, { variant: "tertiary", leftIcon: React__default.createElement(StyleWrapperIcon, null,
+                    React__default.createElement(Logo, { width: 16, height: 15 })) }, `${LOCALE_SPECS[locale || 'en-PH'].SITE_NAME_FORMATTED} App`)))));
 };
 
 const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, subHead, projectType, }) => {
     var _a, _b;
-    const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, onBookingClick, currentUrl, onLoginClick, cartNumber, 
+    const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, 
+    // onBookingClick,
+    currentUrl, onLoginClick, cartNumber, 
     // ssrMenuContent: { categories, healthTools, care, together },
-    configs: { statics, enableNavCareBooking, enableSearchBar, enableNavChatbotAi, enableAppIntroPage,
+    configs: { statics, 
+    // enableNavCareBooking,
+    enableSearchBar, enableNavChatbotAi, enableAppIntroPage,
     // enableNavVideo,
     // enableNavCare,
     // enableProfileMyHealth,
@@ -2296,7 +2283,6 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     // userProfileRouterPush,
     isUserLoading, } = useContext(NavigationContext);
     const { triggerLogin } = useSSOV2Store();
-    const { t } = useTranslations();
     const { SSO_URL, HOME_PAGE_URL } = statics;
     const isSponsored = !!sponsorComponent;
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -2351,49 +2337,22 @@ 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 },
             React__default.createElement(StyledLeftGroup, { "data-site-type": siteType },
-                isMobile && (React__default.createElement(HamburgerMenu, { menuItems: menuItems, isHomepage: isHomepage, projectType: projectType })),
+                isMobile && (React__default.createElement(HamburgerMenu, { menuItems: menuItems.filter((m) => !!m.link), isHomepage: isHomepage, projectType: projectType })),
                 logoComponent || (React__default.createElement("a", { style: {
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
                     React__default.createElement("div", null,
-                        React__default.createElement(Logo, { style: {
+                        React__default.createElement(Logo$1, { style: {
                                 display: 'flex',
                             }, 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, projectType: projectType, isMobile: isMobile })))))),
+                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems, originalMenuItems: menuItems })) : (enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             React__default.createElement(StyledRightGroup, { "data-site-type": siteType },
-                !isMobile && siteType !== 'marryBaby' && (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
+                !isMobile && siteType !== 'marryBaby' && (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care'), originalMenuItems: menuItems })),
                 React__default.createElement(StyledProfileNavGroup, null,
-                    !isMobile && (React__default.createElement(React__default.Fragment, null,
-                        ecomNavItem ? (React__default.createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : 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 }))))),
-                    enableAppIntroPage && (React__default.createElement(Box, { component: "a", href: "https://applink.hellobacsi.com/o9Q88rQh7Mb", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": `https://applink.hellobacsi.com/o9Q88rQh7Mb`, sx: (theme) => ({
-                            [theme.fn.largerThan('sm')]: {
-                                order: 10,
-                            },
-                        }), className: "download-app-nav-item" },
-                        React__default.createElement(Button$1, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default.createElement(Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
-                                root: {
-                                    [theme.fn.smallerThan('sm')]: {
-                                        paddingLeft: 8,
-                                        paddingRight: 8,
-                                    },
-                                },
-                                leftIcon: {
-                                    [theme.fn.smallerThan('sm')]: {
-                                        marginRight: 5,
-                                    },
-                                },
-                            }) }, t(isMobile
-                            ? 'home.navigator.app'
-                            : 'home.navigator.downloadApp')))),
                     languageMenu,
                     enableNavChatbotAi && (React__default.createElement(Box, { component: "a", href: `${getCurrentBaseUrl(locale)}/ai-doctor`, "data-event-category": "Chatbot AI", "data-event-action": "Open", "data-event-label": "Hamburger Navigation", className: "ai-doctor-nav-item" },
                         React__default.createElement(StyleButtonAiChat, { variant: "tertiary", leftIcon: React__default.createElement(ChatAi, { size: 18, color: "#2F8AF2" }), size: "md", className: "ai-doctor-btn" }, (_b = LOCALE_SPECS[locale]) === null || _b === void 0 ? void 0 :
@@ -2425,10 +2384,10 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
 };
 const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, isRedirectSearchPage = false, }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
     React__default.createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, isRedirectSearchPage: isRedirectSearchPage })));
-const NavigationMenu = ({ menuItems }) => {
+const NavigationMenu = ({ menuItems, originalMenuItems, }) => {
     const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = useContext(NavigationContext);
     return (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", style: { height: '100%' } },
-        React__default.createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default.createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.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 })) : menuItem.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 })) : menuItem.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 })) : menuItem.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 })) : menuItem.popupType === 'video' ? (React__default.createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : null }))))));
+        React__default.createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default.createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.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 })) : menuItem.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 })) : menuItem.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 })) : menuItem.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 })) : menuItem.popupType === 'video' ? (React__default.createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : menuItem.popupType === 'other' ? (React__default.createElement(MenuViewMore, { menuItems: originalMenuItems })) : null }))))));
 };
 
 const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBanner, isMobile, }) => {
@@ -2529,8 +2488,9 @@ const useInsider = () => {
 
 const useNavServices = () => {
     const { t } = useTranslations();
-    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, enableNavVideo, statics, }, } = useContext(NavigationContext);
+    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, enableNavVideo, enableAppIntroPage, statics, }, } = useContext(NavigationContext);
     const isMarryBaby = siteType === 'marryBaby';
+    const enableNavViewMore = enableAppIntroPage || enableNavCare || enableNavEcom;
     const services = useMemo(() => {
         var _a;
         const _services = [];
@@ -2590,6 +2550,18 @@ const useNavServices = () => {
                 thumbnail: CommonGAssets.getAssetPath('nav-icons/care.svg'),
                 popupType: locale === 'id-ID' ? 'care' : null,
             });
+        enableNavViewMore &&
+            _services.push({
+                name: t('home.seeMore'),
+                id: 'other',
+                link: '',
+                thumbnail: '',
+                popupType: 'other',
+                icon: (React__default.createElement(HamburgerIcon, { siteType: siteType, enableSearch: false, style: {
+                        width: '16px',
+                        height: '16px',
+                    }, className: "mobile-hamburger-icon" })),
+            });
         return _services;
     }, []);
     return services;