@hhgtech/hhg-components 1.29.240 → 1.29.242

package/build/{index-e28e8eee.js → index-f2f1f3db.js}

@@ -1,51 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-d8e4b47f.js');
+var tslib_es6 = require('./tslib.es6-c8f55e6b.js');
 var React = require('react');
-var index$8 = require('./index-230247fa.js');
-var index$2 = require('./index-8977955b.js');
-var normalizeLink = require('./normalizeLink-6ae8f020.js');
-var dataTransform = require('./dataTransform-52bc2454.js');
+var index$7 = require('./index-915a1ec6.js');
+var index$2 = require('./index-5e50cb99.js');
+var normalizeLink = require('./normalizeLink-646aeddb.js');
+var dataTransform = require('./dataTransform-fe8fc253.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$c = require('./index-2414953b.js');
-var index$4 = require('./index-e584776c.js');
+var index$c = require('./index-a7cb9ce4.js');
+var index$4 = require('./index-cd125a34.js');
 var throttle = require('lodash/throttle');
-var index$5 = require('./index-128dc4dd.js');
+var index$b = require('./index-c419cfc1.js');
 require('@mantine/dates');
-require('./index-80758ab9.js');
-var index$3 = require('./index-6daf5ca0.js');
-require('./useMantineLocale-aee792e2.js');
-var index = require('./index-e1ec0878.js');
-var index$b = require('./index-094f265c.js');
-require('./index.styles-c049fc36.js');
-require('./translationsContext-4e8b3024.js');
+require('./index-714dff4b.js');
+var index$3 = require('./index-c0ad20b0.js');
+require('./useMantineLocale-eef30410.js');
+var index = require('./index-66f19f91.js');
+var index$a = require('./index-0da0989b.js');
+require('./index.styles-a44a34a4.js');
+require('./translationsContext-16842bbf.js');
 require('@mantine/hooks');
-var utils = require('./utils-6fb4f2c4.js');
-require('./other-d4d5f5a3.js');
-require('./index-468e481f.js');
-var constants = require('./constants-e3538427.js');
+var utils = require('./utils-79d50554.js');
+require('./other-5da66044.js');
+require('./index-85ca70b3.js');
+var constants = require('./constants-4d91ff45.js');
 var styled = require('@emotion/styled');
-var navigationProfileButton = require('./index-d9383810.js');
-var store = require('./store-9a261ef1.js');
-var index$1 = require('./index-2164fb8f.js');
-var togetherComponentGlobalContext = require('./utils-a5421d12.js');
+var navigationProfileButton = require('./index-9836af42.js');
+var store = require('./store-65e1bce3.js');
+var index$1 = require('./index-0baa3982.js');
+var togetherComponentGlobalContext = require('./utils-8d8dcdc8.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var constants$1 = require('./constants-df36a7af.js');
+var constants$1 = require('./constants-9853dc1d.js');
 var miscTheme = require('./miscTheme.js');
-var index$7 = require('./index-7801423a.js');
-var index$6 = require('./index-f4f0d1f5.js');
-var useIsInit = require('./useIsInit-af23f0bf.js');
+var index$6 = require('./index-debe7f3c.js');
+var index$5 = require('./index-e1783339.js');
+var useIsInit = require('./useIsInit-5d9c2167.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$9 = require('./index-27f62e7b.js');
+var index$8 = require('./index-f20d3144.js');
 var other = require('@hhgtech/icons/other');
 var formatString = require('string-format');
-var index$a = require('./index-73a73bed.js');
-var Locale = require('./Locale-297ee69f.js');
+var index$9 = require('./index-4d2dfec3.js');
+var Locale = require('./Locale-ccd919d1.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-81fb4c5e.js');
+var core$2 = require('./core-859c5399.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -113,6 +113,9 @@ const StyledDisplayWrapper = styled__default["default"].div `
     ? `@media (min-width: ${props.upperBound}px) { display: none; }`
     : ''}
   `}
+  &.block-show {
+    display: block;
+  }
 `;
 
 const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
@@ -274,7 +277,7 @@ const StyledMasterMenuContainer = styled__default["default"].div `
 //     display: none;
 //   }
 // `
-const StyledServiceListMenuSearchInputWrapper = styled__default["default"].div `
+styled__default["default"].div `
   padding: 16px;
   padding-bottom: 12px;
   .fake-search-input {
@@ -304,34 +307,6 @@ const StyledWrapper = styled__default["default"].div `
   }
 `;
 
-const SearchInput = ({ id, projectType, }) => {
-    const { locale, configs: { statics }, siteType, } = React.useContext(NavigationContext);
-    const [keyword, setKeyword] = React.useState('');
-    const { t } = index$4.useTranslations();
-    React.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["default"].createElement(index$5.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: index$2.LOCALE_SPECS[locale || 'en-PH']
-                    ? index$2.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["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click" },
-            React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: {
-                    verticalAlign: 'bottom',
-                } },
-                React__default["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 = miscTheme.theme.colors.neutral600 } = _a, rest = tslib_es6.__rest(_a, ["size", "color"]);
     return (React__default["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
@@ -487,7 +462,7 @@ const ItemMenu = ({ item, menu }) => {
 const NewWrapper = ({ isNew, children, }) => {
     const { t } = index$4.useTranslations();
     if (isNew) {
-        return (React__default["default"].createElement(index$6.Indicator, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
+        return (React__default["default"].createElement(index$5.Indicator, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
                 root: {
                     paddingRight: 10,
                 },
@@ -502,14 +477,14 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
     const theme = core.useMantineTheme();
     return (React__default["default"].createElement(StyledItemGridLeft, null,
         React__default["default"].createElement(StyledHeading$1, null,
-            React__default["default"].createElement(index$7.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
+            React__default["default"].createElement(index$6.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
         menuItems.slice(0, 6).map((item, index$1) => {
             const href = (item === null || item === void 0 ? void 0 : item.link)
                 ? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
                     ? item === null || item === void 0 ? void 0 : item.link
                     : `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
                 : '/';
-            return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!index$8.isInternalLink(href) && {
+            return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!index$7.isInternalLink(href) && {
                 target: '_blank',
             }), { "data-theme": siteType, key: index$1, onClick: onClosePopup }),
                 React__default["default"].createElement("div", { className: "icon" },
@@ -853,7 +828,7 @@ const Spotlights = ({ title, viewMore, children, link, dataEventAction = '', })
     const { siteType } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(StyledItemGridRight, null,
         React__default["default"].createElement(StyledHeading, null,
-            React__default["default"].createElement(index$7.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
+            React__default["default"].createElement(index$6.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
             viewMore && (React__default["default"].createElement(StyledViewMore, { "data-event-category": "Hamburger Navigation", "data-event-action": dataEventAction, "data-event-label": link, href: link, "data-theme": siteType },
                 viewMore,
                 React__default["default"].createElement("img", { src: siteType === 'marryBaby'
@@ -1085,7 +1060,7 @@ const Item$2 = ({ post, index = 0 }) => {
     return (React__default["default"].createElement(StyledItem$3, { href: postUrl, "data-event-category": "Hamburger Navigation", "data-event-action": `Together Click ${index + 1}`, "data-event-label": postUrl },
         React__default["default"].createElement(StyledContent$1, null,
             React__default["default"].createElement(StyledInfoUser, null,
-                React__default["default"].createElement(index$9.UserAvatar, { avatar: (_b = post.author) === null || _b === void 0 ? void 0 : _b.avatar, username: ((_c = post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post.author) === null || _d === void 0 ? void 0 : _d.username) }),
+                React__default["default"].createElement(index$8.UserAvatar, { avatar: (_b = post.author) === null || _b === void 0 ? void 0 : _b.avatar, username: ((_c = post.author) === null || _c === void 0 ? void 0 : _c.name) || ((_d = post.author) === null || _d === void 0 ? void 0 : _d.username) }),
                 React__default["default"].createElement(StyledWrapInfo, null,
                     React__default["default"].createElement(StyledName, { "data-theme": siteType }, (_e = post.author) === null || _e === void 0 ? void 0 : _e.name),
                     React__default["default"].createElement(StyledInfo, null,
@@ -1564,13 +1539,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, } = React.useContext(NavigationContext);
+    const { 
+    // siteType,
+    ssrMenuContent: { categories, healthTools, care, together, ecom }, activeMenuService, configs: { statics }, locale, } = React.useContext(NavigationContext);
     const { t } = index$4.useTranslations();
     return (React__default["default"].createElement(StyledMasterMenuContainer, { id: 'categories-menu' },
-        enableSearchBar ? (React__default["default"].createElement(StyledServiceListMenuSearchInputWrapper, { "data-theme": siteType, onClick: () => {
-                window.location.href = `${statics.HOME_PAGE_URL}/search`;
-            } },
-            React__default["default"].createElement(SearchInput, { id: "mobile" }))) : null,
         React__default["default"].createElement(StyledWrapper, null,
             React__default["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["default"].createElement(CategorySpotlights, { spotlightsList: (categories === null || categories === void 0 ? void 0 : categories.spotlights) || [], hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/spotlight/` })),
@@ -1581,14 +1554,16 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
 };
 
 const HamburgerMenu = ({ menuItems }) => {
-    const { siteType, configs: { enableSearchBar }, } = React.useContext(NavigationContext);
+    const { siteType,
+    // configs: { enableSearchBar },
+     } = React.useContext(NavigationContext);
     const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper();
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbDown" },
         React__default["default"].createElement("header", { className: styles$2.menuContainer },
             React__default["default"].createElement("div", { className: styles$2.menuIcon, ref: containerRef, role: "button", tabIndex: 0, onBlur: onContainerBlur, onFocus: onContainerFocus },
                 React__default["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["default"].createElement(ClosePopupIcon, { className: "mobile-close-icon" }),
-                    React__default["default"].createElement(HamburgerIcon, { siteType: siteType, enableSearch: enableSearchBar, className: "mobile-hamburger-icon" })),
+                    React__default["default"].createElement(HamburgerIcon, { siteType: siteType, enableSearch: false, className: "mobile-hamburger-icon" })),
                 React__default["default"].createElement(MenuServiceList, { menuItems: menuItems, closePopup: onClose })))));
 };
 
@@ -1784,6 +1759,9 @@ const StyledWrapMenuItems = styled__default["default"].div `
   &[data-site-type='marryBaby'] {
     gap: 26px;
   }
+`;
+const StyleWrapperNavigtionSearch = styled__default["default"].div `
+  padding: 0 12px 6px;
 `;
 
 const InitialCart = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: "512", height: "512", style: {
@@ -2019,10 +1997,10 @@ const BtnClosePopup = ({ onClosePopup }) => {
 
 const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, }) => {
     return (React__default["default"].createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
-        React__default["default"].createElement(index$a.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
+        React__default["default"].createElement(index$9.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
             !hideCloseBtn && (React__default["default"].createElement("div", { className: styles.container },
                 React__default["default"].createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
-            React__default["default"].createElement(index$a.Container, { className: styles.gridContainer }, children))));
+            React__default["default"].createElement(index$9.Container, { className: styles.gridContainer }, children))));
 };
 
 const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
@@ -2113,7 +2091,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-a753c58f.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-43dbbee6.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2143,7 +2121,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 background: 'transparent',
             };
     return (React__default["default"].createElement(Tag, { tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.itemNavButton, ref: containerRef },
-        React__default["default"].createElement(index$b.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
+        React__default["default"].createElement(index$a.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
                     width: 28,
                     height: 28,
                 } })) : (React__default["default"].createElement("a", { href: normalizeLink.normalizeLinkSlash(item.link + '/') },
@@ -2170,9 +2148,73 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
         item.popupType === 'categories' ? (React__default["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["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["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["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__default["default"](index$b.Input) `
+  .mantine-Input-input {
+    border-radius: 40px;
+    background: ${miscTheme.theme.colors.white};
+    border: 1px solid ${miscTheme.theme.colors.blue200};
+
+    &:focus {
+      border: 1px solid ${miscTheme.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, } = React.useContext(NavigationContext);
+    const [keyword, setKeyword] = React.useState('');
+    const { t } = index$4.useTranslations();
+    const goToSearchPage = (searchValue = '') => {
+        window.location.href = `${statics.HOME_PAGE_URL}/search/?s${searchValue}=&source=${projectType === 'together' ? 'community' : ''}`;
+    };
+    React.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["default"].createElement(index$a.Button, { variant: "tertiary", style: {
+            padding: '6px',
+        }, size: "sm", onClick: () => {
+            goToSearchPage('');
+        } },
+        React__default["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["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["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: index$2.LOCALE_SPECS[locale || 'en-PH']
+                    ? index$2.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["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+                if (isMobile && isHomepage) {
+                    goToSearchPage('');
+                }
+            } },
+            React__default["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["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,
@@ -2254,9 +2296,10 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                         React__default["default"].createElement(index$c.Logo, { style: {
                                 display: 'flex',
                             }, type: logoType, badge: locale === 'id-ID' && (React__default["default"].createElement("img", { src: index$3.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["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType })))))),
+                !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             React__default["default"].createElement(StyledRightGroup, { "data-site-type": siteType },
-                !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType }))) : (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })))),
+                !isMobile && siteType !== 'marryBaby' && (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
+                (isMobile || siteType === 'marryBaby') && enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
                 React__default["default"].createElement(StyledProfileNavGroup, null,
                     !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null,
                         ecomNavItem ? (React__default["default"].createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : null,
@@ -2268,7 +2311,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 order: 10,
                             },
                         }) },
-                        React__default["default"].createElement(index$b.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
+                        React__default["default"].createElement(index$a.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
                                 root: {
                                     [theme.fn.smallerThan('sm')]: {
                                         paddingLeft: 10,
@@ -2295,6 +2338,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 borderLeft: '1px solid #E4E8EC',
                             } })),
                         React__default["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["default"].createElement(StyleWrapperNavigtionSearch, null,
+            React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile, isHomepage: isHomepage }))),
         sponsorComponent
             ? !React__default["default"].isValidElement(sponsorComponent)
                 ? sponsorComponent
@@ -2306,8 +2351,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             : null,
         subHead && subHead));
 };
-const NavigtionSearch = ({ siteType, projectType, }) => (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: siteType === 'marryBaby' ? 'marry-baby' : '' },
-    React__default["default"].createElement(SearchInput, { id: "desktop", projectType: projectType })));
+const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, }) => (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
+    React__default["default"].createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage })));
 const NavigationMenu = ({ menuItems }) => {
     const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together }, } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", style: { height: '100%' } },
@@ -2516,7 +2561,7 @@ const _NavigationV2 = (props) => {
             '--header-bottom': headerBottom + 'px',
         }, className: className },
         React__default["default"].createElement("section", { ref: headerRef },
-            React__default["default"].createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, projectType: projectType, languageMenu: React__default["default"].createElement(index$8.LanguageSwitcher, { languageOptions: languageOptions, locale: locale }) }))));
+            React__default["default"].createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, projectType: projectType, languageMenu: React__default["default"].createElement(index$7.LanguageSwitcher, { languageOptions: languageOptions, locale: locale }) }))));
 };
 const NavigationV2 = (props) => {
     const propsWithDefaultValues = Object.assign({ siteType: 'helloSites', projectType: 'discover', locale: 'vi-VN', activeMenuService: 'categories', ssrMenuContent: {} }, props);

package/build/{index-e977850e.js → index-f39241b2.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-e584776c.js');
-var index$1 = require('./index-2164fb8f.js');
+var index = require('./index-cd125a34.js');
+var index$1 = require('./index-0baa3982.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c88c111c.js → index-f76a38c9.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-d8e4b47f.js');
+var tslib_es6 = require('./tslib.es6-c8f55e6b.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
-var index = require('./index-8977955b.js');
-require('./index-80758ab9.js');
-var index$1 = require('./index-6daf5ca0.js');
-var useMantineLocale = require('./useMantineLocale-aee792e2.js');
-var Locale = require('./Locale-297ee69f.js');
+var index = require('./index-5e50cb99.js');
+require('./index-714dff4b.js');
+var index$1 = require('./index-c0ad20b0.js');
+var useMantineLocale = require('./useMantineLocale-eef30410.js');
+var Locale = require('./Locale-ccd919d1.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }