@hhgtech/hhg-components 1.29.80 → 1.29.81

package/build/esm/fixedBottomAdBlock-13ed4a34.js

@@ -0,0 +1,3474 @@
+import React__default, { memo, useMemo, useState, useCallback, useEffect, useImperativeHandle, useRef, createContext, useContext, Fragment, forwardRef } from 'react';
+import { Bookmark } from '@hhgtech/icons/other';
+import { C as CommonGAssets } from './index-78255d6c.js';
+import { T as Text } from './index-c200bff6.js';
+import { H as Heading } from './index-73301602.js';
+import { t as theme } from './theme-f18c2351.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-761239c7.js';
+import { Card, Group, Box, Flex, createStyles, Stack, getStylesRef, useMantineTheme, rem } from '@mantine/core';
+import innertext from 'innertext';
+import { u as useScreenSize, A as Anchor, a as Avatar, b as AspectRatio, R as Radio, t as themeColors } from './index-21eac858.js';
+import '@mantine/dates';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS } from './index-bef3c9bd.js';
+import { L as LOCALE } from './index-e3787b20.js';
+import './useMantineLocale-4fb67342.js';
+import './index-2b9213cf.js';
+import './translationsContext-f3d1a7bd.js';
+import 'string-format';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-f8761b9d.js';
+import { i as isInternalLink } from './index-996f7caf.js';
+import styled from '@emotion/styled';
+import { C as Checkbox, P as PureInput } from './index-e26514ee.js';
+import throttle from 'lodash/throttle';
+import { L as Logo } from './index-1ecbcf21.js';
+import { keyframes } from '@emotion/react';
+import parse from 'html-react-parser';
+import { i as isProduction } from './isProduction-5684a28c.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import { D as DueDateForm, B as BmiForm, a as BabyPoopForm, T as ThrForm, O as OvulationForm, b as BabyVaccineForm, P as PWGForm } from './index-6ac73f00.js';
+import { B as BabyGrowthForm } from './index-38f50764.js';
+import { f as formatUserProfileUrl } from './dataTransform-3e8e25ba.js';
+import { s as setDefaultClass } from './defaultClassWrapper-31caf23b.js';
+import { isBefore, startOfMonth, addMonths, format, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
+import { a as useOutsideClick } from './useOutsideClick-7451aa57.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-1da2ca0b.js';
+import { D as Dropdown } from './index-cdac57da.js';
+import { g as getSocialList } from './getSocialList-e8142513.js';
+import { I as Input } from './index-16514f4d.js';
+import { D as Drawer } from './index-8952ceac.js';
+import { v4 } from 'uuid';
+
+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$4 = 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$4(
+    // 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)));
+};
+
+const StyledCategoryCard = styled.a `
+  display: flex;
+  height: 125px;
+
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+
+  border: 1px solid ${theme.colors.neutral100};
+  background-color: white;
+  border-radius: ${theme.borderRadius};
+  box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
+  cursor: pointer;
+  text-decoration: none;
+
+  & > .banner {
+    width: 100%;
+    height: 63px;
+    text-align: center;
+  }
+
+  & > .content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: center;
+    word-break: break-word;
+  }
+
+  * {
+    pointer-events: none;
+  }
+`;
+
+const CategoryCard = (_a) => {
+    var { category, imgBanner, label, className, style, href = '', dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = __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.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) &&
+        !isInternalLink(category.customizedUrl) && {
+        target: '_blank',
+    }), { onClick: (e) => {
+            if (url === '') {
+                e.preventDefault();
+            }
+        } }, rest),
+        React__default.createElement("div", { className: "banner" }, imgBanner),
+        React__default.createElement("div", { className: "content" },
+            React__default.createElement(Text, { className: "category_name", size: "sm", weight: "bold" }, (category === null || category === void 0 ? void 0 : category.displayName) || label || ''))));
+};
+
+const StyledCheckboxGroup = styled.div `
+  display: flex;
+
+  &[data-type='vertical'] {
+    flex-direction: column;
+
+    div {
+      margin-bottom: 20px;
+    }
+  }
+
+  &[data-type='horizontal'] {
+    flex-wrap: wrap;
+
+    div {
+      margin-right: 25px;
+    }
+
+    &[data-is-rectangle] {
+      div {
+        margin-right: 14px;
+      }
+    }
+  }
+`;
+
+const CheckboxGroup = ({ name, values = [], onChanges, options = [], className, type = 'vertical', isDisabled, isRectangle, }) => {
+    const onChange = (value, checked) => {
+        const newValues = values.slice();
+        if (checked) {
+            newValues.push(value);
+        }
+        else {
+            const removeIndex = newValues.findIndex((item) => item === value);
+            newValues.splice(removeIndex, 1);
+        }
+        if (onChanges) {
+            onChanges(newValues);
+        }
+    };
+    return (React__default.createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default.createElement(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.div `
+  display: flex;
+  align-items: center;
+  --font-weight-lg: ${theme.sizes.fwBold};
+  --font-weight-md: ${theme.sizes.fwRegular};
+  --font-weight-sm: ${theme.sizes.fwRegular};
+
+  &[data-icon-position='left'] {
+    & > *:first-child {
+      margin-right: 8px;
+    }
+
+    & > *:last-child {
+      width: calc(100% - 24px);
+    }
+  }
+  &[data-icon-position='right'] {
+    & > *:first-child {
+      width: calc(100% - 24px);
+    }
+    & > *:last-child {
+      margin-left: 8px;
+    }
+  }
+
+  ${MediaQueries.mbDown} {
+    &[data-size='lg'] {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: var(--font-weight-lg);
+    }
+    &[data-size='md'] {
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: var(--font-weight-md);
+    }
+    &[data-size='sm'] {
+      font-size: 13px;
+      line-height: 20px;
+      font-weight: var(----font-weight-sm);
+    }
+  }
+`;
+
+const IconText = ({ size, iconPosition, className, children, icon: Icon, }) => {
+    return (React__default.createElement(StyledIconText, { className: className, "data-size": size, "data-icon-position": iconPosition },
+        iconPosition === 'left' && Icon,
+        children,
+        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, () => ({
+        reset() {
+            setCheck(value);
+        },
+    }));
+    const handleOnChange = (v) => {
+        setCheck(v);
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+    };
+    const size = sizeProp === 'small' ? 'md' : 'lg';
+    const DirectionComp = direction === 'vertical' ? Stack : Group;
+    return (React__default.createElement(Radio.Group, { name: id, className: className, size: size, value: String(check), defaultValue: value, onChange: handleOnChange },
+        React__default.createElement(DirectionComp, { spacing: "xl" }, options.map((option) => (React__default.createElement(Radio, { key: option.value, value: option.value, label: option.label, disabled: isDisabled, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }))))));
+});
+
+const StyledSideMenu = styled.div `
+  --menu-width: 240px;
+  --menu-spacing: 28px 16px;
+  width: var(--menu-width);
+  height: 100vh;
+  padding: var(--menu-spacing);
+  background-color: ${theme.colors.neutral50};
+  transition: ease-in-out 0.5s;
+
+  &[data-is-collapsed] {
+    --menu-width: 64px;
+    --menu-spacing: 28px 8px;
+  }
+`;
+const SideMenu = ({ isCollapsed, className, style, children }) => {
+    return (React__default.createElement(StyledSideMenu, { style: style, className: className, "data-is-collapsed": isCollapsed || undefined }, children));
+};
+
+const StyledSideHeader = styled.div `
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+
+  svg {
+    transition: 0.4s ease-in-out;
+  }
+`;
+const StyledArrow = styled.div `
+  cursor: pointer;
+  &[data-is-collapsed] {
+    transform: rotate(180deg);
+  }
+`;
+const SideHeader = ({ isCollapsed, defaultLogo, onBackClick, customIcon, }) => {
+    return (React__default.createElement(StyledSideHeader, null,
+        React__default.createElement(Logo, { type: isCollapsed ? 'logomark' : defaultLogo || 'hellocare', customSize: {
+                width: isCollapsed ? '24px' : '77px',
+                height: '24px',
+            } }),
+        React__default.createElement(StyledArrow, { "data-is-collapsed": isCollapsed || undefined, onClick: onBackClick }, customIcon ? (customIcon) : (React__default.createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 20 20", width: "20px", height: "20px" },
+            React__default.createElement("path", { d: "M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z", fill: "none", stroke: "#d2d6dc", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }),
+            React__default.createElement("path", { d: "M11.44 6.53L8 10l3.48 3.47", fill: "none", stroke: "#737373", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }))))));
+};
+
+const StyledDoctorInfo = styled.figure `
+  display: flex;
+
+  > img,
+  svg,
+  picture {
+    width: 40px;
+    height: 40px;
+    margin-right: 1rem;
+    border-radius: 6px;
+    object-fit: cover;
+  }
+
+  > figcaption {
+    p + p {
+      margin-top: 2px;
+    }
+  }
+`;
+const DoctorInfo = ({ name, description, image, isDescriptionHidden, }) => {
+    return (React__default.createElement(StyledDoctorInfo, null,
+        image,
+        !isDescriptionHidden && (React__default.createElement("figcaption", null,
+            React__default.createElement(Text, { size: "p4", weight: "bold" }, name),
+            React__default.createElement(Text, { size: "p4" }, description)))));
+};
+
+const StyledUserInfo = styled.div `
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  margin-bottom: 36px;
+
+  figcaption {
+    white-space: nowrap;
+  }
+
+  &[data-is-collapsed='true'] {
+    img {
+      max-width: 2rem;
+      max-height: 2rem;
+    }
+  }
+`;
+const UserInfo = ({ isCollapsed, userName, role, avatar }) => {
+    return (React__default.createElement(StyledUserInfo, { "data-is-collapsed": isCollapsed || undefined },
+        React__default.createElement(DoctorInfo, { image: avatar, name: userName, description: role, isDescriptionHidden: isCollapsed })));
+};
+
+const StyledMenuLink = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 9px 21px;
+  margin-bottom: 4px;
+  border-radius: 6px;
+
+  &:not([data-is-link-active]) {
+    cursor: pointer;
+  }
+
+  p {
+    margin-left: 12px;
+  }
+
+  &[data-is-link-active] {
+    background: ${theme.colors.primaryBase};
+  }
+
+  &[data-is-link-collapsed] {
+    justify-content: center;
+    margin-right: -14px;
+    margin-left: -14px;
+  }
+`;
+const MenuLink = ({ icon, isActive, children, isCollapsed, activeIcon, onLinkClick, textSize = 'base', textType = 'bold', textColorActive = '#fff', textColor = '#595959', }) => {
+    return (React__default.createElement(StyledMenuLink, { "data-is-link-active": isActive || undefined, onClick: onLinkClick, "data-is-link-collapsed": isCollapsed || undefined },
+        !(isActive && activeIcon) ? icon : activeIcon,
+        !isCollapsed && (React__default.createElement(Text, { size: textSize, weight: textType, color: isActive ? textColorActive : textColor }, children))));
+};
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  SideMenu: SideMenu,
+  SideHeader: SideHeader,
+  UserInfo: UserInfo,
+  MenuLink: MenuLink
+});
+
+const StyledScrollList = styled.div `
+  position: relative;
+  width: 100%;
+  > .container {
+    display: flex;
+    width: 100%;
+    -ms-overflow-style: none;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .section {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      flex-shrink: 0;
+      margin: auto;
+
+      > .grid-layout {
+        display: grid;
+        width: 100%;
+        grid-row-gap: 8px;
+
+        > .item-grid {
+          width: 100%;
+
+          > * {
+            margin: 0 auto;
+          }
+        }
+      }
+
+      .progress-bar {
+        display: grid;
+        height: 15px;
+        margin-bottom: 10px;
+
+        .items-progress {
+          position: relative;
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: center;
+
+          .icon-status {
+            position: absolute;
+            display: flex;
+          }
+
+          .line {
+            width: 50%;
+            height: 2px;
+            background-color: ${theme.colors.gray600};
+          }
+        }
+      }
+    }
+  }
+
+  .bullet-nav {
+    position: absolute;
+    z-index: ${theme.zIndexes.belowHeader};
+    bottom: -30px;
+    left: 50%;
+    display: flex;
+    transform: translate(-50%, -50%);
+  }
+
+  .bullet-nav__link {
+    display: block;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    margin-right: 8px;
+    backface-visibility: hidden;
+    background-color: #e4e8ec;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s;
+    &.active {
+      &[data-scheme='hellosites'] {
+        background-color: ${theme.colors.primary600};
+      }
+      &[data-scheme='marrybaby'] {
+        background-color: ${theme.mbColors.pink};
+      }
+    }
+  }
+
+  .arrow-left {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    left: -35px;
+    transform: translateY(-50%);
+    &[data-event-category] > * {
+      pointer-events: none;
+    }
+  }
+
+  .arrow-right {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    right: -35px;
+    transform: translateY(-50%);
+    &[data-event-category] > * {
+      pointer-events: none;
+    }
+  }
+
+  .image-gallery-wrapper {
+    display: flex;
+    position: relative;
+    margin-top: 16px;
+    justify-content: center;
+    gap: 16px;
+    .image-block {
+      display: block;
+      width: 100%;
+      border: 2px solid transparent;
+      border-radius: 4px;
+    }
+    .image-block.active {
+      border-color: ${theme.colors.primaryBase};
+    }
+    img {
+      height: 40px;
+      width: auto;
+      max-width: 100%;
+    }
+  }
+`;
+
+const RenderIconStatus = ({ status }) => {
+    if (status === 'inActive') {
+        return (React__default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
+            React__default.createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
+    }
+    else if (status === 'active') {
+        return (React__default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+            React__default.createElement("circle", { cx: "6", cy: "6", r: "4", fill: "#2D87F3" }),
+            React__default.createElement("circle", { cx: "6", cy: "6", r: "5.5", stroke: "#2D87F3" })));
+    }
+    else if (status === 'done') {
+        return (React__default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+            React__default.createElement("path", { d: "M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z", fill: "#00B16A" }),
+            React__default.createElement("path", { d: "M8.76061 4.20029L4.80061 7.80029L3.00061 6.16392", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+    }
+    return (React__default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
+        React__default.createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const ScrollList = ({ row = 2, column = 3, isDotsShown = true, isImageGalleryShown = false, mode = 'infinity', type = 'separated', distanceOverlappedLeft = {
+    amount: 0,
+    unit: 'pixel',
+}, children, className, isProgressShown = false, statusChildren, isArrowShown = false, classNameLeftArrow, classNameRightArrow, dataEventCategory, dataEventAction, dataEventLabel, onChangePage, page, customPageWidth, scheme = 'hellosites', arrowType = 'Discover', }) => {
+    const hasPageProps = typeof page === 'number';
+    const [section, setSection] = useState(hasPageProps ? page : 0);
+    //Create groups
+    const groups = [];
+    React__default.Children.map(children, (element, idx) => {
+        if (idx % (row * column) === 0) {
+            groups.push([]);
+        }
+        groups[groups.length - 1].push(React__default.cloneElement(element));
+    });
+    const scrollRef = useRef();
+    const currentPage = useRef(0);
+    const scrollToPage = (index) => {
+        if (!scrollRef.current)
+            return;
+        const { clientWidth } = scrollRef.current;
+        const pageWidth = customPageWidth || clientWidth;
+        const distance = type === 'intertwined'
+            ? distanceOverlappedLeft.unit === 'percentage'
+                ? index * pageWidth +
+                    (distanceOverlappedLeft.amount / 100) * pageWidth * index
+                : index * pageWidth +
+                    distanceOverlappedLeft.amount * pageWidth * index
+            : index * pageWidth;
+        scrollRef.current.scrollTo({
+            top: 0,
+            left: distance,
+            behavior: 'smooth',
+        });
+        currentPage.current = index;
+        setSection(index);
+    };
+    const handleClick = (index) => {
+        if (!scrollRef.current)
+            return;
+        const { clientWidth } = scrollRef.current;
+        const pageWidth = customPageWidth || clientWidth;
+        const distance = type === 'intertwined'
+            ? distanceOverlappedLeft.unit === 'percentage'
+                ? index * pageWidth +
+                    (distanceOverlappedLeft.amount / 100) * pageWidth * index
+                : index * pageWidth +
+                    distanceOverlappedLeft.amount * pageWidth * index
+            : index * pageWidth;
+        scrollRef.current.scrollTo({
+            top: 0,
+            left: distance,
+            behavior: 'smooth',
+        });
+        currentPage.current = index;
+        setSection(index);
+        onChangePage && onChangePage(index);
+    };
+    useEffect(() => {
+        if (typeof page === 'number')
+            scrollToPage(page);
+    }, [page]);
+    const handleClickArrow = (type) => {
+        if (!scrollRef.current)
+            return;
+        const { clientWidth } = scrollRef.current;
+        const pageWidth = customPageWidth || clientWidth;
+        let distance;
+        section === 0 ? (distance = 0) : (distance = section * pageWidth);
+        if (type === 'forward') {
+            if (distance === pageWidth * (groups.length - 1)) {
+                setSection(groups.length - 1);
+                distance = pageWidth * (groups.length - 1);
+                onChangePage && onChangePage(groups.length - 1);
+            }
+            else {
+                setSection(section + 1);
+                distance += pageWidth;
+                onChangePage && onChangePage(section + 1);
+            }
+            scrollRef.current.scrollTo({
+                top: 0,
+                left: distance,
+                behavior: 'smooth',
+            });
+        }
+        if (type === 'back') {
+            if (distance === 0) {
+                setSection(0);
+                onChangePage && onChangePage(0);
+                distance = 0;
+            }
+            else {
+                setSection(section - 1);
+                onChangePage && onChangePage(section - 1);
+                distance -= pageWidth;
+            }
+            scrollRef.current.scrollTo({
+                top: 0,
+                left: distance,
+                behavior: 'smooth',
+            });
+        }
+    };
+    const handleScroll = () => {
+        if (mode === 'infinity') {
+            if (!scrollRef.current)
+                return;
+            const { clientWidth, scrollLeft } = scrollRef.current;
+            const pageWidth = customPageWidth || clientWidth;
+            const page = Math.floor(scrollLeft / pageWidth);
+            setSection(page);
+            onChangePage && onChangePage(page);
+        }
+    };
+    const handleScrollThrottle = throttle(handleScroll, 400);
+    useEffect(() => {
+        if (mode === 'snapped') {
+            let isDown = false;
+            let startX;
+            let startY;
+            let isSlidingY;
+            let isSlidingX;
+            let scrollLeft;
+            let direction;
+            const slider = scrollRef.current;
+            const start = (pageX, pageY) => {
+                isDown = true;
+                isSlidingY = false;
+                isSlidingX = false;
+                startX = pageX - slider.offsetLeft;
+                startY = pageY - slider.offsetTop;
+                scrollLeft = slider.scrollLeft;
+            };
+            const startMouse = (e) => {
+                start(e.pageX, e.pageY);
+            };
+            const startTouch = (e) => {
+                start(e.touches[0].pageX, e.touches[0].pageY);
+            };
+            const end = () => {
+                isDown = false;
+                isSlidingY = false;
+                isSlidingX = false;
+                if (!scrollRef.current)
+                    return;
+                const { clientWidth } = scrollRef.current;
+                const pageWidth = customPageWidth || clientWidth;
+                const page = direction === 'ltr'
+                    ? currentPage.current !== 0
+                        ? currentPage.current - 1
+                        : currentPage.current
+                    : direction === 'rtl'
+                        ? currentPage.current < groups.length - 1
+                            ? currentPage.current + 1
+                            : currentPage.current
+                        : currentPage.current;
+                const distance = type === 'intertwined'
+                    ? distanceOverlappedLeft.unit === 'percentage'
+                        ? page * pageWidth +
+                            (distanceOverlappedLeft.amount / 100) * pageWidth * page
+                        : page * pageWidth +
+                            distanceOverlappedLeft.amount * pageWidth * page
+                    : page * pageWidth;
+                scrollRef.current.scrollTo({
+                    top: 0,
+                    left: distance,
+                    behavior: 'smooth',
+                });
+                direction = 'none';
+                if (currentPage.current !== page) {
+                    currentPage.current = page;
+                    setSection(page);
+                    onChangePage && onChangePage(page);
+                }
+            };
+            const move = (pageX, pageY) => {
+                if (!isDown)
+                    return;
+                const x = pageX - slider.offsetLeft;
+                const y = pageY - slider.offsetTop;
+                const walkX = x - startX;
+                const walkY = y - startY;
+                if (!isSlidingY && !isSlidingX && (walkY > 20 || walkY < -20)) {
+                    isSlidingY = true;
+                }
+                if (!isSlidingY && (walkX > 20 || walkX < -20)) {
+                    isSlidingX = true;
+                    slider.scrollLeft = scrollLeft - walkX;
+                    if (walkX > 0) {
+                        direction = 'ltr';
+                    }
+                    if (walkX < 0) {
+                        direction = 'rtl';
+                    }
+                    if (walkX === 0) {
+                        direction = 'none';
+                    }
+                }
+            };
+            const moveMouse = (e) => {
+                if (isSlidingX) {
+                    e.preventDefault();
+                }
+                move(e.pageX, e.pageY);
+            };
+            const moveTouch = (e) => {
+                if (isSlidingX) {
+                    e.preventDefault();
+                }
+                move(e.touches[0].pageX, e.touches[0].pageY);
+            };
+            slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousedown', startMouse, {
+                passive: true,
+            });
+            slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchstart', startTouch, {
+                passive: true,
+            });
+            window.addEventListener('mouseup', end, {
+                passive: true,
+            });
+            window.addEventListener('touchend', end, {
+                passive: true,
+            });
+            slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousemove', moveMouse, {
+                passive: true,
+            });
+            slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchmove', moveTouch, {
+                passive: true,
+            });
+            return () => {
+                slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousedown', startMouse);
+                slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchstart', startTouch);
+                window.removeEventListener('mouseup', end);
+                window.removeEventListener('touchend', end);
+                slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousemove', moveMouse);
+                slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchmove', moveTouch);
+            };
+        }
+    }, []);
+    return (React__default.createElement(StyledScrollList, { className: className, "data-row": row, onScroll: handleScrollThrottle },
+        isArrowShown && section > 0 && (React__default.createElement("div", { className: `${classNameLeftArrow} arrow-left`, onClick: () => handleClickArrow('back'), "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, arrowType === 'Care' ? (React__default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
+            React__default.createElement("g", { filter: "url(#filter0_dd_12599_34420)" },
+                React__default.createElement("path", { d: "M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3V3C31.8368 3 39.0002 10.1634 39.0002 19V19C39.0002 27.8366 31.8368 35 23.0002 35V35C14.1637 35 7.00024 27.8366 7.00024 19V19Z", fill: "white" }),
+                React__default.createElement("path", { d: "M20.9293 19L24.7503 15.179C25.1643 14.765 25.1643 14.093 24.7503 13.679C24.3363 13.265 23.6643 13.265 23.2503 13.679L18.6363 18.293C18.2453 18.684 18.2453 19.317 18.6363 19.707L23.2503 24.321C23.6643 24.735 24.3363 24.735 24.7503 24.321C25.1643 23.907 25.1643 23.235 24.7503 22.821L20.9293 19Z", fill: "#595959" }),
+                React__default.createElement("path", { d: "M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z", fill: "#DBDFE5" })),
+            React__default.createElement("defs", null,
+                React__default.createElement("filter", { id: "filter0_dd_12599_34420", x: "0.000244141", y: "0", width: "42", height: "42", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                    React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                    React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                    React__default.createElement("feOffset", { dx: "-2", dy: "2" }),
+                    React__default.createElement("feGaussianBlur", { stdDeviation: "2.5" }),
+                    React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0" }),
+                    React__default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_12599_34420" }),
+                    React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                    React__default.createElement("feOffset", { dx: "-1", dy: "1" }),
+                    React__default.createElement("feGaussianBlur", { stdDeviation: "1" }),
+                    React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0" }),
+                    React__default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_12599_34420", result: "effect2_dropShadow_12599_34420" }),
+                    React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_12599_34420", result: "shape" }))))) : (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" },
+            React__default.createElement("path", { d: "M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default.createElement("path", { d: "M15.9997 11.1109L11.1108 15.9998L15.9997 20.8887", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default.createElement("path", { d: "M20.8886 15.999L11.1108 15.999", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))),
+        React__default.createElement("div", { ref: scrollRef, className: "container", style: {
+                overflowX: mode === 'snapped' || isArrowShown ? 'hidden' : 'scroll',
+            } }, groups.map((group, groupIndex) => {
+            let baseIndex = 0;
+            for (let i = 0; i < groupIndex; i++) {
+                baseIndex += groups[i].length;
+            }
+            return (React__default.createElement("div", { key: groupIndex, className: "section", style: {
+                    marginLeft: type === 'intertwined' && groupIndex !== 0
+                        ? distanceOverlappedLeft.amount +
+                            '' +
+                            (distanceOverlappedLeft.unit === 'percentage'
+                                ? '%'
+                                : 'px')
+                        : '0px',
+                } },
+                row === 1 && isProgressShown && (React__default.createElement("div", { className: "progress-bar", style: {
+                        gridTemplateColumns: `repeat(${column}, 1fr)`,
+                    } }, group.map((item, itemIndex) => {
+                    const realIndex = baseIndex + itemIndex;
+                    const foundStatusItem = statusChildren.find((statusItem) => statusItem.index === realIndex);
+                    return (React__default.createElement("div", { className: "items-progress", key: itemIndex },
+                        itemIndex === 0 && groupIndex === 0 ? (React__default.createElement("div", { className: "line", style: { visibility: 'hidden' } })) : (React__default.createElement("div", { className: "line" })),
+                        React__default.createElement("div", { className: "icon-status" },
+                            React__default.createElement(RenderIconStatus, { status: foundStatusItem === null || foundStatusItem === void 0 ? void 0 : foundStatusItem.status })),
+                        groupIndex === groups.length - 1 &&
+                            itemIndex === group.length - 1 ? (React__default.createElement("div", { className: "line", style: { visibility: 'hidden' } })) : (React__default.createElement("div", { className: "line" }))));
+                }))),
+                React__default.createElement("div", { className: "grid-layout", "data-index": groupIndex, style: {
+                        gridTemplateColumns: `repeat(${column}, 1fr)`,
+                        gridTemplateRows: `repeat(${row}, 1fr)`,
+                    } }, group.map((item, itemIndex) => (React__default.createElement(React__default.Fragment, { key: itemIndex },
+                    React__default.createElement("div", { className: "item-grid", key: itemIndex }, item)))))));
+        })),
+        isArrowShown && section < groups.length - 1 && (React__default.createElement("div", { className: `${classNameRightArrow} arrow-right`, onClick: () => handleClickArrow('forward'), "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel },
+            ' ',
+            arrowType === 'Care' ? (React__default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
+                React__default.createElement("g", { filter: "url(#filter0_dd_12597_34423)" },
+                    React__default.createElement("path", { d: "M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3C31.8368 3 39.0002 10.1634 39.0002 19C39.0002 27.8366 31.8368 35 23.0002 35C14.1637 35 7.00024 27.8366 7.00024 19Z", fill: "white" }),
+                    React__default.createElement("path", { d: "M24.0712 19L20.2502 15.179C19.8362 14.765 19.8362 14.093 20.2502 13.679C20.6642 13.265 21.3362 13.265 21.7502 13.679L26.3642 18.293C26.7552 18.684 26.7552 19.317 26.3642 19.707L21.7502 24.321C21.3362 24.735 20.6642 24.735 20.2502 24.321C19.8362 23.907 19.8362 23.235 20.2502 22.821L24.0712 19Z", fill: "#595959" }),
+                    React__default.createElement("path", { d: "M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z", fill: "#DBDFE5" })),
+                React__default.createElement("defs", null,
+                    React__default.createElement("filter", { id: "filter0_dd_12597_34423", x: "0.000244141", y: "0", width: "42", height: "42", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                        React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                        React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                        React__default.createElement("feOffset", { dx: "-2", dy: "2" }),
+                        React__default.createElement("feGaussianBlur", { stdDeviation: "2.5" }),
+                        React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0" }),
+                        React__default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_12597_34423" }),
+                        React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                        React__default.createElement("feOffset", { dx: "-1", dy: "1" }),
+                        React__default.createElement("feGaussianBlur", { stdDeviation: "1" }),
+                        React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0" }),
+                        React__default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_12597_34423", result: "effect2_dropShadow_12597_34423" }),
+                        React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_12597_34423", result: "shape" }))))) : (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" },
+                React__default.createElement("path", { d: "M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                React__default.createElement("path", { d: "M15.9998 20.8891L20.8887 16.0002L15.9998 11.1113", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                React__default.createElement("path", { d: "M11.1109 16L20.8887 16", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))),
+        isDotsShown && (React__default.createElement("ul", { className: "bullet-nav" }, groups.map((group, index) => (React__default.createElement("li", { key: index, className: "bullet-nav__item " },
+            React__default.createElement("p", { onClick: () => handleClick(index), className: `bullet-nav__link scroll ${section == index ? 'active' : null}`, "data-scheme": scheme })))))),
+        isImageGalleryShown && (React__default.createElement("div", { className: "image-gallery-wrapper", "data-test": groups.length }, groups.slice(0, 3).map((item, itemIndex) => (React__default.createElement("div", { className: `image-block ${section == itemIndex ? 'active' : null}`, key: itemIndex, onClick: () => handleClick(itemIndex), "data-scheme": scheme }, item)))))));
+};
+
+const StyledStatisticContainer = styled.div `
+  border-radius: ${theme.borderRadius};
+  ${(props) => props['data-is-in-card'] &&
+    `
+  padding: 12px; 
+  background-color: ${props['data-card-color']};`}
+`;
+const StyledDot = styled.div `
+  width: 13px;
+  height: 13px;
+  margin-right: 10px;
+  background-color: ${(props) => props['data-color']};
+  border-radius: 50%;
+`;
+const StyledDescriptionWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  color: ${theme.colors.gray800};
+  font-size: ${theme.sizes.fsParagraph4};
+  font-weight: ${theme.sizes.fwRegular};
+`;
+const StyledStatisticNumberWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  color: ${theme.colors.gray800};
+  font-size: ${theme.sizes.fsHeading2};
+  font-weight: ${theme.sizes.fwSemiBold};
+
+  & > svg {
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+  }
+
+  &[data-size='small'] {
+    margin-left: 23px;
+    font-size: ${theme.sizes.fsParagraph4};
+    font-weight: ${theme.sizes.fwBold};
+  }
+`;
+
+const StatisticCard = ({ type, description, value, withIcon, isInACard, cardColor, className, }) => {
+    return (React__default.createElement(StyledStatisticContainer, { className: className, "data-size": type, "data-is-in-card": type === 'big' && isInACard, "data-card-color": cardColor },
+        React__default.createElement(StyledDescriptionWrapper, null,
+            type === 'small' && React__default.createElement(StyledDot, { "data-color": cardColor }),
+            description),
+        React__default.createElement(StyledStatisticNumberWrapper, { "data-size": type },
+            type !== 'small' && withIcon,
+            value)));
+};
+
+const StyledTable = styled.table `
+  width: 100%;
+  position: relative;
+`;
+const Table = ({ children, className, style, horizontalPadding, verticalPadding, }) => {
+    return (React__default.createElement(StyledTable, { className: className, style: Object.assign({ '--horizontal-spacing': horizontalPadding || '19px', '--vertical-spacing': verticalPadding || '26px' }, style) }, children));
+};
+
+const StyledTableCell = styled.td `
+  padding: var(--vertical-spacing) var(--horizontal-spacing);
+  vertical-align: middle;
+
+  &[data-text-align='left'] {
+    text-align: left;
+  }
+  &[data-text-align='right'] {
+    text-align: right;
+  }
+  &[data-text-align='center'] {
+    text-align: center;
+  }
+`;
+const Cell = ({ children, className, style, textAlign, isTableHead, }) => {
+    return (React__default.createElement(StyledTableCell, { className: className, style: style, "data-text-align": textAlign ? textAlign : 'left', as: isTableHead ? 'th' : 'td' }, children));
+};
+
+const StyledTableRow = styled.tr `
+  border-bottom: 1px solid ${theme.colors.gray100};
+
+  &[data-is-active='true'] {
+    background-color: ${theme.colors.gray200};
+  }
+`;
+const Row = ({ children, className, style, isActive, onRowClicked, rowId, }) => {
+    return (React__default.createElement(StyledTableRow, { className: className, "data-is-active": isActive, style: style, onClick: () => {
+            onRowClicked && onRowClicked(rowId);
+        } }, children));
+};
+
+const StyledTableHead = styled.thead `
+  th {
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+    text-align: left;
+
+    color: ${theme.colors.gray500};
+    font-weight: ${theme.sizes.fwBold};
+  }
+  &[data-is-sticky] {
+    th {
+      position: sticky;
+      top: 0;
+      background: white;
+      border-bottom: 2px solid ${theme.colors.gray200};
+    }
+  }
+`;
+const Head = ({ isSticky, children, className, style }) => {
+    return (React__default.createElement(StyledTableHead, { className: className, "data-is-sticky": isSticky || undefined, style: style },
+        React__default.createElement(Row, null, children)));
+};
+
+const StyledTableBody = styled.tbody `
+  position: relative;
+  &[data-is-striped] {
+    > tr:nth-child(odd) {
+      background-color: ${theme.colors.neutral50};
+    }
+  }
+  &[data-is-hoverable] {
+    > tr:hover {
+      background-color: ${theme.colors.neutral100};
+    }
+  }
+`;
+const Body$1 = ({ children, className, style, isHoverable, isStriped, }) => {
+    return (React__default.createElement(StyledTableBody, { className: className, style: style, "data-is-striped": isStriped || undefined, "data-is-hoverable": isHoverable || undefined }, children));
+};
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Table: Table,
+  Cell: Cell,
+  Head: Head,
+  Row: Row,
+  Body: Body$1
+});
+
+var useStyles$3 = createStyles((theme) => {
+    const itemLabelRef = getStylesRef('itemLabel');
+    return {
+        root: {
+            display: 'inline-flex',
+            maxWidth: '100%',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+            '-webkit-overflow-scrolling': 'touch',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            '-ms-overflow-style': 'none' /* for Internet Explorer, Edge */,
+            'scrollbar-width': 'none' /* for Firefox */,
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+            columnGap: theme.spacing.lg,
+        },
+        item: {
+            display: 'flex',
+            alignItems: 'center',
+            paddingBottom: '4px',
+            '&:hover': {
+                cursor: 'pointer',
+            },
+            '&.active': {
+                color: theme.fn.primaryColor(),
+                borderBottom: `3px solid ${theme.fn.primaryColor()}`,
+                bottom: '-1px',
+                position: 'relative',
+                [`& .${itemLabelRef}`]: {},
+            },
+        },
+        itemInner: {
+            display: 'flex',
+            alignItems: 'center',
+        },
+        label: {
+            ref: itemLabelRef,
+        },
+        icon: {
+            marginRight: theme.spacing.xs,
+        },
+    };
+});
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Tabs = ({ style, initialTab, tabContent, onChange, className, dataEventCategory, dataEventAction, dataEventLabel, id, styles, }) => {
+    const { classes, cx, theme } = useStyles$3(undefined, { name: 'Tabs', styles });
+    const [activeTab, setActiveTab] = useState(initialTab || 0);
+    useEffect(() => {
+        setActiveTab(initialTab);
+    }, [initialTab]);
+    return (React__default.createElement("ul", { style: style, className: cx(classes.root, className), role: "tablist", id: id }, tabContent.map((tab, i) => (React__default.createElement("li", { className: `${classes.item} ${activeTab === i ? 'active' : ''} ${tab.className}`, "aria-selected": activeTab === i, role: "tab", onClick: () => {
+            setActiveTab(i);
+            onChange && onChange(i);
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                setActiveTab(i);
+                onChange && onChange(i);
+            }
+        }, 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.createElement("div", { className: classes.itemInner },
+            tab.icon && React__default.createElement("div", { className: classes.icon }, tab.icon),
+            React__default.createElement(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)))))));
+};
+
+const TRANSITION_TIMING = 200;
+const StyledFloatButtonGroup = styled.div ``;
+const StyledFloatButtonGroupBackgroundPanel = styled.div `
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: ${theme.colors.white};
+  opacity: 0.83;
+  transition: display ${TRANSITION_TIMING}ms linear;
+
+  [data-floatmenu-open='true'] & {
+    animation: showBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal
+      forwards;
+  }
+
+  [data-floatmenu-open='false'] & {
+    animation: hideBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal
+      forwards;
+  }
+
+  @keyframes showBackgroundPanel {
+    0% {
+      opacity: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    100% {
+      opacity: 0.83;
+    }
+  }
+
+  @keyframes hideBackgroundPanel {
+    0% {
+      width: 100vw;
+      height: 100vh;
+    }
+    99% {
+      width: 100vw;
+      height: 100vh;
+    }
+    100% {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+`;
+const StyledFloatButtonGroupContent = styled.div `
+  position: fixed;
+  right: 16px;
+  bottom: 40px;
+`;
+const StyledFloatButtonGroupItemsWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  transition: all ${TRANSITION_TIMING}ms ease-in-out;
+  position: fixed;
+  bottom: 112px;
+  right: 16px;
+
+  // scale
+  [data-animation-type='scale'] & {
+    transform-origin: 100% 100%;
+  }
+
+  [data-animation-type='scale'][data-floatmenu-open='true'] & {
+    transform: scale(1);
+  }
+
+  [data-animation-type='scale'][data-floatmenu-open='false'] & {
+    transform: scale(0);
+    bottom: 46px;
+    right: 36px;
+  }
+`;
+const StyledFloatButtonGroupToggleIcon = styled.div `
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  position: relative;
+  cursor: pointer;
+  margin-left: auto;
+  transition: all 0.1s linear;
+  -webkit-tap-highlight-color: transparent;
+  [data-site-type='hb'] & {
+    background-color: ${theme.colors.primaryBase};
+    &:hover {
+      background-color: ${theme.colors.primaryHover};
+    }
+  }
+  [data-site-type='mb'] & {
+    background-color: #2d87f3;
+    &:hover {
+      background-color: #2c74df;
+    }
+  }
+
+  &:before {
+    content: '';
+    width: 2px;
+    height: 20px;
+    background-color: ${theme.colors.white};
+    border-radius: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:after {
+    content: '';
+    width: 20px;
+    height: 2px;
+    background-color: ${theme.colors.white};
+    border-radius: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  [data-floatmenu-open='true'] &:before,
+  [data-floatmenu-open='true'] &:after {
+    animation: toX ${TRANSITION_TIMING}ms linear 0s normal forwards;
+  }
+
+  [data-floatmenu-open='false'] &:before,
+  [data-floatmenu-open='false'] &:after {
+    animation: toPlus ${TRANSITION_TIMING}ms linear 0s normal forwards;
+  }
+
+  @keyframes toX {
+    0% {
+      transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+    49% {
+      transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+    50% {
+      width: 2px;
+      height: 2px;
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+  }
+
+  @keyframes toPlus {
+    0% {
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+    49% {
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+    50% {
+      width: 2px;
+      height: 2px;
+      transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+  }
+`;
+const StyledFloatButtonGroupButton = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+
+  width: fit-content;
+  margin-left: auto;
+
+  [data-floatmenu-open='true'] {
+    cursor: pointer;
+  }
+  [data-floatmenu-open='false'] {
+    pointer-events: none;
+  }
+
+  [data-animation-type='zoom'] &,
+  [data-animation-type='slide'] & {
+    position: absolute;
+    right: 0;
+    width: max-content;
+  }
+  // slide
+  [data-animation-type='slide'] & {
+    transition: all ${TRANSITION_TIMING}ms ease-in;
+  }
+
+  [data-animation-type='slide'][data-floatmenu-open='true'] & {
+    animation: showItem ${TRANSITION_TIMING}ms;
+  }
+  [data-animation-type='slide'][data-floatmenu-open='false'] & {
+    bottom: -64px !important;
+    animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;
+  }
+
+  // zoom
+  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
+    animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;
+  }
+
+  @keyframes showItem {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes hideItemOnZoom {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    99% {
+      transform: translateX(0);
+      opacity: 0.5;
+    }
+
+    100% {
+      transform: translateX(calc(100% + 16px));
+      opacity: 0;
+    }
+  }
+`;
+const StyledFloatButtonGroupButtonLabel = styled.div `
+  font-size: 14px;
+
+  // zoom
+  [data-animation-type='zoom'] & {
+    transition: transform ${TRANSITION_TIMING}ms ease-in-out;
+    transform-origin: 100% 0;
+  }
+
+  [data-animation-type='zoom'][data-floatmenu-open='true'] & {
+    transform: scale(1);
+  }
+
+  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
+    transform: scale(0);
+  }
+
+  // slide
+  [data-animation-type='slide'] & {
+    transition: opacity ${TRANSITION_TIMING}ms;
+  }
+  [data-animation-type='slide'][data-floatmenu-open='true'] & {
+    opacity: 1;
+  }
+  [data-animation-type='slide'][data-floatmenu-open='false'] & {
+    opacity: 0;
+  }
+`;
+const StyledFloatButtonGroupButtonIcon = styled.div `
+  border-radius: 50%;
+  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${theme.colors.white};
+
+  // zoom
+  [data-animation-type='zoom'] & {
+    transition: transform ${TRANSITION_TIMING}ms ease-in-out;
+  }
+
+  [data-animation-type='zoom'][data-floatmenu-open='true'] & {
+    transform: scale(1);
+  }
+
+  [data-animation-type='zoom'][data-floatmenu-open='false'] & {
+    transform: scale(0);
+  }
+
+  > img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+  }
+`;
+
+const FloatButtonGroup = ({ items, className, style, backgroundPanelStyle, isOpen: isOpenProp, onOpen, onClose, disableBackdropClick, siteType = 'hb', animationType = 'zoom', zIndex = 300, }) => {
+    const [isOpen, setIsOpen] = useState(!!isOpenProp);
+    useEffect(() => {
+        setIsOpen(!!isOpenProp);
+    }, [isOpenProp]);
+    const handleOpen = () => {
+        setIsOpen(true);
+        if (onOpen) {
+            onOpen();
+        }
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    };
+    return (React__default.createElement(StyledFloatButtonGroup, { style: style, className: className, "data-floatmenu-open": isOpen, "data-site-type": siteType, "data-animation-type": animationType },
+        React__default.createElement(StyledFloatButtonGroupBackgroundPanel, { className: "float-button-group__panel", style: Object.assign({ zIndex }, backgroundPanelStyle), onClick: !disableBackdropClick ? handleClose : undefined }),
+        React__default.createElement(StyledFloatButtonGroupContent, { className: "float-button-group___content", style: { zIndex } },
+            React__default.createElement(StyledFloatButtonGroupItemsWrapper, null, items.map((item, index) => {
+                return (React__default.createElement(StyledFloatButtonGroupButton, { className: `float-item-button-${index}`, style: Object.assign(Object.assign({}, (animationType === 'zoom' && {
+                        bottom: (items.length - 1 - index) * (48 + 16),
+                        transitionDelay: `${(TRANSITION_TIMING / items.length) *
+                            (isOpen ? items.length - 1 - index : index)}ms`,
+                    })), (animationType === 'slide' && {
+                        bottom: (items.length - 1 - index) * (48 + 16),
+                        transitionDelay: `${(TRANSITION_TIMING / items.length) *
+                            (!isOpen ? items.length - 1 - index : index)}ms`,
+                    })), key: index, onClick: () => {
+                        item.onClick();
+                        if (!item.keepMenuOnClick) {
+                            setIsOpen(false);
+                        }
+                    } },
+                    React__default.createElement(StyledFloatButtonGroupButtonLabel, { style: Object.assign({}, (animationType === 'zoom' && {
+                            transitionDelay: `${(TRANSITION_TIMING / items.length) *
+                                (isOpen ? items.length - 1 - index : index)}ms`,
+                        })) }, item.label),
+                    React__default.createElement(StyledFloatButtonGroupButtonIcon, { className: "float-item-button__icon-wrapper", style: Object.assign({}, ((animationType === 'zoom' ||
+                            animationType === 'slide') && {
+                            transitionDelay: `${(TRANSITION_TIMING / items.length) *
+                                (isOpen ? items.length - 1 - index : index)}ms`,
+                        })) }, item.icon)));
+            })),
+            React__default.createElement(StyledFloatButtonGroupToggleIcon, { onClick: isOpen ? handleClose : handleOpen }))));
+};
+
+const StyledAcceptCardContainer = styled.div `
+  padding: 16px;
+  width: 375px;
+  word-wrap: break-word;
+  word-break: break-word;
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+  &[data-theme='helloSites'] {
+    background: ${theme.colors.secondaryBase};
+    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.1);
+  }
+  &[data-theme='marryBaby'] {
+    border: none;
+    background: ${theme.mbColors.pink};
+    border-radius: 12px 12px 0 0;
+  }
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-default-position='true'] {
+    position: fixed;
+    z-index: 1000;
+    bottom: 0;
+    right: 0;
+    ${MediaQueries.mbDown} {
+      left: 0;
+      right: unset;
+    }
+  }
+`;
+const StyledTitleSection = styled.p `
+  position: relative;
+  padding-left: 24px;
+  color: ${theme.colors.white};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  &[data-has-content='true'] {
+    ::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 16px;
+      height: 16px;
+      margin: auto 0;
+      content: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00001 1.33331C4.32001 1.33331 1.33334 4.31998 1.33334 7.99998C1.33334 11.68 4.32001 14.6666 8.00001 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00001 1.33331ZM8.00001 11.3333C7.63334 11.3333 7.33334 11.0333 7.33334 10.6666V7.99998C7.33334 7.63331 7.63334 7.33331 8.00001 7.33331C8.36668 7.33331 8.66668 7.63331 8.66668 7.99998V10.6666C8.66668 11.0333 8.36668 11.3333 8.00001 11.3333ZM7.33334 5.99998H8.66668V4.66665H7.33334V5.99998Z' fill='white'/%3e%3c/svg%3e");
+    }
+  }
+`;
+const StyledDescription = styled.p `
+  margin-top: 2px;
+  color: ${theme.colors.white};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  a {
+    color: ${theme.colors.white};
+    text-decoration: none;
+    text-decoration-line: underline;
+  }
+`;
+const StyledButtonGroup = styled.div `
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  gap: 16px;
+`;
+const StyledAcceptButton = styled.div `
+  padding: 7px 28px;
+  background: ${theme.colors.white};
+  border-radius: ${theme.borderRadius};
+  color: ${theme.colors.secondaryBase};
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+`;
+const StyledPoliciesButton = styled.a `
+  color: ${theme.colors.white};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 22px;
+  text-decoration: none;
+  text-decoration-line: underline;
+`;
+
+const CookieAcceptConfirm = ({ className, policiesUrl, onAcceptClick, translations = {
+    acceptButton: 'Accept',
+    policiesButton: 'Our Policies',
+}, title = '', description = '', theme = 'helloSites', isOpen = true, useDefaultPosition = true, trackingAttributes, }) => {
+    return (React__default.createElement(StyledAcceptCardContainer, { className: className, "data-theme": theme, "data-is-open": isOpen, "data-default-position": useDefaultPosition },
+        React__default.createElement(StyledTitleSection, { "data-has-content": !!title }, title),
+        React__default.createElement(StyledDescription, { dangerouslySetInnerHTML: {
+                __html: description,
+            } }),
+        React__default.createElement(StyledButtonGroup, null,
+            React__default.createElement(StyledAcceptButton, { role: "button", tabIndex: 0, onClick: onAcceptClick, "data-event-category": trackingAttributes === null || trackingAttributes === void 0 ? void 0 : trackingAttributes.dataEventCategory, "data-event-action": trackingAttributes === null || trackingAttributes === void 0 ? void 0 : trackingAttributes.dataEventAction, "data-event-label": trackingAttributes === null || trackingAttributes === void 0 ? void 0 : trackingAttributes.dataEventLabel }, translations.acceptButton),
+            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;
+    const robotIndex = isIndexable && isProduction
+        ? 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'
+        : 'noindex';
+    // const { locale = 'vi-VN', pathname, query } = router
+    const { NEXT_PUBLIC_BASE_API_URL } = process.env;
+    let newPath = SEOData.canonicalUrl || pathname;
+    Object.keys(query).forEach((key) => {
+        const queryItem = query[key];
+        if (queryItem && Array.isArray(queryItem)) {
+            newPath = newPath.replace(`[...${key}]`, queryItem.join('/'));
+        }
+    });
+    const sL = locale || 'en-PH'; // standardized locale
+    const siteUrl = siteType === 'helloSites' ? domainLocales[sL] : 'www.marrybaby.vn';
+    const hasSlash = newPath.endsWith('/') ? '' : '/';
+    // TODO: remove or replace html-react-parser
+    const metaData = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let resMetaData = '';
+        if (SEOData.apiMetaData && typeof SEOData.apiMetaData === 'string') {
+            const paginatedTitle = (_a = SEOData.apiMetaData) === null || _a === void 0 ? void 0 : _a.match(/<title.*?>(.*)<\/title>/);
+            const paginatedNumber = ` - Page ${currentPage} of ${totalPages}`;
+            const fD = currentPage && currentPage !== 1 && paginatedTitle
+                ? SEOData.apiMetaData
+                    .replace(paginatedTitle[0], paginatedTitle[0].includes('-')
+                    ? paginatedTitle[0].replace('-', paginatedNumber + ' - ')
+                    : `<title>${paginatedTitle[1].concat(paginatedNumber)}</title>`)
+                    .replace(`<link rel="canonical" href="https://${siteUrl}${newPath}${hasSlash}" />`, `<link rel="canonical" href="https://${siteUrl}${newPath}${hasSlash}?page=${currentPage}" />`)
+                : SEOData.apiMetaData;
+            resMetaData = parse(fD, { trim: true });
+            if (!resMetaData.find((data) => {
+                var _a, _b;
+                return ((_a = data.props) === null || _a === void 0 ? void 0 : _a.property) === 'og:image' ||
+                    ((_b = data.props) === null || _b === void 0 ? void 0 : _b.property) === 'og:image:secure_url';
+            })) {
+                const DefaultOgImage = `https://${siteUrl}/images/${locale}.png`;
+                resMetaData = [
+                    ...resMetaData,
+                    React__default.createElement("meta", { key: 'og:image', property: "og:image", content: ((_b = SEOData.openGraph) === null || _b === void 0 ? void 0 : _b.image) || SEOImage || DefaultOgImage || '' }),
+                    React__default.createElement("meta", { key: 'og:image:secure_url', property: "og:image:secure_url", content: ((_c = SEOData.openGraph) === null || _c === void 0 ? void 0 : _c.image) || SEOImage || DefaultOgImage }),
+                    React__default.createElement("meta", { key: 'og:image:width', property: "og:image:width", content: (((_d = SEOData.openGraph) === null || _d === void 0 ? void 0 : _d.imageWidth) &&
+                            String((_e = SEOData.openGraph) === null || _e === void 0 ? void 0 : _e.imageWidth)) ||
+                            (SEOImageWidth && String(SEOImageWidth)) ||
+                            '1200' }),
+                    React__default.createElement("meta", { key: 'og:image:height', property: "og:image:height", content: (((_f = SEOData.openGraph) === null || _f === void 0 ? void 0 : _f.imageHeight) &&
+                            String((_g = SEOData.openGraph) === null || _g === void 0 ? void 0 : _g.imageHeight)) ||
+                            (SEOImageHeight && String(SEOImageHeight)) ||
+                            '630' }),
+                ];
+            }
+        }
+        return resMetaData;
+    }, [
+        SEOData.apiMetaData,
+        SEOData.openGraph,
+        SEOImage,
+        SEOImageHeight,
+        SEOImageWidth,
+        currentPage,
+        newPath,
+        totalPages,
+        locale,
+        siteUrl,
+    ]);
+    const defaultImage = `https://${siteUrl}/images/${locale}.png`;
+    const fontUrl = siteType === 'marryBaby'
+        ? 'https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap'
+        : locale === 'km-KH'
+            ? 'https://fonts.googleapis.com/css2?family=Battambang:wght@400;700&display=swap'
+            : locale === 'th-TH'
+                ? 'https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wdth,wght@62.5..100,100..900&display=swap'
+                : 'https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap';
+    return (React__default.createElement(Head, null,
+        React__default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com" }),
+        React__default.createElement("link", { rel: "preload", href: fontUrl, as: "style" }),
+        React__default.createElement("link", { rel: "stylesheet", href: fontUrl }),
+        React__default.createElement("link", { rel: "preconnect", href: NEXT_PUBLIC_BASE_API_URL }),
+        React__default.createElement("meta", { charSet: "UTF-8" }),
+        React__default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" }),
+        React__default.createElement("meta", { name: "google", content: "notranslate" }),
+        React__default.createElement("meta", { name: "robots", content: robotIndex }),
+        React__default.createElement("meta", { property: "fb:app_id", content: "653713035016537" }),
+        customMetaData.map((customMeta, index) => {
+            return React__default.createElement("meta", Object.assign({ key: index }, customMeta));
+        }),
+        React__default.createElement("meta", { name: "theme-color", content: siteType === 'helloSites' ? '#2c87f3' : '#e85388' }),
+        React__default.createElement("meta", { name: "page_type", content: "Home" }),
+        React__default.createElement("meta", { name: "page_platform", content: "WEB" }),
+        React__default.createElement("meta", { name: "page_language", content: sL }),
+        React__default.createElement("meta", { name: "ahrefs-site-verification", content: "46e7521a2b89a1013149c4685bbe02a1d36a4732fef98655142b829bc87cba4d" }),
+        !metaData && (React__default.createElement(React__default.Fragment, null,
+            siteType === 'helloSites' ? (React__default.createElement("title", null, seoCustom
+                ? SEOTitle
+                : SEOTitle + ' - ' + ((_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.SITE_NAME))) : (React__default.createElement("title", null, SEOTitle)),
+            !hasNoCanonical && (React__default.createElement("link", { rel: "canonical", href: `https://${siteUrl}${newPath}` })),
+            React__default.createElement("meta", { name: "description", content: SEODescription || ((_b = SEOData.openGraph) === null || _b === void 0 ? void 0 : _b.description) }),
+            SEOData.schemaData && (React__default.createElement("script", { type: "application/ld+json", className: "yoast-schema-graph", dangerouslySetInnerHTML: { __html: SEOData.schemaData } })),
+            React__default.createElement("meta", { property: "og:locale", content: locale }),
+            React__default.createElement("meta", { property: "og:type", content: seoType || 'website' }),
+            React__default.createElement("meta", { property: "og:title", content: ((_c = SEOData.openGraph) === null || _c === void 0 ? void 0 : _c.title) || SEOTitle }),
+            React__default.createElement("meta", { property: "og:description", content: ((_d = SEOData.openGraph) === null || _d === void 0 ? void 0 : _d.description) || SEODescription }),
+            React__default.createElement("meta", { property: "og:url", content: `https://${siteUrl}${newPath}` }),
+            React__default.createElement("meta", { property: "og:site_name", content: `https://${siteUrl}` }),
+            React__default.createElement("meta", { property: "og:image", content: ((_e = SEOData.openGraph) === null || _e === void 0 ? void 0 : _e.image) || SEOImage || defaultImage || '' }),
+            React__default.createElement("meta", { property: "og:image:secure_url", content: ((_f = SEOData.openGraph) === null || _f === void 0 ? void 0 : _f.image) || SEOImage || defaultImage }),
+            React__default.createElement("meta", { property: "og:image:width", content: (((_g = SEOData.openGraph) === null || _g === void 0 ? void 0 : _g.imageWidth) &&
+                    String((_h = SEOData.openGraph) === null || _h === void 0 ? void 0 : _h.imageWidth)) ||
+                    (SEOImageWidth && String(SEOImageWidth)) ||
+                    '1200' }),
+            React__default.createElement("meta", { property: "og:image:height", content: (((_j = SEOData.openGraph) === null || _j === void 0 ? void 0 : _j.imageHeight) &&
+                    String((_k = SEOData.openGraph) === null || _k === void 0 ? void 0 : _k.imageHeight)) ||
+                    (SEOImageHeight && String(SEOImageHeight)) ||
+                    '630' }),
+            React__default.createElement("meta", { name: "twitter:card", content: "summary_large_image" }),
+            React__default.createElement("meta", { name: "twitter:title", content: ((_l = SEOData.twitter) === null || _l === void 0 ? void 0 : _l.title) || SEOTitle }),
+            React__default.createElement("meta", { name: "twitter:description", content: SEODescription }),
+            React__default.createElement("meta", { name: "twitter:image", content: ((_m = SEOData.twitter) === null || _m === void 0 ? void 0 : _m.image) || SEOImage }))),
+        (siteType === 'helloSites'
+            ? FAVICONS[sL] || []
+            : FAVICONS.marryBaby).map((item, index) => {
+            if (item.type === 'link') {
+                return (React__default.createElement("link", { key: `favicon-${index}`, rel: item.rel, href: item.href, sizes: item.sizes }));
+            }
+            if (item.type === 'meta') {
+                return React__default.createElement("meta", { key: index, name: item.name, content: item.content });
+            }
+            return null;
+        }),
+        Array.isArray(metaData) && !!forcedCanonicalUrl
+            ? metaData.filter((d) => d.props.name !== 'canonical' && d.props.rel !== 'canonical')
+            : metaData,
+        forcedCanonicalUrl && React__default.createElement("link", { rel: "canonical", href: forcedCanonicalUrl }),
+        !SEOData.hasNoAmp && locale !== 'vi-VN' && (React__default.createElement("link", { rel: "amphtml", href: `https://${siteUrl}${newPath}${hasSlash}?amp=1` })),
+        userId && typeof window !== 'undefined' ? (React__default.createElement("script", { dangerouslySetInnerHTML: {
+                __html: `window.dataLayer = window.dataLayer || []; window.dataLayer.push({'userID': '${userId}'});`,
+            } })) : null));
+};
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapper$1 = setDefaultClass(styled.div `
+    position: relative;
+    width: 100%;
+    height: 100%;
+  `, 'hhgcomp-toolbanner-wrapper');
+const StyledContainer = styled.div `
+  width: 100%;
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  background-color: ${(props) => props['data-banner-color'] || themeColors.blue[1]};
+
+  &[data-site='marryBaby'] {
+    a {
+      text-decoration: underline;
+    }
+    ${MediaQueries.mbDown} {
+      padding-bottom: 0;
+    }
+  }
+
+  ${MediaQueries.tdDown} {
+    height: auto;
+    ${StyledWrapper$1.classSelector} {
+      .${StyledInnerClass} {
+        display: flex;
+        align-items: center;
+        ${MediaQueries.mbDown} {
+          justify-content: space-between;
+        }
+        .${StyledIconContainerClass} {
+          position: relative;
+          right: -50px;
+          bottom: -20px;
+          width: 110px;
+          min-width: 0;
+          height: auto;
+          min-height: 0;
+          align-self: flex-end;
+          margin-bottom: -20px;
+          ${MediaQueries.mbDown} {
+            right: unset;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
+    link: '#',
+    reviewer: '',
+    date: '',
+}, icon, style, isPregTool, }) => {
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
+            a: {
+                textUnderlineOffset: '2px',
+                textDecoration: 'underline',
+            },
+        } },
+        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                __html: t('toolPage.toolReviewer', {
+                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
+                    date: medicalReview.date,
+                }),
+            } }))) : null;
+    return (React__default.createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]) },
+        React__default.createElement(StyledWrapper$1, null,
+            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24), '.heading': {} } },
+                React__default.createElement(Box, null,
+                    React__default.createElement(Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
+                    medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
+                React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
+                        width: rem(80),
+                        height: rem(80),
+                        borderRadius: isMarryBaby ? '24px' : '50%',
+                        backgroundColor: '#fff',
+                        flexShrink: 0,
+                        img: {
+                            maxWidth: rem(48),
+                            maxHeight: rem(48),
+                        },
+                        [theme.fn.smallerThan('sm')]: {
+                            width: rem(64),
+                            height: rem(64),
+                            img: {
+                                maxWidth: rem(40),
+                                maxHeight: rem(40),
+                            },
+                        },
+                    }) }, icon)))));
+};
+
+var useStyles$2 = createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const CardWrapperContext = createContext({});
+
+const Banner = (_a) => {
+    var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        styles,
+        classNames,
+    });
+    const { isPregTool } = useContext(CardWrapperContext);
+    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = createStyles(() => {
+    return {
+        root: {
+            padding: rem(16),
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
+};
+
+var useStyles = createStyles((theme, { isPregTool }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: rem(isMarryBaby ? 16 : 8),
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        radioLabel: {
+            fontSize: rem(16),
+        },
+        radioRoot: {
+            padding: `${rem(10)} 0`,
+            margin: 0,
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        inputWithUnit__wrapper: {
+            position: 'relative',
+        },
+        inputWithUnit__unit: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            paddingRight: rem(10),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        inputWithUnit__unitText: {
+            color: theme.colors.gray[6],
+        },
+        inputWithUnit__input: {
+            input: {
+                paddingRight: rem(30),
+                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+            },
+        },
+        submitBtn: {},
+        switchRoot: {
+            padding: '16px 0',
+        },
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
+    const { classes, cx } = useStyles({ isPregTool }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+        } },
+        React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+const DueDateCardEmbed = (_a) => {
+    var _b;
+    var { dueDatePageInfo, expertUrl, formProps } = _a, props = __rest(_a, ["dueDatePageInfo", "expertUrl", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { color: "pink", icon: React__default.createElement("img", { alt: "health-tool-icon", src: (dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.featured_image) ||
+                    CommonGAssets.getAssetPath('health-tools/due-date-icon.svg'), loading: "lazy" }), heading: t('healthTools.dueDateCalculator'), medicalReview: {
+                link: expertUrl,
+                reviewer: (_b = dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
+                date: dueDatePageInfo === null || dueDatePageInfo === void 0 ? void 0 : dueDatePageInfo.reviewed_date,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(DueDateForm, Object.assign({}, formProps)))));
+};
+
+const BMICardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { bmiContent, bmiGenerated, bmiUnit, formProps } = _a, props = __rest(_a, ["bmiContent", "bmiGenerated", "bmiUnit", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.featured_image) ||
+                    CommonGAssets.getAssetPath('health-tools/bmi.svg'), loading: "lazy" }), heading: t('bmi.heading'), medicalReview: {
+                link: (_b = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
+                date: (_d = bmiContent === null || bmiContent === void 0 ? void 0 : bmiContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps)))));
+};
+
+const BabyGrowthCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { babyGrowthContent, formProps } = _a, props = __rest(_a, ["babyGrowthContent", "formProps"]);
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { className: "embedded-icon", alt: "health-tool-icon", src: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.featuredImage) ||
+                    CommonGAssets.getAssetPath('health-tools/toolsIconBabyGrowth.svg'), loading: "lazy" }), heading: (babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.title) || '', medicalReview: {
+                link: (_b = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer.trim(),
+                date: (_d = babyGrowthContent === null || babyGrowthContent === void 0 ? void 0 : babyGrowthContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyGrowthForm, Object.assign({}, formProps)))));
+};
+
+const BabyPoopEmbed = (_a) => {
+    var { babyPoopPage, formProps } = _a, props = __rest(_a, ["babyPoopPage", "formProps"]);
+    const { reviewedBy, reviewedDate } = babyPoopPage || {};
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: babyPoopPage === null || babyPoopPage === void 0 ? void 0 : babyPoopPage.featuredImage, loading: "lazy" }), heading: babyPoopPage.title, medicalReview: {
+                link: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.profileUrl,
+                reviewer: reviewedBy === null || reviewedBy === void 0 ? void 0 : reviewedBy.displayName,
+                date: reviewedDate,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyPoopForm, Object.assign({ babyPoopPage: babyPoopPage }, formProps)))));
+};
+
+const THRCardEmbed = (_a) => {
+    var _b, _c;
+    var { thrContent, formProps } = _a, props = __rest(_a, ["thrContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (thrContent === null || thrContent === void 0 ? void 0 : thrContent.featured_image) ||
+                    CommonGAssets.getAssetPath('health-tools/target-heart-rate-icon.svg'), loading: "lazy" }), heading: t('targetHearRate.heading'), medicalReview: ((_b = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name)
+                ? {
+                    link: formatUserProfileUrl(thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy),
+                    reviewer: (_c = thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedBy) === null || _c === void 0 ? void 0 : _c.display_name,
+                    date: thrContent === null || thrContent === void 0 ? void 0 : thrContent.reviewedDate,
+                }
+                : undefined }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(ThrForm, Object.assign({}, formProps)))));
+};
+
+const BMRCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { bmrContent, bmiGenerated, bmiUnit, formProps } = _a, props = __rest(_a, ["bmrContent", "bmiGenerated", "bmiUnit", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.featured_image) ||
+                    CommonGAssets.getAssetPath('health-tools/bmr.svg'), loading: "lazy" }), heading: t('bmr.heading'), medicalReview: {
+                link: (_b = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link,
+                reviewer: (_c = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer,
+                date: (_d = bmrContent === null || bmrContent === void 0 ? void 0 : bmrContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BmiForm, Object.assign({ bmiGenerated: bmiGenerated, bmiUnit: bmiUnit }, formProps, { submitProps: Object.assign(Object.assign({}, formProps === null || formProps === void 0 ? void 0 : formProps.submitProps), { dataEventAction: 'BMR' }) })))));
+};
+
+const OvulationCardEmbed = (_a) => {
+    var _b;
+    var { ovulationPageInfo, expertUrl, formProps, isMobile } = _a, props = __rest(_a, ["ovulationPageInfo", "expertUrl", "formProps", "isMobile"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.featured_image) ||
+                    CommonGAssets.getAssetPath('health-tools/ovulation-icon.svg'), loading: "lazy" }), heading: t('healthTools.ovulationCalculator'), medicalReview: {
+                link: expertUrl,
+                reviewer: (_b = ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_by) === null || _b === void 0 ? void 0 : _b.display_name,
+                date: ovulationPageInfo === null || ovulationPageInfo === void 0 ? void 0 : ovulationPageInfo.reviewed_date,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(OvulationForm, Object.assign({ isMobile: isMobile }, formProps)))));
+};
+
+const BabyVaccineCardEmbed = (_a) => {
+    var _b, _c, _d;
+    var { babyVaccineContent, formProps } = _a, props = __rest(_a, ["babyVaccineContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({}, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.featuredImage) ||
+                    CommonGAssets.getAssetPath('health-tools/baby-vaccine-icon.svg'), loading: "lazy" }), heading: t('babyVaccineTool.heading'), medicalReview: {
+                link: ((_b = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _b === void 0 ? void 0 : _b.link) || '',
+                reviewer: ((_c = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _c === void 0 ? void 0 : _c.reviewer) || '',
+                date: ((_d = babyVaccineContent === null || babyVaccineContent === void 0 ? void 0 : babyVaccineContent.reviewBy) === null || _d === void 0 ? void 0 : _d.date) || '',
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(BabyVaccineForm, Object.assign({}, formProps)))));
+};
+
+const PWGCardEmbed = (_a) => {
+    var _b;
+    var { pwgContent, formProps } = _a, props = __rest(_a, ["pwgContent", "formProps"]);
+    const { t } = useTranslations();
+    return (React__default.createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default.createElement(HealthToolCardWrapper.Banner, { icon: React__default.createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+                    CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
+                link: formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
+                reviewer: (_b = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
+                date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
+            } }),
+        React__default.createElement(HealthToolCardWrapper.Body, null,
+            React__default.createElement(PWGForm, Object.assign({}, formProps)))));
+};
+
+const StyledCalendarWrapper$1 = styled.div `
+  flex: 1;
+`;
+const StyledCalendarCellsWrapper = styled.div `
+  padding: 0 10px;
+`;
+const StyledCalendarHead = styled.div `
+  display: flex;
+  height: 80px;
+  align-items: center;
+  .calendar-month {
+    font-size: 16px;
+    flex: 1;
+    text-align: center;
+    strong {
+      margin-left: 5px;
+    }
+  }
+  ${MediaQueries.mbDown} {
+    height: 70px;
+  }
+`;
+const StyledCalendarGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 2px;
+`;
+const StyledCalendarDaysOfWeek = styled(StyledCalendarGrid) `
+  margin-bottom: 8px;
+`;
+styled.div `
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledCalendarDayLabel = styled.div `
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: 1px solid ${theme.colors.gray800};
+  font-weight: 300;
+`;
+const StyledCalendarMonthSeparator = styled.div `
+  width: 18px;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 16px 0 0 0;
+    width: 1px;
+    left: 50%;
+    right: 50%;
+    background: ${theme.colors.neutral100};
+  }
+`;
+const StyledCalendarDaysWrapper = styled.div `
+  margin: 0 auto;
+`;
+const StyledCalendarMonthWrapper = styled.div `
+  position: relative;
+`;
+const StyledCalendarDateGrid = StyledCalendarGrid;
+const StyledCalendarDayNumberWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 34px;
+  ${MediaQueries.mbUp} {
+    height: 38px;
+  }
+  &[data-is-disabled='true'] {
+    opacity: 0.3;
+  }
+  &[data-in-range='true']:not([data-is-from='true'][data-is-to='true']) {
+    background-color: ${theme.colors.gray100};
+  }
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: ${theme.colors.gray100};
+  }
+  &[data-is-from='true'][data-in-range='true'][data-is-to='false'] {
+    background-color: transparent;
+    &:before {
+      content: '';
+      left: 50%;
+      right: 0;
+    }
+  }
+
+  &[data-is-to='true'][data-in-range='true'][data-is-from='false'],
+  &:hover[data-in-range='true']:is([data-has-range='false'] &) {
+    background-color: transparent;
+    &:before {
+      content: '';
+      left: 0;
+      right: 50%;
+    }
+  }
+`;
+const StyledCalendarDayNumber = styled.div `
+  position: relative;
+  font-weight: 600;
+  ${MediaQueries.mbDown} {
+    width: 32px;
+    height: 32px;
+  }
+  ${MediaQueries.mbUp} {
+    width: 36px;
+    height: 36px;
+  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  [data-is-disabled='true'] & {
+    cursor: not-allowed;
+  }
+  line-height: 1;
+  color: 1px solid ${theme.colors.gray800};
+  [data-is-selected='true'] &,
+  [data-is-today='true'] &,
+  [data-is-selected='false']:hover & {
+    border-radius: 32px;
+  }
+  [data-is-selected='true'] & {
+    background-color: ${theme.colors.primaryBase};
+    color: white;
+  }
+  [data-is-selected='false']:hover & {
+    background-color: ${theme.colors.primary50};
+  }
+  [data-is-today='true'][data-is-selected='false'] & {
+    background-color: transparent;
+    border-radius: 32px;
+    border: 1px solid ${theme.colors.primaryBase};
+  }
+`;
+
+function handleClickDay(d, range) {
+    if (!range.from && !range.to) {
+        return Object.assign(Object.assign({}, range), { from: d });
+    }
+    if (range.from && range.to) {
+        return { from: d, to: null };
+    }
+    if (range.from) {
+        if (isBefore(d, range.from)) {
+            return Object.assign(Object.assign({}, range), { from: d });
+        }
+        else {
+            return Object.assign(Object.assign({}, range), { to: d });
+        }
+    }
+    return range;
+}
+
+const dateLocaleByLocale = {
+    'en-PH': enUS,
+    'vi-VN': vi,
+    'zh-TW': zhTW,
+    'id-ID': id,
+};
+function DateRangePickerCalendar(props) {
+    const { value = { from: null, to: null } } = props;
+    const [hoverDay, setHoverDay] = useState(null);
+    const { isMobile } = useScreenSize();
+    const [range, setRange] = useState(() => value);
+    const [date, setDate] = useState(() => { var _a; return startOfMonth((_a = value.from) !== null && _a !== void 0 ? _a : new Date()); });
+    const nextMonth = useMemo(() => addMonths(date, 1), [date]);
+    function goToPreviousMonth() {
+        setDate((d) => subMonths(d, 1));
+    }
+    function goToNextMonth() {
+        setDate((d) => addMonths(d, 1));
+    }
+    const monthProps = Object.assign(Object.assign({}, props), { goToNextMonth,
+        goToPreviousMonth,
+        range,
+        setRange,
+        hoverDay,
+        setHoverDay });
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DateRangePickerCalendarMonth, Object.assign({}, monthProps, { date: date })),
+        !isMobile && React__default.createElement(StyledCalendarMonthSeparator, null),
+        !isMobile && (React__default.createElement(DateRangePickerCalendarMonth, Object.assign({}, monthProps, { date: nextMonth })))));
+}
+function DateRangePickerCalendarMonth({ date, 
+// value,
+range, setRange, onChange, goToPreviousMonth, goToNextMonth, minDate, maxDate, close = () => undefined, autoClose = false, hoverDay, setHoverDay, }) {
+    const { locale } = useTranslations();
+    const dateLocale = useMemo(() => { var _a; return (_a = dateLocaleByLocale[locale]) !== null && _a !== void 0 ? _a : dateLocaleByLocale['en-PH']; }, [locale]);
+    const monthLabel = useMemo(() => format(date, 'MMMM', { locale: dateLocale }), [date, dateLocale]);
+    const weekDays = useMemo(() => {
+        if (!dateLocale) {
+            return [];
+        }
+        return [1, 2, 3, 4, 5, 6, 0].map((i) => dateLocale.localize.day(i, { width: 'narrow' }));
+    }, [dateLocale]);
+    useEffect(() => {
+        if (range.from && range.to) {
+            onChange(range);
+        }
+    }, [range]);
+    function renderWeekDays() {
+        return (React__default.createElement(StyledCalendarDaysOfWeek, null, weekDays.map((d, i) => (React__default.createElement(StyledCalendarDayLabel, { key: `${d}-${i}` }, d)))));
+    }
+    function renderMonth() {
+        const year = date.getFullYear();
+        const monthIndex = date.getMonth();
+        const daysInMonth = getDaysInMonth(date);
+        const days = [];
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(new Date(year, monthIndex, i));
+        }
+        const weekDayIndex = days[0] ? days[0].getDay() : 0;
+        if (weekDayIndex !== 1) {
+            const idx = weekDayIndex === 0 ? 6 : weekDayIndex - 1;
+            for (let i = 0; i < idx; i++) {
+                days.unshift(null);
+            }
+        }
+        return (React__default.createElement(StyledCalendarMonthWrapper, { key: `month-${monthIndex}`, "data-month-index": monthIndex, "data-has-range": Boolean(range.from && range.to) },
+            React__default.createElement(StyledCalendarDaysWrapper, null,
+                React__default.createElement(StyledCalendarDateGrid, null, days.map(renderDay)))));
+    }
+    function renderDay(d, index) {
+        if (d === null) {
+            return (React__default.createElement(StyledCalendarDayNumberWrapper, { key: `idx-${index}`, "data-empty": "true" }));
+        }
+        const day = d.getDate();
+        const isDateToday = isToday(d);
+        const isFrom = range.from ? isSameDay(range.from, d) : false;
+        const isTo = range.to ? isSameDay(range.to, d) : false;
+        const isSelected = isFrom || isTo;
+        const hasHoveredDay = hoverDay !== null;
+        let inRange = false;
+        if (hasHoveredDay &&
+            range.from &&
+            isBefore(range.from, hoverDay) &&
+            !range.to) {
+            inRange = isWithinInterval(d, { start: range.from, end: hoverDay });
+        }
+        else if (range.from && range.to) {
+            inRange = isWithinInterval(d, { start: range.from, end: range.to });
+        }
+        let isDisabled = false;
+        if (minDate && maxDate) {
+            isDisabled = !isWithinInterval(d, { start: minDate, end: maxDate });
+        }
+        else if (minDate) {
+            isDisabled = isBefore(d, minDate);
+        }
+        else if (maxDate) {
+            isDisabled = isAfter(d, maxDate);
+        }
+        return (React__default.createElement(StyledCalendarDayNumberWrapper, { key: day, "data-is-today": isDateToday, "data-is-past": !isDateToday && isPast(d), "data-is-selected": isSelected, "data-is-disabled": isDisabled, "data-in-range": inRange, "data-is-from": isFrom, "data-is-to": isTo, onMouseEnter: () => {
+                setHoverDay(d);
+            }, onMouseLeave: () => setHoverDay(null), onClick: () => {
+                if (isDisabled) {
+                    return;
+                }
+                setRange((r) => {
+                    if (autoClose && range.from && !range.to) {
+                        close();
+                    }
+                    return handleClickDay(d, r);
+                });
+            } },
+            React__default.createElement(StyledCalendarDayNumber, { onClick: () => undefined },
+                React__default.createElement("p", null, day))));
+    }
+    return (React__default.createElement(StyledCalendarWrapper$1, { className: "calendar-wrapper" },
+        React__default.createElement(StyledCalendarHead, null,
+            React__default.createElement(Button, { onClick: goToPreviousMonth, size: "md", color: "ghost", icon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('calendarArrowLeft.svg'), loading: "lazy" }) }),
+            React__default.createElement("div", { className: "calendar-month" },
+                monthLabel,
+                React__default.createElement("strong", null, format(date, 'yyyy'))),
+            React__default.createElement(Button, { onClick: goToNextMonth, size: "md", color: "ghost", icon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('calendarArrowRight.svg'), loading: "lazy" }) })),
+        React__default.createElement(StyledCalendarCellsWrapper, null,
+            React__default.createElement("div", null, renderWeekDays()),
+            React__default.createElement("div", null, renderMonth()))));
+}
+
+const StyledWrapper = styled.div `
+  display: block;
+  position: relative;
+  width: 270px;
+  input {
+    pointer-events: none;
+    caret-color: transparent;
+  }
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const StyledCalendarWrapper = styled.div `
+  display: flex;
+  position: absolute;
+  top: 46px;
+  left: 0;
+  width: 684px;
+  border: 1px solid ${theme.colors.gray200};
+  filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
+    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
+    drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
+  border-radius: ${theme.borderRadius};
+  background-color: white;
+  z-index: 100;
+  padding-bottom: 16px;
+  align-items: stretch;
+  user-select: none;
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+function DateRangePicker({ inputSize = 'md', name = 'date-range-picker', value, minDate, maxDate, onChange, className, autoClose = false, }) {
+    if (!value) {
+        value = { from: null, to: null };
+    }
+    const [opened, setOpened] = useState(false);
+    function close() {
+        setOpened(false);
+    }
+    const ref = useRef(null);
+    useOutsideClick(ref, () => {
+        close();
+    });
+    function handleChange(nextValue) {
+        if (onChange) {
+            onChange(nextValue);
+        }
+    }
+    function formatDate(d) {
+        return format(d, 'dd/MM/yyyy');
+    }
+    const fieldValue = useMemo(() => {
+        if (value.from && value.to) {
+            if (isSameDay(value.from, value.to)) {
+                return formatDate(value.from);
+            }
+            return `${formatDate(value.from)} - ${formatDate(value.to)}`;
+        }
+        return '';
+    }, [value.from, value.to]);
+    function renderCalendar() {
+        return (React__default.createElement(DateRangePickerCalendar, { value: value, onChange: handleChange, minDate: minDate, maxDate: maxDate, close: close, autoClose: autoClose }));
+    }
+    return (React__default.createElement(StyledWrapper, { className: [className, opened && 'focused'].filter(Boolean).join(' '), ref: ref },
+        React__default.createElement("label", { htmlFor: name },
+            React__default.createElement(PureInput, { size: inputSize, value: fieldValue, name: name, actionIcon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('calendar.svg'), loading: "lazy" }), onFocus: () => setOpened(true) })),
+        opened ? (React__default.createElement(StyledCalendarWrapper, { onMouseDown: (e) => {
+                e.stopPropagation();
+            } }, renderCalendar())) : null));
+}
+
+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.createElement(Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
+    }
+    return (React__default.createElement("div", { className: styles.textLink, title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__default.createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
+};
+/**
+ * @deprecated
+ */
+const Breadcrumbs = ({ className, pages, size, LinkComponent = 'a', onChangePage, separator, }) => {
+    const mappedList = useMemo(() => pages
+        .map((item, index) => {
+        if (pages.length > 4) {
+            if (index > 1 && index < pages.length - 2)
+                return null;
+            if (index === 1) {
+                return Object.assign(Object.assign({}, item), { isDropdown: index === 1, dropdownItems: pages.slice(1, pages.length - 2) });
+            }
+            return item;
+        }
+        return item;
+    })
+        .filter(Boolean), [pages]);
+    return (React__default.createElement("div", { "data-size": size, className: `${styles.breadcrumb} ${className || ''}` }, mappedList.map((page, index) => {
+        const isLast = index + 1 === mappedList.length;
+        return (React__default.createElement(Fragment, { key: index },
+            React__default.createElement(BreadcrumbItem, { LinkComponent: LinkComponent, page: page, isLast: isLast, onChangePage: onChangePage }),
+            !isLast &&
+                (page.separator || separator || (React__default.createElement("div", { className: styles.separator, "data-size": size })))));
+    })));
+};
+
+const StyledShareContainer = styled.div `
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  .icon-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    a,
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+    .share {
+      width: 32px;
+      height: 32px;
+      padding: 8px;
+
+      &:hover {
+        background-color: ${theme.colors.neutral50};
+      }
+
+      svg {
+        margin: 0;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+`;
+
+const AttachIcon = () => {
+    return (React__default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" },
+        React__default.createElement("path", { d: "M6.86364 10.6666H5.22727C4.86912 10.6666 4.51448 10.5977 4.18359 10.4637C3.8527 10.3296 3.55205 10.1332 3.2988 9.8856C2.78734 9.3855 2.5 8.70722 2.5 7.99998C2.5 7.29274 2.78734 6.61446 3.2988 6.11436C3.81026 5.61426 4.50396 5.33331 5.22727 5.33331H6.86364M9.78374 5.33331H11.7727C12.1309 5.33331 12.4855 5.40229 12.8164 5.5363C13.1473 5.67031 13.4479 5.86674 13.7012 6.11436C13.9545 6.36198 14.1553 6.65596 14.2924 6.97949C14.4295 7.30303 14.5 7.64979 14.5 7.99998C14.5 8.35017 14.4295 8.69693 14.2924 9.02047C14.1553 9.344 13.9545 9.63798 13.7012 9.8856C13.4479 10.1332 13.1473 10.3296 12.8164 10.4637C12.4855 10.5977 12.1309 10.6666 11.7727 10.6666H9.78374", stroke: "#595959", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M6.5 8H10.5", stroke: "#595959", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+const ShareContainer = ({ url, onCopied, locale, siteType, }) => {
+    const { t } = useTranslations();
+    const socialList = getSocialList({ shareUrl: url || '', locale }).filter((s) => !s.allowedLocales || s.allowedLocales.includes(locale));
+    const copyToClipboard = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(url));
+        onCopied === null || onCopied === void 0 ? void 0 : onCopied();
+    });
+    const currentUrl = useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    return (React__default.createElement(StyledShareContainer, null,
+        React__default.createElement(Text, { size: "p3", color: theme.colors.gray800 }, t('shareContainer.title')),
+        React__default.createElement("div", { className: "icon-group" },
+            socialList.map((social, index) => (React__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.createElement(Button, { theme: siteType, size: "sm", type: "button", color: "tertiary", className: "share", style: {}, icon: React__default.createElement(AttachIcon, null), onClick: copyToClipboard, "data-event-category": "Health Tool", "data-event-action": "Copy Link", "data-event-label": currentUrl }))));
+};
+
+const StyledShareDrawer = styled(Drawer) `
+  padding-bottom: 24px;
+  .share-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+  .icon-group {
+    margin-top: 12px;
+    display: flex;
+    gap: 16px;
+    img {
+      border-radius: 8px;
+    }
+  }
+  .input-group {
+    margin-top: 8px;
+    display: flex;
+    gap: 8px;
+    button {
+      padding: 10px;
+      &:hover {
+        background-color: ${theme.colors.neutral50};
+      }
+    }
+    svg {
+      margin: 0;
+    }
+    a,
+    svg:not(.copy) {
+      width: 32px;
+      height: 32px;
+    }
+  }
+`;
+
+const CopyIcon = () => {
+    return (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: "copy" },
+        React__default.createElement("path", { d: "M4 2.5C3.17125 2.5 2.5 3.17125 2.5 4V13.75C2.5 14.164 2.836 14.5 3.25 14.5C3.664 14.5 4 14.164 4 13.75V4H13.75C14.164 4 14.5 3.664 14.5 3.25C14.5 2.836 14.164 2.5 13.75 2.5H4ZM7 5.5C6.17125 5.5 5.5 6.17125 5.5 7V16C5.5 16.8287 6.17125 17.5 7 17.5H16C16.8287 17.5 17.5 16.8287 17.5 16V7C17.5 6.17125 16.8287 5.5 16 5.5H7ZM7 7H16V16H7V7Z", fill: "#595959" })));
+};
+const ShareDrawer = (_a) => {
+    var { open, title, onClose, onCopied, onShared, url, locale } = _a, rest = __rest(_a, ["open", "title", "onClose", "onCopied", "onShared", "url", "locale"]);
+    const { t } = useTranslations();
+    const copyToClipboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        yield ((_b = navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) === null || _b === void 0 ? void 0 : _b.writeText(url));
+        onCopied === null || onCopied === void 0 ? void 0 : onCopied();
+    }), [url, onCopied]);
+    const socialList = getSocialList({ shareUrl: url || '', locale }).filter((platform) => !platform.allowedLocales || platform.allowedLocales.includes(locale));
+    useEffect(() => {
+        if (open && navigator.share) {
+            navigator
+                .share({
+                title: title !== null && title !== void 0 ? title : 'Read This Post',
+                url,
+            })
+                .then(() => {
+                onShared === null || onShared === void 0 ? void 0 : onShared();
+            })
+                .catch(() => {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            });
+        }
+    }, [url, title, onShared, open]);
+    if (typeof navigator !== 'undefined' && navigator.share) {
+        return null;
+    }
+    else {
+        return (React__default.createElement(StyledShareDrawer, Object.assign({ title: t('share.title'), onClose: onClose, open: open, placement: "bottom" }, rest),
+            React__default.createElement("div", { className: "share-container" },
+                React__default.createElement("div", { className: "icon-container" },
+                    React__default.createElement(Text, { weight: "semiBold", size: "s3", color: theme.colors.gray600 }, t('share.title')),
+                    React__default.createElement("div", { className: "icon-group" }, socialList.map((social, index) => (React__default.createElement("a", { key: index, href: social.href, target: "_blank", rel: "noreferrer" }, social.icon))))),
+                React__default.createElement("div", { className: "link-container" },
+                    React__default.createElement(Text, { weight: "semiBold", size: "s3", color: theme.colors.gray600 }, t('share.copyLink')),
+                    React__default.createElement("div", { className: "input-group" },
+                        React__default.createElement(Input, { name: "link", size: "md", value: url, isDisabled: true }),
+                        React__default.createElement(Button, { size: "md", type: "button", color: "tertiary", icon: React__default.createElement(CopyIcon, null), onClick: copyToClipboard }))))));
+    }
+};
+
+const StyledFixedAdBlock = styled.div `
+  position: fixed;
+  z-index: 48;
+  bottom: 0;
+  left: 50%;
+  width: fit-content;
+  max-width: 100%;
+  background: none;
+  transform: translateX(-50%);
+  .close-sticky-button {
+    position: absolute;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    background: #bfbfbf;
+    border-radius: 50%;
+    color: white;
+
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 12px;
+    transform: translate(50%, -50%);
+    top: 0;
+    right: 0;
+  }
+  opacity: 0;
+  pointer-events: none;
+  &[data-visible='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+const StyledAdContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  max-width: 100%;
+  width: fit-content;
+  height: fit-content;
+  margin-inline: auto;
+  /* margin: 1rem auto; */
+  &[data-no-wrapper='false'] {
+    border: 1px solid ${theme.colors.neutral50};
+    background: ${theme.colors.neutral50};
+  }
+  &[data-no-wrapper='true'] {
+    line-height: 0;
+  }
+  &[data-header-bottom='true'] {
+    flex-direction: column-reverse;
+    background: none;
+    border: none;
+  }
+`;
+/* background: ${theme.colors.neutral50}; */
+const StyledAdHeader = styled.div `
+  width: 100%;
+  padding: 0 5px 1.5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  text-transform: capitalize;
+  img {
+    height: 12px;
+    width: 12px;
+    max-width: 12px;
+    max-height: 12px;
+  }
+  &[data-header-bottom='true'] {
+    background: ${theme.colors.neutral50};
+  }
+  span {
+    font-size: 10px;
+    line-height: 12px;
+    color: ${theme.colors.gray400};
+    font-weight: 400;
+  }
+`;
+const StyledCloseBtn = styled.div `
+  background-color: white;
+  background-image: url(${CommonGAssets.getAssetPath('close-blue.svg')});
+  background-repeat: no-repeat;
+  background-size: 10px;
+  background-position: center;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  cursor: pointer;
+`;
+
+const SlotsById = {};
+const displayAd = ({ contentId, adUnitPath, size, divId, pos, sizeMapping, hideIfHasSubot, customTargetings, onSuccess, }) => {
+    if (!divId || !document.getElementById(divId))
+        return console.error('divId is required');
+    destroyAdSlot(divId);
+    window.googletag = window.googletag || { cmd: [] };
+    const { googletag } = window;
+    googletag.cmd.push(function () {
+        const $content_id_container = document.querySelector('meta[name="content_id"]');
+        const $content_id = typeof contentId === 'string' ? contentId : $content_id_container === null || $content_id_container === void 0 ? void 0 : $content_id_container.content;
+        const newSlot = googletag.defineSlot(adUnitPath, size, divId);
+        if (newSlot) {
+            try {
+                if (customTargetings) {
+                    Object.keys(customTargetings).forEach((k) => {
+                        if (k)
+                            newSlot === null || newSlot === void 0 ? void 0 : newSlot.setTargeting(k, customTargetings[k]);
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            SlotsById[divId] = newSlot;
+            newSlot.setTargeting('Pos', pos);
+            newSlot.addService(googletag.pubads());
+            if ($content_id)
+                newSlot.setTargeting('Content_ID', $content_id);
+            if (sizeMapping)
+                newSlot.defineSizeMapping(sizeMapping);
+            if (hideIfHasSubot && document.getElementById('subot--container')) {
+                newSlot.setTargeting('chatbot', true);
+            }
+            googletag.display(divId);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+        }
+    });
+};
+const destroyAdSlot = (divId) => {
+    if (SlotsById[divId]) {
+        window.googletag = window.googletag || { cmd: [] };
+        const { googletag } = window;
+        googletag.cmd.push(function () {
+            googletag.destroySlots([SlotsById[divId]]);
+            delete SlotsById[divId];
+        });
+    }
+};
+const DEFAULT_30S_AD_POS = [
+    'TopBanner',
+    'MidBanner1',
+    'MidBanner2',
+    'EndBanner',
+    'Sticky',
+];
+const ForwaredAdBlock = forwardRef(function InfinityAdBlock({ className, adUnitPath, size, divId, pos, sizeMapping, contentId, isHidden, hideIfHasSubot, isSticky, refreshInterval, // seconds
+customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, headerBottom, wrapperProps, locale, isMarryBaby, }, ref) {
+    const defaultRefreshInterval = refreshInterval ||
+        (locale === LOCALE.Vietnam
+            ? pos.some((p) => DEFAULT_30S_AD_POS.includes(p))
+                ? 30
+                : undefined
+            : undefined);
+    const { t } = useTranslations();
+    const containerRef = useRef(null);
+    const adRefreshIntervalRef = useRef(null);
+    const refreshIntervalRef = useRef(defaultRefreshInterval);
+    refreshIntervalRef.current = defaultRefreshInterval;
+    const [localCloseAd, setLocalCloseAd] = useState(false);
+    const adSlotChanged = () => {
+        if (refreshIntervalRef.current) {
+            if (adRefreshIntervalRef.current !== null) {
+                clearInterval(adRefreshIntervalRef.current);
+            }
+            adRefreshIntervalRef.current = window.setInterval(() => {
+                window.googletag = window.googletag || { cmd: [] };
+                const { googletag } = window;
+                googletag.cmd.push(function () {
+                    if (SlotsById[divId]) {
+                        googletag.pubads().refresh([SlotsById[divId]]);
+                    }
+                });
+            }, refreshIntervalRef.current * 1000);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            destroyAdSlot(divId);
+            if (adRefreshIntervalRef.current)
+                clearInterval(adRefreshIntervalRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        adSlotChanged();
+    }, [defaultRefreshInterval]);
+    useEffect(() => {
+        if (!isHidden) {
+            displayAd({
+                contentId,
+                adUnitPath,
+                size,
+                divId,
+                pos,
+                sizeMapping,
+                hideIfHasSubot,
+                customTargetings,
+                onSuccess: adSlotChanged,
+            });
+        }
+    }, [isHidden]);
+    if (localCloseAd)
+        return null;
+    const AdContent = (React__default.createElement("div", { style: {
+            position: 'relative',
+            width: 'fit-content',
+            height: 'fit-content',
+            overflow: 'hidden',
+            maxWidth: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } },
+        React__default.createElement("div", { ref: ref, id: divId }),
+        showCloseBtn && (React__default.createElement(StyledCloseBtn, { onClick: () => {
+                onCloseAd === null || onCloseAd === void 0 ? void 0 : onCloseAd();
+                setLocalCloseAd(true);
+            } }))));
+    if (isSticky)
+        return AdContent;
+    const minWidth = adDefaultSize
+        ? adDefaultSize[0]
+        : size
+            ? Array.isArray(size[0])
+                ? size[0][0]
+                : size[0]
+            : undefined;
+    const minHeight = adDefaultSize
+        ? adDefaultSize[1]
+        : size
+            ? Array.isArray(size[0])
+                ? size[0][1]
+                : size[1]
+            : undefined;
+    return (React__default.createElement(Box, Object.assign({}, wrapperProps, { className: className }),
+        React__default.createElement(StyledAdContainer, { ref: containerRef, className: className, style: style, "data-no-wrapper": !!noWrapper, "data-header-bottom": !!headerBottom }, noWrapper ? (AdContent) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(StyledAdHeader, { "data-header-bottom": !!headerBottom },
+                React__default.createElement("img", { src: isMarryBaby
+                        ? CommonGAssets.getAssetPath('adsIcon-mb.svg')
+                        : CommonGAssets.getAssetPath('adsIcon.svg'), alt: "", loading: "lazy" }),
+                React__default.createElement("span", null, t('adBanner.title'))),
+            React__default.createElement("div", { style: {
+                    minWidth: minWidth || '100%',
+                    minHeight: minHeight || '100%',
+                    position: 'relative',
+                } }, AdContent))))));
+});
+const AdBlock = memo(ForwaredAdBlock, (prevProps, nextProps) => {
+    return (prevProps.adUnitPath === nextProps.adUnitPath &&
+        prevProps.divId === nextProps.divId &&
+        prevProps.className === nextProps.className);
+});
+
+const FixedBottomAdBlock = ({ className, adUnitPath, divId, isMobile, contentId, customTargetings, locale, isMarryBaby, }) => {
+    const [hideAd, setHideAd] = useState(true);
+    const [userHideAd, setUserHideAd] = useState(false);
+    const [hidden, setHidden] = useState(true);
+    const adRef = useRef(null);
+    const mountRandRef = useRef(v4());
+    const fixedAdRef = useRef(null);
+    const timeoutRef = useRef();
+    const closeBtnTimeoutRef = useRef();
+    useEffect(() => {
+        const checkAdShowing = () => {
+            if (closeBtnTimeoutRef.current)
+                clearTimeout(closeBtnTimeoutRef.current);
+            closeBtnTimeoutRef.current = setTimeout(() => {
+                var _a;
+                if (document.getElementById('subot--container')) {
+                    setHideAd(true);
+                }
+                else {
+                    setHideAd(false);
+                    if (!((_a = adRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) {
+                        setHidden(true);
+                    }
+                    else {
+                        setHidden(false);
+                    }
+                }
+                checkAdShowing();
+            }, 4000);
+        };
+        checkAdShowing();
+        return () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+            closeBtnTimeoutRef.current && clearTimeout(closeBtnTimeoutRef.current);
+        };
+    }, []);
+    if (hideAd || userHideAd)
+        return null;
+    return (React__default.createElement(StyledFixedAdBlock, { key: isMobile ? 'mobile' : 'desktop', ref: fixedAdRef, className: className, "data-visible": !hidden }, adUnitPath && (React__default.createElement(AdBlock, { wrapperProps: { m: 0 }, ref: adRef, adUnitPath: adUnitPath, size: isMobile
+            ? [
+                [320, 50],
+                [320, 100],
+            ]
+            : [728, 90], divId: (divId || 'div-gpt-ad-sticky') +
+            (isMobile ? '-mobile' : '') +
+            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, BMICardEmbed as B, CategoryCard as C, DoctorInfo as D, FloatButtonGroup as F, IconText as I, MobileBottomNavigation as M, OvulationCardEmbed as O, 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, ToolsBannerCard as h, index$1 as i, DueDateCardEmbed as j, BabyGrowthCardEmbed as k, BabyPoopEmbed as l, THRCardEmbed as m, BMRCardEmbed as n, BabyVaccineCardEmbed as o, PWGCardEmbed as p, DateRangePicker as q, Breadcrumbs as r, ShareContainer as s, ShareDrawer as t, AdBlock as u, FixedBottomAdBlock as v };