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

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b3c81072.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-3a6037fe.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-9dc47ada.js');
-var Locale = require('./Locale-2b6b876e.js');
-var index$2 = require('./index-fb1d3113.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-dec74771.js → LastPeriod-f660ab5f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b3c81072.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-8c7f524c.js → MobileBottomNavigationIcon-7259931b.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b3c81072.js');
+var tslib_es6 = require('./tslib.es6-5a23c1f5.js');
 var React = require('react');
-var index = require('./index-fb1d3113.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-0c686515.js');
+var utils = require('./utils-a4489e68.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{SiteWideBanner-27f83836.js → SiteWideBanner-9eb0d0a5.js}

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-a03c6907.js');
+var index$2 = require('./index-1ca08c2c.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-fb1d3113.js');
-var index$1 = require('./index-0cb6b141.js');
-var tslib_es6 = require('./tslib.es6-b3c81072.js');
-var index$6 = require('./index-9dc47ada.js');
-var index$5 = require('./index-33e1c558.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-4480d015.js');
-var index$3 = require('./index-b48d0e30.js');
+var number = require('./number-5c8d40bf.js');
+var index$3 = require('./index-1041f10b.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-17a3a203.js');
-var index$7 = require('./index-080b0266.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-0c686515.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: {
@@ -196,13 +196,18 @@ var useStyles$1 = core.createStyles((theme, { layout, useSquareRatioThumbnail, r
             : {
                 flexDirection: 'column',
             })),
-        itemThumbImg: {},
+        itemThumbImg: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+        },
         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',
@@ -268,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,
@@ -325,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',
@@ -353,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: {
@@ -385,7 +387,30 @@ var useStyles = core.createStyles((theme, { active, layout, radius }) => {
             },
         })),
         thumbWrapper: {},
-        thumbFrame: {},
+        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),
         },
@@ -408,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': {
@@ -418,7 +444,7 @@ var useStyles = core.createStyles((theme, { active, layout, radius }) => {
         },
         duration: {
             position: 'absolute',
-            zIndex: 0,
+            zIndex: 2,
             background: '#262626',
             borderRadius: itemRadius,
             bottom: 4,
@@ -432,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),
@@ -447,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;
@@ -462,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, 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,
@@ -598,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}`;
@@ -648,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-0e17408f.js → Spinner-4e886c66.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b3c81072.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-c86ab5cb.js → WhatsApp-5e4de09a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b3c81072.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-caeb1d85.js');
-var index$1 = require('./index-d329cbbe.js');
-var index$2 = require('./index-093b5a4d.js');
-require('./tslib.es6-b3c81072.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-31904dcc.js');
+require('./index-0d45686a.js');
 require('@mantine/core');
-require('./shared-4dfa8019.js');
-require('./index-3a6037fe.js');
-require('./index-a03c6907.js');
+require('./shared-6c1924d7.js');
+require('./index-611265e0.js');
+require('./index-1ca08c2c.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-0cb6b141.js');
+require('./index-c5cc924b.js');
 require('./constantsDomainLocales.js');
-require('./Locale-2b6b876e.js');
+require('./Locale-a19c0218.js');
 require('./constantsIsProduction.js');
-require('./index-0650870f.js');
-require('./utils-0c686515.js');
+require('./index-97c34b30.js');
+require('./utils-a4489e68.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-fb1d3113.js');
-require('./index-4a3cbcd4.js');
+require('./index-29821337.js');
+require('./index-58d09c31.js');
 require('dayjs');
-require('./index-33e1c558.js');
+require('./index-f1123a81.js');
 require('@mantine/notifications');
-require('./index-9dc47ada.js');
+require('./index-4b6d18ff.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-082d90a5.js');
+require('./useUniqueId-5bbb70bc.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-871951c0.js');
-require('./translationsContext-07ab8d10.js');
-require('./index-0e477759.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-4ba6759f.js');
-var index$1 = require('./index-6be82a78.js');
-var index$2 = require('./index-caeb1d85.js');
-var index$3 = require('./index-d7d6b43b.js');
-var index$4 = require('./index-458ab1ca.js');
-var index$5 = require('./index-11a93304.js');
-var index$6 = require('./index-90b49956.js');
-var index$7 = require('./index-a03c6907.js');
-var index$8 = require('./index-093b5a4d.js');
-var index$9 = require('./index-dd0d0052.js');
-var index$a = require('./index-4ff1694d.js');
-var index$b = require('./index-45ae8b92.js');
-var index$c = require('./index-5e9c94db.js');
-var index$d = require('./index-d329cbbe.js');
-var index$e = require('./index-a9260abb.js');
-var index$f = require('./index-a2e1f76e.js');
-var index$g = require('./index-650f3277.js');
-var index$h = require('./index-7a91aaed.js');
-var index$i = require('./index-0650870f.js');
-var logoIcon = require('./logoIcon-cb2754da.js');
-var index$j = require('./index-7276bbca.js');
-var index$k = require('./index-4e676857.js');
-var index$m = require('./index-bc9e2097.js');
-var index$n = require('./index-935bbbdd.js');
-var InputDate = require('./InputDate-d69982a1.js');
-var index$l = require('./index-e07d5020.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-fb1d3113.js');
-require('./tslib.es6-b3c81072.js');
+require('./index-29821337.js');
+require('./tslib.es6-5a23c1f5.js');
 require('@mantine/core');
-require('./index-3a6037fe.js');
+require('./index-611265e0.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-0c686515.js');
+require('./utils-a4489e68.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./index-b48d0e30.js');
-require('./translationsContext-07ab8d10.js');
+require('./index-1041f10b.js');
+require('./translationsContext-fc39ee58.js');
 require('@mantine/carousel');
-require('./index-31904dcc.js');
-require('./shared-4dfa8019.js');
+require('./index-0d45686a.js');
+require('./shared-6c1924d7.js');
 require('./constantsDomainLocales.js');
-require('./Locale-2b6b876e.js');
+require('./Locale-a19c0218.js');
 require('@mantine/dates');
-require('./index-9dc47ada.js');
+require('./index-4b6d18ff.js');
 require('date-fns/locale');
-require('./index-33e1c558.js');
+require('./index-f1123a81.js');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-0cb6b141.js');
-require('./index-4a3cbcd4.js');
+require('./index-c5cc924b.js');
+require('./index-58d09c31.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-871951c0.js');
-require('./index-0e477759.js');
+require('./index.styles-3d349ffd.js');
+require('./index-f6c3a9ef.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-8e9fe783.js');
+require('./animation-139416d2.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-082d90a5.js');
+require('./useUniqueId-5bbb70bc.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-c86ab5cb.js');
-require('./Spinner-0e17408f.js');
-require('./index-53e2fdd9.js');
-require('./paths-8d6a7568.js');
-require('./constants-e1b818eb.js');
-require('./utils-1ea3457c.js');
-require('./index-e867f9d7.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-e37d5f16.js');
+require('./constants-70fdc9ab.js');
 require('vaul');