@hhgtech/hhg-components 1.29.541 → 1.29.543

package/build/{InputDate-977b7e0b.js → InputDate-19a75705.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
 var React = require('react');
 var core = require('@mantine/core');
 var classNames = require('classnames');
 var dayjs = require('dayjs');
-var index$1 = require('./index-04864074.js');
+var index$1 = require('./index-957278f8.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-ec32050c.js');
-var Locale = require('./Locale-eb0da538.js');
-var index$2 = require('./index-d4ad3f79.js');
+var index = require('./index-6eec8a5c.js');
+var Locale = require('./Locale-5175dba6.js');
+var index$2 = require('./index-9f7d8a0c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{LastPeriod-6cca61cd.js → LastPeriod-9fb4b056.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{MobileBottomNavigationIcon-9bb130dd.js → MobileBottomNavigationIcon-e29aa78f.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
 var React = require('react');
-var index = require('./index-d4ad3f79.js');
+var index = require('./index-9f7d8a0c.js');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-5e3a8440.js');
+var utils = require('./utils-af53b062.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{SiteWideBanner-ccc9cb23.js → SiteWideBanner-7aa535d7.js}

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-3424862e.js');
+var index$2 = require('./index-e7478ca0.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-d4ad3f79.js');
-var index$1 = require('./index-9301f298.js');
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
-var index$6 = require('./index-ec32050c.js');
-var index$5 = require('./index-0a047edc.js');
+var index = require('./index-9f7d8a0c.js');
+var index$1 = require('./index-a7c74175.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
+var index$6 = require('./index-6eec8a5c.js');
+var index$5 = require('./index-537a32ba.js');
 var core = require('@mantine/core');
-var number = require('./number-76ce8f12.js');
-var index$3 = require('./index-2b476eb9.js');
+var number = require('./number-401b610c.js');
+var index$3 = require('./index-b8f30bc3.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-47ec78f0.js');
-var index$7 = require('./index-512cb84a.js');
+var index$4 = require('./index-465c9a1f.js');
+var index$7 = require('./index-d9352800.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var core$1 = require('@hhgtech/icons/core');
 var Cookies = require('js-cookie');
-var utils = require('./utils-5e3a8440.js');
+var utils = require('./utils-af53b062.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -167,7 +167,7 @@ const LanguageLabel = ({ locale, label, href, }) => {
         React__default["default"].createElement("span", null, label)));
 };
 
-var useStyles$1 = core.createStyles((theme, { layout, useSquareRatioThumbnail, radius }) => {
+var useStyles$1 = core.createStyles((theme, { layout, radius }) => {
     const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
     return {
         root: {
@@ -204,9 +204,10 @@ var useStyles$1 = core.createStyles((theme, { layout, useSquareRatioThumbnail, r
         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',
@@ -272,15 +273,12 @@ function buildVideoSubtitle({ totalView, createTime, formatTotalView, }) {
 }
 
 const ShortsItem = (_a) => {
-    var { data, layout, styles, loading = false, radius = 4, hideInfo = false, useSquareRatioThumbnail } = _a, boxProps = tslib_es6.__rest(_a, ["data", "layout", "styles", "loading", "radius", "hideInfo", "useSquareRatioThumbnail"]);
+    var { data, layout, styles, loading = false, radius = 4, hideInfo = false } = _a, boxProps = tslib_es6.__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 } = index$3.useTranslations();
     const subTitle = React.useMemo(() => buildVideoSubtitle({
         totalView,
@@ -329,7 +327,7 @@ const ShortsItem = (_a) => {
     return (React__default["default"].createElement(core.Box, Object.assign({}, boxProps, { className: classes.root }),
         React__default["default"].createElement(core.Box, { className: classes.inner },
             React__default["default"].createElement("div", { className: classes.thumbWrapper },
-                React__default["default"].createElement(core.AspectRatio, { ratio: thumbnailRatio, className: classes.thumbFrame },
+                React__default["default"].createElement(core.AspectRatio, { ratio: SHORT_THUMBNAIL_RATIO, className: classes.thumbFrame },
                     React__default["default"].createElement(core.Box, { sx: { position: 'relative', width: '100%', height: '100%' } },
                         React__default["default"].createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy", style: {
                                 visibility: loading ? 'hidden' : 'visible',
@@ -357,7 +355,7 @@ const Play = (_a) => {
         React__default["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 = core.createStyles((theme, { active, layout, radius }) => {
+var useStyles = core.createStyles((theme, { active, layout, radius, useVideoTypeThumbnail }) => {
     const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
     return {
         root: {
@@ -389,12 +387,30 @@ var useStyles = core.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: core.rem(22),
         },
@@ -417,6 +433,7 @@ var useStyles = core.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': {
@@ -427,7 +444,7 @@ var useStyles = core.createStyles((theme, { active, layout, radius }) => {
         },
         duration: {
             position: 'absolute',
-            zIndex: 0,
+            zIndex: 2,
             background: '#262626',
             borderRadius: itemRadius,
             bottom: 4,
@@ -441,10 +458,10 @@ var useStyles = core.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 = tslib_es6.__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 = tslib_es6.__rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "radius", "playIcon", "hideInfo", "loading", "useVideoTypeThumbnail"]);
     const { title, imageMedium, createTime, totalView, active, duration } = data;
     const { locale, t } = index$3.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 = React.useMemo(() => ({
         visible: Boolean(totalView || createTime),
@@ -456,6 +473,9 @@ const VideoItem$1 = (_a) => {
     }), [createTime, t, totalView]);
     const fallbackThumbSrc = index$1.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;
@@ -471,11 +491,13 @@ const VideoItem$1 = (_a) => {
                     }) },
                     React__default["default"].createElement(core.Box, { sx: { position: 'relative', width: '100%' } },
                         React__default["default"].createElement(core.AspectRatio, { ratio: VIDEO_THUMBNAIL_RATIO, className: classes.thumbFrame },
-                            React__default["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["default"].createElement(core.Box, { className: classes.thumbMedia },
+                                useVideoTypeThumbnail && (React__default["default"].createElement("img", { loading: "lazy", src: thumbSrc, alt: "", "aria-hidden": true, className: classes.thumbBgImage, style: {
+                                        visibility: loading ? 'hidden' : 'visible',
+                                    }, onError: handleThumbError })),
+                                React__default["default"].createElement("img", { loading: "lazy", src: thumbSrc, alt: title, className: classes.thumbImage, style: {
+                                        visibility: loading ? 'hidden' : 'visible',
+                                    }, onError: handleThumbError }))),
                         loading && (React__default["default"].createElement(core.Box, { sx: {
                                 position: 'absolute',
                                 top: 0,
@@ -607,7 +629,7 @@ const VideoPlayerModal = (_a) => {
 };
 
 const VideoItem = React.forwardRef((_a, ref) => {
-    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading, hideInfo = false } = _a, props = tslib_es6.__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 = tslib_es6.__rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading", "hideInfo", "useVideoTypeThumbnail"]);
     const { articleLink, id, videoId, title, url, type } = data;
     const [showModal, setShowModal] = React.useState(false);
     const href = articleLink || `/videos/${type}/?id=${id}`;
@@ -657,7 +679,7 @@ const VideoItem = React.forwardRef((_a, ref) => {
                 : undefined,
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        type === index$5.VideoType.SHORTS ? (React__default["default"].createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))) : (React__default["default"].createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))),
+        type === index$5.VideoType.SHORTS && !useVideoTypeThumbnail ? (React__default["default"].createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))) : (React__default["default"].createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading, hideInfo: hideInfo, useVideoTypeThumbnail: useVideoTypeThumbnail }))),
         !articleLink && (React__default["default"].createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
 });
 VideoItem.displayName = 'VideoItem';

package/build/{Spinner-61b72591.js → Spinner-6194dfad.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{WhatsApp-6c6a3aee.js → WhatsApp-b145d0b0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-af09a0ba.js');
+var tslib_es6 = require('./tslib.es6-87a2fb66.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/adapters.js

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-0cd89d0b.js');
-var index$1 = require('./index-c88c8189.js');
-var index$2 = require('./index-e13a0e39.js');
-require('./tslib.es6-af09a0ba.js');
+var index = require('./index-3a7d1257.js');
+var index$1 = require('./index-62df32f9.js');
+var index$2 = require('./index-da50d6c9.js');
+require('./tslib.es6-87a2fb66.js');
 require('react');
-require('./index-515469d0.js');
+require('./index-60f85264.js');
 require('@mantine/core');
-require('./shared-201fc49c.js');
-require('./index-04864074.js');
-require('./index-3424862e.js');
+require('./shared-000099b6.js');
+require('./index-957278f8.js');
+require('./index-e7478ca0.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-9301f298.js');
+require('./index-a7c74175.js');
 require('./constantsDomainLocales.js');
-require('./Locale-eb0da538.js');
+require('./Locale-5175dba6.js');
 require('./constantsIsProduction.js');
-require('./index-6b44ec2b.js');
-require('./utils-5e3a8440.js');
+require('./index-60c67dd6.js');
+require('./utils-af53b062.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-d4ad3f79.js');
-require('./index-4d838fd2.js');
+require('./index-9f7d8a0c.js');
+require('./index-0b727873.js');
 require('dayjs');
-require('./index-0a047edc.js');
+require('./index-537a32ba.js');
 require('@mantine/notifications');
-require('./index-ec32050c.js');
+require('./index-6eec8a5c.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-88b26792.js');
+require('./useUniqueId-427b1e86.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-5f6a7ac0.js');
-require('./translationsContext-4698cb34.js');
-require('./index-a985d53b.js');
+require('./index.styles-c36973fe.js');
+require('./translationsContext-45e96423.js');
+require('./index-77697e0a.js');
 
 
 

package/build/atoms.js

@@ -2,82 +2,82 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-65e35635.js');
-var index$1 = require('./index-2174890f.js');
-var index$2 = require('./index-0cd89d0b.js');
-var index$3 = require('./index-3996aaac.js');
-var index$4 = require('./index-92dad635.js');
-var index$5 = require('./index-3c2798a6.js');
-var index$6 = require('./index-d0dc8345.js');
-var index$7 = require('./index-3424862e.js');
-var index$8 = require('./index-e13a0e39.js');
-var index$9 = require('./index-c595771c.js');
-var index$a = require('./index-6a888e0c.js');
-var index$b = require('./index-862280f6.js');
-var index$c = require('./index-84b53c58.js');
-var index$d = require('./index-c88c8189.js');
-var index$e = require('./index-c69b376c.js');
-var index$f = require('./index-620ad13e.js');
-var index$g = require('./index-b870ff2d.js');
-var index$h = require('./index-c747366f.js');
-var index$i = require('./index-6b44ec2b.js');
-var logoIcon = require('./logoIcon-87e19fb4.js');
-var index$j = require('./index-84429a30.js');
-var index$k = require('./index-773d8775.js');
-var index$m = require('./index-78a4fbc3.js');
-var index$n = require('./index-919460ff.js');
-var InputDate = require('./InputDate-977b7e0b.js');
-var index$l = require('./index-66e36e3e.js');
+var index = require('./index-f61f162e.js');
+var index$1 = require('./index-354bc082.js');
+var index$2 = require('./index-3a7d1257.js');
+var index$3 = require('./index-e507b22c.js');
+var index$4 = require('./index-0d91ed13.js');
+var index$5 = require('./index-6d9d7de4.js');
+var index$6 = require('./index-e41e53d9.js');
+var index$7 = require('./index-e7478ca0.js');
+var index$8 = require('./index-da50d6c9.js');
+var index$9 = require('./index-b2a9bf76.js');
+var index$a = require('./index-32e3e344.js');
+var index$b = require('./index-0fffbc91.js');
+var index$c = require('./index-e17391af.js');
+var index$d = require('./index-62df32f9.js');
+var index$e = require('./index-d23db1a8.js');
+var index$f = require('./index-3f3a3c04.js');
+var index$g = require('./index-54fd7d28.js');
+var index$h = require('./index-9722b066.js');
+var index$i = require('./index-60c67dd6.js');
+var logoIcon = require('./logoIcon-990d6a1b.js');
+var index$j = require('./index-c1c5148d.js');
+var index$k = require('./index-5e3b5b1b.js');
+var index$m = require('./index-be2c7088.js');
+var index$n = require('./index-fce57aab.js');
+var InputDate = require('./InputDate-19a75705.js');
+var index$l = require('./index-4dd6d234.js');
 require('react');
-require('./index-d4ad3f79.js');
-require('./tslib.es6-af09a0ba.js');
+require('./index-9f7d8a0c.js');
+require('./tslib.es6-87a2fb66.js');
 require('@mantine/core');
-require('./index-04864074.js');
+require('./index-957278f8.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-5e3a8440.js');
+require('./utils-af53b062.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./index-2b476eb9.js');
-require('./translationsContext-4698cb34.js');
+require('./index-b8f30bc3.js');
+require('./translationsContext-45e96423.js');
 require('@mantine/carousel');
-require('./index-515469d0.js');
-require('./shared-201fc49c.js');
+require('./index-60f85264.js');
+require('./shared-000099b6.js');
 require('./constantsDomainLocales.js');
-require('./Locale-eb0da538.js');
+require('./Locale-5175dba6.js');
 require('@mantine/dates');
-require('./index-ec32050c.js');
+require('./index-6eec8a5c.js');
 require('date-fns/locale');
-require('./index-0a047edc.js');
+require('./index-537a32ba.js');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-9301f298.js');
-require('./index-4d838fd2.js');
+require('./index-a7c74175.js');
+require('./index-0b727873.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-5f6a7ac0.js');
-require('./index-a985d53b.js');
+require('./index.styles-c36973fe.js');
+require('./index-77697e0a.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-3057dde9.js');
+require('./animation-370ae58d.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-88b26792.js');
+require('./useUniqueId-427b1e86.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-6c6a3aee.js');
-require('./Spinner-61b72591.js');
-require('./index-1b24e0d3.js');
-require('./paths-a2a44eda.js');
-require('./constants-961f54ac.js');
-require('./utils-3a3800c0.js');
-require('./index-ee0d35ba.js');
+require('./WhatsApp-b145d0b0.js');
+require('./Spinner-6194dfad.js');
+require('./index-cdc11915.js');
+require('./paths-f7316b34.js');
+require('./constants-e65020ec.js');
+require('./utils-2d3f967a.js');
+require('./index-8f4fba76.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-817a109a.js');
+require('./constants-74164f67.js');
 require('vaul');