@hhgtech/hhg-components 1.29.495-beta-3 → 1.29.495-beta-5

package/build/esm/{index-3fbc6cf0.js → index-c675e26e.js}

@@ -1,48 +1,58 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-cf1d2419.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-25bcb871.js';
+import * as React from 'react';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-15209b7c.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, c as VIDEO_LOCALES, d as LOCALE_HAS_COMMUNITY_SITE, e as CARE_LOCALES } from './index-5bbedf81.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-b247e66d.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-91e2cea6.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-b0fa3b65.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-4f0a85e6.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-2f3cecfe.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-6cd169c9.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-0308f534.js';
+import './translationsContext-36e0b7b9.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-4f2247be.js';
+import { I as Input } from './index-4807699b.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-261a5f30.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-eba36b14.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-48a29f42.js';
+import { L as Logo$1 } from './index-e22b7edf.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-9cd2e6ad.js';
-import { C as CommonGAssets } from './index-c082da01.js';
-import './index-c907ea65.js';
-import { T as Text } from './index-83c6e0e4.js';
-import { B as Button } from './index-8bbf095b.js';
-import './index-07213a5c.js';
-import './index.styles-fa8e82fe.js';
+import { V as VideoType } from './index-e747a275.js';
+import { C as CommonGAssets } from './index-45c381db.js';
+import './index-52d6eb17.js';
+import { T as Text } from './index-04ec7cbb.js';
+import { B as Button } from './index-8dfd467a.js';
+import './index-11d3982e.js';
+import './index.styles-6c2d1a43.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-1e00d920.js';
-import './index-43418e7d.js';
-import { L as LOCALISED_SLUGS } from './constants-2c9f91df.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-984cacae.js';
-import { L as LOCALIZED_SLUGS } from './constants-a8e78fa3.js';
-import { u as useTranslations } from './index-3f359a11.js';
-import { H as Heading } from './index-cb59fcfc.js';
-import { I as Indicator$1 } from './index-1d8b9deb.js';
-import { u as useIsInit } from './useIsInit-18048362.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-574402ba.js';
+import './index-887adade.js';
+import { L as LOCALISED_SLUGS } from './constants-58d274c2.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-391137a6.js';
+import { L as LOCALIZED_SLUGS } from './constants-2b1bee3d.js';
+import { u as useTranslations } from './index-05c849d8.js';
+import { H as Heading } from './index-c091e915.js';
+import { I as Indicator$1 } from './index-15f895d0.js';
+import { u as useIsInit } from './useIsInit-45087334.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-dc45e399.js';
+import { B as Button$1 } from './index-ce7ef4e2.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-10d0df3d.js';
-import { C as Container } from './index-cfff5ef6.js';
-import { L as LOCALE } from './Locale-c22736f8.js';
+import { U as UserAvatar } from './index-3efd51f7.js';
+import { C as Container } from './index-7dfe18a8.js';
+import { L as LOCALE } from './Locale-269f5de9.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-3c2b4db6.js';
+import { g as getDataWithCache } from './core-35cbb770.js';
+
+const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M4 7H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M4 17H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const StarPair = (props) => (React.createElement("svg", Object.assign({ width: "22", height: "28", viewBox: "0 0 22 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { d: "M6.35278 10.7516C6.42759 10.976 6.63881 11.1279 6.87534 11.1279C7.11187 11.1279 7.322 10.976 7.39791 10.7516C7.68947 9.87691 8.37585 9.19053 9.25054 8.89896C9.47497 8.82415 9.62679 8.61403 9.62679 8.3775C9.62679 8.14097 9.47497 7.93084 9.25054 7.85603C8.37585 7.56446 7.68947 6.87809 7.39791 6.00339C7.24719 5.55453 6.5046 5.55453 6.35388 6.00339C6.06231 6.87809 5.37594 7.56446 4.50125 7.85603C4.27682 7.93084 4.125 8.14097 4.125 8.3775C4.125 8.61403 4.27682 8.82415 4.50125 8.89896C5.37565 9.19043 6.06193 9.87699 6.35278 10.7516Z", fill: "#2743AD" }),
+    React.createElement("path", { d: "M20.1723 14.3286L18.5342 13.6789C16.821 12.9995 15.4655 11.6411 14.7897 9.92641L14.1396 8.27697C13.9232 7.72994 13.0262 7.72994 12.8097 8.27697L12.1597 9.92641C11.4839 11.6411 10.1284 12.9995 8.41517 13.6789L6.77705 14.3286C6.5044 14.4367 6.32422 14.7016 6.32422 14.9952C6.32422 15.2888 6.50345 15.5537 6.77705 15.6618L8.41517 16.3115C10.1284 16.991 11.4839 18.3494 12.1597 20.064L12.8097 21.7135C12.9175 21.987 13.1815 22.1668 13.4742 22.1668C13.7669 22.1668 14.031 21.987 14.1387 21.7135L14.7888 20.064C15.4646 18.3494 16.8201 16.991 18.5333 16.3115L20.1714 15.6618C20.444 15.5537 20.6242 15.2888 20.6242 14.9952C20.6242 14.7016 20.4459 14.4367 20.1723 14.3286Z", fill: "#2743AD" })));
 
 const StyleInput = styled(Input) `
   .mantine-Input-input {
@@ -74,7 +84,7 @@ const StyleInput = styled(Input) `
 `;
 
 const HHG_SEARCH_BACK_KEY = 'hhg_search_history';
-const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
+const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, winCashBackTheme = false, }) => {
     const { locale, siteType } = useContext(NavigationContext);
     const [keyword, setKeyword] = useState('');
     const [eventCategoryTracking, setEventCategoryTracking] = useState('Search From Another Page');
@@ -139,7 +149,7 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, is
                 goToSearchPage('');
             }
         }, rightSection: keyword ? (React__default.createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
-            React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+            React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : winCashBackTheme ? (React__default.createElement(StarPair, { className: "star-pair-icon" })) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
                 if ((isMobile && isHomepage) || isRedirectSearchPage) {
                     goToSearchPage('');
                 }
@@ -193,18 +203,17 @@ const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, styl
 
 var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
 
-function ClosePopupIcon({ className }) {
+function ClosePopupIcon({ className, winCashBackTheme }) {
     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" }))));
+            React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: winCashBackTheme ? '#FFFFFF' : '#3E3F58', strokeWidth: "1.3", strokeLinecap: "round" }))));
 }
 
-function HamburgerIcon({ siteType, enableSearch, className, style, }) {
+function HamburgerIcon({ siteType, enableSearch, winCashBackTheme, className, style, }) {
     if (siteType === 'helloSites') {
-        return (React__default.createElement("div", { className: "hamburger-container" },
-            React__default.createElement("img", { "data-list-type": "Header", "data-content-type": "Navigation", "data-content-topic": "Hamburger", src: enableSearch
-                    ? CommonGAssets.getAssetPath('hamburgerMenuNewWithSearch.svg')
-                    : CommonGAssets.getAssetPath('hamburgerMenuNew.svg'), style: Object.assign({ width: '24px', height: '24px' }, style), alt: "home", className: className, loading: "lazy" })));
+        return (React__default.createElement("div", { className: "hamburger-container" }, winCashBackTheme ? (React__default.createElement(HamburgerWhite, { className: className })) : (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: Object.assign({ width: '24px', height: '24px' }, style), alt: "home", className: className, loading: "lazy" }))));
     }
     /** Marry Baby */
     return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className },
@@ -392,7 +401,7 @@ const StyledViewMore$1 = styled.a `
 
 var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
 
-const ItemMenu = ({ item, menu }) => {
+const ItemMenu = ({ item, menu, winCashBackTheme }) => {
     const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
         allowBgScroll: true,
     });
@@ -403,15 +412,19 @@ const ItemMenu = ({ item, menu }) => {
                 React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton }, item.name))));
     }
     return (React__default.createElement(NewWrapper, { isNew: item.isNew },
-        React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
-            React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$1.menuButton },
+        React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, style: { borderBottom: winCashBackTheme ? 'none' : undefined } },
+            React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$1.menuButton, style: { color: winCashBackTheme ? 'white' : undefined } },
                 item.name,
                 item.popupType && (React__default.createElement(React__default.Fragment, null, (item === null || item === void 0 ? void 0 : item.icon) ? (React__default.createElement("div", { className: "wrapper-menu-icon" },
-                    React__default.createElement("div", { className: "origin-icon" }, item.icon),
+                    React__default.createElement("div", { className: "origin-icon", style: {
+                            filter: winCashBackTheme
+                                ? 'brightness(0) invert(1)'
+                                : undefined,
+                        } }, item.icon),
                     React__default.createElement("div", { className: "close-icon", onClick: onClose },
-                        React__default.createElement(Close, { size: 16 })))) : (React__default.createElement("div", { className: styles$1.menuIconWrapper },
+                        React__default.createElement(Close, { size: 16, color: winCashBackTheme ? 'white' : undefined })))) : (React__default.createElement("div", { className: styles$1.menuIconWrapper },
                     React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
-                        React__default.createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))))),
+                        React__default.createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: winCashBackTheme ? 'white' : '#202135', strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))))),
             React__default.isValidElement(menu)
                 ? React__default.cloneElement(menu, {
                     onClose,
@@ -1836,15 +1849,15 @@ const MenuServiceList = ({ closePopup, menuItems = [], projectType, isHomepage =
             activeMenuService === 'video' && (React__default.createElement(VideoSpotlights, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights, layout: "stack" })))));
 };
 
