@televet/kibble-ui 1.20.0-beta.2nbq04d.2 → 1.20.0-beta.2nbq04d.4

package/build/components/MediaAndIcons/Avatar/avatar.argTypes.d.ts

@@ -1,25 +1,69 @@
+import { Placement } from '@chakra-ui/react';
+import React from 'react';
+import { AvatarSize, AvatarVariant } from './index';
+import { IconName } from '../Icon';
+import { AvatarBadgePosition, AvatarBadgeProps } from './components/AvatarBadge/avatarBadge.component';
+export interface AvatarArgTypeProps {
+    backgroundColor?: string;
+    badgeBackgroundColor?: string;
+    badgeBorderColor?: string;
+    badgeIconColor?: string;
+    badgeIconName?: IconName;
+    badgePosition?: AvatarBadgePosition;
+    badgeProps?: AvatarBadgeProps;
+    color?: string;
+    handleClick?: React.MouseEventHandler<HTMLSpanElement>;
+    handleRemoveButtonClick?: React.MouseEventHandler<HTMLDivElement>;
+    hideBorder?: boolean;
+    iconName?: IconName;
+    name?: string;
+    randomizeVariant?: boolean;
+    showBadge?: boolean;
+    showRemoveButton?: boolean;
+    showTooltip?: boolean;
+    size?: AvatarSize;
+    src?: string;
+    tooltipPlacement?: Placement;
+    tooltipText?: string;
+    variant?: AvatarVariant;
+}
 export declare const avatarArgTypes: {
-    name: {
-        type: {
-            name: string;
-            required: boolean;
-        };
-        control: string;
+    backgroundColor: {
         description: string;
-        table: {
-            type: {
-                summary: string;
-            };
-        };
+        control: string;
     };
-    src: {
+    badgeBackgroundColor: any;
+    badgeBorderColor: any;
+    badgeIconColor: any;
+    badgeIconName: any;
+    badgePosition: any;
+    badgeProps: {
         type: string;
+        description: string;
+    };
+    color: {
+        description: string;
         control: string;
+    };
+    handleClick: {
+        type: string;
+        description: string;
+    };
+    handleRemoveButtonClick: {
+        type: string;
+        description: string;
+    };
+    hideBorder: {
+        type: string;
         description: string;
+        defaultValue: boolean;
         table: {
             type: {
                 summary: string;
             };
+            defaultValue: {
+                summary: string;
+            };
         };
     };
     iconName: {
@@ -29,12 +73,22 @@ export declare const avatarArgTypes: {
         options: string[];
         description: string;
     };
-    size: {
-        type: string;
+    name: {
+        type: {
+            name: string;
+        };
         control: string;
         description: string;
-        defaultValue: string;
-        options: string[];
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    randomizeVariant: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
         table: {
             type: {
                 summary: string;
@@ -44,10 +98,9 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    isClinic: {
+    showBadge: {
         type: string;
         description: string;
-        defaultValue: boolean;
         table: {
             type: {
                 summary: string;
@@ -57,7 +110,7 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    isNotClickable: {
+    showRemoveButton: {
         type: string;
         description: string;
         defaultValue: boolean;
@@ -83,11 +136,12 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    tooltipPlacement: {
+    size: {
+        type: string;
         control: string;
-        options: import("@popperjs/core").Placement[];
-        defaultValue: string;
         description: string;
+        defaultValue: string;
+        options: string[];
         table: {
             type: {
                 summary: string;
@@ -97,8 +151,9 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    tooltipText: {
+    src: {
         type: string;
+        control: string;
         description: string;
         table: {
             type: {
@@ -106,18 +161,21 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    loading: {
-        type: string;
+    tooltipPlacement: {
         control: string;
+        options: Placement[];
+        defaultValue: string;
         description: string;
-        options: string[];
         table: {
             type: {
                 summary: string;
             };
+            defaultValue: {
+                summary: string;
+            };
         };
     };
-    handleClick: {
+    tooltipText: {
         type: string;
         description: string;
         table: {
@@ -126,30 +184,18 @@ export declare const avatarArgTypes: {
             };
         };
     };
-    backgroundColor: {
-        description: string;
-        control: string;
-    };
-    color: {
-        description: string;
+    variant: {
         control: string;
-    };
-    showBadge: {
-        type: string;
+        options: AvatarVariant[];
+        defaultValue: AvatarVariant;
         description: string;
         table: {
             type: {
                 summary: string;
             };
+            defaultValue: {
+                summary: AvatarVariant;
+            };
         };
     };
-    badgeProps: {
-        type: string;
-        description: string;
-    };
-    badgeIconName: any;
-    badgePosition: any;
-    badgeIconColor: any;
-    badgeBorderColor: any;
-    badgeBackgroundColor: any;
 };

package/build/components/MediaAndIcons/Avatar/avatar.component.d.ts

@@ -1,32 +1,23 @@
 import { AvatarProps as CAvatarProps, Placement } from '@chakra-ui/react';
 import { IconName } from 'components/MediaAndIcons/Icon';
-import React, { CSSProperties } from 'react';
-import { AvatarSize } from './avatar.types';
+import React from 'react';
+import { AvatarSize, AvatarVariant } from './avatar.types';
 import { AvatarBadgeProps } from './components/AvatarBadge/avatarBadge.component';
-export declare enum AvatarVariant {
-    Green = "green",
-    Red = "red",
-    Blue = "blue",
-    Comet = "comet",
-    Number = "number",
-    Dashed = "dashed",
-    Image = "image",
-    Icon = "icon"
-}
 export interface AvatarProps extends CAvatarProps {
-    name?: string;
-    size?: AvatarSize;
-    isClinic?: boolean;
-    showTooltip?: boolean;
-    tooltipPlacement?: Placement;
-    style?: CSSProperties;
+    badgeProps?: AvatarBadgeProps;
     handleClick?: React.MouseEventHandler<HTMLSpanElement>;
-    showRemoveButton?: boolean;
     handleRemoveButtonClick?: React.MouseEventHandler<HTMLDivElement>;
-    variant?: AvatarVariant;
+    hideBorder?: boolean;
     iconName?: IconName;
-    tooltipText?: string;
+    name?: string;
+    randomizeVariant?: boolean;
     showBadge?: boolean;
-    badgeProps?: AvatarBadgeProps;
+    showRemoveButton?: boolean;
+    showTooltip?: boolean;
+    size?: AvatarSize;
+    src?: string;
+    tooltipPlacement?: Placement;
+    tooltipText?: string;
+    variant?: AvatarVariant;
 }
-export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, iconName, tooltipText, showBadge, badgeProps, ...rest }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ badgeProps, handleClick, handleRemoveButtonClick, hideBorder, iconName, name, randomizeVariant, showBadge, showRemoveButton, showTooltip, size, src, tooltipPlacement, tooltipText, variant, ...rest }: AvatarProps) => JSX.Element;

package/build/components/MediaAndIcons/Avatar/avatar.types.d.ts

@@ -1 +1,10 @@
 export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare enum AvatarVariant {
+    Green = "green",
+    Red = "red",
+    Blue = "blue",
+    Comet = "comet",
+    Dark = "dark",
+    Dashed = "dashed",
+    Test = "test"
+}

package/build/components/MediaAndIcons/Avatar/index.d.ts

@@ -1,4 +1,4 @@
-export * from './components/AvatarGroup/avatarGroup.component';
+export * from '../AvatarGroup/avatarGroup.component';
 export * from './components/AvatarBadge/avatarBadge.component';
 export * from './avatar.component';
 export * from './avatar.types';

package/build/components/MediaAndIcons/{Avatar/components/AvatarGroup → AvatarGroup}/avatarGroup.component.d.ts

@@ -1,5 +1,5 @@
-import { AvatarProps } from '../../avatar.component';
-import { AvatarSize } from '../../avatar.types';
+import { AvatarProps } from '../Avatar/avatar.component';
+import { AvatarSize } from '../Avatar/avatar.types';
 export interface AvatarGroupProps {
     avatars: AvatarProps[];
     max?: number;

package/build/index.js

@@ -6668,18 +6668,25 @@ var TooltipConfig = {
     },
 };
 
+exports.AvatarVariant = void 0;
+(function (AvatarVariant) {
+    AvatarVariant["Green"] = "green";
+    AvatarVariant["Red"] = "red";
+    AvatarVariant["Blue"] = "blue";
+    AvatarVariant["Comet"] = "comet";
+    AvatarVariant["Dark"] = "dark";
+    AvatarVariant["Dashed"] = "dashed";
+    AvatarVariant["Test"] = "test";
+})(exports.AvatarVariant || (exports.AvatarVariant = {}));
+
 var AvatarConfig = {
     baseStyle: {
         container: {
             backgroundColor: coreColors.white,
-            borderWidth: '2px',
-            boxShadow: "0 0 0 1px ".concat(coreColors.white),
-            _active: {
-                backgroundColor: coreColors.gray[100],
-            },
         },
         label: {
             paddingTop: '1px',
+            fontWeight: 'semibold',
         },
     },
     sizes: {
@@ -6732,25 +6739,19 @@ var AvatarConfig = {
     variants: {
         red: {
             container: {
-                borderColor: coreColors.red[300],
-            },
-            label: {
                 color: coreColors.red[300],
+                borderColor: coreColors.red[300],
             },
         },
         green: {
             container: {
                 borderColor: coreColors.green[400],
-            },
-            label: {
                 color: coreColors.green[400],
             },
         },
         blue: {
             container: {
                 borderColor: coreColors.blue[300],
-            },
-            label: {
                 color: coreColors.blue[300],
             },
         },
@@ -6758,74 +6759,49 @@ var AvatarConfig = {
             container: {
                 backgroundColor: coreColors.comet[50],
                 borderColor: coreColors.comet[400],
-                _hover: {
-                    backgroundColor: coreColors.comet[100],
-                },
-                _active: {
-                    backgroundColor: coreColors.comet[200],
-                },
-            },
-            label: {
                 color: coreColors.comet[800],
             },
         },
-        number: {
+        dark: {
             container: {
                 backgroundColor: coreColors.blue[800],
                 border: 0,
-                _hover: {
-                    backgroundColor: coreColors.blue[800], // 700
-                },
-                _active: {
-                    backgroundColor: coreColors.blue[800], // 600
-                },
-            },
-            label: {
                 color: coreColors.white,
             },
         },
         dashed: {
             container: {
-                backgroundColor: coreColors.transparent,
-                border: '1px dashed',
-                borderColor: semanticColors.border.dark,
-                boxShadow: 0,
-                _hover: {
-                    backgroundColor: coreColors.blackAlpha[100],
-                    zIndex: 0,
-                },
-                _active: {
-                    backgroundColor: coreColors.blackAlpha[200],
-                },
-            },
-            label: {
+                backgroundColor: coreColors.white,
+                borderColor: coreColors.white,
+                overflow: 'visible',
                 color: adaptiveColors.icon.light.subtle,
-            },
-        },
-        image: {
-            container: {
-                border: 0,
-                _hover: {
-                    backgroundColor: coreColors.black,
-                    img: { opacity: 0.94 },
-                },
-                _active: {
-                    backgroundColor: coreColors.black,
-                    img: { opacity: 0.92 },
+                _after: {
+                    content: "''",
+                    position: 'absolute',
+                    top: '-2px',
+                    right: '-2px',
+                    bottom: '-2px',
+                    left: '-2px',
+                    border: "2px dashed ".concat(coreColors.blackAlpha['300']),
+                    borderRadius: '100%',
                 },
             },
         },
-        icon: {
+        test: {
             container: {
-                border: 0,
-                color: adaptiveColors.icon.light.default,
-                backgroundColor: coreColors.comet[50],
-                opacity: 1,
-                _hover: {
-                    backgroundColor: coreColors.comet[100],
-                },
-                _active: {
-                    backgroundColor: coreColors.comet[200],
+                backgroundColor: coreColors.orange['50'],
+                borderColor: coreColors.orange['200'],
+                overflow: 'visible',
+                color: adaptiveColors.icon.light.subtle,
+                _after: {
+                    content: "''",
+                    position: 'absolute',
+                    top: '-2px',
+                    right: '-2px',
+                    bottom: '-2px',
+                    left: '-2px',
+                    border: "2px dashed ".concat(coreColors.blackAlpha['200']),
+                    borderRadius: '100%',
                 },
             },
         },
@@ -6840,7 +6816,7 @@ exports.AvatarBadgePosition = void 0;
     AvatarBadgePosition["BottomRight"] = "bottomRight";
 })(exports.AvatarBadgePosition || (exports.AvatarBadgePosition = {}));
 var AvatarBadge = function (_a) {
-    var avatarSize = _a.avatarSize, badgeIconName = _a.badgeIconName, badgeBackgroundColor = _a.badgeBackgroundColor, badgeBorderColor = _a.badgeBorderColor, badgeIconColor = _a.badgeIconColor, badgePosition = _a.badgePosition;
+    var avatarSize = _a.avatarSize, badgeIconName = _a.badgeIconName, _b = _a.badgeBackgroundColor, badgeBackgroundColor = _b === void 0 ? semanticColors.background.info : _b, _c = _a.badgeBorderColor, badgeBorderColor = _c === void 0 ? coreColors.white : _c, _d = _a.badgeIconColor, badgeIconColor = _d === void 0 ? adaptiveColors.icon.light.active : _d, _e = _a.badgePosition, badgePosition = _e === void 0 ? exports.AvatarBadgePosition.BottomRight : _e;
     var useSmallBadge = React.useMemo(function () { return avatarSize === 'xs' || !badgeIconName; }, [badgeIconName, avatarSize]);
     var getBadgeTransform = function (position) {
         var _a, _b, _c, _d;
@@ -6866,20 +6842,9 @@ var AvatarBadge = function (_a) {
                     : "translate(".concat(translation / 3, "px, ").concat(translation / 3, "px)");
         }
     };
-    return (React__default["default"].createElement(react.AvatarBadge, { color: badgeIconColor || adaptiveColors.icon.light.active, borderColor: badgeBorderColor || coreColors.white, borderWidth: "1px", bg: badgeBackgroundColor || semanticColors.background.info, boxSize: useSmallBadge ? '10px' : '18px', transform: getBadgeTransform(badgePosition || exports.AvatarBadgePosition.BottomRight) }, !useSmallBadge && badgeIconName && React__default["default"].createElement(Icon, { name: badgeIconName, size: 'xs' })));
+    return (React__default["default"].createElement(react.AvatarBadge, { color: badgeIconColor, borderColor: badgeBorderColor, borderWidth: "1px", bg: badgeBackgroundColor, boxSize: useSmallBadge ? '10px' : '18px', transform: getBadgeTransform(badgePosition) }, !useSmallBadge && badgeIconName && React__default["default"].createElement(Icon, { name: badgeIconName, size: 'xs' })));
 };
 
-exports.AvatarVariant = void 0;
-(function (AvatarVariant) {
-    AvatarVariant["Green"] = "green";
-    AvatarVariant["Red"] = "red";
-    AvatarVariant["Blue"] = "blue";
-    AvatarVariant["Comet"] = "comet";
-    AvatarVariant["Number"] = "number";
-    AvatarVariant["Dashed"] = "dashed";
-    AvatarVariant["Image"] = "image";
-    AvatarVariant["Icon"] = "icon";
-})(exports.AvatarVariant || (exports.AvatarVariant = {}));
 var getAvatarVariant = function (charCode) {
     if (charCode >= 65 && charCode <= 71) {
         return exports.AvatarVariant.Blue;
@@ -6895,29 +6860,69 @@ var getAvatarVariant = function (charCode) {
     }
 };
 var Avatar = function (_a) {
-    var _b = _a.name, name = _b === void 0 ? '' : _b, src = _a.src, _c = _a.isClinic, isClinic = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.showTooltip, showTooltip = _e === void 0 ? true : _e, _f = _a.tooltipPlacement, tooltipPlacement = _f === void 0 ? 'bottom' : _f, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, iconName = _a.iconName, tooltipText = _a.tooltipText, showBadge = _a.showBadge, badgeProps = _a.badgeProps, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "iconName", "tooltipText", "showBadge", "badgeProps"]);
+    var badgeProps = _a.badgeProps, handleClick = _a.handleClick, handleRemoveButtonClick = _a.handleRemoveButtonClick, _b = _a.hideBorder, hideBorder = _b === void 0 ? false : _b, iconName = _a.iconName, _c = _a.name, name = _c === void 0 ? '' : _c, _d = _a.randomizeVariant, randomizeVariant = _d === void 0 ? false : _d, _e = _a.showBadge, showBadge = _e === void 0 ? false : _e, _f = _a.showRemoveButton, showRemoveButton = _f === void 0 ? false : _f, _g = _a.showTooltip, showTooltip = _g === void 0 ? true : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, src = _a.src, _j = _a.tooltipPlacement, tooltipPlacement = _j === void 0 ? 'bottom' : _j, tooltipText = _a.tooltipText, _k = _a.variant, variant = _k === void 0 ? exports.AvatarVariant.Comet : _k, rest = __rest(_a, ["badgeProps", "handleClick", "handleRemoveButtonClick", "hideBorder", "iconName", "name", "randomizeVariant", "showBadge", "showRemoveButton", "showTooltip", "size", "src", "tooltipPlacement", "tooltipText", "variant"]);
     var colors = useTheme().colors;
-    var _g = __read(React.useState(!!src), 2), isSrcValid = _g[0], setIsSrcValid = _g[1];
-    var _h = __read(React.useState(false), 2), isHoveringAvatar = _h[0], setIsHoveringAvatar = _h[1];
-    var _j = __read(React.useState(false), 2), isHoveringRemoveButton = _j[0], setIsHoveringRemoveButton = _j[1];
-    var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
-    var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
-    if (isSrcValid) {
-        _variant = exports.AvatarVariant.Image;
+    var _l = __read(React.useState(!!src), 2), isSrcValid = _l[0], setIsSrcValid = _l[1];
+    var _m = __read(React.useState(false), 2), isHoveringAvatar = _m[0], setIsHoveringAvatar = _m[1];
+    var _o = __read(React.useState(false), 2), isHoveringRemoveButton = _o[0], setIsHoveringRemoveButton = _o[1];
+    var shouldHideRemoveButton = size === 'xs';
+    var _variant = variant;
+    if (randomizeVariant) {
+        _variant = getAvatarVariant(name.charCodeAt(0));
     }
-    if (iconName) {
-        _variant = exports.AvatarVariant.Icon;
-    }
-    var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
-    var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: iconName ? '' : name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant }, (iconName && {
+    var hoverActiveStyles = React.useMemo(function () {
+        switch (_variant) {
+            case exports.AvatarVariant.Comet:
+                return {
+                    _hover: {
+                        backgroundColor: colors.gray[100],
+                    },
+                    _active: {
+                        backgroundColor: colors.gray[200],
+                    },
+                };
+            case exports.AvatarVariant.Dark:
+                return {
+                    _hover: {
+                        backgroundColor: colors.blue[700],
+                    },
+                    _active: {
+                        backgroundColor: colors.blue[600],
+                    },
+                };
+            case exports.AvatarVariant.Dashed:
+                return {
+                    _hover: {
+                        backgroundColor: colors.blackAlpha[100],
+                    },
+                    _active: {
+                        backgroundColor: colors.blackAlpha[200],
+                    },
+                };
+            case exports.AvatarVariant.Test:
+                return {
+                    _hover: {
+                        backgroundColor: colors.background.warning,
+                    },
+                    _active: {
+                        backgroundColor: colors.orange[200],
+                    },
+                };
+            default:
+                return {
+                    _hover: {
+                        backgroundColor: colors.gray[50],
+                    },
+                    _active: {
+                        backgroundColor: colors.gray[100],
+                    },
+                };
+        }
+    }, [_variant, colors]);
+    var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({ name: iconName ? '' : name, src: src, size: size, variant: _variant, boxShadow: "0 0 0 1px ".concat(hideBorder ? colors.transparent : colors.white), borderWidth: isSrcValid || hideBorder ? '0px' : '2px' }, (iconName && {
         icon: React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }),
-    }), { _hover: handleClick
-            ? {
-                backgroundColor: colors.gray[50],
-                zIndex: 2,
-            }
-            : {}, icon: iconName && React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }), onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }),
-        showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
+    }), (handleClick && __assign({ onClick: handleClick, cursor: 'pointer', zIndex: 2 }, hoverActiveStyles)), { onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }, rest),
+        showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-5px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, zIndex: 2, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
             React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', colorToken: "default" }))),
         showBadge && React__default["default"].createElement(AvatarBadge, __assign({ avatarSize: size }, badgeProps))));
     if (showTooltip) {
@@ -6931,7 +6936,7 @@ var AvatarGroup = function (_a) {
     var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
     var spacing = size === 'lg' || size === 'md' ? -2 : -1;
     return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
-        avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
+        avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Dark, showRemoveButton: false, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
         showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", colorToken: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
 };