@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/{index-a903fdaa.js → index-6c27b627.js}

@@ -1,48 +1,47 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
-var index$2 = require('./index-e914bc7c.js');
-var styled = require('@emotion/styled');
-var theme = require('./theme-416e0fd4.js');
-var index = require('./index-5aac5fb6.js');
-var index$1 = require('./index-e932125b.js');
-var index$3 = require('./index-517f6538.js');
-var normalizeLink = require('./normalizeLink-23b10200.js');
-var routing = require('./routing-40d4f591.js');
-var index$4 = require('./index-5033f644.js');
-var index$b = require('./index-74b64958.js');
-var useTranslations = require('./useTranslations-76f64595.js');
+var index$9 = require('./index-73cde644.js');
+var index$3 = require('./index-a86ea1b6.js');
+var normalizeLink = require('./normalizeLink-451ae6d8.js');
+var routing = require('./routing-f6d54205.js');
+var dataTransform = require('./dataTransform-6b4d7a4e.js');
+var index$c = require('./index-c225ef22.js');
+var useTranslations = require('./useTranslations-200168a3.js');
 var throttle = require('lodash/throttle');
 var core = require('@mantine/core');
+var index$2 = require('./index-05f106c2.js');
 require('@mantine/dates');
-var index$6 = require('./index-0b957c10.js');
-require('./useMantineLocale-97b962eb.js');
-require('./translationsContext-6f3c14ea.js');
+var index$6 = require('./index-df5cd44b.js');
+var index$1 = require('./index-1efa7d84.js');
+require('./useMantineLocale-a4f0c61d.js');
+var index = require('./index-d34cd464.js');
+var index$5 = require('./index-a7de42d1.js');
+var theme = require('./theme-e4f7f487.js');
+require('./translationsContext-39528d2f.js');
 var formatString = require('string-format');
 require('@mantine/hooks');
-var utils = require('./utils-3a589c92.js');
-var constants = require('./constants-94957c92.js');
+var utils = require('./utils-524bda7c.js');
+var constants = require('./constants-3a475a22.js');
+var styled = require('@emotion/styled');
 var core$1 = require('@hhgtech/icons/core');
-var defaultClassWrapper = require('./defaultClassWrapper-feaae206.js');
-var ChevronDown = require('./ChevronDown-2775b53a.js');
+var defaultClassWrapper = require('./defaultClassWrapper-e87ca8ef.js');
+var ChevronDown = require('./ChevronDown-f7e25d61.js');
 var react = require('@emotion/react');
