@hhgtech/hhg-components 1.29.532 → 1.29.533-beta-1

package/build/esm/{SiteWideBanner-fbb357d4.js → SiteWideBanner-19fcc647.js}

@@ -1,22 +1,22 @@
 import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
-import { F as Flag } from './index-d5050a14.js';
+import { F as Flag } from './index-cef981a3.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-72bb84ba.js';
-import { C as CommonGAssets } from './index-12605605.js';
-import { _ as __rest } from './tslib.es6-1cd753c3.js';
-import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-709c1b4a.js';
-import { V as VideoType } from './index-fa17f83f.js';
-import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-f225de0f.js';
-import { u as useTranslations } from './index-9351c606.js';
+import { T as Text } from './index-08e4d77f.js';
+import { C as CommonGAssets } from './index-2b898dc6.js';
+import { _ as __rest } from './tslib.es6-f12507c0.js';
+import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-996375fb.js';
+import { V as VideoType } from './index-843eb5f7.js';
+import { createStyles, Stack, Box, rem, Skeleton, AspectRatio, getStylesRef, Flex } from '@mantine/core';
+import { a as abbreviateNumber } from './number-ce07149e.js';
+import { u as useTranslations } from './index-487c8a99.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-f9bb3e38.js';
-import { S as SocialLinkPreview } from './index-b9aaced9.js';
+import { M as Modal } from './index-67cb0685.js';
+import { S as SocialLinkPreview } from './index-99d8aab7.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { Close } from '@hhgtech/icons/core';
 import Cookies from 'js-cookie';
-import { M as MediaQueries } from './utils-f93704dc.js';
+import { M as MediaQueries } from './utils-2af6eed8.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',
@@ -159,7 +159,7 @@ const LanguageLabel = ({ locale, label, href, }) => {
         React__default.createElement("span", null, label)));
 };
 