-const HamburgerMenu = ({ menuItems, isHomepage, projectType }) => {
+const HamburgerMenu = ({ menuItems, isHomepage, projectType, winCashBackTheme, }) => {
     const { siteType } = 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: false, className: "mobile-hamburger-icon" })),
+                    React__default.createElement(ClosePopupIcon, { className: "mobile-close-icon", winCashBackTheme: winCashBackTheme }),
+                    React__default.createElement(HamburgerIcon, { siteType: siteType, enableSearch: false, className: "mobile-hamburger-icon", winCashBackTheme: winCashBackTheme })),
                 React__default.createElement(MenuServiceList, { menuItems: menuItems, isHomepage: isHomepage, projectType: projectType, closePopup: onClose })))));
 };
 
@@ -1853,7 +1866,7 @@ const StyledHeaderWrapper = styled.div `
   width: 100%;
   align-items: center;
 
-  background-color: ${theme.colors.white};
+  background-color: ${({ winCashBackTheme }) => winCashBackTheme ? theme.colors.blue900 : theme.colors.white};
 
   transition: height 0.3s, transform 0.3s;
 
@@ -1939,7 +1952,7 @@ const StyledHeader = styled.div `
   ${MediaQueries.mbDown} {
     position: relative;
     height: 56px;
-    background: white;
+    background: ${({ winCashBackTheme }) => winCashBackTheme ? theme.colors.blue900 : theme.colors.white};
     gap: 2px;
   }
 
@@ -2299,7 +2312,7 @@ const MenuViewMore = ({ menuItems = [], isOpen, onClose }) => {
                     React__default.createElement(Logo, { width: 16, height: 15 })) }, `${LOCALE_SPECS[locale || 'en-PH'].SITE_NAME_FORMATTED} App`)))));
 };
 
-const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, subHead, projectType, customClasses, }) => {
+const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, subHead, projectType, customClasses, winCashBackTheme, }) => {
     var _a, _b, _c, _d;
     const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, 
     // onBookingClick,
@@ -2372,11 +2385,11 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             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, className: customClasses.wrapper },
+    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, winCashBackTheme: winCashBackTheme, className: customClasses.wrapper },
         sitewideBanner,
-        React__default.createElement(StyledHeader, { className: customClasses.header, "data-site-type": siteType },
+        React__default.createElement(StyledHeader, { className: customClasses.header, "data-site-type": siteType, winCashBackTheme: winCashBackTheme },
             React__default.createElement(StyledLeftGroup, { className: customClasses.leftGroup, "data-site-type": siteType },
-                isMobile && (React__default.createElement(HamburgerMenu, { menuItems: menuItems.filter((m) => !!m.link), isHomepage: isHomepage, projectType: projectType })),
+                isMobile && (React__default.createElement(HamburgerMenu, { menuItems: menuItems.filter((m) => !!m.link), isHomepage: isHomepage, projectType: projectType, winCashBackTheme: winCashBackTheme })),
                 logoComponent || (React__default.createElement("a", { style: {
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
@@ -2384,11 +2397,11 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                         React__default.createElement(Logo$1, { style: {
                                 display: 'flex',
                             }, type: logoType, badge: locale === 'id-ID' && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('sehat-badge.png'), width: "56", height: "23", loading: "lazy" })), dateForSeasonal: new Date(), locale: locale, key: typeof window !== 'undefined' ? 'client' : 'server' })))),
-                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems, originalMenuItems: menuItems, className: customClasses.navMenu })) : (enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
+                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems, originalMenuItems: menuItems, className: customClasses.navMenu })) : (enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, winCashBackTheme: winCashBackTheme })))))),
             React__default.createElement(StyledRightGroup, { className: customClasses.rightGroup, "data-site-type": siteType },
                 !isMobile && siteType !== 'marryBaby' && (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => locale === LOCALE.Vietnam
                         ? m.id !== 'ecom' && m.id !== 'care'
-                        : true), originalMenuItems: menuItems, className: customClasses.navMenu })),
+                        : true), originalMenuItems: menuItems, winCashBackTheme: winCashBackTheme, className: customClasses.navMenu })),
                 React__default.createElement(StyledProfileNavGroup, null,
                     languageMenu,
                     enableNavChatbotAi && (React__default.createElement(Box, { component: "a", href: `${getCurrentBaseUrl(locale)}/ai-doctor`, "data-event-category": "Chatbot AI", "data-event-action": "Open", "data-event-label": "Hamburger Navigation", className: "ai-doctor-nav-item" },
@@ -2400,7 +2413,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                     slot,
                     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, enableAppIntroPage: enableAppIntroPage, isMobile: isMobile, className: customClasses.profileBtn }),
+                        currentUrl: currentUrl, onLogout: onLogout, isLoading: isUserLoading, locale: locale, enableAppIntroPage: enableAppIntroPage, isMobile: isMobile, winCashBackTheme: winCashBackTheme, className: customClasses.profileBtn }),
                     cartNumber !== undefined && (React__default.createElement(React__default.Fragment, null,
                         !isMobile && (React__default.createElement("hr", { style: {
                                 height: 20,
@@ -2410,7 +2423,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                             } })),
                         React__default.createElement(CartBadge, { "data-cart-menu": "true", "data-event-category": "Ecommerce", "data-event-action": "Cart Click", "data-event-label": currentUrl, count: cartNumber, locale: locale })))))),
         isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, null,
-            React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage }))),
+            React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, winCashBackTheme: winCashBackTheme }))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
                 ? sponsorComponent
@@ -2422,12 +2435,12 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             : null,
         subHead && subHead));
 };
-const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, isRedirectSearchPage = false, }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
-    React__default.createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, isRedirectSearchPage: isRedirectSearchPage })));
-const NavigationMenu = ({ menuItems, originalMenuItems, className, }) => {
+const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, isRedirectSearchPage = false, winCashBackTheme = false, }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
+    React__default.createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, isRedirectSearchPage: isRedirectSearchPage, winCashBackTheme: winCashBackTheme })));
+const NavigationMenu = ({ menuItems, originalMenuItems, className, winCashBackTheme, }) => {
     const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = useContext(NavigationContext);
     return (React__default.createElement(DisplayWrapper, { className: className, mediaQueryKey: "mbUp", style: { height: '100%' } },
-        React__default.createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default.createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.popupType === 'categories' ? (React__default.createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights })) : menuItem.popupType === 'tools' ? (React__default.createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights })) : menuItem.popupType === 'together' ? (React__default.createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights })) : menuItem.popupType === 'care' ? (React__default.createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights })) : menuItem.popupType === 'video' ? (React__default.createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : menuItem.popupType === 'other' ? (React__default.createElement(MenuViewMore, { menuItems: originalMenuItems })) : null }))))));
+        React__default.createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default.createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.popupType === 'categories' ? (React__default.createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights })) : menuItem.popupType === 'tools' ? (React__default.createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights })) : menuItem.popupType === 'together' ? (React__default.createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights })) : menuItem.popupType === 'care' ? (React__default.createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights })) : menuItem.popupType === 'video' ? (React__default.createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : menuItem.popupType === 'other' ? (React__default.createElement(MenuViewMore, { menuItems: originalMenuItems })) : null, winCashBackTheme: winCashBackTheme }))))));
 };
 
 const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBanner, isMobile, }) => {
@@ -2637,7 +2650,7 @@ const StyledContainer = styled.div `
 
 const _NavigationV2 = (props) => {
     var _a, _b;
-    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, } = props;
+    const { isMobile, locale, onTopBarAppears, languageOptions, sponsorComponent, sitewideBanner, sitewideBannerShown, className, logoComponent, subHead, projectType, customClasses = {}, isWinCashBackTheme = false, } = props;
     const services = useNavServices();
     useInsider();
     const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
@@ -2661,7 +2674,7 @@ const _NavigationV2 = (props) => {
             '--header-bottom': headerBottom + 'px',
         }, className: className },
         React__default.createElement("section", { ref: headerRef },
-            React__default.createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, projectType: projectType, languageMenu: React__default.createElement(LanguageSwitcher, { languageOptions: languageOptions, locale: locale }), customClasses: customClasses }))));
+            React__default.createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, projectType: projectType, languageMenu: React__default.createElement(LanguageSwitcher, { languageOptions: languageOptions, locale: locale }), winCashBackTheme: isWinCashBackTheme, customClasses: customClasses }))));
 };
 const NavigationV2 = (props) => {
     const propsWithDefaultValues = Object.assign({ siteType: 'helloSites', projectType: 'discover', locale: 'vi-VN', activeMenuService: 'categories', ssrMenuContent: {} }, props);
@@ -2734,4 +2747,4 @@ const getNavMenuContentWithCache = (locale) => __awaiter(void 0, void 0, void 0,
     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 { HHG_SEARCH_BACK_KEY as H, NavigationV2 as N, getNavMenuContentWithCache as a, getTogetherUserPostsApiPath as b, getNavMenuContent as g };
+export { HamburgerWhite as H, NavigationV2 as N, StarPair as S, getNavMenuContentWithCache as a, getTogetherUserPostsApiPath as b, HHG_SEARCH_BACK_KEY as c, getNavMenuContent as g };

package/build/esm/{index-5bda8938.js → index-cb22e953.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-e74b5811.js';
+import { u as useScrollbarSize } from './useScrollbarSize-3efb4a95.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-1e00d920.js';
+import { M as MediaQueries } from './utils-574402ba.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-dc45e399.js → index-ce7ef4e2.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-cf1d2419.js';
+import { _ as __rest } from './tslib.es6-25bcb871.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-8bbf095b.js';
+import { B as Button$1 } from './index-8dfd467a.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-835c3264.js → index-d0753760.js}

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MarryBabyText } from './index-86836824.js';
-import { T as Text } from './index-8967c880.js';
+import { M as MarryBabyText } from './index-8d30d868.js';
+import { T as Text } from './index-8e5df024.js';
 
 const StyledRadioImageGroup = styled.div `
   display: flex;

package/build/esm/{index-33097f59.js → index-d146082c.js}

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-cf1d2419.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-25bcb871.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-4f2247be.js';
+import { R as Radio } from './index-4807699b.js';
 import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-5bbedf81.js';
-import './index-9cd2e6ad.js';
-import { C as CommonGAssets } from './index-c082da01.js';
-import './index-c907ea65.js';
-import { T as Text } from './index-83c6e0e4.js';
-import { B as Button$1 } from './index-8bbf095b.js';
-import './index-07213a5c.js';
-import './index.styles-fa8e82fe.js';
-import './translationsContext-0308f534.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-4f0a85e6.js';
+import './index-e747a275.js';
+import { C as CommonGAssets } from './index-45c381db.js';
+import './index-52d6eb17.js';
+import { T as Text } from './index-04ec7cbb.js';
+import { B as Button$1 } from './index-8dfd467a.js';
+import './index-11d3982e.js';
+import './index.styles-6c2d1a43.js';
+import './translationsContext-36e0b7b9.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-1e00d920.js';
-import './index-43418e7d.js';
-import { i as isInternalLink } from './index-15209b7c.js';
+import { M as MediaQueries } from './utils-574402ba.js';
+import './index-887adade.js';
+import { i as isInternalLink } from './index-b0fa3b65.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-cf63d218.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-bf016a10.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-48a29f42.js';
+import { L as Logo } from './index-e22b7edf.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-e5cdf183.js';
+import { a as useOutsideClick } from './useOutsideClick-9aae468e.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-dc45e399.js';
-import { u as useScreenSize, I as ImageWrap } from './index-cb972dd3.js';
-import { u as useTranslations } from './index-3f359a11.js';
+import { B as Button } from './index-ce7ef4e2.js';
+import { u as useScreenSize, I as ImageWrap } from './index-5cb068c5.js';
+import { u as useTranslations } from './index-05c849d8.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-8c5c8bf8.js';
+import { D as Dropdown } from './index-49020f76.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-94c18be5.js';
-import { D as Drawer } from './index-0abf4de5.js';
+import { I as Input } from './index-02f98b36.js';
+import { D as Drawer } from './index-40fcf413.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-c22736f8.js';
+import { L as LOCALE } from './Locale-269f5de9.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-0e32ca02.js';
-import { L as Loading } from './index-6d71f1a5.js';
+import { A as ArrowRightBlue } from './index-73e69e0b.js';
+import { L as Loading } from './index-b14670a3.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -5292,7 +5292,7 @@ const StyledImageWrap = styled(ImageWrapV2) `
   align-self: baseline;
 `;
 
-function CardListItem({ title, href, description, logo, defaultImage, LinkComponent = 'a', children, contentInfo, isMobile = true, className, as = 'h3', }) {
+function CardListItem({ title, href, description, logo, defaultImage, LinkComponent = 'a', children, contentInfo, isMobile = true, className, as = 'h3', altText, }) {
     return (React__default.createElement(StyleCardItem, { className: className },
         React__default.createElement("div", { className: "info" },
             React__default.createElement(LinkComponent, { href: href },
@@ -5302,7 +5302,7 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
             contentInfo),
         React__default.createElement(LinkComponent, { href: href },
             React__default.createElement(AspectRatio, { ratio: 1, bg: "#EFF4FF", className: "logo" },
-                React__default.createElement(StyledImageWrap, { src: logo || defaultImage, width: isMobile ? 84 : 148, height: isMobile ? 84 : 148, alt: title, backupSrc: defaultImage }))),
+                React__default.createElement(StyledImageWrap, { src: logo || defaultImage, width: isMobile ? 84 : 148, height: isMobile ? 84 : 148, alt: altText || title, backupSrc: defaultImage }))),
         children));
 }
 
@@ -5403,7 +5403,10 @@ const ProductContent = styled.div `
 
 function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
     return (React__default.createElement(GeneralInfoContainer, { className: className },
-        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)))),
+        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
+                (typeof generalInfo.name === 'string'
+                    ? generalInfo.name
+                    : 'product') }, bannerProps)))),
         React__default.createElement(ProductContent, { className: contentClassName },
             React__default.createElement("div", { className: "product-info" },
                 typeof generalInfo.name === 'string' ? (React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :

package/build/esm/{index-aae4056e.js → index-ddf609a8.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-cf1d2419.js';
+import { a as __awaiter } from './tslib.es6-25bcb871.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-cb59fcfc.js';
-import { T as Text } from './index-83c6e0e4.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-7148bade.js';
+import { H as Heading } from './index-c091e915.js';
+import { T as Text } from './index-04ec7cbb.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-4989f560.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-19053183.js';
+import { D as DEFAULT_IMG } from './constants-cd309a7b.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-829a83b6.js → index-e1f3774b.js}

@@ -1,22 +1,22 @@
-import { _ as __rest } from './tslib.es6-cf1d2419.js';
+import { _ as __rest } from './tslib.es6-25bcb871.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, Box, clsx } from '@mantine/core';
-import './index-4f2247be.js';
+import './index-4807699b.js';
 import '@mantine/dates';
-import './index-5bbedf81.js';
-import './index-9cd2e6ad.js';
-import './index-c082da01.js';
-import './index-c907ea65.js';
-import { T as Text } from './index-83c6e0e4.js';
-import { B as Button } from './index-8bbf095b.js';
-import './index-07213a5c.js';
-import './index.styles-fa8e82fe.js';
-import { u as useTranslations } from './index-3f359a11.js';
+import './index-4f0a85e6.js';
+import './index-e747a275.js';
+import './index-45c381db.js';
+import './index-52d6eb17.js';
+import { T as Text } from './index-04ec7cbb.js';
+import { B as Button } from './index-8dfd467a.js';
+import './index-11d3982e.js';
+import './index.styles-6c2d1a43.js';
+import { u as useTranslations } from './index-05c849d8.js';
 import '@mantine/hooks';
-import './utils-1e00d920.js';
-import './index-43418e7d.js';
-import { C as CardWrapperContext } from './context-6532a2e7.js';
-import { H as HealthToolFormWrapper } from './index-7d504526.js';
+import './utils-574402ba.js';
+import './index-887adade.js';
+import { C as CardWrapperContext } from './context-768a9542.js';
+import { H as HealthToolFormWrapper } from './index-5e06fa16.js';
 
 var useStyles = createStyles((theme, { hasOnClickFn }) => {
     return {

package/build/esm/{index-48a29f42.js → index-e22b7edf.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-c22736f8.js';
-import { C as CommonGAssets } from './index-c082da01.js';
+import { L as LOCALE } from './Locale-269f5de9.js';
+import { C as CommonGAssets } from './index-45c381db.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-1e00d920.js';
-import { L as LogoIcon } from './logoIcon-10aa7c91.js';
-import './index-9cd2e6ad.js';
-import { I as ImageWrap } from './index-cb972dd3.js';
+import { M as MediaQueries } from './utils-574402ba.js';
+import { L as LogoIcon } from './logoIcon-bbfef23c.js';
+import './index-e747a275.js';
+import { I as ImageWrap } from './index-5cb068c5.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-9cd2e6ad.js → index-e747a275.js}

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

package/build/esm/{index-11526027.js → index-e8f0e545.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { C as Container } from './index-cfff5ef6.js';
-import { T as Text } from './index-83c6e0e4.js';
+import { C as Container } from './index-7dfe18a8.js';
+import { T as Text } from './index-04ec7cbb.js';
 
 const StyledTextDivider = styled.div `
   background-color: var(--neutral50);