@fluentui/react-avatar 9.0.0-rc.7 → 9.0.0

package/CHANGELOG.md

@@ -1,12 +1,146 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 04 May 2022 13:24:05 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jun 2022 15:09:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0)
+
+Tue, 28 Jun 2022 15:09:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.13..@fluentui/react-avatar_v9.0.0)
+
+### Patches
+
+- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-popover to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
+### Changes
+
+- fix: Fix wrong border radius for outline in webkit browsers. ([PR #23576](https://github.com/microsoft/fluentui/pull/23576) by esteban.230@hotmail.com)
+- Adding AvatarGroupItem implementation and AvatarGroup context. ([PR #23310](https://github.com/microsoft/fluentui/pull/23310) by esteban.230@hotmail.com)
+- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
+- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
+- docs: Adding AvatarGroup stories. ([PR #23493](https://github.com/microsoft/fluentui/pull/23493) by esteban.230@hotmail.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples ([PR #23256](https://github.com/microsoft/fluentui/pull/23256) by sarah.higley@microsoft.com)
+- Adding layout styles to AvatarGroupItem. ([PR #23468](https://github.com/microsoft/fluentui/pull/23468) by esteban.230@hotmail.com)
+- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
+- Adding layout styles and overflow button styles to AvatarGroup. ([PR #23437](https://github.com/microsoft/fluentui/pull/23437) by esteban.230@hotmail.com)
+- fix: Fixing focus indicator and adding a focus ring to root for the pie layout. ([PR #23528](https://github.com/microsoft/fluentui/pull/23528) by esteban.230@hotmail.com)
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- chore: Added warning for AvatarGroup to check if children are of type AvatarGroupItem and for AvatarGroupItem to check if it's being used inside an AvatarGroup. ([PR #23498](https://github.com/microsoft/fluentui/pull/23498) by esteban.230@hotmail.com)
+
+## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.13)
+
+Thu, 23 Jun 2022 14:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.12..@fluentui/react-avatar_v9.0.0-rc.13)
+
+### Changes
+
+- Bump @fluentui/react-badge to v9.0.0-rc.13 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+
+## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.12)
+
+Tue, 31 May 2022 21:28:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.11..@fluentui/react-avatar_v9.0.0-rc.12)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
+- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
+- Creating AvatarGroupItem component. ([PR #23287](https://github.com/microsoft/fluentui/pull/23287) by esteban.230@hotmail.com)
+- Adding .beta to AvatarGroup stories so it's not shown in the docsite. ([PR #23216](https://github.com/microsoft/fluentui/pull/23216) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.12 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+
+## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.11)
+
+Thu, 26 May 2022 21:01:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.10..@fluentui/react-avatar_v9.0.0-rc.11)
+
+### Changes
+
+- fix react-avatar: use initials as a fallback label even when no id is manually defined ([PR #23258](https://github.com/microsoft/fluentui/pull/23258) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.11 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
+## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.10)
+
+Mon, 23 May 2022 18:56:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.9..@fluentui/react-avatar_v9.0.0-rc.10)
+
+### Changes
+
+- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
+- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.10 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.9)
+
+Mon, 23 May 2022 12:14:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.8..@fluentui/react-avatar_v9.0.0-rc.9)
+
+### Changes
+
+- Add support for size={16} to Avatar ([PR #23003](https://github.com/microsoft/fluentui/pull/23003) by behowell@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- Moving Avatar stories to stories folder. ([PR #23047](https://github.com/microsoft/fluentui/pull/23047) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+
+## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.8)
+
+Thu, 05 May 2022 18:26:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.7..@fluentui/react-avatar_v9.0.0-rc.8)
+
+### Changes
+
+- feat: ship rolluped only dts ([PR #22823](https://github.com/microsoft/fluentui/pull/22823) by martinhochel@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+
 ## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.7)
 
-Wed, 04 May 2022 13:24:05 GMT 
+Wed, 04 May 2022 13:26:37 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.6..@fluentui/react-avatar_v9.0.0-rc.7)
 
 ### Changes

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { Button } from '@fluentui/react-button';
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -11,154 +12,187 @@ import { TooltipProps } from '@fluentui/react-tooltip';
 
 export declare const Avatar: ForwardRefComponent<AvatarProps>;
 
+export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
+
 /**
- * @deprecated Use `avatarClassNames.root` instead.
+ * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+ * of individual Avatars in a spread, stack, or pie layout.
  */
-export declare const avatarClassName = "fui-Avatar";
+export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
-export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
+export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
 
-declare type AvatarCommons = {
-    /**
-     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-     *
-     * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-     * accessibility tools.
-     */
-    name?: string;
-    /**
-     * Size of the avatar in pixels.
-     *
-     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-     * based on design guidelines for the Avatar control.
-     *
-     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
-     * to override the rendered size.
-     *
-     * For example, to set the avatar to 45px in size:
-     * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
-     *
-     * @defaultvalue 32
-     */
-    size: AvatarSizes;
-    /**
-     * The avatar can have a circular or square shape.
-     * @defaultvalue circular
-     */
-    shape: 'circular' | 'square';
+/**
+ * The AvatarGroupItem component represents a single person or entity.
+ * AvatarGroupItem should only be used in an AvatarGroup component.
+ */
+export declare const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps>;
+
+export declare const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots>;
+
+/**
+ * AvatarGroupItem Props
+ */
+export declare type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;
+
+export declare type AvatarGroupItemSlots = {
+    root: NonNullable<Slot<'div'>>;
     /**
-     * Optional activity indicator
-     * * active: the avatar will be decorated according to activeAppearance
-     * * inactive: the avatar will be reduced in size and partially transparent
-     * * unset: normal display
-     *
-     * @defaultvalue unset
+     * Avatar that represents a person or entity.
      */
-    active: 'active' | 'inactive' | 'unset';
+    avatar: NonNullable<Slot<typeof Avatar>>;
     /**
-     * The appearance when `active="active"`
-     *
-     * @defaultvalue ring
+     * Label used for the name of the AvatarGroupItem when rendered as an overflow item.
+     * The content of the label, by default, is the `name` prop from the `avatar` slot.
      */
-    activeAppearance: 'ring' | 'shadow' | 'ring-shadow';
+    overflowLabel: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering AvatarGroupItem
+ */
+export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
     /**
-     * The color when displaying either an icon or initials.
-     * * neutral (default): gray
-     * * brand: color from the brand palette
-     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
-     * * [AvatarNamedColor]: a specific color from the theme
+     * Whether the Avatar is an overflow item.
      *
-     * @defaultvalue neutral
-     */
-    color: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
-    /**
-     * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
-     * Use this when a name is not available, but there is another unique identifier that can be used instead.
+     * @default false
      */
-    idForColor: string | undefined;
+    isOverflowItem?: boolean;
+    nonOverflowAvatarsCount: number;
+    layout: AvatarGroupProps['layout'];
+    size: AvatarSizes;
 };
 
 /**
- * AvatarGroup component - TODO: add more docs
+ * AvatarGroup Props
  */
-export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
-
-export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
-
-declare type AvatarGroupCommons = {
+export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     /**
      * Layout the Avatars should be displayed as.
      * @default spread
      */
-    layout: 'spread' | 'stack' | 'pie';
+    layout?: 'spread' | 'stack' | 'pie';
     /**
      * Maximum number of Avatars to be displayed before overflowing.
-     * NOTE: if pie layout is used, `maxAvatars` will be ignored.
+     * Note: if pie layout is used, `maxAvatars` will be ignored.
      * @default 5
      */
-    maxAvatars: number;
-    /**
-     * Size of the avatars.
-     * @default 32
-     */
-    size: AvatarSizes;
+    maxAvatars?: number;
     /**
      * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.
-     * @default false
+     * Note: The overflowIndicator will default to `icon` when the size is less than 24.
+     * @default count
      */
-    overflowIndicator: 'number-overflowed' | 'icon';
+    overflowIndicator?: 'count' | 'icon';
     /**
-     * Strings for localizing text in the tooltip.
+     * Size of the avatars.
+     * @default 32
      */
-    strings?: AvatarGroupStrings;
+    size?: AvatarSizes;
 };
 
-/**
- * AvatarGroup Props
- */
-export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & Partial<AvatarGroupCommons>;
-
 export declare type AvatarGroupSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * Popover trigger slot that can be used to change the overflow indicator.
      */
-    popoverTrigger?: Slot<typeof Button>;
+    overflowButton?: NonNullable<Slot<'button'>>;
     /**
-     * Popover surface that will be displayed when the popover is triggered.
+     * List that contains the overflow AvatarGroupItems.
      */
-    popoverSurface?: Slot<typeof PopoverSurface>;
+    overflowContent?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
  * State used in rendering AvatarGroup
  */
-export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & AvatarGroupCommons & {
-    tooltipContent: TooltipProps['content'];
-};
-
-declare type AvatarGroupStrings = {
+export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+    /**
+     * Whether there are more Avatars than `maxAvatars`.
+     * @default false
+     */
+    hasOverflow: boolean;
     /**
-     * Text applied to the overflow indicator's tooltip.
-     * Can include the token "\{numOverflowedAvatars\}" which will be replaced with the number of overflowed avatars.
+     * Tooltip content for the overflow indicator.
      */
-    tooltipContent: string;
+    tooltipContent: TooltipProps['content'];
+    nonOverflowAvatarsCount: number;
 };
 
 /**
  * A specific named color for the Avatar
  */
-export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
+export declare type AvatarNamedColor = 'dark-red' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'dark-green' | 'light-teal' | 'teal' | 'steel' | 'blue' | 'royal-blue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
 /**
  * Properties for Avatar
  */
-export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & Partial<AvatarCommons>;
+export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
+    /**
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * unset: normal display
+     *
+     * @default unset
+     */
+    active?: 'active' | 'inactive' | 'unset';
+    /**
+     * The appearance when `active="active"`
+     *
+     * @default ring
+     */
+    activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';
+    /**
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
+     *
+     * @default neutral
+     */
+    color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+    /**
+     * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+     * Use this when a name is not available, but there is another unique identifier that can be used instead.
+     */
+    idForColor?: string | undefined;
+    /**
+     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+     *
+     * The name will be used to determine the initials displayed when there is no icon, as well as provided to
+     * accessibility tools.
+     */
+    name?: string;
+    /**
+     * The avatar can have a circular or square shape.
+     * @default circular
+     */
+    shape?: 'circular' | 'square';
+    /**
+     * Size of the avatar in pixels.
+     *
+     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+     * based on design guidelines for the Avatar control.
+     *
+     * Note: At size 16, if initials are displayed, only the first initial will be rendered.
+     *
+     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
+     * to override the rendered size.
+     *
+     * For example, to set the avatar to 45px in size:
+     * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
+     *
+     * @default 32
+     */
+    size?: AvatarSizes;
+};
 
 /**
  * Sizes that can be used for the Avatar
  */
-export declare type AvatarSizes = 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export declare type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 export declare type AvatarSlots = {
     root: Slot<'span'>;
@@ -180,7 +214,7 @@ export declare type AvatarSlots = {
     /**
      * Icon to be displayed when the avatar doesn't have an image or initials.
      *
-     * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
+     * @default `PersonRegular` (the default icon's size depends on the Avatar's size)
      */
     icon?: Slot<'span'>;
     /**
@@ -192,11 +226,11 @@ export declare type AvatarSlots = {
 /**
  * State used in rendering Avatar
  */
-export declare type AvatarState = ComponentState<AvatarSlots> & AvatarCommons & {
+export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {
     /**
-     * The Avatar's color, with `'colorful'` resolved to a named color
+     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color
      */
-    color: Exclude<AvatarCommons['color'], 'colorful'>;
+    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;
 };
 
 /**
@@ -207,12 +241,19 @@ export declare type AvatarState = ComponentState<AvatarSlots> & AvatarCommons &
  *
  * @param displayName - The full name of the person or entity
  * @param isRtl - Whether the display is in RTL
- * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
+ * @param options - Extra options to control the behavior of getInitials
  *
  * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
  * could be derived from the name.
+ *
+ * @internal
  */
-export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, allowPhoneInitials?: boolean): string;
+export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
+    /** Should initials be generated from phone numbers (default false) */
+    allowPhoneInitials?: boolean;
+    /** Returns only the first initial */
+    firstInitialOnly?: boolean;
+}): string;
 
 export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
 
@@ -221,6 +262,11 @@ export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
  */
 export declare const renderAvatarGroup_unstable: (state: AvatarGroupState) => JSX.Element;
 
+/**
+ * Render the final JSX of AvatarGroupItem
+ */
+export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
+
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
 /**
@@ -234,6 +280,22 @@ export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<H
  */
 export declare const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupState;
 
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */
+export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemState;
+
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */
+export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
+
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */

package/lib/AvatarGroupItem.js

@@ -0,0 +1,2 @@
+export * from './components/AvatarGroupItem/index';
+//# sourceMappingURL=AvatarGroupItem.js.map

package/lib/AvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupItem.js","sourceRoot":"../src/","sources":["AvatarGroupItem.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/AvatarGroupItem/index';\n"]}

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}

package/lib/components/Avatar/Avatar.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\ntype AvatarCommons = {\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @defaultvalue 32\n   */\n  size: AvatarSizes;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @defaultvalue circular\n   */\n  shape: 'circular' | 'square';\n\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @defaultvalue unset\n   */\n  active: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @defaultvalue ring\n   */\n  activeAppearance: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @defaultvalue neutral\n   */\n  color: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor: string | undefined;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'darkRed'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'darkGreen'\n  | 'lightTeal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royalBlue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & Partial<AvatarCommons>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  AvatarCommons & {\n    /**\n     * The Avatar's color, with `'colorful'` resolved to a named color\n     */\n    color: Exclude<AvatarCommons['color'], 'colorful'>;\n  };\n"]}
+{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n  };\n"]}

package/lib/components/Avatar/renderAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADrB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJlB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJlB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}