@hhgtech/hhg-components 1.29.87 → 1.29.89

package/build/{fixedBottomAdBlock-4db856c1.js → fixedBottomAdBlock-605a8692.js}

@@ -1,53 +1,49 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-f3c387c0.js');
 var React = require('react');
-var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-ddd1ae54.js');
-var index$2 = require('./index-743255db.js');
-var index$3 = require('./index-ffc38f11.js');
-var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-d6f7eba3.js');
+var index$5 = require('./index-4bf6b5da.js');
 var core = require('@mantine/core');
-var innertext = require('innertext');
-var index$5 = require('./index-0450bf33.js');
 require('@mantine/dates');
-var index$9 = require('./index-169bae02.js');
-require('./index-538200cd.js');
-require('./useMantineLocale-8df90961.js');
-require('./index-b64c981f.js');
-require('./translationsContext-1fe0412c.js');
+var index$7 = require('./index-648aac83.js');
+require('./index-d471ff2d.js');
+var index$9 = require('./index-1a6a94cd.js');
+require('./useMantineLocale-cc272195.js');
+var index$3 = require('./index-6b95442c.js');
+require('./index-549b9e8c.js');
+var index_styles = require('./index.styles-9031f6d6.js');
+require('./translationsContext-cd046df4.js');
 require('string-format');
 require('@mantine/hooks');
-var utils = require('./utils-03c7b063.js');
-require('./other-fcf0cbba.js');
-var index$6 = require('./index-34ca22f2.js');
+var utils = require('./utils-ae9740c0.js');
+require('./other-eedaf6ca.js');
+var index$2 = require('./index-6b7b4292.js');
 var styled = require('@emotion/styled');
-var index$7 = require('./index-a5526d77.js');
+var miscTheme = require('./miscTheme.js');
+var index$4 = require('./index-6b9e8dda.js');
+var index$6 = require('./index-526cee72.js');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-4c15723a.js');
-var react = require('@emotion/react');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
 var dateFns = require('date-fns');
