@hhgtech/hhg-components 1.29.87 → 1.29.89

package/build/esm/{fixedBottomAdBlock-e5747eb3.js → fixedBottomAdBlock-2af1606f.js}

@@ -1,253 +1,43 @@
-import React__default, { memo, useMemo, useState, useCallback, useEffect, useImperativeHandle, useRef, Fragment, forwardRef } from 'react';
-import { Bookmark } from '@hhgtech/icons/other';
-import { C as CommonGAssets } from './index-e2a19de9.js';
-import { T as Text } from './index-22dbd9d2.js';
-import { H as Heading } from './index-7c6e33e0.js';
-import { theme } from './miscTheme.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-2813a841.js';
-import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef } from '@mantine/core';
-import innertext from 'innertext';
-import { u as useScreenSize, A as Anchor, a as Avatar, b as AspectRatio, R as Radio } from './index-691f32bb.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e0840efa.js';
+import React__default, { useState, useImperativeHandle, useRef, useEffect, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
+import { R as Radio } from './index-57da0f13.js';
+import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-02019218.js';
-import './index-f56ad865.js';
-import './useMantineLocale-7d4ef853.js';
-import './index-d72f98d1.js';
-import './translationsContext-f05845a3.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-9e220aaa.js';
+import './index-7decdf27.js';
+import { C as CommonGAssets } from './index-9f076f64.js';
+import './useMantineLocale-b29ca68b.js';
+import { T as Text } from './index-99551970.js';
+import './index-c4b04b5f.js';
+import { u as useScreenSize } from './index.styles-25454e9c.js';
+import './translationsContext-8afb0ce3.js';
 import 'string-format';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5ac430a2.js';
-import './other-8082eeb8.js';
-import { i as isInternalLink } from './index-0dd98ba5.js';
+import { M as MediaQueries } from './utils-8a1f05c9.js';
+import './other-08d0b30e.js';
+import { i as isInternalLink } from './index-84b3ef3d.js';
 import styled from '@emotion/styled';
-import { C as Checkbox, P as PureInput } from './index-1f077f71.js';
+import { theme } from './miscTheme.js';
+import { C as Checkbox, P as PureInput } from './index-72c269cf.js';
+import { L as Logo } from './index-949f771c.js';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-16ed17c9.js';
-import { keyframes } from '@emotion/react';
 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-cabe5b52.js';
+import { a as useOutsideClick } from './useOutsideClick-12815e56.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-bf7b2785.js';
-import { u as useTranslations } from './useTranslations-12762455.js';
-import { D as Dropdown } from './index-d1c6a5eb.js';
+import { B as Button } from './index-9c268a93.js';
+import { u as useTranslations } from './useTranslations-b66d9f2b.js';
+import { D as Dropdown } from './index-20192854.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-2e4a2f44.js';
-import { D as Drawer } from './index-4e0ef954.js';
+import { I as Input } from './index-d4dcfb68.js';
+import { D as Drawer } from './index-8b9c7b45.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-f781df87.js';
-
-var styles$1 = {"expertName":"PiqKaXk","anchor":"HgbW6-m","card":"_6lkfLYy","author":"j7c-onH","pointer":"wwI1--d"};
-
-const CardAuthor = ({ avatarImg, authorName, authorLink, uploadTime, size, }) => {
-    return (React__default.createElement("div", { className: styles$1.author },
-        React__default.createElement("div", { className: "author" },
-            React__default.createElement("div", { className: "avatar", "data-size": size }, avatarImg),
-            React__default.createElement("div", { className: "poster", "data-is-disabled-url": !!!authorLink },
-                React__default.createElement(Text, { size: size === 'lg' ? 'p3' : 'p4' },
-                    React__default.createElement("a", { href: authorLink },
-                        React__default.createElement("span", { className: "name" }, authorName),
-                        "\u2022",
-                        ' '),
-                    React__default.createElement("span", null, uploadTime))))));
-};
-
-const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }) => {
-    return (React__default.createElement("div", { className: styles$1.author },
-        React__default.createElement("div", { className: "author" },
-            React__default.createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
-            React__default.createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default.createElement("a", { href: link }, size === 'lg' ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name),
-                React__default.createElement(Text, { color: theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name))))) : (React__default.createElement("a", { href: link }, size === 'lg' ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Heading, { tag: "h6", className: "expert__name", color: theme.colors.gray600 }, name),
-                React__default.createElement(Text, { color: theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("h6", { color: theme.colors.gray600, className: `${styles$1.expertName} expert__name` }, name),
-                React__default.createElement(Text, { color: theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
-};
-
-const AffiliateIcon = memo(() => {
-    return (React__default.createElement("div", { className: "shoppable" },
-        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-            React__default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "#1B3250" }),
-            React__default.createElement("path", { d: "M16.6667 8.00033H15.3333C15.3333 6.16033 13.84 4.66699 12 4.66699C10.16 4.66699 8.66667 6.16033 8.66667 8.00033H7.33333C6.6 8.00033 6 8.60033 6 9.33366V17.3337C6 18.067 6.6 18.667 7.33333 18.667H16.6667C17.4 18.667 18 18.067 18 17.3337V9.33366C18 8.60033 17.4 8.00033 16.6667 8.00033ZM12 6.00033C13.1067 6.00033 14 6.89366 14 8.00033H10C10 6.89366 10.8933 6.00033 12 6.00033ZM12 12.667C10.4467 12.667 9.14 11.607 8.77333 10.167C8.66 9.74699 8.98667 9.33366 9.42 9.33366C9.73333 9.33366 9.98667 9.56033 10.0733 9.86699C10.3067 10.7137 11.08 11.3337 12 11.3337C12.92 11.3337 13.6933 10.7137 13.9267 9.86699C14.0133 9.56033 14.2667 9.33366 14.58 9.33366C15.0133 9.33366 15.3333 9.74699 15.2267 10.167C14.86 11.607 13.5533 12.667 12 12.667Z", fill: "white" }))));
-});
-
-const ArticleCard$1 = ({ articleLink, authorLink, authorName, avatarImg, banner, categoryLink, categoryName, className, dataEventActionForBanner, dataEventActionForBookmark, dataEventActionForCategory, dataEventActionForTitle, dataEventCategoryForBanner, dataEventCategoryForBookmark, dataEventCategoryForCategory, dataEventCategoryForTitle, dataEventLabelForBanner, dataEventLabelForBookmark, dataEventLabelForCategory, dataEventLabelForTitle, direction = 'horizontal', hasAffiliate, isBookmark = false, isBookmarkDisplayed = true, isMobile = true, onBookmark, onClickCategoryName, section = 'normal', size = 'md', specialty, style, styleBanner, styleLabel, styleTitle, text, title, type = 'author', uploadTime, articleLinkTarget, isPremium, headingAs, }) => {
-    const handleClick = (e) => {
-        e.stopPropagation();
-        onBookmark === null || onBookmark === void 0 ? void 0 : onBookmark();
-    };
-    const headingTag = size === 'lg' && type === 'expert'
-        ? 'h4'
-        : size === 'lg' && section === 'home'
-            ? isMobile
-                ? 'h4'
-                : 'h3'
-            : size === 'lg'
-                ? 'h4'
-                : 'h5';
-    const descriptionTag = size === 'lg' ? 'p3' : 'p4';
-    const categoryLabelTag = !isMobile && section === 'home' && size === 'lg' && type === 'author'
-        ? 'c1'
-        : 'c2';
-    return (React__default.createElement("article", { className: `${styles$1.card} ${className || ''}`, "data-size": size, style: style, "data-direction": direction, "data-is-expert": type === 'expert' || undefined },
-        React__default.createElement("div", { className: "banner", style: styleBanner },
-            React__default.createElement("a", { className: styles$1.anchor, "data-event-category": dataEventCategoryForBanner, "data-event-action": dataEventActionForBanner, "data-event-label": dataEventLabelForBanner, href: articleLink || '#', target: articleLinkTarget }, banner),
-            isPremium && (React__default.createElement("img", { loading: "lazy", className: "premium", src: CommonGAssets.getAssetPath('premium-crown.svg') })),
-            hasAffiliate && React__default.createElement(AffiliateIcon, null)),
-        React__default.createElement("div", { className: "content" },
-            React__default.createElement("div", { className: "inner-content" },
-                React__default.createElement(Text, { style: styleLabel, className: "label", size: categoryLabelTag, weight: "caption" },
-                    React__default.createElement("a", { className: styles$1.anchor, "data-event-category": dataEventCategoryForCategory, "data-event-action": dataEventActionForCategory, "data-event-label": dataEventLabelForCategory, href: categoryLink || '#', onClick: onClickCategoryName }, categoryName),
-                    isBookmarkDisplayed && (React__default.createElement("a", { className: "bookmark", onClick: handleClick }, !isBookmark ? (React__default.createElement(Bookmark, { size: 18, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark })) : (React__default.createElement(Bookmark, { size: 18, isActive: true, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark, activeColor: "#2ED69E" }))))),
-                React__default.createElement(Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
-                    React__default.createElement("a", { className: styles$1.anchor, "data-event-category": dataEventCategoryForTitle, "data-event-action": dataEventActionForTitle, "data-event-label": dataEventLabelForTitle, href: articleLink || '#', target: articleLinkTarget }, title)),
-                text && (React__default.createElement("a", { href: articleLink || '#', target: articleLinkTarget },
-                    React__default.createElement(Text, { size: descriptionTag, className: "text" }, text)))),
-            React__default.createElement("div", { className: "footer" }, type === 'author' ? (React__default.createElement(CardAuthor, { size: size, avatarImg: avatarImg, authorName: authorName, authorLink: authorLink, uploadTime: uploadTime, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark })) : (React__default.createElement(CardExpert, { size: size, isMobile: isMobile, avatarImg: avatarImg, specialty: specialty, name: authorName, link: authorLink, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark }))))));
-};
-
-const _Horizontal = (_a) => {
-    var _b, _c, _d;
-    var { article, author, authorAvatar, badge = '', hideDescription = false, isBookmarked = false, onBookmark, time, tracking } = _a, 
-    // size = 'lg',
-    rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking"]);
-    const { isMobile } = useScreenSize();
-    console.log({ article });
-    // const maw = useMemo(() => {
-    //   switch (size) {
-    //     case 'lg':
-    //       return 648
-    //     case 'md':
-    //       return 456
-    //     case 'sm':
-    //       return 264
-    //     default:
-    //       return 648
-    //   }
-    // }, [size])
-    return (React__default.createElement(Card, Object.assign({ padding: 0, radius: 0, 
-        // maw={maw}
-        sx: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 24,
-        } }, rest),
-        React__default.createElement(Card.Section, { w: "100%", h: "100%", miw: 264, m: 0, className: "pointer" },
-            React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
-                    article.featureImage, alt: article.postName, style: {
-                    width: '100%',
-                }, loading: "lazy" })),
-        React__default.createElement(Card.Section, null,
-            React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
-                React__default.createElement(Anchor, { href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
-                    React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
-                React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
-                    React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
-                    React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
-            React__default.createElement(Text, { size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold", className: "pointer" }, article.postTitle || article.postName || ''),
-            !hideDescription && (React__default.createElement(Text, { size: "p2", mb: 16, lineClamp: 3, className: "pointer" }, innertext(article.excerpt ||
-                article.description ||
-                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
-                ''))),
-            React__default.createElement(Flex, { gap: 12, align: 'center' },
-                React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
-                        offset: 5,
-                        size: 18,
-                        label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
-                    } }, "A"),
-                React__default.createElement(Text, { size: "n1", c: "gray.6" },
-                    author,
-                    " \u2022 ",
-                    time)))));
-};
-
-// MyComponent.styles.ts
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$1 = createStyles((_theme, {}) => ({
-    // add all styles as usual
-    root: {},
-    image: {},
-    title: {},
-    category: {},
-    description: {},
-    author: {},
-}));
-
-const RATIO = {
-    DEFAULT: 648 / 440,
-    NO_DESCRIPTION: 456 / 304,
-};
-const _Vertical = (_a) => {
-    var _b, _c, _d;
-    var { article, author, authorAvatar, badge = '', bannerImageWrapProps, hideDescription = false, isBookmarked = false, onBookmark, time, tracking, 
-    // size = 'lg',
-    classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
-    const { isMobile } = useScreenSize();
-    const { classes, cx } = useStyles$1(
-    // First argument of useStyles is styles params
-    {}, 
-    // Second argument is responsible for styles api integration
-    { name: 'ArticleCard', classNames, styles, unstyled });
-    const type = useMemo(() => {
-        if (hideDescription) {
-            return RATIO.NO_DESCRIPTION;
-        }
-        else {
-            return RATIO.DEFAULT;
-        }
-    }, [hideDescription]);
-    // const maw = useMemo(() => {
-    //   switch (size) {
-    //     case 'lg':
-    //       return 648
-    //     case 'md':
-    //       return 456
-    //     case 'sm':
-    //       return 264
-    //     default:
-    //       return 648
-    //   }
-    // }, [size])
-    return (React__default.createElement(Card, Object.assign({ className: cx(classes.root, className), padding: 'lg', radius: 0 }, rest),
-        React__default.createElement(Card.Section, { className: cx(classes.image, 'pointer') },
-            React__default.createElement(AspectRatio, Object.assign({ ratio: type }, bannerImageWrapProps),
-                React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
-                        article.featureImage, alt: article.postName, style: { objectFit: 'cover' } }))),
-        React__default.createElement(Card.Section, null,
-            React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
-                React__default.createElement(Anchor, { className: classes.category, href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
-                    React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
-                React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
-                    React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
-                    React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
-            React__default.createElement(Text, { className: cx(classes.title, 'pointer'), size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold" }, article.postTitle || article.postName || ''),
-            !hideDescription && (React__default.createElement(Text, { className: cx(classes.description, 'pointer'), size: "p2", mb: 16, lineClamp: 3 }, innertext(article.excerpt ||
-                article.description ||
-                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
-                ''))),
-            React__default.createElement(Flex, { className: classes.author, gap: 12, align: 'center' },
-                React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
-                        offset: 5,
-                        size: 18,
-                        label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
-                    } }, "A"),
-                React__default.createElement(Text, { size: "n1", c: "gray.6" },
-                    author,
-                    " \u2022 ",
-                    time)))));
-};
-
-const ArticleCard = (_a) => {
-    var { variant = 'vertical' } = _a, rest = __rest(_a, ["variant"]);
-    return variant === 'horizontal' ? (React__default.createElement(_Horizontal, Object.assign({}, rest))) : (React__default.createElement(_Vertical, Object.assign({}, rest)));
-};
+import { L as LOCALE } from './Locale-b86a7a92.js';
 
 const StyledCategoryCard = styled.a `
   display: flex;
@@ -395,249 +185,6 @@ const IconText = ({ size, iconPosition, className, children, icon: Icon, }) => {
         iconPosition === 'right' && Icon));
 };
 
-const StyledSlider = styled.div `
-  position: relative;
-  width: 100%;
-
-  & div[role='slider'] {
-    -webkit-text-size-adjust: none;
-    -webkit-user-select: none;
-    &:focus {
-      outline: none;
-    }
-  }
-`;
-const StyledStep = styled.div `
-  position: absolute;
-  top: 19px;
-  width: 24px;
-  height: 24px;
-  color: ${theme.colors.white};
-  border: 2px solid ${theme.colors.white};
-  border-radius: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${theme.colors.white};
-  color: ${theme.colors.gray300};
-  border: 1px solid ${theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    background-color: ${theme.colors.primaryBase};
-    color: ${theme.colors.white};
-    border: none;
-  }
-`;
-const StyledTrackContainer = styled.div `
-  display: flex;
-  width: 100%;
-  height: 36px;
-
-  &[data-track-type='detail'] {
-    margin-top: 0;
-  }
-
-  &[data-track-type='detail'][data-step-passed='true'] > div {
-    border: 1px solid ${theme.colors.primaryBase};
-    height: 0px;
-  }
-
-  &[data-track-type='detail'] > div {
-    border: 1px solid ${theme.colors.gray200};
-    height: 0px;
-  }
-`;
-const StyledTrack = styled.div `
-  width: 100%;
-  height: 5px;
-  align-self: center;
-  border-radius: 4px;
-  background-color: ${theme.colors.gray200};
-`;
-const StyledStepLabel = styled.div `
-  position: absolute;
-  top: 32px;
-  min-width: 100px;
-  text-align: center;
-  color: ${theme.colors.gray500};
-  font-size: ${theme.sizes.fsCaption2};
-  font-weight: ${theme.sizes.fwBold};
-
-  &[data-step-passed='true'] {
-    color: ${theme.colors.gray800};
-  }
-`;
-const StyledBreadcrumbContainer = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const StyledBreadcrumbWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  font-size: ${theme.sizes.fsCaption2};
-  font-weight: ${theme.sizes.fwBold};
-  color: ${theme.colors.gray500};
-  cursor: pointer;
-
-  & > svg {
-    height: 10px;
-    width: 10px;
-    margin: 0 14px;
-  }
-
-  & > svg > path {
-    stroke: ${theme.colors.gray500};
-  }
-
-  &[data-selected='true'] {
-    color: ${theme.colors.primaryBase};
-  }
-`;
-const StyledDetailStep = styled.div `
-  position: absolute;
-  left: 0;
-  top: 19px;
-  height: 24px;
-  cursor: pointer;
-
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-
-  padding: 8px;
-  background-color: ${theme.colors.white};
-`;
-const StyledDetailStepIndicator = styled.div `
-  min-width: 24px;
-  height: 24px;
-  border: 2px solid ${theme.colors.white};
-  border-radius: 50%;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${theme.colors.white};
-  color: ${theme.colors.gray300};
-  border: 1px solid ${theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    border: none;
-    background-color: ${theme.colors.primaryBase};
-    color: ${theme.colors.white};
-  }
-`;
-const StyledDetailStepIndicatorExternal = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > svg {
-    height: 20px;
-    width: 20px;
-    margin-right: 8px;
-
-    & > path {
-      stroke: ${theme.colors.gray500};
-    }
-  }
-`;
-const StyledDetailStepLabel = styled.div `
-  color: ${theme.colors.gray400};
-  font-size: ${theme.sizes.fsCaption2};
-  font-weight: ${theme.sizes.fwBold};
-  margin-right: 8px;
-  flex: 0 0 auto;
-
-  &[data-step-passed='true'] {
-    color: ${theme.colors.gray800};
-  }
-`;
-const StyledDetailStepDescription = styled.div `
-  position: absolute;
-  top: 32px;
-  font-weight: ${theme.sizes.fwRegular};
-  color: ${theme.colors.gray400};
-  padding-right: 16px;
-`;
-
-const ProgressBar = ({ type, numberOfStep, activeStep, labelPrefix, detailSteps, className, onChange, }) => {
-    const [trackLength, setTrackLength] = useState(0);
-    const Track = (_a) => {
-        var { trackClassName } = _a, props = __rest(_a, ["trackClassName"]);
-        return (React__default.createElement(StyledTrackContainer, Object.assign({}, props, { className: trackClassName }),
-            React__default.createElement(StyledTrack, null)));
-    };
-    // step track
-    const Steps = ({ trackLength, activeStep, labelPrefix = 'Step', onChange, }) => {
-        return (React__default.createElement(React__default.Fragment, null, Array.from({ length: numberOfStep }, (v, i) => i).map((_, step) => (React__default.createElement(StyledStep, { "data-is-active": step === activeStep, "data-label": step, style: { left: (step * trackLength) / (numberOfStep - 1) }, onClick: () => {
-                onChange && onChange(step);
-            }, key: step },
-            step + 1,
-            React__default.createElement(StyledStepLabel, { "data-step-passed": step <= activeStep }, labelPrefix + ' ' + (step + 1)))))));
-    };
-    const stepTrack = (React__default.createElement(StyledSlider, { className: className + ' progress-bar' },
-        React__default.createElement(Track, null),
-        React__default.createElement(Steps, { trackLength: trackLength, activeStep: activeStep, labelPrefix: labelPrefix, onChange: onChange })));
-    // breadcrumb
-    const breadcrumbIcon = (React__default.createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 5.5 9.5" },
-        React__default.createElement("title", null, 'chevron-right'),
-        React__default.createElement("path", { d: "M.75 8.75l4-4-4-4", fill: "none", 
-            // stroke="#000"
-            strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5 })));
-    const breadcrumb = (React__default.createElement(StyledBreadcrumbContainer, null, detailSteps &&
-        Array.from({ length: detailSteps.length }, (v, i) => i).map((_, step_index) => {
-            var _a;
-            return (React__default.createElement(StyledBreadcrumbWrapper, { key: step_index, "data-selected": step_index === activeStep, onClick: () => {
-                    onChange && onChange(step_index);
-                } }, (_a = detailSteps[step_index]) === null || _a === void 0 ? void 0 :
-                _a.text,
-                ' ',
-                step_index < detailSteps.length - 1 && breadcrumbIcon));
-        })));
-    // detail track
-    const DetailStepsGroup = ({ detailSteps, activeStep, onChange, }) => {
-        return (React__default.createElement(React__default.Fragment, null, Array.from({ length: detailSteps.length }, (v, i) => i).map((step, step_index) => (React__default.createElement(StyledDetailStep, { key: step_index, style: {
-                left: (100 / detailSteps.length) * step_index + '%',
-                width: 100 / detailSteps.length + '%',
-            }, onClick: () => {
-                onChange && onChange(step_index);
-            } },
-            detailSteps[step_index].icon ? (React__default.createElement(StyledDetailStepIndicatorExternal, { onClick: () => {
-                    onChange && onChange(step_index);
-                } }, detailSteps[step_index].icon)) : (React__default.createElement(StyledDetailStepIndicator, { "data-is-active": step_index === activeStep, "data-label": step, onClick: () => {
-                    onChange && onChange(step_index);
-                }, key: step_index }, step_index + 1)),
-            React__default.createElement(StyledDetailStepLabel, { "data-step-passed": step_index < activeStep + 1 },
-                detailSteps[step_index].text,
-                React__default.createElement(StyledDetailStepDescription, null, detailSteps[step_index].description)),
-            step_index < detailSteps.length - 1 && (React__default.createElement(Track, { "data-step-passed": step_index < activeStep, trackClassName: 'progress-track', "data-track-type": "detail" })))))));
-    };
-    const detailTrack = (React__default.createElement(StyledSlider, { className: className + ' progress-bar' },
-        React__default.createElement(DetailStepsGroup, { activeStep: activeStep, detailSteps: detailSteps, onChange: onChange })));
-    const resizeTrack = useCallback(throttle(() => {
-        const progressTrack = document.querySelector('.progress-bar');
-        progressTrack && setTrackLength(progressTrack.offsetWidth);
-    }, 1000), []);
-    useEffect(() => {
-        const track = document.querySelector('.progress-bar');
-        setTrackLength(track === null || track === void 0 ? void 0 : track.offsetWidth);
-        window.addEventListener('resize', resizeTrack, {
-            passive: true,
-        });
-        return () => {
-            window.removeEventListener('resize', resizeTrack);
-        };
-    }, []);
-    return ((type === 'step-track' && stepTrack) ||
-        (type === 'breadcrumb' && breadcrumb) ||
-        (type === 'detail-track' && detailTrack));
-};
-
 const RadioGroup = React__default.forwardRef(({ id, value, options, className, isDisabled, size: sizeProp = 'small', direction = 'vertical', onChange, dataEventCategory, dataEventAction, dataEventLabel, }, ref) => {
     const [check, setCheck] = useState(value);
     useImperativeHandle(ref, () => ({
@@ -1923,189 +1470,6 @@ const CookieAcceptConfirm = ({ className, policiesUrl, onAcceptClick, translatio
             React__default.createElement(StyledPoliciesButton, { href: policiesUrl }, translations.policiesButton))));
 };
 
-const slideInUp = keyframes `
-  from {
-    transform: translateY(100%);
-    visibility: visible;
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`;
-const slideOutDown = keyframes `
-  from {
-    transform: translate(0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate(0, 100%);
-  }
-`;
-const StyledMobileBottomNavigationIcon = styled.div `
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-items: center;
-  gap: 4px;
-
-  .mobile-navigation-label {
-    font-weight: 500;
-    font-size: 10px;
-    line-height: 16px;
-    color: ${theme.colors.gray600};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 60px;
-    text-align: center;
-    ${MediaQueries.mbDown} {
-      max-width: 60px;
-    }
-  }
-
-  .mobile-navigation-icon {
-    position: relative;
-    height: 24px;
-    &[data-no-label='true'] {
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 0px;
-      gap: 16px;
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  &[data-is-special='true'] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 4px 12px 4px 6px;
-    gap: 4px;
-
-    min-width: 152px;
-    height: 32px;
-    /* Neutral/Neutral-50 */
-    background: ${theme.colors.primary50};
-    border-radius: 20px;
-    flex-grow: 1;
-    .mobile-navigation-icon {
-      &[data-no-label='true'] {
-        width: 24px;
-        height: 24px;
-      }
-    }
-    .mobile-navigation-label {
-      max-width: max-content;
-      color: ${theme.colors.primaryBase};
-    }
-  }
-
-  &[data-is-active='true'] {
-    .mobile-navigation-label {
-      color: ${theme.colors.primaryBase};
-    }
-  }
-
-  &[data-is-disabled='true'] {
-    opacity: 0.2;
-  }
-`;
-const StyledMobileBottomNavigation = styled.div `
-  z-index: 100;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  max-height: 56px;
-  min-height: 56px;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: space-evenly;
-  background-color: ${theme.colors.white};
-  @supports (padding-bottom: env(safe-area-inset-bottom)) {
-    min-height: calc(56px + env(safe-area-inset-bottom));
-    max-height: calc(56px + env(safe-area-inset-bottom));
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-  a {
-    text-decoration: none;
-  }
-  &[data-is-collapsed='true'] {
-    animation: ${slideOutDown} 500ms ease-in-out forwards;
-  }
-
-  &[data-is-collapsed='false'] {
-    animation: ${slideInUp} 500ms ease-in-out forwards;
-  }
-  &[data-template='health-tool'] {
-    height: 44px;
-    max-height: 44px;
-    min-height: 44px;
-    justify-content: space-between;
-    & > div {
-      flex: 0;
-    }
-  }
-`;
-const StyledBadge = styled.span `
-  position: absolute;
-  left: 100%;
-  transform: translate(-10px, calc(-50% + 3px));
-  background-color: ${theme.colors.green800};
-  border-radius: 32px;
-  border: 2px solid ${theme.colors.white};
-  padding: 1px 4px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  aspect-ratio: 1;
-  &[data-no-label='true'] {
-    left: 0;
-    transform: translate(22px, -50%);
-  }
-`;
-styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 3px;
-  background-color: ${theme.colors.primaryBase};
-  transition: width 150ms linear;
-`;
-styled.div `
-  a {
-    text-decoration: none;
-  }
-`;
-
-const MobileBottomNavigationIcon = (_a) => {
-    var { badgeAmount, disabled = false, hasBadge = false, icon, isActive = false, isSpecial = false, label } = _a, props = __rest(_a, ["badgeAmount", "disabled", "hasBadge", "icon", "isActive", "isSpecial", "label"]);
-    return (React__default.createElement(StyledMobileBottomNavigationIcon, Object.assign({ "data-is-special": isSpecial, "data-is-active": isActive, "data-is-disabled": disabled }, props),
-        React__default.createElement("div", { className: "mobile-navigation-icon", "data-no-label": !Boolean(label) },
-            hasBadge && (React__default.createElement(StyledBadge, { "data-no-label": !Boolean(label) },
-                React__default.createElement(Text, { size: "s5", weight: "semiBold", color: isSpecial ? theme.colors.primaryBase : theme.colors.white }, badgeAmount))),
-            icon),
-        label && React__default.createElement("span", { className: "mobile-navigation-label" }, label)));
-};
-
-const MobileBottomNavigationWrapper = (_a) => {
-    var { children, isCollapsed = false, template = 'homepage' } = _a, rest = __rest(_a, ["children", "isCollapsed", "template"]);
-    return (React__default.createElement(StyledMobileBottomNavigation, Object.assign({ "data-is-collapsed": isCollapsed, "data-template": template }, rest), children));
-};
-const MobileBottomNavigation = MobileBottomNavigationWrapper;
-MobileBottomNavigation.Icon = MobileBottomNavigationIcon;
-
 const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, routerQuery: query, nextHead: Head, siteType, seoCustom, userId, forcedCanonicalUrl, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { totalPages, currentPage, SEOTitle = '', SEODescription = '', SEOImage, seoType, SEOImageWidth, SEOImageHeight, customMetaData = [], isIndexable = true, hasNoCanonical = false, } = SEOData;
@@ -3096,4 +2460,4 @@ const FixedBottomAdBlock = ({ className, adUnitPath, divId, isMobile, contentId,
             String(mountRandRef.current), pos: ['Sticky'], contentId: contentId, hideIfHasSubot: isMobile, customTargetings: customTargetings, adDefaultSize: isMobile ? [320, 50] : [728, 90], showCloseBtn: true, onCloseAd: () => setUserHideAd(true), refreshInterval: 60, locale: locale, isMarryBaby: isMarryBaby }))));
 };
 
-export { ArticleCard$1 as A, Breadcrumbs as B, CategoryCard as C, DoctorInfo as D, FloatButtonGroup as F, IconText as I, MobileBottomNavigation as M, ProgressBar as P, RadioGroup as R, ScrollList as S, Tabs as T, ArticleCard as a, CheckboxGroup as b, StatisticCard as c, index as d, CookieAcceptConfirm as e, MobileBottomNavigationIcon as f, SeoHead as g, DateRangePicker as h, index$1 as i, ShareContainer as j, ShareDrawer as k, AdBlock as l, FixedBottomAdBlock as m };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DoctorInfo as D, FloatButtonGroup as F, IconText as I, RadioGroup as R, ScrollList as S, Tabs as T, CheckboxGroup as a, StatisticCard as b, index as c, CookieAcceptConfirm as d, SeoHead as e, DateRangePicker as f, ShareContainer as g, ShareDrawer as h, index$1 as i, FixedBottomAdBlock as j };