@hhgtech/hhg-components 1.29.342 → 1.29.343-beta-2

package/build/{index-f10d4609.js → index-7104a5f7.js}

@@ -1,51 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
-var index$7 = require('./index-c40d31eb.js');
-var index$2 = require('./index-6d9ae7c7.js');
-var normalizeLink = require('./normalizeLink-514559ba.js');
-var dataTransform = require('./dataTransform-3771b9cd.js');
+var index$7 = require('./index-38769535.js');
+var index$2 = require('./index-e7e6be56.js');
+var normalizeLink = require('./normalizeLink-8f4ebeba.js');
+var dataTransform = require('./dataTransform-c5851202.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$c = require('./index-c67e69f5.js');
-var index$4 = require('./index-41800ba9.js');
+var index$c = require('./index-63565859.js');
+var index$4 = require('./index-2c213999.js');
 var throttle = require('lodash/throttle');
-var index$b = require('./index-8d20bcc4.js');
+var index$b = require('./index-1be2976e.js');
 require('@mantine/dates');
-require('./index-470c19d7.js');
-var index$3 = require('./index-d9c9d577.js');
-require('./useMantineLocale-9cfb679b.js');
-var index = require('./index-42df056b.js');
-var index$a = require('./index-9a14f009.js');
-require('./index.styles-09de47ff.js');
-require('./translationsContext-b676bc3e.js');
+require('./index-71fa60b3.js');
+var index$3 = require('./index-000aa50c.js');
+require('./useMantineLocale-b445b99c.js');
+var index = require('./index-ff110f49.js');
+var index$a = require('./index-da20b174.js');
+require('./index.styles-bf5ac3f4.js');
+require('./translationsContext-1a8fe7a9.js');
 require('@mantine/hooks');
-var utils = require('./utils-cd7b03f7.js');
-require('./other-04b2456f.js');
-require('./index-5c4dc9aa.js');
-var constants = require('./constants-e7dec4ce.js');
+var utils = require('./utils-831c7783.js');
+require('./other-39a87b75.js');
+require('./index-4fbc3279.js');
+var constants = require('./constants-6024d73f.js');
 var styled = require('@emotion/styled');
-var navigationProfileButton = require('./index-6ccc302a.js');
-var store = require('./store-be3278c6.js');
-var index$1 = require('./index-6b0b73f2.js');
-var togetherComponentGlobalContext = require('./utils-c0f2aa5a.js');
+var navigationProfileButton = require('./index-930d1866.js');
+var store = require('./store-f33c662e.js');
+var index$1 = require('./index-2d1343aa.js');
+var togetherComponentGlobalContext = require('./utils-1d6c5255.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var constants$1 = require('./constants-af837fbf.js');
+var constants$1 = require('./constants-7fe7ee28.js');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-edd93a60.js');
-var index$5 = require('./index-4ce69006.js');
-var useIsInit = require('./useIsInit-0dcee1a1.js');
+var index$6 = require('./index-3a493832.js');
+var index$5 = require('./index-0ae9bcc3.js');
+var useIsInit = require('./useIsInit-0425e7c4.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$8 = require('./index-887e7969.js');
+var index$8 = require('./index-902992c2.js');
 var other = require('@hhgtech/icons/other');
 var formatString = require('string-format');
-var index$9 = require('./index-0de35a56.js');
-var Locale = require('./Locale-34160d25.js');
+var index$9 = require('./index-7918e40e.js');
+var Locale = require('./Locale-1af651a4.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-961e47df.js');
+var core$2 = require('./core-7a4fa595.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -356,6 +356,17 @@ const StyledItem$6 = styled__default["default"].a `
   }
 
   &[data-theme='marryBaby'] {
+    &.tarot-menu {
+      .icon {
+        background: linear-gradient(148deg, #fc5e9a 16.04%, #fe98bf 94.24%);
+      }
+      .name {
+        background: linear-gradient(91deg, #ea4f8a 1.24%, #fe8eb8 46.02%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
     .icon {
       display: flex;
       align-items: center;
@@ -476,7 +487,8 @@ 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 }, (!index$7.isInternalLink(href) && {
+            const isTarotItem = (item === null || item === void 0 ? void 0 : item.id) === 'game' && siteType === 'marryBaby';
+            return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: `iconMenu ${isTarotItem ? 'tarot-menu' : ''}`, "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" },
@@ -493,7 +505,9 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
                             paddingRight: item.isNew ? 10 : 0,
                         } },
                         React__default["default"].createElement("p", { className: "name" }, item.name),
-                        item.isMobileAppTool && (React__default["default"].createElement(index.Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
+                        item.isMobileAppTool && (React__default["default"].createElement(index.Text, { size: "n1", color: theme.fn.primaryColor(), weight: (item === null || item === void 0 ? void 0 : item.id) && (item === null || item === void 0 ? void 0 : item.id) === activeItem
+                                ? 'semiBold'
+                                : 'regular' }, t('home.calcWithApp'))))),
                 item.isMobileAppTool && (React__default["default"].createElement(StyledIconNav, null,
                     React__default["default"].createElement(Phone, { className: "phone-icon", size: 16 }))),
                 React__default["default"].createElement(StyledIconNav, { className: "arrow-icon" },
@@ -1546,10 +1560,8 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
 };
 
 const HamburgerMenu = ({ menuItems }) => {
-    const { siteType,
-    // configs: { enableSearchBar },
-     } = React.useContext(NavigationContext);
-    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper();
+    const { siteType, configs: { enableNavTarotGame }, } = React.useContext(NavigationContext);
+    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper({ enableNavTarotGame });
     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 },
@@ -1668,7 +1680,7 @@ const StyledHeader = styled__default["default"].div `
   ${utils.MediaQueries.mbDown} {
     position: relative;
     height: 56px;
-    background: white;
+    background-color: ${(props) => props.isMarryBaby ? 'transparent' : '#fff'};
     gap: 2px;
   }
 
@@ -2083,7 +2095,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-4814c2f7.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-43512b25.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2311,7 +2323,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     const careNavItem = menuItems.find((m) => m.id === 'care');
     return (React__default["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["default"].createElement(StyledHeader, { "data-site-type": siteType },
+        React__default["default"].createElement(StyledHeader, { "data-site-type": siteType, isMarryBaby: siteType === 'marryBaby' },
             React__default["default"].createElement(StyledLeftGroup, { "data-site-type": siteType },
                 isMobile && React__default["default"].createElement(HamburgerMenu, { menuItems: menuItems }),
                 logoComponent || (React__default["default"].createElement("a", { style: {
@@ -2484,7 +2496,7 @@ const useInsider = () => {
 
 const useNavServices = () => {
     const { t } = index$4.useTranslations();
-    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, statics, }, } = React.useContext(NavigationContext);
+    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, enableNavTarotGame, statics, }, } = React.useContext(NavigationContext);
     const isMarryBaby = siteType === 'marryBaby';
     const services = React.useMemo(() => {
         var _a;
@@ -2536,8 +2548,22 @@ const useNavServices = () => {
                 thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/care.svg'),
                 popupType: locale === 'id-ID' ? 'care' : null,
             });
+        enableNavTarotGame &&
+            _services.push({
+                name: 'MỚI - Tarot cho mẹ bầu',
+                id: 'game',
+                link: normalizeLink.normalizeLinkSlash(statics.TOGETHER_URL_FE + '/tarot'),
+                thumbnail: index$3.CommonGAssets.getAssetPath('play-card.svg'),
+                popupType: 'none',
+            });
         return _services;
-    }, [locale, enableNavCare, enableNavTogether, enableNavEcom]);
+    }, [
+        locale,
+        enableNavCare,
+        enableNavTogether,
+        enableNavEcom,
+        enableNavTarotGame,
+    ]);
     return services;
 };
 

package/build/{index-470c19d7.js → index-71fa60b3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Locale = require('./Locale-34160d25.js');
+var Locale = require('./Locale-1af651a4.js');
 
 exports.Gender = void 0;
 (function (Gender) {

package/build/{index-2328f062.js → index-780d905b.js}

@@ -1,31 +1,31 @@
 'use strict';
 
 var React = require('react');
-var index$3 = require('./index-6b0b73f2.js');
-var index$1 = require('./index-edd93a60.js');
-var index$2 = require('./index-42df056b.js');
-var utils = require('./utils-cd7b03f7.js');
+var index$3 = require('./index-2d1343aa.js');
+var index$1 = require('./index-3a493832.js');
+var index$2 = require('./index-ff110f49.js');
+var utils = require('./utils-831c7783.js');
 var ReactDOM = require('react-dom');
-var togetherComponentGlobalContext = require('./utils-c0f2aa5a.js');
+var togetherComponentGlobalContext = require('./utils-1d6c5255.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
-var index$6 = require('./index-373cfe65.js');
-var index$4 = require('./index-41800ba9.js');
-var dataTransform = require('./dataTransform-3771b9cd.js');
-var constants = require('./constants-927711c3.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
+var index$6 = require('./index-621bd56e.js');
+var index$4 = require('./index-2c213999.js');
+var dataTransform = require('./dataTransform-c5851202.js');
+var constants = require('./constants-9da7ee7f.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var post = require('./post-4d069d4b.js');
-var index$7 = require('./index-c11d3dde.js');
-var togetherMoleculesCardAuthor = require('./index-afa0d1b1.js');
-var index$5 = require('./index-887e7969.js');
-var togetherRichTextEditor = require('./editor-7d331776.js');
+var post = require('./post-f7e47b87.js');
+var index$7 = require('./index-090d87a5.js');
+var togetherMoleculesCardAuthor = require('./index-44cab592.js');
+var index$5 = require('./index-902992c2.js');
+var togetherRichTextEditor = require('./editor-06838354.js');
 var core = require('@mantine/core');
 var other = require('@hhgtech/icons/other');
-var index = require('./index-c86ba62a.js');
-var togetherMoleculesPostImagePreview = require('./index-1c369923.js');
+var index = require('./index-3882a661.js');
+var togetherMoleculesPostImagePreview = require('./index-668a0277.js');
 var togetherShareBox = require('./togetherShareBox.js');
-var useScreenSize = require('./useScreenSize-b256c896.js');
+var useScreenSize = require('./useScreenSize-1c9df8d8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-75ad616e.js → index-79787658.js}

@@ -1,29 +1,29 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-0de35a56.js');
+var index = require('./index-7918e40e.js');
 var dayjs = require('dayjs');
-require('./index-6d9ae7c7.js');
-require('./index-8d20bcc4.js');
+require('./index-e7e6be56.js');
+require('./index-1be2976e.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-470c19d7.js');
-require('./index-d9c9d577.js');
-require('./useMantineLocale-9cfb679b.js');
-var index$1 = require('./index-42df056b.js');
-require('./index-9a14f009.js');
-require('./index.styles-09de47ff.js');
-require('./translationsContext-b676bc3e.js');
+require('./index-71fa60b3.js');
+require('./index-000aa50c.js');
+require('./useMantineLocale-b445b99c.js');
+var index$1 = require('./index-ff110f49.js');
+require('./index-da20b174.js');
+require('./index.styles-bf5ac3f4.js');
+require('./translationsContext-1a8fe7a9.js');
 require('@mantine/hooks');
-var utils = require('./utils-cd7b03f7.js');
-require('./other-04b2456f.js');
-require('./index-5c4dc9aa.js');
-var useScreenSize = require('./useScreenSize-b256c896.js');
+var utils = require('./utils-831c7783.js');
+require('./other-39a87b75.js');
+require('./index-4fbc3279.js');
+var useScreenSize = require('./useScreenSize-1c9df8d8.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var index$3 = require('./index-c67e69f5.js');
-var index$2 = require('./index-698d7490.js');
+var index$3 = require('./index-63565859.js');
+var index$2 = require('./index-b639cecc.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-e3ca9d70.js → index-7ab73390.js}

@@ -1,25 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-require('./index-8d20bcc4.js');
-var index$3 = require('./index-6ff19fcb.js');
-require('./index-42df056b.js');
-require('./index-9a14f009.js');
-require('./index.styles-09de47ff.js');
-var index = require('./index-41800ba9.js');
+require('./index-1be2976e.js');
+var index$3 = require('./index-b47a00ec.js');
+require('./index-ff110f49.js');
+require('./index-da20b174.js');
+require('./index.styles-bf5ac3f4.js');
+var index = require('./index-2c213999.js');
 require('@mantine/hooks');
-require('./useMantineLocale-9cfb679b.js');
-require('./index-470c19d7.js');
-require('./index-d9c9d577.js');
-require('./utils-cd7b03f7.js');
-require('./index-6d9ae7c7.js');
-require('./other-04b2456f.js');
-require('./index-5c4dc9aa.js');
-var index$1 = require('./index-116f4f62.js');
-var index$2 = require('./index-29c3379e.js');
+require('./useMantineLocale-b445b99c.js');
+require('./index-71fa60b3.js');
+require('./index-000aa50c.js');
+require('./utils-831c7783.js');
+require('./index-e7e6be56.js');
+require('./other-39a87b75.js');
+require('./index-4fbc3279.js');
+var index$1 = require('./index-67a164a0.js');
+var index$2 = require('./index-12247a8e.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-d2898f98.js → index-8977f066.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-373cfe65.js');
+var index = require('./index-621bd56e.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-561b7381.js → index-897fddf1.js}

@@ -1,34 +1,34 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
-var index$6 = require('./index-6b0b73f2.js');
-var index$3 = require('./index-edd93a60.js');
-var index = require('./index-41800ba9.js');
+var index$6 = require('./index-2d1343aa.js');
+var index$3 = require('./index-3a493832.js');
+var index = require('./index-2c213999.js');
 var innertext = require('innertext');
-var index$1 = require('./index-2328f062.js');
-var index$2 = require('./index-d9c9d577.js');
-var constants = require('./constants-927711c3.js');
+var index$1 = require('./index-780d905b.js');
+var index$2 = require('./index-000aa50c.js');
+var constants = require('./constants-9da7ee7f.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-var togetherComponentGlobalContext = require('./utils-c0f2aa5a.js');
-var treePopoverMenu = require('./treePopoverMenu-642f1a1e.js');
+var togetherComponentGlobalContext = require('./utils-1d6c5255.js');
+var treePopoverMenu = require('./treePopoverMenu-ac9867fd.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-cd7b03f7.js');
+var utils = require('./utils-831c7783.js');
 var miscTheme = require('./miscTheme.js');
-var dataTransform = require('./dataTransform-3771b9cd.js');
+var dataTransform = require('./dataTransform-c5851202.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var index$8 = require('./index-c11d3dde.js');
-var togetherMoleculesCardAuthor = require('./index-afa0d1b1.js');
-var togetherMoleculesProfileDetail = require('./index-6af081c9.js');
-var togetherMoleculesPostImagePreview = require('./index-1c369923.js');
-var index$7 = require('./index-7e4fccf0.js');
-require('./index-6d9ae7c7.js');
+var index$8 = require('./index-090d87a5.js');
+var togetherMoleculesCardAuthor = require('./index-44cab592.js');
+var togetherMoleculesProfileDetail = require('./index-d13d5380.js');
+var togetherMoleculesPostImagePreview = require('./index-668a0277.js');
+var index$7 = require('./index-7679bb2d.js');
+require('./index-e7e6be56.js');
 var core$1 = require('@hhgtech/icons/core');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$5 = require('./index-373cfe65.js');
-var index$4 = require('./index-42df056b.js');
-var normalizeLink = require('./normalizeLink-514559ba.js');
+var index$5 = require('./index-621bd56e.js');
+var index$4 = require('./index-ff110f49.js');
+var normalizeLink = require('./normalizeLink-8f4ebeba.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-aa88bb93.js → index-8d42fd92.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-6b0b73f2.js');
-var togetherComponentGlobalContext = require('./utils-c0f2aa5a.js');
+var index = require('./index-2d1343aa.js');
+var togetherComponentGlobalContext = require('./utils-1d6c5255.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-887e7969.js → index-902992c2.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
-var togetherComponentGlobalContext = require('./utils-c0f2aa5a.js');
+var togetherComponentGlobalContext = require('./utils-1d6c5255.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-6ccc302a.js → index-930d1866.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
 var core = require('@hhgtech/icons/core');
-var Spinner = require('./Spinner-c685496d.js');
-var index$2 = require('./index-8d20bcc4.js');
-var index$1 = require('./index-9a14f009.js');
-var index$4 = require('./index-42df056b.js');
-var index = require('./index-41800ba9.js');
-require('./index-470c19d7.js');
-var index$3 = require('./index-d9c9d577.js');
+var Spinner = require('./Spinner-82229006.js');
+var index$2 = require('./index-1be2976e.js');
+var index$1 = require('./index-da20b174.js');
+var index$4 = require('./index-ff110f49.js');
+var index = require('./index-2c213999.js');
+require('./index-71fa60b3.js');
+var index$3 = require('./index-000aa50c.js');
 var miscTheme = require('./miscTheme.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-cd7b03f7.js');
+var utils = require('./utils-831c7783.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var profileNavigation = require('./profileNavigation.js');
 var navigationLogoutPopup = require('./navigationLogoutPopup.js');
-var Locale = require('./Locale-34160d25.js');
+var Locale = require('./Locale-1af651a4.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const useCSSFocusPopupHelper = (configs) => {
-    const { allowBgScroll } = configs || {};
+    const { allowBgScroll, enableNavTarotGame = false } = configs || {};
     const ref = React.useRef();
     return {
         containerRef: ref,
@@ -38,9 +38,16 @@ const useCSSFocusPopupHelper = (configs) => {
         },
         onButtonMouseDown: (e) => {
             // this close popup when click, run after REact init
+            const elmSiteHeader = document.querySelector('#site-header');
+            if (enableNavTarotGame && elmSiteHeader) {
+                elmSiteHeader.style.backgroundColor = '#fff';
+            }
             if (ref.current &&
                 (document.activeElement === ref.current ||
                     ref.current.contains(document.activeElement))) {
+                if (enableNavTarotGame && elmSiteHeader) {
+                    elmSiteHeader.style.backgroundColor = 'transparent';
+                }
                 ref.current.blur();
                 document.activeElement.blur();
                 e.preventDefault();

package/build/{index-9bc7e399.js → index-95e3b1fc.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var useScrollbarSize = require('./useScrollbarSize-05a9a4fb.js');
+var useScrollbarSize = require('./useScrollbarSize-56d3bb89.js');
 var ReactDOM = require('react-dom');
 var styled = require('@emotion/styled');
-var utils = require('./utils-cd7b03f7.js');
+var utils = require('./utils-831c7783.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-be66ce46.js → index-9ee2be16.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-41800ba9.js');
+var index = require('./index-2c213999.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-d9c9d577.js');
-var normalizeLink = require('./normalizeLink-514559ba.js');
+var index$2 = require('./index-000aa50c.js');
+var normalizeLink = require('./normalizeLink-8f4ebeba.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-c694c78e.js');
-var index$3 = require('./index-f10d4609.js');
-var index$4 = require('./index-6b0b73f2.js');
+var index$1 = require('./index-203c42cd.js');
+var index$3 = require('./index-7104a5f7.js');
+var index$4 = require('./index-2d1343aa.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c87202d7.js → index-a3d587b3.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
 var core = require('@mantine/core');
 var vaul = require('vaul');
 var styled = require('@emotion/styled');
-var index = require('./index-6d9ae7c7.js');
+var index = require('./index-e7e6be56.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-3116d4c1.js → index-ac58594a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-41800ba9.js');
-var index$1 = require('./index-6b0b73f2.js');
+var index = require('./index-2c213999.js');
+var index$1 = require('./index-2d1343aa.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-d47d6758.js → index-af24d52c.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-cf12ae2c.js');
-var index = require('./index-41800ba9.js');
+var index$1 = require('./index-f72e9e3d.js');
+var index = require('./index-2c213999.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-2d2ece63.js → index-b049c6c3.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-09de47ff.js');
+var index_styles = require('./index.styles-bf5ac3f4.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-6ff19fcb.js → index-b47a00ec.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8476ebd1.js');
+var tslib_es6 = require('./tslib.es6-fd92f445.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
-var index = require('./index-6d9ae7c7.js');
-require('./index-470c19d7.js');
-var index$1 = require('./index-d9c9d577.js');
-var useMantineLocale = require('./useMantineLocale-9cfb679b.js');
-var Locale = require('./Locale-34160d25.js');
+var index = require('./index-e7e6be56.js');
+require('./index-71fa60b3.js');
+var index$1 = require('./index-000aa50c.js');
+var useMantineLocale = require('./useMantineLocale-b445b99c.js');
+var Locale = require('./Locale-1af651a4.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }