@hhgtech/hhg-components 1.29.349 → 1.29.351-beta-1

package/build/esm/index-724296c1.js

@@ -0,0 +1,225 @@
+import { a as __awaiter } from './tslib.es6-cfddefe9.js';
+import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { Box, useMantineTheme } from '@mantine/core';
+import { I as ImageWrap } from './useScreenSize-b689324f.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-1ef10b87.js';
+import styled from '@emotion/styled';
+import { PATHS } from './togetherApiPaths.js';
+import { D as DEFAULT_IMG } from './constants-aeae9501.js';
+import { y as youtubeVidIdGetter } from './post-86875f57.js';
+import { L as Loading } from './index-70726722.js';
+
+const StyledSocialLinkPreview = styled.div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    &.fetching {
+      background: lightgray;
+    }
+    .loading-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+  }
+`;
+
+const useExternalScript = ({ url, onLoad, onError }) => {
+    const [state, setState] = useState(url ? 'loading' : 'idle');
+    useEffect(() => {
+        if (!url) {
+            setState('idle');
+            return;
+        }
+        let script = document.querySelector(`script[src="${url}"]`);
+        const handleLoadScript = () => {
+            setState('ready');
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+        };
+        const handleErrorScript = () => {
+            setState('error');
+            onError === null || onError === void 0 ? void 0 : onError();
+        };
+        if (!script) {
+            script = document.createElement('script');
+            script.type = 'application/javascript';
+            script.src = url;
+            script.async = true;
+            document.body.appendChild(script);
+            script.addEventListener('load', handleLoadScript);
+            script.addEventListener('error', handleErrorScript);
+        }
+        script.addEventListener('load', handleLoadScript);
+        script.addEventListener('error', handleErrorScript);
+        return () => {
+            script.removeEventListener('load', handleLoadScript);
+            script.removeEventListener('error', handleErrorScript);
+        };
+    }, [url]);
+    return state;
+};
+
+const YoutubePlyr = ({ id, autoplay }) => {
+    const ref = useRef(null);
+    const state = useExternalScript({ url: 'https://cdn.plyr.io/3.7.8/plyr.js' });
+    useEffect(() => {
+        if (!document.getElementById('hhg-plyr-player')) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = 'https://cdn.plyr.io/3.7.8/plyr.css';
+            link.id = 'hhg-plyr-player';
+            document.head.appendChild(link);
+        }
+        if (state === 'ready' || typeof Plyr !== 'undefined') {
+            new Plyr(ref.current.querySelector('[data-id="player"]'), {
+                autoplay,
+                muted: true,
+            });
+        }
+    }, [state]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { ref: ref, sx: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: '#000',
+                '&, > div': {
+                    width: '100%',
+                    height: '100%',
+                },
+            } },
+            React__default.createElement("div", { "data-id": "player" },
+                React__default.createElement("iframe", { width: "100%", height: "100%", src: `https://www.youtube.com/embed/${id}?&mute=1&enablejsapi=1&rel=0`, allowFullScreen: true, frameBorder: "0" })))));
+};
+
+const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, onPushStatus, }) => {
+    const { data: { locale }, } = useContext(TogetherComponentGlobalContext);
+    const [previewData, setPreviewData] = useState(null);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (image)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            // fetch('./api/fetch-meta?url=' + encodeURIComponent(url))
+            //   .then((res) => res.json())
+            //   .then((res) =>
+            //     setPreviewData({
+            //       url,
+            //       image: res?.image || res?.logo,
+            //     }),
+            //   )
+            callApi(getApiPath(PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }, undefined, baseUrl), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }, !!baseUrl)
+                .then((res) => {
+                var _a, _b;
+                setPreviewData({
+                    url,
+                    image: ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.image) || ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.logo),
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url, image]);
+    const displayImage = image || (previewData === null || previewData === void 0 ? void 0 : previewData.image);
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const youtubeVidId = useMemo(() => {
+        return youtubeVidIdGetter(displayUrl);
+    }, [displayUrl]);
+    const facebookVidId = useMemo(() => {
+        return (displayUrl.includes('facebook.com') || displayUrl.includes('fb.watch'));
+    }, [displayUrl]);
+    const responsiveWidth = useRef(0);
+    const responsiveHeight = useRef(0);
+    const [forceRerenderFB, setForceRerenderFB] = useState(false);
+    // FACEBOOK Video is not responsive for desktop browser
+    // => hack: set size to same as container, if size change too large, re-render facebook iframe with new config
+    useEffect(() => {
+        const handleResize = () => {
+            var _a;
+            const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            let toChangeSize = false;
+            if (containerRect &&
+                (!responsiveWidth.current ||
+                    Math.abs((responsiveWidth.current - containerRect.width) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width)) > 0.2)) {
+                responsiveWidth.current = Math.floor(containerRect.width);
+                toChangeSize = true;
+            }
+            if (containerRect &&
+                (!responsiveHeight.current ||
+                    Math.abs((responsiveHeight.current - containerRect.height) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.height)) > 0.2)) {
+                responsiveHeight.current = Math.floor(containerRect.height);
+                toChangeSize = true;
+            }
+            if (toChangeSize) {
+                setForceRerenderFB((v) => !v);
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    useEffect(() => {
+        if ((previewData === null || previewData === void 0 ? void 0 : previewData.image) && (previewData === null || previewData === void 0 ? void 0 : previewData.url)) {
+            onPushStatus === null || onPushStatus === void 0 ? void 0 : onPushStatus(true);
+        }
+    }, [previewData]);
+    const containerRef = useRef(null);
+    const _theme = useMantineTheme();
+    return (React__default.createElement(StyledSocialLinkPreview, { className: `${className} no-replace-click`, style: style, ref: containerRef, color: _theme.colors[_theme.primaryColor][0] }, !image && (youtubeVidId || facebookVidId) ? (React__default.createElement("div", { className: "link-image-wrapper" }, youtubeVidId ? (React__default.createElement(YoutubePlyr, { id: youtubeVidId, autoplay: autoPlay })) : facebookVidId ? (React__default.createElement("iframe", { key: String(forceRerenderFB), src: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(displayUrl)}&autoplay=${autoPlay ? 1 : 0}&show_text=false&t=0&width=${responsiveWidth.current}&height=${responsiveHeight.current}`, style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            border: 'none',
+            overflow: 'hidden',
+            height: responsiveHeight.current,
+            width: responsiveWidth.current,
+            transform: 'translate(-50%, -50%)',
+        }, scrolling: "no", frameBorder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share", loading: "lazy" })) : null)) : (React__default.createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+        React__default.createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default.createElement(Loading, { className: "loading-spinner" })) : (React__default.createElement(ImageWrap, { className: "link-image", src: displayImage || DEFAULT_IMG, backupSrc: DEFAULT_IMG, alt: displayUrl })))))));
+};
+
+export { SocialLinkPreview as S };

package/build/esm/{index-8ff5843f.js → index-78ac23bf.js}

@@ -1,44 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-bea6774f.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-cfddefe9.js';
 import React__default, { useState, useImperativeHandle, useRef, useEffect, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
-import { R as Radio } from './index-75b6adf7.js';
+import { R as Radio } from './index-18cf18ca.js';
 import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-2a66607f.js';
-import './index-def423d4.js';
-import { C as CommonGAssets } from './index-e0c9065b.js';
-import './useMantineLocale-b482abdd.js';
-import { T as Text } from './index-b605d917.js';
-import { B as Button$1 } from './index-ff8fa730.js';
-import './index.styles-f1d20f0b.js';
-import './translationsContext-4a161a5e.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-93dfd4e1.js';
+import './index-6d7f28dd.js';
+import { C as CommonGAssets } from './index-8d0259ad.js';
+import './useMantineLocale-2f880379.js';
+import { T as Text } from './index-4d85e9fa.js';
+import { B as Button$1 } from './index-4b466fad.js';
+import './index.styles-4f9afc01.js';
+import './translationsContext-6915a82a.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5a720548.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { i as isInternalLink } from './index-bd2495ce.js';
+import { M as MediaQueries } from './utils-339046f6.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { i as isInternalLink } from './index-c34b3b5c.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, P as PureInput } from './index-b14478e8.js';
-import { L as Logo } from './index-613417dd.js';
+import { C as Checkbox, P as PureInput } from './index-45d270af.js';
+import { L as Logo } from './index-d6e68b7a.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 import { isBefore, startOfMonth, addMonths, format, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
-import { a as useOutsideClick } from './useOutsideClick-01227e67.js';
+import { a as useOutsideClick } from './useOutsideClick-557246e7.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-0ed85b02.js';
-import { u as useScreenSize } from './useScreenSize-a0bc6826.js';
-import { u as useTranslations } from './index-eb34e967.js';
-import { D as Dropdown } from './index-e3dd4816.js';
+import { B as Button } from './index-e4fea84c.js';
+import { u as useScreenSize } from './useScreenSize-b689324f.js';
+import { u as useTranslations } from './index-fd5c91de.js';
+import { D as Dropdown } from './index-75bfe19f.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-21b4d3a4.js';
-import { D as Drawer } from './index-59101a4f.js';
+import { I as Input } from './index-a4a09e75.js';
+import { D as Drawer } from './index-d433c3d7.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-9dea4d4a.js';
+import { L as LOCALE } from './Locale-9b494286.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';

package/build/esm/{index-e8ec05bc.js → index-7e9f7887.js}

@@ -1,6 +1,6 @@
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { B as Button } from './index-0ed85b02.js';
-import { T as TogetherComponentGlobalContext } from './utils-206705f4.js';
+import { B as Button } from './index-e4fea84c.js';
+import { T as TogetherComponentGlobalContext } from './utils-1ef10b87.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-2f334402.js → index-80af9731.js}

@@ -1,47 +1,48 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-bea6774f.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-cfddefe9.js';
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-e3dd4816.js';
-import { u as useTranslations } from './index-eb34e967.js';
+import { D as Dropdown } from './index-75bfe19f.js';
+import { u as useTranslations } from './index-fd5c91de.js';
 import innertext from 'innertext';
 import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-75b6adf7.js';
+import { I as Input$1 } from './index-18cf18ca.js';
 import { useMantineTheme, Switch, Popover } from '@mantine/core';
 import '@mantine/dates';
-import './index-2a66607f.js';
-import './index-def423d4.js';
-import './index-e0c9065b.js';
-import './useMantineLocale-b482abdd.js';
-import { T as Text } from './index-b605d917.js';
-import { B as Button } from './index-ff8fa730.js';
-import './index.styles-f1d20f0b.js';
+import './index-93dfd4e1.js';
+import './index-6d7f28dd.js';
+import './index-8d0259ad.js';
+import './useMantineLocale-2f880379.js';
+import { T as Text } from './index-4d85e9fa.js';
+import { B as Button } from './index-4b466fad.js';
+import './index.styles-4f9afc01.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5a720548.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { u as useImagePicker, a as PopupFrame, d as IconCloseCircle, g as getDefaultFailNoti, e as getPostFormData, f as editPost, h as createPost } from './index-314b0752.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-206705f4.js';
+import { M as MediaQueries } from './utils-339046f6.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-7085c360.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-1ef10b87.js';
 import styled from '@emotion/styled';
-import { b as formatPost, a as formatCommunity, c as formatTopic } from './dataTransform-f2b1a7aa.js';
-import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-44428c3b.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-ff05f592.js';
-import { C as CardAuthor, L as Loading$1 } from './index-92e61bb7.js';
-import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-f4ccfcb0.js';
-import { I as Input } from './index-21b4d3a4.js';
+import { b as formatPost, a as formatCommunity, c as formatTopic } from './dataTransform-23043966.js';
+import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-aeae9501.js';
+import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-86875f57.js';
+import { C as CardAuthor } from './index-c3938494.js';
+import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-de6642e2.js';
+import { I as Input } from './index-a4a09e75.js';
 import debounce from 'lodash/debounce';
 import ContentEditable from 'react-contenteditable';
 import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-4517b607.js';
-import { C as CardLink } from './index-e50eaf7c.js';
-import { B as BtnChoice } from './index-50f9b41e.js';
-import { L as LOCALE } from './Locale-9dea4d4a.js';
+import { L as Loading } from './index-d5401d04.js';
+import { C as CardLink } from './index-0538915a.js';
+import { B as BtnChoice } from './index-a7dcdbd0.js';
+import { L as LOCALE } from './Locale-9b494286.js';
 import * as ReactDOM from 'react-dom';
-import { b as IconArrowLeft } from './index-e4721d93.js';
-import { B as Button$1 } from './index-0ed85b02.js';
+import { L as Loading$1 } from './index-70726722.js';
+import { b as IconArrowLeft } from './index-57119a2f.js';
+import { B as Button$1 } from './index-e4fea84c.js';
 import { getCookie } from './miscCookieHelper.js';
-import { a as useUniqueId } from './useUniqueId-ab3eacc1.js';
-import { U as UserAvatar } from './index-29e95d32.js';
-import { P as PopoverMenu } from './index-e8ec05bc.js';
+import { a as useUniqueId } from './useUniqueId-edcccf6c.js';
+import { U as UserAvatar } from './index-63abdccd.js';
+import { P as PopoverMenu } from './index-7e9f7887.js';
 import { Close, Check } from '@hhgtech/icons/core';
 
 const StyledCreateNewPost$1 = styled.div `

package/build/esm/{index-16098f47.js → index-81804294.js}

@@ -1,26 +1,26 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-bea6774f.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-cfddefe9.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-f2578df3.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-44428c3b.js';
-import { G as GenderOptionControl } from './index-cf0e1b27.js';
-import { I as Input } from './index-75b6adf7.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-91bfc4c2.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-aeae9501.js';
+import { G as GenderOptionControl } from './index-ddd68f2b.js';
+import { I as Input } from './index-18cf18ca.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-2a66607f.js';
-import './index-def423d4.js';
-import './index-e0c9065b.js';
-import './useMantineLocale-b482abdd.js';
-import { T as Text } from './index-b605d917.js';
-import './index-ff8fa730.js';
+import './index-93dfd4e1.js';
+import './index-6d7f28dd.js';
+import './index-8d0259ad.js';
+import './useMantineLocale-2f880379.js';
+import { T as Text } from './index-4d85e9fa.js';
+import './index-4b466fad.js';
 import { theme } from './miscTheme.js';
-import './index.styles-f1d20f0b.js';
-import { u as useTranslations } from './index-eb34e967.js';
+import './index.styles-4f9afc01.js';
+import { u as useTranslations } from './index-fd5c91de.js';
 import '@mantine/hooks';
-import './utils-5a720548.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { H as HealthToolFormWrapper } from './index-5e8cc822.js';
+import './utils-339046f6.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { H as HealthToolFormWrapper } from './index-ea222e0d.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 

package/build/esm/{index-20d45dcd.js → index-8630e312.js}

@@ -1,23 +1,23 @@
-import { a as __awaiter } from './tslib.es6-bea6774f.js';
+import { a as __awaiter } from './tslib.es6-cfddefe9.js';
 import React__default, { useRef, useState, useMemo } from 'react';
 import { User } from '@hhgtech/icons/core';
-import { S as Spinner } from './Spinner-518e5c82.js';
-import { a as Avatar } from './index-75b6adf7.js';
-import { B as Button } from './index-ff8fa730.js';
-import { T as Text } from './index-b605d917.js';
-import { u as useTranslations } from './index-eb34e967.js';
-import './index-def423d4.js';
-import { C as CommonGAssets } from './index-e0c9065b.js';
+import { S as Spinner } from './Spinner-c771ed5f.js';
+import { a as Avatar } from './index-18cf18ca.js';
+import { B as Button } from './index-4b466fad.js';
+import { T as Text } from './index-4d85e9fa.js';
+import { u as useTranslations } from './index-fd5c91de.js';
+import './index-6d7f28dd.js';
+import { C as CommonGAssets } from './index-8d0259ad.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-5a720548.js';
+import { M as MediaQueries } from './utils-339046f6.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { ProfileNavigation } from './profileNavigation.js';
 import { NavigationLogoutPopup } from './navigationLogoutPopup.js';
-import { L as LOCALE } from './Locale-9dea4d4a.js';
+import { L as LOCALE } from './Locale-9b494286.js';
 
 const useCSSFocusPopupHelper = (configs) => {
-    const { allowBgScroll } = configs || {};
+    const { allowBgScroll, enableNavTarotGame = false } = configs || {};
     const ref = useRef();
     return {
         containerRef: ref,
@@ -31,9 +31,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/esm/{index-5de36917.js → index-8767c2da.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-bea6774f.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-135ef0dc.js';
-import { I as Input } from './index-75b6adf7.js';
-import { D as DatePicker } from './index-3e24192c.js';
-import { T as Text } from './index-b605d917.js';
-import './index-ff8fa730.js';
-import './index.styles-f1d20f0b.js';
-import { u as useTranslations } from './index-eb34e967.js';
+import { L as LastPeriod } from './LastPeriod-2875ffc2.js';
+import { I as Input } from './index-18cf18ca.js';
+import { D as DatePicker } from './index-d021d300.js';
+import { T as Text } from './index-4d85e9fa.js';
+import './index-4b466fad.js';
+import './index.styles-4f9afc01.js';
+import { u as useTranslations } from './index-fd5c91de.js';
 import '@mantine/hooks';
-import './useMantineLocale-b482abdd.js';
-import './index-def423d4.js';
-import './index-e0c9065b.js';
-import './utils-5a720548.js';
-import './index-2a66607f.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { H as HealthToolFormWrapper } from './index-5e8cc822.js';
+import './useMantineLocale-2f880379.js';
+import './index-6d7f28dd.js';
+import './index-8d0259ad.js';
+import './utils-339046f6.js';
+import './index-93dfd4e1.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { H as HealthToolFormWrapper } from './index-ea222e0d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {

package/build/esm/{index-2321b154.js → index-8c90d872.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-9b4eb370.js';
+import { C as Container } from './index-3b2e5262.js';
 import dayjs from 'dayjs';
-import './index-2a66607f.js';
-import './index-75b6adf7.js';
+import './index-93dfd4e1.js';
+import './index-18cf18ca.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-def423d4.js';
-import './index-e0c9065b.js';
-import './useMantineLocale-b482abdd.js';
-import { T as Text } from './index-b605d917.js';
-import './index-ff8fa730.js';
-import './index.styles-f1d20f0b.js';
-import './translationsContext-4a161a5e.js';
+import './index-6d7f28dd.js';
+import './index-8d0259ad.js';
+import './useMantineLocale-2f880379.js';
+import { T as Text } from './index-4d85e9fa.js';
+import './index-4b466fad.js';
+import './index.styles-4f9afc01.js';
+import './translationsContext-6915a82a.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5a720548.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { u as useScreenSize } from './useScreenSize-a0bc6826.js';
+import { M as MediaQueries } from './utils-339046f6.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { u as useScreenSize } from './useScreenSize-b689324f.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-613417dd.js';
-import { M as MarryBabyText } from './index-fafcf523.js';
+import { L as Logo } from './index-d6e68b7a.js';
+import { M as MarryBabyText } from './index-b699bc6a.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-2a66607f.js → index-93dfd4e1.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-def423d4.js';
+import './index-6d7f28dd.js';
 import { siteHost, siteOptions } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-9dea4d4a.js';
+import { L as LOCALE } from './Locale-9b494286.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
@@ -353,6 +353,7 @@ const CARE_LOCALES = [
     //  'zh-TW'
 ];
 const CARE_BOOKING_LOCALES = ['vi-VN', 'id-ID'];
+const VIDEO_LOCALES = ['vi-VN'];
 const FAVICONS = {
     'vi-VN': [
         {
@@ -727,7 +728,8 @@ const CDN_ADDRESS = 'https://cdn.hellohealthgroup.com/countries';
 const GA_TOKEN_COOKIE = '_ga';
 const API_DATE_FORMAT = 'YYYY-MM-DD';
 const DATE_FNS_DATE_FORMAT = 'dd-MM-yyyy';
-const ZINDEX_SSO = 9999999;
+const ZINDEX_SSO = 9999999;
+const VIDEO_DETAIL_TEMP_STORAGE = 'video_item_detail';
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -742,6 +744,7 @@ var index = /*#__PURE__*/Object.freeze({
   DATA_PRIVACY_LOCALES: DATA_PRIVACY_LOCALES,
   CARE_LOCALES: CARE_LOCALES,
   CARE_BOOKING_LOCALES: CARE_BOOKING_LOCALES,
+  VIDEO_LOCALES: VIDEO_LOCALES,
   FAVICONS: FAVICONS,
   get QUERY_HEALTH_TOOL () { return QUERY_HEALTH_TOOL; },
   ISO_FORMAT: ISO_FORMAT,
@@ -753,6 +756,7 @@ var index = /*#__PURE__*/Object.freeze({
   API_DATE_FORMAT: API_DATE_FORMAT,
   DATE_FNS_DATE_FORMAT: DATE_FNS_DATE_FORMAT,
   ZINDEX_SSO: ZINDEX_SSO,
+  VIDEO_DETAIL_TEMP_STORAGE: VIDEO_DETAIL_TEMP_STORAGE,
   siteHost: siteHost,
   siteOptions: siteOptions,
   domainLocales: domainLocales,
@@ -762,4 +766,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_REFRESH_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, ZINDEX_SSO as Z, CARE_LOCALES as a, CARE_BOOKING_LOCALES as b, DATE_FNS_LOCALE as c, BEARER_TOKEN_COOKIE as d, basePath as e, SSO_URL as f, UP_BASEPATH as g, DATE_FNS_DATE_FORMAT as h, index as i };
+export { API_DATE_FORMAT as A, BEARER_REFRESH_TOKEN_COOKIE as B, CDN_ADDRESS as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, TOGETHER_LOCALES as T, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_DETAIL_TEMP_STORAGE as V, ZINDEX_SSO as Z, CARE_LOCALES as a, CARE_BOOKING_LOCALES as b, VIDEO_LOCALES as c, DATE_FNS_LOCALE as d, BEARER_TOKEN_COOKIE as e, basePath as f, SSO_URL as g, UP_BASEPATH as h, index as i, DATE_FNS_DATE_FORMAT as j };

package/build/esm/{index-85f75df4.js → index-96b168c1.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-bea6774f.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-a50d4537.js';
-import { S as Spinner } from './Spinner-518e5c82.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-82f6685c.js';
+import { S as Spinner } from './Spinner-c771ed5f.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);