@hhgtech/hhg-components 1.29.349 → 1.29.351-beta-1

package/build/esm/index-c34b3b5c.js

@@ -0,0 +1,494 @@
+import React__default, { useState, useMemo } from 'react';
+import { F as Flag } from './index-18cf18ca.js';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
+import { T as Text } from './index-4d85e9fa.js';
+import { C as CommonGAssets } from './index-8d0259ad.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
+import { V as VIDEO_DETAIL_TEMP_STORAGE } from './index-93dfd4e1.js';
+import { V as VideoType } from './index-6d7f28dd.js';
+import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
+import { a as abbreviateNumber } from './number-b1a85de9.js';
+import { u as useTranslations } from './index-fd5c91de.js';
+import { useOs } from '@mantine/hooks';
+import { M as Modal } from './index-5688184e.js';
+import { S as SocialLinkPreview } from './index-724296c1.js';
+import { domainLocales } from './constantsDomainLocales.js';
+
+const ALLOW_DOMAIN_URL = [
+    'hellobacsi.com',
+    'hellosehat.com',
+    'hellodoktor.com',
+    'hellokrupet.com',
+    'hellodoctor.com.ph',
+    'hellokhunmor.com',
+    'hellosayarwon.com',
+    'helloyishi.com.tw',
+    'helloswasthya.com',
+    'marrybaby.vn',
+    'hellohealth.questionpro.com',
+    'hellobacsivn.page.link',
+];
+const isInternalLink = (url = '') => {
+    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
+};
+
+const StyledLanguageChangeLink = styled.a `
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 11px;
+  gap: 2px;
+
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 20px;
+
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+`;
+
+const StyledSelectionContainer = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledSelectionLabel = styled.div `
+  position: relative;
+`;
+const StyleSelectionPopup = styled.div `
+  position: absolute;
+  z-index: 21;
+  top: 100%;
+  right: 0;
+  width: 327px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
+
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-show-indicator='true'] {
+    &:before {
+      position: absolute;
+      right: 11px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border: 0.5rem solid transparent;
+      border-top: none;
+      border-bottom-color: #fff;
+      content: '';
+      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+    }
+  }
+`;
+const StyledOption = styled.div `
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  border-radius: ${theme.borderRadius};
+  cursor: pointer;
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+  &[data-selected='false'] {
+    background-color: ${theme.colors.gray100};
+  }
+`;
+const StyledPopupBackground = styled.div `
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+`;
+
+const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledSelectionContainer, null,
+            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
+                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
+                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
+                        if (selected !== option.value) {
+                            onChange(option.value);
+                            setIsOpen((value) => !value);
+                        }
+                        e.stopPropagation();
+                    } },
+                    React__default.createElement(Text, { size: "p3" }, option.label),
+                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
+        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
+};
+
+const LanguageSwitcher = ({ languageOptions, locale }) => {
+    var _a, _b;
+    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
+    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
+        return null;
+    }
+    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
+            if (typeof window !== 'undefined') {
+                window.location.href = href;
+            }
+        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
+};
+const LanguageLabel = ({ locale, label, href, }) => {
+    var _a, _b, _c;
+    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
+        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
+        React__default.createElement("span", null, label)));
+};
+
+var useStyles$1 = createStyles((theme, { layout }) => {
+    return {
+        root: {
+            display: 'block',
+            transition: 'all .3s ease',
+            '&, & *': {
+                borderRadius: 4,
+            },
+            [theme.fn.largerThan('sm')]: Object.assign({}, (layout === 'overlay' && {
+                '&:hover': {
+                    '.overlay-info': {
+                        transform: 'translateY(-10px)',
+                    },
+                    '.item-overlay-wrapper': {
+                        backgroundColor: 'rgba(0,0,0,0.4)',
+                    },
+                },
+            })),
+        },
+        inner: Object.assign({ display: 'flex', gap: 8 }, (layout === 'horizon'
+            ? {
+                gap: 16,
+                alignItems: 'center',
+            }
+            : {
+                flexDirection: 'column',
+            })),
+        itemThumbImg: {},
+        thumbFrame: {
+            backgroundColor: '#000',
+        },
+        thumbWrapper: Object.assign({}, (layout === 'horizon' && {
+            width: 64,
+            flexShrink: 0,
+        })),
+        overlayWrapper: { transition: 'all .3s ease' },
+        overlay: {
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            right: 0,
+            backgroundImage: 'linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 100%)',
+            minHeight: 96,
+            padding: '16px 12px',
+            display: 'flex',
+            alignItems: 'flex-end',
+        },
+        overlayInfo: {
+            transition: 'all .3s ease',
+        },
+        title: Object.assign({}, (layout === 'overlay' && {
+            color: '#fff',
+        })),
+        subTitle: Object.assign({ span: {
+                margin: '0 4px',
+                position: 'relative',
+                color: '#595959',
+                '&:before': {
+                    content: '"."',
+                    position: 'absolute',
+                    top: -5,
+                    fontSize: '14px',
+                },
+            } }, (layout === 'overlay' && {
+            color: '#fff',
+        })),
+    };
+});
+
+const ShortsItem = (_a) => {
+    var { data, layout, styles } = _a, boxProps = __rest(_a, ["data", "layout", "styles"]);
+    const { title, totalView, imageMedium, createTime } = data;
+    const { classes, cx } = useStyles$1({ layout }, {
+        name: 'VideoItem__ShortsItem',
+        styles,
+    });
+    const { t } = useTranslations();
+    const subTitle = useMemo(() => [
+        totalView &&
+            t('common.totalView', {
+                number: abbreviateNumber(totalView),
+            }),
+        createTime,
+    ]
+        .filter(Boolean)
+        .join('<span class="divider">&nbsp;</span>'), [totalView, createTime]);
+    const infoEle = useMemo(() => (React__default.createElement(Stack, { spacing: 4, className: cx(classes.overlayInfo, 'overlay-info') },
+        React__default.createElement(Text, { size: "s3", className: cx(classes.title), lineClamp: 2 }, title),
+        React__default.createElement(Text, { className: classes.subTitle, size: "n1", dangerouslySetInnerHTML: {
+                __html: subTitle,
+            } }))), [title, subTitle]);
+    return (React__default.createElement(Box, Object.assign({}, boxProps, { className: classes.root }),
+        React__default.createElement(Box, { className: classes.inner },
+            React__default.createElement("div", { className: classes.thumbWrapper },
+                React__default.createElement(AspectRatio, { ratio: 240 / 431, className: classes.thumbFrame },
+                    React__default.createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy" }),
+                    layout === 'overlay' && (React__default.createElement(Box, { className: cx(classes.overlayWrapper, 'item-overlay-wrapper') },
+                        React__default.createElement(Box, { className: cx(classes.overlay, 'item-overlay') }, infoEle))))),
+            layout !== 'overlay' && infoEle)));
+};
+
+const Play = (_a) => {
+    var { size = 24, color = theme.colors.neutral600 } = _a, rest = __rest(_a, ["size", "color"]);
+    return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 47 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M23.297 43.153c10.55 0 19.103-8.64 19.103-19.298S33.847 4.557 23.297 4.557 4.193 13.197 4.193 23.855s8.553 19.298 19.104 19.298", fill: color, fillOpacity: ".75" }),
+        React__default.createElement("path", { d: "m19.477 16.136 11.462 7.719-11.462 7.72z", fill: "#fff", stroke: "#fff", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+
+var useStyles = createStyles((theme, { active, layout }) => {
+    return {
+        root: {
+            display: 'block',
+            borderRadius: 4,
+            [theme.fn.largerThan('sm')]: {
+                '&:hover': {
+                    [`.${getStylesRef('overlay')}`]: Object.assign({}, (!active && {
+                        backgroundColor: 'rgba(0, 0, 0, .4)',
+                    })),
+                },
+            },
+        },
+        inner: Object.assign(Object.assign({ display: 'flex', gap: 8 }, (layout === 'default' && {
+            flexDirection: 'column',
+        })), (layout === 'horizon' && {
+            gap: 12,
+            [theme.fn.largerThan('sm')]: {
+                gap: 24,
+            },
+        })),
+        thumb: Object.assign({}, (layout === 'horizon' && {
+            width: 140,
+            flexShrink: 0,
+            [theme.fn.largerThan('sm')]: {
+                width: 164,
+            },
+        })),
+        thumbWrapper: {},
+        thumbFrame: {},
+        title: {
+            lineHeight: rem(22),
+        },
+        subTitle: {
+            span: {
+                margin: '0 4px',
+                position: 'relative',
+                '&:before': {
+                    content: '"."',
+                    position: 'absolute',
+                    top: -5,
+                    fontSize: '14px',
+                },
+            },
+        },
+        overlay: {
+            ref: getStylesRef('overlay'),
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: active ? 'rgba(0, 0, 0, .55)' : 'transparent',
+            transition: 'all .2s ease',
+        },
+        duration: {
+            position: 'absolute',
+            zIndex: 0,
+            background: '#262626',
+            borderRadius: 4,
+            bottom: 4,
+            right: 4,
+            padding: `${rem(1)} ${rem(4)}`,
+        },
+        durationTxt: {
+            color: '#fff',
+        },
+    };
+});
+
+function secondsTo24HoursFormat(sec_num = 0) {
+    const hours = Math.floor(sec_num / 3600);
+    const minutes = Math.floor((sec_num - hours * 3600) / 60);
+    const seconds = sec_num - hours * 3600 - minutes * 60;
+    let hoursStr = String(hours);
+    let minutesStr = String(minutes);
+    let secondsStr = String(seconds);
+    if (hours < 10) {
+        hoursStr = '0' + hours;
+    }
+    if (minutes < 10) {
+        minutesStr = '0' + minutes;
+    }
+    if (seconds < 10) {
+        secondsStr = '0' + seconds;
+    }
+    return (hours > 0 ? hoursStr + ':' : '') + minutesStr + ':' + secondsStr;
+}
+
+const VideoItem$1 = (_a) => {
+    var { isMobile, data, styles, className, classNames, layout } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout"]);
+    const { title, imageMedium, createTime, totalView, active, duration } = data;
+    const { locale, t } = useTranslations();
+    const { cx, classes, theme } = useStyles({ active, layout }, { name: 'VideoItem__VideoItem', classNames, styles });
+    const subTitle = useMemo(() => [
+        totalView &&
+            t('common.totalView', { number: abbreviateNumber(totalView) }),
+        createTime,
+    ]
+        .filter(Boolean)
+        .join('<span class="divider">&nbsp;</span>'), [totalView, createTime]);
+    return (React__default.createElement(Box, Object.assign({}, boxProps, { className: cx(className, classes.root) }),
+        React__default.createElement(Box, { className: classes.inner },
+            React__default.createElement(Box, { className: classes.thumbWrapper },
+                React__default.createElement(Box, { className: classes.thumb, sx: () => ({
+                        position: 'relative',
+                        'div, img': {
+                            borderRadius: 4,
+                        },
+                    }) },
+                    React__default.createElement(AspectRatio, { ratio: 264 / 148, className: classes.thumbFrame },
+                        React__default.createElement("img", { loading: "lazy", src: imageMedium ||
+                                CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`), alt: title, onError: (e) => {
+                                e.currentTarget.src = CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
+                            } })),
+                    duration && (React__default.createElement(Box, { className: classes.duration },
+                        React__default.createElement(Text, { size: "n1", className: classes.durationTxt }, secondsTo24HoursFormat(duration)))),
+                    React__default.createElement(Flex, { className: classes.overlay, align: 'center', justify: 'center' }, active ? (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default.createElement(Play, { size: isMobile ? 32 : 46 }))))),
+            React__default.createElement(Stack, { sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
+                React__default.createElement(Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2 }, title),
+                React__default.createElement(Text, { className: classes.subTitle, size: "n1", color: "#595959", dangerouslySetInnerHTML: {
+                        __html: subTitle,
+                    } })))));
+};
+
+const VideoPlayerModal = (_a) => {
+    var { data, isMobile } = _a, rest = __rest(_a, ["data", "isMobile"]);
+    const { type, videoId, url } = data;
+    const os = useOs();
+    const isIos = os === 'ios';
+    return (React__default.createElement(Modal, Object.assign({ size: type === VideoType.SHORTS ? (isMobile ? 360 : 375) : rem(1128), withCloseButton: true, styles: (theme) => ({
+            header: {
+                padding: 0,
+                paddingBottom: 8,
+                backgroundColor: 'transparent',
+                border: 0,
+                [theme.fn.smallerThan('sm')]: {
+                    position: 'absolute',
+                    top: 10,
+                    right: 10,
+                },
+            },
+            body: {
+                padding: 0,
+            },
+            content: {
+                boxShadow: 'none',
+                backgroundColor: 'transparent',
+                borderRadius: 0,
+                [theme.fn.largerThan('sm')]: {
+                    position: 'relative',
+                },
+            },
+            heading: {
+                [theme.fn.smallerThan('sm')]: {},
+            },
+            inner: {
+                [theme.fn.smallerThan('sm')]: {
+                    padding: 0,
+                },
+            },
+            close: {
+                color: '#fff',
+                backgroundColor: '#000',
+                borderRadius: '50%',
+                width: 24,
+                height: 24,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                transition: 'all .3s ease',
+                svg: {
+                    width: '18px !important',
+                    height: '18px !important',
+                },
+                '&:hover': {
+                    backgroundColor: '#fff',
+                    color: '#000',
+                },
+            },
+            overlay: {
+                [theme.fn.smallerThan('sm')]: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+                },
+            },
+        }) }, rest), type === VideoType.SHORTS ? (React__default.createElement(AspectRatio, { ratio: 315 / 560 },
+        React__default.createElement("iframe", { width: "100%", height: "100%", src: `https://www.youtube.com/embed/${videoId}?autoplay=${Number(!isIos)}`, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media;\ngyroscope; picture-in-picture;\nweb-share", allowFullScreen: true }))) : (React__default.createElement(SocialLinkPreview, { key: url, url: url || '', autoPlay: !isIos }))));
+};
+
+const VideoItem = (_a) => {
+    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile } = _a, props = __rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile"]);
+    const { articleLink, id, videoId, title, url, type } = data;
+    const [showModal, setShowModal] = useState(false);
+    const href = useMemo(() => articleLink || `/videos/${type}/?id=${id}`, []);
+    const { locale } = useTranslations();
+    const commonProps = {
+        component: 'a',
+        href,
+        target: articleLink ? '_blank' : '_self',
+        'data-event-category': dataEventCategory,
+        'data-event-action': dataEventAction,
+        'data-event-label': `https://${domainLocales[locale]}${href}`,
+        onClick: disableDefaultFn
+            ? onClick
+            : !articleLink
+                ? (e) => {
+                    if (redirectToLandingPage) {
+                        localStorage.setItem(VIDEO_DETAIL_TEMP_STORAGE, JSON.stringify({
+                            articleLink,
+                            id,
+                            videoId,
+                            title,
+                            url,
+                            type,
+                        }));
+                    }
+                    else {
+                        e.preventDefault();
+                        setShowModal(true);
+                    }
+                }
+                : undefined,
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        type === VideoType.VIDEO || type === VideoType.PODCAST ? (React__default.createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile }))) : type === VideoType.SHORTS ? (React__default.createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile }))) : null,
+        !articleLink && (React__default.createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
+};
+
+export { LanguageSwitcher as L, VideoItem as V, VideoPlayerModal as a, isInternalLink as i };

package/build/esm/{index-92e61bb7.js → index-c3938494.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-eb34e967.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-5a720548.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-f5c3297f.js';
-import { I as Icon } from './index-85f75df4.js';
-import { _ as __rest } from './tslib.es6-bea6774f.js';
-import { U as UserAvatar } from './index-29e95d32.js';
-import { I as ImageWrap, u as useScreenSize } from './useScreenSize-a0bc6826.js';
-import './index-2a66607f.js';
-import { C as CommonGAssets } from './index-e0c9065b.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-206705f4.js';
-import { B as Button } from './index-0ed85b02.js';
-import { T as Text } from './index-b605d917.js';
+import { u as useTranslations } from './index-fd5c91de.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-339046f6.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-f8313571.js';
+import { I as Icon } from './index-96b168c1.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
+import { U as UserAvatar } from './index-63abdccd.js';
+import { I as ImageWrap, u as useScreenSize } from './useScreenSize-b689324f.js';
+import './index-93dfd4e1.js';
+import { C as CommonGAssets } from './index-8d0259ad.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-1ef10b87.js';
+import { B as Button } from './index-e4fea84c.js';
+import { T as Text } from './index-4d85e9fa.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { keyframes } from '@emotion/react';
-import { H as Heading } from './index-3f770afe.js';
-import { M as Modal } from './index-7598d2cd.js';
+import { L as Loading } from './index-70726722.js';
+import { H as Heading } from './index-f7236114.js';
+import { M as Modal } from './index-5688184e.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -257,52 +257,6 @@ var CloseLight = img$5;
 var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3e%3cpath fill='white' stroke='%23E4E8EC' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16'/%3e%3cpath fill='%23FF5331' d='M10.333 7.667V5H7.667v2.667H5v2.667h2.667V13h2.666v-2.666H13V7.667z'/%3e%3c/svg%3e";
 var ReviewerMedical = img$4;
 
-const StyledLoading = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1em;
-  button {
-    position: relative;
-  }
-`;
-const circle = keyframes `
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-styled.div `
-  display: flex;
-  width: fit-content;
-  width: -moz-fit-content;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 2rem;
-  background: white;
-  border-radius: ${theme.borderRadius};
-  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-    -2px 2px 5px rgba(67, 86, 100, 0.123689);
-  .loading-spinner {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 0.5rem;
-    animation: ${circle} 1.2s linear infinite;
-  }
-  &[data-is-marrybaby='true'] {
-    box-shadow: none;
-  }
-`;
-
-const Loading = ({ className, size = 'md' }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement(StyledLoading, { className: className },
-        React__default.createElement(Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
-};
-
 const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId, locale, isMobile, overwriteProfileProps, avatarFallback = CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
     var _a, _b, _c;
     const { t } = useTranslations();
@@ -957,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-8601b6b7.js').then((module) => {
+                import('./index-ffbb311f.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }
@@ -1038,4 +992,4 @@ CardAuthor.SubDivider = CardAuthor$1.SubDivider;
 CardAuthor.AuthorBadge = AuthorBadgeItem;
 CardAuthor.DisplayName = DisplayName;
 
-export { CardAuthor as C, Loading as L, PopupExpert as P, PopupDoctor as a, PopupHospital as b, ProfileDetailModal as c, CardAuthor$1 as d };
+export { CardAuthor as C, PopupExpert as P, PopupDoctor as a, PopupHospital as b, ProfileDetailModal as c, CardAuthor$1 as d };

package/build/esm/{index-c5febaaf.js → index-c61a5d08.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-5a720548.js';
+import { M as MediaQueries } from './utils-339046f6.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-750e1404.js → index-cd8d5fb2.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-bea6774f.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import './index-75b6adf7.js';
-import { D as DatePicker } from './index-3e24192c.js';
-import './index-b605d917.js';
-import './index-ff8fa730.js';
-import './index.styles-f1d20f0b.js';
-import { u as useTranslations } from './index-eb34e967.js';
+import './index-18cf18ca.js';
+import { D as DatePicker } from './index-d021d300.js';
+import './index-4d85e9fa.js';
+import './index-4b466fad.js';
+import './index.styles-4f9afc01.js';
+import { u as useTranslations } from './index-fd5c91de.js';
 import '@mantine/hooks';
-import './useMantineLocale-b482abdd.js';
-import './index-def423d4.js';
-import './index-e0c9065b.js';
-import './utils-5a720548.js';
-import './index-2a66607f.js';
-import './other-5df2ee98.js';
-import './index-c15ae10d.js';
-import { H as HealthToolFormWrapper } from './index-5e8cc822.js';
-import { G as GenderOptionControl } from './index-cf0e1b27.js';
+import './useMantineLocale-2f880379.js';
+import './index-6d7f28dd.js';
+import './index-8d0259ad.js';
+import './utils-339046f6.js';
+import './index-93dfd4e1.js';
+import './other-9a23db32.js';
+import './index-56a0dca0.js';
+import { H as HealthToolFormWrapper } from './index-ea222e0d.js';
+import { G as GenderOptionControl } from './index-ddd68f2b.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyVaccineFormContext = createContext({});

package/build/esm/{index-3e24192c.js → index-d021d300.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-bea6774f.js';
+import { _ as __rest } from './tslib.es6-cfddefe9.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-2a66607f.js';
-import './index-def423d4.js';
-import { C as CommonGAssets } from './index-e0c9065b.js';
-import { M as MAPPED_LOCALE } from './useMantineLocale-b482abdd.js';
-import { L as LOCALE } from './Locale-9dea4d4a.js';
+import { I as ISO_FORMAT } from './index-93dfd4e1.js';
+import './index-6d7f28dd.js';
+import { C as CommonGAssets } from './index-8d0259ad.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-2f880379.js';
+import { L as LOCALE } from './Locale-9b494286.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {