@hhgtech/hhg-components 1.29.80 → 1.29.81

package/build/{index-94fd9ea6.js → index-05f106c2.js}

@@ -1,21 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-4bc45883.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index$2 = require('./index-858f60e0.js');
-var utils = require('./utils-4849d92a.js');
+var index$3 = require('./index-1efa7d84.js');
+var utils = require('./utils-524bda7c.js');
 var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$3 = require('./index-e60c98f8.js');
-var index$1 = require('./index-18ddaa1b.js');
-var theme = require('./theme-f410baf6.js');
-var useMantineLocale = require('./useMantineLocale-b243f628.js');
-var index = require('./index-3a03bb34.js');
+var index$4 = require('./index-d34cd464.js');
+var index$2 = require('./index-df5cd44b.js');
+var theme = require('./theme-e4f7f487.js');
+var useMantineLocale = require('./useMantineLocale-a4f0c61d.js');
+var index = require('./index-a86ea1b6.js');
+var index$1 = require('./index-a7de42d1.js');
 var cn = require('classnames');
-var useUniqueId = require('./useUniqueId-4ce69bff.js');
+var useUniqueId = require('./useUniqueId-8929fe5f.js');
 var core$1 = require('@hhgtech/icons/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -51,8 +52,6 @@ const GlobalButtonStyle = {
     },
 };
 
-const ANIMATION_DURATION = '100ms';
-
 const GlobalInputStyle = (locale) => {
     var _a;
     return ({
@@ -88,7 +87,7 @@ const GlobalInputStyle = (locale) => {
             styles: (_theme, _, { size }) => ({
                 input: {
                     border: `1px solid ${theme.theme.colors.gray200}`,
-                    transition: `all ${ANIMATION_DURATION} ease-in-out`,
+                    transition: `all ${index$1.ANIMATION_DURATION} ease-in-out`,
                     ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
                         switch (size) {
                             case 'lg':
@@ -325,9 +324,9 @@ const getMantineThemeOverride = (locale, template = 'hb') => {
         colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
         primaryColor: template,
         primaryShade: 6,
-        fontFamily: (locale === index$1.LOCALE.Cambodia
+        fontFamily: (locale === index$2.LOCALE.Cambodia
             ? 'Battambang'
-            : locale === index$1.LOCALE.Thailand
+            : locale === index$2.LOCALE.Thailand
                 ? 'Noto Sans Thai'
                 : 'Inter') +
             `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
@@ -341,7 +340,7 @@ const getMantineThemeOverride = (locale, template = 'hb') => {
         components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), useMantineLocale.GlobalHeadingStyle),
         other: {
             template,
-            defaultImage: index$2.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+            defaultImage: index$3.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
         },
     };
 };
@@ -363,196 +362,8 @@ const StyledImage = styled__default["default"].img `
   }
 `;
 
-var useStyles$4 = core.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 = core.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 = tslib_es6.__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__namespace["default"].createElement(core.Button, 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__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$3.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$3.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
 
 const EnglishRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -599,8 +410,8 @@ const EnglishSquareIcon = (props) => (React__namespace["default"].createElement(
         React__namespace["default"].createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
         React__namespace["default"].createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
 
-const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index$3.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index$3.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
 
 const IndonesiaRoundIcon = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
@@ -682,8 +493,8 @@ const MyanmarSquareIcon = (props) => (React__namespace["default"].createElement(
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
 
-const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index$3.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index$3.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
 
 const TaiwanRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -862,7 +673,7 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
     const onClear = () => {
         handleChange('');
     };
-    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$2.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
+    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$3.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
         ? {
             rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
                 React__namespace["default"].createElement(_IconSelect, null))),
@@ -1005,7 +816,7 @@ var useStyles$3 = core.createStyles((_theme, _params) => {
 const Anchor = (_a) => {
     var { color, styles, className } = _a, rest = tslib_es6.__rest(_a, ["color", "styles", "className"]);
     const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
-    return React__namespace["default"].createElement(index$3.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+    return React__namespace["default"].createElement(index$4.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
 };
 
 const BreadcrumbItem = (_a) => {
@@ -1133,13 +944,13 @@ const StyledAccordion = styled__default["default"](core.Accordion) `
         width: 16px;
         height: 16px;
         background-position: center;
-        background-image: url(${(props) => props.closeChevron || index$2.CommonGAssets.getAssetPath('plus-icon.svg')});
+        background-image: url(${(props) => props.closeChevron || index$3.CommonGAssets.getAssetPath('plus-icon.svg')});
       }
     }
     &[data-active='true'] {
       .mantine-Accordion-chevron {
         > div {
-          background-image: url(${(props) => props.openChevron || index$2.CommonGAssets.getAssetPath('minus-icon.svg')});
+          background-image: url(${(props) => props.openChevron || index$3.CommonGAssets.getAssetPath('minus-icon.svg')});
         }
       }
     }
@@ -1161,7 +972,7 @@ Accordion.Control = core.Accordion.Control;
 Accordion.Item = core.Accordion.Item;
 Accordion.Panel = core.Accordion.Panel;
 
-const DEFAULT_AVATAR = index$2.CommonGAssets.getAssetPath('avatar.jpg');
+const DEFAULT_AVATAR = index$3.CommonGAssets.getAssetPath('avatar.jpg');
 const Avatar = (_a) => {
     var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
     avatarProps = tslib_es6.__rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
@@ -1208,8 +1019,8 @@ const NumberInput = (_a) => {
         }, removeTrailingZeros: true, value: value }, props)));
 };
 
-const EyeVisible = index$2.CommonGAssets.getAssetPath('EyeVisible.svg');
-const EyeHidden = index$2.CommonGAssets.getAssetPath('EyeHidden.svg');
+const EyeVisible = index$3.CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = index$3.CommonGAssets.getAssetPath('EyeHidden.svg');
 const PasswordInput = React.forwardRef((props, ref) => {
     const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = tslib_es6.__rest(props, ["size", "visibilityToggleIcon"]);
     const visibilityToggleIcon = visibilityToggleIconProps ||
@@ -1793,13 +1604,13 @@ const _Tabs = (_a) => {
         setDisableNext(((_a = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + scrollPosition.x ===
             ((_b = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
     }, [scrollPosition]);
-    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$3.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
+    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$4.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
     return (React__namespace["default"].createElement(core.Tabs, Object.assign({}, props, rest), children || (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         React__namespace["default"].createElement(core.ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
             React__namespace["default"].createElement(core.Tabs.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__namespace["default"].createElement(core.Tabs.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
                 React__namespace["default"].createElement(TabTextComponent, Object.assign({}, i)))))),
-            React__namespace["default"].createElement(Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__namespace["default"].createElement(other.ArrowLeft, { size: 16 }) }),
-            React__namespace["default"].createElement(Button, { className: cx(classes.btn, classes.nextBtn, disableNext ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide + 1 < dataList.length - 1
+            React__namespace["default"].createElement(index$1.Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__namespace["default"].createElement(other.ArrowLeft, { size: 16 }) }),
+            React__namespace["default"].createElement(index$1.Button, { className: cx(classes.btn, classes.nextBtn, disableNext ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide + 1 < dataList.length - 1
                     ? currentSlide + 1
                     : dataList.length - 1), leftIcon: React__namespace["default"].createElement(other.ArrowRight, { size: 16 }) })),
         dataList.map((i) => (React__namespace["default"].createElement(core.Tabs.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
@@ -1874,8 +1685,8 @@ const _ChipButton = (_a) => {
     var { variant = 'secondary', withIcon, children, buttonProps } = _a, rest = tslib_es6.__rest(_a, ["variant", "withIcon", "children", "buttonProps"]);
     const { classes, cx } = useStyles();
     return (React__namespace["default"].createElement(core.Chip, Object.assign({ classNames: classes }, rest, { unstyled: true }),
-        React__namespace["default"].createElement(Button, Object.assign({ className: cx(classes.btnRoot, 'checked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Check, { size: 18, color: "currentColor" }) : undefined, variant: variant }, buttonProps), children),
-        React__namespace["default"].createElement(Button, Object.assign({ className: cx(classes.btnRoot, 'unchecked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Plus, { size: 18, color: "currentColor" }) : undefined, variant: 'tertiary' }, buttonProps), children)));
+        React__namespace["default"].createElement(index$1.Button, Object.assign({ className: cx(classes.btnRoot, 'checked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Check, { size: 18, color: "currentColor" }) : undefined, variant: variant }, buttonProps), children),
+        React__namespace["default"].createElement(index$1.Button, Object.assign({ className: cx(classes.btnRoot, 'unchecked'), leftIcon: withIcon ? React__namespace["default"].createElement(core$1.Plus, { size: 18, color: "currentColor" }) : undefined, variant: 'tertiary' }, buttonProps), children)));
 };
 const ChipButton = _ChipButton;
 ChipButton.Group = core.Chip.Group;
@@ -1885,7 +1696,6 @@ exports.Anchor = Anchor;
 exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;
-exports.Button = Button;
 exports.CaretDown = CaretDown;
 exports.Carousel = Carousel;
 exports.CentralCarousel = CentralCarousel;

package/build/index-06fa8444.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var React = require('react');
+var styled = require('@emotion/styled');
+var theme = require('./theme-e4f7f487.js');
+var index = require('./index-05f106c2.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledAvatar = styled__default["default"].div `
+  background-color: var(--background-color, transparent);
+  color: white;
+  cursor: pointer;
+  img {
+    --width: var(--width-prop, 40px);
+    --height: var(--height-prop, 40px);
+    width: var(--width);
+    height: var(--height);
+  }
+  &[data-has-max='true'] {
+    img {
+      max-width: var(--width);
+      max-height: var(--height);
+    }
+  }
+
+  &[data-avatar-type='square'] {
+    img {
+      --width: var(--width-prop, 72px);
+      --height: var(--height-prop, 72px);
+      border-radius: ${theme.theme.borderRadius};
+    }
+  }
+
+  &[data-avatar-type='rounded'] {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &[data-custom-size='true'] {
+    display: flex;
+    overflow: hidden;
+    overflow: hidden;
+    width: var(--size);
+    height: var(--size);
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    font-size: calc(var(--size) / 2);
+    font-weight: bold;
+    &[data-avatar-type='square'] {
+      border-radius: ${theme.theme.borderRadius};
+    }
+    &[data-avatar-type='rounded'] {
+      border-radius: 50%;
+      img {
+        --width: 100%;
+        --height: 100%;
+      }
+    }
+    img {
+      object-fit: cover;
+    }
+  }
+`;
+
+const pxBySize = {
+    xs: 28,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 64,
+    xxl: 80,
+    xxxl: 96,
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
+    const sizePx = size ? pxBySize[size] : undefined;
+    const [isImageLoadingError, setIsImageLoadingError] = React.useState(false);
+    React.useEffect(() => {
+        if (avatarUrl) {
+            const img = document.createElement('img');
+            img.setAttribute('src', avatarUrl);
+            img.addEventListener('error', () => {
+                setIsImageLoadingError(true);
+            });
+        }
+    }, [avatarUrl, setIsImageLoadingError]);
+    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
+    return (React__default["default"].createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
+        avatarImg,
+        avatarUrl && !isImageLoadingError && (React__default["default"].createElement(index.ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
+        shouldRenderLetter && firstLetter));
+};
+
+exports.Avatar = Avatar;

package/build/{index-858f60e0.js → index-1efa7d84.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-3a03bb34.js');
-var isProduction = require('./isProduction-2e55aee3.js');
+var index = require('./index-a86ea1b6.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';