@hhgtech/hhg-components 1.29.541 → 1.29.543-beta-1

package/build/esm/{SiteWideBanner-04729b10.js → SiteWideBanner-c884af5d.js}

@@ -1,22 +1,22 @@
 import React__default, { useState, useMemo, forwardRef, useImperativeHandle, useCallback, useEffect } from 'react';
-import { F as Flag } from './index-bd44bcb2.js';
+import { F as Flag } from './index-8a202e23.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-0b67696c.js';
-import { C as CommonGAssets } from './index-7adf994c.js';
-import { _ as __rest } from './tslib.es6-00ab44b2.js';
-import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-8c40504a.js';
-import { V as VideoType } from './index-fe4471f4.js';
+import { T as Text } from './index-c8d80f8c.js';
+import { C as CommonGAssets } from './index-e711e815.js';
+import { _ as __rest } from './tslib.es6-ac697999.js';
+import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-2f6a858f.js';
+import { V as VideoType } from './index-724975e3.js';
 import { createStyles, Stack, Box, rem, Skeleton, AspectRatio, getStylesRef, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-016949e8.js';
-import { u as useTranslations } from './index-09d9e570.js';
+import { a as abbreviateNumber } from './number-51812b2f.js';
+import { u as useTranslations } from './index-8c2dd675.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-3b8592c9.js';
-import { S as SocialLinkPreview } from './index-54fb4bcd.js';
+import { M as Modal } from './index-99c2bc84.js';
+import { S as SocialLinkPreview } from './index-637f8179.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { Close } from '@hhgtech/icons/core';
 import Cookies from 'js-cookie';
-import { M as MediaQueries } from './utils-538169b3.js';
+import { M as MediaQueries } from './utils-fc3d898b.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-589f30ad.js → Spinner-56f8e23b.js}

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

package/build/esm/{WhatsApp-6a0c0a12.js → WhatsApp-7143b078.js}

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

package/build/esm/adapters.js

@@ -1,39 +1,39 @@
-export { B as Button } from './index-67429eb2.js';
-export { T as Text } from './index-546ca9b5.js';
-export { H as Heading } from './index-e348d0b2.js';
-import './tslib.es6-00ab44b2.js';
+export { B as Button } from './index-8fc735b7.js';
+export { T as Text } from './index-be1db312.js';
+export { H as Heading } from './index-d74fd1ef.js';
+import './tslib.es6-ac697999.js';
 import 'react';
-import './index-2d25b0f0.js';
+import './index-85d86bd0.js';
 import '@mantine/core';
-import './shared-b07d1eb2.js';
-import './index-17c85f76.js';
-import './index-bd44bcb2.js';
+import './shared-a1a01a37.js';
+import './index-bbbf3f0d.js';
+import './index-8a202e23.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-7adf994c.js';
+import './index-e711e815.js';
 import './constantsDomainLocales.js';
-import './Locale-dc1237b9.js';
+import './Locale-698c9c5e.js';
 import './constantsIsProduction.js';
-import './index-50aea2c8.js';
-import './utils-538169b3.js';
+import './index-f444d8e4.js';
+import './utils-fc3d898b.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-0b67696c.js';
-import './index-3f09210d.js';
+import './index-c8d80f8c.js';
+import './index-c1c0ef29.js';
 import 'dayjs';
-import './index-fe4471f4.js';
+import './index-724975e3.js';
 import '@mantine/notifications';
-import './index-8c40504a.js';
+import './index-2f6a858f.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-38cdf062.js';
+import './useUniqueId-26ee7b08.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-3adef5f6.js';
-import './translationsContext-18f7b7e0.js';
-import './index-04505e35.js';
+import './index.styles-80f436a0.js';
+import './translationsContext-b5c78f1e.js';
+import './index-4c6f5023.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-5a6026b0.js';
-export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-2feefed0.js';
-export { B as Button } from './index-67429eb2.js';
-export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-c4cc6979.js';
-export { C as Container } from './index-f0dc4a09.js';
-export { D as Divider } from './index-17347e2b.js';
-export { D as Drawer } from './index-b0feae54.js';
-export { F as Flag } from './index-bd44bcb2.js';
-export { H as Heading } from './index-e348d0b2.js';
-export { I as Icon } from './index-a22d54f1.js';
-export { I as Input, L as Label } from './index-5e2dff13.js';
-export { L as Logo } from './index-4ee3cd67.js';
-export { R as RadioImageGroup } from './index-dd00819b.js';
-export { T as Text } from './index-546ca9b5.js';
-export { T as TextArea } from './index-d3832176.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-daa074e7.js';
-export { B as BtnChoice } from './index-51582a7c.js';
-export { C as CustomReferenceDot } from './index-57322550.js';
-export { I as ImageWrap } from './index-50aea2c8.js';
-export { L as LogoIcon } from './logoIcon-b515c32f.js';
-export { G as GenderOptionControl } from './index-a002ff96.js';
-export { L as Loading } from './index-55273f7d.js';
-export { D as DrawerComponent } from './index-72e8c8cf.js';
-export { D as DrawerBottom } from './index-755575f0.js';
-export { I as InputDate } from './InputDate-9df68382.js';
-export { C as CartCareButton } from './index-71f98af8.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-bf3de2e1.js';
+export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-bd542fc8.js';
+export { B as Button } from './index-8fc735b7.js';
+export { C as Checkbox, I as ImageWrapV2, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-75bda69f.js';
+export { C as Container } from './index-c319b7f7.js';
+export { D as Divider } from './index-b0ad1d97.js';
+export { D as Drawer } from './index-6176220d.js';
+export { F as Flag } from './index-8a202e23.js';
+export { H as Heading } from './index-d74fd1ef.js';
+export { I as Icon } from './index-dadeb4c3.js';
+export { I as Input, L as Label } from './index-48c65ac9.js';
+export { L as Logo } from './index-463ab229.js';
+export { R as RadioImageGroup } from './index-9533276f.js';
+export { T as Text } from './index-be1db312.js';
+export { T as TextArea } from './index-317f5b68.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-60052888.js';
+export { B as BtnChoice } from './index-79eded12.js';
+export { C as CustomReferenceDot } from './index-c9008978.js';
+export { I as ImageWrap } from './index-f444d8e4.js';
+export { L as LogoIcon } from './logoIcon-11a81375.js';
+export { G as GenderOptionControl } from './index-c6988e15.js';
+export { L as Loading } from './index-0c65b11c.js';
+export { D as DrawerComponent } from './index-7f167da7.js';
+export { D as DrawerBottom } from './index-6f357288.js';
+export { I as InputDate } from './InputDate-54af4f26.js';
+export { C as CartCareButton } from './index-9e6ed2cf.js';
 import 'react';
-import './index-0b67696c.js';
-import './tslib.es6-00ab44b2.js';
+import './index-c8d80f8c.js';
+import './tslib.es6-ac697999.js';
 import '@mantine/core';
-import './index-17c85f76.js';
+import './index-bbbf3f0d.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-538169b3.js';
+import './utils-fc3d898b.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './index-09d9e570.js';
-import './translationsContext-18f7b7e0.js';
+import './index-8c2dd675.js';
+import './translationsContext-b5c78f1e.js';
 import '@mantine/carousel';
-import './index-2d25b0f0.js';
-import './shared-b07d1eb2.js';
+import './index-85d86bd0.js';
+import './shared-a1a01a37.js';
 import './constantsDomainLocales.js';
-import './Locale-dc1237b9.js';
+import './Locale-698c9c5e.js';
 import '@mantine/dates';
-import './index-8c40504a.js';
+import './index-2f6a858f.js';
 import 'date-fns/locale';
-import './index-fe4471f4.js';
+import './index-724975e3.js';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-7adf994c.js';
-import './index-3f09210d.js';
+import './index-e711e815.js';
+import './index-c1c0ef29.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-3adef5f6.js';
-import './index-04505e35.js';
+import './index.styles-80f436a0.js';
+import './index-4c6f5023.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-6f4b6cee.js';
+import './animation-49d1524b.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-38cdf062.js';
+import './useUniqueId-26ee7b08.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-6a0c0a12.js';
-import './Spinner-589f30ad.js';
-import './index-de3a12d3.js';
-import './paths-4a2d3f94.js';
-import './constants-ce67620e.js';
-import './utils-5e9c89a7.js';
-import './index-dac15b93.js';
+import './WhatsApp-7143b078.js';
+import './Spinner-56f8e23b.js';
+import './index-92a7c89f.js';
+import './paths-51d5245a.js';
+import './constants-0559ccad.js';
+import './utils-250fdcf8.js';
+import './index-cafedc9d.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-367949ba.js';
+import './constants-1c80c37a.js';
 import 'vaul';