-var useOutsideClick = require('./useOutsideClick-dcf05d21.js');
+var useOutsideClick = require('./useOutsideClick-f18dfe3f.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-418220e9.js');
-var useTranslations = require('./useTranslations-6363932f.js');
-var index$b = require('./index-d0ba8956.js');
+var index$8 = require('./index-aad249ab.js');
+var useTranslations = require('./useTranslations-8a9fa84d.js');
+var index$a = require('./index-ce2d2850.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$d = require('./index-a91bff81.js');
-var index$c = require('./index-0236dd90.js');
+var index$c = require('./index-0afde39e.js');
+var index$b = require('./index-86ecfc48.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-126bf6bd.js');
+var Locale = require('./Locale-07aceee9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var innertext__default = /*#__PURE__*/_interopDefault(innertext);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var parse__default = /*#__PURE__*/_interopDefault(parse);
@@ -56,213 +52,6 @@ var id__default = /*#__PURE__*/_interopDefault(id);
 var vi__default = /*#__PURE__*/_interopDefault(vi);
 var zhTW__default = /*#__PURE__*/_interopDefault(zhTW);
 
-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["default"].createElement("div", { className: styles$1.author },
-        React__default["default"].createElement("div", { className: "author" },
-            React__default["default"].createElement("div", { className: "avatar", "data-size": size }, avatarImg),
-            React__default["default"].createElement("div", { className: "poster", "data-is-disabled-url": !!!authorLink },
-                React__default["default"].createElement(index$2.Text, { size: size === 'lg' ? 'p3' : 'p4' },
-                    React__default["default"].createElement("a", { href: authorLink },
-                        React__default["default"].createElement("span", { className: "name" }, authorName),
-                        "\u2022",
-                        ' '),
-                    React__default["default"].createElement("span", null, uploadTime))))));
-};
-
-const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }) => {
-    return (React__default["default"].createElement("div", { className: styles$1.author },
-        React__default["default"].createElement("div", { className: "author" },
-            React__default["default"].createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
-            React__default["default"].createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
-                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$3.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
-                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("h6", { color: miscTheme.theme.colors.gray600, className: `${styles$1.expertName} expert__name` }, name),
-                React__default["default"].createElement(index$2.Text, { color: miscTheme.theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
-};
-
-const AffiliateIcon = React.memo(() => {
-    return (React__default["default"].createElement("div", { className: "shoppable" },
-        React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-            React__default["default"].createElement("rect", { width: "24", height: "24", rx: "12", fill: "#1B3250" }),
-            React__default["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["default"].createElement("article", { className: `${styles$1.card} ${className || ''}`, "data-size": size, style: style, "data-direction": direction, "data-is-expert": type === 'expert' || undefined },
-        React__default["default"].createElement("div", { className: "banner", style: styleBanner },
-            React__default["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["default"].createElement("img", { loading: "lazy", className: "premium", src: index$4.CommonGAssets.getAssetPath('premium-crown.svg') })),
-            hasAffiliate && React__default["default"].createElement(AffiliateIcon, null)),
-        React__default["default"].createElement("div", { className: "content" },
-            React__default["default"].createElement("div", { className: "inner-content" },
-                React__default["default"].createElement(index$2.Text, { style: styleLabel, className: "label", size: categoryLabelTag, weight: "caption" },
-                    React__default["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["default"].createElement("a", { className: "bookmark", onClick: handleClick }, !isBookmark ? (React__default["default"].createElement(other.Bookmark, { size: 18, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark })) : (React__default["default"].createElement(other.Bookmark, { size: 18, isActive: true, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark, activeColor: "#2ED69E" }))))),
-                React__default["default"].createElement(index$3.Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
-                    React__default["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["default"].createElement("a", { href: articleLink || '#', target: articleLinkTarget },
-                    React__default["default"].createElement(index$2.Text, { size: descriptionTag, className: "text" }, text)))),
-            React__default["default"].createElement("div", { className: "footer" }, type === 'author' ? (React__default["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["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 = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking"]);
-    const { isMobile } = index$5.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["default"].createElement(core.Card, Object.assign({ padding: 0, radius: 0, 
-        // maw={maw}
-        sx: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 24,
-        } }, rest),
-        React__default["default"].createElement(core.Card.Section, { w: "100%", h: "100%", miw: 264, m: 0, className: "pointer" },
-            React__default["default"].createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
-                    article.featureImage, alt: article.postName, style: {
-                    width: '100%',
-                }, loading: "lazy" })),
-        React__default["default"].createElement(core.Card.Section, null,
-            React__default["default"].createElement(core.Group, { position: "apart", mt: 16, mb: 4 },
-                React__default["default"].createElement(index$5.Anchor, { href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
-                    React__default["default"].createElement(index$2.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["default"].createElement(core.Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default["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["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["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["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["default"].createElement(index$2.Text, { size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold", className: "pointer" }, article.postTitle || article.postName || ''),
-            !hideDescription && (React__default["default"].createElement(index$2.Text, { size: "p2", mb: 16, lineClamp: 3, className: "pointer" }, innertext__default["default"](article.excerpt ||
-                article.description ||
-                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
-                ''))),
-            React__default["default"].createElement(core.Flex, { gap: 12, align: 'center' },
-                React__default["default"].createElement(index$5.Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
-                        offset: 5,
-                        size: 18,
-                        label: React__default["default"].createElement("img", { loading: "lazy", src: badge, alt: "" }),
-                    } }, "A"),
-                React__default["default"].createElement(index$2.Text, { size: "n1", c: "gray.6" },
-                    author,
-                    " \u2022 ",
-                    time)))));
-};
-
-// MyComponent.styles.ts
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-var useStyles$1 = core.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 = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
-    const { isMobile } = index$5.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 = React.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["default"].createElement(core.Card, Object.assign({ className: cx(classes.root, className), padding: 'lg', radius: 0 }, rest),
-        React__default["default"].createElement(core.Card.Section, { className: cx(classes.image, 'pointer') },
-            React__default["default"].createElement(index$5.AspectRatio, Object.assign({ ratio: type }, bannerImageWrapProps),
-                React__default["default"].createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
-                        article.featureImage, alt: article.postName, style: { objectFit: 'cover' } }))),
-        React__default["default"].createElement(core.Card.Section, null,
-            React__default["default"].createElement(core.Group, { position: "apart", mt: 16, mb: 4 },
-                React__default["default"].createElement(index$5.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["default"].createElement(index$2.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["default"].createElement(core.Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default["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["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["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["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["default"].createElement(index$2.Text, { className: cx(classes.title, 'pointer'), size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold" }, article.postTitle || article.postName || ''),
-            !hideDescription && (React__default["default"].createElement(index$2.Text, { className: cx(classes.description, 'pointer'), size: "p2", mb: 16, lineClamp: 3 }, innertext__default["default"](article.excerpt ||
-                article.description ||
-                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
-                ''))),
-            React__default["default"].createElement(core.Flex, { className: classes.author, gap: 12, align: 'center' },
-                React__default["default"].createElement(index$5.Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
-                        offset: 5,
-                        size: 18,
-                        label: React__default["default"].createElement("img", { loading: "lazy", src: badge, alt: "" }),
-                    } }, "A"),
-                React__default["default"].createElement(index$2.Text, { size: "n1", c: "gray.6" },
-                    author,
-                    " \u2022 ",
-                    time)))));
-};
-
-const ArticleCard = (_a) => {
-    var { variant = 'vertical' } = _a, rest = tslib_es6.__rest(_a, ["variant"]);
-    return variant === 'horizontal' ? (React__default["default"].createElement(_Horizontal, Object.assign({}, rest))) : (React__default["default"].createElement(_Vertical, Object.assign({}, rest)));
-};
-
 const StyledCategoryCard = styled__default["default"].a `
   display: flex;
   height: 125px;
@@ -303,7 +92,7 @@ const CategoryCard = (_a) => {
     var { category, imgBanner, label, className, style, href = '', dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = tslib_es6.__rest(_a, ["category", "imgBanner", "label", "className", "style", "href", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
     const url = (category === null || category === void 0 ? void 0 : category.customizedUrl) || (category === null || category === void 0 ? void 0 : category.permalink) || href || '';
     return (React__default["default"].createElement(StyledCategoryCard, Object.assign({ "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, className: className, style: style, href: url }, ((category === null || category === void 0 ? void 0 : category.customizedUrl) &&
-        !index$6.isInternalLink(category.customizedUrl) && {
+        !index$2.isInternalLink(category.customizedUrl) && {
         target: '_blank',
     }), { onClick: (e) => {
             if (url === '') {
@@ -312,7 +101,7 @@ const CategoryCard = (_a) => {
         } }, rest),
         React__default["default"].createElement("div", { className: "banner" }, imgBanner),
         React__default["default"].createElement("div", { className: "content" },
-            React__default["default"].createElement(index$2.Text, { className: "category_name", size: "sm", weight: "bold" }, (category === null || category === void 0 ? void 0 : category.displayName) || label || ''))));
+            React__default["default"].createElement(index$3.Text, { className: "category_name", size: "sm", weight: "bold" }, (category === null || category === void 0 ? void 0 : category.displayName) || label || ''))));
 };
 
 const StyledCheckboxGroup = styled__default["default"].div `
@@ -355,7 +144,7 @@ const CheckboxGroup = ({ name, values = [], onChanges, options = [], className,
             onChanges(newValues);
         }
     };
-    return (React__default["default"].createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default["default"].createElement(index$7.Checkbox, { label: option.label, name: name, key: `${index}-${option.value}`, checked: values.includes(option.value), value: option.value, isDisabled: isDisabled || option.disabled, onChange: !isDisabled && onChange, isRectangle: isRectangle })))));
+    return (React__default["default"].createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default["default"].createElement(index$4.Checkbox, { label: option.label, name: name, key: `${index}-${option.value}`, checked: values.includes(option.value), value: option.value, isDisabled: isDisabled || option.disabled, onChange: !isDisabled && onChange, isRectangle: isRectangle })))));
 };
 
 const StyledIconText = styled__default["default"].div `
@@ -409,249 +198,6 @@ const IconText = ({ size, iconPosition, className, children, icon: Icon, }) => {
         iconPosition === 'right' && Icon));
 };
 
-const StyledSlider = styled__default["default"].div `
-  position: relative;
-  width: 100%;
-
-  & div[role='slider'] {
-    -webkit-text-size-adjust: none;
-    -webkit-user-select: none;
-    &:focus {
-      outline: none;
-    }
-  }
-`;
-const StyledStep = styled__default["default"].div `
-  position: absolute;
-  top: 19px;
-  width: 24px;
-  height: 24px;
-  color: ${miscTheme.theme.colors.white};
-  border: 2px solid ${miscTheme.theme.colors.white};
-  border-radius: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${miscTheme.theme.colors.white};
-  color: ${miscTheme.theme.colors.gray300};
-  border: 1px solid ${miscTheme.theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    background-color: ${miscTheme.theme.colors.primaryBase};
-    color: ${miscTheme.theme.colors.white};
-    border: none;
-  }
-`;
-const StyledTrackContainer = styled__default["default"].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 ${miscTheme.theme.colors.primaryBase};
-    height: 0px;
-  }
-
-  &[data-track-type='detail'] > div {
-    border: 1px solid ${miscTheme.theme.colors.gray200};
-    height: 0px;
-  }
-`;
-const StyledTrack = styled__default["default"].div `
-  width: 100%;
-  height: 5px;
-  align-self: center;
-  border-radius: 4px;
-  background-color: ${miscTheme.theme.colors.gray200};
-`;
-const StyledStepLabel = styled__default["default"].div `
-  position: absolute;
-  top: 32px;
-  min-width: 100px;
-  text-align: center;
-  color: ${miscTheme.theme.colors.gray500};
-  font-size: ${miscTheme.theme.sizes.fsCaption2};
-  font-weight: ${miscTheme.theme.sizes.fwBold};
-
-  &[data-step-passed='true'] {
-    color: ${miscTheme.theme.colors.gray800};
-  }
-`;
-const StyledBreadcrumbContainer = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-`;
-const StyledBreadcrumbWrapper = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  font-size: ${miscTheme.theme.sizes.fsCaption2};
-  font-weight: ${miscTheme.theme.sizes.fwBold};
-  color: ${miscTheme.theme.colors.gray500};
-  cursor: pointer;
-
-  & > svg {
-    height: 10px;
-    width: 10px;
-    margin: 0 14px;
-  }
-
-  & > svg > path {
-    stroke: ${miscTheme.theme.colors.gray500};
-  }
-
-  &[data-selected='true'] {
-    color: ${miscTheme.theme.colors.primaryBase};
-  }
-`;
-const StyledDetailStep = styled__default["default"].div `
-  position: absolute;
-  left: 0;
-  top: 19px;
-  height: 24px;
-  cursor: pointer;
-
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-
-  padding: 8px;
-  background-color: ${miscTheme.theme.colors.white};
-`;
-const StyledDetailStepIndicator = styled__default["default"].div `
-  min-width: 24px;
-  height: 24px;
-  border: 2px solid ${miscTheme.theme.colors.white};
-  border-radius: 50%;
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  background-color: ${miscTheme.theme.colors.white};
-  color: ${miscTheme.theme.colors.gray300};
-  border: 1px solid ${miscTheme.theme.colors.gray300};
-
-  &[data-is-active='true'] {
-    border: none;
-    background-color: ${miscTheme.theme.colors.primaryBase};
-    color: ${miscTheme.theme.colors.white};
-  }
-`;
-const StyledDetailStepIndicatorExternal = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > svg {
-    height: 20px;
-    width: 20px;
-    margin-right: 8px;
-
-    & > path {
-      stroke: ${miscTheme.theme.colors.gray500};
-    }
-  }
-`;
-const StyledDetailStepLabel = styled__default["default"].div `
-  color: ${miscTheme.theme.colors.gray400};
-  font-size: ${miscTheme.theme.sizes.fsCaption2};
-  font-weight: ${miscTheme.theme.sizes.fwBold};
-  margin-right: 8px;
-  flex: 0 0 auto;
-
-  &[data-step-passed='true'] {
-    color: ${miscTheme.theme.colors.gray800};
-  }
-`;
-const StyledDetailStepDescription = styled__default["default"].div `
-  position: absolute;
-  top: 32px;
-  font-weight: ${miscTheme.theme.sizes.fwRegular};
-  color: ${miscTheme.theme.colors.gray400};
-  padding-right: 16px;
-`;
-
-const ProgressBar = ({ type, numberOfStep, activeStep, labelPrefix, detailSteps, className, onChange, }) => {
-    const [trackLength, setTrackLength] = React.useState(0);
-    const Track = (_a) => {
-        var { trackClassName } = _a, props = tslib_es6.__rest(_a, ["trackClassName"]);
-        return (React__default["default"].createElement(StyledTrackContainer, Object.assign({}, props, { className: trackClassName }),
-            React__default["default"].createElement(StyledTrack, null)));
-    };
-    // step track
-    const Steps = ({ trackLength, activeStep, labelPrefix = 'Step', onChange, }) => {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: numberOfStep }, (v, i) => i).map((_, step) => (React__default["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["default"].createElement(StyledStepLabel, { "data-step-passed": step <= activeStep }, labelPrefix + ' ' + (step + 1)))))));
-    };
-    const stepTrack = (React__default["default"].createElement(StyledSlider, { className: className + ' progress-bar' },
-        React__default["default"].createElement(Track, null),
-        React__default["default"].createElement(Steps, { trackLength: trackLength, activeStep: activeStep, labelPrefix: labelPrefix, onChange: onChange })));
-    // breadcrumb
-    const breadcrumbIcon = (React__default["default"].createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 5.5 9.5" },
-        React__default["default"].createElement("title", null, 'chevron-right'),
-        React__default["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["default"].createElement(StyledBreadcrumbContainer, null, detailSteps &&
-        Array.from({ length: detailSteps.length }, (v, i) => i).map((_, step_index) => {
-            var _a;
-            return (React__default["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["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: detailSteps.length }, (v, i) => i).map((step, step_index) => (React__default["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["default"].createElement(StyledDetailStepIndicatorExternal, { onClick: () => {
-                    onChange && onChange(step_index);
-                } }, detailSteps[step_index].icon)) : (React__default["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["default"].createElement(StyledDetailStepLabel, { "data-step-passed": step_index < activeStep + 1 },
-                detailSteps[step_index].text,
-                React__default["default"].createElement(StyledDetailStepDescription, null, detailSteps[step_index].description)),
-            step_index < detailSteps.length - 1 && (React__default["default"].createElement(Track, { "data-step-passed": step_index < activeStep, trackClassName: 'progress-track', "data-track-type": "detail" })))))));
-    };
-    const detailTrack = (React__default["default"].createElement(StyledSlider, { className: className + ' progress-bar' },
-        React__default["default"].createElement(DetailStepsGroup, { activeStep: activeStep, detailSteps: detailSteps, onChange: onChange })));
-    const resizeTrack = React.useCallback(throttle__default["default"](() => {
-        const progressTrack = document.querySelector('.progress-bar');
-        progressTrack && setTrackLength(progressTrack.offsetWidth);
-    }, 1000), []);
-    React.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["default"].forwardRef(({ id, value, options, className, isDisabled, size: sizeProp = 'small', direction = 'vertical', onChange, dataEventCategory, dataEventAction, dataEventLabel, }, ref) => {
     const [check, setCheck] = React.useState(value);
     React.useImperativeHandle(ref, () => ({
@@ -704,7 +250,7 @@ const StyledArrow = styled__default["default"].div `
 `;
 const SideHeader = ({ isCollapsed, defaultLogo, onBackClick, customIcon, }) => {
     return (React__default["default"].createElement(StyledSideHeader, null,
-        React__default["default"].createElement(index$8.Logo, { type: isCollapsed ? 'logomark' : defaultLogo || 'hellocare', customSize: {
+        React__default["default"].createElement(index$6.Logo, { type: isCollapsed ? 'logomark' : defaultLogo || 'hellocare', customSize: {
                 width: isCollapsed ? '24px' : '77px',
                 height: '24px',
             } }),
@@ -736,8 +282,8 @@ const DoctorInfo = ({ name, description, image, isDescriptionHidden, }) => {
     return (React__default["default"].createElement(StyledDoctorInfo, null,
         image,
         !isDescriptionHidden && (React__default["default"].createElement("figcaption", null,
-            React__default["default"].createElement(index$2.Text, { size: "p4", weight: "bold" }, name),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, description)))));
+            React__default["default"].createElement(index$3.Text, { size: "p4", weight: "bold" }, name),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, description)))));
 };
 
 const StyledUserInfo = styled__default["default"].div `
@@ -790,7 +336,7 @@ const StyledMenuLink = styled__default["default"].div `
 const MenuLink = ({ icon, isActive, children, isCollapsed, activeIcon, onLinkClick, textSize = 'base', textType = 'bold', textColorActive = '#fff', textColor = '#595959', }) => {
     return (React__default["default"].createElement(StyledMenuLink, { "data-is-link-active": isActive || undefined, onClick: onLinkClick, "data-is-link-collapsed": isCollapsed || undefined },
         !(isActive && activeIcon) ? icon : activeIcon,
-        !isCollapsed && (React__default["default"].createElement(index$2.Text, { size: textSize, weight: textType, color: isActive ? textColorActive : textColor }, children))));
+        !isCollapsed && (React__default["default"].createElement(index$3.Text, { size: textSize, weight: textType, color: isActive ? textColorActive : textColor }, children))));
 };
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -1488,7 +1034,7 @@ const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCat
         }, key: i, "data-event-category": tab.dataEventCategory || dataEventCategory, "data-event-action": tab.dataEventAction || dataEventAction, "data-event-label": tab.dataEventLabel || dataEventLabel, tabIndex: 0, "data-testid": tab.dataTestid },
         React__default["default"].createElement("div", { className: classes.itemInner },
             tab.icon && React__default["default"].createElement("div", { className: classes.icon }, tab.icon),
-            React__default["default"].createElement(index$2.Text, { className: classes.label, size: tab.textSize || 'sm', weight: tab.textType || 'bold', color: activeTab === i
+            React__default["default"].createElement(index$3.Text, { className: classes.label, size: tab.textSize || 'sm', weight: tab.textType || 'bold', color: activeTab === i
                     ? theme.fn.primaryColor()
                     : tab.textColor || theme.colors.gray[4], dataEventCategory: tab.dataEventCategory, dataEventAction: tab.dataEventAction, dataEventLabel: tab.dataEventLabel }, tab.name)))))));
 };
@@ -1937,189 +1483,6 @@ const CookieAcceptConfirm = ({ className, policiesUrl, onAcceptClick, translatio
             React__default["default"].createElement(StyledPoliciesButton, { href: policiesUrl }, translations.policiesButton))));
 };
 
-const slideInUp = react.keyframes `
-  from {
-    transform: translateY(100%);
-    visibility: visible;
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`;
-const slideOutDown = react.keyframes `
-  from {
-    transform: translate(0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate(0, 100%);
-  }
-`;
-const StyledMobileBottomNavigationIcon = styled__default["default"].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: ${miscTheme.theme.colors.gray600};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 60px;
-    text-align: center;
-    ${utils.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: ${miscTheme.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: ${miscTheme.theme.colors.primaryBase};
-    }
-  }
-
-  &[data-is-active='true'] {
-    .mobile-navigation-label {
-      color: ${miscTheme.theme.colors.primaryBase};
-    }
-  }
-
-  &[data-is-disabled='true'] {
-    opacity: 0.2;
-  }
-`;
-const StyledMobileBottomNavigation = styled__default["default"].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: ${miscTheme.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__default["default"].span `
-  position: absolute;
-  left: 100%;
-  transform: translate(-10px, calc(-50% + 3px));
-  background-color: ${miscTheme.theme.colors.green800};
-  border-radius: 32px;
-  border: 2px solid ${miscTheme.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__default["default"].div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 3px;
-  background-color: ${miscTheme.theme.colors.primaryBase};
-  transition: width 150ms linear;
-`;
-styled__default["default"].div `
-  a {
-    text-decoration: none;
-  }
-`;
-
-const MobileBottomNavigationIcon = (_a) => {
-    var { badgeAmount, disabled = false, hasBadge = false, icon, isActive = false, isSpecial = false, label } = _a, props = tslib_es6.__rest(_a, ["badgeAmount", "disabled", "hasBadge", "icon", "isActive", "isSpecial", "label"]);
-    return (React__default["default"].createElement(StyledMobileBottomNavigationIcon, Object.assign({ "data-is-special": isSpecial, "data-is-active": isActive, "data-is-disabled": disabled }, props),
-        React__default["default"].createElement("div", { className: "mobile-navigation-icon", "data-no-label": !Boolean(label) },
-            hasBadge && (React__default["default"].createElement(StyledBadge, { "data-no-label": !Boolean(label) },
-                React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: isSpecial ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.white }, badgeAmount))),
-            icon),
-        label && React__default["default"].createElement("span", { className: "mobile-navigation-label" }, label)));
-};
-
-const MobileBottomNavigationWrapper = (_a) => {
-    var { children, isCollapsed = false, template = 'homepage' } = _a, rest = tslib_es6.__rest(_a, ["children", "isCollapsed", "template"]);
-    return (React__default["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;
@@ -2216,7 +1579,7 @@ const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, rou
         !metaData && (React__default["default"].createElement(React__default["default"].Fragment, null,
             siteType === 'helloSites' ? (React__default["default"].createElement("title", null, seoCustom
                 ? SEOTitle
-                : SEOTitle + ' - ' + ((_a = index$9.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.SITE_NAME))) : (React__default["default"].createElement("title", null, SEOTitle)),
+                : SEOTitle + ' - ' + ((_a = index$7.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.SITE_NAME))) : (React__default["default"].createElement("title", null, SEOTitle)),
             !hasNoCanonical && (React__default["default"].createElement("link", { rel: "canonical", href: `https://${siteUrl}${newPath}` })),
             React__default["default"].createElement("meta", { name: "description", content: SEODescription || ((_b = SEOData.openGraph) === null || _b === void 0 ? void 0 : _b.description) }),
             SEOData.schemaData && (React__default["default"].createElement("script", { type: "application/ld+json", className: "yoast-schema-graph", dangerouslySetInnerHTML: { __html: SEOData.schemaData } })),
@@ -2241,8 +1604,8 @@ const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, rou
             React__default["default"].createElement("meta", { name: "twitter:description", content: SEODescription }),
             React__default["default"].createElement("meta", { name: "twitter:image", content: ((_m = SEOData.twitter) === null || _m === void 0 ? void 0 : _m.image) || SEOImage }))),
         (siteType === 'helloSites'
-            ? index$9.FAVICONS[sL] || []
-            : index$9.FAVICONS.marryBaby).map((item, index) => {
+            ? index$7.FAVICONS[sL] || []
+            : index$7.FAVICONS.marryBaby).map((item, index) => {
             if (item.type === 'link') {
                 return (React__default["default"].createElement("link", { key: `favicon-${index}`, rel: item.rel, href: item.href, sizes: item.sizes }));
             }
@@ -2433,7 +1796,7 @@ const dateLocaleByLocale = {
 function DateRangePickerCalendar(props) {
     const { value = { from: null, to: null } } = props;
     const [hoverDay, setHoverDay] = React.useState(null);
-    const { isMobile } = index$5.useScreenSize();
+    const { isMobile } = index_styles.useScreenSize();
     const [range, setRange] = React.useState(() => value);
     const [date, setDate] = React.useState(() => { var _a; return dateFns.startOfMonth((_a = value.from) !== null && _a !== void 0 ? _a : new Date()); });
     const nextMonth = React.useMemo(() => dateFns.addMonths(date, 1), [date]);
@@ -2541,11 +1904,11 @@ range, setRange, onChange, goToPreviousMonth, goToNextMonth, minDate, maxDate, c
     }
     return (React__default["default"].createElement(StyledCalendarWrapper$1, { className: "calendar-wrapper" },
         React__default["default"].createElement(StyledCalendarHead, null,
-            React__default["default"].createElement(index$a.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
+            React__default["default"].createElement(index$8.Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$9.CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
             React__default["default"].createElement("div", { className: "calendar-month" },
                 monthLabel,
                 React__default["default"].createElement("strong", null, dateFns.format(date, 'yyyy'))),
-            React__default["default"].createElement(index$a.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
+            React__default["default"].createElement(index$8.Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default["default"].createElement("img", { src: index$9.CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
         React__default["default"].createElement(StyledCalendarCellsWrapper, null,
             React__default["default"].createElement("div", null, renderWeekDays()),
             React__default["default"].createElement("div", null, renderMonth()))));
@@ -2621,7 +1984,7 @@ function DateRangePicker({ inputSize = 'md', name = 'date-range-picker', value,
     }
     return (React__default["default"].createElement(StyledWrapper, { className: [className, opened && 'focused'].filter(Boolean).join(' '), ref: ref },
         React__default["default"].createElement("label", { htmlFor: name },
-            React__default["default"].createElement(index$7.PureInput, { size: inputSize, value: fieldValue, name: name, actionIcon: React__default["default"].createElement("img", { src: index$4.CommonGAssets.getAssetPath('calendar.svg'), loading: "lazy" }), onFocus: () => setOpened(true) })),
+            React__default["default"].createElement(index$4.PureInput, { size: inputSize, value: fieldValue, name: name, actionIcon: React__default["default"].createElement("img", { src: index$9.CommonGAssets.getAssetPath('calendar.svg'), loading: "lazy" }), onFocus: () => setOpened(true) })),
         opened ? (React__default["default"].createElement(StyledCalendarWrapper, { onMouseDown: (e) => {
                 e.stopPropagation();
             } }, renderCalendar())) : null));
@@ -2632,7 +1995,7 @@ var styles = {"breadcrumb":"WUqzfRb","separator":"MnVGtSY","textLink":"NclbhXQ"}
 const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, }) => {
     const { label, value, isDropdown, dropdownItems, dataEventCategory, dataEventAction, dataEventLabel, } = page;
     if (isDropdown) {
-        return (React__default["default"].createElement(index$b.Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
+        return (React__default["default"].createElement(index$a.Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
     }
     return (React__default["default"].createElement("div", { className: styles.textLink, title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__default["default"].createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
 };
@@ -2716,13 +2079,13 @@ const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
             return '';
     }, []);
     return (React__default["default"].createElement(StyledShareContainer, null,
-        React__default["default"].createElement(index$2.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, t('shareContainer.title')),
+        React__default["default"].createElement(index$3.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, t('shareContainer.title')),
         React__default["default"].createElement("div", { className: "icon-group" },
             socialList.map((social, index) => (React__default["default"].createElement("a", { key: index, href: social.href, target: "_blank", rel: "noreferrer", "data-event-category": "Health Tool", "data-event-action": `Social Share - ${social.name}`, "data-event-label": currentUrl }, social.icon))),
-            React__default["default"].createElement(index$a.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
+            React__default["default"].createElement(index$8.Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default["default"].createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
 };
 
-const StyledShareDrawer = styled__default["default"](index$c.Drawer) `
+const StyledShareDrawer = styled__default["default"](index$b.Drawer) `
   padding-bottom: 24px;
   .share-container {
     display: flex;
@@ -2793,13 +2156,13 @@ const ShareDrawer = (_a) => {
         return (React__default["default"].createElement(StyledShareDrawer, Object.assign({ title: t('share.title'), onClose: onClose, open: open, placement: "bottom" }, rest),
             React__default["default"].createElement("div", { className: "share-container" },
                 React__default["default"].createElement("div", { className: "icon-container" },
-                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.title')),
+                    React__default["default"].createElement(index$3.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.title')),
                     React__default["default"].createElement("div", { className: "icon-group" }, socialList.map((social, index) => (React__default["default"].createElement("a", { key: index, href: social.href, target: "_blank", rel: "noreferrer" }, social.icon))))),
                 React__default["default"].createElement("div", { className: "link-container" },
-                    React__default["default"].createElement(index$2.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.copyLink')),
+                    React__default["default"].createElement(index$3.Text, { weight: "semiBold", size: "s3", color: miscTheme.theme.colors.gray600 }, t('share.copyLink')),
                     React__default["default"].createElement("div", { className: "input-group" },
-                        React__default["default"].createElement(index$d.Input, { name: "link", size: "md", value: url, isDisabled: true }),
-                        React__default["default"].createElement(index$a.Button, { size: "md", type: "button", color: "tertiary", icon: React__default["default"].createElement(CopyIcon, null), onClick: copyToClipboard }))))));
+                        React__default["default"].createElement(index$c.Input, { name: "link", size: "md", value: url, isDisabled: true }),
+                        React__default["default"].createElement(index$8.Button, { size: "md", type: "button", color: "tertiary", icon: React__default["default"].createElement(CopyIcon, null), onClick: copyToClipboard }))))));
     }
 };
 
@@ -2887,7 +2250,7 @@ const StyledAdHeader = styled__default["default"].div `
 `;
 const StyledCloseBtn = styled__default["default"].div `
   background-color: white;
-  background-image: url(${index$4.CommonGAssets.getAssetPath('close-blue.svg')});
+  background-image: url(${index$9.CommonGAssets.getAssetPath('close-blue.svg')});
   background-repeat: no-repeat;
   background-size: 10px;
   background-position: center;
@@ -3046,8 +2409,8 @@ customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, head
         React__default["default"].createElement(StyledAdContainer, { ref: containerRef, className: className, style: style, "data-no-wrapper": !!noWrapper, "data-header-bottom": !!headerBottom }, noWrapper ? (AdContent) : (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(StyledAdHeader, { "data-header-bottom": !!headerBottom },
                 React__default["default"].createElement("img", { src: isMarryBaby
-                        ? index$4.CommonGAssets.getAssetPath('adsIcon-mb.svg')
-                        : index$4.CommonGAssets.getAssetPath('adsIcon.svg'), alt: "", loading: "lazy" }),
+                        ? index$9.CommonGAssets.getAssetPath('adsIcon-mb.svg')
+                        : index$9.CommonGAssets.getAssetPath('adsIcon.svg'), alt: "", loading: "lazy" }),
                 React__default["default"].createElement("span", null, t('adBanner.title'))),
             React__default["default"].createElement("div", { style: {
                     minWidth: minWidth || '100%',
@@ -3111,8 +2474,6 @@ const FixedBottomAdBlock = ({ className, adUnitPath, divId, isMobile, contentId,
 };
 
 exports.AdBlock = AdBlock;
-exports.ArticleCard = ArticleCard$1;
-exports.ArticleCard$1 = ArticleCard;
 exports.Breadcrumbs = Breadcrumbs;
 exports.CategoryCard = CategoryCard;
 exports.CheckboxGroup = CheckboxGroup;
@@ -3122,9 +2483,6 @@ exports.DoctorInfo = DoctorInfo;
 exports.FixedBottomAdBlock = FixedBottomAdBlock;
 exports.FloatButtonGroup = FloatButtonGroup;
 exports.IconText = IconText;
-exports.MobileBottomNavigation = MobileBottomNavigation;
-exports.MobileBottomNavigationIcon = MobileBottomNavigationIcon;
-exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.ScrollList = ScrollList;
 exports.SeoHead = SeoHead;