@hhgtech/hhg-components 1.29.455 → 1.29.456-beta-2

package/build/esm/{index-0e050212.js → index-13399884.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-b2d74826.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-e382e4e1.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-cab2a034.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-bdf53858.js';
-import { I as Input } from './index-52d06eb2.js';
+import { _ as __rest } from './tslib.es6-178efaba.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-fbe73940.js';
+import { I as Input } from './index-335c9644.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-5fd53d6e.js';
-import './index-2eb201d0.js';
-import './index-5304aa24.js';
-import './index-4d6199e1.js';
-import './index-062b8500.js';
-import './index-eaa018cf.js';
-import './index-48c42ac6.js';
-import './index.styles-a2d65c66.js';
-import './translationsContext-454bcb1f.js';
+import './index-bd6aeb17.js';
+import './index-a5ed0dea.js';
+import './index-8cc0c5f8.js';
+import './index-18d6cc53.js';
+import './index-ae60cb61.js';
+import './index-f24df007.js';
+import './index-d22b13ba.js';
+import './index.styles-fc92b9b7.js';
+import './translationsContext-65daee94.js';
 import '@mantine/hooks';
-import './index-bcdf0fd7.js';
+import './index-0195b9ac.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),
@@ -413,6 +413,65 @@ const PureInput = React__default.forwardRef((_a, ref) => {
 });
 PureInput.displayName = 'PureInput';
 
+const DEFAULT_DEVICE_SIZES = [
+    320, 420, 640, 750, 828, 1080, 1200, 1440, 1920, 2048,
+];
+const defaultLoader = ({ src, width, quality }) => {
+    try {
+        const url = new URL(src, typeof window !== 'undefined'
+            ? window.location.origin
+            : 'http://localhost');
+        url.searchParams.set('w', String(width));
+        url.searchParams.set('q', String(quality !== null && quality !== void 0 ? quality : 75));
+        return url.toString();
+    }
+    catch (error) {
+        return src;
+    }
+};
+function getWidths(opts) {
+    if (opts.sizes)
+        return DEFAULT_DEVICE_SIZES;
+    if (opts.width) {
+        const w = Math.max(1, Math.round(opts.width));
+        console.log('x', Array.from(new Set([w, Math.min(w * 1, 2048)])).sort((a, b) => a - b));
+        return Array.from(new Set([w, Math.min(w * 2, 2048)])).sort((a, b) => a - b);
+    }
+    return DEFAULT_DEVICE_SIZES;
+}
+
+const ImageWrapV2 = (_a) => {
+    var { alt, backupSrc, src, placeholderSrc, style, ref, unoptimized = false, quality, sizes, width } = _a, props = __rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref", "unoptimized", "quality", "sizes", "width"]);
+    const [hasError, setHasError] = useState(false);
+    const widths = useMemo(() => (unoptimized ? [] : getWidths({ sizes, width })), [sizes, width, unoptimized]);
+    const srcSet = useMemo(() => {
+        if (unoptimized)
+            return undefined;
+        return widths
+            .map((w) => `${defaultLoader({ src, width: w, quality })} ${w}w`)
+            .join(', ');
+    }, [unoptimized, widths, src, quality]);
+    const computedSrc = useMemo(() => {
+        if (unoptimized)
+            return src;
+        // pick the largest width in the set for the base `src`
+        const w = widths.length ? widths[widths.length - 1] : width !== null && width !== void 0 ? width : 1920;
+        return defaultLoader({ src, width: w, quality });
+    }, [unoptimized, widths, src, quality, width]);
+    return (React__default.createElement(StyledImage, Object.assign({ loading: "lazy", alt: alt, srcSet: srcSet, onError: () => !hasError && setHasError(true), src: hasError ? backupSrc || computedSrc : computedSrc || backupSrc, style: Object.assign(Object.assign({}, (placeholderSrc
+            ? {
+                backgroundImage: `url(${placeholderSrc})`,
+            }
+            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
+};
+const StyledImage = styled.img `
+  &[data-has-placeholder='true'] {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+`;
+
 const StyledInput = styled(Input) `
   box-shadow: 0px 0px 1px 0px #0000000a, 0px 2px 8px 0px #0000000a,
     0px 10px 16px 0px #0000000a;
@@ -438,4 +497,4 @@ const SearchInput = (props) => {
     return (React__default.createElement(StyledInput, Object.assign({ disabled: loading || disabled, size: "lg", value: value, onChangeRaw: handleChange, type: "text", placeholder: placeholder, className: className, icon: icon, style: style }, restProps, { "data-event-label": value })));
 };
 
-export { Checkbox as C, Pagination as P, StyledSearchIcon as S, PureInput as a, SearchInput as b, Search2 as c };
+export { Checkbox as C, ImageWrapV2 as I, Pagination as P, StyledSearchIcon as S, PureInput as a, SearchInput as b, Search2 as c };

package/build/esm/{index-ec78b705.js → index-14f021a4.js}

@@ -1,41 +1,41 @@
 import React__default, { createContext, useContext, useMemo, useCallback, useState, useEffect, forwardRef, useRef } from 'react';
 import { rem, Container, createStyles, Box, Stack, Flex, AspectRatio, ScrollArea, Chip, Group, Badge, MultiSelect, Stepper } from '@mantine/core';
-import { C as CommonGAssets } from './index-5304aa24.js';
-import { b as callApiWithAuth, d as getApiPath, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-fa869c2d.js';
-import { G as GA_TOKEN_COOKIE } from './index-5fd53d6e.js';
-import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-59492316.js';
+import { C as CommonGAssets } from './index-8cc0c5f8.js';
+import { b as callApiWithAuth, d as getApiPath, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-117755b9.js';
+import { G as GA_TOKEN_COOKIE } from './index-bd6aeb17.js';
+import { H as HEALTH_TOOL_TYPE, a as HEALTH_TOOL_DEFAULT_IMG } from './healthTools-77985269.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-cab2a034.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-d6017442.js';
-import { I as ImageWrap } from './index-ed378dea.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-e2b3cc05.js';
-import { u as useTranslations } from './index-33e98652.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-178efaba.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-ecd2d5f4.js';
+import { I as ImageWrap } from './index-4dd20e3f.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './normalizeLink-fc10433c.js';
+import { u as useTranslations } from './index-f8241e57.js';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { d as Checkbox, f as ChipButton, I as Input, b as AspectRatio$1 } from './index-52d06eb2.js';
+import { d as Checkbox, f as ChipButton, I as Input, b as AspectRatio$1 } from './index-335c9644.js';
 import '@mantine/dates';
-import './index-2eb201d0.js';
-import { t as themeColors } from './index-4d6199e1.js';
-import { T as Text } from './index-062b8500.js';
-import { B as Button } from './index-eaa018cf.js';
-import './index-48c42ac6.js';
-import './index.styles-a2d65c66.js';
+import './index-a5ed0dea.js';
+import { t as themeColors } from './index-18d6cc53.js';
+import { T as Text } from './index-ae60cb61.js';
+import { B as Button } from './index-f24df007.js';
+import './index-d22b13ba.js';
+import './index.styles-fc92b9b7.js';
 import { useViewportSize } from '@mantine/hooks';
-import './utils-b2d74826.js';
-import './index-bcdf0fd7.js';
+import './utils-e382e4e1.js';
+import './index-0195b9ac.js';
 import { PATHS as PATHS$2 } from './togetherApiPaths.js';
-import './translationsContext-454bcb1f.js';
-import { H as Heading } from './index-f3fbb914.js';
-import { u as useHealthToolsCache } from './useHealthToolCache-0c43d17f.js';
-import { I as Icon } from './index-43bf7b2a.js';
+import './translationsContext-65daee94.js';
+import { H as Heading } from './index-a1bd13b7.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-ec9b2a9b.js';
+import { I as Icon } from './index-43debfe2.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { i as isVideo } from './index-e52c7525.js';
-import { M as Modal } from './index-f3a77a4b.js';
+import { i as isVideo } from './index-82db54c9.js';
+import { M as Modal } from './index-2142d897.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { L as LOCALE } from './Locale-639fa550.js';
+import { L as LOCALE } from './Locale-6ac653b1.js';
 
 const PREFER_TOPICS = [
     {

package/build/esm/{index-4d6199e1.js → index-18d6cc53.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-cab2a034.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-178efaba.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-2eb201d0.js';
-import { L as LOCALE } from './Locale-639fa550.js';
+import './index-a5ed0dea.js';
+import { L as LOCALE } from './Locale-6ac653b1.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-5fd53d6e.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-bd6aeb17.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-5304aa24.js';
+import { C as CommonGAssets } from './index-8cc0c5f8.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-b2d74826.js';
-import { C as CustomStylesType, F as FontWeight } from './index-48c42ac6.js';
-import { A as ANIMATION_DURATION } from './shared-a4ad5a09.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-e382e4e1.js';
+import { C as CustomStylesType, F as FontWeight } from './index-d22b13ba.js';
+import { A as ANIMATION_DURATION } from './shared-6a97fa68.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {

package/build/esm/{index-f7229433.js → index-1bc5ab85.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-429a4f6e.js';
+import { C as Container } from './index-3195e3a1.js';
 import dayjs from 'dayjs';
-import './index-5fd53d6e.js';
-import './index-52d06eb2.js';
+import './index-bd6aeb17.js';
+import './index-335c9644.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-2eb201d0.js';
-import './index-5304aa24.js';
-import './index-4d6199e1.js';
-import { T as Text } from './index-062b8500.js';
-import './index-eaa018cf.js';
-import './index-48c42ac6.js';
-import './index.styles-a2d65c66.js';
-import './translationsContext-454bcb1f.js';
+import './index-a5ed0dea.js';
+import './index-8cc0c5f8.js';
+import './index-18d6cc53.js';
+import { T as Text } from './index-ae60cb61.js';
+import './index-f24df007.js';
+import './index-d22b13ba.js';
+import './index.styles-fc92b9b7.js';
+import './translationsContext-65daee94.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-b2d74826.js';
-import './index-bcdf0fd7.js';
-import { u as useScreenSize } from './index-ed378dea.js';
+import { M as MediaQueries } from './utils-e382e4e1.js';
+import './index-0195b9ac.js';
+import { u as useScreenSize } from './index-4dd20e3f.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-ef84cce4.js';
-import { M as MarryBabyText } from './index-bfbe9110.js';
+import { L as Logo } from './index-bf865301.js';
+import { M as MarryBabyText } from './index-68fd836f.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-c6d10bba.js → index-1dd44ab6.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-cab2a034.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-178efaba.js';
 import React__default, { useState, useContext, useMemo, useRef, useCallback, useEffect, createContext } from 'react';
 import dayjs from 'dayjs';
-import { T as Tabs } from './index-bcdf0fd7.js';
-import { L as Loading } from './index-7b94ec38.js';
-import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-f7e87979.js';
+import { T as Tabs } from './index-0195b9ac.js';
+import { L as Loading } from './index-52993515.js';
+import { b as formatPost, a as formatCommunity, g as formatArticle } from './dataTransform-8a5fce23.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-fa869c2d.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, b as callApiWithAuth } from './utils-117755b9.js';
 import { Plus } from '@hhgtech/icons/core';
 import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
-import { C as CommonGAssets } from './index-5304aa24.js';
-import { I as ImageWrap } from './index-ed378dea.js';
-import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-ec4c372a.js';
-import { S as SocialType } from './index-2eb201d0.js';
-import { u as useTranslations } from './index-33e98652.js';
+import { C as CommonGAssets } from './index-8cc0c5f8.js';
+import { I as ImageWrap } from './index-4dd20e3f.js';
+import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-ed41f897.js';
+import { S as SocialType } from './index-a5ed0dea.js';
+import { u as useTranslations } from './index-f8241e57.js';
 import { theme } from './miscTheme.js';
 import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
-import { A as Anchor$1 } from './index-52d06eb2.js';
+import { A as Anchor$1 } from './index-335c9644.js';
 import '@mantine/dates';
-import './index-5fd53d6e.js';
-import './index-4d6199e1.js';
-import { T as Text } from './index-062b8500.js';
-import { B as Button } from './index-eaa018cf.js';
-import './index-48c42ac6.js';
-import './index.styles-a2d65c66.js';
+import './index-bd6aeb17.js';
+import './index-18d6cc53.js';
+import { T as Text } from './index-ae60cb61.js';
+import { B as Button } from './index-f24df007.js';
+import './index-d22b13ba.js';
+import './index.styles-fc92b9b7.js';
 import '@mantine/hooks';
-import './utils-b2d74826.js';
+import './utils-e382e4e1.js';
 import styled from '@emotion/styled';
 import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
-import { d as decodeMention, b as decodePostUrl } from './post-7b6e8e20.js';
-import { B as Button$1 } from './index-87274509.js';
-import './translationsContext-454bcb1f.js';
+import { d as decodeMention, b as decodePostUrl } from './post-45e701ef.js';
+import { B as Button$1 } from './index-0e1bb56f.js';
+import './translationsContext-65daee94.js';
 
 const StyledPostContent = styled.div `
   padding: 0.5rem 1rem 1rem;

package/build/esm/{index-f3a77a4b.js → index-2142d897.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-cab2a034.js';
+import { _ as __rest } from './tslib.es6-178efaba.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { u as useStyles } from './index.styles-a2d65c66.js';
+import { u as useStyles } from './index.styles-fc92b9b7.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);