@hhgtech/hhg-components 1.29.241 → 1.29.243

package/build/esm/{index-a474b6e2.js → index-3da46f73.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useRef, useMemo, useEffect, Fragment, createContext } from 'react';
-import { T as Text } from './index-95806c22.js';
+import { T as Text } from './index-70de6276.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-993fcbaa.js';
-import { R as Radio$1 } from './index-a062a0a8.js';
-import { T as Text$1 } from './index-b8fa2772.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-9f39769c.js';
+import { R as Radio$1 } from './index-bfa6fb11.js';
+import { T as Text$1 } from './index-09fdfb07.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { _ as __rest } from './tslib.es6-f5be5b40.js';
+import { _ as __rest } from './tslib.es6-b0cacf41.js';
 import flattenChildren from 'react-keyed-flatten-children';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-ff3ac699.js → index-3f87ee6b.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-f5be5b40.js';
+import { _ as __rest } from './tslib.es6-b0cacf41.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-09a41d06.js';
-import { T as Text } from './index-95806c22.js';
+import { B as Button } from './index-1293d1e5.js';
+import { T as Text } from './index-70de6276.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

package/build/esm/{index-01a3bacb.js → index-405656fb.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-993fcbaa.js';
+import { t as toggleNoScroll } from './utils-9f39769c.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-a5f8d877.js';
-import { T as Text } from './index-95806c22.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-b8f53c54.js';
+import { T as Text } from './index-70de6276.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {

package/build/esm/{index-9e1d687b.js → index-4a86e6c2.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-f5be5b40.js';
+import { _ as __rest } from './tslib.es6-b0cacf41.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { a as useStyles } from './index.styles-ce806d08.js';
+import { a as useStyles } from './index.styles-5a4a43b8.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-a3a1a284.js → index-4d7a8867.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-f5be5b40.js';
+import { _ as __rest } from './tslib.es6-b0cacf41.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-993fcbaa.js';
+import { M as MediaQueries } from './utils-9f39769c.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-96d46726.js → index-533a9429.js}

@@ -1,22 +1,22 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-f5be5b40.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-b0cacf41.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { I as Input, S as Select } from './index-a062a0a8.js';
+import { I as Input, S as Select } from './index-bfa6fb11.js';
 import '@mantine/dates';
-import { C as CDN_ADDRESS } from './index-cd4e4697.js';
-import './index-eac42591.js';
-import './index-18477f81.js';
-import './useMantineLocale-394505e3.js';
-import './index-95806c22.js';
-import './index-09a41d06.js';
-import './index.styles-ce806d08.js';
-import { u as useTranslations } from './index-06bf1250.js';
+import { C as CDN_ADDRESS } from './index-877f0de2.js';
+import './index-2dedc4a1.js';
+import './index-8e7e353a.js';
+import './useMantineLocale-ee20bcff.js';
+import './index-70de6276.js';
+import './index-1293d1e5.js';
+import './index.styles-5a4a43b8.js';
+import { u as useTranslations } from './index-2309a153.js';
 import '@mantine/hooks';
-import './utils-993fcbaa.js';
-import './other-fe353a6e.js';
-import './index-ff3ac699.js';
-import { M as MAPPED_LOCALE } from './utils-860ab803.js';
-import { L as LOCALE } from './Locale-c35637f3.js';
+import './utils-9f39769c.js';
+import './other-36806620.js';
+import './index-3f87ee6b.js';
+import { M as MAPPED_LOCALE } from './utils-d629b44b.js';
+import { L as LOCALE } from './Locale-65d47ed2.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;

package/build/esm/{index-7aff9d46.js → index-5ba9ba58.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-f5be5b40.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b0cacf41.js';
 import React__default, { useState, useContext, useMemo, useRef, useEffect, createContext } from 'react';
 import dayjs from 'dayjs';
-import { T as Tabs } from './index-ff3ac699.js';
-import { L as Loading } from './index-31d67d73.js';
-import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-c39cc3fa.js';
+import { T as Tabs } from './index-3f87ee6b.js';
+import { L as Loading } from './index-9d05ed6c.js';
+import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-37de24b2.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-0c734a44.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-e4d2ee87.js';
 import { Plus } from '@hhgtech/icons/core';
 import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
-import { C as CommonGAssets } from './index-18477f81.js';
-import { I as ImageWrap } from './index-226b5be9.js';
-import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-52bc554e.js';
-import { S as SocialType } from './index-eac42591.js';
-import { u as useTranslations } from './index-06bf1250.js';
+import { C as CommonGAssets } from './index-8e7e353a.js';
+import { I as ImageWrap } from './index-1a8fcb82.js';
+import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-64f72677.js';
+import { S as SocialType } from './index-2dedc4a1.js';
+import { u as useTranslations } from './index-2309a153.js';
 import { theme } from './miscTheme.js';
 import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
-import { A as Anchor$1 } from './index-a062a0a8.js';
+import { A as Anchor$1 } from './index-bfa6fb11.js';
 import '@mantine/dates';
-import './index-cd4e4697.js';
-import './useMantineLocale-394505e3.js';
-import { T as Text } from './index-95806c22.js';
-import { B as Button } from './index-09a41d06.js';
-import './index.styles-ce806d08.js';
+import './index-877f0de2.js';
+import './useMantineLocale-ee20bcff.js';
+import { T as Text } from './index-70de6276.js';
+import { B as Button } from './index-1293d1e5.js';
+import './index.styles-5a4a43b8.js';
 import '@mantine/hooks';
-import './utils-993fcbaa.js';
-import './other-fe353a6e.js';
+import './utils-9f39769c.js';
+import './other-36806620.js';
 import styled from '@emotion/styled';
 import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
-import { d as decodeMention, a as decodePostUrl } from './post-0012a5d9.js';
-import { B as Button$1 } from './index-c1b3c97b.js';
-import './translationsContext-a76268ed.js';
+import { d as decodeMention, a as decodePostUrl } from './post-42ba42f5.js';
+import { B as Button$1 } from './index-eb492fd8.js';
+import './translationsContext-ba1831ef.js';
 
 const StyledPostContent = styled.div `
   padding: 0.5rem 1rem 1rem;

package/build/esm/{index-5ca48b3c.js → index-63da7504.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-f5be5b40.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b0cacf41.js';
 import React__default, { useMemo, useEffect, useContext, useState, useRef, useCallback } from 'react';
-import { i as isInternalLink, L as LanguageSwitcher } from './index-a596c060.js';
-import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-cd4e4697.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-669798d3.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-c39cc3fa.js';
+import { i as isInternalLink, L as LanguageSwitcher } from './index-19dd9145.js';
+import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-877f0de2.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-d4f7a939.js';
+import { a as formatCommunity, b as formatPost } from './dataTransform-37de24b2.js';
 import { Download } from '@hhgtech/icons/core';
 import { createStyles, Box, Indicator, useMantineTheme } from '@mantine/core';
-import { L as Logo } from './index-db4a4a9a.js';
-import { u as useTranslations } from './index-06bf1250.js';
+import { L as Logo } from './index-8b95a063.js';
+import { u as useTranslations } from './index-2309a153.js';
 import throttle from 'lodash/throttle';
-import { I as Input } from './index-a062a0a8.js';
+import { I as Input } from './index-bfa6fb11.js';
 import '@mantine/dates';
-import './index-eac42591.js';
-import { C as CommonGAssets } from './index-18477f81.js';
-import './useMantineLocale-394505e3.js';
-import { T as Text } from './index-95806c22.js';
-import { B as Button$1 } from './index-09a41d06.js';
-import './index.styles-ce806d08.js';
-import './translationsContext-a76268ed.js';
+import './index-2dedc4a1.js';
+import { C as CommonGAssets } from './index-8e7e353a.js';
+import './useMantineLocale-ee20bcff.js';
+import { T as Text } from './index-70de6276.js';
+import { B as Button$1 } from './index-1293d1e5.js';
+import './index.styles-5a4a43b8.js';
+import './translationsContext-ba1831ef.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-993fcbaa.js';
-import './other-fe353a6e.js';
-import './index-ff3ac699.js';
-import { L as LOCALISED_SLUGS } from './constants-c5d6d450.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-9f39769c.js';
+import './other-36806620.js';
+import './index-3f87ee6b.js';
+import { L as LOCALISED_SLUGS } from './constants-82371ddd.js';
 import styled from '@emotion/styled';
-import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-62a317ea.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-f59a08b2.js';
-import { B as Button } from './index-c1b3c97b.js';
-import { i as domainLocalesMarryBaby } from './utils-0c734a44.js';
+import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-b5e6cf08.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-cf7daef6.js';
+import { B as Button } from './index-eb492fd8.js';
+import { i as domainLocalesMarryBaby } from './utils-e4d2ee87.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as LOCALIZED_SLUGS } from './constants-fbf9cd14.js';
+import { L as LOCALIZED_SLUGS } from './constants-f0762e4a.js';
 import { theme } from './miscTheme.js';
-import { H as Heading } from './index-d6922470.js';
-import { I as Indicator$1 } from './index-ca2f533b.js';
-import { u as useIsInit } from './useIsInit-b9bd610c.js';
+import { H as Heading } from './index-c5a8915b.js';
+import { I as Indicator$1 } from './index-db5fb3eb.js';
+import { u as useIsInit } from './useIsInit-40f6ed3a.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-07d29b91.js';
+import { U as UserAvatar } from './index-c889056e.js';
 import { ArrowRight } from '@hhgtech/icons/other';
 import formatString from 'string-format';
-import { C as Container } from './index-6c6e98b0.js';
-import { L as LOCALE } from './Locale-c35637f3.js';
+import { C as Container } from './index-93707caf.js';
+import { L as LOCALE } from './Locale-65d47ed2.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-c4c5d1bb.js';
+import { g as getDataWithCache } from './core-41243a2d.js';
 
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
@@ -83,6 +83,9 @@ const StyledDisplayWrapper = styled.div `
     ? `@media (min-width: ${props.upperBound}px) { display: none; }`
     : ''}
   `}
+  &.block-show {
+    display: block;
+  }
 `;
 
 const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
@@ -244,7 +247,7 @@ const StyledMasterMenuContainer = styled.div `
 //     display: none;
 //   }
 // `
-const StyledServiceListMenuSearchInputWrapper = styled.div `
+styled.div `
   padding: 16px;
   padding-bottom: 12px;
   .fake-search-input {
@@ -274,34 +277,6 @@ const StyledWrapper = styled.div `
   }
 `;
 
-const SearchInput = ({ id, projectType, }) => {
-    const { locale, configs: { statics }, siteType, } = useContext(NavigationContext);
-    const [keyword, setKeyword] = useState('');
-    const { t } = useTranslations();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const url = new URL(window.location.href);
-            const params = new URLSearchParams(url.search);
-            const searchValue = params.get('s');
-            setKeyword(searchValue);
-        }
-    }, []);
-    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: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
-            (window.location.href = `${statics.HOME_PAGE_URL}/search/?s=${e.target.value}&source=${projectType === 'together' ? 'community' : ''}`), 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 Phone = (_a) => {
     var { size = 24, color = theme.colors.neutral600 } = _a, rest = __rest(_a, ["size", "color"]);
     return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
@@ -1534,13 +1509,11 @@ const ToolSpotlights = ({ hrefViewMore, spotlightHealthTools = [] }) => {
 
 const MenuServiceList = ({ closePopup, menuItems = [] }) => {
     var _a, _b;
-    const { siteType, ssrMenuContent: { categories, healthTools, care, together, ecom }, activeMenuService, configs: { statics, enableSearchBar }, locale, } = useContext(NavigationContext);
+    const { 
+    // siteType,
+    ssrMenuContent: { categories, healthTools, care, together, ecom }, activeMenuService, configs: { statics }, 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/` })),
@@ -1551,14 +1524,16 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
 };
 
 const HamburgerMenu = ({ menuItems }) => {
-    const { siteType, configs: { enableSearchBar }, } = useContext(NavigationContext);
+    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(HamburgerIcon, { siteType: siteType, enableSearch: false, className: "mobile-hamburger-icon" })),
                 React__default.createElement(MenuServiceList, { menuItems: menuItems, closePopup: onClose })))));
 };
 
@@ -1754,6 +1729,9 @@ const StyledWrapMenuItems = styled.div `
   &[data-site-type='marryBaby'] {
     gap: 26px;
   }
+`;
+const StyleWrapperNavigtionSearch = styled.div `
+  padding: 0 12px 6px;
 `;
 
 const InitialCart = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "512", height: "512", style: {
@@ -2083,7 +2061,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                import('./doctor-f3d0c8bd.js').then((data) => {
+                import('./doctor-ae1fb73c.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2140,9 +2118,73 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
         item.popupType === 'categories' ? (React__default.createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights, onClose: onClose })) : item.popupType === 'tools' ? (React__default.createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, onClose: onClose })) : item.popupType === 'together' ? (React__default.createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights, onClose: onClose })) : item.popupType === 'care' ? (React__default.createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights, onClose: onClose })) : null));
 };
 
+const StyleInput = styled(Input) `
+  .mantine-Input-input {
+    border-radius: 40px;
+    background: ${theme.colors.white};
+    border: 1px solid ${theme.colors.blue200};
+
+    &:focus {
+      border: 1px solid ${theme.colors.primaryBase};
+    }
+  }
+
+  .search-icon-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, }) => {
+    const { locale, configs: { statics }, siteType, } = useContext(NavigationContext);
+    const [keyword, setKeyword] = useState('');
+    const { t } = useTranslations();
+    const goToSearchPage = (searchValue = '') => {
+        window.location.href = `${statics.HOME_PAGE_URL}/search/?s${searchValue}=&source=${projectType === 'together' ? 'community' : ''}`;
+    };
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const url = new URL(window.location.href);
+            const params = new URLSearchParams(url.search);
+            const searchValue = params.get('s');
+            setKeyword(searchValue);
+        }
+    }, []);
+    return isMobile && !isHomepage ? (React__default.createElement(Button$1, { variant: "tertiary", style: {
+            padding: '6px',
+        }, size: "sm", onClick: () => {
+            goToSearchPage('');
+        } },
+        React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
+                verticalAlign: 'bottom',
+            } },
+            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", placeholder: siteType === 'marryBaby'
+            ? t('navigation.search.input.placeholder')
+            : t('home.search', {
+                site: LOCALE_SPECS[locale || 'en-PH']
+                    ? LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
+                    : '',
+            }), onChange: setKeyword, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
+            goToSearchPage(e.target.value), type: "search", onFocus: (e) => {
+            e.preventDefault();
+            if (isMobile && isHomepage) {
+                goToSearchPage('');
+            }
+        }, icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+                if (isMobile && isHomepage) {
+                    goToSearchPage('');
+                }
+            } },
+            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
+                    verticalAlign: 'bottom',
+                } },
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" }))) }));
+};
+
 const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, subHead, projectType, }) => {
     var _a;
-    const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, onBookingClick, currentUrl, onLoginClick, cartNumber, 
+    const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, onBookingClick, currentUrl, onLoginClick, cartNumber, 
     // ssrMenuContent: { categories, healthTools, care, together },
     configs: { statics, enableNavCareBooking, enableSearchBar,
     // enableNavCare,
@@ -2224,9 +2266,10 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                         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, projectType: projectType })))))),
+                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             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, projectType: projectType }))) : (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })))),
+                !isMobile && siteType !== 'marryBaby' && (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
+                (isMobile || siteType === 'marryBaby') && enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
                 React__default.createElement(StyledProfileNavGroup, null,
                     !isMobile && (React__default.createElement(React__default.Fragment, null,
                         ecomNavItem ? (React__default.createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : null,
@@ -2265,6 +2308,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 }))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
                 ? sponsorComponent
@@ -2276,8 +2321,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             : null,
         subHead && subHead));
 };
-const NavigtionSearch = ({ siteType, projectType, }) => (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: siteType === 'marryBaby' ? 'marry-baby' : '' },
-    React__default.createElement(SearchInput, { id: "desktop", projectType: projectType })));
+const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = 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 })));
 const NavigationMenu = ({ menuItems }) => {
     const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together }, } = useContext(NavigationContext);
     return (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp", style: { height: '100%' } },

package/build/esm/{index-52bc554e.js → index-64f72677.js}

@@ -3,25 +3,25 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-06bf1250.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-993fcbaa.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-d9df54e2.js';
-import { I as Icon } from './index-85fe6e9b.js';
-import { _ as __rest } from './tslib.es6-f5be5b40.js';
-import { U as UserAvatar } from './index-07d29b91.js';
-import { u as useScreenSize } from './index.styles-ce806d08.js';
-import './index-cd4e4697.js';
-import { C as CommonGAssets } from './index-18477f81.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-0c734a44.js';
-import { B as Button } from './index-c1b3c97b.js';
-import { T as Text } from './index-95806c22.js';
+import { u as useTranslations } from './index-2309a153.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-9f39769c.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-ad3fda2f.js';
+import { I as Icon } from './index-32aa3621.js';
+import { _ as __rest } from './tslib.es6-b0cacf41.js';
+import { U as UserAvatar } from './index-c889056e.js';
+import { u as useScreenSize } from './index.styles-5a4a43b8.js';
+import './index-877f0de2.js';
+import { C as CommonGAssets } from './index-8e7e353a.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-e4d2ee87.js';
+import { B as Button } from './index-eb492fd8.js';
+import { T as Text } from './index-70de6276.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-226b5be9.js';
+import { I as ImageWrap } from './index-1a8fcb82.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
 import { keyframes } from '@emotion/react';
-import { H as Heading } from './index-d6922470.js';
-import { M as Modal } from './index-9e1d687b.js';
+import { H as Heading } from './index-c5a8915b.js';
+import { M as Modal } from './index-4a86e6c2.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -958,7 +958,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-c7bda977.js').then((module) => {
+                import('./index-8b75c352.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }

package/build/esm/{index-7968fff5.js → index-670bd1dd.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-244f222c.js';
+import { u as useScrollbarSize } from './useScrollbarSize-04db598b.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-993fcbaa.js';
+import { M as MediaQueries } from './utils-9f39769c.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-90d5ac53.js → index-6748f319.js}

@@ -1,32 +1,32 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-f5be5b40.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-b0cacf41.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-c1b3c97b.js';
-import { H as Heading } from './index-d6922470.js';
-import { u as useTranslations } from './index-06bf1250.js';
+import { B as Button } from './index-eb492fd8.js';
+import { H as Heading } from './index-c5a8915b.js';
+import { u as useTranslations } from './index-2309a153.js';
 import innertext from 'innertext';
-import { S as SharePopup, P as PopupDanger, i as deletePost, j as IconAlertCircle, b as SubmitReportForm, k as deleteComment, l as decodeCommentBody, m as likeUnlikeComment, I as InputCommentBar, c as SocialLinkPreview, n as likeUnlikePost, g as getDefaultFailNoti } from './index-f8693f00.js';
-import { C as CommonGAssets } from './index-18477f81.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-d0187767.js';
+import { S as SharePopup, P as PopupDanger, i as deletePost, j as IconAlertCircle, b as SubmitReportForm, k as deleteComment, l as decodeCommentBody, m as likeUnlikeComment, I as InputCommentBar, c as SocialLinkPreview, n as likeUnlikePost, g as getDefaultFailNoti } from './index-e103c96f.js';
+import { C as CommonGAssets } from './index-8e7e353a.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-ae9e57ee.js';
 import { PATHS, DISCOVER_PATHS, CARE_PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, b as callApiWithAuth, d as getApiPath, c as callApi, p as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, q as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-0c734a44.js';
+import { T as TogetherComponentGlobalContext, b as callApiWithAuth, d as getApiPath, c as callApi, p as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, q as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-e4d2ee87.js';
 import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-c52eb531.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-6a71e3b2.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-993fcbaa.js';
+import { M as MediaQueries } from './utils-9f39769c.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-c39cc3fa.js';
-import { C as CardLink } from './index-dc4c51ba.js';
-import { C as CardAuthor, L as Loading, c as ProfileDetailModal } from './index-52bc554e.js';
-import { a as ProfileDetail, P as PostContent } from './index-7aff9d46.js';
-import { a as PostImagePreview } from './index-916b17cd.js';
-import { D as Divider } from './index-8f49c4fe.js';
-import './index-cd4e4697.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-37de24b2.js';
+import { C as CardLink } from './index-1a4ca301.js';
+import { C as CardAuthor, L as Loading, c as ProfileDetailModal } from './index-64f72677.js';
+import { a as ProfileDetail, P as PostContent } from './index-5ba9ba58.js';
+import { a as PostImagePreview } from './index-3634c8ab.js';
+import { D as Divider } from './index-e86908b5.js';
+import './index-877f0de2.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-a3a1a284.js';
-import { T as Text } from './index-95806c22.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-669798d3.js';
+import { I as Input } from './index-4d7a8867.js';
+import { T as Text } from './index-70de6276.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-d4f7a939.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 var img$8 = "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";