@hhgtech/hhg-components 1.29.496 → 1.29.497-beta-1

package/build/esm/{index-515a8bf9.js → index-97f62d2d.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-b6091bcc.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-811208a0.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-29f7e8fa.js';
-import { L as LOCALE } from './Locale-ead296e8.js';
+import './index-e442c24f.js';
+import { L as LOCALE } from './Locale-4fc39ae5.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-499af97a.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-25786055.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-dab46b91.js';
+import { C as CommonGAssets } from './index-d039195e.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-2b4131a5.js';
-import { C as CustomStylesType, F as FontWeight } from './index-6f1dee1a.js';
-import { A as ANIMATION_DURATION } from './shared-8e94e2d2.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-f94ac687.js';
+import { C as CustomStylesType, F as FontWeight } from './index-559d56cb.js';
+import { A as ANIMATION_DURATION } from './shared-dbc94490.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {

package/build/esm/{index-e1d9dcf4.js → index-9916d169.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-b6091bcc.js';
+import { _ as __rest } from './tslib.es6-811208a0.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
-import { B as Button } from './index-f374f9f1.js';
-import { T as Text } from './index-f35a0aab.js';
+import { B as Button } from './index-eea761b6.js';
+import { T as Text } from './index-3067e2a6.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

package/build/esm/{index-36e01fa0.js → index-99eb57b5.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-b6091bcc.js';
+import { _ as __rest } from './tslib.es6-811208a0.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
 import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-71c3eb8b.js';
-import { L as LOCALE } from './Locale-ead296e8.js';
+import { L as LastPeriod } from './LastPeriod-7387260d.js';
+import { L as LOCALE } from './Locale-4fc39ae5.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-a72fae58.js';
-import { D as DatePicker } from './index-cbd45576.js';
-import { T as Text } from './index-f35a0aab.js';
-import './index-f374f9f1.js';
-import './index-6f1dee1a.js';
-import './index.styles-9c4af062.js';
-import { u as useTranslations } from './index-d0ebcc01.js';
+import { R as Radio, I as Input, S as Select } from './index-94cda95e.js';
+import { D as DatePicker } from './index-b43a6520.js';
+import { T as Text } from './index-3067e2a6.js';
+import './index-eea761b6.js';
+import './index-559d56cb.js';
+import './index.styles-3a0314b7.js';
+import { u as useTranslations } from './index-d16c86f4.js';
 import '@mantine/hooks';
-import './index-515a8bf9.js';
-import './utils-2b4131a5.js';
-import './index-e1d9dcf4.js';
-import { H as HealthToolFormWrapper } from './index-b605df78.js';
+import './index-97f62d2d.js';
+import './utils-f94ac687.js';
+import './index-9916d169.js';
+import { H as HealthToolFormWrapper } from './index-0e48fc2c.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-1f417d39.js';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-499af97a.js';
+import { C as CardWrapperContext } from './context-84c9c116.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-25786055.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {

package/build/esm/{index-780bb0b8.js → index-9a1ce783.js}

@@ -1,48 +1,58 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-b6091bcc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-811208a0.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-d123a4f2.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-499af97a.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-a819aa12.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-c297d3ed.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-345a4b12.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-25786055.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-7889f115.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-5ce6872f.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-97d7f3f5.js';
+import './translationsContext-3ba22159.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-a72fae58.js';
+import { I as Input } from './index-94cda95e.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-9c5182cb.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-f8d9f912.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-8bc015a0.js';
+import { L as Logo$1 } from './index-e019f5fb.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-29f7e8fa.js';
-import { C as CommonGAssets } from './index-dab46b91.js';
-import './index-515a8bf9.js';
-import { T as Text } from './index-f35a0aab.js';
-import { B as Button } from './index-f374f9f1.js';
-import './index-6f1dee1a.js';
-import './index.styles-9c4af062.js';
+import { V as VideoType } from './index-e442c24f.js';
+import { C as CommonGAssets } from './index-d039195e.js';
+import './index-97f62d2d.js';
+import { T as Text } from './index-3067e2a6.js';
+import { B as Button } from './index-eea761b6.js';
+import './index-559d56cb.js';
+import './index.styles-3a0314b7.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-2b4131a5.js';
-import './index-e1d9dcf4.js';
-import { L as LOCALISED_SLUGS } from './constants-14614e90.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-4d17e18f.js';
-import { L as LOCALIZED_SLUGS } from './constants-63486f1f.js';
-import { u as useTranslations } from './index-d0ebcc01.js';
-import { H as Heading } from './index-91c071c1.js';
-import { I as Indicator$1 } from './index-536e3608.js';
-import { u as useIsInit } from './useIsInit-6f26e450.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-f94ac687.js';
+import './index-9916d169.js';
+import { L as LOCALISED_SLUGS } from './constants-be66f840.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-8e1ed91e.js';
+import { L as LOCALIZED_SLUGS } from './constants-5f08ea2c.js';
+import { u as useTranslations } from './index-d16c86f4.js';
+import { H as Heading } from './index-13398579.js';
+import { I as Indicator$1 } from './index-19bb2662.js';
+import { u as useIsInit } from './useIsInit-0468a513.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-ddc8f8b5.js';
+import { B as Button$1 } from './index-1346f942.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-cad00bb9.js';
-import { C as Container } from './index-df0e821e.js';
-import { L as LOCALE } from './Locale-ead296e8.js';
+import { U as UserAvatar } from './index-4ce6fabc.js';
+import { C as Container } from './index-76c4102d.js';
+import { L as LOCALE } from './Locale-4fc39ae5.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-35b6ebb6.js';
+import { g as getDataWithCache } from './core-4afe186f.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,13 +1866,14 @@ 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;
 
   &[data-site-type='helloSites'] {
-    border-bottom: 1px solid ${theme.colors.neutral100};
+    border-bottom: ${({ winCashBackTheme }) => winCashBackTheme ? 'none' : `1px solid ${theme.colors.neutral100}`};
   }
+
   &[data-sponsored='true'] {
     border-bottom: none;
   }
@@ -1939,7 +1953,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 +2313,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,23 +2386,23 @@ 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 })),
-                logoComponent || (React__default.createElement("a", { style: {
+                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 }, logoComponent)) : (React__default.createElement("a", { style: {
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
                     React__default.createElement("div", null,
                         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 +2414,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,
@@ -2409,8 +2423,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 borderLeft: '1px solid #E4E8EC',
                             } })),
                         React__default.createElement(CartBadge, { "data-cart-menu": "true", "data-event-category": "Ecommerce", "data-event-action": "Cart Click", "data-event-label": currentUrl, count: cartNumber, locale: locale })))))),
-        isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, null,
-            React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage }))),
+        isMobile && isHomepage && (React__default.createElement(StyleWrapperNavigtionSearch, { style: { padding: winCashBackTheme ? '12px 16px' : undefined } },
+            React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage, winCashBackTheme: winCashBackTheme }))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
                 ? sponsorComponent
@@ -2422,12 +2436,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 +2651,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;
@@ -2649,13 +2663,19 @@ const _NavigationV2 = (props) => {
         hasSponsoredBanners,
         isMobile,
     });
+    useEffect(() => {
+        document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
+        return () => {
+            document.documentElement.style.removeProperty('--header-height');
+        };
+    }, [headerHeight]);
     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, 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);
@@ -2728,4 +2748,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-3a613204.js → index-a3efe9db.js}

@@ -1,34 +1,34 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-b6091bcc.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-811208a0.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-ddc8f8b5.js';
-import { H as Heading } from './index-91c071c1.js';
-import { u as useTranslations } from './index-d0ebcc01.js';
+import { B as Button } from './index-1346f942.js';
+import { H as Heading } from './index-13398579.js';
+import { u as useTranslations } from './index-d16c86f4.js';
 import innertext from 'innertext';
-import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-9c12c5dd.js';
-import { C as CommonGAssets } from './index-dab46b91.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-34d3b44c.js';
+import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-cfca9657.js';
+import { C as CommonGAssets } from './index-d039195e.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-2eaeca1b.js';
 import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
-import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-d70f5012.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-2b486995.js';
+import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, e as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-02ed0a06.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-a57db3d6.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-2b4131a5.js';
+import { M as MediaQueries } from './utils-f94ac687.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-c297d3ed.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-5ce6872f.js';
 import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
-import { C as CardLink } from './index-e89d558b.js';
-import { C as CardAuthor, c as ProfileDetailModal } from './index-dfa2ab61.js';
-import { a as ProfileDetail, P as PostContent } from './index-8fc02026.js';
-import { a as PostImagePreview } from './index-cda66dcc.js';
-import { S as SocialLinkPreview } from './index-6450a2e2.js';
-import { D as Divider } from './index-1513f74f.js';
-import './index-499af97a.js';
+import { C as CardLink } from './index-6989dc51.js';
+import { C as CardAuthor, c as ProfileDetailModal } from './index-83cc21e5.js';
+import { a as ProfileDetail, P as PostContent } from './index-35beecf8.js';
+import { a as PostImagePreview } from './index-88a0ab48.js';
+import { S as SocialLinkPreview } from './index-6297b340.js';
+import { D as Divider } from './index-061965b8.js';
+import './index-25786055.js';
 import { Plus } from '@hhgtech/icons/core';
 import { ArrowRight, ArrowDown, Trash, Endorse } from '@hhgtech/icons/other';
 import { Accordion } from '@mantine/core';
-import { I as Input } from './index-ab6aebca.js';
-import { T as Text } from './index-f35a0aab.js';
-import { L as Loading } from './index-4f1b85b2.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-a819aa12.js';
+import { I as Input } from './index-41aa9ddd.js';
+import { T as Text } from './index-3067e2a6.js';
+import { L as Loading } from './index-1d93613f.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-7889f115.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath fill='%233E3F58' d='M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M19 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3e%3c/svg%3e";

package/build/esm/{index-04de81a1.js → index-a4b3c754.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-b6091bcc.js';
+import { _ as __rest } from './tslib.es6-811208a0.js';
 import React__default from 'react';
 import { MantineProvider as MantineProvider$1 } from '@mantine/core';
-import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-515a8bf9.js';
-import { C as CustomStylesType, T as TemplateProvider } from './index-6f1dee1a.js';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-97f62d2d.js';
+import { C as CustomStylesType, T as TemplateProvider } from './index-559d56cb.js';
 
 const MantineProvider = (_a) => {
     var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);

package/build/esm/{index-74e651f1.js → index-ab6d28ec.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-b6091bcc.js';
+import { _ as __rest } from './tslib.es6-811208a0.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-29f7e8fa.js';
+import './index-e442c24f.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-dab46b91.js';
+import { C as CommonGAssets } from './index-d039195e.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-ec042aba.js';
-import { T as Text } from './index-00758edc.js';
-import { L as LOCALE } from './Locale-ead296e8.js';
-import { e as CentralCarousel } from './index-a72fae58.js';
+import { I as ImageWrap } from './index-bb3e96ac.js';
+import { T as Text } from './index-cb5727c3.js';
+import { L as LOCALE } from './Locale-4fc39ae5.js';
+import { e as CentralCarousel } from './index-94cda95e.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-6b1a189b.js → index-acd0a9ec.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-2b4131a5.js';
+import { M as MediaQueries } from './utils-f94ac687.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-cbd45576.js → index-b43a6520.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-b6091bcc.js';
+import { _ as __rest } from './tslib.es6-811208a0.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-499af97a.js';
-import './index-29f7e8fa.js';
-import { C as CommonGAssets } from './index-dab46b91.js';
-import { M as MAPPED_LOCALE } from './index-515a8bf9.js';
-import { L as LOCALE } from './Locale-ead296e8.js';
+import { I as ISO_FORMAT } from './index-25786055.js';
+import './index-e442c24f.js';
+import { C as CommonGAssets } from './index-d039195e.js';
+import { M as MAPPED_LOCALE } from './index-97f62d2d.js';
+import { L as LOCALE } from './Locale-4fc39ae5.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {