@hhgtech/hhg-components 1.29.539-beta-4 → 1.29.539-beta-5

package/build/{InputDate-d347a593.js → InputDate-6f687763.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-db49bde8.js');
+var tslib_es6 = require('./tslib.es6-5a23c1f5.js');
 var React = require('react');
 var core = require('@mantine/core');
 var classNames = require('classnames');
 var dayjs = require('dayjs');
-var index$1 = require('./index-5b360248.js');
+var index$1 = require('./index-611265e0.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-a104c1a2.js');
-var Locale = require('./Locale-e4247f19.js');
-var index$2 = require('./index-afe9cb61.js');
+var index = require('./index-4b6d18ff.js');
+var Locale = require('./Locale-a19c0218.js');
+var index$2 = require('./index-29821337.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{LastPeriod-b85c342a.js → LastPeriod-f660ab5f.js}

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

package/build/{MobileBottomNavigationIcon-e3ee9f85.js → MobileBottomNavigationIcon-7259931b.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-db49bde8.js');
+var tslib_es6 = require('./tslib.es6-5a23c1f5.js');
 var React = require('react');
-var index = require('./index-afe9cb61.js');
+var index = require('./index-29821337.js');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-163277bb.js');
+var utils = require('./utils-a4489e68.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{SiteWideBanner-6d2569fd.js → SiteWideBanner-9eb0d0a5.js}

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-faec7a1d.js');
+var index$2 = require('./index-1ca08c2c.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-afe9cb61.js');
-var index$1 = require('./index-315ed1e3.js');
-var tslib_es6 = require('./tslib.es6-db49bde8.js');
-var index$6 = require('./index-a104c1a2.js');
-var index$5 = require('./index-5b4ec5cc.js');
+var index = require('./index-29821337.js');
+var index$1 = require('./index-c5cc924b.js');
+var tslib_es6 = require('./tslib.es6-5a23c1f5.js');
+var index$6 = require('./index-4b6d18ff.js');
+var index$5 = require('./index-f1123a81.js');
 var core = require('@mantine/core');
-var number = require('./number-b88f257f.js');
-var index$3 = require('./index-36384dbe.js');
+var number = require('./number-5c8d40bf.js');
+var index$3 = require('./index-1041f10b.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-74df3fea.js');
-var index$7 = require('./index-348a7df0.js');
+var index$4 = require('./index-9ba6ef94.js');
+var index$7 = require('./index-9af5bdce.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var core$1 = require('@hhgtech/icons/core');
 var Cookies = require('js-cookie');
-var utils = require('./utils-163277bb.js');
+var utils = require('./utils-a4489e68.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-c3045ee8.js → Spinner-4e886c66.js}

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

package/build/{WhatsApp-1f1f5fe9.js → WhatsApp-5e4de09a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-db49bde8.js');
+var tslib_es6 = require('./tslib.es6-5a23c1f5.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-9d6ff3cd.js');
-var index$1 = require('./index-f83b010f.js');
-var index$2 = require('./index-b05201aa.js');
-require('./tslib.es6-db49bde8.js');
+var index = require('./index-c3050179.js');
+var index$1 = require('./index-ee6937c0.js');
+var index$2 = require('./index-39ddb577.js');
+require('./tslib.es6-5a23c1f5.js');
 require('react');
-require('./index-65e3edc7.js');
+require('./index-0d45686a.js');
 require('@mantine/core');
-require('./shared-367b10eb.js');
-require('./index-5b360248.js');
-require('./index-faec7a1d.js');
+require('./shared-6c1924d7.js');
+require('./index-611265e0.js');
+require('./index-1ca08c2c.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-315ed1e3.js');
+require('./index-c5cc924b.js');
 require('./constantsDomainLocales.js');
-require('./Locale-e4247f19.js');
+require('./Locale-a19c0218.js');
 require('./constantsIsProduction.js');
-require('./index-d245d674.js');
-require('./utils-163277bb.js');
+require('./index-97c34b30.js');
+require('./utils-a4489e68.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-afe9cb61.js');
-require('./index-e9b51637.js');
+require('./index-29821337.js');
+require('./index-58d09c31.js');
 require('dayjs');
-require('./index-5b4ec5cc.js');
+require('./index-f1123a81.js');
 require('@mantine/notifications');
-require('./index-a104c1a2.js');
+require('./index-4b6d18ff.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-c3712a33.js');
+require('./useUniqueId-5bbb70bc.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-0f597393.js');
-require('./translationsContext-46480f79.js');
-require('./index-31e0fd89.js');
+require('./index.styles-3d349ffd.js');
+require('./translationsContext-fc39ee58.js');
+require('./index-f6c3a9ef.js');
 
 
 

package/build/atoms.js

@@ -2,82 +2,82 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-d55186d7.js');
-var index$1 = require('./index-cfbcb918.js');
-var index$2 = require('./index-9d6ff3cd.js');
-var index$3 = require('./index-5957ba8c.js');
-var index$4 = require('./index-12801123.js');
-var index$5 = require('./index-c54d9732.js');
-var index$6 = require('./index-3ed60239.js');
-var index$7 = require('./index-faec7a1d.js');
-var index$8 = require('./index-b05201aa.js');
-var index$9 = require('./index-d028b927.js');
-var index$a = require('./index-e5d02405.js');
-var index$b = require('./index-d3bbb795.js');
-var index$c = require('./index-f217b3d4.js');
-var index$d = require('./index-f83b010f.js');
-var index$e = require('./index-5025f4f1.js');
-var index$f = require('./index-1d332cc7.js');
-var index$g = require('./index-5b9db189.js');
-var index$h = require('./index-57434732.js');
-var index$i = require('./index-d245d674.js');
-var logoIcon = require('./logoIcon-e1dc870d.js');
-var index$j = require('./index-829bcfed.js');
-var index$k = require('./index-fdb4e7e1.js');
-var index$m = require('./index-6acc603d.js');
-var index$n = require('./index-499973d3.js');
-var InputDate = require('./InputDate-d347a593.js');
-var index$l = require('./index-dfbe2b3d.js');
+var index = require('./index-5b87c55d.js');
+var index$1 = require('./index-49f58bf0.js');
+var index$2 = require('./index-c3050179.js');
+var index$3 = require('./index-8efe6854.js');
+var index$4 = require('./index-2560eef3.js');
+var index$5 = require('./index-7f01eade.js');
+var index$6 = require('./index-bcae97c5.js');
+var index$7 = require('./index-1ca08c2c.js');
+var index$8 = require('./index-39ddb577.js');
+var index$9 = require('./index-58509d15.js');
+var index$a = require('./index-b50efbcb.js');
+var index$b = require('./index-40c3cccb.js');
+var index$c = require('./index-ea3ad417.js');
+var index$d = require('./index-ee6937c0.js');
+var index$e = require('./index-4770d965.js');
+var index$f = require('./index-fba92164.js');
+var index$g = require('./index-afe62aaf.js');
+var index$h = require('./index-116cf021.js');
+var index$i = require('./index-97c34b30.js');
+var logoIcon = require('./logoIcon-e52063b2.js');
+var index$j = require('./index-04d60884.js');
+var index$k = require('./index-c1c72057.js');
+var index$m = require('./index-7a94df8f.js');
+var index$n = require('./index-016538e4.js');
+var InputDate = require('./InputDate-6f687763.js');
+var index$l = require('./index-4be29fba.js');
 require('react');
-require('./index-afe9cb61.js');
-require('./tslib.es6-db49bde8.js');
+require('./index-29821337.js');
+require('./tslib.es6-5a23c1f5.js');
 require('@mantine/core');
-require('./index-5b360248.js');
+require('./index-611265e0.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-163277bb.js');
+require('./utils-a4489e68.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./index-36384dbe.js');
-require('./translationsContext-46480f79.js');
+require('./index-1041f10b.js');
+require('./translationsContext-fc39ee58.js');
 require('@mantine/carousel');
-require('./index-65e3edc7.js');
-require('./shared-367b10eb.js');
+require('./index-0d45686a.js');
+require('./shared-6c1924d7.js');
 require('./constantsDomainLocales.js');
-require('./Locale-e4247f19.js');
+require('./Locale-a19c0218.js');
 require('@mantine/dates');
-require('./index-a104c1a2.js');
+require('./index-4b6d18ff.js');
 require('date-fns/locale');
-require('./index-5b4ec5cc.js');
+require('./index-f1123a81.js');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-315ed1e3.js');
-require('./index-e9b51637.js');
+require('./index-c5cc924b.js');
+require('./index-58d09c31.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-0f597393.js');
-require('./index-31e0fd89.js');
+require('./index.styles-3d349ffd.js');
+require('./index-f6c3a9ef.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-07256a39.js');
+require('./animation-139416d2.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-c3712a33.js');
+require('./useUniqueId-5bbb70bc.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-1f1f5fe9.js');
-require('./Spinner-c3045ee8.js');
-require('./index-7076817a.js');
-require('./paths-4c55ced3.js');
-require('./constants-3c241cd7.js');
-require('./utils-c79eff61.js');
-require('./index-ea169a40.js');
+require('./WhatsApp-5e4de09a.js');
+require('./Spinner-4e886c66.js');
+require('./index-3a1f372f.js');
+require('./paths-1b81956e.js');
+require('./constants-f7bd8398.js');
+require('./utils-ae11780b.js');
+require('./index-d5737583.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-9d6ba538.js');
+require('./constants-70fdc9ab.js');
 require('vaul');