-var useStyles$1 = createStyles((theme, { layout }) => {
+var useStyles$1 = createStyles((theme, { layout, useSquareRatioThumbnail }) => {
     return {
         root: {
             display: 'block',
@@ -167,16 +167,15 @@ var useStyles$1 = createStyles((theme, { layout }) => {
             '&, & *': {
                 borderRadius: 4,
             },
-            [theme.fn.largerThan('sm')]: Object.assign({}, (layout === 'overlay' && {
-                '&:hover': {
+            [theme.fn.largerThan('sm')]: {
+                '&:hover': Object.assign(Object.assign({}, (layout === 'overlay' && {
                     '.overlay-info': {
                         transform: 'translateY(-10px)',
                     },
-                    '.item-overlay-wrapper': {
+                })), { '.item-overlay-wrapper': {
                         backgroundColor: 'rgba(0,0,0,0.4)',
-                    },
-                },
-            })),
+                    } }),
+            },
         },
         inner: Object.assign({ display: 'flex', gap: 8, '&, *': {
                 pointerEvents: 'none !important',
@@ -192,10 +191,9 @@ var useStyles$1 = createStyles((theme, { layout }) => {
         thumbFrame: {
             backgroundColor: '#000',
         },
-        thumbWrapper: Object.assign({}, (layout === 'horizon' && {
+        thumbWrapper: Object.assign({}, (layout === 'horizon' && Object.assign(Object.assign({}, (!useSquareRatioThumbnail && {
             width: 64,
-            flexShrink: 0,
-        })),
+        })), { flexShrink: 0 }))),
         overlayWrapper: { transition: 'all .3s ease' },
         overlay: {
             position: 'absolute',
@@ -230,36 +228,112 @@ var useStyles$1 = createStyles((theme, { layout }) => {
     };
 });
 
+const VIDEO_THUMBNAIL_RATIO = 16 / 9;
+const SHORT_THUMBNAIL_RATIO = 240 / 431;
+
+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;
+}
+function buildVideoSubtitle({ totalView, createTime, formatTotalView, }) {
+    return [
+        typeof totalView === 'number' ? formatTotalView(totalView) : null,
+        createTime,
+    ]
+        .filter(Boolean)
+        .join('<span class="divider">&nbsp;</span>');
+}
+
 const ShortsItem = (_a) => {
-    var { data, layout, styles } = _a, boxProps = __rest(_a, ["data", "layout", "styles"]);
+    var { data, layout, styles, loading = false, useSquareRatioThumbnail } = _a, boxProps = __rest(_a, ["data", "layout", "styles", "loading", "useSquareRatioThumbnail"]);
     const { title, totalView, imageMedium, createTime } = data;
-    const { classes, cx } = useStyles$1({ layout }, {
+    const { classes, cx } = useStyles$1({ layout, useSquareRatioThumbnail }, {
         name: 'VideoItem__ShortsItem',
         styles,
     });
+    const thumbnailRatio = useSquareRatioThumbnail
+        ? VIDEO_THUMBNAIL_RATIO
+        : SHORT_THUMBNAIL_RATIO;
     const { t } = useTranslations();
-    const subTitle = useMemo(() => [
-        totalView &&
-            t('common.totalView', {
-                number: abbreviateNumber(totalView),
-            }),
+    const subTitle = useMemo(() => buildVideoSubtitle({
+        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]);
+        formatTotalView: (view) => t('common.totalView', {
+            number: abbreviateNumber(view),
+        }),
+    }), [createTime, t, totalView]);
+    const subTitleVisible = Boolean(subTitle);
+    const infoElement = (React__default.createElement(Stack, { spacing: 4, className: cx(classes.overlayInfo, 'overlay-info') },
+        React__default.createElement(Box, { sx: {
+                position: 'relative',
+                minHeight: loading && !title ? rem(44) : undefined,
+            } },
+            React__default.createElement(Text, { size: "s3", className: cx(classes.title), lineClamp: 2, sx: {
+                    visibility: loading && title ? 'hidden' : 'visible',
+                } }, title),
+            loading && (React__default.createElement(Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                } },
+                React__default.createElement(Skeleton, { height: 22, radius: "sm" }),
+                React__default.createElement(Skeleton, { height: 22, radius: "sm" })))),
+        (subTitleVisible || loading) && (React__default.createElement(Box, { sx: {
+                position: 'relative',
+                minHeight: loading && !subTitleVisible ? rem(16) : undefined,
+            } },
+            subTitleVisible && (React__default.createElement(Text, { className: classes.subTitle, size: "n1", sx: {
+                    visibility: loading ? 'hidden' : 'visible',
+                }, dangerouslySetInnerHTML: {
+                    __html: subTitle,
+                } })),
+            loading && (React__default.createElement(Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                } },
+                React__default.createElement(Skeleton, { height: 16, width: "55%", radius: "sm" })))))));
     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)));
+                React__default.createElement(AspectRatio, { ratio: thumbnailRatio, className: classes.thumbFrame },
+                    React__default.createElement(Box, { sx: { position: 'relative', width: '100%', height: '100%' } },
+                        React__default.createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy", style: {
+                                visibility: loading ? 'hidden' : 'visible',
+                            } }),
+                        loading && (React__default.createElement(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderRadius: 4,
+                                overflow: 'hidden',
+                                zIndex: 1,
+                            } },
+                            React__default.createElement(Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
+                    React__default.createElement(Box, { className: cx(classes.overlayWrapper, 'item-overlay-wrapper') },
+                        React__default.createElement(Box, { className: cx(classes.overlay, 'item-overlay') }, layout === 'overlay' && infoElement)))),
+            layout !== 'overlay' && infoElement)));
 };
 
 const Play = (_a) => {
@@ -325,6 +399,11 @@ var useStyles = createStyles((theme, { active, layout }) => {
             bottom: 0,
             backgroundColor: active ? 'rgba(0, 0, 0, .55)' : 'transparent',
             transition: 'all .2s ease',
+            '.play-icon path': {
+                '&:first-child': {
+                    fill: '#262626',
+                },
+            },
         },
         duration: {
             position: 'absolute',
@@ -342,17 +421,24 @@ var useStyles = createStyles((theme, { active, layout }) => {
 });
 
 const VideoItem$1 = (_a) => {
-    var { isMobile, data, styles, className, classNames, layout } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout"]);
+    var { isMobile, data, styles, className, classNames, layout, playIcon, loading = false } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "playIcon", "loading"]);
     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]);
+    const PlayIcon = playIcon || Play;
+    const subTitle = useMemo(() => ({
+        visible: Boolean(totalView || createTime),
+        formated: buildVideoSubtitle({
+            totalView,
+            createTime,
+            formatTotalView: (view) => t('common.totalView', { number: abbreviateNumber(view) }),
+        }),
+    }), [createTime, t, totalView]);
+    const fallbackThumbSrc = CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
+    const thumbSrc = imageMedium || fallbackThumbSrc;
+    const durationLabel = typeof duration === 'number' && duration > 0
+        ? secondsTo24HoursFormat(duration)
+        : undefined;
     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 },
