@hhgtech/hhg-components 1.29.316 → 1.29.318

package/build/esm/fixedBottomAdBlock-9884e4b5.js

@@ -1,2464 +0,0 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-7b679571.js';
-import React__default, { useState, useImperativeHandle, useRef, useEffect, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
-import { R as Radio } from './index-1beaeca3.js';
-import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
-import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-69970766.js';
-import './index-c11b8dff.js';
-import { C as CommonGAssets } from './index-47bb701e.js';
-import './useMantineLocale-ae231834.js';
-import { T as Text } from './index-fe677fdb.js';
-import './index-a8149756.js';
-import './index.styles-55399ea5.js';
-import './translationsContext-4395f3a7.js';
-import '@mantine/hooks';
-import { M as MediaQueries } from './utils-5a447836.js';
-import './other-4932cd4d.js';
-import './index-4436c06c.js';
-import { i as isInternalLink } from './index-9e5ea0a9.js';
-import styled from '@emotion/styled';
-import { theme } from './miscTheme.js';
-import { C as Checkbox, P as PureInput } from './index-a2b5b4b6.js';
-import { L as Logo } from './index-d245941f.js';
-import throttle from 'lodash/throttle';
-import parse from 'html-react-parser';
-import { domainLocales } from './constantsDomainLocales.js';
-import { isProduction } from './constantsIsProduction.js';
-import { isBefore, startOfMonth, addMonths, format, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
-import { a as useOutsideClick } from './useOutsideClick-5e19773a.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-2a639b6d.js';
-import { u as useScreenSize } from './useScreenSize-231312d5.js';
-import { u as useTranslations } from './index-a8312f28.js';
-import { D as Dropdown } from './index-9b00e9be.js';
-import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-f3e6fe75.js';
-import { D as Drawer } from './index-df4b6075.js';
-import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-26277c1c.js';
-
-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 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 = ({ 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
-});
-
-var useStyles = 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(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 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 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 { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DoctorInfo as D, FloatButtonGroup as F, IconText as I, RadioGroup as R, ScrollList as S, Tabs as T, CheckboxGroup as a, StatisticCard as b, index as c, CookieAcceptConfirm as d, SeoHead as e, DateRangePicker as f, ShareContainer as g, ShareDrawer as h, index$1 as i, FixedBottomAdBlock as j };