@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/esm/index-aabac2aa.js

@@ -0,0 +1,3241 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-1b1533a9.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-32e53dac.js';
+import styled, { css } from 'styled-components';
+import { t as theme } from './theme-e74db08c.js';
+import { T as Text } from './index-3474401a.js';
+import { C as CommonGAssets } from './index-8858383e.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-e612be9c.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-d1c9617e.js';
+import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-2474f896.js';
+import { P as Popup, U as UserAvatar, c as formatCommunity, a as formatPost } from './index-b9b2c417.js';
+import { L as Logo } from './index-f3d0592b.js';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import throttle from 'lodash/throttle';
+import { createStyles, rem, Box, Indicator, Portal } from '@mantine/core';
+import '@mantine/dates';
+import { L as LOCALE } from './Subot-3289bd8e.js';
+import './translationsContext-ad3e25de.js';
+import formatString from 'string-format';
+import '@mantine/hooks';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-2c484c05.js';
+import { L as LOCALISED_SLUGS } from './constants-2a6d2434.js';
+import { I as Icon } from './index-cc93e010.js';
+import { User } from '@hhgtech/icons/core';
+import { g as getDefaultClassWrapper } from './index.styles-5add27c5.js';
+import { C as ChevronDown } from './ChevronDown-9a8ece61.js';
+import { B as Button } from './index-6ea6484e.js';
+import { x as domainLocalesMarryBaby } from './utils-70718e9c.js';
+import { a as LOCALIZED_SLUGS } from './constants-b77ffe3d.js';
+import { H as Heading } from './index-34899aa3.js';
+import { I as Indicator$1 } from './index-d8177667.js';
+import { u as useIsInit } from './useIsInit-8a2fc8e5.js';
+import './utils-6d7b88da.js';
+import './index.styled-9c9db9cc.js';
+import './index-12fa4985.js';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { C as Container } from './index-c2da5293.js';
+import debounce from 'lodash/debounce';
+import { g as getDataWithCache } from './core-8c73d133.js';
+
+const ALLOW_DOMAIN_URL = [
+    'hellobacsi.com',
+    'hellosehat.com',
+    'hellodoktor.com',
+    'hellokrupet.com',
+    'hellodoctor.com.ph',
+    'hellokhunmor.com',
+    'hellosayarwon.com',
+    'helloyishi.com.tw',
+    'helloswasthya.com',
+    'marrybaby.vn',
+    'hellohealth.questionpro.com',
+    'hellobacsivn.page.link',
+];
+const isInternalLink = (url = '') => {
+    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
+};
+
+const StyledLanguageChangeLink = styled.a `
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 11px;
+  gap: 2px;
+
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 20px;
+
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+`;
+
+const StyledSelectionContainer = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledSelectionLabel = styled.div `
+  position: relative;
+`;
+const StyleSelectionPopup = styled.div `
+  position: absolute;
+  z-index: 21;
+  top: 100%;
+  right: 0;
+  width: 327px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
+
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-show-indicator='true'] {
+    &:before {
+      position: absolute;
+      right: 11px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border: 0.5rem solid transparent;
+      border-top: none;
+      border-bottom-color: #fff;
+      content: '';
+      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+    }
+  }
+`;
+const StyledOption = styled.div `
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+  &[data-selected='false'] {
+    background-color: ${theme.colors.gray100};
+  }
+`;
+const StyledPopupBackground = styled.div `
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+`;
+
+const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledSelectionContainer, null,
+            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
+                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
+                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
+                        if (selected !== option.value) {
+                            onChange(option.value);
+                            setIsOpen((value) => !value);
+                        }
+                        e.stopPropagation();
+                    } },
+                    React__default.createElement(Text, { size: "p3" }, option.label),
+                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
+        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
+};
+
+const LanguageSwitcher = ({ languageOptions, locale }) => {
+    var _a, _b;
+    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
+    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
+        return null;
+    }
+    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
+            if (typeof window !== 'undefined') {
+                window.location.href = href;
+            }
+        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
+};
+const LanguageLabel = ({ locale, label, href, }) => {
+    var _a, _b, _c;
+    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
+        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
+        React__default.createElement("span", null, label)));
+};
+
+const getEcomUrl = ({ path, locale, }) => {
+    var _a;
+    return `/shop/${(_a = LOCALISED_SLUGS[locale || 'vi-VN']) === null || _a === void 0 ? void 0 : _a[path]}/`;
+};
+
+var useStyles = createStyles(() => {
+    return {
+        root: {
+            textDecoration: 'none',
+        },
+        indicatorRoot: {
+            marginRight: rem(10),
+        },
+        iconText: {
+            color: '#fff',
+        },
+    };
+});
+
+const CartBadge = (_a) => {
+    var { count, styles, className, classNames, locale } = _a, boxProps = __rest(_a, ["count", "styles", "className", "classNames", "locale"]);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'CartBadge',
+        styles,
+        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;
+};
+
+const StyledDisplayWrapper = styled.div `
+  ${(props) => `
+    ${props.lowerBound !== 0 ? `@media (max-width: ${props.lowerBound - 1}px) { display: none; }` : ''}
+    ${props.upperBound !== 0 ? `@media (min-width: ${props.upperBound}px) { display: none; }` : ''}
+  `}
+`;
+
+const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
+    // use CSS to display or not
+    const [lowerBoundValue, upperBoundValue] = useMemo(() => getBoundariesFromMediaQueryKey(mediaQueryKey), [mediaQueryKey]);
+    return (React__default.createElement(StyledDisplayWrapper, { lowerBound: forceDisplay ? 0 : lowerBoundValue, upperBound: forceDisplay ? 0 : upperBoundValue, className: className, style: style }, children));
+};
+
+const useCSSFocusPopupHelper = (configs) => {
+    const { allowBgScroll } = configs || {};
+    const ref = useRef();
+    return {
+        containerRef: ref,
+        onContainerFocus: () => {
+            if (!allowBgScroll)
+                document.documentElement.style.overflow = 'hidden';
+        },
+        onContainerBlur: () => {
+            if (!allowBgScroll)
+                document.documentElement.style.overflow = '';
+        },
+        onButtonMouseDown: (e) => {
+            // this close popup when click, run after REact init
+            if (ref.current &&
+                (document.activeElement === ref.current ||
+                    ref.current.contains(document.activeElement))) {
+                ref.current.blur();
+                document.activeElement.blur();
+                e.preventDefault();
+            }
+        },
+        onClose: () => {
+            if (ref.current &&
+                (document.activeElement === ref.current ||
+                    ref.current.contains(document.activeElement))) {
+                ref.current.blur();
+                document.activeElement.blur();
+            }
+        },
+    };
+};
+
+const _StyledPopup = styled.div `
+  position: absolute;
+  right: 0;
+  transition: all 0.5s ease-in-out;
+  overflow-y: auto;
+  padding-bottom: 70px;
+
+  &[data-open='true'] {
+    z-index: 200;
+    top: 120%;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &[data-open='false'] {
+    display: none;
+  }
+
+  .popup-content {
+    z-index: 111;
+    height: 100%;
+    border: 1px solid #0000001a;
+    ${MediaQueries.mbDown} {
+      > div {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  /* min-height: 415px; */
+  ${MediaQueries.mbUp} {
+    width: 320px;
+  }
+  ${MediaQueries.mbDown} {
+    position: fixed;
+    left: 0;
+    width: 100%;
+  }
+`;
+const StyledPopupClass = 'hhgcomp-navprofilebutton-popup';
+const StyledPopup$1 = getDefaultClassWrapper(_StyledPopup, StyledPopupClass);
+const _StyledPopupWrapper = styled.div `
+  position: fixed;
+  z-index: 150;
+  top: var(--header-bottom, 56px);
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+
+  ${MediaQueries.mbUp} {
+    background-color: transparent;
+    &[data-type='welcome'] {
+      background: rgba(38, 38, 38, 0.3);
+    }
+    &[data-type='due-date'] {
+      background: rgba(38, 38, 38, 0.3);
+    }
+  }
+
+  ${MediaQueries.mbDown} {
+    background: rgba(38, 38, 38, 0.3);
+  }
+
+  &[data-type='welcome'] {
+    top: 0;
+  }
+
+  &[data-open='false'] {
+    display: none;
+  }
+`;
+const StyledPopupWrapperClass = 'hhgcomp-navprofilebutton-popupwrapper';
+getDefaultClassWrapper(_StyledPopupWrapper, StyledPopupWrapperClass);
+const StyledAvatar = styled.div `
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+
+  img {
+    border-radius: 50%;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+  }
+
+  .avatar-default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${theme.colors.secondaryBase};
+    border-radius: 50%;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+  }
+`;
+const StyledImageWrapper$1 = styled.div `
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  .user-close-icon {
+    display: none;
+  }
+  &:focus-within {
+    .user-close-icon {
+      display: block;
+    }
+    .user-avatar {
+      display: none;
+    }
+    .${StyledPopupClass} {
+      z-index: 200;
+      top: 120%;
+      opacity: 1;
+      visibility: visible;
+      display: initial;
+      ${MediaQueries.mbDown} {
+        top: 100%;
+      }
+    }
+    .${StyledPopupWrapperClass} {
+      display: initial;
+    }
+  }
+`;
+const StyledLoggedOutAnchor = styled.a `
+  display: inline-flex;
+  .login-btn[data-color='tertiary'][data-size='md'] {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  .mobile-only {
+    ${MediaQueries.mbUp} {
+      display: none;
+    }
+  }
+  .login-btn {
+    display: none;
+    ${MediaQueries.mbUp} {
+      display: block;
+    }
+  }
+`;
+
+const NavBookingIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M2.5 6.5a3.2 3.2 0 0 1 3.2-3.2h7.9a3.2 3.2 0 0 1 3.19 3.2v4.72a3.2 3.2 0 0 1-3.2 3.2H5.7a3.2 3.2 0 0 1-3.19-3.2V6.49Z", fill: "#E3F2FF" }),
+    React__default.createElement("path", { d: "M2.5 5.68A2.38 2.38 0 0 1 4.88 3.3h9.52a2.38 2.38 0 0 1 2.39 2.38H2.5Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M13.6 2.5h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65ZM5.27 4.86h.03c.36 0 .65-.3.65-.65V3.15a.65.65 0 0 0-.65-.65h-.03c-.36 0-.65.3-.65.65V4.2c0 .36.3.65.65.65Z", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M5.56 8.17h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41Zm2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41Zm2.7 0h-.5a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41Zm2.87 0h-.49a.4.4 0 0 0-.4.4v.59c0 .22.18.4.4.4h.49a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.41Zm-8.3 2.52h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Zm2.7 0h-.5a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Zm2.7 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Zm2.87 0h-.49a.4.4 0 0 0-.4.4v.58c0 .23.18.4.4.4h.5a.4.4 0 0 0 .4-.4v-.58a.4.4 0 0 0-.4-.4Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M16 16.8a3.17 3.17 0 1 0 0-6.36 3.17 3.17 0 0 0 0 6.35Z", fill: "#FE921D" }),
+    React__default.createElement("path", { d: "M15.78 13.62v-1.36a.21.21 0 0 1 .42 0v1.26l.48.4a.21.21 0 0 1-.01.33.21.21 0 0 1-.26-.01l-.55-.46-.02-.01a.21.21 0 0 1-.06-.15Z", fill: "#fff" })));
+
+const NavCommunityIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M7.06 4.97h-2.3a3.12 3.12 0 0 0-3.1 3.1v.43a3.12 3.12 0 0 0 3.1 3.1h1.39s1.47 1.11 1.5.97c.03-.22-.23-.99-.23-.99a3.13 3.13 0 0 0 2.72-3.09v-.41a3.12 3.12 0 0 0-3.08-3.11Zm-2.7 3.55a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46Zm1.35.4a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .65Zm1.57-.05Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M12.88 9.52a3.53 3.53 0 0 0-1.35 6.8s-.23 1.03-.2 1.25c.03.14 1.55-.99 1.55-.99a3.53 3.53 0 0 0 0-7.06Zm-1.33 4.24a.48.48 0 1 1 0-.97.48.48 0 0 1 0 .97Zm1.58.04a.33.33 0 1 1 0-.66.33.33 0 0 1 0 .66Zm1.34-.39a.23.23 0 1 1 0-.46.23.23 0 0 1 0 .46Z", fill: "#FFB521" }),
+    React__default.createElement("path", { d: "M16.45 1.67h-3.87a1.88 1.88 0 0 0-1.88 2.06l.22 2.29a1.88 1.88 0 0 0 1.73 1.7s-.17.94-.14 1.16c.02.14 1.66-1.13 1.66-1.13l1.92-.03a1.88 1.88 0 0 0 1.86-1.59l.36-2.29a1.88 1.88 0 0 0-1.86-2.17ZM13.1 5.23a.48.48 0 1 1 .34-.14c-.1.1-.22.14-.34.14Zm1.57.05a.33.33 0 1 1 .23-.1.33.33 0 0 1-.23.1Zm1.34-.4a.23.23 0 1 1 .1-.01.23.23 0 0 1-.1.02Z", fill: "#91CAFF" })));
+
+const NavDotIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("rect", { x: "8.33337", y: "8.33325", width: "3.33333", height: "3.33333", rx: "1.66667", fill: "#2D87F3" })));
+
+const NavEshopIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "m3.18 7.06 1.6 1.6 4.33-4.69a.72.72 0 0 0-.03-.99l-.22-.22a.72.72 0 0 0-.99-.02L3.18 7.06Zm13.64 0-1.6 1.6-4.33-4.69a.72.72 0 0 1 .02-.99l.23-.22a.72.72 0 0 1 .99-.02l4.69 4.32Z", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M15.04 16.7H4.9a.78.78 0 0 1-.77-.7l-.7-6.67h13.09l-.7 6.67a.78.78 0 0 1-.78.7Z", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M6.23 15.7a.23.23 0 0 1-.23-.22l-.3-4.46a.23.23 0 1 1 .47-.04l.3 4.47a.23.23 0 0 1-.22.25h-.02Zm2.39 0a.23.23 0 0 1-.23-.23L8.3 11a.23.23 0 1 1 .47 0l.07 4.46a.23.23 0 0 1-.22.24h-.01Zm5.15 0h-.02a.23.23 0 0 1-.2-.16.23.23 0 0 1-.02-.09l.3-4.47a.24.24 0 0 1 .25-.22.23.23 0 0 1 .22.26l-.3 4.46a.23.23 0 0 1-.23.22Zm-2.39 0a.23.23 0 0 1-.23-.23l.07-4.47a.24.24 0 0 1 .24-.23.23.23 0 0 1 .23.23l-.08 4.47a.23.23 0 0 1-.23.23Z", fill: "#2743AD" }),
+    React__default.createElement("path", { d: "M16.04 18.12a2.01 2.01 0 1 0 0-4.03 2.01 2.01 0 0 0 0 4.03Z", fill: "#FE921D" }),
+    React__default.createElement("path", { d: "M16.97 15.87h-.7v-.7a.23.23 0 0 0-.46 0v.7h-.7a.23.23 0 1 0 0 .47h.7v.69a.23.23 0 1 0 .47 0v-.7h.69a.23.23 0 1 0 0-.46Z", fill: "#fff" }),
+    React__default.createElement("path", { d: "M16.58 9.48H3.42a.8.8 0 0 1-.78-.7l-.13-1.1a.8.8 0 0 1 .78-.88h13.42a.8.8 0 0 1 .78.88l-.13 1.1a.8.8 0 0 1-.78.7Z", fill: "#BCDEFF" })));
+
+const NavHelpIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M10 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm0 13.194a.695.695 0 1 1 0-1.39.695.695 0 0 1 0 1.39Zm1.1-4.415a.698.698 0 0 0-.405.631v.312a.694.694 0 1 1-1.39 0v-.312c0-.81.477-1.553 1.213-1.893.707-.326 1.218-1.19 1.218-1.615 0-.956-.778-1.736-1.736-1.736s-1.736.78-1.736 1.736a.694.694 0 1 1-1.389 0A3.129 3.129 0 0 1 10 4.444a3.129 3.129 0 0 1 3.125 3.125c0 .939-.814 2.318-2.026 2.877Z", fill: "#FF6F4D" })));
+
+const NavLogOutIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M11.116 1.72 5.488.85a1.898 1.898 0 0 0-2.155 1.856v14.588a1.898 1.898 0 0 0 2.158 1.855l5.625-.869a1.865 1.865 0 0 0 1.592-1.855V3.575a1.87 1.87 0 0 0-1.592-1.855", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M17.642 9.584a.6.6 0 0 1-.232.472l-1.964 1.518a.446.446 0 0 1-.719-.353v-.51l-2.118-.01a.225.225 0 0 1-.223-.225v-1.8a.225.225 0 0 1 .224-.225l2.12.002-.004-.506a.446.446 0 0 1 .719-.354l1.965 1.52a.6.6 0 0 1 .232.471m-7.603-.908v1.802c0 .124.1.225.224.225h1.257c.124 0 .225-.1.225-.225V8.676c0-.124-.1-.224-.225-.224h-1.257c-.124 0-.224.1-.224.224m-.673 1.809a.224.224 0 0 1-.225.225h-.407a.61.61 0 0 1-.609-.61V9.069a.61.61 0 0 1 .61-.61h.406a.224.224 0 0 1 .225.225z", fill: "#FF6F4D" })));
+
+const NavMyHealthIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M6.114 3.333a4.64 4.64 0 0 1 3.565 1.708.412.412 0 0 0 .642 0 4.64 4.64 0 0 1 3.565-1.708c2.646 0 4.447 2.302 4.447 5.142 0 1.698-.904 4.446-2.675 6.102-2.522 2.358-4.665 2.965-5.392 3.11a1.3 1.3 0 0 1-.53 0c-.728-.146-2.871-.752-5.393-3.11-1.772-1.656-2.676-4.404-2.676-6.102 0-2.84 1.801-5.142 4.447-5.142", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M13.298 11.226v-.829a1.205 1.205 0 0 0-1.202-1.204h-.208a.26.26 0 0 1-.261-.259v-.208a1.205 1.205 0 0 0-1.201-1.204h-.832A1.205 1.205 0 0 0 8.39 8.726v.205a.26.26 0 0 1-.259.261h-.207a1.2 1.2 0 0 0-1.202 1.202v.834a1.204 1.204 0 0 0 1.202 1.201h.207a.26.26 0 0 1 .259.262v.205A1.205 1.205 0 0 0 9.594 14.1h.832a1.204 1.204 0 0 0 1.201-1.204v-.208a.26.26 0 0 1 .261-.258h.208a1.205 1.205 0 0 0 1.202-1.204", fill: "#fff" })));
+
+const NavSaveIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M4.767 17.236a1.36 1.36 0 0 0 1.256.188l4.097-1.397a.37.37 0 0 1 .28 0l4.097 1.397q.22.071.45.075c.29.002.573-.09.807-.263a1.43 1.43 0 0 0 .6-1.171V3.935A1.417 1.417 0 0 0 14.946 2.5H5.573a1.416 1.416 0 0 0-1.406 1.434v12.13a1.43 1.43 0 0 0 .6 1.172", fill: "#00CB8A" })));
+
+const NavSettingsIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M17.339 8.075a2.177 2.177 0 0 1-1.717-2.944 1.02 1.02 0 0 0-.305-1.15 8.2 8.2 0 0 0-2.445-1.417 1.03 1.03 0 0 0-1.16.323 2.173 2.173 0 0 1-3.423 0 1.03 1.03 0 0 0-1.161-.323A8.2 8.2 0 0 0 4.85 3.842a1.03 1.03 0 0 0-.322 1.183 2.167 2.167 0 0 1-1.806 2.978 1.03 1.03 0 0 0-.9.828 8 8 0 0 0-.05 2.861 1.03 1.03 0 0 0 .906.861 2.166 2.166 0 0 1 1.767 3.061 1.01 1.01 0 0 0 .283 1.211A8.2 8.2 0 0 0 7.15 18.22q.17.059.35.061a1.02 1.02 0 0 0 .833-.433 2.15 2.15 0 0 1 1.778-.934 2.18 2.18 0 0 1 1.745.878 1.02 1.02 0 0 0 1.2.339 8.3 8.3 0 0 0 2.222-1.328 1.03 1.03 0 0 0 .3-1.172 2.167 2.167 0 0 1 1.739-2.995 1.03 1.03 0 0 0 .872-.844 8 8 0 0 0 .144-1.405q0-.749-.138-1.484a1.02 1.02 0 0 0-.856-.828m-4.561 2.312a2.778 2.778 0 1 1-5.556 0 2.778 2.778 0 0 1 5.556 0", fill: "#2D87F3" })));
+
+const NavUserIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__default.createElement("path", { d: "M10 19.167A9.167 9.167 0 1 0 10 .833a9.167 9.167 0 0 0 0 18.334", fill: "#BCDEFF" }),
+    React__default.createElement("path", { d: "M17.356 15.463a9.188 9.188 0 0 0-14.716-.005 9.155 9.155 0 0 0 14.716.005", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M10 10.591a3.548 3.548 0 1 0 0-7.096 3.548 3.548 0 0 0 0 7.096", fill: "#2D87F3" })));
+
+const StyledNavMenu = styled.div `
+  padding: 16px;
+  border-radius: 16px;
+  background-color: white;
+  hr {
+    border-color: ${theme.colors.neutral100};
+    border-bottom-width: 0px;
+    border-style: solid;
+  }
+  .profile-nav-item-group {
+    background-color: white;
+    border-radius: 8px;
+  }
+`;
+const StyledNavMenuItem = styled.div `
+  display: block;
+  border: 1px solid transparent;
+  transition: all 300ms linear;
+  cursor: pointer;
+  position: relative;
+
+  ${(props) => props.hasSubmenu &&
+    css `
+      cursor: pointer;
+    `}
+
+  &[data-is-open='true'] {
+    & + div {
+      margin-top: 8px;
+    }
+  }
+
+  border-left-width: 0;
+  border-right-width: 0;
+  &[data-is-open='true'] {
+    & + div {
+      margin-top: 0;
+    }
+    .nav-menu-item:last-child {
+      border-bottom-color: ${theme.colors.neutral100};
+    }
+  }
+  .nav-menu-item {
+    background-color: ${theme.colors.neutral50};
+  }
+
+  .nav-menu-item {
+    padding-left: 38px;
+  }
+`;
+const StyledNavMenuItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 48px;
+  border: 1px solid transparent;
+  transition: all 300ms;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: ${theme.colors.neutral150};
+  }
+  &[data-active='true'] {
+    background-color: ${theme.colors.blue50};
+  }
+`;
+const StyledNavMenuItemDropdown = styled.div `
+  margin-left: auto;
+
+  svg {
+    fill: ${theme.colors.gray600};
+    transition: transform 300ms;
+  }
+
+  &[data-is-open='true'] svg {
+    transform: rotate(180deg);
+  }
+`;
+const StyledNavFooterSubMenu = styled.div `
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s ease-out;
+
+  [data-is-open='true'] & {
+    max-height: 500px;
+    transition-timing-function: ease-in;
+  }
+`;
+
+const rankIconUrlMap = {
+    helloSites: {
+        member: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
+        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
+        doctor: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
+        expert: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
+        influencer: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
+    },
+    marryBaby: {
+        member: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
+        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
+        doctor: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
+        expert: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
+        influencer: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
+    },
+};
+const Rank = ({ rank, siteType = 'helloSites', }) => {
+    const iconUrl = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = rankIconUrlMap[siteType]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
+    }, [rank, siteType]);
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { style: {
+            display: 'inline-flex',
+            height: 'fit-content',
+            alignItems: 'center',
+            padding: '5px 12px',
+            gap: '4px',
+            borderRadius: 16,
+            border: `1px solid ${siteType === 'helloSites' ? theme.colors.blue100 : theme.colors.mb100}`,
+        } },
+        React__default.createElement("img", { src: iconUrl, alt: rank, style: {
+                height: 16,
+                width: 16,
+            } }),
+        React__default.createElement(Text, { size: "s5", color: "gray.8", weight: "semiBold" }, t(`userProfile.userRank.${rank}`))));
+};
+
+const UserInfoSection = ({ siteType = 'helloSites', userInfo, }) => {
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'space-between',
+            } },
+            React__default.createElement(Avatar, { src: userInfo.avatar, alt: userInfo.name, size: 48, style: { marginBottom: 8 } }),
+            React__default.createElement(Rank, { rank: "member", siteType: siteType })),
+        React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "gray.8", style: { marginBottom: 4 } }, userInfo.name),
+        React__default.createElement(Text, { size: "n1", weight: "regular", color: siteType === 'helloSites' ? 'hb.6' : 'mb.6' },
+            "@",
+            userInfo.username),
+        React__default.createElement("hr", null))) : null;
+};
+
+const ProfileNavigation = ({ className, activeItem: forceActiveItem, navMenuItems: navMenuItemsProp, style, onLogout, siteType = 'helloSites', userInfo, }) => {
+    const { locale } = useTranslations();
+    const [localActiveItem, setLocalActiveItem] = useState();
+    const activeItem = typeof forceActiveItem === 'string' ? forceActiveItem : localActiveItem;
+    const SSO_URL = normalizeLinkSlash(getCurrentSsoUrl(locale, siteType === 'marryBaby') + '/');
+    const BASE_URL = normalizeLinkSlash(getCurrentBaseUrl(locale, siteType === 'marryBaby') + '/');
+    const navMenuItems = navMenuItemsProp || [
+        [
+            {
+                key: 'userProfile.nav.header.viewProfile',
+                icon: React__default.createElement(NavUserIcon, { width: "24", height: "24" }),
+                value: 'profile',
+                tracking: {
+                    action: 'Profile Click',
+                },
+                link: `${SSO_URL}user/profile/`,
+            },
+            {
+                key: 'userProfile.nav.card.myHealth',
+                icon: React__default.createElement(NavMyHealthIcon, { width: "24", height: "24" }),
+                value: 'myHealth',
+                tracking: {
+                    action: 'My Health Click',
+                },
+                link: `${SSO_URL}user/health/`,
+            },
+            {
+                key: 'userProfile.nav.card.mySaved',
+                icon: React__default.createElement(NavSaveIcon, { width: "24", height: "24" }),
+                iconColor: 'green_300',
+                value: 'saved',
+                tracking: {
+                    action: 'Bookmarks Click',
+                },
+                link: `${SSO_URL}user/saved/`,
+            },
+            {
+                key: 'userProfile.nav.card.myBooking',
+                icon: React__default.createElement(NavBookingIcon, { width: "24", height: "24" }),
+                value: 'booking',
+                disabled: !CARE_LOCALES.includes(locale),
+                tracking: {
+                    action: 'Manage Booking Click',
+                },
+                link: `${SSO_URL}user/booking/`,
+            },
+            {
+                key: 'userProfile.nav.card.myCommunity',
+                icon: React__default.createElement(NavCommunityIcon, { width: "24", height: "24" }),
+                value: 'myCommunities',
+                disabled: !TOGETHER_LOCALES.includes(locale),
+                tracking: {
+                    action: 'Community Click',
+                },
+                link: `${SSO_URL}user/my-communities/`,
+            },
+        ],
+        ...(ECOM_LOCALES.includes(locale)
+            ? [
+                [
+                    {
+                        key: 'userProfile.nav.card.eCom',
+                        icon: React__default.createElement(NavEshopIcon, { width: "24", height: "24" }),
+                        value: 'eCom',
+                        disabled: !ECOM_LOCALES.includes(locale),
+                        subMenu: [
+                            {
+                                key: 'userProfile.nav.card.ecom.manageOrders',
+                                value: 'eCom-manageOrders',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/quan-li-don-hang/`,
+                                tracking: {
+                                    action: 'Order Management Click',
+                                },
+                            },
+                            {
+                                key: 'userProfile.nav.card.ecom.DeliveryAddress',
+                                value: 'eCom-manageAddress',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/dia-chi-giao-hang/`,
+                                tracking: {
+                                    action: 'Address Management Click',
+                                },
+                            },
+                            {
+                                key: 'userProfile.nav.card.ecom.voucher',
+                                value: 'eCom-voucher',
+                                icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                                link: `${BASE_URL}shop/ho-so/khuyen-mai/`,
+                                tracking: {
+                                    action: 'Voucher Click',
+                                },
+                            },
+                            // {
+                            //   key: 'nav.card.memberCard',
+                            //   value: 'eCom-memberCard',
+                            //   icon: <NavDotIcon   width="24"
+                            // height="24"/>,
+                            //   link: routingHandler
+                            //     .getLocalisedUrl('', 'PROFILE_MEMBER_CARD')
+                            //     .toString(),
+                            //   tracking: {
+                            //     action: 'Member Card Click',
+                            //   },
+                            // },
+                        ],
+                    },
+                ],
+            ]
+            : []),
+        [
+            {
+                key: 'userProfile.nav.menu.accountSettings',
+                icon: React__default.createElement(NavSettingsIcon, { width: "24", height: "24" }),
+                subMenu: [
+                    {
+                        key: 'common.profileNavigator.newsletterSubscription',
+                        value: 'subscription',
+                        icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                        tracking: { action: 'Subscription Click' },
+                        link: `${SSO_URL}user/subscriptions/`,
+                        disabled: locale !== 'vi-VN',
+                    },
+                    {
+                        key: 'userProfile.nav.menu.password',
+                        value: 'password',
+                        icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                        tracking: { action: 'Set Password Click' },
+                        link: `${SSO_URL}user/password/`,
+                    },
+                    {
+                        key: 'userProfile.nav.menu.disableAccount',
+                        value: 'disable-account',
+                        icon: React__default.createElement(NavDotIcon, { width: "24", height: "24" }),
+                        tracking: { action: 'Disable Account Click' },
+                        link: `${SSO_URL}user/disable-account/`,
+                    },
+                ],
+            },
+        ],
+        [
+            {
+                key: 'userProfile.nav.menu.help',
+                icon: React__default.createElement(NavHelpIcon, { width: "24", height: "24" }),
+                value: 'help',
+                link: `${SSO_URL}user/help`,
+                tracking: {
+                    action: 'Support Click',
+                },
+            },
+            {
+                key: 'userProfile.nav.menu.logout',
+                icon: React__default.createElement(NavLogOutIcon, { width: "24", height: "24" }),
+                value: 'logout',
+                tracking: {
+                    action: 'Sign Out Click',
+                },
+            },
+        ],
+    ];
+    return (React__default.createElement(StyledNavMenu, { className: className, style: style },
+        React__default.createElement(UserInfoSection, { userInfo: userInfo, siteType: siteType }),
+        navMenuItems.map((items, index) => (React__default.createElement(Fragment, { key: index },
+            React__default.createElement("div", { className: "profile-nav-item-group", key: index }, items.map((item) => (React__default.createElement(NavMenuItem, { key: item.key, item: item, activeKey: activeItem || '', onLogout: onLogout, onClick: () => setLocalActiveItem((k) => k === item.key ? undefined : item.key), siteType: siteType })))),
+            index !== navMenuItems.length - 1 && React__default.createElement("hr", null))))));
+};
+const NavMenuItem = ({ item, activeKey, forceOpen, onLogout, onClick, siteType = 'helloSites', }) => {
+    var _a, _b;
+    const [localOpen, setLocalOpen] = useState(false);
+    const currentUrl = useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    if (item.disabled) {
+        return null;
+    }
+    const { t } = useTranslations();
+    const hasChildActive = (_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.some((subItem) => subItem.key === activeKey);
+    const isActive = activeKey === item.key;
+    useEffect(() => {
+        if (hasChildActive || isActive) {
+            setLocalOpen(true);
+        }
+    }, [hasChildActive, isActive]);
+    const isOpen = typeof forceOpen === 'boolean' ? forceOpen : localOpen;
+    return (React__default.createElement(StyledNavMenuItem, { as: !item.subMenu ? 'a' : undefined, "data-is-open": isOpen, key: item.key, hasSubmenu: !!item.subMenu, onClick: () => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (item.subMenu && !forceOpen) {
+                setLocalOpen((k) => !k);
+            }
+            else {
+                if (item.value === 'logout') {
+                    onLogout === null || onLogout === void 0 ? void 0 : onLogout();
+                }
+                else if (item.link) {
+                    window.location.href = item.link;
+                }
+            }
+        }, "data-event-category": "Ecommerce", "data-event-action": ((_b = item === null || item === void 0 ? void 0 : item.tracking) === null || _b === void 0 ? void 0 : _b.action) || '', "data-event-label": currentUrl },
+        React__default.createElement(StyledNavMenuItemContent, { "data-active": isActive },
+            item.icon,
+            React__default.createElement(Text, { size: "p3", style: {
+                    marginLeft: item.icon ? 24 : 48,
+                    transition: `color 300ms`,
+                }, color: isActive ? (siteType === 'helloSites' ? 'hb.6' : 'mb.6') : 'gray.8' }, t(item.key)),
+            item.subMenu && (React__default.createElement(StyledNavMenuItemDropdown, { "data-is-open": isOpen },
+                React__default.createElement(ChevronDown, { width: 14 })))),
+        item.subMenu && (React__default.createElement(StyledNavFooterSubMenu, null, item.subMenu.map((subItem) => (React__default.createElement(NavMenuItem, { key: subItem.key, item: subItem, activeKey: activeKey, onLogout: onLogout, siteType: siteType })))))));
+};
+
+const ProfilePopup = ({ isOpen, userInfo, closePopup, siteType = 'helloSites', dispatchLogout, }) => {
+    const handleClickLogout = () => {
+        if (dispatchLogout) {
+            dispatchLogout();
+            closePopup();
+        }
+    };
+    return (React__default.createElement(StyledPopup$1, { "data-open": isOpen },
+        React__default.createElement("div", { className: "popup-content" },
+            React__default.createElement(ProfileNavigation, { siteType: siteType, onLogout: handleClickLogout, userInfo: userInfo }))));
+};
+
+const StyledPopup = styled.div `
+  background-color: white;
+  text-align: center;
+  .cancle-img {
+    margin-top: 24px;
+    ${MediaQueries.mbDown} {
+      width: 80px;
+      height: 80px;
+    }
+
+    ${MediaQueries.mbUp} {
+      width: 100px;
+      height: 100px;
+    }
+  }
+
+  h2 {
+    margin-top: 32px;
+    color: ${theme.colors.gray800};
+    font-style: normal;
+    font-weight: bold;
+    ${MediaQueries.mbDown} {
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    ${MediaQueries.mbUp} {
+      font-size: 32px;
+      line-height: 42px;
+    }
+  }
+
+  p {
+    margin-top: 8px;
+    color: ${theme.colors.gray600};
+    font-style: normal;
+    font-weight: normal;
+    ${MediaQueries.mbDown} {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    ${MediaQueries.mbUp} {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`;
+const StyledButtonGroup = styled.div `
+  display: flex;
+
+  ${MediaQueries.mbDown} {
+    margin-top: 24px;
+  }
+
+  ${MediaQueries.mbUp} {
+    margin-top: 32px;
+  }
+  justify-content: space-around;
+  button {
+    flex: 1;
+    margin: 4px;
+  }
+
+  ${(props) => props.siteType === 'marryBaby'
+    ? `
+        .cancel-button {
+            background-color: #E55C8A;
+        }
+        .cancel-button:hover {
+          background-color: #E55C8A !important;
+        }
+        .logout-button {
+            border-color: #E55C8A;
+            color: #E55C8A;
+        }
+      `
+    : ''}
+`;
+
+const NavigationLogoutPopup = ({ openLogoutPopup, onCloseHandler, onLogoutHandler, siteType = 'helloSites', }) => {
+    const { t } = useTranslations();
+    useEffect(() => {
+        document.body.classList.toggle('noscroll', openLogoutPopup);
+    }, [openLogoutPopup]);
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(Popup, { type: "confirm", isOpen: openLogoutPopup, closeIcon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('closeLight.svg'), style: { width: 24, height: 24 }, alt: "close-icon", loading: "lazy" }), onClose: onCloseHandler },
+            React__default.createElement(StyledPopup, null,
+                siteType === 'helloSites' && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('arrowDoor.svg'), className: "cancle-img", alt: "close-account", loading: "lazy" })),
+                React__default.createElement("h2", null, t(siteType === 'helloSites'
+                    ? 'logout.popup.ask1'
+                    : 'logout.popup.ask.mb')),
+                React__default.createElement("p", null, t('logout.popup.ask2')),
+                React__default.createElement(StyledButtonGroup, { siteType: siteType },
+                    React__default.createElement(Button, { className: "logout-button", color: "tertiary", size: "lg", onClick: onLogoutHandler }, t('logout.popup.button.logout')),
+                    React__default.createElement(Button, { className: "cancel-button", color: "primary", size: "lg", onClick: onCloseHandler }, t('logout.popup.button.cancel')))))));
+};
+
+const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, currentUrl, isMinifyLogin, onLogout, style, isLoading, locale, }) => {
+    const { t } = useTranslations();
+    const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false);
+    const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
+    const [init, setInit] = useState(false);
+    useEffect(() => {
+        setInit(true);
+    }, []);
+    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper();
+    if (isLoading)
+        return React__default.createElement(Button$1, { size: "sm", color: "transparent", loading: true });
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledImageWrapper$1, { ref: containerRef, style: style, tabIndex: 0, onBlur: onContainerBlur, onFocus: () => {
+                var _a;
+                onContainerFocus();
+                const popup = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#desktop-sticky-header .hhgcomp-navprofilebutton-popup');
+                if (popup) {
+                    const bound = popup.getBoundingClientRect();
+                    const top = bound.top;
+                    const maxHeight = `calc(100vh - ${top}px)`;
+                    popup.setAttribute('style', `max-height: ${maxHeight};`);
+                }
+            } },
+            React__default.createElement("div", { onMouseDown: onButtonMouseDown },
+                React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "user-close-icon" },
+                    React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" })),
+                React__default.createElement(Avatar, { size: 40, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
+                        ? theme.mbColors.pink
+                        : theme.colors.secondaryBase, placeholderText: name && name.length ? name[0].toUpperCase() : 'A' })),
+            React__default.createElement(ProfilePopup, { dispatchLogout: () => {
+                    onClose();
+                    setIsLogoutConfirmOpen(true);
+                }, isOpen: false, closePopup: onClose, siteType: siteType, userInfo: userInfo })),
+        React__default.createElement(NavigationLogoutPopup, { openLogoutPopup: isLogoutConfirmOpen, onCloseHandler: () => {
+                document.body.classList.toggle('noscroll', false);
+                setIsLogoutConfirmOpen(false);
+            }, siteType: siteType, onLogoutHandler: () => __awaiter(void 0, void 0, void 0, function* () {
+                setIsLogoutConfirmOpen(false);
+                document.body.classList.toggle('noscroll', false);
+                yield onLogout();
+            }) }))) : (React__default.createElement(StyledLoggedOutAnchor, { style: Object.assign({ textDecoration: 'none' }, style), "data-event-category": "Sign Up", "data-event-action": "Button Click", "data-event-label": currentUrl, href: !init
+            ? normalizeLinkSlash(`${SSO_URL}?returnUrl=${currentUrl}`)
+            : undefined, "data-site-type": siteType }, isMinifyLogin ? (React__default.createElement(StyledAvatar, { onClick: onLoginClick },
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('lock.png'), className: "avatar", loading: "lazy", alt: "avatar" }))) : (
+    // LOGIC:
+    // - DEsktop: always show button
+    // - Mobile: show button only for helloSites, show text for MarryBaby
+    React__default.createElement(React__default.Fragment, null,
+        siteType === 'helloSites' &&
+            (locale === LOCALE.Indonesia ||
+                locale === LOCALE.PhilippinesTagalog ||
+                locale === LOCALE.PhilippinesEnglish ? (React__default.createElement("img", { className: "mobile-only", src: CommonGAssets.getAssetPath('login.svg'), style: {
+                    cursor: 'pointer',
+                    height: 24,
+                    width: 24,
+                }, onClick: onLoginClick })) : (React__default.createElement(Button$1, { className: "mobile-only", size: "sm", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }), sx: {
+                    paddingLeft: '8px',
+                    paddingRight: '12px',
+                } }, t('navigation.loginJoin')))),
+        siteType === 'marryBaby' && (React__default.createElement("div", { className: "mobile-only", onClick: onLoginClick, style: {
+                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'))))));
+};
+
+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, }) => {
+    const config = useMemo(() => {
+        const enableSearchBar = projectType === 'discover' ||
+            projectType === 'marryBaby' ||
+            (projectType === 'profile' && siteType === 'marryBaby');
+        const enableNavCare = siteType !== 'marryBaby' &&
+            projectType !== 'marryBaby' &&
+            CARE_LOCALES.includes(locale);
+        const enableNavCareBooking = enableBookingBtn &&
+            projectType !== 'marryBaby' &&
+            projectType === 'discover' &&
+            siteType !== 'marryBaby' &&
+            CARE_BOOKING_LOCALES.includes(locale);
+        const enableNavTogether = projectType === 'marryBaby' || TOGETHER_LOCALES.includes(locale);
+        const enableNavDiscover = true;
+        const enableNavHealthTools = true;
+        const enableProfileMySaved = true;
+        const enableNavEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
+        const enableProfileEcom = siteType !== 'marryBaby' && ECOM_LOCALES.includes(locale);
+        const enableProfileMyHealth = true;
+        const baseUrl = getCurrentBaseUrl(locale, siteType === 'marryBaby');
+        let fixBaseUrl = baseUrl;
+        if (typeof window !== 'undefined') {
+            if (fixBaseUrl.includes('//id.'))
+                fixBaseUrl = fixBaseUrl.replace('id.', '');
+            if (fixBaseUrl.includes('//staging-id.'))
+                fixBaseUrl = fixBaseUrl.replace('staging-id.', 'discover.');
+        }
+        const ssoUrl = getCurrentSsoUrl(locale, siteType === 'marryBaby');
+        const statics = (() => {
+            return {
+                HOME_PAGE_URL: fixBaseUrl,
+                CARE_URL_FE: `${fixBaseUrl}/care`,
+                TOGETHER_URL_FE: `${fixBaseUrl}/community`,
+                SSO_URL: ssoUrl,
+                TOGETHER_API: getTogetherApiDomain(),
+                DISCOVER_API: getDiscoverApiDomain(locale),
+            };
+        })();
+        return {
+            enableSearchBar,
+            enableNavCare,
+            enableNavCareBooking,
+            enableNavTogether,
+            enableNavEcom,
+            enableProfileEcom,
+            enableProfileMyHealth,
+            enableNavDiscover,
+            enableNavHealthTools,
+            enableProfileMySaved,
+            statics,
+        };
+    }, [locale, projectType]);
+    return config;
+};
+
+const NavigationContext = React__default.createContext({});
+const NavigationProvider = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const [currentUrl, setCurrentUrl] = React__default.useState(() => {
+        return (props.currentUrl ||
+            `https://${props.siteType === 'marryBaby'
+                ? domainLocalesMarryBaby[props.locale || 'en-PH']
+                : domainLocales[props.locale || 'en-PH']}${props.projectType === 'together'
+                ? '/community'
+                : props.projectType === 'ecom'
+                    ? '/ecom'
+                    : props.projectType === 'care'
+                        ? '/care'
+                        : ''}/`);
+    });
+    useEffect(() => {
+        const update = () => {
+            setCurrentUrl(window.location.href);
+        };
+        window.addEventListener('popstate', update);
+        update();
+        return () => {
+            window.removeEventListener('popstate', update);
+        };
+    }, []);
+    const configs = useNavConfig({
+        locale: props.locale,
+        projectType: props.projectType,
+        siteType: props.siteType,
+        enableBookingBtn: props.enableBookingBtn,
+    });
+    return (React__default.createElement(NavigationContext.Provider, { value: Object.assign(Object.assign({}, props), { configs: Object.assign(Object.assign({}, configs), props.configs), currentUrl: props.currentUrl || currentUrl }) }, children));
+};
+
+function ClosePopupIcon({ className }) {
+    return (React__default.createElement("div", null,
+        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
+            React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
+}
+
+function HamburgerIcon({ siteType, enableSearch, className }) {
+    if (siteType === 'helloSites') {
+        return (React__default.createElement("div", null,
+            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" })));
+    }
+    /** Marry Baby */
+    return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.34961 15C3.34961 14.641 3.64062 14.35 3.99961 14.35L13.9996 14.35C14.3586 14.35 14.6496 14.641 14.6496 15C14.6496 15.359 14.3586 15.65 13.9996 15.65L3.99961 15.65C3.64062 15.65 3.34961 15.359 3.34961 15ZM3.34961 8.99999C3.34961 8.64101 3.64062 8.34999 3.99961 8.34999L19.9992 8.34999C20.3582 8.34999 20.6492 8.64101 20.6492 8.99999C20.6492 9.35898 20.3582 9.64999 19.9992 9.64999L3.99961 9.64999C3.64062 9.64999 3.34961 9.35898 3.34961 8.99999Z", fill: "#3E3F58" })));
+}
+
+// import { StyledMenuPopupWrapperClass } from '../../atoms/PopupWrapper/index.styled'
+const StyledMasterMenuContainer = styled.div `
+  position: fixed;
+  z-index: 201;
+  top: calc(100% + 1px);
+  width: 100%;
+  height: calc(100vh - var(--header-bottom));
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0;
+  left: 0;
+  .hhgcomp-navigation-popupwrapper-menuwrapper {
+    position: unset;
+  }
+`;
+// Desktop
+// export const StyledMenuPopupWrapper = styled.div`
+//   position: fixed;
+//   z-index: ${Z_INDEX.menuCategoryPopupWrapper};
+//   top: 69px;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   align-items: center;
+//   background-color: transparent;
+//   &[data-is-display='false'] {
+//     display: none;
+//   }
+// `
+const StyledServiceListMenuSearchInputWrapper = styled.div `
+  padding: 16px;
+  padding-bottom: 12px;
+  .fake-search-input {
+    pointer-events: none;
+    input {
+      line-height: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+  &[data-theme='marryBaby'] {
+    input {
+      background: ${theme.mbColors.lightGray};
+      border-radius: 16px;
+      border: none;
+    }
+  }
+`;
+const StyledWrapper = styled.div `
+  display: block;
+  overflow-y: auto;
+  flex: 1;
+  padding-bottom: 16px;
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+`;
+
+const SearchInput = ({ id }) => {
+    const { locale, configs: { statics }, siteType, } = useContext(NavigationContext);
+    const { t } = useTranslations();
+    return (React__default.createElement(Input, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", 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: () => undefined, onKeyDown: (e) => e.key === 'Enter' &&
+            (window.location.href = `${statics.HOME_PAGE_URL}/search/?s=${e.target.value}`), type: "search", onFocus: (e) => {
+            e.preventDefault();
+        }, icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click" },
+            React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: {
+                    verticalAlign: 'bottom',
+                } },
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.97183 10.8732C3.97183 7.0617 7.0617 3.97183 10.8732 3.97183C14.6848 3.97183 17.7746 7.0617 17.7746 10.8732C17.7746 14.6848 14.6848 17.7746 10.8732 17.7746C7.0617 17.7746 3.97183 14.6848 3.97183 10.8732ZM10.8732 2C5.97268 2 2 5.97268 2 10.8732C2 15.7738 5.97268 19.7465 10.8732 19.7465C12.9683 19.7465 14.8938 19.0204 16.4118 17.8061L20.3169 21.7112C20.702 22.0963 21.3262 22.0963 21.7112 21.7112C22.0963 21.3262 22.0963 20.702 21.7112 20.3169L17.8061 16.4118C19.0204 14.8938 19.7465 12.9683 19.7465 10.8732C19.7465 5.97268 15.7738 2 10.8732 2Z", fill: "#8C8C8C" }))) }));
+};
+
+const StyledItemGridLeft = styled.div `
+  padding-right: 1rem;
+  margin-top: 10px;
+  background: #ffffff;
+  padding: 5px 15px;
+  ${MediaQueries.mbUp} {
+    border-right: 1px solid #e4e8ec;
+  }
+`;
+const StyledItem$6 = styled.a `
+  padding: 10px 0;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: ${theme.colors.gray800};
+  * {
+    pointer-events: none;
+  }
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    padding: 0 0.4rem;
+  }
+
+  &[data-theme='marryBaby']:hover,
+  &[data-theme='marryBaby'][data-active='true'] {
+    p {
+      color: ${theme.mbColors.pink};
+    }
+    .icon {
+      background-color: ${theme.mbColors.lightPink};
+    }
+  }
+  &[data-theme='helloSites']:hover,
+  &[data-theme='helloSites'][data-active='true'] {
+    p {
+      color: ${theme.colors.primaryActive};
+    }
+  }
+  a {
+  }
+
+  &[data-theme='marryBaby'] {
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 40px;
+      width: 100%;
+      height: 40px;
+      border-radius: 50%;
+      background-color: ${theme.mbColors.lightGray};
+      img {
+        border-radius: 50%;
+      }
+    }
+  }
+`;
+const StyledHeading$1 = styled.div `
+  margin: 15px 0;
+  ${MediaQueries.mbDown} {
+    display: none;
+  }
+`;
+const StyledIconNav = styled.div `
+  display: flex;
+  position: absolute;
+  right: 0;
+  ${MediaQueries.mbUp} {
+    display: none;
+  }
+`;
+const StyledItemAll = styled.div `
+  display: flex;
+  align-items: center;
+  color: ${theme.colors.primaryBase};
+  font-size: ${theme.sizes.fsParagraph4};
+  font-weight: ${theme.sizes.fwBold};
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 600;
+  &[data-event-category] * {
+    pointer-events: none;
+  }
+  &[data-theme='marryBaby'] {
+    color: ${theme.mbColors.pink};
+  }
+`;
+const StyledImageWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
+const StyledViewMore$1 = styled.a `
+  border: 1px solid ${theme.colors.primaryBase};
+  &[data-theme='marryBaby'] {
+    border: 1px solid ${theme.mbColors.pink};
+
+    svg path {
+      stroke: ${theme.mbColors.pink};
+    }
+  }
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 5px;
+  margin-top: 20px;
+  ${MediaQueries.mbDown} {
+    display: none;
+  }
+`;
+
+var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","careIconContainer":"gB4rp89","scale":"EDlp5Zf"};
+
+const ItemMenu = ({ item, menu }) => {
+    const { containerRef, onContainerFocus, onContainerBlur, 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("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                            React__default.createElement("path", { d: "M13.4751 21.5C11.8084 21.5 10.3918 20.9167 9.2251 19.75C8.05843 18.5833 7.4751 17.1667 7.4751 15.5V14.95C6.1251 14.7833 4.9961 14.1833 4.0881 13.15C3.17943 12.1167 2.7251 10.9 2.7251 9.5V4.65C2.7251 4.4 2.81243 4.18733 2.9871 4.012C3.16243 3.83733 3.3751 3.75 3.6251 3.75H5.7251V3.5C5.7251 3.28333 5.7961 3.104 5.9381 2.962C6.07943 2.82067 6.25843 2.75 6.4751 2.75C6.69176 2.75 6.8711 2.82067 7.0131 2.962C7.15443 3.104 7.2251 3.28333 7.2251 3.5V5.5C7.2251 5.71667 7.15443 5.89567 7.0131 6.037C6.8711 6.179 6.69176 6.25 6.4751 6.25C6.25843 6.25 6.07943 6.179 5.9381 6.037C5.7961 5.89567 5.7251 5.71667 5.7251 5.5V5.25H4.2251V9.5C4.2251 10.6 4.61676 11.5417 5.4001 12.325C6.18343 13.1083 7.1251 13.5 8.2251 13.5C9.3251 13.5 10.2668 13.1083 11.0501 12.325C11.8334 11.5417 12.2251 10.6 12.2251 9.5V5.25H10.7251V5.5C10.7251 5.71667 10.6544 5.89567 10.5131 6.037C10.3711 6.179 10.1918 6.25 9.9751 6.25C9.75843 6.25 9.57943 6.179 9.4381 6.037C9.2961 5.89567 9.2251 5.71667 9.2251 5.5V3.5C9.2251 3.28333 9.2961 3.104 9.4381 2.962C9.57943 2.82067 9.75843 2.75 9.9751 2.75C10.1918 2.75 10.3711 2.82067 10.5131 2.962C10.6544 3.104 10.7251 3.28333 10.7251 3.5V3.75H12.8251C13.0751 3.75 13.2878 3.83733 13.4631 4.012C13.6378 4.18733 13.7251 4.4 13.7251 4.65V9.5C13.7251 10.9 13.2711 12.1167 12.3631 13.15C11.4544 14.1833 10.3251 14.7833 8.9751 14.95V15.5C8.9751 16.75 9.41276 17.8127 10.2881 18.688C11.1628 19.5627 12.2251 20 13.4751 20C14.7251 20 15.7878 19.5627 16.6631 18.688C17.5378 17.8127 17.9751 16.75 17.9751 15.5V13.875C17.4584 13.7083 17.0294 13.404 16.6881 12.962C16.3461 12.5207 16.1751 12.0167 16.1751 11.45C16.1751 10.7333 16.4251 10.125 16.9251 9.625C17.4251 9.125 18.0251 8.875 18.7251 8.875C19.4418 8.875 20.0501 9.125 20.5501 9.625C21.0501 10.125 21.3001 10.7333 21.3001 11.45C21.3001 12.0167 21.1294 12.5207 20.7881 12.962C20.4461 13.404 20.0084 13.7083 19.4751 13.875V15.5C19.4751 17.1667 18.8918 18.5833 17.7251 19.75C16.5584 20.9167 15.1418 21.5 13.4751 21.5Z", fill: "#2D87F3", strokeWidth: 0 })))),
+                    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", { "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("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                        React__default.createElement("path", { d: "M13.4751 21.5C11.8084 21.5 10.3918 20.9167 9.2251 19.75C8.05843 18.5833 7.4751 17.1667 7.4751 15.5V14.95C6.1251 14.7833 4.9961 14.1833 4.0881 13.15C3.17943 12.1167 2.7251 10.9 2.7251 9.5V4.65C2.7251 4.4 2.81243 4.18733 2.9871 4.012C3.16243 3.83733 3.3751 3.75 3.6251 3.75H5.7251V3.5C5.7251 3.28333 5.7961 3.104 5.9381 2.962C6.07943 2.82067 6.25843 2.75 6.4751 2.75C6.69176 2.75 6.8711 2.82067 7.0131 2.962C7.15443 3.104 7.2251 3.28333 7.2251 3.5V5.5C7.2251 5.71667 7.15443 5.89567 7.0131 6.037C6.8711 6.179 6.69176 6.25 6.4751 6.25C6.25843 6.25 6.07943 6.179 5.9381 6.037C5.7961 5.89567 5.7251 5.71667 5.7251 5.5V5.25H4.2251V9.5C4.2251 10.6 4.61676 11.5417 5.4001 12.325C6.18343 13.1083 7.1251 13.5 8.2251 13.5C9.3251 13.5 10.2668 13.1083 11.0501 12.325C11.8334 11.5417 12.2251 10.6 12.2251 9.5V5.25H10.7251V5.5C10.7251 5.71667 10.6544 5.89567 10.5131 6.037C10.3711 6.179 10.1918 6.25 9.9751 6.25C9.75843 6.25 9.57943 6.179 9.4381 6.037C9.2961 5.89567 9.2251 5.71667 9.2251 5.5V3.5C9.2251 3.28333 9.2961 3.104 9.4381 2.962C9.57943 2.82067 9.75843 2.75 9.9751 2.75C10.1918 2.75 10.3711 2.82067 10.5131 2.962C10.6544 3.104 10.7251 3.28333 10.7251 3.5V3.75H12.8251C13.0751 3.75 13.2878 3.83733 13.4631 4.012C13.6378 4.18733 13.7251 4.4 13.7251 4.65V9.5C13.7251 10.9 13.2711 12.1167 12.3631 13.15C11.4544 14.1833 10.3251 14.7833 8.9751 14.95V15.5C8.9751 16.75 9.41276 17.8127 10.2881 18.688C11.1628 19.5627 12.2251 20 13.4751 20C14.7251 20 15.7878 19.5627 16.6631 18.688C17.5378 17.8127 17.9751 16.75 17.9751 15.5V13.875C17.4584 13.7083 17.0294 13.404 16.6881 12.962C16.3461 12.5207 16.1751 12.0167 16.1751 11.45C16.1751 10.7333 16.4251 10.125 16.9251 9.625C17.4251 9.125 18.0251 8.875 18.7251 8.875C19.4418 8.875 20.0501 9.125 20.5501 9.625C21.0501 10.125 21.3001 10.7333 21.3001 11.45C21.3001 12.0167 21.1294 12.5207 20.7881 12.962C20.4461 13.404 20.0084 13.7083 19.4751 13.875V15.5C19.4751 17.1667 18.8918 18.5833 17.7251 19.75C16.5584 20.9167 15.1418 21.5 13.4751 21.5Z", fill: "#2D87F3", strokeWidth: 0 })))),
+                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" },
+                        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,
+                })
+                : null)));
+};
+const NewWrapper = ({ isNew, children, }) => {
+    const { t } = useTranslations();
+    if (isNew) {
+        return (React__default.createElement(Indicator$1, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
+                root: {
+                    paddingRight: 10,
+                },
+            } }, children));
+    }
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+
+const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuItems, headingTitle, activeItem, }) => {
+    const { siteType } = useContext(NavigationContext);
+    return (React__default.createElement(StyledItemGridLeft, null,
+        React__default.createElement(StyledHeading$1, null,
+            React__default.createElement(Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
+        menuItems.slice(0, 6).map((item, index) => {
+            const href = (item === null || item === void 0 ? void 0 : item.link)
+                ? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
+                    ? item === null || item === void 0 ? void 0 : item.link
+                    : `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
+                : '/';
+            return (React__default.createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, href: href }, (!isInternalLink(href) && {
+                target: '_blank',
+            }), { "data-theme": siteType, key: index, onClick: onClosePopup }),
+                React__default.createElement("div", { className: "icon" },
+                    React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.thumbnail || '/images/avatar.jpg', style: {
+                            width: 32,
+                            height: 32,
+                            maxWidth: 32,
+                            maxHeight: 32,
+                            overflow: 'hidden',
+                        } })),
+                React__default.createElement(NewWrapper, { isNew: item.isNew },
+                    React__default.createElement("p", { style: { paddingRight: item.isNew ? 10 : 0 } }, item.name)),
+                React__default.createElement(StyledIconNav, null, React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
+        }),
+        titleBtnViewMore && (React__default.createElement(StyledViewMore$1, { "data-theme": siteType, style: { textDecoration: 'none' }, href: hrefViewMore, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": hrefViewMore },
+            React__default.createElement(StyledItemAll, { onClick: onClosePopup, "data-theme": siteType, "data-is-heading-category": false },
+                titleBtnViewMore,
+                React__default.createElement(StyledImageWrapper, null,
+                    React__default.createElement("img", { className: "svg", src: siteType === 'marryBaby'
+                            ? CommonGAssets.getAssetPath('chevronRightPink.svg')
+                            : CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
+};
+
+const StyledContainerItems$4 = styled.div `
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin-bottom: 3.5rem;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`;
+
+const StyledImageCard$3 = styled.div `
+  height: 152px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 16px;
+  width: 100%;
+
+  .img-container {
+    width: 100%;
+    height: 100%;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: contain;
+  }
+  ${MediaQueries.tdDown} {
+    margin-bottom: 0;
+    padding: 0;
+    height: 100%;
+    position: unset;
+    width: 150px;
+  }
+  ${MediaQueries.mbDown} {
+    width: 80px;
+  }
+`;
+const StyledImageCardInner = styled.div `
+  background-color: #ffffff;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+`;
+const StyledBtnView$2 = styled.div `
+  display: flex;
+  margin-top: 1rem;
+  align-items: center;
+  color: ${theme.colors.primaryBase};
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  ${MediaQueries.tdDown} {
+    display: none;
+  }
+`;
+const StyledTitle$5 = styled.p `
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: ${theme.colors.gray800};
+  ${MediaQueries.tdDown} {
+    padding: 0;
+  }
+`;
+const StyledDes$2 = styled.p `
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 400;
+  color: ${theme.colors.gray600};
+  height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-bottom: auto;
+  ${MediaQueries.tdDown} {
+    height: unset;
+    padding: 0;
+  }
+`;
+const _StyledContentWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdDown} {
+    gap: 4px;
+  }
+`;
+const StyledContentWrapperClass = 'hhgcomp-navigation-menucareitem-contentwrapper';
+const StyledContentWrapper$2 = getDefaultClassWrapper(_StyledContentWrapper, StyledContentWrapperClass);
+const StyledItem$5 = styled.a `
+  text-decoration: none;
+  border-radius: 4px;
+  background: ${theme.colors.white};
+  position: relative;
+  overflow: hidden;
+  padding: 16px;
+  display: flex;
+  padding-top: 166px;
+  * {
+    pointer-events: none;
+  }
+  ${MediaQueries.tdUp} {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
+      0px 0px 1px rgba(0, 0, 0, 0.04);
+    gap: 30px;
+    flex-direction: column;
+    a {
+      display: flex;
+      width: 100%;
+    }
+  }
+  ${MediaQueries.tdDown} {
+    padding-top: 16px;
+    a {
+      display: none;
+    }
+    grid-template-columns: 2fr 1fr;
+    gap: 10px;
+    display: grid;
+    max-height: 110px;
+    display: flex;
+    flex-direction: row-reverse;
+    > .${StyledContentWrapperClass} {
+      flex: 1;
+    }
+    img {
+      width: 150px;
+    }
+  }
+  ${MediaQueries.mbDown} {
+    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
+      0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
+    display: flex;
+    flex-direction: row-reverse;
+    img {
+      width: 80px;
+      height: 80px;
+    }
+  }
+  ${MediaQueries.tdOnly} {
+    border: 1px solid ${theme.colors.neutral100};
+  }
+  .bg-svg {
+    width: 100%;
+    max-width: 245px;
+    height: 100%;
+    top: 0;
+    right: -40px;
+    position: absolute;
+    display: inline-block;
+  }
+`;
+
+const Item$4 = ({ item, index = 0 }) => {
+    var _a;
+    const { t } = useTranslations();
+    const { locale, configs: { statics }, } = useContext(NavigationContext);
+    if (!item)
+        return null;
+    const href = `${statics.CARE_URL_FE}/${(_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
+    return (React__default.createElement(StyledItem$5, { key: item.id, href: href, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": href },
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('navCareCardBg.svg'), alt: "", className: "bg-svg", loading: "lazy" }),
+        React__default.createElement(StyledImageCard$3, null,
+            React__default.createElement(StyledImageCardInner, null,
+                React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.logo || '/images/avatar.jpg' }))),
+        React__default.createElement(StyledContentWrapper$2, null,
+            React__default.createElement(StyledTitle$5, null, item.name),
+            React__default.createElement(StyledDes$2, null, item.description),
+            React__default.createElement(StyledBtnView$2, null,
+                t('home.seeMore'),
+                React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
+                        width: '16px',
+                        height: '16px',
+                        marginTop: '3px',
+                        marginLeft: '5px',
+                    }, loading: "lazy" })))));
+};
+
+const StyledContainerNoPosts = styled.div `
+  padding: 16px;
+  border-radius: 8px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  a {
+    text-decoration: none;
+  }
+
+  .bg-svg {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  ${MediaQueries.mbDown} {
+    display: block;
+    .bg-svg {
+      right: -24px;
+      left: unset;
+      top: 0;
+      transform: rotateY(180deg);
+    }
+  }
+
+  ${MediaQueries.mbUp} {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 3fr;
+  }
+`;
+const StyledDescription = styled.div `
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${theme.colors.gray600};
+  margin-bottom: 15px;
+`;
+const StyledTitle$4 = styled.div `
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 26px;
+  color: #000000;
+  margin-bottom: 4px;
+`;
+const StyledContentLeft = styled.div `
+  background: #fff;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+`;
+const StyledLeft = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  ${MediaQueries.mbDown} {
+    justify-content: end;
+    min-height: 100px;
+  }
+`;
+
+const SpotlightNoData = ({ title, link, description, cta, icon }) => {
+    const { siteType } = useContext(NavigationContext);
+    return (React__default.createElement(StyledContainerNoPosts, { "data-theme": siteType },
+        React__default.createElement(StyledLeft, null,
+            React__default.createElement("img", { src: siteType === 'marryBaby'
+                    ? CommonGAssets.getAssetPath('navMBSpotlightBgNoData.svg')
+                    : CommonGAssets.getAssetPath('navSpotlightBgNoData.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
+            React__default.createElement(StyledContentLeft, null, icon && React__default.createElement("img", { src: icon, width: 64, height: 64, loading: "lazy" }))),
+        React__default.createElement("div", null,
+            title && React__default.createElement(StyledTitle$4, null, title),
+            description && React__default.createElement(StyledDescription, null, description),
+            cta && (React__default.createElement("div", null,
+                React__default.createElement("a", { href: link },
+                    React__default.createElement(Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
+};
+
+const StyledItemGridRight = styled.div `
+  margin-top: 10px;
+  background: #ffffff;
+  padding: 5px 15px;
+  position: relative;
+  ${MediaQueries.mbDown} {
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background-color: ${theme.colors.neutral100};
+      content: '';
+    }
+  }
+`;
+const StyledHeading = styled.div `
+  margin: 15px 0;
+  display: flex;
+`;
+const StyledViewMore = styled.a `
+  padding-left: 10px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-weight: 400;
+  font-size: 14px;
+  color: ${theme.colors.primaryBase};
+  &[data-theme='marryBaby'] {
+    color: ${theme.mbColors.pink};
+  }
+  img {
+    padding-left: 5px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-left: auto;
+  }
+`;
+
+const Spotlights = ({ title, viewMore, children, link, dataEventAction = '', }) => {
+    const { siteType } = useContext(NavigationContext);
+    return (React__default.createElement(StyledItemGridRight, null,
+        React__default.createElement(StyledHeading, null,
+            React__default.createElement(Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
+            viewMore && (React__default.createElement(StyledViewMore, { "data-event-category": "Hamburger Navigation", "data-event-action": dataEventAction, "data-event-label": link, href: link, "data-theme": siteType },
+                viewMore,
+                React__default.createElement("img", { src: siteType === 'marryBaby'
+                        ? CommonGAssets.getAssetPath('chevronRightPink.svg')
+                        : CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))),
+        children));
+};
+
+const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
+    const { t } = useTranslations();
+    const { siteType } = useContext(NavigationContext);
+    return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlightHospitals') }, spotlights.length !== 0 ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledContainerItems$4, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__default.createElement(Item$4, { key: index, index: index, item: s })))),
+        React__default.createElement("div", { style: {
+                position: 'absolute',
+                bottom: '6px',
+                right: '1rem',
+            } },
+            React__default.createElement("a", { href: hrefViewMore },
+                React__default.createElement(Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: CommonGAssets.getAssetPath('community.svg') }))));
+};
+
+const StyledContainerItems$3 = styled.div `
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  ${MediaQueries.tdDown} {
+    gap: 12px;
+    grid-template-columns: 1fr;
+  }
+`;
+
+const StyledItem$4 = styled.a `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  * {
+    pointer-events: none;
+  }
+`;
+const StyledImageCard$2 = styled.div `
+  border-radius: 5px;
+  display: block;
+  overflow: hidden;
+  padding-top: 140%;
+  width: 100%;
+  position: relative;
+  height: 0;
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    top: 0;
+    left: 0;
+  }
+  ${MediaQueries.tdDown} {
+    width: 72px;
+    padding-top: 100px;
+  }
+`;
+const StyledTitle$3 = styled.p `
+  font-size: 16px;
+  font-weight: 400;
+  padding: 4px 15px;
+  line-height: 1.4;
+  color: ${theme.colors.gray800};
+  flex: 1;
+  ${MediaQueries.tdUp} {
+    display: none;
+  }
+`;
+
+const Item$3 = ({ item, index = 0 }) => {
+    if (!item)
+        return null;
+    return (React__default.createElement(StyledItem$4, { key: item.id, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": `Spotlight Click ${index + 1}`, "data-event-label": item.link },
+        React__default.createElement(StyledImageCard$2, null,
+            React__default.createElement("img", { loading: "lazy", alt: item.title, src: item.banner || '/images/notFound-min-small.jpg' })),
+        React__default.createElement(StyledTitle$3, null, item.title)));
+};
+
+const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }) => {
+    const { t } = useTranslations();
+    const { configs: { statics }, } = useContext(NavigationContext);
+    return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlights'), viewMore: t('home.navigator.menu.spotlights.seeAll'), link: hrefViewMore, dataEventAction: "Spotlight See More Click" }, spotlightsList.length !== 0 ? (React__default.createElement(StyledContainerItems$3, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((spotlight, index) => (React__default.createElement(Item$3, { key: index, index: index, item: {
+            id: spotlight.id,
+            link: statics.HOME_PAGE_URL + spotlight.permalink,
+            title: spotlight.name,
+            banner: spotlight.image,
+        } }))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.category.noDatas.cta'), icon: CommonGAssets.getAssetPath('Spotlight.svg') }))));
+};
+
+const StyledContainerItems$2 = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 48px;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: 1fr;
+    grid-gap: 32px;
+  }
+  ${MediaQueries.mbDown} {
+    grid-gap: 24px;
+  }
+`;
+
+const StyledContent$1 = styled.div `
+  padding: 5px;
+  flex: 1;
+`;
+const StyledImage = styled.img `
+  width: 88px;
+  height: 88px;
+  border-radius: 4px;
+  object-fit: cover;
+`;
+const StyledName = styled.div `
+  font-size: 12px;
+  font-weight: 600;
+  color: ${theme.colors.gray800};
+  text-decoration: none;
+  &[data-theme='marryBaby'] {
+    font-weight: 400;
+    letter-spacing: -0.2px;
+  }
+`;
+const StyledCategory = styled.div `
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 400;
+  color: ${theme.colors.primaryBase};
+  &[data-theme='marryBaby'] {
+    font-weight: 400;
+    letter-spacing: -0.2px;
+  }
+`;
+const StyledModifiedTime = styled.div `
+  font-size: 12px;
+  font-weight: 400;
+  color: ${theme.colors.gray600};
+`;
+const StyledDot = styled.div `
+  font-size: 12px;
+  font-weight: 400;
+  color: ${theme.colors.gray600};
+`;
+const StyledItem$3 = styled.a `
+  display: flex;
+  gap: 10px;
+  text-decoration: none;
+  position: relative;
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    border-top: 1px dashed ${theme.colors.neutral100};
+    position: absolute;
+    bottom: -24px;
+    ${MediaQueries.tdOnly} {
+      bottom: -16px;
+    }
+    ${MediaQueries.mbDown} {
+      bottom: -12px;
+    }
+  }
+  &:last-child {
+    &::after {
+      display: none;
+    }
+  }
+  ${MediaQueries.tdUp} {
+    &:nth-last-child(2) {
+      &::after {
+        display: none;
+      }
+    }
+  }
+`;
+const StyledInfoUser = styled.div `
+  display: flex;
+  gap: 10px;
+  vertical-align: middle;
+  align-items: center;
+`;
+const StyledTitle$2 = styled.div `
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${theme.colors.gray800};
+  &[data-theme='marryBaby'] {
+    margin-top: 12px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: -0.2px;
+  }
+`;
+const StyledInfo = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 5px;
+`;
+const StyledWrapInfo = styled.div `
+  display: flex;
+  gap: 4px;
+  flex-direction: column;
+`;
+
+dayjs.extend(relativeTime);
+const Item$2 = ({ post, index = 0 }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { siteType, configs: { statics }, } = useContext(NavigationContext);
+    if (!post)
+        return null;
+    const communityUrl = [statics.TOGETHER_URL_FE, (_a = post.community) === null || _a === void 0 ? void 0 : _a.slug].join('/');
+    const postUrl = [communityUrl, post.slug].join('/');
+    const time = post.createdAt;
+    const cleanedTimeDate = time
+        ? !isNaN(new Date(time).getTime())
+            ? new Date(time)
+            : null
+        : null;
+    const timeText = cleanedTimeDate ? dayjs(cleanedTimeDate).toNow(true) : time;
+    return (React__default.createElement(StyledItem$3, { href: postUrl, "data-event-category": "Hamburger Navigation", "data-event-action": `Together Click ${index + 1}`, "data-event-label": postUrl },
+        React__default.createElement(StyledContent$1, null,
+            React__default.createElement(StyledInfoUser, null,
+                React__default.createElement(UserAvatar, { avatar: (_b = post.author) === null || _b === void 0 ? void 0 : _b.avatar, username: ((_c = post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post.author) === null || _d === void 0 ? void 0 : _d.username) }),
+                React__default.createElement(StyledWrapInfo, null,
+                    React__default.createElement(StyledName, { "data-theme": siteType }, (_e = post.author) === null || _e === void 0 ? void 0 : _e.name),
+                    React__default.createElement(StyledInfo, null,
+                        React__default.createElement(StyledCategory, { "data-event-category": "Hamburger Navigation", "data-event-action": `Topic Click ${index + 1}`, "data-event-label": communityUrl, onClick: (e) => {
+                                e.preventDefault();
+                                location.href = communityUrl;
+                            }, "data-theme": siteType }, (_f = post.community) === null || _f === void 0 ? void 0 : _f.name),
+                        React__default.createElement(StyledDot, null, "\u2022"),
+                        React__default.createElement(StyledModifiedTime, { "data-theme": siteType }, timeText)))),
+            React__default.createElement(StyledTitle$2, null, post.title)),
+        !!((_g = post.photos) === null || _g === void 0 ? void 0 : _g.length) && (React__default.createElement(StyledImage, { loading: "lazy", src: post.photos[0] }))));
+};
+
+const CommunitySpotlights = ({ spotlights = [] }) => {
+    const { configs: { statics }, } = useContext(NavigationContext);
+    const { t } = useTranslations();
+    return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.trendingPosts'), viewMore: t('home.navigator.menu.trendingPosts.seeMore'), link: normalizeLink(statics.TOGETHER_URL_FE), dataEventAction: "Together See More Click" }, spotlights.length !== 0 ? (React__default.createElement(StyledContainerItems$2, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 4).map((p, index) => (React__default.createElement(Item$2, { index: index, post: p, key: p.id }))))) : (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.together.noPosts.title'), description: t('home.navigator.menu.together.noPosts.description'), link: `${statics.HOME_PAGE_URL}/community/`, cta: t('home.navigator.menu.together.noPosts.cta'), icon: CommonGAssets.getAssetPath('community.svg') }))));
+};
+
+const StyledContainerItems$1 = styled.div `
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin-bottom: 3.5rem;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`;
+
+const StyledItem$2 = styled.a `
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+`;
+
+const Item$1 = ({ item, index = 0 }) => {
+    if (!item)
+        return null;
+    return (React__default.createElement(StyledItem$2, { href: item.url, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": item.url },
+        React__default.createElement("img", { loading: "lazy", alt: item.name, src: item.featuredImage || '/images/avatar.jpg', style: {
+                width: '40px',
+                height: '40px',
+            } }),
+        React__default.createElement(Text, { size: "p2", weight: "regular", style: {
+                marginLeft: 16,
+            } }, item.name),
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
+                width: '20px',
+                height: '20px',
+                marginLeft: 'auto',
+            }, loading: "lazy" })));
+};
+
+const EcomSpotlights = ({ helpfulUrls = [], }) => {
+    const { t } = useTranslations();
+    // const { siteType } = useContext(NavigationContext)
+    if (!helpfulUrls.length)
+        return null;
+    return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlightEcom') }, helpfulUrls.length !== 0 ? (React__default.createElement(StyledContainerItems$1, null, helpfulUrls === null || helpfulUrls === void 0 ? void 0 : helpfulUrls.slice(0, 5).map((s, index) => (React__default.createElement(Item$1, { key: index, index: index, item: s }))))) : (React__default.createElement(React__default.Fragment, null)
+    // <SpotlightNoData
+    //   title={t('home.navigator.menu.ecom.noDatas.title')}
+    //   description={t('home.navigator.menu.ecom.noDatas.description')}
+    //   link={hrefViewMore}
+    //   cta={t('home.navigator.menu.ecom.homeButton')}
+    //   icon={CommonGAssets.getAssetPath('ecom.svg')}
+    // />
+    )));
+};
+
+const StyledContainerItems = styled.div `
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  ${MediaQueries.tdDown} {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+`;
+
+const StyledItem$1 = styled.a `
+  text-decoration: none;
+  border-radius: 4px;
+  background: ${theme.colors.primary50};
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  * {
+    pointer-events: none;
+  }
+  .bg-svg {
+    width: 245px;
+    top: 0;
+    right: 0;
+    height: 100%;
+    position: absolute;
+    ${MediaQueries.tdDown} {
+      top: calc(51% - 68px);
+      right: -8px;
+    }
+  }
+  padding: 180px 24px 16px;
+  a {
+    display: flex;
+    width: 100%;
+  }
+  ${MediaQueries.tdDown} {
+    padding-top: 16px;
+    display: flex;
+    align-items: center;
+  }
+`;
+const StyledImageCard$1 = styled.div `
+  width: 64px;
+  height: 64px;
+  background: white;
+  position: absolute;
+  right: 25px;
+  top: 35px;
+  z-index: 3;
+  border-radius: 50%;
+  img {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    top: 50%;
+    left: 50%;
+    display: block;
+    transform: translate(-50%, -50%);
+  }
+  ${MediaQueries.tdDown} {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+`;
+const StyledBtnView$1 = styled.div `
+  display: flex;
+  align-items: center;
+  color: ${theme.colors.primaryBase};
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+`;
+const StyledTitle$1 = styled.p `
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: ${theme.colors.gray800};
+`;
+const StyledDes$1 = styled.p `
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: ${theme.colors.gray600};
+  height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-bottom: auto;
+  ${MediaQueries.tdDown} {
+    display: none;
+  }
+`;
+const StyledContentWrapper$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdUp} {
+    gap: 8px;
+  }
+  ${MediaQueries.tdDown} {
+    gap: 4px;
+    flex: 1;
+  }
+`;
+
+const Item = ({ item, index = 0 }) => {
+    const { t } = useTranslations();
+    const { configs: { statics }, } = useContext(NavigationContext);
+    if (!item)
+        return null;
+    const link = item.link
+        ? item.link.startsWith('http')
+            ? item.link
+            : `${statics.HOME_PAGE_URL}${item.link}`
+        : undefined;
+    return (React__default.createElement(StyledItem$1, { href: link, "data-event-category": "Hamburger Navigation", "data-event-action": `Engage Click ${index + 1}`, "data-event-label": link },
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('navToolCardBg.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
+        React__default.createElement(StyledContentWrapper$1, null,
+            React__default.createElement(StyledTitle$1, null, item.title),
+            React__default.createElement(StyledDes$1, null, item.subtitle),
+            React__default.createElement(StyledBtnView$1, null,
+                t('home.seeMore'),
+                React__default.createElement("img", { src: CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
+                        width: '16px',
+                        height: '16px',
+                        marginTop: '3px',
+                        marginLeft: '5px',
+                    }, loading: "lazy" }))),
+        React__default.createElement(StyledImageCard$1, null,
+            React__default.createElement("img", { loading: "lazy", alt: item.title, src: item.icon || '/images/avatar.jpg' }))));
+};
+
+const StyledItem = styled.a `
+  text-decoration: none;
+  border-radius: 12px;
+
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  * {
+    pointer-events: none;
+  }
+  .bg-svg {
+    top: 0;
+    left: 0;
+    position: absolute;
+  }
+
+  .dot-svg {
+    width: 40px;
+    height: 30px;
+    top: 36px;
+    left: 16px;
+    position: absolute;
+    stroke-width: 0;
+  }
+
+  &[data-color='pink'] {
+    background: ${theme.mbColors.tonePink};
+    .bg-svg {
+      fill: ${theme.mbColors.peach};
+    }
+  }
+  &[data-color='orange'] {
+    background: ${theme.mbColors.toneYellow};
+    .bg-svg {
+      fill: ${theme.mbColors.orange};
+    }
+  }
+  &[data-color='green'] {
+    background: ${theme.mbColors.toneGreen};
+    .bg-svg {
+      fill: ${theme.mbColors.mint};
+    }
+  }
+
+  padding: 180px 24px 16px;
+  a {
+    display: flex;
+    width: 100%;
+  }
+  ${MediaQueries.tdDown} {
+    padding-top: 16px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  ${MediaQueries.mbDown} {
+    padding-top: 0;
+    padding-left: 80px;
+    height: 96px;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    .dot-svg {
+      top: 22px;
+      left: 16px;
+    }
+  }
+  ${MediaQueries.tdUp} {
+    min-height: 296px;
+  }
+  .mobile-only {
+    ${MediaQueries.tdUp} {
+      display: none;
+    }
+  }
+  .desktop-only {
+    ${MediaQueries.tdDown} {
+      display: none;
+    }
+  }
+`;
+const StyledImageCard = styled.div `
+  width: 48px;
+  height: 48px;
+  background: white;
+  position: absolute;
+  right: 25px;
+  top: 35px;
+  z-index: 3;
+  border-radius: 50%;
+  img {
+    position: absolute;
+    width: 36px;
+    height: 36px;
+    top: 50%;
+    left: 50%;
+    display: block;
+    transform: translate(-50%, -50%);
+  }
+  ${MediaQueries.tdDown} {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+  ${MediaQueries.mbDown} {
+    position: absolute;
+    left: 32px;
+    top: 28px;
+  }
+`;
+const StyledBtnView = styled.div `
+  display: flex;
+  align-items: center;
+  background: white;
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+
+  svg path {
+    fill: ${theme.mbColors.gray};
+  }
+
+  ${MediaQueries.tdDown} {
+    background: none;
+    width: 100%;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${theme.mbColors.pink};
+    padding-left: 16px;
+  }
+`;
+const StyledTitle = styled.p `
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.2px;
+  color: ${theme.colors.gray800};
+`;
+const StyledDes = styled.p `
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: -0.2px;
+  color: ${theme.colors.gray600};
+  height: 54px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  margin-bottom: auto;
+  ${MediaQueries.tdDown} {
+    display: none;
+  }
+`;
+const StyledContentWrapper = styled.div `
+  display: flex;
+  flex: 1;
+  z-index: 1;
+  align-items: flex-end;
+  justify-content: flex-end;
+  ${MediaQueries.tdUp} {
+    gap: 8px;
+    flex-direction: row;
+  }
+
+  ${MediaQueries.tdDown} {
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 4px;
+  }
+`;
+const StyledContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdUp} {
+    gap: 8px;
+  }
+  ${MediaQueries.tdDown} {
+    gap: 4px;
+    flex: 1;
+    padding-left: 16px;
+  }
+`;
+const StyledWrapName = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  z-index: 1;
+  ${MediaQueries.tdUp} {
+    gap: 8px;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  ${MediaQueries.tdDown} {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+
+const ItemMarryBaby = ({ item, index = 0, color }) => {
+    const { t } = useTranslations();
+    const { configs: { statics }, } = useContext(NavigationContext);
+    if (!item)
+        return null;
+    const link = item.link
+        ? item.link.startsWith('http')
+            ? item.link
+            : `${statics.HOME_PAGE_URL}${item.link}`
+        : undefined;
+    const renderIcon = () => (React__default.createElement(StyledImageCard, null,
+        React__default.createElement("img", { loading: "lazy", alt: item.title, src: item.icon || '/images/avatar.jpg' })));
+    const renderName = () => (React__default.createElement(StyledWrapName, null,
+        React__default.createElement(StyledContent, null,
+            React__default.createElement(StyledTitle, null, item.title),
+            React__default.createElement(StyledDes, null, item.subtitle)),
+        React__default.createElement(StyledBtnView, null,
+            React__default.createElement("div", { className: "mobile-only" }, t('home.seeMore')),
+            React__default.createElement("img", { src: CommonGAssets.getAssetPath('arrowRightGray.svg'), style: {
+                    width: '12px',
+                    height: '12px',
+                    marginTop: '2px',
+                    marginLeft: '5px',
+                }, loading: "lazy" }))));
+    return (React__default.createElement(StyledItem, { href: link, "data-event-category": "Hamburger Navigation", "data-event-action": `Engage Click ${index + 1}`, "data-event-label": link, "data-color": color },
+        React__default.createElement("svg", { className: "bg-svg", width: "74", height: "121", viewBox: "0 0 74 121", fill: "none" },
+            React__default.createElement("path", { d: "M58.5713 53.428C40.6466 70.0213 12.9929 71.0875 -7.00506 84.9856C-24.9277 97.4005 -38.3893 120.472 -60.213 120.346C-73.3615 120.271 -84.9289 110.925 -91.9303 99.8138C-101.443 84.7327 -103.994 64.0482 -93.916 49.3276C-81.8133 31.6505 -56.6933 28.1101 -41.7246 12.7895C-35.4351 6.35117 -31.2212 -1.90115 -24.8564 -8.25051C-7.17639 -25.9054 34.9604 -29.7543 56.852 -16.9562C80.9056 -2.89888 77.046 36.3304 58.5713 53.428Z", strokeWidth: "0" })),
+        React__default.createElement("img", { src: CommonGAssets.getAssetPath('navMBCardDotBg.svg'), className: "dot-svg", loading: "lazy", alt: "" }),
+        React__default.createElement(StyledContentWrapper, null,
+            React__default.createElement("div", { className: "mobile-only" }, renderIcon()),
+            React__default.createElement("div", { className: "desktop-only" }, renderName())),
+        React__default.createElement("div", { className: "mobile-only" }, renderName()),
+        React__default.createElement("div", { className: "desktop-only" }, renderIcon())));
+};
+
+const ToolSpotlights = ({ hrefViewMore, spotlightHealthTools = [] }) => {
+    const { t } = useTranslations();
+    const marryBabyCardColor = ['pink', 'orange', 'green'];
+    const { siteType } = useContext(NavigationContext);
+    return (React__default.createElement(Spotlights, { title: t('home.navigator.menu.spotlightTools') },
+        spotlightHealthTools.length !== 0 && (React__default.createElement(StyledContainerItems, null, spotlightHealthTools === null || spotlightHealthTools === void 0 ? void 0 : spotlightHealthTools.slice(0, 3).map((item, index) => siteType === 'marryBaby' ? (React__default.createElement(ItemMarryBaby, { key: index, index: index, item: item, color: marryBabyCardColor[index] })) : (React__default.createElement(Item, { key: index, index: index, item: item }))))),
+        spotlightHealthTools.length === 0 && (React__default.createElement(SpotlightNoData, { title: t('home.navigator.menu.healthTools.noDatas.title'), description: t('home.navigator.menu.healthTools.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.healthTools.noDatas.cta'), icon: CommonGAssets.getAssetPath('community.svg') }))));
+};
+
+const MenuServiceList = ({ closePopup, menuItems = [] }) => {
+    var _a, _b;
+    const { siteType, ssrMenuContent: { categories, healthTools, care, together, ecom }, activeMenuService, configs: { statics, enableSearchBar }, locale, } = useContext(NavigationContext);
+    const { t } = useTranslations();
+    return (React__default.createElement(StyledMasterMenuContainer, { id: 'categories-menu' },
+        enableSearchBar ? (React__default.createElement(StyledServiceListMenuSearchInputWrapper, { "data-theme": siteType, onClick: () => {
+                window.location.href = `${statics.HOME_PAGE_URL}/search`;
+            } },
+            React__default.createElement(SearchInput, { id: "mobile" }))) : null,
+        React__default.createElement(StyledWrapper, null,
+            React__default.createElement(Categories, { UrlFE: statics.HOME_PAGE_URL, titleBtnViewMore: t('home.navigator.menuItem.allCategories'), menuItems: menuItems, headingTitle: t('home.navigator.menuItem.healthCategories'), onClosePopup: closePopup, activeItem: activeMenuService }),
+            activeMenuService === 'categories' && (React__default.createElement(CategorySpotlights, { spotlightsList: (categories === null || categories === void 0 ? void 0 : categories.spotlights) || [], hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })),
+            activeMenuService === 'tools' && (React__default.createElement(ToolSpotlights, { spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}` })),
+            activeMenuService === 'care' && (React__default.createElement(CareSpotlights, { spotlights: care === null || care === void 0 ? void 0 : care.spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_b = LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b.SPECIALTIES}` })),
+            activeMenuService === 'together' && (React__default.createElement(CommunitySpotlights, { spotlights: together === null || together === void 0 ? void 0 : together.spotlights })),
+            activeMenuService === 'ecom' && (React__default.createElement(EcomSpotlights, { helpfulUrls: ecom === null || ecom === void 0 ? void 0 : ecom.helpfulUrls })))));
+};
+
+const HamburgerMenu = ({ menuItems }) => {
+    const { siteType, configs: { enableSearchBar }, } = useContext(NavigationContext);
+    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper();
+    return (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbDown" },
+        React__default.createElement("header", { className: styles$2.menuContainer },
+            React__default.createElement("div", { className: styles$2.menuIcon, ref: containerRef, role: "button", tabIndex: 0, onBlur: onContainerBlur, onFocus: onContainerFocus },
+                React__default.createElement("div", { className: styles$2.menuIconWrapper, onMouseDown: onButtonMouseDown, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": "Hamburger Navigation URL" },
+                    React__default.createElement(ClosePopupIcon, { className: "mobile-close-icon" }),
+                    React__default.createElement(HamburgerIcon, { siteType: siteType, enableSearch: enableSearchBar, className: "mobile-hamburger-icon" })),
+                React__default.createElement(MenuServiceList, { menuItems: menuItems, closePopup: onClose })))));
+};
+
+const TOGETHER_PATHS = {
+    COMMUNITIES: 'community?website_url={websiteUrl}',
+    MENU_TOPIC: 'topic?community_id={communityId}&website_url={websiteUrl}',
+    GET_USER_POSTS: 'profile/posts?website_url={websiteUrl}',
+};
+const Z_INDEX = {
+    adBlock: 48,
+    headerContainerHome: 99,
+    headerContainerPopup: 300,
+    headerContainerPopupSUbLevel: 400,
+    menuCategoryPopupWrapper: 200,
+    menuCategoryPopupContainer: 210,
+    menuSearchInputPopup: 5,
+    menuSearchInputDisplayIcon: 6,
+    menuSearchPopup: 300,
+    homeSearchComponent: 200,
+};
+
+const StyledHeaderWrapper = styled.div `
+  z-index: 201;
+  width: 100%;
+  align-items: center;
+
+  background-color: ${theme.colors.white};
+
+  transition: height 0.3s, transform 0.3s;
+
+  &[data-site-type='helloSites'] {
+    border-bottom: 1px solid ${theme.colors.neutral100};
+  }
+  &[data-sponsored='true'] {
+    border-bottom: none;
+  }
+  &[data-marry-baby-tone='pink'] {
+    background-color: ${theme.mbColors.lightPink};
+  }
+
+  ${MediaQueries.mbUp} {
+    &[data-sitewide-banner-shown='true'][data-collapsed='true'] {
+      transform: translateY(-64px);
+    }
+  }
+  ${MediaQueries.mbDown} {
+    &[data-site-type='marryBaby'] {
+      border-bottom: none;
+    }
+
+    &[data-fixed-bar='true'] {
+      position: fixed;
+      transform: translateY(0);
+    }
+
+    &[data-fixed-bar='false'] {
+      position: absolute;
+    }
+
+    &[data-collapsed='true'] {
+      transform: translateY(-100%);
+      transition: transform 0.5s;
+    }
+    &[data-collapsed='false'] {
+      transform: translateY(0);
+      transition: transform 0.5s;
+    }
+
+    .top-bar-header {
+      line-height: normal;
+    }
+
+    &[data-header-type='home'] {
+      z-index: ${Z_INDEX.headerContainerHome};
+    }
+
+    &[data-is-displayed='false'] {
+      //display: none;
+      visibility: hidden;
+    }
+  }
+
+  .marry-baby {
+    input {
+      background: ${theme.mbColors.lightGray};
+      border-radius: 16px;
+      border: none;
+    }
+    max-width: 172px;
+  }
+  &[data-site-type='marryBaby'] {
+    .close-btn {
+      top: 16px;
+      right: 16px;
+    }
+  }
+`;
+const StyledHeader = styled.div `
+  display: flex;
+  height: 100%;
+  align-items: center;
+
+  justify-content: space-between;
+  padding: 0 2rem;
+  height: 56px;
+  ${MediaQueries.pcDown} {
+    padding: 0 1rem;
+  }
+
+  ${MediaQueries.mbDown} {
+    position: relative;
+    height: 56px;
+    background: white;
+    gap: 2px;
+  }
+
+  &[data-site-type='marryBaby'] {
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 16px;
+    ${MediaQueries.tdUp} {
+      max-width: 1064px;
+    }
+  }
+`;
+const StyledLeftGroup = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 24px;
+  ${MediaQueries.pcDown} {
+    flex-shrink: 0;
+    gap: 16px;
+  }
+  ${MediaQueries.pcDown} {
+    gap: 12px;
+  }
+  &[data-site-type='marryBaby'] {
+    gap: 26px;
+  }
+`;
+const StyledRightGroup = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-shrink: 0;
+  /* gap: 16px; */
+  ${MediaQueries.tdDown} {
+    flex-shrink: 0.6;
+  }
+  .hhgcomp-navigation-itemnav-headeritem {
+    gap: 2px;
+    ${MediaQueries.pcUp} {
+      padding: 0 10px;
+    }
+    ${MediaQueries.pcDown} {
+      padding: 0 6px;
+    }
+    ${MediaQueries.mbDown} {
+      display: none;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+`;
+styled.div `
+  .fake-search-input {
+    pointer-events: none;
+    input {
+      line-height: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+`;
+const StyledProfileNavGroup = styled.div `
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-shrink: 0;
+  ${MediaQueries.pcDown} {
+    margin-left: 8px;
+    gap: 8px;
+  }
+  ${MediaQueries.mbDown} {
+    margin-left: 0;
+    gap: 10px;
+  }
+`;
+const StyledWrapMenuItems = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  &[data-site-type='marryBaby'] {
+    gap: 26px;
+  }
+`;
+
+const formatSponsor = (sponsor) => {
+    if (!sponsor)
+        return {};
+    return {
+        title: sponsor.title,
+        logo: sponsor.logo,
+        link: sponsor.link,
+    };
+};
+const formatReviewedCategory = (data) => {
+    return {
+        postTitle: data.post_title,
+        permalink: data.permalink,
+    };
+};
+const formatFaqsCategory = (data) => {
+    return {
+        title: data.title,
+        content: data.content,
+    };
+};
+const formatCategory = (category) => {
+    var _a, _b;
+    if (!category)
+        return {};
+    return {
+        termId: category.term_id || null,
+        sponsor: category.sponsor ? formatSponsor(category.sponsor) : null,
+        isSponsored: category.is_sponsored || null,
+        categoryName: category.cat_name || category.name || null,
+        name: category.name || null,
+        iconUrl: category.icon || '',
+        slugName: category.category_nicename || null,
+        description: category.description || null,
+        featureImage: category.thumbnail || category.image || null,
+        displayName: category.name || null,
+        parent: category.parent || null,
+        permalink: category.permalink || null,
+        slug: category.slug || null,
+        childCates: ((_a = category.child_cates) === null || _a === void 0 ? void 0 : _a.map((childCate) => {
+            return formatCategory(childCate);
+        })) || [],
+        thumnailColor: category.thumnail_color ||
+            ['#FFEAF1', '#E0E9FB', '#FFF9EB', '#F2FCF7', '#F3F3F3'][(Math.random() * 5) | 0],
+        colorFeatureImage: category.color_feature_image || null,
+        imageColor: category.image_color || null,
+        textColor: category.text_color || null,
+        catParent: ((_b = category.cat_parent) === null || _b === void 0 ? void 0 : _b.name)
+            ? {
+                name: category.cat_parent.name,
+                permalink: category.cat_parent.permalink,
+            }
+            : {},
+        metaTag: category.meta_tag || '',
+        reviewedBy: category.reviewed_by
+            ? formatReviewedCategory(category.reviewed_by)
+            : null,
+        reviewedDate: category.reviewed_date || '',
+        faqs: category.faqs
+            ? category.faqs.map((faq) => formatFaqsCategory(faq))
+            : null,
+        customizedUrl: category.customized_url || null,
+    };
+};
+const formatHealthTool = (healthTool) => {
+    var _a, _b;
+    if (!healthTool)
+        return {};
+    const isBot = (_a = healthTool.link) === null || _a === void 0 ? void 0 : _a.includes('/bot/');
+    const hasFilPrefix = (_b = healthTool.link) === null || _b === void 0 ? void 0 : _b.startsWith('/fil/');
+    const link = healthTool.link
+        ? healthTool.link.startsWith('http')
+            ? healthTool.link
+            : isBot
+                ? healthTool.link
+                : hasFilPrefix
+                    ? healthTool.link
+                        .replace('/health-tools/', '/')
+                        .replace('/fil/', '/fil/health-tools/')
+                    : `/health-tools${healthTool.link.replace('/health-tools/', '/')}`
+        : undefined;
+    return {
+        icon: healthTool.icon,
+        link,
+        subtitle: healthTool.subtitle,
+        title: healthTool.title,
+    };
+};
+const formatSpecialties = (specialties) => {
+    var _a, _b, _c, _d, _e;
+    if (!specialties || !(specialties === null || specialties === void 0 ? void 0 : specialties.object_id))
+        return {};
+    return {
+        thumbnail: ((_a = specialties === null || specialties === void 0 ? void 0 : specialties.object_id) === null || _a === void 0 ? void 0 : _a.logo) || '',
+        link: ((_b = specialties === null || specialties === void 0 ? void 0 : specialties.object_id) === null || _b === void 0 ? void 0 : _b.slug) || '',
+        subtitle: ((_c = specialties.object_id) === null || _c === void 0 ? void 0 : _c.name) || '',
+        name: ((_d = specialties.object_id) === null || _d === void 0 ? void 0 : _d.name) || '',
+        slug: ((_e = specialties.object_id) === null || _e === void 0 ? void 0 : _e.slug) || '',
+    };
+};
+const formatHospital = (hospital) => {
+    var _a, _b, _c, _d, _e;
+    if (!hospital || !(hospital === null || hospital === void 0 ? void 0 : hospital.object_id))
+        return {};
+    return {
+        id: (_a = hospital.object_id) === null || _a === void 0 ? void 0 : _a.id,
+        name: ((_b = hospital.object_id) === null || _b === void 0 ? void 0 : _b.name) || '',
+        logo: ((_c = hospital === null || hospital === void 0 ? void 0 : hospital.object_id) === null || _c === void 0 ? void 0 : _c.logo) || '',
+        description: ((_d = hospital.object_id) === null || _d === void 0 ? void 0 : _d.description) || '',
+        slug: ((_e = hospital.object_id) === null || _e === void 0 ? void 0 : _e.slug) || '',
+    };
+};
+const getTogetherUserPostsApiPath = (locale, isMarryBaby, apiDomain, params) => {
+    const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`;
+    return (apiUrl +
+        'api/v1/' +
+        formatString(TOGETHER_PATHS.GET_USER_POSTS, Object.assign(Object.assign({}, params), { websiteUrl: isMarryBaby
+                ? 'https://marrybaby.vn'
+                : `https://${domainLocales[locale]}` })));
+};
+const getCareSearchUrl = ({ type, specialtySlug, locale, }) => {
+    var _a, _b;
+    return `${(_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL}/${((_b = LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b[type]) || 'doctor'}/${specialtySlug !== null && specialtySlug !== void 0 ? specialtySlug : ''}`;
+};
+const formatSpotlightsList = (spotlight) => {
+    if (!spotlight)
+        return {};
+    return {
+        id: spotlight.ID,
+        name: spotlight.name,
+        permalink: spotlight.permalink,
+        image: (spotlight === null || spotlight === void 0 ? void 0 : spotlight.small_banner) || (spotlight === null || spotlight === void 0 ? void 0 : spotlight.image) || '',
+        imageMedium: (spotlight === null || spotlight === void 0 ? void 0 : spotlight.image_medium) || null,
+        imageThumbnail: (spotlight === null || spotlight === void 0 ? void 0 : spotlight.image_thumbnail) || null,
+        startDate: spotlight === null || spotlight === void 0 ? void 0 : spotlight.start_date,
+        endDate: spotlight === null || spotlight === void 0 ? void 0 : spotlight.end_date,
+    };
+};
+const checkAvailableSpotlight = (spotlight) => {
+    const today = new Date();
+    if (spotlight === null || spotlight === void 0 ? void 0 : spotlight.startDate) {
+        const startDate = new Date(spotlight.startDate);
+        if (today.getTime() < startDate.getTime())
+            return false;
+    }
+    if (spotlight === null || spotlight === void 0 ? void 0 : spotlight.endDate) {
+        const endDate = new Date(spotlight.endDate);
+        if (today.getTime() > endDate.getTime())
+            return false;
+    }
+    return true;
+};
+
+var styles = {"gridContainer":"q3nL5cp","container":"_2DNf80G","closeWrapper":"Q-glX-n"};
+
+const BtnClosePopup = ({ onClosePopup }) => {
+    return (React__default.createElement("div", { className: `${styles.closeWrapper} close-btn`, onClick: onClosePopup },
+        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+            React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
+};
+
+const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, }) => {
+    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, null,
+            !hideCloseBtn && (React__default.createElement("div", { className: styles.container },
+                React__default.createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
+            React__default.createElement(Container, { className: styles.gridContainer }, children))));
+};
+
+const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
+    var _a;
+    const { t } = useTranslations();
+    const { locale, configs: { statics }, } = useContext(NavigationContext);
+    return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
+        React__default.createElement(Categories, { headingTitle: t('home.navigator.menuItem.specialties'), hrefViewMore: `${statics.CARE_URL_FE}/`, UrlFE: statics.CARE_URL_FE, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allSpecialties'), menuItems: (careSpecialties === null || careSpecialties === void 0 ? void 0 : careSpecialties.map((specialty) => {
+                if (!specialty)
+                    return {};
+                return {
+                    name: String(specialty.name) || '',
+                    link: getCareSearchUrl({
+                        type: 'DOCTOR',
+                        specialtySlug: specialty.slug,
+                        locale,
+                    }),
+                    thumbnail: (specialty === null || specialty === void 0 ? void 0 : specialty.thumbnail) || '',
+                };
+            })) || [] }),
+        React__default.createElement(CareSpotlights, { spotlights: spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.SPECIALTIES}/` })));
+};
+
+const MenuCategoriesList = ({ categories = [], spotlightsList = [], onClose, isOpen, }) => {
+    const { t } = useTranslations();
+    const { locale, configs: { statics }, } = useContext(NavigationContext);
+    return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
+        React__default.createElement(Categories, { hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/categories/`, UrlFE: statics.HOME_PAGE_URL, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allCategories'), menuItems: (categories === null || categories === void 0 ? void 0 : categories.map((cat) => {
+                if (!cat)
+                    return {};
+                return {
+                    name: cat.displayName || null,
+                    link: (cat === null || cat === void 0 ? void 0 : cat.customizedUrl) || (cat === null || cat === void 0 ? void 0 : cat.permalink) || '/',
+                    thumbnail: cat.iconUrl || null,
+                };
+            })) || [], headingTitle: t('home.navigator.menuItem.healthCategories') }),
+        React__default.createElement(CategorySpotlights, { spotlightsList: spotlightsList, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })));
+};
+
+const MenuCommunitiesList = ({ communities = [], onClose, isOpen, spotlights = [], }) => {
+    const { t } = useTranslations();
+    const { configs: { statics }, } = useContext(NavigationContext);
+    return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
+        React__default.createElement(Categories, { hrefViewMore: normalizeLink(statics.TOGETHER_URL_FE), UrlFE: normalizeLinkSlash(statics.TOGETHER_URL_FE), onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allCommunities'), menuItems: (communities === null || communities === void 0 ? void 0 : communities.map((community) => {
+                if (!community)
+                    return {};
+                return {
+                    name: community.name || '',
+                    link: community.slug || '/',
+                    thumbnail: community.thumbnail || '',
+                };
+            })) || [], headingTitle: t('home.navigator.menuItem.allCommunitiesheadingTitle') }),
+        React__default.createElement(CommunitySpotlights, { spotlights: spotlights })));
+};
+
+const MenuHealthToolsList = ({ locale, onClose, isOpen, spotlightHealthTools = [], healthTools = [], }) => {
+    var _a;
+    const { t } = useTranslations();
+    const { configs: { statics }, } = useContext(NavigationContext);
+    const hrefViewMore = `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}`;
+    return (React__default.createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
+        React__default.createElement(Categories, { hrefViewMore: hrefViewMore, UrlFE: statics.HOME_PAGE_URL, onClosePopup: onClose, headingTitle: t('home.navigator.menuItem.healthToolsList'), titleBtnViewMore: t('home.navigator.menuItem.allHealthTools'), menuItems: healthTools.map((t) => ({
+                name: t.title,
+                link: t.link
+                    ? t.link.startsWith('http')
+                        ? t.link
+                        : `${statics.HOME_PAGE_URL}${t.link}`
+                    : undefined,
+                thumbnail: t.icon,
+            })) }),
+        React__default.createElement(ToolSpotlights, { spotlightHealthTools: spotlightHealthTools, hrefViewMore: hrefViewMore })));
+};
+
+const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, }) => {
+    var _a;
+    const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, onBookingClick, currentUrl, onLoginClick, cartNumber, 
+    // ssrMenuContent: { categories, healthTools, care, together },
+    configs: { statics, enableNavCareBooking, enableSearchBar,
+    // enableNavCare,
+    // enableProfileMyHealth,
+    // enableProfileMySaved,
+    // enableNavTogether,
+    // enableProfileEcom,
+     }, userState: { userInfo }, onLogout, 
+    // userProfileRouterPush,
+    isUserLoading, } = useContext(NavigationContext);
+    const { t } = useTranslations();
+    const { SSO_URL, HOME_PAGE_URL } = statics;
+    const isSponsored = !!sponsorComponent;
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const scrollY = useRef(47);
+    const headerRef = useRef(null);
+    const collapsedMenu = useRef(false);
+    const goToLogin = () => {
+        const currentLocation = window.location.href;
+        window.location.href = SSO_URL
+            ? normalizeLinkSlash(`${SSO_URL}?returnUrl=${currentLocation}`)
+            : currentLocation;
+    };
+    const logoType = siteType === 'helloSites'
+        ? (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE
+        : siteType;
+    const isBrowser = typeof window !== 'undefined';
+    const scrolling = useCallback(throttle(() => {
+        if (isBrowser) {
+            if (!headerRef.current)
+                return;
+            const headerBoundingRect = headerRef.current.getBoundingClientRect();
+            if (headerBoundingRect.top <= 0 &&
+                window.scrollY > scrollY.current &&
+                window.scrollY > headerBoundingRect.height + 20 &&
+                !collapsedMenu.current) {
+                collapsedMenu.current = true;
+                setIsCollapsed(true);
+            }
+            if (window.scrollY < scrollY.current && collapsedMenu.current) {
+                collapsedMenu.current = false;
+                setIsCollapsed(false);
+            }
+            if (window.scrollY >= 0)
+                scrollY.current = window.scrollY;
+        }
+    }, 200), []);
+    useEffect(() => {
+        onTopBarAppears === null || onTopBarAppears === void 0 ? void 0 : onTopBarAppears(!isCollapsed);
+    }, [isCollapsed]);
+    useEffect(() => {
+        window.addEventListener('scroll', scrolling, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', scrolling);
+        };
+    }, []);
+    useEffect(() => {
+        if (isMobile)
+            scrolling();
+    }, [isMobile]);
+    const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
+    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 }),
+                logoComponent || (React__default.createElement("a", { style: {
+                        flexShrink: 0,
+                    }, href: HOME_PAGE_URL },
+                    React__default.createElement("div", null,
+                        React__default.createElement(Logo, { 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 }))))),
+            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 })))),
+                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 }))),
+                    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 })))),
+        sponsorComponent
+            ? !React__default.isValidElement(sponsorComponent)
+                ? sponsorComponent
+                : React__default.cloneElement(sponsorComponent, {
+                    isCollapsed,
+                    locale,
+                    isMobile,
+                })
+            : null));
+};
+const NavigtionSearch = ({ siteType }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: siteType === 'marryBaby' ? 'marry-baby' : '' },
+    React__default.createElement(SearchInput, { id: "desktop" })));
+const NavigationMenu = ({ menuItems }) => {
+    const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together }, } = 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 })) : null }))))));
+};
+
+const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBanner, isMobile, }) => {
+    const headerRef = useRef(null);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const [headerBottom, setHeaderBottom] = useState(64);
+    const debounceSetHeader = useCallback(debounce(() => {
+        var _a, _b, _c, _d;
+        const newHeaderHeight = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) ||
+            ((_c = (_b = headerRef.current) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight) ||
+            0;
+        // limit recalculation to once per 200ms + less than 300px from top of page
+        if (window.scrollY <= newHeaderHeight + 200) {
+            setHeaderHeight(newHeaderHeight);
+            setHeaderBottom(((_d = headerRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().bottom) || headerHeight);
+            // setTimeout(() => debounceSetHeader(), 200)
+        }
+    }, 200), []);
+    useEffect(() => {
+        window.addEventListener('resize', debounceSetHeader, {
+            passive: true,
+        });
+        window.addEventListener('scroll', debounceSetHeader, {
+            passive: true,
+        });
+        debounceSetHeader();
+        return () => {
+            window.removeEventListener('resize', debounceSetHeader);
+            window.removeEventListener('scroll', debounceSetHeader);
+        };
+    }, []);
+    useEffect(() => {
+        debounceSetHeader();
+    }, [
+        isMobile,
+        isShowingSiteWideBanner,
+        isSponsored,
+        hasSponsoredBanners,
+        headerRef.current,
+    ]);
+    const defaultHeaderHeight = useMemo(() => {
+        let res = isMobile ? 56 : 56;
+        if (isShowingSiteWideBanner) {
+            res += 64;
+        }
+        if (isSponsored) {
+            res += 40;
+            if (hasSponsoredBanners) {
+                res += 57;
+            }
+        }
+        return res;
+    }, [isMobile, isShowingSiteWideBanner, hasSponsoredBanners, isSponsored]);
+    return {
+        defaultHeaderHeight,
+        headerHeight: headerHeight || defaultHeaderHeight,
+        headerBottom,
+        headerRef,
+    };
+};
+
+const useInsider = () => {
+    const { isFirstLogin, userState } = useContext(NavigationContext);
+    const { userInfo } = userState;
+    useEffect(() => {
+        if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) {
+            if (isFirstLogin) {
+                // sign up
+                (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) !== ''
+                    ? (() => {
+                        window.insider_object = {
+                            user: Object.assign({ uuid: userInfo === null || userInfo === void 0 ? void 0 : userInfo.id, email: userInfo === null || userInfo === void 0 ? void 0 : userInfo.email, gdpr_optin: true, email_optin: true, sign_up: true }, ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) ? { name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name } : {})),
+                        };
+                    })()
+                    : (() => {
+                        window.insider_object = {
+                            user: Object.assign({ uuid: userInfo === null || userInfo === void 0 ? void 0 : userInfo.id, sign_up: true }, ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) ? { name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name } : {})),
+                        };
+                    })();
+            }
+            else {
+                // log in
+                (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) !== ''
+                    ? (() => {
+                        window.insider_object = {
+                            user: Object.assign({ uuid: userInfo === null || userInfo === void 0 ? void 0 : userInfo.id, email: userInfo === null || userInfo === void 0 ? void 0 : userInfo.email, gdpr_optin: true, email_optin: true, log_in: true }, ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) ? { name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name } : {})),
+                        };
+                    })()
+                    : (() => {
+                        window.insider_object = {
+                            user: Object.assign({ uuid: userInfo === null || userInfo === void 0 ? void 0 : userInfo.id, log_in: true }, ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) ? { name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name } : {})),
+                        };
+                    })();
+            }
+        }
+    }, []);
+};
+
+const useNavServices = () => {
+    const { t } = useTranslations();
+    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, statics, }, } = useContext(NavigationContext);
+    const isMarryBaby = siteType === 'marryBaby';
+    const services = useMemo(() => {
+        var _a;
+        const _services = [];
+        enableNavDiscover &&
+            _services.push({
+                name: t('home.navigator.menuItem.discover'),
+                id: 'categories',
+                link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/categories`,
+                niceName: '',
+                thumbnail: isMarryBaby
+                    ? CommonGAssets.getAssetPath('categories-mb.svg')
+                    : CommonGAssets.getAssetPath('nav-icons/discover.svg'),
+                popupType: 'categories',
+            });
+        enableNavHealthTools &&
+            _services.push({
+                name: t('home.navigator.menuItem.healthTools'),
+                id: 'tools',
+                link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}`,
+                thumbnail: isMarryBaby
+                    ? CommonGAssets.getAssetPath('healthtools-mb.svg')
+                    : CommonGAssets.getAssetPath('nav-icons/health-tools.svg'),
+                popupType: 'tools',
+            });
+        enableNavTogether &&
+            _services.push({
+                name: t('home.navigator.menuItem.helloTogether'),
+                id: 'together',
+                link: normalizeLinkSlash(statics.TOGETHER_URL_FE + '/'),
+                thumbnail: isMarryBaby
+                    ? CommonGAssets.getAssetPath('community-mb.svg')
+                    : CommonGAssets.getAssetPath('nav-icons/community.svg'),
+                popupType: 'together',
+            });
+        enableNavEcom &&
+            _services.push({
+                name: t('home.navigator.menuItem.helloEcom'),
+                id: 'ecom',
+                link: normalizeLinkSlash(statics.HOME_PAGE_URL + '/shop'),
+                thumbnail: CommonGAssets.getAssetPath('nav-icons/shop.svg'),
+                popupType: null,
+            });
+        enableNavCare &&
+            _services.push({
+                name: t('home.navigator.menuItem.helloCare'),
+                id: 'care',
+                link: locale === 'ms-MY'
+                    ? normalizeLinkSlash(statics.HOME_PAGE_URL + '/care/current-location/hospital/')
+                    : normalizeLinkSlash(statics.HOME_PAGE_URL + '/care'),
+                thumbnail: CommonGAssets.getAssetPath('nav-icons/care.svg'),
+                popupType: locale === 'id-ID' ? 'care' : null,
+            });
+        return _services;
+    }, [locale, enableNavCare, enableNavTogether, enableNavEcom]);
+    return services;
+};
+
+const StyledContainer = styled.div `
+  --header-z-index: 305;
+  top: 0;
+  z-index: var(--header-z-index);
+
+  ${MediaQueries.mbDown} {
+    width: 100vw;
+    max-width: 100%;
+  }
+  --amp-site-wide-closed: 2px;
+
+  -webkit-transform: translateZ(0);
+  position: sticky;
+
+  &.nav-open {
+    margin-top: 64px;
+  }
+
+  &:not(.nav-open) {
+    --amp-site-wide-closed: 66px;
+  }
+  pointer-events: none;
+  > section *:not([data-cart-menu] *) {
+    pointer-events: auto;
+  }
+`;
+
+const _NavigationV2 = (props) => {
+    var _a, _b;
+    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, } = props;
+    const services = useNavServices();
+    useInsider();
+    const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
+    const isSponsored = !!sponsorComponent;
+    const hasSponsoredBanners = !!((_b = (_a = sponsorComponent === null || sponsorComponent === void 0 ? void 0 : sponsorComponent.props) === null || _a === void 0 ? void 0 : _a.sponsoredBy) === null || _b === void 0 ? void 0 : _b.length);
+    const { headerRef, defaultHeaderHeight, headerHeight, headerBottom } = useHeaderHeight({
+        isShowingSiteWideBanner,
+        isSponsored,
+        hasSponsoredBanners,
+        isMobile,
+    });
+    return (React__default.createElement(StyledContainer, { id: "navigation-v2", style: {
+            '--default-header-height': defaultHeaderHeight + 'px',
+            '--header-height': `calc(${headerHeight}px - var(--amp-site-wide-closed), 64px)`,
+            '--header-bottom': headerBottom + 'px',
+        }, className: className },
+        React__default.createElement("section", { ref: headerRef },
+            React__default.createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, languageMenu: React__default.createElement(LanguageSwitcher, { languageOptions: languageOptions, locale: locale }) }))));
+};
+const NavigationV2 = (props) => {
+    const propsWithDefaultValues = Object.assign({ siteType: 'helloSites', projectType: 'discover', locale: 'vi-VN', activeMenuService: 'categories', ssrMenuContent: {} }, props);
+    return (React__default.createElement(NavigationProvider, Object.assign({}, propsWithDefaultValues),
+        React__default.createElement(_NavigationV2, Object.assign({}, propsWithDefaultValues))));
+};
+const getNavMenuContent = (locale) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const res = {};
+    const isMarryBaby = locale === 'vi-VN_MB';
+    try {
+        const customLang = locale === 'tl-PH' ? 'lang=fil' : '';
+        try {
+            const [categories, spotlights, healthtools, healthtoolsFavorites] = yield Promise.all([
+                fetch(normalizeLinkSlash(`${getDiscoverApiDomain(locale)}/wp-json/api/categories${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
+                fetch(normalizeLinkSlash(`${getDiscoverApiDomain(locale)}/wp-json/api/spotlights?per_page=10&order_by=start_date${customLang ? '&' + customLang : ''}`)).then((res) => res.json()),
+                fetch(normalizeLinkSlash(`${getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
+                fetch(normalizeLinkSlash(`${getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}/favorites${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
+            ]);
+            res.categories = {
+                items: ((_b = (_a = categories === null || categories === void 0 ? void 0 : categories.data) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, formatCategory)) || [],
+                spotlights: ((_f = (_e = (_d = (_c = spotlights === null || spotlights === void 0 ? void 0 : spotlights.data) === null || _c === void 0 ? void 0 : _c.articles) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.call(_d, formatSpotlightsList)) === null || _f === void 0 ? void 0 : _f.filter(checkAvailableSpotlight)) || [],
+            };
+            res.healthTools = {
+                items: ((_h = (_g = healthtools === null || healthtools === void 0 ? void 0 : healthtools.data) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, formatHealthTool)) || [],
+                spotlights: ((_k = (_j = healthtoolsFavorites === null || healthtoolsFavorites === void 0 ? void 0 : healthtoolsFavorites.data) === null || _j === void 0 ? void 0 : _j.map) === null || _k === void 0 ? void 0 : _k.call(_j, formatHealthTool)) || [],
+            };
+        }
+        catch (_z) { }
+        if (isMarryBaby || TOGETHER_LOCALES.includes(locale)) {
+            try {
+                const [communities, spotlightPosts] = yield Promise.all([
+                    fetch(normalizeLinkSlash(`${getTogetherApiDomain()}/api/v1/community?website_url=https://${domainLocales[locale]}`)).then((res) => res.json()),
+                    fetch(normalizeLinkSlash(`${getTogetherApiDomain()}/api/v1/options?website_url=https://${domainLocales[locale]}&meta_key=popular_post`)).then((res) => res.json()),
+                ]);
+                res.together = {
+                    items: ((_o = (_m = (_l = communities === null || communities === void 0 ? void 0 : communities.data) === null || _l === void 0 ? void 0 : _l.communities) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, formatCommunity)) || [],
+                    spotlights: ((_r = (_q = (_p = spotlightPosts === null || spotlightPosts === void 0 ? void 0 : spotlightPosts.data) === null || _p === void 0 ? void 0 : _p.posts) === null || _q === void 0 ? void 0 : _q.map) === null || _r === void 0 ? void 0 : _r.call(_q, formatPost)) || [],
+                };
+            }
+            catch (_0) { }
+        }
+        if (CARE_LOCALES.includes(locale)) {
+            try {
+                const [specialties, hospitals] = yield Promise.all([
+                    fetch(normalizeLinkSlash(getCareApiDomain() +
+                        `/api/options/setting_menu?site=${domainLocales[locale]}&type=0`)).then((res) => res.json()),
+                    fetch(normalizeLinkSlash(getCareApiDomain() +
+                        `/api/options/setting_menu?site=${domainLocales[locale]}&type=1`)).then((res) => res.json()),
+                ]);
+                res.care = {
+                    items: ((_v = (_u = (_t = (_s = specialties === null || specialties === void 0 ? void 0 : specialties._data) === null || _s === void 0 ? void 0 : _s.setting_menu) === null || _t === void 0 ? void 0 : _t.menu_specialty) === null || _u === void 0 ? void 0 : _u.map) === null || _v === void 0 ? void 0 : _v.call(_u, formatSpecialties)) || [],
+                    spotlights: ((_y = (_x = (_w = hospitals === null || hospitals === void 0 ? void 0 : hospitals._data.setting_menu) === null || _w === void 0 ? void 0 : _w.menu_hospital) === null || _x === void 0 ? void 0 : _x.map) === null || _y === void 0 ? void 0 : _y.call(_x, formatHospital)) || [],
+                };
+            }
+            catch (_1) { }
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+    return res;
+});
+const getNavMenuContentWithCache = (locale) => __awaiter(void 0, void 0, void 0, function* () {
+    return (yield getDataWithCache('nav-menu-content', () => getNavMenuContent(locale || 'en-PH'), (data) => { var _a, _b; return !!((_b = (_a = data === null || data === void 0 ? void 0 : data.categories) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length); })) || {};
+});
+
+export { LanguageSwitcher as L, NavigationV2 as N, ProfileNavigation as P, getNavMenuContentWithCache as a, NavigationLogoutPopup as b, NavigationProfileButton as c, getTogetherUserPostsApiPath as d, getNavMenuContent as g, isInternalLink as i };