@hhgtech/hhg-components 1.28.85 → 1.28.88

package/build/esm/ecom.js

@@ -1,10 +1,10 @@
-import { t as theme } from './theme-a174b0a0.js';
-export { c as Constants } from './constants-cdd4b297.js';
-export { t as Types } from './types-622c24ac.js';
-import './index-2bfb68d7.js';
+import { t as theme } from './theme-2dd612bb.js';
+export { c as Constants } from './constants-f8292adf.js';
+export { t as Types } from './types-6aeb2710.js';
+import './index-bbec24f8.js';
 import 'date-fns/locale';
-import './Subot-feea4506.js';
-import './isProduction-319a7450.js';
+import './Subot-c8f98a6e.js';
+import './isProduction-c1739fd0.js';
 
 // ===== CART END =====
 

package/build/esm/footer.js

@@ -1,31 +1,31 @@
-export { F as Footer } from './index-3988b178.js';
+export { F as Footer } from './index-81b7c806.js';
 import 'react';
-import './index-61cad327.js';
-import './tslib.es6-22c1d601.js';
-import './index-399b2485.js';
+import './index-a2ba5e1d.js';
+import './tslib.es6-06b67847.js';
+import './index-e9b3f95e.js';
 import '@hhgtech/icons/other';
 import '@mantine/core';
 import '@mantine/hooks';
-import './index-05c03de9.js';
-import './index-2bfb68d7.js';
+import './index-fed310aa.js';
+import './index-bbec24f8.js';
 import 'date-fns/locale';
-import './Subot-feea4506.js';
-import './isProduction-319a7450.js';
+import './Subot-c8f98a6e.js';
+import './isProduction-c1739fd0.js';
 import 'dayjs';
-import './utils-582732ef.js';
+import './utils-7cd0f51d.js';
 import 'styled-components';
 import '@mantine/carousel';
-import './index-b2034f97.js';
-import './theme-a174b0a0.js';
+import './index-154315cf.js';
+import './theme-2dd612bb.js';
 import 'classnames';
-import './useUniqueId-87d90fb5.js';
+import './useUniqueId-56bf6387.js';
 import '@hhgtech/icons/core';
-import './index-9d979f77.js';
+import './index-f2dfb9b6.js';
 import '@mantine/dates';
-import './useTranslations-9833e7b4.js';
-import './translationsContext-30c9b121.js';
+import './useTranslations-9d582421.js';
+import './translationsContext-498df71c.js';
 import 'string-format';
-import './index-b8009514.js';
-import './utils-5fa47bda.js';
-import './index-11d1ee46.js';
-import './index.styled-4b29ede2.js';
+import './index-994b7807.js';
+import './utils-639f46ce.js';
+import './index-b7131d9b.js';
+import './index.styled-614f8f71.js';

package/build/esm/gAssets.js

@@ -1,5 +1,5 @@
-export { C as CommonGAssets, G as GAssets } from './index-05c03de9.js';
-import './index-2bfb68d7.js';
+export { C as CommonGAssets, G as GAssets } from './index-fed310aa.js';
+import './index-bbec24f8.js';
 import 'date-fns/locale';
-import './Subot-feea4506.js';
-import './isProduction-319a7450.js';
+import './Subot-c8f98a6e.js';
+import './isProduction-c1739fd0.js';

package/build/esm/{getDynamicHealthTool-f8cd8cd5.js → getDynamicHealthTool-15d4af5f.js}

@@ -1,7 +1,7 @@
-import { a as __awaiter } from './tslib.es6-22c1d601.js';
-import { n as normalizeLinkSlash } from './normalizeLink-73f75219.js';
-import { c as getDiscoverApiDomain } from './routing-6fa19fce.js';
-import { g as getDataWithCache } from './core-95daf848.js';
+import { a as __awaiter } from './tslib.es6-06b67847.js';
+import { n as normalizeLinkSlash } from './normalizeLink-df2d727f.js';
+import { c as getDiscoverApiDomain } from './routing-980f9b3e.js';
+import { g as getDataWithCache } from './core-fcc03613.js';
 
 const formatHealthTool = (healthTool, locale) => {
     var _a, _b;

package/build/esm/{getSocialList-111c058e.js → getSocialList-27b8d078.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { L as LOCALE } from './Subot-feea4506.js';
-import { C as CommonGAssets } from './index-05c03de9.js';
+import { L as LOCALE } from './Subot-c8f98a6e.js';
+import { C as CommonGAssets } from './index-fed310aa.js';
 
 const getSocialList = (shareUrl) => [
     {

package/build/esm/hooks.js

@@ -1,21 +1,21 @@
-export { u as useTranslations } from './useTranslations-9833e7b4.js';
-export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-d6180af5.js';
-export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-7786a9bc.js';
-export { u as useHealthToolsCache } from './useHealthToolCache-b1deb3ce.js';
-export { u as useIsInit } from './useIsInit-da039681.js';
-export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-bb958dac.js';
-export { u as useInitialMount, a as useUniqueId } from './useUniqueId-87d90fb5.js';
+export { u as useTranslations } from './useTranslations-9d582421.js';
+export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-af45157e.js';
+export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-891705ef.js';
+export { u as useHealthToolsCache } from './useHealthToolCache-077fd1b3.js';
+export { u as useIsInit } from './useIsInit-d3ce501c.js';
+export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-15719c69.js';
+export { u as useInitialMount, a as useUniqueId } from './useUniqueId-56bf6387.js';
 import 'react';
-import './translationsContext-30c9b121.js';
+import './translationsContext-498df71c.js';
 import 'string-format';
 import 'lodash/debounce';
-import './tslib.es6-22c1d601.js';
-import './cookieHelper-5326c8e9.js';
-import './Subot-feea4506.js';
-import './getDynamicHealthTool-f8cd8cd5.js';
-import './normalizeLink-73f75219.js';
-import './routing-6fa19fce.js';
-import './index-2bfb68d7.js';
+import './tslib.es6-06b67847.js';
+import './cookieHelper-5fb925e3.js';
+import './Subot-c8f98a6e.js';
+import './getDynamicHealthTool-15d4af5f.js';
+import './normalizeLink-df2d727f.js';
+import './routing-980f9b3e.js';
+import './index-bbec24f8.js';
 import 'date-fns/locale';
-import './isProduction-319a7450.js';
-import './core-95daf848.js';
+import './isProduction-c1739fd0.js';
+import './core-fcc03613.js';

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-30c9b121.js';
-export { T as TranslationsContext } from './translationsContext-30c9b121.js';
+import { T as TranslationsContext } from './translationsContext-498df71c.js';
+export { T as TranslationsContext } from './translationsContext-498df71c.js';
 import React__default, { useState, useEffect, useMemo } from 'react';
 import defaultTranslations from './i18n-values/en-PH.js';
 import hiTranslations from './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-30c9b121.js';
-export { T as TranslationsContext } from './translationsContext-30c9b121.js';
+import { T as TranslationsContext } from './translationsContext-498df71c.js';
+export { T as TranslationsContext } from './translationsContext-498df71c.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/{index-fb872e68.js → index-00a959b6.js}

@@ -1,17 +1,17 @@
-import { _ as __rest } from './tslib.es6-22c1d601.js';
+import { _ as __rest } from './tslib.es6-06b67847.js';
 import React__default from 'react';
-import './index-399b2485.js';
+import './index-e9b3f95e.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-2bfb68d7.js';
-import './Subot-feea4506.js';
-import './index-05c03de9.js';
-import { T as Text$1 } from './index-b2034f97.js';
-import './theme-a174b0a0.js';
-import './translationsContext-30c9b121.js';
+import './index-bbec24f8.js';
+import './Subot-c8f98a6e.js';
+import './index-fed310aa.js';
+import { T as Text$1 } from './index-154315cf.js';
+import './theme-2dd612bb.js';
+import './translationsContext-498df71c.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-582732ef.js';
+import './utils-7cd0f51d.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-ede14ff4.js → index-0cfe5ad8.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-22c1d601.js';
+import { _ as __rest } from './tslib.es6-06b67847.js';
 import React__default, { useState, useEffect } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';
-import { D as DEBOUNCED_TIME, g as StyledSliderWrapper, B as Button, h as StyledSlider } from './index-399b2485.js';
+import { D as DEBOUNCED_TIME, g as StyledSliderWrapper, B as Button, h as StyledSlider } from './index-e9b3f95e.js';
 
 const Slider = (_a) => {
     var { color, withControl, onChange, value, min, max, isStatic, containerClassName, containerStyle } = _a, props = __rest(_a, ["color", "withControl", "onChange", "value", "min", "max", "isStatic", "containerClassName", "containerStyle"]);

package/build/esm/{index-b2034f97.js → index-154315cf.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-22c1d601.js';
+import { _ as __rest } from './tslib.es6-06b67847.js';
 import React__default from 'react';
 import { rem, createStyles, Text as Text$1 } from '@mantine/core';
 

package/build/esm/{index-3da4c0be.js → index-1e45ef69.js}

@@ -1,43 +1,42 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-22c1d601.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-06b67847.js';
 import React__default, { useState, useMemo, useRef, Fragment, useEffect, useContext, useCallback } from 'react';
-import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-399b2485.js';
+import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-e9b3f95e.js';
 import styled, { css } from 'styled-components';
-import { t as theme } from './theme-a174b0a0.js';
-import { T as Text } from './index-b2034f97.js';
-import { C as CommonGAssets } from './index-05c03de9.js';
-import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-2bfb68d7.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-73f75219.js';
-import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-6fa19fce.js';
-import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-3c8a8e70.js';
-import { L as Logo } from './index-b8009514.js';
-import { u as useTranslations } from './useTranslations-9833e7b4.js';
+import { t as theme } from './theme-2dd612bb.js';
+import { T as Text } from './index-154315cf.js';
+import { C as CommonGAssets } from './index-fed310aa.js';
+import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-bbec24f8.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-df2d727f.js';
+import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-980f9b3e.js';
+import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-4ee121ec.js';
+import { L as Logo } from './index-994b7807.js';
+import { u as useTranslations } from './useTranslations-9d582421.js';
 import throttle from 'lodash/throttle';
 import { createStyles, rem, Box, Indicator, Portal } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE } from './Subot-feea4506.js';
-import './translationsContext-30c9b121.js';
+import { L as LOCALE } from './Subot-c8f98a6e.js';
+import './translationsContext-498df71c.js';
 import formatString from 'string-format';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-582732ef.js';
-import { L as LOCALISED_SLUGS } from './constants-cdd4b297.js';
-import { I as Icon } from './index-42c23102.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-7cd0f51d.js';
+import { L as LOCALISED_SLUGS } from './constants-f8292adf.js';
 import { User } from '@hhgtech/icons/core';
-import { t as getDefaultClassWrapper } from './index.styles-f9c08c4a.js';
-import { C as ChevronDown } from './ChevronDown-33f2fa35.js';
-import { B as Button } from './index-61cad327.js';
-import { l as domainLocalesMarryBaby } from './utils-eba8a92c.js';
-import { a as LOCALIZED_SLUGS } from './constants-b961deb0.js';
-import { H as Heading } from './index-c1b23132.js';
-import { I as Indicator$1 } from './index-8fc5b06d.js';
-import { u as useIsInit } from './useIsInit-da039681.js';
-import './utils-5fa47bda.js';
-import './index.styled-4b29ede2.js';
-import './index-3373b23b.js';
+import { t as getDefaultClassWrapper } from './index.styles-b360f30e.js';
+import { C as ChevronDown } from './ChevronDown-7bf58929.js';
+import { B as Button } from './index-a2ba5e1d.js';
+import { l as domainLocalesMarryBaby } from './utils-6c17caa4.js';
+import { a as LOCALIZED_SLUGS } from './constants-ace36647.js';
+import { H as Heading } from './index-67bca076.js';
+import { I as Indicator$1 } from './index-8e849679.js';
+import { u as useIsInit } from './useIsInit-d3ce501c.js';
+import './utils-639f46ce.js';
+import './index.styled-614f8f71.js';
+import './index-a8d628e8.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { C as Container } from './index-9d979f77.js';
+import { C as Container } from './index-f2dfb9b6.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-95daf848.js';
+import { g as getDataWithCache } from './core-fcc03613.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',
@@ -209,7 +208,8 @@ const CartBadge = (_a) => {
         React__default.createElement(Indicator, { classNames: {
                 root: classes.indicatorRoot,
             }, withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__default.createElement(Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
-            React__default.createElement(Icon.Cart, { size: 24 })))) : null;
+            React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                React__default.createElement("path", { d: "M5.308 21.5q-.748 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278V8.308q0-.75.53-1.278.53-.53 1.278-.53H7.5q0-1.873 1.313-3.187Q10.127 2 12 2t3.187 1.313T16.5 6.5h2.192q.749 0 1.278.53.53.53.53 1.278v11.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h13.384a.3.3 0 0 0 .212-.096.3.3 0 0 0 .096-.212V8.308a.3.3 0 0 0-.096-.212.3.3 0 0 0-.212-.096H5.308a.3.3 0 0 0-.212.096.3.3 0 0 0-.096.212v11.384q0 .116.096.212a.3.3 0 0 0 .212.096M9 6.5h6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5m2.985 7q1.695 0 3.047-1.148 1.35-1.148 1.335-2.606a.74.74 0 0 0-.207-.528.7.7 0 0 0-.527-.218.7.7 0 0 0-.471.182 1 1 0 0 0-.295.506 2.8 2.8 0 0 1-1.036 1.665 2.9 2.9 0 0 1-1.846.647 2.93 2.93 0 0 1-1.854-.647A2.73 2.73 0 0 1 9.1 9.688q-.086-.34-.278-.514A.66.66 0 0 0 8.367 9a.72.72 0 0 0-.534.218.72.72 0 0 0-.216.528q0 1.457 1.336 2.606 1.335 1.148 3.032 1.148", fill: "#2D87F3" }))))) : null;
 };
 
 const StyledDisplayWrapper = styled.div `
@@ -281,12 +281,9 @@ const _StyledPopup = styled.div `
     z-index: 111;
     height: 100%;
     border: 1px solid #0000001a;
-    ${MediaQueries.mbDown} {
-      > div {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
+    border-radius: 16px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 
   /* min-height: 415px; */
@@ -335,8 +332,8 @@ const _StyledPopupWrapper = styled.div `
 const StyledPopupWrapperClass = 'hhgcomp-navprofilebutton-popupwrapper';
 getDefaultClassWrapper(_StyledPopupWrapper, StyledPopupWrapperClass);
 const StyledAvatar = styled.div `
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   cursor: pointer;
 
   img {
@@ -344,8 +341,8 @@ const StyledAvatar = styled.div `
   }
 
   .avatar {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     object-fit: cover;
   }
 
@@ -363,8 +360,8 @@ const StyledAvatar = styled.div `
 const StyledImageWrapper$1 = styled.div `
   display: inline-flex;
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -954,7 +951,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
             React__default.createElement("div", { onMouseDown: onButtonMouseDown },
                 React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "user-close-icon" },
                     React__default.createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" })),
-                React__default.createElement(Avatar, { size: 40, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
+                React__default.createElement(Avatar, { size: 36, className: "user-avatar", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, color: siteType === 'marryBaby'
                         ? theme.mbColors.pink
                         : theme.colors.secondaryBase, placeholderText: name && name.length ? name[0].toUpperCase() : 'A' })),
             React__default.createElement(ProfilePopup, { dispatchLogout: () => {
@@ -991,7 +988,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
                 paddingLeft: 16,
             } },
             React__default.createElement(Text, { size: "p3", color: theme.mbColors.pink }, t('navigation.loginJoin')))),
-        React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))))));
+        siteType === 'marryBaby' ? (React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default.createElement(Button$1, { className: "login-btn", size: "md", onClick: onLoginClick, leftIcon: React__default.createElement(User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
 };
 
 var styles$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
@@ -1311,30 +1308,21 @@ const StyledViewMore$1 = styled.a `
   }
 `;
 
-var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","careIconContainer":"gB4rp89","scale":"EDlp5Zf"};
+var styles$1 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
 
-const CareIcon = () => {
-    return (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-        React__default.createElement("path", { d: "M13.475 21.5q-2.5 0-4.25-1.75t-1.75-4.25v-.55q-2.025-.25-3.387-1.8T2.725 9.5V4.65a.87.87 0 0 1 .262-.638.87.87 0 0 1 .638-.262h2.1V3.5a.73.73 0 0 1 .75-.75q.325 0 .538.212a.73.73 0 0 1 .212.538v2a.73.73 0 0 1-.75.75.726.726 0 0 1-.75-.75v-.25h-1.5V9.5q0 1.65 1.175 2.825T8.225 13.5t2.825-1.175T12.225 9.5V5.25h-1.5v.25a.73.73 0 0 1-.75.75.726.726 0 0 1-.75-.75v-2a.73.73 0 0 1 .75-.75q.325 0 .538.212a.73.73 0 0 1 .212.538v.25h2.1a.87.87 0 0 1 .638.262.87.87 0 0 1 .262.638V9.5q0 2.1-1.362 3.65t-3.388 1.8v.55q0 1.875 1.313 3.188Q11.6 20 13.475 20t3.188-1.312q1.312-1.313 1.312-3.188v-1.625a2.6 2.6 0 0 1-1.287-.913 2.4 2.4 0 0 1-.513-1.512q0-1.075.75-1.825t1.8-.75q1.075 0 1.825.75t.75 1.825q0 .85-.512 1.512-.513.663-1.313.913V15.5q0 2.5-1.75 4.25t-4.25 1.75", fill: "#2D87F3", strokeWidth: 0 })));
-};
 const ItemMenu = ({ item, menu }) => {
-    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper({
+    const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
         allowBgScroll: true,
     });
     const isInit = useIsInit();
     if (!item.popupType && item.link) {
         return (React__default.createElement(NewWrapper, { isNew: item.isNew },
-            React__default.createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''} ${item.id === 'care' ? 'force-focus' : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
-                React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton },
-                    item.id === 'care' && (React__default.createElement("div", { className: styles$1.careIconContainer },
-                        React__default.createElement(CareIcon, null))),
-                    item.name))));
+            React__default.createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
+                React__default.createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.menuButton }, item.name))));
     }
     return (React__default.createElement(NewWrapper, { isNew: item.isNew },
-        React__default.createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''} ${item.id === 'care' ? 'force-focus' : ''}`, tabIndex: 0, key: item.id, onBlur: onContainerBlur, onFocus: onContainerFocus, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
+        React__default.createElement("div", { 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 },
-                item.id === 'care' && (React__default.createElement("a", { className: styles$1.careIconContainer, href: normalizeLinkSlash(item.link + '/') },
-                    React__default.createElement(CareIcon, null))),
                 item.name,
                 item.popupType && (React__default.createElement("div", { className: styles$1.menuIconWrapper },
                     React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
@@ -2865,6 +2853,69 @@ const MenuHealthToolsList = ({ locale, onClose, isOpen, spotlightHealthTools = [
         React__default.createElement(ToolSpotlights, { spotlightHealthTools: spotlightHealthTools, hrefViewMore: hrefViewMore })));
 };
 
+const ItemNavButton = ({ item, color = 'blue' }) => {
+    const [Lottie, setLottie] = useState();
+    const [iconJson, setIconJson] = useState();
+    const { locale, ssrMenuContent: { categories, healthTools, care, together }, } = useContext(NavigationContext);
+    const { containerRef, onButtonMouseDown, onClose } = useCSSFocusPopupHelper({
+        allowBgScroll: true,
+    });
+    useEffect(() => {
+        setTimeout(() => {
+            if (item.id === 'care' || item.id === 'ecom') {
+                import('react-lottie').then((lottie) => {
+                    setLottie(() => lottie.default);
+                });
+            }
+            if (item.id === 'care') {
+                import('./doctor-36544c6d.js').then((data) => {
+                    if (data === null || data === void 0 ? void 0 : data.default)
+                        setIconJson(() => data.default);
+                });
+            }
+            else if (item.id === 'ecom') {
+                import('./cart-4e16be64.js').then((data) => {
+                    if (data === null || data === void 0 ? void 0 : data.default)
+                        setIconJson(() => data.default);
+                });
+            }
+        }, 500);
+    }, [item.id]);
+    const hasIcon = item.id === 'care' || item.id === 'ecom';
+    const linkOnly = !item.popupType && !!item.link;
+    const Tag = linkOnly ? 'a' : 'div';
+    const buttonStyle = color === 'gray'
+        ? {
+            border: '1px solid #E4E8EC',
+            background: '#F7F9FC',
+        }
+        : {
+            border: '1px solid #BCDEFF',
+            background: '#E3F2FF',
+        };
+    return (React__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, onMouseDown: onButtonMouseDown },
+        React__default.createElement(Button$1, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default.createElement(Lottie, { options: {
+                    loop: true,
+                    autoplay: true,
+                    animationData: iconJson,
+                }, height: 28, width: 28 })) : (React__default.createElement("a", { href: normalizeLinkSlash(item.link + '/') },
+                React__default.createElement(Lottie, { options: {
+                        loop: true,
+                        autoplay: true,
+                        animationData: iconJson,
+                    }, height: 28, width: 28 })))) : hasIcon ? (React__default.createElement("div", { style: {
+                    width: 28,
+                    height: 28,
+                } })) : null, styles: {
+                leftIcon: {
+                    marginRight: 4,
+                },
+            }, style: Object.assign(Object.assign({}, buttonStyle), { padding: '6px 8px 6px 8px', color: '#262626', height: 'unset' }), size: "sm", rightIcon: item.popupType ? (React__default.createElement("div", { className: styles$1.menuIconWrapper },
+                React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
+                    React__default.createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" })))) : (React__default.createElement("div", null)) }, item.name),
+        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 NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent, }) => {
     var _a;
     const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, onBookingClick, currentUrl, onLoginClick, cartNumber, 
@@ -2929,6 +2980,8 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
             scrolling();
     }, [isMobile]);
     const isShowingSiteWideBanner = sitewideBannerShown && !!sitewideBanner;
+    const ecomNavItem = menuItems.find((m) => m.id === 'ecom');
+    const careNavItem = menuItems.find((m) => m.id === 'care');
     return (React__default.createElement(StyledHeaderWrapper, { "data-site-type": siteType, "data-sponsored": isSponsored, "data-sitewide-banner-shown": isShowingSiteWideBanner, "data-header-type": "home", "data-collapsed": isCollapsed, "data-is-displayed": true, id: "site-header", ref: headerRef },
         sitewideBanner,
         React__default.createElement(StyledHeader, { "data-site-type": siteType },
@@ -2943,13 +2996,23 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                             }, type: logoType, badge: locale === 'id-ID' && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('sehat-badge.png'), width: "56", height: "23", loading: "lazy" })), dateForSeasonal: new Date(), locale: locale, key: typeof window !== 'undefined' ? 'client' : 'server' })))),
                 !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType }))))),
             React__default.createElement(StyledRightGroup, { "data-site-type": siteType },
-                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType })) : (React__default.createElement(NavigationMenu, { menuItems: menuItems })))),
+                !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (enableSearchBar && React__default.createElement(NavigtionSearch, { siteType: siteType })) : (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })))),
                 React__default.createElement(StyledProfileNavGroup, null,
-                    React__default.createElement(CartBadge, { "data-cart-menu": "true", "data-event-category": "Ecommerce", "data-event-action": "Cart Click", "data-event-label": currentUrl, count: cartNumber, locale: locale }),
-                    enableNavCareBooking && (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp" },
-                        React__default.createElement(BookingButton, { careUrlFe: statics.CARE_URL_FE, currentUrl: currentUrl, btnName: t('login.booking'), onCareHeaderClick: onBookingClick }))),
+                    !isMobile && (React__default.createElement(React__default.Fragment, null,
+                        ecomNavItem ? React__default.createElement(ItemNavButton, { item: ecomNavItem }) : null,
+                        careNavItem ? (React__default.createElement(ItemNavButton, { item: careNavItem, color: "gray" })) : null,
+                        enableNavCareBooking && (React__default.createElement(DisplayWrapper, { mediaQueryKey: "mbUp" },
+                            React__default.createElement(BookingButton, { careUrlFe: statics.CARE_URL_FE, currentUrl: currentUrl, btnName: t('login.booking'), onCareHeaderClick: onBookingClick }))))),
                     languageMenu,
-                    React__default.createElement(NavigationProfileButton, { userInfo: userInfo, siteType: siteType, onLoginClick: onLoginClick || goToLogin, SSO_URL: normalizeLink(statics.SSO_URL), currentUrl: currentUrl, onLogout: onLogout, isLoading: isUserLoading, locale: locale })))),
+                    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 }),
+                    cartNumber !== undefined && (React__default.createElement(React__default.Fragment, null,
+                        !isMobile && (React__default.createElement("hr", { style: {
+                                height: 20,
+                                width: 0,
+                                border: 'none',
+                                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 })))))),
         sponsorComponent
             ? !React__default.isValidElement(sponsorComponent)
                 ? sponsorComponent

package/build/esm/{index-bdf7ea19.js → index-2cd60fdb.js}

@@ -1,10 +1,10 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from './index-42c23102.js';
-import { u as useTranslations } from './useTranslations-9833e7b4.js';
+import { I as Icon } from './index-36ead557.js';
+import { u as useTranslations } from './useTranslations-9d582421.js';
 import { format } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import styled from 'styled-components';
-import { t as theme } from './theme-a174b0a0.js';
+import { t as theme } from './theme-2dd612bb.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-42c23102.js → index-36ead557.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-22c1d601.js';
+import { _ as __rest } from './tslib.es6-06b67847.js';
 import React__default from 'react';
-import { t as theme } from './theme-a174b0a0.js';
-import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-eba8a92c.js';
+import { t as theme } from './theme-2dd612bb.js';
+import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-6c17caa4.js';
 
 const ArrowRightTail = (_a) => {
     var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);