@hhgtech/hhg-components 1.29.534 → 1.29.535-beta-1

package/build/esm/{transform-15f92750.js → transform-4a07e970.js}

@@ -1,56 +1,67 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-d9a784b4.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-94c34d9b.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio, a as Carousel } from './index-af4d2e05.js';
-import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal, Grid } from '@mantine/core';
+import { R as Radio, a as Carousel } from './index-18bc0058.js';
+import { Stack, Group, createStyles, getStylesRef, useMantineTheme, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Modal as Modal$1, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS, Z as ZINDEX_SSO } from './index-dbceef8f.js';
-import './index-5f5b7cda.js';
-import { C as CommonGAssets } from './index-febe78cf.js';
-import './index-52842760.js';
-import { T as Text } from './index-01466711.js';
-import { B as Button$1 } from './index-af5a71ea.js';
-import './index-5bbb8b7a.js';
-import './index.styles-235de34d.js';
-import './translationsContext-cd8871cf.js';
-import '@mantine/hooks';
-import { M as MediaQueries } from './utils-6772076f.js';
-import './index-cdb4d674.js';
-import { i as isInternalLink } from './SiteWideBanner-5e66305f.js';
+import { L as LOCALE_SPECS, F as FAVICONS, I as ISO_FORMAT, Z as ZINDEX_SSO } from './index-d3c46c8b.js';
+import './index-659e2aa2.js';
+import { C as CommonGAssets } from './index-9d59578e.js';
+import './index-4a2359b3.js';
+import { T as Text } from './index-b2dfc4d6.js';
+import { B as Button$1 } from './index-7c27cc59.js';
+import { F as FontWeight } from './index-c1482776.js';
+import './index.styles-5b2ab4d6.js';
+import './translationsContext-b60af033.js';
+import { useDisclosure } from '@mantine/hooks';
+import { M as MediaQueries } from './utils-423094ef.js';
+import './index-4d172c08.js';
+import { i as isInternalLink } from './SiteWideBanner-5ede75f5.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-c46c6359.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-9a683b06.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-c972f896.js';
+import { L as Logo } from './index-a3a10ecd.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-77fe7218.js';
+import { a as useOutsideClick } from './useOutsideClick-22b6ed6b.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-cebe4a5a.js';
-import { u as useScreenSize, I as ImageWrap } from './index-5e89000a.js';
-import { u as useTranslations } from './index-0b185aa8.js';
+import { B as Button } from './index-8f789a7c.js';
+import { u as useScreenSize, I as ImageWrap } from './index-2f65332f.js';
+import { u as useTranslations, f as format$1 } from './index-d1f041f2.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-c5fc02fd.js';
+import { D as Dropdown } from './index-959d94f7.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-d9bb5f97.js';
-import { D as Drawer } from './index-f8d2ecda.js';
+import { I as Input } from './index-b7340e4e.js';
+import { D as Drawer } from './index-4513ed67.js';
+import { D as DrawerBottom } from './index-a03439ab.js';
+import { M as Modal } from './index-4d502b48.js';
+import { b as formatArticle } from './dataTransform-9ebf9bf0.js';
+import { DISCOVER_PATHS } from './togetherApiPaths.js';
+import { c as callApi, g as getDiscoverApiPath } from './utils-70ffba4c.js';
+import innertext from 'innertext';
+import { L as LOCALE } from './Locale-908c3d6a.js';
+import { g as getHelloSitesUrl } from './index-b5b1c47d.js';
+import { P as POST_DATE_FORMAT, D as DEFAULT_AVATAR_IMG, a as DEFAULT_IMG } from './constants-37007b2c.js';
+import dayjs from 'dayjs';
+import { ArticleCard } from './moleculesArticleCard.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-41d09e42.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-72e6b26d.js';
-import { L as Loading } from './index-96354a8e.js';
+import { A as ArrowRightBlue } from './index-f5e87c86.js';
+import { L as Loading } from './index-ba7ede9c.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
-import { C as Close } from './Close-e0574388.js';
+import { C as Close } from './index-77c65088.js';
 import { useAnimationOffsetEffect } from '@mantine/carousel';
+import { D as DEFAULT_HEADER_HEIGHT_MOBILE } from './constants-6124668c.js';
 
 const StarFull = (_a) => {
     var { color, stroke } = _a, props = __rest(_a, ["color", "stroke"]);
@@ -2789,6 +2800,572 @@ const ShareDrawer = (_a) => {
     }
 };
 