@@ -362,24 +448,80 @@ const VideoItem$1 = (_a) => {
                             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`);
-                            } })),
-                    typeof duration === 'number' && duration > 0 && (React__default.createElement(Box, { className: classes.duration },
-                        React__default.createElement(Text, { size: "n1", className: classes.durationTxt }, 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,
-                    } })))));
+                    React__default.createElement(Box, { sx: { position: 'relative', width: '100%' } },
+                        React__default.createElement(AspectRatio, { ratio: VIDEO_THUMBNAIL_RATIO, className: classes.thumbFrame },
+                            React__default.createElement("img", { loading: "lazy", src: thumbSrc, alt: title, style: {
+                                    visibility: loading ? 'hidden' : 'visible',
+                                }, onError: (e) => {
+                                    e.currentTarget.src = fallbackThumbSrc;
+                                } })),
+                        loading && (React__default.createElement(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderRadius: 4,
+                                overflow: 'hidden',
+                                zIndex: 2,
+                            } },
+                            React__default.createElement(Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
+                    durationLabel && (React__default.createElement(Box, { className: classes.duration, sx: { zIndex: loading ? 3 : undefined } },
+                        React__default.createElement(Box, { sx: { position: 'relative' } },
+                            React__default.createElement(Text, { size: "n1", className: classes.durationTxt, sx: {
+                                    visibility: loading ? 'hidden' : 'visible',
+                                } }, durationLabel),
+                            loading && (React__default.createElement(Box, { sx: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                } },
+                                React__default.createElement(Skeleton, { width: 40, height: 14, radius: "sm" })))))),
+                    React__default.createElement(Flex, { className: classes.overlay, align: 'center', justify: 'center', sx: {
+                            visibility: loading ? 'hidden' : 'visible',
+                        } }, active ? (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default.createElement(PlayIcon, { className: "play-icon", size: isMobile ? 32 : 46 }))))),
+            React__default.createElement(Stack, { className: "video-info", sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
+                React__default.createElement(Box, { sx: {
+                        position: 'relative',
+                        minHeight: loading && !title ? rem(44) : undefined,
+                    } },
+                    React__default.createElement(Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2, sx: {
+                            visibility: loading && title ? 'hidden' : 'visible',
+                        } }, title),
+                    loading && (React__default.createElement(Box, { sx: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 4,
+                        } },
+                        React__default.createElement(Skeleton, { height: 22, radius: "sm" }),
+                        React__default.createElement(Skeleton, { height: 22, radius: "sm" })))),
+                (subTitle.visible || loading) && (React__default.createElement(Box, { sx: {
+                        position: 'relative',
+                        minHeight: loading && !subTitle.visible ? rem(16) : undefined,
+                    } },
+                    subTitle.visible && (React__default.createElement(Text, { className: classes.subTitle, size: "n1", color: "#595959", sx: {
+                            visibility: loading ? 'hidden' : 'visible',
+                        }, dangerouslySetInnerHTML: {
+                            __html: subTitle.formated,
+                        } })),
+                    loading && (React__default.createElement(Box, { sx: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            right: 0,
+                        } },
+                        React__default.createElement(Skeleton, { height: 16, width: "55%", radius: "sm" })))))))));
 };
 
 const VideoPlayerModal = (_a) => {
     var { data, isMobile } = _a, rest = __rest(_a, ["data", "isMobile"]);
-    const { type, videoId, url } = data;
+    const { type, 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) => ({
@@ -439,46 +581,53 @@ const VideoPlayerModal = (_a) => {
                     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 }))));
+        }) }, rest),
+        React__default.createElement(AspectRatio, { w: '100%', ratio: type === VideoType.SHORTS ? 315 / 560 : 16 / 9, sx: {
+                '.link-image-wrapper': {
+                    paddingTop: 0,
+                    height: '100%',
+                },
+            } },
+            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"]);
+    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading } = _a, props = __rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading"]);
     const { articleLink, id, videoId, title, url, type } = data;
     const [showModal, setShowModal] = useState(false);
-    const href = useMemo(() => articleLink || `/videos/${type}/?id=${id}`, []);
+    const href = articleLink || `/videos/${type}/?id=${id}`;
     const { locale } = useTranslations();
+    const dataEventLabel = useMemo(() => `https://${domainLocales[locale]}${href}`, [href, locale]);
+    const handleDefaultClick = (e) => {
+        if (redirectToLandingPage) {
+            localStorage.setItem(VIDEO_DETAIL_TEMP_STORAGE, JSON.stringify({
+                articleLink,
+                id,
+                videoId,
+                title,
+                url,
+                type,
+            }));
+            return;
+        }
+        e.preventDefault();
+        setShowModal(true);
+    };
     const commonProps = {
         component: 'a',
         href,
         target: articleLink ? '_blank' : '_self',
         'data-event-category': dataEventCategory,
         'data-event-action': dataEventAction,
-        'data-event-label': `https://${domainLocales[locale]}${href}`,
+        'data-event-label': dataEventLabel,
         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);
-                    }
-                }
+                ? handleDefaultClick
                 : undefined,
     };
     return (React__default.createElement(React__default.Fragment, null,
-        type === VideoType.SHORTS ? (React__default.createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile }))) : (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, loading: loading }))) : (React__default.createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading }))),
         !articleLink && (React__default.createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
 };
 

package/build/esm/{Spinner-4a0a16d7.js → Spinner-79ab6905.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-1cd753c3.js';
+import { _ as __rest } from './tslib.es6-f12507c0.js';
 import React__default from 'react';
 
 const Spinner = (_a) => {

package/build/esm/{WhatsApp-eff465a1.js → WhatsApp-9f55dee2.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-1cd753c3.js';
+import { _ as __rest } from './tslib.es6-f12507c0.js';
 import React__default from 'react';
 
 const Instagram = (_a) => {

package/build/esm/adapters.js

@@ -1,39 +1,39 @@
-export { B as Button } from './index-28bce418.js';
-export { T as Text } from './index-f1961b13.js';
-export { H as Heading } from './index-06320955.js';
-import './tslib.es6-1cd753c3.js';
+export { B as Button } from './index-6187eb6d.js';
+export { T as Text } from './index-9823e1ba.js';
+export { H as Heading } from './index-328493ff.js';
+import './tslib.es6-f12507c0.js';
 import 'react';
-import './index-760d69ce.js';
+import './index-059449c8.js';
 import '@mantine/core';
-import './shared-3def0599.js';
-import './index-48c9e0de.js';
-import './index-d5050a14.js';
+import './shared-0b54652a.js';
+import './index-af1814f1.js';
+import './index-cef981a3.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-12605605.js';
+import './index-2b898dc6.js';
 import './constantsDomainLocales.js';
-import './Locale-6237ebe4.js';
+import './Locale-1ff9f798.js';
 import './constantsIsProduction.js';
-import './index-09e43a17.js';
-import './utils-f93704dc.js';
+import './index-e9c6b45a.js';
+import './utils-2af6eed8.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-72bb84ba.js';
-import './index-6b3bccdf.js';
+import './index-08e4d77f.js';
+import './index-1ea79ac3.js';
 import 'dayjs';
-import './index-fa17f83f.js';
+import './index-843eb5f7.js';
 import '@mantine/notifications';
-import './index-709c1b4a.js';
+import './index-996375fb.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-31d41470.js';
+import './useUniqueId-27e349cd.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-f25c06a1.js';
-import './translationsContext-5539c952.js';
-import './index-2f629759.js';
+import './index.styles-2725ecab.js';
+import './translationsContext-1b1a5117.js';
+import './index-dcb88125.js';

package/build/esm/atoms.js

@@ -1,77 +1,77 @@
-export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-42db16aa.js';
-export { A as Avatar, D as DistanceTag, a as DrawerBottom, I as IconWrapper } from './index-5d735bf7.js';
-export { B as Button } from './index-28bce418.js';
-export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-0666caa3.js';
-export { C as Container } from './index-18d9b44e.js';
-export { D as Divider } from './index-a031fe16.js';
-export { D as Drawer } from './index-bf0aa642.js';
-export { F as Flag } from './index-d5050a14.js';
-export { H as Heading } from './index-06320955.js';
-export { I as Icon } from './index-10dc44c5.js';
-export { I as Input, L as Label } from './index-913e49d4.js';
-export { L as Logo } from './index-13d4d948.js';
-export { R as RadioImageGroup } from './index-8beef085.js';
-export { T as Text } from './index-f1961b13.js';
-export { T as TextArea } from './index-6621664d.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-b710a31d.js';
-export { B as BtnChoice } from './index-e49a1561.js';
-export { C as CustomReferenceDot } from './index-55b838de.js';
-export { I as ImageWrap } from './index-09e43a17.js';
-export { L as LogoIcon } from './logoIcon-6c43fd83.js';
-export { G as GenderOptionControl } from './index-6a515ea4.js';
-export { L as Loading } from './index-e8ecc796.js';
-export { D as DrawerComponent } from './index-2dfedb07.js';
-export { I as InputDate } from './InputDate-7a1e6c32.js';
-export { C as CartCareButton } from './index-bea2c496.js';
+export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-dc5488b1.js';
+export { A as Avatar, D as DistanceTag, a as DrawerBottom, I as IconWrapper } from './index-e66ce39e.js';
+export { B as Button } from './index-6187eb6d.js';
+export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-d5eb9574.js';
+export { C as Container } from './index-76234d32.js';
+export { D as Divider } from './index-30c8411d.js';
+export { D as Drawer } from './index-78933ba4.js';
+export { F as Flag } from './index-cef981a3.js';
+export { H as Heading } from './index-328493ff.js';
+export { I as Icon } from './index-455332cf.js';
+export { I as Input, L as Label } from './index-deb74cbe.js';
+export { L as Logo } from './index-c9c015cd.js';
+export { R as RadioImageGroup } from './index-8f28aa09.js';
+export { T as Text } from './index-9823e1ba.js';
+export { T as TextArea } from './index-1fa78798.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-5c1f8a17.js';
+export { B as BtnChoice } from './index-ef60389e.js';
+export { C as CustomReferenceDot } from './index-26173e7a.js';
+export { I as ImageWrap } from './index-e9c6b45a.js';
+export { L as LogoIcon } from './logoIcon-5ecc212a.js';
+export { G as GenderOptionControl } from './index-99351ea4.js';
+export { L as Loading } from './index-18fcc53c.js';
+export { D as DrawerComponent } from './index-2b0afa2d.js';
+export { I as InputDate } from './InputDate-e13d54d7.js';
+export { C as CartCareButton } from './index-62dd366a.js';
 import 'react';
-import './index-72bb84ba.js';
-import './tslib.es6-1cd753c3.js';
+import './index-08e4d77f.js';
+import './tslib.es6-f12507c0.js';
 import '@mantine/core';
-import './index-48c9e0de.js';
+import './index-af1814f1.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-f93704dc.js';
+import './utils-2af6eed8.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './Close-e84d5ed4.js';
-import './index-9351c606.js';
-import './translationsContext-5539c952.js';
+import './Close-f22c3e1c.js';
+import './index-487c8a99.js';
+import './translationsContext-1b1a5117.js';
 import '@mantine/carousel';
 import 'vaul';
-import './index-709c1b4a.js';
+import './index-996375fb.js';
 import 'date-fns/locale';
-import './index-fa17f83f.js';
-import './Locale-6237ebe4.js';
+import './index-843eb5f7.js';
+import './Locale-1ff9f798.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-760d69ce.js';
-import './shared-3def0599.js';
+import './index-059449c8.js';
+import './shared-0b54652a.js';
 import '@mantine/dates';
-import './index-12605605.js';
-import './index-6b3bccdf.js';
+import './index-2b898dc6.js';
+import './index-1ea79ac3.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-f25c06a1.js';
-import './index-2f629759.js';
+import './index.styles-2725ecab.js';
+import './index-dcb88125.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-c287d73b.js';
+import './animation-e5da737a.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-31d41470.js';
+import './useUniqueId-27e349cd.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-eff465a1.js';
-import './Spinner-4a0a16d7.js';
-import './index-dfd9ab20.js';
-import './paths-3b8ab138.js';
-import './constants-f3f310d2.js';
-import './utils-56f99032.js';
-import './index-4906b926.js';
+import './WhatsApp-9f55dee2.js';
+import './Spinner-79ab6905.js';
+import './index-3f4e9809.js';
+import './paths-7c44cd7d.js';
+import './constants-db4cd559.js';
+import './utils-8f1af0a0.js';
+import './index-f124d7e1.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-01997487.js';
+import './constants-73173a10.js';