-var index$5 = require('./index-42621fec.js');
-var index$9 = require('./index-6036e2a0.js');
-var index$8 = require('./index-aff82754.js');
-var index$7 = require('./index-e39f5b25.js');
-var useIsInit = require('./useIsInit-bb64ffbf.js');
-require('./index.styles-61201019.js');
-require('./utils-120200ad.js');
-require('./index-aefa01a7.js');
-require('./index.styled-8c14cf6c.js');
-require('./index-d54d6c50.js');
-var other = require('@hhgtech/icons/other');
+var index$4 = require('./index-c2900d8c.js');
+var utils$1 = require('./utils-95d9832e.js');
+var constants$1 = require('./constants-936f45e9.js');
+var index$8 = require('./index-4af08ec2.js');
+var index$7 = require('./index-f6575703.js');
+var useIsInit = require('./useIsInit-38cec0c4.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$a = require('./index-d8c60733.js');
+var index$a = require('./index-3dcb9bc6.js');
+var other = require('@hhgtech/icons/other');
+var index$b = require('./index-ba3797bb.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-279a7b4f.js');
+var core$2 = require('./core-9e44ee99.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -65,153 +64,13 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var formatString__default = /*#__PURE__*/_interopDefault(formatString);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var relativeTime__default = /*#__PURE__*/_interopDefault(relativeTime);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 
-const ALLOW_DOMAIN_URL = [
-    'hellobacsi.com',
-    'hellosehat.com',
-    'hellodoktor.com',
-    'hellokrupet.com',
-    'hellodoctor.com.ph',
-    'hellokhunmor.com',
-    'hellosayarwon.com',
-    'helloyishi.com.tw',
-    'helloswasthya.com',
-    'marrybaby.vn',
-    'hellohealth.questionpro.com',
-    'hellobacsivn.page.link',
-];
-const isInternalLink = (url = '') => {
-    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
-};
-
-const StyledLanguageChangeLink = styled__default["default"].a `
-  display: inline-flex;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  padding: 7px 11px;
-  gap: 2px;
-
-  background: ${theme.theme.colors.white};
-  border: 1px solid ${theme.theme.colors.neutral100};
-  border-radius: 20px;
-
-  color: ${theme.theme.colors.gray600};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-decoration: none;
-
-  cursor: pointer;
-`;
-
-const StyledSelectionContainer = styled__default["default"].div `
-  position: relative;
-  display: inline-block;
-`;
-const StyledSelectionLabel = styled__default["default"].div `
-  position: relative;
-`;
-const StyleSelectionPopup = styled__default["default"].div `
-  position: absolute;
-  z-index: 21;
-  top: 100%;
-  right: 0;
-  width: 327px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
-
-  &[data-is-open='false'] {
-    display: none;
-  }
-  &[data-show-indicator='true'] {
-    &:before {
-      position: absolute;
-      right: 11px;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border: 0.5rem solid transparent;
-      border-top: none;
-      border-bottom-color: #fff;
-      content: '';
-      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
-    }
-  }
-`;
-const StyledOption = styled__default["default"].div `
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 16px;
-  border-radius: ${theme.theme.borderRadius};
-  cursor: pointer;
-
-  .check-icon {
-    width: 16px;
-    height: 16px;
-  }
-  &[data-selected='false'] {
-    background-color: ${theme.theme.colors.gray100};
-  }
-`;
-const StyledPopupBackground = styled__default["default"].div `
-  position: fixed;
-  z-index: 20;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: default;
-`;
-
-const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledSelectionContainer, null,
-            React__default["default"].createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
-                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
-                React__default["default"].createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index$2) => (React__default["default"].createElement(StyledOption, { key: index$2, "data-selected": showSelected && selected === option.value, onClick: (e) => {
-                        if (selected !== option.value) {
-                            onChange(option.value);
-                            setIsOpen((value) => !value);
-                        }
-                        e.stopPropagation();
-                    } },
-                    React__default["default"].createElement(index.Text, { size: "p3" }, option.label),
-                    showSelected && selected === option.value && (React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
-        isOpen && (React__default["default"].createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
-};
-
-const LanguageSwitcher = ({ languageOptions, locale }) => {
-    var _a, _b;
-    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
-    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
-        return null;
-    }
-    return (React__default["default"].createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default["default"].createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
-            if (typeof window !== 'undefined') {
-                window.location.href = href;
-            }
-        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
-};
-const LanguageLabel = ({ locale, label, href, }) => {
-    var _a, _b, _c;
-    return (React__default["default"].createElement(StyledLanguageChangeLink, { href: href },
-        React__default["default"].createElement(index$2.Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
-        React__default["default"].createElement("span", null, label)));
-};
-
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
     return `/shop/${(_a = constants.LOCALISED_SLUGS[locale || 'vi-VN']) === null || _a === void 0 ? void 0 : _a[path]}/`;
@@ -942,7 +801,7 @@ const NavigationLogoutPopup = ({ openLogoutPopup, onCloseHandler, onLogoutHandle
         document.body.classList.toggle('noscroll', openLogoutPopup);
     }, [openLogoutPopup]);
     return (React__default["default"].createElement(core.Portal, null,
-        React__default["default"].createElement(index$4.Popup, { type: "confirm", isOpen: openLogoutPopup, closeIcon: React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('closeLight.svg'), style: { width: 24, height: 24 }, alt: "close-icon", loading: "lazy" }), onClose: onCloseHandler },
+        React__default["default"].createElement(dataTransform.Popup, { type: "confirm", isOpen: openLogoutPopup, closeIcon: React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('closeLight.svg'), style: { width: 24, height: 24 }, alt: "close-icon", loading: "lazy" }), onClose: onCloseHandler },
             React__default["default"].createElement(StyledPopup, null,
                 siteType === 'helloSites' && (React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('arrowDoor.svg'), className: "cancle-img", alt: "close-account", loading: "lazy" })),
                 React__default["default"].createElement("h2", null, t(siteType === 'helloSites'
@@ -950,8 +809,8 @@ const NavigationLogoutPopup = ({ openLogoutPopup, onCloseHandler, onLogoutHandle
                     : 'logout.popup.ask.mb')),
                 React__default["default"].createElement("p", null, t('logout.popup.ask2')),
                 React__default["default"].createElement(StyledButtonGroup, { siteType: siteType },
-                    React__default["default"].createElement(index$5.Button, { className: "logout-button", color: "tertiary", size: "lg", onClick: onLogoutHandler }, t('logout.popup.button.logout')),
-                    React__default["default"].createElement(index$5.Button, { className: "cancel-button", color: "primary", size: "lg", onClick: onCloseHandler }, t('logout.popup.button.cancel')))))));
+                    React__default["default"].createElement(index$4.Button, { className: "logout-button", color: "tertiary", size: "lg", onClick: onLogoutHandler }, t('logout.popup.button.logout')),
+                    React__default["default"].createElement(index$4.Button, { className: "cancel-button", color: "primary", size: "lg", onClick: onCloseHandler }, t('logout.popup.button.cancel')))))));
 };
 
 const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, currentUrl, isMinifyLogin, onLogout, style, isLoading, locale, }) => {
@@ -964,7 +823,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
     }, []);
     const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = useCSSFocusPopupHelper();
     if (isLoading)
-        return React__default["default"].createElement(index$2.Button, { size: "sm", color: "transparent", loading: true });
+        return React__default["default"].createElement(index$5.Button, { size: "sm", color: "transparent", loading: true });
     return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(StyledImageWrapper$1, { ref: containerRef, style: style, tabIndex: 0, onBlur: onContainerBlur, onFocus: () => {
                 var _a;
@@ -1009,7 +868,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
                     cursor: 'pointer',
                     height: 24,
                     width: 24,
-                } })) : (React__default["default"].createElement(index$2.Button, { className: "mobile-only", size: "sm", leftIcon: React__default["default"].createElement(core$1.User, { color: "currentColor", isSolid: true, size: 22 }), sx: {
+                } })) : (React__default["default"].createElement(index$5.Button, { className: "mobile-only", size: "sm", leftIcon: React__default["default"].createElement(core$1.User, { color: "currentColor", isSolid: true, size: 22 }), sx: {
                     paddingLeft: '8px',
                     paddingRight: '12px',
                 } }, t('navigation.loginJoin')))),
@@ -1017,17 +876,17 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, SSO_URL, cu
                 paddingLeft: 16,
             } },
             React__default["default"].createElement(index.Text, { size: "p3", color: theme.theme.mbColors.pink }, t('navigation.loginJoin')))),
-        siteType === 'marryBaby' ? (React__default["default"].createElement(index$2.Button, { className: "login-btn", size: "md", leftIcon: React__default["default"].createElement(core$1.User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default["default"].createElement(index$2.Button, { className: "login-btn", size: "md", leftIcon: React__default["default"].createElement(core$1.User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
+        siteType === 'marryBaby' ? (React__default["default"].createElement(index$5.Button, { className: "login-btn", size: "md", leftIcon: React__default["default"].createElement(core$1.User, { color: "currentColor", isSolid: true, size: 22 }) }, t('navigation.loginJoin'))) : (React__default["default"].createElement(index$5.Button, { className: "login-btn", size: "md", leftIcon: React__default["default"].createElement(core$1.User, { color: "#595959", isSolid: true, size: 22 }), variant: "ghost", color: "#262626" }, t('navigation.loginJoin')))))));
 };
 
 var styles$3 = {"bookingButton":"spdlGfq","bookingButtonAnchor":"vgS16jX"};
 
 const BookingButton = ({ onCareHeaderClick, currentUrl, careUrlFe, btnName, }) => {
-    return onCareHeaderClick ? (React__default["default"].createElement(index$5.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl, onClick: (e) => onCareHeaderClick(e), style: {
+    return onCareHeaderClick ? (React__default["default"].createElement(index$4.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl, onClick: (e) => onCareHeaderClick(e), style: {
             paddingLeft: 10,
             paddingRight: 10,
         } }, btnName)) : (React__default["default"].createElement("a", { href: careUrlFe, className: `${styles$3.bookingButtonAnchor} care-button no-replace-click` },
-        React__default["default"].createElement(index$5.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl }, btnName)));
+        React__default["default"].createElement(index$4.Button, { className: styles$3.bookingButton, size: "md", color: "primary", dataEventCategory: "Care", dataEventAction: "Navigation Bar Click", dataEventLabel: currentUrl }, btnName)));
 };
 
 var styles$2 = {"menuContainer":"y5VJdvw","menuIcon":"oVhOSCy","menuIconWrapper":"pX8OXTM"};
@@ -1094,7 +953,7 @@ const NavigationProvider = (_a) => {
     const [currentUrl, setCurrentUrl] = React__default["default"].useState(() => {
         return (props.currentUrl ||
             `https://${props.siteType === 'marryBaby'
-                ? defaultClassWrapper.domainLocalesMarryBaby[props.locale || 'en-PH']
+                ? utils$1.domainLocalesMarryBaby[props.locale || 'en-PH']
                 : index$3.domainLocales[props.locale || 'en-PH']}${props.projectType === 'together'
                 ? '/community'
                 : props.projectType === 'ecom'
@@ -1398,7 +1257,7 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
                     ? 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 }, (!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$9.isInternalLink(href) && {
                 target: '_blank',
             }), { "data-theme": siteType, key: index$2, onClick: onClosePopup }),
                 React__default["default"].createElement("div", { className: "icon" },
@@ -1597,7 +1456,7 @@ const Item$4 = ({ item, index = 0 }) => {
     const { locale, configs: { statics }, } = React.useContext(NavigationContext);
     if (!item)
         return null;
-    const href = `${statics.CARE_URL_FE}/${(_a = index$9.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
+    const href = `${statics.CARE_URL_FE}/${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
     return (React__default["default"].createElement(StyledItem$5, { key: item.id, href: href, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": href },
         React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('navCareCardBg.svg'), alt: "", className: "bg-svg", loading: "lazy" }),
         React__default["default"].createElement(StyledImageCard$3, null,
@@ -1695,7 +1554,7 @@ const SpotlightNoData = ({ title, link, description, cta, icon }) => {
             description && React__default["default"].createElement(StyledDescription, null, description),
             cta && (React__default["default"].createElement("div", null,
                 React__default["default"].createElement("a", { href: link },
-                    React__default["default"].createElement(index$5.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
+                    React__default["default"].createElement(index$4.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
 };
 
 const StyledItemGridRight = styled__default["default"].div `
@@ -1762,7 +1621,7 @@ const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
                 right: '1rem',
             } },
             React__default["default"].createElement("a", { href: hrefViewMore },
-                React__default["default"].createElement(index$5.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: index$1.CommonGAssets.getAssetPath('community.svg') }))));
+                React__default["default"].createElement(index$4.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: index$1.CommonGAssets.getAssetPath('community.svg') }))));
 };
 
 const StyledContainerItems$3 = styled__default["default"].div `
@@ -1974,7 +1833,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$4.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$a.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,
@@ -2464,7 +2323,7 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
             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/` })),
             activeMenuService === 'tools' && (React__default["default"].createElement(ToolSpotlights, { spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = index$3.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}` })),
-            activeMenuService === 'care' && (React__default["default"].createElement(CareSpotlights, { spotlights: care === null || care === void 0 ? void 0 : care.spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_b = index$9.LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b.SPECIALTIES}` })),
+            activeMenuService === 'care' && (React__default["default"].createElement(CareSpotlights, { spotlights: care === null || care === void 0 ? void 0 : care.spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_b = constants$1.LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b.SPECIALTIES}` })),
             activeMenuService === 'together' && (React__default["default"].createElement(CommunitySpotlights, { spotlights: together === null || together === void 0 ? void 0 : together.spotlights })),
             activeMenuService === 'ecom' && (React__default["default"].createElement(EcomSpotlights, { helpfulUrls: ecom === null || ecom === void 0 ? void 0 : ecom.helpfulUrls })))));
 };
@@ -2870,7 +2729,7 @@ const getTogetherUserPostsApiPath = (locale, isMarryBaby, apiDomain, params) =>
 };
 const getCareSearchUrl = ({ type, specialtySlug, locale, }) => {
     var _a, _b;
-    return `${(_a = index$9.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL}/${((_b = index$9.LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b[type]) || 'doctor'}/${specialtySlug !== null && specialtySlug !== void 0 ? specialtySlug : ''}`;
+    return `${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL}/${((_b = constants$1.LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b[type]) || 'doctor'}/${specialtySlug !== null && specialtySlug !== void 0 ? specialtySlug : ''}`;
 };
 const formatSpotlightsList = (spotlight) => {
     if (!spotlight)
@@ -2911,10 +2770,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$b.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$b.Container, { className: styles.gridContainer }, children))));
 };
 
 const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
@@ -2935,7 +2794,7 @@ const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [],
                     thumbnail: (specialty === null || specialty === void 0 ? void 0 : specialty.thumbnail) || '',
                 };
             })) || [] }),
-        React__default["default"].createElement(CareSpotlights, { spotlights: spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_a = index$9.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.SPECIALTIES}/` })));
+        React__default["default"].createElement(CareSpotlights, { spotlights: spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.SPECIALTIES}/` })));
 };
 
 const MenuCategoriesList = ({ categories = [], spotlightsList = [], onClose, isOpen, }) => {
@@ -3004,13 +2863,13 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-15fac518.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-17b525f8.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
             }
             else if (item.id === 'ecom') {
-                Promise.resolve().then(function () { return require('./cart-cd1f9e9e.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./cart-67147d06.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -3030,7 +2889,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
             background: '#E3F2FF',
         };
     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$2.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
+        React__default["default"].createElement(index$5.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 + '/') },
@@ -3134,7 +2993,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
                     React__default["default"].createElement("div", null,
-                        React__default["default"].createElement(index$b.Logo, { style: {
+                        React__default["default"].createElement(index$c.Logo, { style: {
                                 display: 'flex',
                             }, type: logoType, badge: locale === 'id-ID' && (React__default["default"].createElement("img", { src: index$1.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 }))))),
@@ -3377,7 +3236,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, languageMenu: React__default["default"].createElement(LanguageSwitcher, { languageOptions: languageOptions, locale: locale }) }))));
+            React__default["default"].createElement(NavigationBar, { menuItems: services, onTopBarAppears: onTopBarAppears, logoComponent: logoComponent, subHead: subHead, languageMenu: React__default["default"].createElement(index$9.LanguageSwitcher, { languageOptions: languageOptions, locale: locale }) }))));
 };
 const NavigationV2 = (props) => {
     const propsWithDefaultValues = Object.assign({ siteType: 'helloSites', projectType: 'discover', locale: 'vi-VN', activeMenuService: 'categories', ssrMenuContent: {} }, props);
@@ -3414,8 +3273,8 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
                     fetch(normalizeLink.normalizeLinkSlash(`${routing.getTogetherApiDomain()}/api/v1/options?website_url=https://${index$3.domainLocales[locale]}&meta_key=popular_post`)).then((res) => res.json()),
                 ]);
                 res.together = {
-                    items: ((_o = (_m = (_l = communities === null || communities === void 0 ? void 0 : communities.data) === null || _l === void 0 ? void 0 : _l.communities) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, index$4.formatCommunity)) || [],
-                    spotlights: ((_r = (_q = (_p = spotlightPosts === null || spotlightPosts === void 0 ? void 0 : spotlightPosts.data) === null || _p === void 0 ? void 0 : _p.posts) === null || _q === void 0 ? void 0 : _q.map) === null || _r === void 0 ? void 0 : _r.call(_q, index$4.formatPost)) || [],
+                    items: ((_o = (_m = (_l = communities === null || communities === void 0 ? void 0 : communities.data) === null || _l === void 0 ? void 0 : _l.communities) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, dataTransform.formatCommunity)) || [],
+                    spotlights: ((_r = (_q = (_p = spotlightPosts === null || spotlightPosts === void 0 ? void 0 : spotlightPosts.data) === null || _p === void 0 ? void 0 : _p.posts) === null || _q === void 0 ? void 0 : _q.map) === null || _r === void 0 ? void 0 : _r.call(_q, dataTransform.formatPost)) || [],
                 };
             }
             catch (_0) { }
@@ -3445,7 +3304,6 @@ const getNavMenuContentWithCache = (locale) => tslib_es6.__awaiter(void 0, void
     return (yield core$2.getDataWithCache('nav-menu-content', () => getNavMenuContent(locale || 'en-PH'), (data) => { var _a, _b; return !!((_b = (_a = data === null || data === void 0 ? void 0 : data.categories) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length); })) || {};
 });
 
-exports.LanguageSwitcher = LanguageSwitcher;
 exports.NavigationLogoutPopup = NavigationLogoutPopup;
 exports.NavigationProfileButton = NavigationProfileButton;
 exports.NavigationV2 = NavigationV2;
@@ -3453,4 +3311,3 @@ exports.ProfileNavigation = ProfileNavigation;
 exports.getNavMenuContent = getNavMenuContent;
 exports.getNavMenuContentWithCache = getNavMenuContentWithCache;
 exports.getTogetherUserPostsApiPath = getTogetherUserPostsApiPath;
-exports.isInternalLink = isInternalLink;

package/build/index-73cde644.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+var index$2 = require('./index-05f106c2.js');
+var styled = require('@emotion/styled');
+var theme = require('./theme-e4f7f487.js');
+var index = require('./index-d34cd464.js');
+var index$1 = require('./index-1efa7d84.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ALLOW_DOMAIN_URL = [
+    'hellobacsi.com',
+    'hellosehat.com',
+    'hellodoktor.com',
+    'hellokrupet.com',
+    'hellodoctor.com.ph',
+    'hellokhunmor.com',
+    'hellosayarwon.com',
+    'helloyishi.com.tw',
+    'helloswasthya.com',
+    'marrybaby.vn',
+    'hellohealth.questionpro.com',
+    'hellobacsivn.page.link',
+];
+const isInternalLink = (url = '') => {
+    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
+};
+
+const StyledLanguageChangeLink = styled__default["default"].a `
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 11px;
+  gap: 2px;
+
+  background: ${theme.theme.colors.white};
+  border: 1px solid ${theme.theme.colors.neutral100};
+  border-radius: 20px;
+
+  color: ${theme.theme.colors.gray600};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+`;
+
+const StyledSelectionContainer = styled__default["default"].div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledSelectionLabel = styled__default["default"].div `
+  position: relative;
+`;
+const StyleSelectionPopup = styled__default["default"].div `
+  position: absolute;
+  z-index: 21;
+  top: 100%;
+  right: 0;
+  width: 327px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
+
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-show-indicator='true'] {
+    &:before {
+      position: absolute;
+      right: 11px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border: 0.5rem solid transparent;
+      border-top: none;
+      border-bottom-color: #fff;
+      content: '';
+      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+    }
+  }
+`;
+const StyledOption = styled__default["default"].div `
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  border-radius: ${theme.theme.borderRadius};
+  cursor: pointer;
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+  &[data-selected='false'] {
+    background-color: ${theme.theme.colors.gray100};
+  }
+`;
+const StyledPopupBackground = styled__default["default"].div `
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+`;
+
+const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(StyledSelectionContainer, null,
+            React__default["default"].createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
+                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
+                React__default["default"].createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index$2) => (React__default["default"].createElement(StyledOption, { key: index$2, "data-selected": showSelected && selected === option.value, onClick: (e) => {
+                        if (selected !== option.value) {
+                            onChange(option.value);
+                            setIsOpen((value) => !value);
+                        }
+                        e.stopPropagation();
+                    } },
+                    React__default["default"].createElement(index.Text, { size: "p3" }, option.label),
+                    showSelected && selected === option.value && (React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
+        isOpen && (React__default["default"].createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
+};
+
+const LanguageSwitcher = ({ languageOptions, locale }) => {
+    var _a, _b;
+    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
+    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
+        return null;
+    }
+    return (React__default["default"].createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default["default"].createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
+            if (typeof window !== 'undefined') {
+                window.location.href = href;
+            }
+        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
+};
+const LanguageLabel = ({ locale, label, href, }) => {
+    var _a, _b, _c;
+    return (React__default["default"].createElement(StyledLanguageChangeLink, { href: href },
+        React__default["default"].createElement(index$2.Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
+        React__default["default"].createElement("span", null, label)));
+};
+
+exports.LanguageSwitcher = LanguageSwitcher;
+exports.isInternalLink = isInternalLink;

package/build/{index-65765b10.js → index-77a2b9ee.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-416e0fd4.js');
+var theme = require('./theme-e4f7f487.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }