@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/{index-92eedeb0.js → index-9b3a8b6d.js}

@@ -1,20 +1,21 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-2673b49d.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-06ba3978.js';
 import * as React from 'react';
 import React__default, { useState, forwardRef, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
-import { em, createStyles, useMantineTheme, Button as Button$1, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
+import { em, Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-80f4d7df.js';
-import { B as Breakpoints } from './utils-511a24f4.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import { B as Breakpoints } from './utils-d7bbdb52.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-4dcdce19.js';
-import { L as LOCALE } from './index-eeedf0f0.js';
-import { t as theme } from './theme-0af1cc3d.js';
-import { G as GlobalHeadingStyle } from './useMantineLocale-1373e175.js';
-import { I as ISO_FORMAT, s as siteOptions } from './index-c807ef87.js';
+import { T as Text } from './index-5723381f.js';
+import { L as LOCALE } from './index-189d7601.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-453f8013.js';
+import { I as ISO_FORMAT, s as siteOptions } from './index-6210f454.js';
+import { A as ANIMATION_DURATION, B as Button } from './index-1d3c6ce7.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-d4b0bdd3.js';
+import { a as useUniqueId } from './useUniqueId-5885911d.js';
 import { Check, Plus } from '@hhgtech/icons/core';
 
 const GlobalButtonStyle = {
@@ -26,8 +27,6 @@ const GlobalButtonStyle = {
     },
 };
 
-const ANIMATION_DURATION = '100ms';
-
 const GlobalInputStyle = (locale) => {
     var _a;
     return ({
@@ -338,194 +337,6 @@ const StyledImage = styled.img `
   }
 `;
 
-var useStyles$4 = createStyles((_theme, _params) => {
-    var _a, _b, _c, _d, _e, _f;
-    const { other } = _theme;
-    const { template } = other;
-    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, } = _params;
-    const isMb = template === 'mb' || themeProp === 'marryBaby';
-    const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
-    const isHexColor = finalColor.startsWith('#');
-    const hexColor50 = isHexColor
-        ? _theme.fn.lighten(color, 0.9)
-        : ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
-    const hexColor = isHexColor
-        ? finalColor
-        : (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
-    const hoverHexColor = isHexColor
-        ? _theme.fn.darken(color, 0.05)
-        : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
-    return {
-        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
-                outline: 'none',
-            } }, (!children && {
-            paddingLeft: '10px',
-            paddingRight: '10px',
-            '.mantine-Button-icon': {
-                margin: 0,
-            },
-        })), (() => {
-            switch (size) {
-                case 'xl':
-                    return {
-                        height: 56,
-                        fontWeight: 600,
-                        fontSize: isMb ? '14px' : '16px',
-                        lineHeight: '24px',
-                    };
-                case 'lg':
-                    return {
-                        height: 48,
-                        fontWeight: 600,
-                        fontSize: isMb ? '14px' : '16px',
-                        lineHeight: '24px',
-                    };
-                case 'md':
-                    return {
-                        height: 40,
-                        fontWeight: 600,
-                        fontSize: '14px',
-                        lineHeight: '22px',
-                    };
-                case 'sm':
-                    return {
-                        height: 32,
-                        fontWeight: 600,
-                        fontSize: isMb ? '12px' : '14px',
-                        lineHeight: '22px',
-                        paddingLeft: '16px',
-                        paddingRight: '16px',
-                    };
-                case 'xs':
-                    return {
-                        height: 24,
-                        fontWeight: 600,
-                        fontSize: '12px',
-                        lineHeight: '18px',
-                        paddingLeft: '8px',
-                        paddingRight: '8px',
-                    };
-            }
-        })()), (() => {
-            switch (variant) {
-                case 'primary': {
-                    return Object.assign({ color: _theme.white, backgroundColor: hexColor }, (!skipHover && {
-                        '&:hover': {
-                            backgroundColor: hoverHexColor,
-                        },
-                    }));
-                }
-                case 'secondary':
-                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
-                        '&:hover': {
-                            backgroundColor: hexColor50,
-                            border: `1px solid ${hexColor}`,
-                        },
-                    }));
-                case 'white':
-                    return {
-                        color: hexColor,
-                        backgroundColor: 'transparent',
-                        border: `1px solid transparent`,
-                        '&:hover': {
-                            backgroundColor: 'transparent',
-                            borderColor: `transparent`,
-                        },
-                    };
-                case 'tertiary':
-                    return {
-                        color: _theme.colors.gray[8],
-                        backgroundColor: _theme.white,
-                        border: `1px solid ${_theme.colors.neutral[2]}`,
-                        '&:hover': Object.assign({}, (!skipHover
-                            ? {
-                                backgroundColor: _theme.colors.neutral[0],
-                                border: `1px solid ${_theme.colors.neutral[0]}`,
-                            }
-                            : {
-                                backgroundColor: _theme.white,
-                                border: `1px solid ${_theme.colors.neutral[2]}`,
-                            })),
-                    };
-                case 'light': {
-                    return {
-                        color: hexColor,
-                        backgroundColor: hexColor50,
-                        border: `1px solid transparent`,
-                        '&:hover': Object.assign({}, (!skipHover
-                            ? {
-                                backgroundColor: _theme.white,
-                                border: `1px solid ${hexColor50}`,
-                            }
-                            : {
-                                backgroundColor: hexColor50,
-                                border: `1px solid transparent`,
-                            })),
-                    };
-                }
-                case 'ghost':
-                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
-                        '&:hover': {
-                            backgroundColor: hexColor50,
-                            border: `1px solid transparent`,
-                        },
-                    }));
-            }
-        })()), { '&[data-disabled]': {
-                backgroundColor: _theme.colors.gray[1],
-                color: _theme.colors.gray[4],
-            } }), (isError
-            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
-                '&:hover': {
-                    backgroundColor: _theme.colors.red[0],
-                    border: `1px solid ${_theme.colors.red[6]}`,
-                },
-            })) : {})), (isSuccess
-            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
-                '&:hover': {
-                    backgroundColor: _theme.colors.green[0],
-                },
-            })) : {})),
-    };
-});
-
-const MAPPED_VARIANT = {
-    primary: 'filled',
-    secondary: 'outline',
-    tertiary: 'default',
-    light: 'light',
-    ghost: 'subtle',
-    error: 'outline',
-    white: 'white',
-    success: 'subtle',
-};
-function filterObject(obj) {
-    const ret = {};
-    Object.keys(obj)
-        .filter((key) => obj[key] !== undefined)
-        .forEach((key) => (ret[key] = obj[key]));
-    return ret;
-}
-const Button = (props) => {
-    var _a, _b;
-    const theme = useMantineTheme();
-    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
-    const isError = variant === 'error';
-    const { classes, cx } = useStyles$4({
-        variant,
-        size,
-        color,
-        skipHover,
-        isError,
-        isSuccess: variant === 'success',
-        children,
-        theme: themeProp,
-    });
-    return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
-            root: classes.root,
-        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
-};
-
 const CambodiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
 const CambodiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
 
@@ -1855,4 +1666,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Anchor as A, Button as B, CaretDown as C, DEBOUNCED_TIME as D, Flag as F, ImageWrap as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Tabs as T, Avatar as a, AspectRatio as b, Input as c, Checkbox as d, ChipButton as e, CentralCarousel as f, useStyles$2 as g, getMantineThemeOverride as h, StyledTextArea as i, StyledSliderWrapper as j, StyledSlider as k, Breadcrumbs as l, Accordion as m, Carousel as n, emotionCache as o, Popover as p, themeColors as t, useScreenSize as u };
+export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, Flag as F, ImageWrap as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Tabs as T, Avatar as a, AspectRatio as b, Input as c, CentralCarousel as d, Checkbox as e, ChipButton as f, useStyles$2 as g, getMantineThemeOverride as h, StyledTextArea as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, Carousel as m, emotionCache as n, Popover as o, themeColors as t, useScreenSize as u };

package/build/esm/{index-3c7f109c.js → index-9b9c1499.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-92eedeb0.js';
+import { B as Button$1 } from './index-1d3c6ce7.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/index-9f99909b.js

@@ -0,0 +1,54 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default, { useContext, useState } from 'react';
+import { T as TogetherComponentGlobalContext } from './utils-3b29eb79.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-7dadf4a1.js';
+
+const StyledUserAvatar = styled.div `
+  width: ${(props) => props.size || 40}px;
+  height: ${(props) => props.size || 40}px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  img {
+    border-radius: 50%;
+  }
+
+  .avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${theme.colors.secondaryBase};
+    border-radius: 50%;
+    color: white;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  &[data-is-marrybaby='true'] {
+    .avatar-default {
+      background-color: ${theme.mbColors.pink};
+    }
+  }
+`;
+
+const UserAvatar = (_a) => {
+    var { className, isMarryBaby: isMarryBabyProp, style, avatar, username, size } = _a, rest = __rest(_a, ["className", "isMarryBaby", "style", "avatar", "username", "size"]);
+    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
+    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
+    const [tempAvatar, setTempAvatar] = useState(false);
+    return (React__default.createElement(StyledUserAvatar, Object.assign({ "data-is-marrybaby": isMarryBaby, className: className, style: style, size: size }, rest), avatar && !tempAvatar ? (React__default.createElement("img", { loading: "lazy", src: avatar, className: `avatar`, alt: "avatar", onError: () => {
+            // e.currentTarget.onerror = null
+            if (!tempAvatar)
+                setTempAvatar(true);
+        } })) : (React__default.createElement("div", { className: "avatar avatar-default" }, username && (username === null || username === void 0 ? void 0 : username.length) > 0 ? username[0].toUpperCase() : 'A'))));
+};
+
+export { UserAvatar as U };