+const BoostCardArticleAuthorName = (props) => {
+    const { intlKey, formatOptions, formatOptionsProps } = props;
+    const { author_name, expert_display_name, fact_check_display_name, specialty, organisation, post_modified, } = formatOptions || {};
+    const { author_name: formatOptionsPropsAuthorName, expert_display_name: formatOptionsPropsExpertDisplayName, fact_check_display_name: formatOptionsPropsFactCheckDisplayName, specialty: formatOptionsPropsSpecialty, organisation: formatOptionsPropsOrganisation, post_modified: formatOptionsPropsPostModified, } = formatOptionsProps || {};
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const formatOptionsComp = useCallback((p = {}) => {
+        const href = p.href;
+        const Comp = href ? 'a' : 'span';
+        const propsComp = Object.assign({}, p);
+        if (!href) {
+            delete propsComp.href;
+            delete propsComp['data-event-category'];
+            delete propsComp['data-event-action'];
+            delete propsComp['data-event-label'];
+        }
+        return React__default.createElement(Comp, Object.assign({}, propsComp));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null, format$1(t(intlKey), {
+        author_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, author_name), formatOptionsPropsAuthorName)))),
+        expert_display_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, expert_display_name), formatOptionsPropsExpertDisplayName)))),
+        fact_check_display_name: (React__default.createElement("span", { style: {
+                fontWeight: FontWeight.halfBold,
+                color: theme.colors.gray[8],
+            } }, formatOptionsComp(Object.assign(Object.assign({}, fact_check_display_name), formatOptionsPropsFactCheckDisplayName)))),
+        specialty: formatOptionsComp(Object.assign(Object.assign({}, specialty), formatOptionsPropsSpecialty)),
+        organisation: formatOptionsComp(Object.assign(Object.assign({}, organisation), formatOptionsPropsOrganisation)),
+        post_modified: formatOptionsComp(Object.assign(Object.assign({}, post_modified), formatOptionsPropsPostModified)),
+    })));
+};
+
+const getAuthorFormatOptionsProps = (reviewedUser) => {
+    if (!reviewedUser) {
+        return { children: '' };
+    }
+    if ((reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.profile_url) && (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.turn_off_profile)) {
+        return { children: (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.display_name) || (reviewedUser === null || reviewedUser === void 0 ? void 0 : reviewedUser.name) || '' };
+    }
+    return {
+        href: reviewedUser.profile_url || '',
+        children: reviewedUser.display_name || reviewedUser.name || '',
+    };
+};
+const authorConfigForAssetBase = (assetImageBase) => {
+    const base = assetImageBase.replace(/\/$/, '');
+    return {
+        medical: {
+            intlKey: {
+                long: 'articlePage.reviewed_by.expert.medical',
+                short: 'articlePage.reviewed_by.expert.medical.short',
+            },
+            indicator: `${base}/reviewer-medical.svg`,
+        },
+        expert: {
+            intlKey: {
+                long: 'articlePage.reviewed_by.expert',
+                short: 'articlePage.reviewed_by.expert.short',
+            },
+            indicator: `${base}/reviewer-expert.svg`,
+        },
+        written_by: {
+            intlKey: {
+                long: 'articlePage.written_by.author',
+                short: 'articlePage.written_by.author.short',
+            },
+            indicator: `${base}/reviewer-editor.svg`,
+        },
+        fact_checked_by: {
+            intlKey: {
+                long: 'articlePage.fact_checked_by.author',
+                short: 'articlePage.fact_checked_by.author.short',
+            },
+            indicator: `${base}/reviewer-fact-check.svg`,
+        },
+    };
+};
+function getAuthorForBoostCard({ article, locale, assetImageBase, version = 'short', }) {
+    const AUTHOR_CONFIG = authorConfigForAssetBase(assetImageBase);
+    const { expert, author, fact_check, is_author } = article.articleReviewed || {};
+    const articlePostModified = article.postModified || article.modifiedTime;
+    const { avatar: fcAvatar = '', avatar_thumbnail: fcAvatarThumb = '', display_name: fcDisplayName = '', name: fcName = '', profile_url: fcProfileUrl = '', turn_off_profile: fcTurnOffProfile, } = fact_check || {};
+    const modifiedDate = dayjs(articlePostModified);
+    let authorConfig = AUTHOR_CONFIG.fact_checked_by;
+    let avatar = fcAvatarThumb || fcAvatar;
+    let avatar_alt = fcDisplayName || fcName;
+    let avatar_permalink = !fcTurnOffProfile ? fcProfileUrl : '';
+    const post_modified = modifiedDate.isValid()
+        ? modifiedDate.format(ISO_FORMAT[locale].dateFormat)
+        : '';
+    const formatOptions = {
+        expert_display_name: getAuthorFormatOptionsProps(expert),
+        author_name: getAuthorFormatOptionsProps(author),
+        fact_check_display_name: getAuthorFormatOptionsProps(fact_check),
+        post_modified: { children: post_modified },
+    };
+    if (expert) {
+        const ex = expert;
+        const { avatar: exAvatar = '', avatar_thumbnail: exAvatarThumb = '', display_name: exDisplayName = '', name: exName = '', profile_url: exProfileUrl = '', specialty = '', organisation = '', turn_off_profile: exTurnOffProfile, } = ex;
+        formatOptions.specialty = { children: specialty };
+        formatOptions.organisation = { children: organisation };
+        avatar = exAvatarThumb || exAvatar || avatar;
+        avatar_alt = exDisplayName || exName || avatar_alt;
+        avatar_permalink = !exTurnOffProfile ? exProfileUrl || avatar_permalink : '';
+        if (is_author) {
+            authorConfig = AUTHOR_CONFIG.written_by;
+        }
+        else {
+            authorConfig = AUTHOR_CONFIG.expert;
+        }
+    }
+    return {
+        intlKey: authorConfig.intlKey[version],
+        indicator: authorConfig.indicator,
+        avatar,
+        avatar_alt,
+        avatar_permalink,
+        formatOptions,
+    };
+}
+
+const StyledAvatarReviewer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+`;
+styled.div `
+  width: 12px;
+  height: 12px;
+`;
+const StyledArticleCard = styled(ArticleCard) `
+  .author .poster p span:not(.author-name) {
+    font-weight: 400;
+  }
+
+  .author .poster p span:not(.name) {
+    color: ${theme.colors.gray800};
+  }
+
+  .author-name {
+    font-weight: 600;
+  }
+`;
+const StyledItemImageContain = styled.div `
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+function renderBoostUploadTime(locale, date) {
+    if (!date)
+        return '';
+    if (dayjs(date, POST_DATE_FORMAT).isValid()) {
+        return dayjs(date, POST_DATE_FORMAT).format(ISO_FORMAT[locale].dateFormat);
+    }
+    return date;
+}
+
+function PopupBoostArticleCard({ article, isMobile, className = 'article-card', hideBookmark = true, assetImageBase = '/images', }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { locale: translationsLocale } = useTranslations();
+    const locale = translationsLocale === 'vi-VN_MB'
+        ? LOCALE.Vietnam
+        : translationsLocale;
+    const authorV2 = getAuthorForBoostCard({
+        article,
+        locale,
+        assetImageBase,
+        version: 'short',
+    });
+    const authorUrlDomain = authorV2.avatar_permalink
+        ? `${getHelloSitesUrl(translationsLocale, true)}${authorV2.avatar_permalink}`
+        : '';
+    const domain = domainLocales[translationsLocale];
+    const articleUrlLabel = domain && article.permalink
+        ? `https://${domain}${article.permalink}`
+        : article.permalink || '';
+    const uploadRendered = renderBoostUploadTime(locale, article.modifiedTime);
+    const loc = translationsLocale;
+    const isPremiumUi = loc !== 'vi-VN' && loc !== 'vi-VN_MB' && article.isPremium;
+    const avatarInner = (React__default.createElement(StyledAvatarReviewer, null,
+        React__default.createElement(StyledItemImageContain, null,
+            React__default.createElement("img", { className: "avatar", src: authorV2.avatar || DEFAULT_AVATAR_IMG, alt: authorV2.avatar_alt, width: 24, height: 24, style: {
+                    borderRadius: '50%',
+                    objectFit: 'cover',
+                    display: 'block',
+                } }))));
+    return (React__default.createElement(StyledArticleCard, { isPremium: isPremiumUi, isMobile: isMobile, className: className, dataEventCategoryForBookmark: "Bookmark", dataEventActionForBookmark: "Click", dataEventLabelForBookmark: articleUrlLabel, dataEventLabelForTitle: articleUrlLabel, dataEventLabelForCategory: ((_a = article.category) === null || _a === void 0 ? void 0 : _a.permalink) && domain
+            ? `https://${domain}${article.category.permalink}`
+            : ((_b = article.category) === null || _b === void 0 ? void 0 : _b.permalink) || '', dataEventLabelForBanner: articleUrlLabel, hasAffiliate: article.hasAffiliate, articleLink: article.permalink, categoryLink: ((_c = article.category) === null || _c === void 0 ? void 0 : _c.permalink) || '#', categoryName: ((_d = article.category) === null || _d === void 0 ? void 0 : _d.displayName) ||
+            ((_e = article.category) === null || _e === void 0 ? void 0 : _e.name) ||
+            ((_g = (_f = article.categories) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.displayName) ||
+            ((_j = (_h = article.categories) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.name) ||
+            '', banner: React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
+                article.featureImage ||
+                DEFAULT_IMG, alt: article.postName, loading: "lazy", style: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                display: 'block',
+            } }), specialty: ((_k = article.expert) === null || _k === void 0 ? void 0 : _k.specialty) || ((_l = article.author) === null || _l === void 0 ? void 0 : _l.specialty) || '', type: "author", size: "md", direction: isMobile ? 'vertical' : 'horizontal', uploadTime: uploadRendered || article.modifiedTime || article.postModified || '', title: innertext(article.postTitle || article.postName || '') || '', text: article.excerpt || article.description || article.postContent
+            ? innertext(article.excerpt ||
+                article.description ||
+                ((_m = article.postContent) === null || _m === void 0 ? void 0 : _m.split('\r\n')[0]) ||
+                '')
+            : '', avatarImg: authorV2.avatar_permalink ? (React__default.createElement("a", { href: authorV2.avatar_permalink, className: "pointer-event-child-none", "data-event-label": authorUrlDomain }, avatarInner)) : (React__default.createElement("span", { className: "pointer-event-child-none" }, avatarInner)), authorName: React__default.createElement("span", { "data-event-label": authorUrlDomain, className: "pointer-event-child-none" },
+            React__default.createElement(BoostCardArticleAuthorName, Object.assign({}, authorV2, { formatOptionsProps: {
+                    expert_display_name: {
+                        href: '',
+                    },
+                } })),
+            "\u00A0"), authorLink: authorV2.avatar_permalink, isBookmarkDisplayed: !hideBookmark, isBookmark: false, onBookmark: hideBookmark ? undefined : () => undefined, styleLabel: {
+            color: ((_o = article.category) === null || _o === void 0 ? void 0 : _o.textColor) || '#008C50',
+        } }));
+}
+
+function PopupBoostPageView({ source, articleId, primaryCategoryId, postId, community, isMobile, basePath, getSpotlightTitle, getSpotlightImage, getSpotlightPermalink, getSpotlightContent, }) {
+    const { t, locale } = useTranslations();
+    const modalHeading = t('popupBoostPageView.modalHeading');
+    const viewDetailText = t('popupBoostPageView.viewDetail');
+    const [requestState, setRequestState] = useState('idle');
+    const [boostType, setBoostType] = useState(null);
+    const [boostArticle, setBoostArticle] = useState(null);
+    const [boostCarePath, setBoostCarePath] = useState(null);
+    const [boostCustom, setBoostCustom] = useState(null);
+    const [delaySeconds, setDelaySeconds] = useState(0);
+    const [sessionPopupShown, setSessionPopupShown] = useState(false);
+    const [opened, { open, close }] = useDisclosure(false);
+    const pendingOpenDeadlineRef = useRef(null);
+    const suppressNextOpenRef = useRef(false);
+    const getSpotlightTitleRef = useRef(getSpotlightTitle);
+    const getSpotlightImageRef = useRef(getSpotlightImage);
+    const getSpotlightPermalinkRef = useRef(getSpotlightPermalink);
+    const getSpotlightContentRef = useRef(getSpotlightContent);
+    getSpotlightTitleRef.current = getSpotlightTitle;
+    getSpotlightImageRef.current = getSpotlightImage;
+    getSpotlightPermalinkRef.current = getSpotlightPermalink;
+    getSpotlightContentRef.current = getSpotlightContent;
+    const hasSourceId = source === 'article' ? !!articleId : !!postId;
+    useEffect(() => {
+        if (!hasSourceId) {
+            close();
+            pendingOpenDeadlineRef.current = null;
+            setSessionPopupShown(false);
+            setRequestState('idle');
+            setBoostType(null);
+            setBoostArticle(null);
+            setBoostCarePath(null);
+            setBoostCustom(null);
+            setDelaySeconds(0);
+            return;
+        }
+        if (sessionPopupShown) {
+            return;
+        }
+        close();
+        setBoostType(null);
+        setBoostArticle(null);
+        setBoostCarePath(null);
+        setBoostCustom(null);
+        setDelaySeconds(0);
+        const requestedSourceId = source === 'article' ? articleId : postId;
+        let isActive = true;
+        setRequestState('loading');
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const res = yield callApi(getDiscoverApiPath(DISCOVER_PATHS.GET_BOOST_POPUP_CARD, {
+                type: source,
+                articleId: source === 'article' ? requestedSourceId !== null && requestedSourceId !== void 0 ? requestedSourceId : '' : '',
+                primaryCategoryId: source === 'article' ? primaryCategoryId !== null && primaryCategoryId !== void 0 ? primaryCategoryId : '' : '',
+                community: source === 'community' ? community !== null && community !== void 0 ? community : '' : '',
+                postId: source === 'community' ? requestedSourceId !== null && requestedSourceId !== void 0 ? requestedSourceId : '' : '',
+            }), 'get');
+            if (!isActive)
+                return;
+            const boostPayload = res === null || res === void 0 ? void 0 : res.data;
+            const nextType = (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'article' ||
+                (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'carepath' ||
+                (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.type) === 'custom'
+                ? boostPayload.type
+                : null;
+            const nextDelaySeconds = typeof (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.delay_time) === 'number' &&
+                boostPayload.delay_time > 0
+                ? boostPayload.delay_time
+                : 0;
+            setBoostType(nextType);
+            setDelaySeconds(nextDelaySeconds);
+            if (nextType === 'article' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                setBoostArticle(formatArticle(boostPayload.boost_data));
+                setBoostCarePath(null);
+                setBoostCustom(null);
+            }
+            else if (nextType === 'carepath' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                const raw = boostPayload.boost_data;
+                const title = getSpotlightTitleRef.current(raw) || '';
+                const image = getSpotlightImageRef.current(raw) || '';
+                const permalink = ((_a = getSpotlightPermalinkRef.current) === null || _a === void 0 ? void 0 : _a.call(getSpotlightPermalinkRef, raw)) ||
+                    String((raw === null || raw === void 0 ? void 0 : raw.permalink) || '');
+                const content = ((_b = getSpotlightContentRef.current) === null || _b === void 0 ? void 0 : _b.call(getSpotlightContentRef, raw)) || String((raw === null || raw === void 0 ? void 0 : raw.content) || '');
+                setBoostCarePath({ permalink, title, image, content });
+                setBoostArticle(null);
+                setBoostCustom(null);
+            }
+            else if (nextType === 'custom' && (boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) {
+                const raw = boostPayload.boost_data;
+                setBoostCustom({
+                    link: raw.link || '',
+                    title: raw.title || '',
+                    description: raw.description || '',
+                    image: typeof raw.image === 'string' && raw.image ? raw.image : null,
+                });
+                setBoostArticle(null);
+                setBoostCarePath(null);
+            }
+            else {
+                setBoostArticle(null);
+                setBoostCarePath(null);
+                setBoostCustom(null);
+            }
+            const hasPayloadBoost = (nextType === 'article' && !!(boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) ||
+                (nextType === 'carepath' && !!(boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data)) ||
+                (nextType === 'custom' &&
+                    !!((_c = boostPayload === null || boostPayload === void 0 ? void 0 : boostPayload.boost_data) === null || _c === void 0 ? void 0 : _c.link));
+            if (!hasPayloadBoost) {
+                pendingOpenDeadlineRef.current = null;
+            }
+            setRequestState('ready');
+        }))();
+        return () => {
+            isActive = false;
+        };
+    }, [
+        source,
+        articleId,
+        primaryCategoryId,
+        postId,
+        community,
+        close,
+        sessionPopupShown,
+    ]);
+    useEffect(() => {
+        const hasBoostData = (boostType === 'article' && !!boostArticle) ||
+            (boostType === 'carepath' && !!boostCarePath) ||
+            (boostType === 'custom' && !!(boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link));
+        if (!hasSourceId ||
+            sessionPopupShown ||
+            requestState !== 'ready' ||
+            !hasBoostData) {
+            return;
+        }
+        if (pendingOpenDeadlineRef.current === null) {
+            pendingOpenDeadlineRef.current = Date.now() + delaySeconds * 1000;
+        }
+        const remainingMs = Math.max(0, pendingOpenDeadlineRef.current - Date.now());
+        const timer = window.setTimeout(() => {
+            pendingOpenDeadlineRef.current = null;
+            setSessionPopupShown(true);
+            open();
+        }, remainingMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [
+        articleId,
+        sessionPopupShown,
+        requestState,
+        boostType,
+        boostArticle,
+        boostCarePath,
+        boostCustom,
+        delaySeconds,
+        open,
+    ]);
+    const targetUrl = boostType === 'article'
+        ? boostArticle === null || boostArticle === void 0 ? void 0 : boostArticle.permalink
+        : boostType === 'carepath'
+            ? boostCarePath === null || boostCarePath === void 0 ? void 0 : boostCarePath.permalink
+            : boostType === 'custom'
+                ? boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link
+                : null;
+    const hasBoostData = (boostType === 'article' && !!boostArticle) ||
+        (boostType === 'carepath' && !!boostCarePath) ||
+        (boostType === 'custom' && !!(boostCustom === null || boostCustom === void 0 ? void 0 : boostCustom.link));
+    if (!hasSourceId || requestState !== 'ready' || !hasBoostData || !targetUrl) {
+        return null;
+    }
+    const trimmedBase = basePath.replace(/\/$/, '');
+    const assetImageBasePath = trimmedBase ? `${trimmedBase}/images` : '/images';
+    const handleDismiss = () => {
+        // Drag-close/overlay-close can emit a trailing click; ignore it once.
+        suppressNextOpenRef.current = true;
+        pendingOpenDeadlineRef.current = null;
+        setSessionPopupShown(true);
+        close();
+    };
+    const handleOpenBoostLink = () => {
+        if (suppressNextOpenRef.current) {
+            suppressNextOpenRef.current = false;
+            return;
+        }
+        pendingOpenDeadlineRef.current = null;
+        setSessionPopupShown(true);
+        const url = targetUrl.startsWith('http')
+            ? targetUrl
+            : `${window.location.origin}${basePath}${targetUrl.startsWith('/') ? targetUrl : `/${targetUrl}`}`;
+        window.open(url, '_blank', 'noopener,noreferrer');
+        close();
+    };
+    const contentEle = (React__default.createElement(Box, { sx: { position: 'relative' } },
+        React__default.createElement(Stack, { "data-boost-type": boostType, sx: (theme) => ({
+                gap: 12,
+                [theme.fn.largerThan('sm')]: { gap: 16 },
+                '.article-card': {
+                    '&[data-size=md][data-direction=horizontal]': {
+                        padding: 0,
+                        '.footer': {
+                            marginTop: 0,
+                            '& > div': {
+                                marginTop: 16,
+                            },
+                        },
+                    },
+                    '&[data-direction=vertical] .banner': {
+                        height: 192,
+                    },
+                    '.author .poster': {
+                        p: {
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            'span:not(.name)': {
+                                color: '#8c8c8c',
+                            },
+                        },
+                        a: {
+                            color: '#8c8c8c',
+                            'span:not(:has(span))': {
+                                color: '#000 !important',
+                            },
+                        },
+                    },
+                    'h3 + a': {
+                        display: 'none',
+                    },
+                },
+            }) },
+            boostType === 'article' && boostArticle ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(PopupBoostArticleCard, { article: boostArticle, isMobile: isMobile, assetImageBase: assetImageBasePath }),
+                React__default.createElement(Text, { size: "p3", as: "div", dangerouslySetInnerHTML: {
+                        __html: boostArticle.excerpt || boostArticle.postContent || '',
+                    }, lineClamp: 8 }))) : null,
+            boostType === 'carepath' && boostCarePath ? (React__default.createElement(Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                React__default.createElement(Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__default.createElement("img", { src: boostCarePath.image || '', alt: boostCarePath.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } })),
+                React__default.createElement(Stack, { spacing: 3 },
+                    React__default.createElement(Box, { sx: {
+                            textTransform: 'uppercase',
+                            fontWeight: 'normal',
+                            fontSize: '12px',
+                            lineHeight: '15px',
+                        } }, domainLocales[locale]),
+                    React__default.createElement(Box, { sx: {
+                            fontSize: '16px',
+                            lineHeight: '19px',
+                            fontWeight: 500,
+                        } }, boostCarePath.title)),
+                !!boostCarePath.content && (React__default.createElement(Text, { size: "p3", lineClamp: 2, sx: {
+                        fontSize: '14px',
+                        lineHeight: '19px',
+                        color: '#65676B',
+                    }, dangerouslySetInnerHTML: {
+                        __html: boostCarePath.content,
+                    } })))) : null,
+            boostType === 'custom' && boostCustom ? (React__default.createElement(Box, { sx: {
+                    display: 'grid',
+                    gap: 12,
+                } },
+                boostCustom.image ? (React__default.createElement(Box, { sx: (theme) => ({
+                        marginLeft: -16,
+                        marginRight: -16,
+                        [theme.fn.largerThan('sm')]: { marginTop: -16 },
+                        width: 'calc(100% + 32px)',
+                        aspectRatio: '16 / 8',
+                        overflow: 'hidden',
+                    }) },
+                    React__default.createElement("img", { src: boostCustom.image, alt: boostCustom.title, loading: "lazy", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                        } }))) : null,
+                React__default.createElement(Stack, { spacing: 5 },
+                    React__default.createElement(Stack, { spacing: 3 },
+                        React__default.createElement(Box, { sx: {
+                                textTransform: 'uppercase',
+                                fontWeight: 'normal',
+                                fontSize: '12px',
+                                lineHeight: '15px',
+                                color: '#65676B',
+                            } }, domainLocales[locale]),
+                        React__default.createElement(Box, { sx: {
+                                fontSize: '16px',
+                                lineHeight: '19px',
+                                fontWeight: 500,
+                            } }, boostCustom.title)),
+                    !!boostCustom.description && (React__default.createElement(Text, { size: "p3", lineClamp: 2, sx: {
+                            fontSize: '14px',
+                            lineHeight: '19px',
+                            color: '#65676B',
+                        }, dangerouslySetInnerHTML: {
+                            __html: boostCustom.description,
+                        } }))))) : null,
+            React__default.createElement(Button$1, { variant: "primary", fullWidth: true }, viewDetailText)),
+        React__default.createElement(Box, { role: "button", tabIndex: 0, "aria-label": viewDetailText, onClick: handleOpenBoostLink, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    handleOpenBoostLink();
+                }
+            }, sx: {
+                position: 'absolute',
+                inset: 0,
+                zIndex: 2,
+                cursor: 'pointer',
+                backgroundColor: 'transparent',
+            } })));
+    return isMobile ? (React__default.createElement(DrawerBottom, { isMobile: true, isOpen: opened, onClose: handleDismiss },
+        React__default.createElement(Stack, { spacing: 16, sx: { padding: 16, paddingTop: 0 } },
+            React__default.createElement(Text, { size: "s2" }, modalHeading),
+            contentEle))) : (React__default.createElement(Modal, { title: React__default.createElement(Text, { size: "s2" }, modalHeading), size: 568, opened: opened, onClose: handleDismiss, zIndex: 500, styles: {
+            body: {
+                '&:not(:only-child)': {
+                    paddingTop: 16,
+                },
+            },
+        } }, contentEle));
+}
+
 const StyledFixedAdBlock = styled.div `
   position: fixed;
   z-index: 48;
@@ -4784,33 +5361,60 @@ const HPVScreener = ({ onClick, className, style, image, as = 'span', }) => {
 const StyledTwoItemHorizontalContainer = styled.div `
   display: grid;
   grid-template-columns: 1fr 2px 1fr;
-  column-gap: ${rem(16)};
+  column-gap: ${rem(10)};
+
+  ${MediaQueries.mbUp} {
+    column-gap: ${rem(16)};
+  }
 `;
 const StyledVerticalContainer = styled.div `
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  row-gap: ${rem(24)};
+  column-gap: ${rem(10)};
+  row-gap: ${rem(12)};
 
   .span-2 {
     grid-column: 1 / span 2;
   }
+
+  ${MediaQueries.mbUp} {
+    column-gap: ${rem(16)};
+    row-gap: ${rem(18)};
+  }
 `;
 const StyledHorizontalContainer = styled.div `
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: ${rem(10)};
+
+  ${MediaQueries.mbUp} {
+    gap: ${rem(16)};
+  }
 `;
 const StyledVerticalContent = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${rem(2)};
   align-items: ${({ align }) => align};
+  max-height: ${rem(40)};
+
+  ${MediaQueries.mbUp} {
+    gap: ${rem(2)};
+    max-height: ${rem(46)};
+  }
 `;
 const StyledTitle$1 = styled.div `
-  font-size: ${rem(15)};
-  font-weight: 600;
   color: #111111;
+  font-weight: 600;
+
+  font-size: ${rem(15)};
   line-height: ${rem(24)};
+  letter-spacing: -0.3px;
+
+  ${MediaQueries.mbUp} {
+    font-size: ${rem(17)};
+    line-height: ${rem(24)};
+    letter-spacing: -0.4px;
+  }
 `;
 const StyledDescription$1 = styled.div `
   color: ${theme.colors.gray700};
@@ -5318,6 +5922,10 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
         children));
 }
 
+const HERO_IMAGE_TO_TOP_CONTENT = 251;
+const OVERLAP_CONTENT_RADIUS = 22;
+const HERO_IMAGE_HEIGHT = OVERLAP_CONTENT_RADIUS + HERO_IMAGE_TO_TOP_CONTENT;
+
 // import CalendarDayIcon from '@/public/svg/calendar-days.svg'
 // import UsersIcon from '@/public/svg/users.svg'
 styled(ImageWrap) `
@@ -5366,12 +5974,25 @@ styled.div `
   }
 `;
 const GeneralInfoContainer = styled.div `
+  background-color: #fff;
+
   ${MediaQueries.mbUp} {
     display: flex;
-    gap: 1.5rem;
+    gap: 0;
+    justify-content: space-between;
     border-radius: 0.75rem;
-    padding: 1.5rem;
+    padding: ${rem(24)};
     overflow: hidden;
+
+    & > div:first-child {
+      width: 40%;
+      max-width: 432px;
+    }
+
+    & > div:last-child {
+      width: 51%;
+      max-width: 550px;
+    }
   }
 
   #product-image-section {
@@ -5379,11 +6000,10 @@ const GeneralInfoContainer = styled.div `
       width: 336px;
     }
   }
-  background-color: #fff;
 `;
 const ProductImage = styled(ImageWrapV2) `
   ${MediaQueries.mbUp} {
-    width: 336px;
+    width: 432px;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 0.5rem;
@@ -5395,7 +6015,8 @@ const ProductImage = styled(ImageWrapV2) `
   aspect-ratio: 375/190;
 `;
 const ProductContent = styled.div `
-  padding: 1.5rem 1rem;
+  padding: 1rem 1rem 1.5rem;
+
   ${MediaQueries.mbUp} {
     padding: 0;
     flex: 1;
@@ -5409,7 +6030,13 @@ const ProductContent = styled.div `
   .product-info {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 9px;
+  }
+
+  ${MediaQueries.mbUp} {
+    .product-info {
+      gap: 8px;
+    }
   }
 `;
 const ImageCarouselContainer = styled.div `
@@ -5448,14 +6075,14 @@ const StyledImageCarousel = styled(Carousel) `
     }
 
     &[data-inactive] {
-      opacity: 0.5;
+      opacity: 0;
       cursor: default;
     }
   }
 
   .mantine-Carousel-indicators {
     gap: 0.375rem;
-    bottom: 0.5rem;
+    bottom: ${({ isCarouselParallax }) => isCarouselParallax ? '38%' : '0.5rem'};
   }
 
   .mantine-Carousel-indicator {
@@ -5498,38 +6125,113 @@ const CarouselImageItem = styled(ImageWrapV2) `
   height: 100%;
   object-fit: cover;
   object-position: center;
+`;
+const FixedHeroSection = styled.div `
+  --scrollIndex: ${({ scrollIndex }) => `${scrollIndex}px`};
+  --heroImageHeight: ${HERO_IMAGE_HEIGHT}px;
+  --heroImageRatio: calc(375px / var(--heroImageHeight));
+
+  ${MediaQueries.mbDown} {
+    position: fixed;
+    top: var(--header-height, ${DEFAULT_HEADER_HEIGHT_MOBILE}px);
+    left: 0;
+    right: 0;
+    z-index: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    width: 100vw;
+    height: calc(100vw / var(--heroImageRatio) - var(--scrollIndex, 0px));
+
+    & > div {
+      width: 100vw;
+      height: var(--heroImageHeight);
+    }
+  }
+`;
+const FixedHeroSpacer = styled.div `
+  ${MediaQueries.mbDown} {
+    width: 100%;
+    aspect-ratio: 375 / ${HERO_IMAGE_HEIGHT};
+  }
+`;
+const ContentOverlayWrapper = styled.div `
+  position: relative;
+  z-index: 2;
+  background-color: #fff;
+`;
+const ContentOverlayWrapperParallax = styled.div `
+  position: relative;
+  z-index: 2;
+  background-color: #fff;
+  border-radius: 1.375rem 1.375rem 0 0;
+  margin-top: calc(-1 * ${OVERLAP_CONTENT_RADIUS}px);
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
 `;
 
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile: isMobileProp = false, imageCarousel = [], carouselSlotProps, onCarouselImageClick, }) {
+function FixedParallaxHeroSection({ children }) {
+    const heroSectionRef = useRef(null);
+    const [scrollIndex, setScrollIndex] = useState(0);
+    useEffect(() => {
+        const el = heroSectionRef.current;
+        if (!el)
+            return;
+        const checkHasReachedTop = () => {
+            setScrollIndex(window.scrollY);
+        };
+        checkHasReachedTop();
+        window.addEventListener('scroll', checkHasReachedTop, { passive: true });
+        return () => window.removeEventListener('scroll', checkHasReachedTop);
+    }, []);
+    return (React__default.createElement(FixedHeroSection, { ref: heroSectionRef, "data-section": "FixedParallaxHeroSection_FixedHeroSection", scrollIndex: scrollIndex },
+        React__default.createElement("div", { "data-section": "FixedHeroSection_Content" }, children)));
+}
+function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile: isMobileProp = false, imageCarousel = [], carouselSlotProps, isCarouselParallax = false, onCarouselImageClick, }) {
     const { isMobile: isMobileFromHook } = useScreenSize();
+    const contentRef = useRef(null);
     // Use isMobile prop first, fallback to breakpoint detection (secondary priority)
     const isMobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileFromHook;
     const showCarousel = imageCarousel.length > 1;
     const showCarouselControls = imageCarousel.length > 4 && !isMobile;
     const showCarouselIndicators = imageCarousel.length > 1 && isMobile;
     const { imageCarousel: imageCarouselSlotProps, slide: carouselSlideSlotProps, imageItemWrapper: carouselImageItemWrapperSlotProps, imageItem: carouselImageItemSlotProps, } = carouselSlotProps !== null && carouselSlotProps !== void 0 ? carouselSlotProps : {};
+    const ContentWrapper = isMobile
+        ? isCarouselParallax
+            ? ContentOverlayWrapperParallax
+            : ContentOverlayWrapper
+        : 'div';
+    const carouselItemWrapperStyle = isCarouselParallax
+        ? {
+            aspectRatio: `375 / ${HERO_IMAGE_HEIGHT}`,
+        }
+        : {};
+    const heroContent = imagesSelect ? (imagesSelect) : isMobile ? (React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 1, align: "start", withControls: false, withIndicators: showCarouselIndicators, dragFree: false, slideSize: "100%", slideGap: 0, draggable: showCarouselIndicators, isCarouselParallax: isCarouselParallax }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+        React__default.createElement(CarouselImageItemWrapperMobile, { style: carouselItemWrapperStyle, onClick: () => onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index) },
+            React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
+                (typeof generalInfo.name === 'string'
+                    ? generalInfo.name
+                    : 'product') }, bannerProps)),
+        showCarousel && (React__default.createElement(ImageCarouselContainer, null,
+            React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 4, align: "start", withControls: showCarouselControls, withIndicators: false, dragFree: true, controlSize: 24, slideSize: 76, slideGap: 10 }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+                React__default.createElement(CarouselImageItemWrapper, Object.assign({}, carouselImageItemWrapperSlotProps, { onClick: (event) => {
+                        var _a;
+                        (_a = carouselImageItemWrapperSlotProps === null || carouselImageItemWrapperSlotProps === void 0 ? void 0 : carouselImageItemWrapperSlotProps.onClick) === null || _a === void 0 ? void 0 : _a.call(carouselImageItemWrapperSlotProps, event);
+                        onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index);
+                    } }),
+                    React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))))));
     return (React__default.createElement(GeneralInfoContainer, { className: className },
-        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(React__default.Fragment, null, isMobile ? (React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 1, align: "start", withControls: false, withIndicators: showCarouselIndicators, dragFree: false, slideSize: "100%", slideGap: 0, draggable: showCarouselIndicators }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
-            React__default.createElement(CarouselImageItemWrapperMobile, { onClick: () => onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index) },
-                React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
-                    (typeof generalInfo.name === 'string'
-                        ? generalInfo.name
-                        : 'product') }, bannerProps)),
-            showCarousel && (React__default.createElement(ImageCarouselContainer, null,
-                React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 4, align: "start", withControls: showCarouselControls, withIndicators: false, dragFree: true, controlSize: 24, slideSize: 76, slideGap: 10 }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
-                    React__default.createElement(CarouselImageItemWrapper, Object.assign({}, carouselImageItemWrapperSlotProps, { onClick: (event) => {
-                            var _a;
-                            (_a = carouselImageItemWrapperSlotProps === null || carouselImageItemWrapperSlotProps === void 0 ? void 0 : carouselImageItemWrapperSlotProps.onClick) === null || _a === void 0 ? void 0 : _a.call(carouselImageItemWrapperSlotProps, event);
-                            onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index);
-                        } }),
-                        React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))))))))),
-        React__default.createElement(ProductContent, { className: contentClassName },
-            React__default.createElement("div", { className: "product-info" },
-                typeof generalInfo.name === 'string' ? (React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :
-                generalInfo.middleContent,
-                generalInfo.description && (React__default.createElement(Text, { size: isMobile ? 'p3' : 'p1', color: "gray700" }, generalInfo.description))),
-            children)));
+        isCarouselParallax ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(FixedParallaxHeroSection, null, heroContent),
+            React__default.createElement(FixedHeroSpacer, { "data-section": "PseudoEl_FixedHeroSpacer" }))) : (React__default.createElement("div", { "data-section": "HeroContent" }, heroContent)),
+        React__default.createElement(ContentWrapper, { "data-section": "ProductDetail_ContentWrapper", ref: contentRef },
+            React__default.createElement(ProductContent, { className: contentClassName },
+                React__default.createElement("div", { className: "product-info" },
+                    typeof generalInfo.name === 'string' ? (React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :
+                    generalInfo.middleContent,
+                    generalInfo.description && (React__default.createElement(Text, { size: "body2", color: "gray700", "data-section": "ProductContent_Description" }, generalInfo.description))),
+                children))));
 }
 GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
@@ -5552,9 +6254,11 @@ const GalleryMain = styled.div `
   min-width: 0;
   height: calc(100% - 108px);
   width: 100%;
+
   ${MediaQueries.mbUp} {
     height: auto;
     max-height: calc(100dvh - 10dvh);
+    aspect-ratio: 716 / 720;
   }
 `;
 const GallerySidebar = styled.div `
@@ -5650,7 +6354,7 @@ const EmptyState = styled.div `
   min-height: 240px;
   text-align: center;
 `;
-const StyledModal = styled(Modal) `
+const StyledModal = styled(Modal$1) `
   .mantine-Modal-header {
     padding: 12px 16px;
     border-bottom: 1px solid #0000001a;
@@ -5727,7 +6431,7 @@ const StyledCarousel = styled(Carousel) `
     }
 
     &[data-inactive] {
-      opacity: 0.5;
+      opacity: 0;
       cursor: default;
     }
   }
@@ -5770,7 +6474,7 @@ function GalleryCarousel() {
     };
     return (React__default.createElement(StyledCarousel, { align: "center", slideSize: "100%", withControls: galleryImages.length > 1 && !isMobile, withIndicators: false, dragFree: false, slideGap: 0, draggable: galleryImages.length > 1 && isMobile, getEmblaApi: handleEmblaReady, onSlideChange: handleSlideChange, loop: false, height: "100%", controlSize: 32, initialSlide: initialSlide }, galleryImages.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, { key: `${imageUrl}-${index}` },
         React__default.createElement(LargeImageWrapper, null,
-            React__default.createElement(MainGalleryImage, { src: imageUrl, alt: `${altPrefix} - ${index + 1}`, backupSrc: backupSrc })))))));
+            React__default.createElement(MainGalleryImage, { "data-section": "MainGalleryImage_section", src: imageUrl, alt: `${altPrefix} - ${index + 1}`, backupSrc: backupSrc })))))));
 }
 
 function GalleryThumbnails({ isMobile }) {
@@ -5797,7 +6501,7 @@ function GalleryTitle({ isMobile }) {
         return null;
     }
     if (typeof generalInfo.name === 'string') {
-        return (React__default.createElement(Text, { size: "h5", fw: 600, color: "gray1000", as: "h2" }, generalInfo.name));
+        return (React__default.createElement(Text, { fw: 600, size: "h5New", color: "gray1000", as: "h2" }, generalInfo.name));
     }
     return React__default.createElement(React__default.Fragment, null, generalInfo.name);
 }
@@ -6127,4 +6831,4 @@ const formatSiteWideBanner = (sitewideBanner, type = 'home') => {
     };
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, StarHalf as E, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, StarUpgrade as J, List as L, ModalGallery as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, useList as n, QuickFilterWrapLine as o, CardListItem as p, useModalGalleryContext as q, ModalGalleryProvider as r, CertificateItem as s, RatingStars as t, useListContext as u, RatingStarsInput as v, MAX_RATING as w, AnsweredByDoctor as x, formatSiteWideBanner as y, StarFull as z };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, StarFull as E, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, StarHalf as J, StarUpgrade as K, List as L, ModalGallery as M, PopupBoostArticleCard as P, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, PopupBoostPageView as k, FixedBottomAdBlock as l, SummaryInfo as m, ListContext as n, useList as o, QuickFilterWrapLine as p, CardListItem as q, useModalGalleryContext as r, ModalGalleryProvider as s, CertificateItem as t, useListContext as u, RatingStars as v, RatingStarsInput as w, MAX_RATING as x, AnsweredByDoctor as y, formatSiteWideBanner as z };