@hhgtech/hhg-components 1.29.540 → 1.29.542

package/build/esm/{SiteWideBanner-530faffd.js → SiteWideBanner-b49848ef.js}

@@ -1,22 +1,22 @@
 import React__default, { useState, useMemo, forwardRef, useImperativeHandle, useCallback, useEffect } from 'react';
-import { F as Flag } from './index-22d966bf.js';
+import { F as Flag } from './index-0fda207d.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-3bbbc192.js';
-import { C as CommonGAssets } from './index-6875c1c8.js';
-import { _ as __rest } from './tslib.es6-d03f5deb.js';
-import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-cbf056b3.js';
-import { V as VideoType } from './index-3845ef4e.js';
+import { T as Text } from './index-c013d4eb.js';
+import { C as CommonGAssets } from './index-dc7ec50c.js';
+import { _ as __rest } from './tslib.es6-9000e52d.js';
+import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-ee3348ce.js';
+import { V as VideoType } from './index-2d7545a6.js';
 import { createStyles, Stack, Box, rem, Skeleton, AspectRatio, getStylesRef, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-56e3a367.js';
-import { u as useTranslations } from './index-77cd9344.js';
+import { a as abbreviateNumber } from './number-605365c5.js';
+import { u as useTranslations } from './index-404d617b.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-7f547ed0.js';
-import { S as SocialLinkPreview } from './index-5f62d561.js';
+import { M as Modal } from './index-d15e0fa9.js';
+import { S as SocialLinkPreview } from './index-738a2965.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { Close } from '@hhgtech/icons/core';
 import Cookies from 'js-cookie';
-import { M as MediaQueries } from './utils-3681f8cf.js';
+import { M as MediaQueries } from './utils-00ff23ce.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, useSquareRatioThumbnail, radius }) => {
+var useStyles$1 = createStyles((theme, { layout, radius }) => {
     const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
     return {
         root: {
@@ -196,9 +196,10 @@ var useStyles$1 = createStyles((theme, { layout, useSquareRatioThumbnail, radius
         thumbFrame: {
             backgroundColor: '#000',
         },
-        thumbWrapper: Object.assign({}, (layout === 'horizon' && Object.assign(Object.assign({}, (!useSquareRatioThumbnail && {
+        thumbWrapper: Object.assign({}, (layout === 'horizon' && {
             width: 64,
-        })), { flexShrink: 0 }))),
+            flexShrink: 0,
+        })),
         overlayWrapper: { transition: 'all .3s ease' },
         overlay: {
             position: 'absolute',
@@ -264,15 +265,12 @@ function buildVideoSubtitle({ totalView, createTime, formatTotalView, }) {
 }
 
 const ShortsItem = (_a) => {
-    var { data, layout, styles, loading = false, radius = 4, hideInfo = false, useSquareRatioThumbnail } = _a, boxProps = __rest(_a, ["data", "layout", "styles", "loading", "radius", "hideInfo", "useSquareRatioThumbnail"]);
+    var { data, layout, styles, loading = false, radius = 4, hideInfo = false } = _a, boxProps = __rest(_a, ["data", "layout", "styles", "loading", "radius", "hideInfo"]);
     const { title, totalView, imageMedium, createTime } = data;
-    const { classes, cx } = useStyles$1({ layout, useSquareRatioThumbnail, radius }, {
+    const { classes, cx } = useStyles$1({ layout, radius }, {
         name: 'VideoItem__ShortsItem',
         styles,
     });
-    const thumbnailRatio = useSquareRatioThumbnail
-        ? VIDEO_THUMBNAIL_RATIO
-        : SHORT_THUMBNAIL_RATIO;
     const { t } = useTranslations();
     const subTitle = useMemo(() => buildVideoSubtitle({
         totalView,
@@ -321,7 +319,7 @@ const ShortsItem = (_a) => {
     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: thumbnailRatio, className: classes.thumbFrame },
+                React__default.createElement(AspectRatio, { ratio: SHORT_THUMBNAIL_RATIO, 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',
@@ -349,7 +347,7 @@ const Play = (_a) => {
         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, radius }) => {
+var useStyles = createStyles((theme, { active, layout, radius, useVideoTypeThumbnail }) => {
     const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
     return {
         root: {
@@ -381,12 +379,30 @@ var useStyles = createStyles((theme, { active, layout, radius }) => {
             },
         })),
         thumbWrapper: {},
-        thumbFrame: {},
-        thumbImage: {
+        thumbFrame: Object.assign({}, (useVideoTypeThumbnail && {
+            backgroundColor: '#000',
+        })),
+        thumbMedia: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+        },
+        thumbBgImage: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
             width: '100%',
             height: '100%',
             objectFit: 'cover',
+            transform: 'scale(1.1)',
+            filter: 'blur(2px)',
+            opacity: 0.4,
         },
+        thumbImage: Object.assign({ width: '100%', height: '100%', objectFit: useVideoTypeThumbnail ? 'contain' : 'cover' }, (useVideoTypeThumbnail && {
+            position: 'relative',
+            zIndex: 1,
+        })),
         title: {
             lineHeight: rem(22),
         },
@@ -409,6 +425,7 @@ var useStyles = createStyles((theme, { active, layout, radius }) => {
             left: 0,
             right: 0,
             bottom: 0,
+            zIndex: 3,
             backgroundColor: active ? 'rgba(0, 0, 0, .55)' : 'transparent',
             transition: 'all .2s ease',
             '.play-icon path': {
@@ -419,7 +436,7 @@ var useStyles = createStyles((theme, { active, layout, radius }) => {
         },
         duration: {
             position: 'absolute',
-            zIndex: 0,
+            zIndex: 2,
             background: '#262626',
             borderRadius: itemRadius,
             bottom: 4,
@@ -433,10 +450,10 @@ var useStyles = createStyles((theme, { active, layout, radius }) => {
 });
 
 const VideoItem$1 = (_a) => {
-    var { isMobile, data, styles, className, classNames, layout, radius = 4, playIcon, hideInfo = false, loading = false } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "radius", "playIcon", "hideInfo", "loading"]);
+    var { isMobile, data, styles, className, classNames, layout, radius = 4, playIcon, hideInfo = false, loading = false, useVideoTypeThumbnail = false } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "radius", "playIcon", "hideInfo", "loading", "useVideoTypeThumbnail"]);
     const { title, imageMedium, createTime, totalView, active, duration } = data;
     const { locale, t } = useTranslations();
-    const { cx, classes, theme } = useStyles({ active, layout, radius }, { name: 'VideoItem__VideoItem', classNames, styles });
+    const { cx, classes, theme } = useStyles({ active, layout, radius, useVideoTypeThumbnail }, { name: 'VideoItem__VideoItem', classNames, styles });
     const PlayIcon = playIcon || Play;
     const subTitle = useMemo(() => ({
         visible: Boolean(totalView || createTime),
@@ -448,6 +465,9 @@ const VideoItem$1 = (_a) => {
     }), [createTime, t, totalView]);
     const fallbackThumbSrc = CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
     const thumbSrc = imageMedium || fallbackThumbSrc;
+    const handleThumbError = (e) => {
+        e.currentTarget.src = fallbackThumbSrc;
+    };
     const durationLabel = typeof duration === 'number' && duration > 0
         ? secondsTo24HoursFormat(duration)
         : undefined;
@@ -463,11 +483,13 @@ const VideoItem$1 = (_a) => {
                     }) },
                     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, className: classes.thumbImage, style: {
-                                    visibility: loading ? 'hidden' : 'visible',
-                                }, onError: (e) => {
-                                    e.currentTarget.src = fallbackThumbSrc;
-                                } })),
+                            React__default.createElement(Box, { className: classes.thumbMedia },
+                                useVideoTypeThumbnail && (React__default.createElement("img", { loading: "lazy", src: thumbSrc, alt: "", "aria-hidden": true, className: classes.thumbBgImage, style: {
+                                        visibility: loading ? 'hidden' : 'visible',
+                                    }, onError: handleThumbError })),
+                                React__default.createElement("img", { loading: "lazy", src: thumbSrc, alt: title, className: classes.thumbImage, style: {
+                                        visibility: loading ? 'hidden' : 'visible',
+                                    }, onError: handleThumbError }))),
                         loading && (React__default.createElement(Box, { sx: {
                                 position: 'absolute',
                                 top: 0,
@@ -599,7 +621,7 @@ const VideoPlayerModal = (_a) => {
 };
 
 const VideoItem = forwardRef((_a, ref) => {
-    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading, hideInfo = false } = _a, props = __rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading", "hideInfo"]);
+    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading, hideInfo = false, useVideoTypeThumbnail = false } = _a, props = __rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading", "hideInfo", "useVideoTypeThumbnail"]);
     const { articleLink, id, videoId, title, url, type } = data;
     const [showModal, setShowModal] = useState(false);
     const href = articleLink || `/videos/${type}/?id=${id}`;
@@ -649,7 +671,7 @@ const VideoItem = forwardRef((_a, ref) => {
                 : 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, loading: loading, hideInfo: hideInfo }))) : (React__default.createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))),
+        type === VideoType.SHORTS && !useVideoTypeThumbnail ? (React__default.createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))) : (React__default.createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading, hideInfo: hideInfo, useVideoTypeThumbnail: useVideoTypeThumbnail }))),
         !articleLink && (React__default.createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
 });
 VideoItem.displayName = 'VideoItem';

package/build/esm/{Spinner-3b5a13ca.js → Spinner-78c3df2d.js}

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

package/build/esm/{WhatsApp-aba2a437.js → WhatsApp-c34ee8e1.js}

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

package/build/esm/adapters.js

@@ -1,39 +1,39 @@
-export { B as Button } from './index-3e660ef5.js';
-export { T as Text } from './index-e2737e63.js';
-export { H as Heading } from './index-d8976f97.js';
-import './tslib.es6-d03f5deb.js';
+export { B as Button } from './index-3a2a4587.js';
+export { T as Text } from './index-edad2feb.js';
+export { H as Heading } from './index-1a75ebe9.js';
+import './tslib.es6-9000e52d.js';
 import 'react';
-import './index-491eaab0.js';
+import './index-19b70c2a.js';
 import '@mantine/core';
-import './shared-b138264a.js';
-import './index-143508c1.js';
-import './index-22d966bf.js';
+import './shared-8c546504.js';
+import './index-f6c561af.js';
+import './index-0fda207d.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-6875c1c8.js';
+import './index-dc7ec50c.js';
 import './constantsDomainLocales.js';
-import './Locale-319efad4.js';
+import './Locale-a2976153.js';
 import './constantsIsProduction.js';
-import './index-5375335f.js';
-import './utils-3681f8cf.js';
+import './index-68362b7b.js';
+import './utils-00ff23ce.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-3bbbc192.js';
-import './index-de616e2c.js';
+import './index-c013d4eb.js';
+import './index-075f1039.js';
 import 'dayjs';
-import './index-3845ef4e.js';
+import './index-2d7545a6.js';
 import '@mantine/notifications';
-import './index-cbf056b3.js';
+import './index-ee3348ce.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-1ef11bd9.js';
+import './useUniqueId-5d3185b6.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-384bc5ac.js';
-import './translationsContext-23e1a5fa.js';
-import './index-a9c3aa26.js';
+import './index.styles-5617585c.js';
+import './translationsContext-dc9b8309.js';
+import './index-bebf6a1b.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-f1db480b.js';
-export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-f6bfaf6c.js';
-export { B as Button } from './index-3e660ef5.js';
-export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-a3e5bcb1.js';
-export { C as Container } from './index-da233812.js';
-export { D as Divider } from './index-14f56a8f.js';
-export { D as Drawer } from './index-64b141ee.js';
-export { F as Flag } from './index-22d966bf.js';
-export { H as Heading } from './index-d8976f97.js';
-export { I as Icon } from './index-f30844e7.js';
-export { I as Input, L as Label } from './index-f30c0076.js';
-export { L as Logo } from './index-be585408.js';
-export { R as RadioImageGroup } from './index-4a178dc8.js';
-export { T as Text } from './index-e2737e63.js';
-export { T as TextArea } from './index-8611179c.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-506e6b52.js';
-export { B as BtnChoice } from './index-e986eaee.js';
-export { C as CustomReferenceDot } from './index-4a6f1d3a.js';
-export { I as ImageWrap } from './index-5375335f.js';
-export { L as LogoIcon } from './logoIcon-4091318b.js';
-export { G as GenderOptionControl } from './index-3c9bdce9.js';
-export { L as Loading } from './index-d2b93970.js';
-export { D as DrawerComponent } from './index-2fd18898.js';
-export { D as DrawerBottom } from './index-15d7ec85.js';
-export { I as InputDate } from './InputDate-42676111.js';
-export { C as CartCareButton } from './index-e14d5661.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-836a5630.js';
+export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-1c6f8f40.js';
+export { B as Button } from './index-3a2a4587.js';
+export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-8b0713ad.js';
+export { C as Container } from './index-41a01e6b.js';
+export { D as Divider } from './index-bf8bf2bb.js';
+export { D as Drawer } from './index-af29d429.js';
+export { F as Flag } from './index-0fda207d.js';
+export { H as Heading } from './index-1a75ebe9.js';
+export { I as Icon } from './index-29f1c0c7.js';
+export { I as Input, L as Label } from './index-27f5e6ac.js';
+export { L as Logo } from './index-7ad49097.js';
+export { R as RadioImageGroup } from './index-51a93ce3.js';
+export { T as Text } from './index-edad2feb.js';
+export { T as TextArea } from './index-5c6aeee9.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-7585b162.js';
+export { B as BtnChoice } from './index-4098e323.js';
+export { C as CustomReferenceDot } from './index-c2c25906.js';
+export { I as ImageWrap } from './index-68362b7b.js';
+export { L as LogoIcon } from './logoIcon-31295ab0.js';
+export { G as GenderOptionControl } from './index-eeacd2f0.js';
+export { L as Loading } from './index-f32b3580.js';
+export { D as DrawerComponent } from './index-7165778a.js';
+export { D as DrawerBottom } from './index-73fa7e90.js';
+export { I as InputDate } from './InputDate-46ca4aa2.js';
+export { C as CartCareButton } from './index-0f808022.js';
 import 'react';
-import './index-3bbbc192.js';
-import './tslib.es6-d03f5deb.js';
+import './index-c013d4eb.js';
+import './tslib.es6-9000e52d.js';
 import '@mantine/core';
-import './index-143508c1.js';
+import './index-f6c561af.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-3681f8cf.js';
+import './utils-00ff23ce.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './index-77cd9344.js';
-import './translationsContext-23e1a5fa.js';
+import './index-404d617b.js';
+import './translationsContext-dc9b8309.js';
 import '@mantine/carousel';
-import './index-491eaab0.js';
-import './shared-b138264a.js';
+import './index-19b70c2a.js';
+import './shared-8c546504.js';
+import './constantsDomainLocales.js';
+import './Locale-a2976153.js';
 import '@mantine/dates';
-import './index-cbf056b3.js';
+import './index-ee3348ce.js';
 import 'date-fns/locale';
-import './index-3845ef4e.js';
-import './Locale-319efad4.js';
+import './index-2d7545a6.js';
 import './constantsSite.js';
-import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-6875c1c8.js';
-import './index-de616e2c.js';
+import './index-dc7ec50c.js';
+import './index-075f1039.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-384bc5ac.js';
-import './index-a9c3aa26.js';
+import './index.styles-5617585c.js';
+import './index-bebf6a1b.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-2f04f549.js';
+import './animation-5875a932.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-1ef11bd9.js';
+import './useUniqueId-5d3185b6.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-aba2a437.js';
-import './Spinner-3b5a13ca.js';
-import './index-9383743f.js';
-import './paths-92e7e9f3.js';
-import './constants-52571ab3.js';
-import './utils-dc026004.js';
-import './index-c633ae73.js';
+import './WhatsApp-c34ee8e1.js';
+import './Spinner-78c3df2d.js';
+import './index-55320ede.js';
+import './paths-1660e6de.js';
+import './constants-cccd5520.js';
+import './utils-42556601.js';
+import './index-82d3f905.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-fa7d38fe.js';
+import './constants-be0d6b61.js';
 import 'vaul';