@fluentui/react-avatar 9.11.0 → 9.11.2

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 01 Apr 2026 15:50:19 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.11.2)
+
+Tue, 26 May 2026 09:34:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.11.1..@fluentui/react-avatar_v9.11.2)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.5.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-popover to v9.14.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.11.1)
+
+Thu, 23 Apr 2026 14:21:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.11.0..@fluentui/react-avatar_v9.11.1)
+
+### Patches
+
+- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
+- fix: prevent spreading of custom props on html element ([PR #36017](https://github.com/microsoft/fluentui/pull/36017) by dmytrokirpa@microsoft.com)
+- fix: drop unnecessary dependencies from base hooks ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-badge to v9.5.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-popover to v9.14.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.11.0)
 
-Wed, 01 Apr 2026 15:50:19 GMT 
+Wed, 01 Apr 2026 15:52:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.10.4..@fluentui/react-avatar_v9.11.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PopoverProps } from '@fluentui/react-popover';
 import type { PopoverSurface } from '@fluentui/react-popover';
-import { PresenceBadge } from '@fluentui/react-badge';
+import type { PresenceBadge } from '@fluentui/react-badge';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\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 * 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 is used to determine the initials displayed when there is no image. It is also 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?: AvatarShape;\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 needed, 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?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\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    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":"AA+KA,WAAuH"}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\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 * 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 is used to determine the initials displayed when there is no image. It is also 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?: AvatarShape;\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 needed, 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?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\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    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":"AA+KA,WAAuH"}

package/lib/components/Avatar/useAvatar.js

@@ -20,6 +20,7 @@ export const useAvatar_unstable = (props, ref)=>{
     const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
     if (state.initials) {
         var _state_initials;
+        // eslint-disable-next-line react-hooks/immutability
         state.initials = slot.optional(props.initials, {
             renderByDefault: true,
             defaultProps: {
@@ -31,10 +32,9 @@ export const useAvatar_unstable = (props, ref)=>{
             elementType: 'span'
         });
     }
-    if (state.icon) {
-        var _state_icon;
-        var _children;
-        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(PersonRegular, null);
+    if (state.icon && !state.icon.hasOwnProperty('children')) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.icon.children = /*#__PURE__*/ React.createElement(PersonRegular, null);
     }
     const badge = slot.optional(props.badge, {
         defaultProps: {
@@ -51,11 +51,14 @@ export const useAvatar_unstable = (props, ref)=>{
     if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
         if (props.name) {
             if (badge) {
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
             }
         } else if (state.initials) {
             // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            // eslint-disable-next-line react-hooks/immutability
             state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
+            // eslint-disable-next-line react-hooks/immutability
             delete state.root['aria-label'];
         }
         // Add the active state to the aria label
@@ -64,6 +67,7 @@ export const useAvatar_unstable = (props, ref)=>{
             if (state.root['aria-labelledby']) {
                 // If using aria-labelledby, render a hidden span and append it to the labelledby
                 const activeId = state.root.id + '__active';
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-labelledby'] += ' ' + activeId;
                 activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
                     hidden: true,
@@ -71,6 +75,7 @@ export const useAvatar_unstable = (props, ref)=>{
                 }, activeText);
             } else if (state.root['aria-label']) {
                 // Otherwise, just append it to the aria-label
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-label'] += ' ' + activeText;
             }
         }
@@ -95,7 +100,7 @@ export const useAvatar_unstable = (props, ref)=>{
  * Base hook for Avatar component, manages state and structure common to all variants of Avatar
  */ export const useAvatarBase_unstable = (props, ref)=>{
     const { dir } = useFluent();
-    const { name, ...rest } = props;
+    const { name, image: imageProp, initials: initialsProp, ...rest } = props;
     const baseId = useId('avatar-');
     const root = slot.always({
         role: 'img',
@@ -106,7 +111,7 @@ export const useAvatar_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = React.useState(undefined);
-    let image = slot.optional(props.image, {
+    let image = slot.optional(imageProp, {
         defaultProps: {
             alt: '',
             role: 'presentation',
@@ -125,7 +130,7 @@ export const useAvatar_unstable = (props, ref)=>{
         image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
     }
     // Resolve the initials slot, defaulted to getInitials
-    let initials = slot.optional(props.initials, {
+    let initials = slot.optional(initialsProp, {
         renderByDefault: true,
         defaultProps: {
             children: getInitials(name, dir === 'rtl'),

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon) {\n    state.icon.children ??= <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\n  }\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials\n  let initials: AvatarBaseState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: 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\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","baseId","always","role","imageHidden","setImageHidden","useState","image","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE,OAAO,MAAMC,kBAAkB;IAC7BC,QAAQ;IACRC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,GAAG,EAAE,GAAGR;IAChB,MAAM,EAAES,OAAOC,YAAY,EAAEC,MAAMC,WAAW,EAAE,GAAGX;IACnD,MAAM,EACJU,OAAOC,wBAAAA,yBAAAA,cAAgB,EAAY,EACnCH,QAAQC,yBAAAA,0BAAAA,eAAgB,UAAU,EAClCP,SAAS,OAAO,EAChBU,mBAAmB,MAAM,EACzBC,UAAU,EACVC,OAAOC,YAAY,SAAS,EAC5B,GAAGC,MACJ,GAAGX;IAEJ,MAAMY,QAAQC,uBAAuBF,MAAMV;QAKZO;IAH/B,8CAA8C;IAC9C,MAAMC,QACJC,cAAc,aACVI,YAAY,CAACC,YAAYP,CAAAA,OAAAA,uBAAAA,wBAAAA,aAAcR,MAAMgB,IAAI,cAAxBR,kBAAAA,OAA4B,MAAMM,aAAaG,MAAM,CAAC,GAC/EP;IAEN,IAAIE,MAAMM,QAAQ,EAAE;YAKVN;QAJRA,MAAMM,QAAQ,GAAG7B,KAAK8B,QAAQ,CAACnB,MAAMkB,QAAQ,EAAE;YAC7CE,iBAAiB;YACjBC,cAAc;gBACZC,UAAUhC,YAAYU,MAAMgB,IAAI,EAAEd,QAAQ,OAAO;oBAAEqB,kBAAkBlB,QAAQ;gBAAG;gBAChFmB,EAAE,GAAEZ,kBAAAA,MAAMM,QAAQ,cAAdN,sCAAAA,gBAAgBY,EAAE;YACxB;YACAC,aAAa;QACf;IACF;IAEA,IAAIb,MAAMc,IAAI,EAAE;YACdd;;QAAAA,cAAAA,cAAAA,MAAMc,IAAI,EAACJ,yDAAXV,YAAWU,yBAAa,oBAAC/B;IAC3B;IAEA,MAAMoC,QAA8BtC,KAAK8B,QAAQ,CAACnB,MAAM2B,KAAK,EAAE;QAC7DN,cAAc;YAAEhB,MAAMuB,aAAavB;YAAOmB,IAAIZ,MAAMiB,IAAI,CAACL,EAAE,GAAG;QAAU;QACxEC,aAAajC;IACf;IAEA,IAAIsC,yBAAgElB,MAAMkB,sBAAsB;IAEhG,8EAA8E;IAC9E,2EAA2E;IAC3E,MAAMC,wBAAwB/B,KAAK,CAAC,aAAa,KAAKgC;IACtD,MAAMC,6BAA6BjC,KAAK,CAAC,kBAAkB,KAAKgC;IAEhE,IAAI,CAACD,yBAAyB,CAACE,4BAA4B;QACzD,IAAIjC,MAAMgB,IAAI,EAAE;YACd,IAAIW,OAAO;gBACTf,MAAMiB,IAAI,CAAC,kBAAkB,GAAGjB,MAAMiB,IAAI,CAACL,EAAE,GAAG,MAAMG,MAAMH,EAAE;YAChE;QACF,OAAO,IAAIZ,MAAMM,QAAQ,EAAE;YACzB,0GAA0G;YAC1GN,MAAMiB,IAAI,CAAC,kBAAkB,GAAGjB,MAAMM,QAAQ,CAACM,EAAE,GAAIG,CAAAA,QAAQ,MAAMA,MAAMH,EAAE,GAAG,EAAC;YAC/E,OAAOZ,MAAMiB,IAAI,CAAC,aAAa;QACjC;QACA,yCAAyC;QACzC,IAAIhC,WAAW,YAAYA,WAAW,YAAY;YAChD,MAAMqC,aAAatC,eAAe,CAACC,OAAO;YAC1C,IAAIe,MAAMiB,IAAI,CAAC,kBAAkB,EAAE;gBACjC,iFAAiF;gBACjF,MAAMM,WAAWvB,MAAMiB,IAAI,CAACL,EAAE,GAAG;gBACjCZ,MAAMiB,IAAI,CAAC,kBAAkB,IAAI,MAAMM;gBACvCL,uCACE,oBAACM;oBAAKC,QAAAA;oBAAOb,IAAIW;mBACdD;YAGP,OAAO,IAAItB,MAAMiB,IAAI,CAAC,aAAa,EAAE;gBACnC,8CAA8C;gBAC9CjB,MAAMiB,IAAI,CAAC,aAAa,IAAI,MAAMK;YACpC;QACF;IACF;IAEA,OAAO;QACL,GAAGtB,KAAK;QACRP;QACAF;QACAN;QACAU;QACAuB;QACArB;QACAkB;QACA,4DAA4D;QAC5DW,YAAY;YAAE,GAAG1B,MAAM0B,UAAU;YAAEX,OAAOnC;QAAc;IAC1D;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMqB,yBAAyB,CAACb,OAAwBC;IAC7D,MAAM,EAAEC,GAAG,EAAE,GAAGR;IAChB,MAAM,EAAEsB,IAAI,EAAE,GAAGL,MAAM,GAAGX;IAE1B,MAAMuC,SAASnD,MAAM;IAErB,MAAMyC,OAAgCxC,KAAKmD,MAAM,CAC/C;QACEC,MAAM;QACNjB,IAAIe;QACJtC;QACA,GAAGU,IAAI;IACT,GACA;QAAEc,aAAa;IAAO;IAGxB,MAAM,CAACiB,aAAaC,eAAe,GAAGzD,MAAM0D,QAAQ,CAAmBZ;IAEvE,IAAIa,QAAkCxD,KAAK8B,QAAQ,CAACnB,MAAM6C,KAAK,EAAE;QAC/DxB,cAAc;YAAEyB,KAAK;YAAIL,MAAM;YAAgB,eAAe;YAAMJ,QAAQK;QAAY;QACxFjB,aAAa;IACf;IAEA,oDAAoD;IACpD,IAAI,EAACoB,kBAAAA,4BAAAA,MAAOE,GAAG,GAAE;QACfF,QAAQb;IACV;IAEA,yEAAyE;IACzE,IAAIa,OAAO;QACTA,MAAMG,OAAO,GAAG7D,eAAe0D,MAAMG,OAAO,EAAE,IAAML,eAAe;QACnEE,MAAMI,MAAM,GAAG9D,eAAe0D,MAAMI,MAAM,EAAE,IAAMN,eAAeX;IACnE;IAEA,sDAAsD;IACtD,IAAId,WAAwC7B,KAAK8B,QAAQ,CAACnB,MAAMkB,QAAQ,EAAE;QACxEE,iBAAiB;QACjBC,cAAc;YACZC,UAAUhC,YAAY0B,MAAMd,QAAQ;YACpCsB,IAAIe,SAAS;QACf;QACAd,aAAa;IACf;IAEA,+CAA+C;IAC/C,IAAI,EAACP,qBAAAA,+BAAAA,SAAUI,QAAQ,GAAE;QACvBJ,WAAWc;IACb;IAEA,+EAA+E;IAC/E,IAAIN,OAAgCM;IACpC,IAAI,CAACd,YAAa,CAAA,CAAC2B,SAASH,WAAU,GAAI;QACxChB,OAAOrC,KAAK8B,QAAQ,CAACnB,MAAM0B,IAAI,EAAE;YAC/BN,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;YACjB;YACAI,aAAa;QACf;IACF;IAEA,IAAIK;IAEJ,wEAAwE;IACxE,IAAI,CAACD,IAAI,CAAC,aAAa,IAAI,CAACA,IAAI,CAAC,kBAAkB,EAAE;QACnD,IAAIb,MAAM;YACRa,IAAI,CAAC,aAAa,GAAGb;QACvB,OAAO,IAAIE,UAAU;YACnB,0GAA0G;YAC1GW,IAAI,CAAC,kBAAkB,GAAGX,SAASM,EAAE;QACvC;IACF;IAEA,OAAO;QACLM;QACAQ,YAAY;YAAET,MAAM;YAAQX,UAAU;YAAQQ,MAAM;YAAQmB,OAAO;QAAM;QACzEhB;QACAX;QACAQ;QACAmB;IACF;AACF,EAAE;AAEF,MAAMjB,eAAe,CAACvB;IACpB,IAAIA,QAAQ,IAAI;QACd,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF;AAEA,MAAMS,eAAmC;IACvC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,cAAc,CAACmC;IACnB,IAAIC,WAAW;IACf,IAAK,IAAIC,MAAcF,IAAIjC,MAAM,GAAG,GAAGmC,OAAO,GAAGA,MAAO;QACtD,MAAMC,KAAKH,IAAII,UAAU,CAACF;QAC1B,MAAMG,QAAQH,MAAM;QACpBD,YAAY,AAACE,CAAAA,MAAME,KAAI,IAAMF,CAAAA,MAAO,IAAIE,KAAK,GAAI,iCAAiC;IACpF;IAEA,OAAOJ;AACT"}
+{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon && !state.icon.hasOwnProperty('children')) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.children = <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      // eslint-disable-next-line react-hooks/immutability\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      // eslint-disable-next-line react-hooks/immutability\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, image: imageProp, initials: initialsProp, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(imageProp, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\n  }\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials\n  let initials: AvatarBaseState['initials'] = slot.optional(initialsProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: 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\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","hasOwnProperty","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","image","imageProp","initialsProp","baseId","always","role","imageHidden","setImageHidden","useState","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib/components/Avatar/useAvatarStyles.styles.js

@@ -572,14 +572,18 @@ export const useAvatarStyles_unstable = state => {
       rootClasses.push(styles.inactive);
     }
   }
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
   if (state.badge) {
+    // eslint-disable-next-line react-hooks/immutability
     state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
   }
   if (state.image) {
+    // eslint-disable-next-line react-hooks/immutability
     state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
   }
   if (state.initials) {
+    // eslint-disable-next-line react-hooks/immutability
     state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
   }
   if (state.icon) {
@@ -599,6 +603,7 @@ export const useAvatarStyles_unstable = state => {
     } else {
       iconSizeClass = styles.icon48;
     }
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__resetStyles","__styles","mergeClasses","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","r","s","useImageClassName","useIconInitialsClassName","badgeMask","margin","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Bg24rqe","ring","Ftih45","ringBadgeCutout","f4a502","ringThick","of393c","ringThicker","ringThickest","shadow","Bsft5z2","shadow4","Be6vj1x","shadow8","shadow16","shadow28","inactive","abs64n","Bfgortx","Bnvr3x9","b2tv09","Bucmhp4","iayac2","b6ubon","Bqinb2h","qhf8xq","B5kzvoi","j35jbq","badgeCutout","btxmck","Dnlfbu","tiny","Bdjeniz","niu6jh","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","p","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useRingColorStyles","Bic5iru","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"sources":["useAvatarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const avatarClassNames = {\n    root: 'fui-Avatar',\n    image: 'fui-Avatar__image',\n    initials: 'fui-Avatar__initials',\n    icon: 'fui-Avatar__icon',\n    badge: 'fui-Avatar__badge'\n};\n// CSS variables used internally in Avatar's styles\nconst vars = {\n    badgeRadius: '--fui-Avatar-badgeRadius',\n    badgeGap: '--fui-Avatar-badgeGap',\n    badgeAlign: '--fui-Avatar-badgeAlign',\n    ringWidth: '--fui-Avatar-ringWidth'\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    borderRadius: tokens.borderRadiusCircular,\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n    fontSize: tokens.fontSizeBase300,\n    width: '32px',\n    height: '32px',\n    // ::before is the ring, and ::after is the shadow.\n    // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n    '::before,::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        zIndex: -1,\n        margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n        borderRadius: 'inherit',\n        transitionProperty: 'margin, opacity',\n        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    },\n    '::before': {\n        borderStyle: 'solid',\n        borderWidth: `var(${vars.ringWidth})`\n    }\n});\nconst useImageClassName = makeResetStyles({\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    borderRadius: 'inherit',\n    objectFit: 'cover',\n    verticalAlign: 'top'\n});\nconst useIconInitialsClassName = makeResetStyles({\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    borderRadius: 'inherit'\n});\n/**\n * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n *\n * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n */ const badgeMask = (margin)=>{\n    // Center the cutout at the badge's radius away from the edge.\n    // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.\n    const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n    // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n    // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n    const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n    const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n    return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;\n};\nconst useStyles = makeStyles({\n    textCaption2Strong: {\n        fontSize: tokens.fontSizeBase100\n    },\n    textCaption1Strong: {\n        fontSize: tokens.fontSizeBase200\n    },\n    textSubtitle2: {\n        fontSize: tokens.fontSizeBase400\n    },\n    textSubtitle1: {\n        fontSize: tokens.fontSizeBase500\n    },\n    textTitle3: {\n        fontSize: tokens.fontSizeBase600\n    },\n    squareSmall: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    squareMedium: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    squareLarge: {\n        borderRadius: tokens.borderRadiusLarge\n    },\n    squareXLarge: {\n        borderRadius: tokens.borderRadiusXLarge\n    },\n    activeOrInactive: {\n        transform: 'perspective(1px)',\n        transitionProperty: 'transform, opacity',\n        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    },\n    ring: {\n        // Show the ::before pseudo-element, which is the ring\n        '::before': {\n            content: '\"\"'\n        }\n    },\n    ringBadgeCutout: {\n        '::before': {\n            maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`)\n        }\n    },\n    ringThick: {\n        [vars.ringWidth]: tokens.strokeWidthThick\n    },\n    ringThicker: {\n        [vars.ringWidth]: tokens.strokeWidthThicker\n    },\n    ringThickest: {\n        [vars.ringWidth]: tokens.strokeWidthThickest\n    },\n    shadow: {\n        // Show the ::after pseudo-element, which is the shadow\n        '::after': {\n            content: '\"\"'\n        }\n    },\n    shadow4: {\n        '::after': {\n            boxShadow: tokens.shadow4\n        }\n    },\n    shadow8: {\n        '::after': {\n            boxShadow: tokens.shadow8\n        }\n    },\n    shadow16: {\n        '::after': {\n            boxShadow: tokens.shadow16\n        }\n    },\n    shadow28: {\n        '::after': {\n            boxShadow: tokens.shadow28\n        }\n    },\n    inactive: {\n        opacity: '0.8',\n        transform: 'scale(0.875)',\n        transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n        '::before,::after': {\n            margin: 0,\n            opacity: 0,\n            transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`\n        }\n    },\n    // Applied to the badge slot\n    badge: {\n        position: 'absolute',\n        bottom: 0,\n        right: 0\n    },\n    // Applied to the image, initials, or icon slot when there is a badge\n    badgeCutout: {\n        maskImage: badgeMask()\n    },\n    // Applied to the root when there is a badge\n    badgeAlign: {\n        // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n        // so split it out into a css variable that will auto-flip.\n        [vars.badgeAlign]: 'right'\n    },\n    // Badge size: applied to root when there is a badge\n    tiny: {\n        [vars.badgeRadius]: '3px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    'extra-small': {\n        [vars.badgeRadius]: '5px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    small: {\n        [vars.badgeRadius]: '6px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    medium: {\n        [vars.badgeRadius]: '8px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    large: {\n        [vars.badgeRadius]: '10px',\n        [vars.badgeGap]: tokens.strokeWidthThick\n    },\n    'extra-large': {\n        [vars.badgeRadius]: '14px',\n        [vars.badgeGap]: tokens.strokeWidthThick\n    },\n    icon12: {\n        fontSize: '12px'\n    },\n    icon16: {\n        fontSize: '16px'\n    },\n    icon20: {\n        fontSize: '20px'\n    },\n    icon24: {\n        fontSize: '24px'\n    },\n    icon28: {\n        fontSize: '28px'\n    },\n    icon32: {\n        fontSize: '32px'\n    },\n    icon48: {\n        fontSize: '48px'\n    }\n});\nexport const useSizeStyles = makeStyles({\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useColorStyles = makeStyles({\n    neutral: {\n        color: tokens.colorNeutralForeground3,\n        backgroundColor: tokens.colorNeutralBackground6\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundStaticInverted,\n        backgroundColor: tokens.colorBrandBackgroundStatic\n    },\n    'dark-red': {\n        color: tokens.colorPaletteDarkRedForeground2,\n        backgroundColor: tokens.colorPaletteDarkRedBackground2\n    },\n    cranberry: {\n        color: tokens.colorPaletteCranberryForeground2,\n        backgroundColor: tokens.colorPaletteCranberryBackground2\n    },\n    red: {\n        color: tokens.colorPaletteRedForeground2,\n        backgroundColor: tokens.colorPaletteRedBackground2\n    },\n    pumpkin: {\n        color: tokens.colorPalettePumpkinForeground2,\n        backgroundColor: tokens.colorPalettePumpkinBackground2\n    },\n    peach: {\n        color: tokens.colorPalettePeachForeground2,\n        backgroundColor: tokens.colorPalettePeachBackground2\n    },\n    marigold: {\n        color: tokens.colorPaletteMarigoldForeground2,\n        backgroundColor: tokens.colorPaletteMarigoldBackground2\n    },\n    gold: {\n        color: tokens.colorPaletteGoldForeground2,\n        backgroundColor: tokens.colorPaletteGoldBackground2\n    },\n    brass: {\n        color: tokens.colorPaletteBrassForeground2,\n        backgroundColor: tokens.colorPaletteBrassBackground2\n    },\n    brown: {\n        color: tokens.colorPaletteBrownForeground2,\n        backgroundColor: tokens.colorPaletteBrownBackground2\n    },\n    forest: {\n        color: tokens.colorPaletteForestForeground2,\n        backgroundColor: tokens.colorPaletteForestBackground2\n    },\n    seafoam: {\n        color: tokens.colorPaletteSeafoamForeground2,\n        backgroundColor: tokens.colorPaletteSeafoamBackground2\n    },\n    'dark-green': {\n        color: tokens.colorPaletteDarkGreenForeground2,\n        backgroundColor: tokens.colorPaletteDarkGreenBackground2\n    },\n    'light-teal': {\n        color: tokens.colorPaletteLightTealForeground2,\n        backgroundColor: tokens.colorPaletteLightTealBackground2\n    },\n    teal: {\n        color: tokens.colorPaletteTealForeground2,\n        backgroundColor: tokens.colorPaletteTealBackground2\n    },\n    steel: {\n        color: tokens.colorPaletteSteelForeground2,\n        backgroundColor: tokens.colorPaletteSteelBackground2\n    },\n    blue: {\n        color: tokens.colorPaletteBlueForeground2,\n        backgroundColor: tokens.colorPaletteBlueBackground2\n    },\n    'royal-blue': {\n        color: tokens.colorPaletteRoyalBlueForeground2,\n        backgroundColor: tokens.colorPaletteRoyalBlueBackground2\n    },\n    cornflower: {\n        color: tokens.colorPaletteCornflowerForeground2,\n        backgroundColor: tokens.colorPaletteCornflowerBackground2\n    },\n    navy: {\n        color: tokens.colorPaletteNavyForeground2,\n        backgroundColor: tokens.colorPaletteNavyBackground2\n    },\n    lavender: {\n        color: tokens.colorPaletteLavenderForeground2,\n        backgroundColor: tokens.colorPaletteLavenderBackground2\n    },\n    purple: {\n        color: tokens.colorPalettePurpleForeground2,\n        backgroundColor: tokens.colorPalettePurpleBackground2\n    },\n    grape: {\n        color: tokens.colorPaletteGrapeForeground2,\n        backgroundColor: tokens.colorPaletteGrapeBackground2\n    },\n    lilac: {\n        color: tokens.colorPaletteLilacForeground2,\n        backgroundColor: tokens.colorPaletteLilacBackground2\n    },\n    pink: {\n        color: tokens.colorPalettePinkForeground2,\n        backgroundColor: tokens.colorPalettePinkBackground2\n    },\n    magenta: {\n        color: tokens.colorPaletteMagentaForeground2,\n        backgroundColor: tokens.colorPaletteMagentaBackground2\n    },\n    plum: {\n        color: tokens.colorPalettePlumForeground2,\n        backgroundColor: tokens.colorPalettePlumBackground2\n    },\n    beige: {\n        color: tokens.colorPaletteBeigeForeground2,\n        backgroundColor: tokens.colorPaletteBeigeBackground2\n    },\n    mink: {\n        color: tokens.colorPaletteMinkForeground2,\n        backgroundColor: tokens.colorPaletteMinkBackground2\n    },\n    platinum: {\n        color: tokens.colorPalettePlatinumForeground2,\n        backgroundColor: tokens.colorPalettePlatinumBackground2\n    },\n    anchor: {\n        color: tokens.colorPaletteAnchorForeground2,\n        backgroundColor: tokens.colorPaletteAnchorBackground2\n    }\n});\nconst useRingColorStyles = makeStyles({\n    neutral: {\n        '::before': {\n            color: tokens.colorBrandStroke1\n        }\n    },\n    brand: {\n        '::before': {\n            color: tokens.colorBrandStroke1\n        }\n    },\n    'dark-red': {\n        '::before': {\n            color: tokens.colorPaletteDarkRedBorderActive\n        }\n    },\n    cranberry: {\n        '::before': {\n            color: tokens.colorPaletteCranberryBorderActive\n        }\n    },\n    red: {\n        '::before': {\n            color: tokens.colorPaletteRedBorderActive\n        }\n    },\n    pumpkin: {\n        '::before': {\n            color: tokens.colorPalettePumpkinBorderActive\n        }\n    },\n    peach: {\n        '::before': {\n            color: tokens.colorPalettePeachBorderActive\n        }\n    },\n    marigold: {\n        '::before': {\n            color: tokens.colorPaletteMarigoldBorderActive\n        }\n    },\n    gold: {\n        '::before': {\n            color: tokens.colorPaletteGoldBorderActive\n        }\n    },\n    brass: {\n        '::before': {\n            color: tokens.colorPaletteBrassBorderActive\n        }\n    },\n    brown: {\n        '::before': {\n            color: tokens.colorPaletteBrownBorderActive\n        }\n    },\n    forest: {\n        '::before': {\n            color: tokens.colorPaletteForestBorderActive\n        }\n    },\n    seafoam: {\n        '::before': {\n            color: tokens.colorPaletteSeafoamBorderActive\n        }\n    },\n    'dark-green': {\n        '::before': {\n            color: tokens.colorPaletteDarkGreenBorderActive\n        }\n    },\n    'light-teal': {\n        '::before': {\n            color: tokens.colorPaletteLightTealBorderActive\n        }\n    },\n    teal: {\n        '::before': {\n            color: tokens.colorPaletteTealBorderActive\n        }\n    },\n    steel: {\n        '::before': {\n            color: tokens.colorPaletteSteelBorderActive\n        }\n    },\n    blue: {\n        '::before': {\n            color: tokens.colorPaletteBlueBorderActive\n        }\n    },\n    'royal-blue': {\n        '::before': {\n            color: tokens.colorPaletteRoyalBlueBorderActive\n        }\n    },\n    cornflower: {\n        '::before': {\n            color: tokens.colorPaletteCornflowerBorderActive\n        }\n    },\n    navy: {\n        '::before': {\n            color: tokens.colorPaletteNavyBorderActive\n        }\n    },\n    lavender: {\n        '::before': {\n            color: tokens.colorPaletteLavenderBorderActive\n        }\n    },\n    purple: {\n        '::before': {\n            color: tokens.colorPalettePurpleBorderActive\n        }\n    },\n    grape: {\n        '::before': {\n            color: tokens.colorPaletteGrapeBorderActive\n        }\n    },\n    lilac: {\n        '::before': {\n            color: tokens.colorPaletteLilacBorderActive\n        }\n    },\n    pink: {\n        '::before': {\n            color: tokens.colorPalettePinkBorderActive\n        }\n    },\n    magenta: {\n        '::before': {\n            color: tokens.colorPaletteMagentaBorderActive\n        }\n    },\n    plum: {\n        '::before': {\n            color: tokens.colorPalettePlumBorderActive\n        }\n    },\n    beige: {\n        '::before': {\n            color: tokens.colorPaletteBeigeBorderActive\n        }\n    },\n    mink: {\n        '::before': {\n            color: tokens.colorPaletteMinkBorderActive\n        }\n    },\n    platinum: {\n        '::before': {\n            color: tokens.colorPalettePlatinumBorderActive\n        }\n    },\n    anchor: {\n        '::before': {\n            color: tokens.colorPaletteAnchorBorderActive\n        }\n    }\n});\nexport const useAvatarStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, shape, active, activeAppearance, color } = state;\n    const rootClassName = useRootClassName();\n    const imageClassName = useImageClassName();\n    const iconInitialsClassName = useIconInitialsClassName();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const colorStyles = useColorStyles();\n    const ringColorStyles = useRingColorStyles();\n    const rootClasses = [\n        rootClassName,\n        size !== 32 && sizeStyles[size]\n    ];\n    if (state.badge) {\n        rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);\n    }\n    if (size <= 24) {\n        rootClasses.push(styles.textCaption2Strong);\n    } else if (size <= 28) {\n        rootClasses.push(styles.textCaption1Strong);\n    } else if (size <= 40) {\n    // Default text size included in useRootClassName\n    } else if (size <= 56) {\n        rootClasses.push(styles.textSubtitle2);\n    } else if (size <= 96) {\n        rootClasses.push(styles.textSubtitle1);\n    } else {\n        rootClasses.push(styles.textTitle3);\n    }\n    if (shape === 'square') {\n        if (size <= 24) {\n            rootClasses.push(styles.squareSmall);\n        } else if (size <= 48) {\n            rootClasses.push(styles.squareMedium);\n        } else if (size <= 72) {\n            rootClasses.push(styles.squareLarge);\n        } else {\n            rootClasses.push(styles.squareXLarge);\n        }\n    }\n    if (active === 'active' || active === 'inactive') {\n        rootClasses.push(styles.activeOrInactive);\n        if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n            rootClasses.push(styles.ring, ringColorStyles[color]);\n            if (state.badge) {\n                rootClasses.push(styles.ringBadgeCutout);\n            }\n            if (size <= 48) {\n                rootClasses.push(styles.ringThick);\n            } else if (size <= 64) {\n                rootClasses.push(styles.ringThicker);\n            } else {\n                rootClasses.push(styles.ringThickest);\n            }\n        }\n        if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n            rootClasses.push(styles.shadow);\n            if (size <= 28) {\n                rootClasses.push(styles.shadow4);\n            } else if (size <= 48) {\n                rootClasses.push(styles.shadow8);\n            } else if (size <= 64) {\n                rootClasses.push(styles.shadow16);\n            } else {\n                rootClasses.push(styles.shadow28);\n            }\n        }\n        // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n        if (active === 'inactive') {\n            rootClasses.push(styles.inactive);\n        }\n    }\n    state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n    if (state.badge) {\n        state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n    }\n    if (state.image) {\n        state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);\n    }\n    if (state.initials) {\n        state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);\n    }\n    if (state.icon) {\n        let iconSizeClass;\n        if (size <= 16) {\n            iconSizeClass = styles.icon12;\n        } else if (size <= 24) {\n            iconSizeClass = styles.icon16;\n        } else if (size <= 40) {\n            iconSizeClass = styles.icon20;\n        } else if (size <= 48) {\n            iconSizeClass = styles.icon24;\n        } else if (size <= 56) {\n            iconSizeClass = styles.icon28;\n        } else if (size <= 72) {\n            iconSizeClass = styles.icon32;\n        } else {\n            iconSizeClass = styles.icon48;\n        }\n        state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","__resetStyles","__styles","mergeClasses","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","r","s","useImageClassName","useIconInitialsClassName","badgeMask","margin","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Bg24rqe","ring","Ftih45","ringBadgeCutout","f4a502","ringThick","of393c","ringThicker","ringThickest","shadow","Bsft5z2","shadow4","Be6vj1x","shadow8","shadow16","shadow28","inactive","abs64n","Bfgortx","Bnvr3x9","b2tv09","Bucmhp4","iayac2","b6ubon","Bqinb2h","qhf8xq","B5kzvoi","j35jbq","badgeCutout","btxmck","Dnlfbu","tiny","Bdjeniz","niu6jh","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","p","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useRingColorStyles","Bic5iru","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"sources":["useAvatarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const avatarClassNames = {\n    root: 'fui-Avatar',\n    image: 'fui-Avatar__image',\n    initials: 'fui-Avatar__initials',\n    icon: 'fui-Avatar__icon',\n    badge: 'fui-Avatar__badge'\n};\n// CSS variables used internally in Avatar's styles\nconst vars = {\n    badgeRadius: '--fui-Avatar-badgeRadius',\n    badgeGap: '--fui-Avatar-badgeGap',\n    badgeAlign: '--fui-Avatar-badgeAlign',\n    ringWidth: '--fui-Avatar-ringWidth'\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    borderRadius: tokens.borderRadiusCircular,\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n    fontSize: tokens.fontSizeBase300,\n    width: '32px',\n    height: '32px',\n    // ::before is the ring, and ::after is the shadow.\n    // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n    '::before,::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        zIndex: -1,\n        margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n        borderRadius: 'inherit',\n        transitionProperty: 'margin, opacity',\n        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    },\n    '::before': {\n        borderStyle: 'solid',\n        borderWidth: `var(${vars.ringWidth})`\n    }\n});\nconst useImageClassName = makeResetStyles({\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    borderRadius: 'inherit',\n    objectFit: 'cover',\n    verticalAlign: 'top'\n});\nconst useIconInitialsClassName = makeResetStyles({\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    borderRadius: 'inherit'\n});\n/**\n * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n *\n * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n */ const badgeMask = (margin)=>{\n    // Center the cutout at the badge's radius away from the edge.\n    // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.\n    const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n    // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n    // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n    const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n    const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n    return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;\n};\nconst useStyles = makeStyles({\n    textCaption2Strong: {\n        fontSize: tokens.fontSizeBase100\n    },\n    textCaption1Strong: {\n        fontSize: tokens.fontSizeBase200\n    },\n    textSubtitle2: {\n        fontSize: tokens.fontSizeBase400\n    },\n    textSubtitle1: {\n        fontSize: tokens.fontSizeBase500\n    },\n    textTitle3: {\n        fontSize: tokens.fontSizeBase600\n    },\n    squareSmall: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    squareMedium: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    squareLarge: {\n        borderRadius: tokens.borderRadiusLarge\n    },\n    squareXLarge: {\n        borderRadius: tokens.borderRadiusXLarge\n    },\n    activeOrInactive: {\n        transform: 'perspective(1px)',\n        transitionProperty: 'transform, opacity',\n        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    },\n    ring: {\n        // Show the ::before pseudo-element, which is the ring\n        '::before': {\n            content: '\"\"'\n        }\n    },\n    ringBadgeCutout: {\n        '::before': {\n            maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`)\n        }\n    },\n    ringThick: {\n        [vars.ringWidth]: tokens.strokeWidthThick\n    },\n    ringThicker: {\n        [vars.ringWidth]: tokens.strokeWidthThicker\n    },\n    ringThickest: {\n        [vars.ringWidth]: tokens.strokeWidthThickest\n    },\n    shadow: {\n        // Show the ::after pseudo-element, which is the shadow\n        '::after': {\n            content: '\"\"'\n        }\n    },\n    shadow4: {\n        '::after': {\n            boxShadow: tokens.shadow4\n        }\n    },\n    shadow8: {\n        '::after': {\n            boxShadow: tokens.shadow8\n        }\n    },\n    shadow16: {\n        '::after': {\n            boxShadow: tokens.shadow16\n        }\n    },\n    shadow28: {\n        '::after': {\n            boxShadow: tokens.shadow28\n        }\n    },\n    inactive: {\n        opacity: '0.8',\n        transform: 'scale(0.875)',\n        transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n        '::before,::after': {\n            margin: 0,\n            opacity: 0,\n            transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`\n        }\n    },\n    // Applied to the badge slot\n    badge: {\n        position: 'absolute',\n        bottom: 0,\n        right: 0\n    },\n    // Applied to the image, initials, or icon slot when there is a badge\n    badgeCutout: {\n        maskImage: badgeMask()\n    },\n    // Applied to the root when there is a badge\n    badgeAlign: {\n        // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n        // so split it out into a css variable that will auto-flip.\n        [vars.badgeAlign]: 'right'\n    },\n    // Badge size: applied to root when there is a badge\n    tiny: {\n        [vars.badgeRadius]: '3px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    'extra-small': {\n        [vars.badgeRadius]: '5px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    small: {\n        [vars.badgeRadius]: '6px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    medium: {\n        [vars.badgeRadius]: '8px',\n        [vars.badgeGap]: tokens.strokeWidthThin\n    },\n    large: {\n        [vars.badgeRadius]: '10px',\n        [vars.badgeGap]: tokens.strokeWidthThick\n    },\n    'extra-large': {\n        [vars.badgeRadius]: '14px',\n        [vars.badgeGap]: tokens.strokeWidthThick\n    },\n    icon12: {\n        fontSize: '12px'\n    },\n    icon16: {\n        fontSize: '16px'\n    },\n    icon20: {\n        fontSize: '20px'\n    },\n    icon24: {\n        fontSize: '24px'\n    },\n    icon28: {\n        fontSize: '28px'\n    },\n    icon32: {\n        fontSize: '32px'\n    },\n    icon48: {\n        fontSize: '48px'\n    }\n});\nexport const useSizeStyles = makeStyles({\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useColorStyles = makeStyles({\n    neutral: {\n        color: tokens.colorNeutralForeground3,\n        backgroundColor: tokens.colorNeutralBackground6\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundStaticInverted,\n        backgroundColor: tokens.colorBrandBackgroundStatic\n    },\n    'dark-red': {\n        color: tokens.colorPaletteDarkRedForeground2,\n        backgroundColor: tokens.colorPaletteDarkRedBackground2\n    },\n    cranberry: {\n        color: tokens.colorPaletteCranberryForeground2,\n        backgroundColor: tokens.colorPaletteCranberryBackground2\n    },\n    red: {\n        color: tokens.colorPaletteRedForeground2,\n        backgroundColor: tokens.colorPaletteRedBackground2\n    },\n    pumpkin: {\n        color: tokens.colorPalettePumpkinForeground2,\n        backgroundColor: tokens.colorPalettePumpkinBackground2\n    },\n    peach: {\n        color: tokens.colorPalettePeachForeground2,\n        backgroundColor: tokens.colorPalettePeachBackground2\n    },\n    marigold: {\n        color: tokens.colorPaletteMarigoldForeground2,\n        backgroundColor: tokens.colorPaletteMarigoldBackground2\n    },\n    gold: {\n        color: tokens.colorPaletteGoldForeground2,\n        backgroundColor: tokens.colorPaletteGoldBackground2\n    },\n    brass: {\n        color: tokens.colorPaletteBrassForeground2,\n        backgroundColor: tokens.colorPaletteBrassBackground2\n    },\n    brown: {\n        color: tokens.colorPaletteBrownForeground2,\n        backgroundColor: tokens.colorPaletteBrownBackground2\n    },\n    forest: {\n        color: tokens.colorPaletteForestForeground2,\n        backgroundColor: tokens.colorPaletteForestBackground2\n    },\n    seafoam: {\n        color: tokens.colorPaletteSeafoamForeground2,\n        backgroundColor: tokens.colorPaletteSeafoamBackground2\n    },\n    'dark-green': {\n        color: tokens.colorPaletteDarkGreenForeground2,\n        backgroundColor: tokens.colorPaletteDarkGreenBackground2\n    },\n    'light-teal': {\n        color: tokens.colorPaletteLightTealForeground2,\n        backgroundColor: tokens.colorPaletteLightTealBackground2\n    },\n    teal: {\n        color: tokens.colorPaletteTealForeground2,\n        backgroundColor: tokens.colorPaletteTealBackground2\n    },\n    steel: {\n        color: tokens.colorPaletteSteelForeground2,\n        backgroundColor: tokens.colorPaletteSteelBackground2\n    },\n    blue: {\n        color: tokens.colorPaletteBlueForeground2,\n        backgroundColor: tokens.colorPaletteBlueBackground2\n    },\n    'royal-blue': {\n        color: tokens.colorPaletteRoyalBlueForeground2,\n        backgroundColor: tokens.colorPaletteRoyalBlueBackground2\n    },\n    cornflower: {\n        color: tokens.colorPaletteCornflowerForeground2,\n        backgroundColor: tokens.colorPaletteCornflowerBackground2\n    },\n    navy: {\n        color: tokens.colorPaletteNavyForeground2,\n        backgroundColor: tokens.colorPaletteNavyBackground2\n    },\n    lavender: {\n        color: tokens.colorPaletteLavenderForeground2,\n        backgroundColor: tokens.colorPaletteLavenderBackground2\n    },\n    purple: {\n        color: tokens.colorPalettePurpleForeground2,\n        backgroundColor: tokens.colorPalettePurpleBackground2\n    },\n    grape: {\n        color: tokens.colorPaletteGrapeForeground2,\n        backgroundColor: tokens.colorPaletteGrapeBackground2\n    },\n    lilac: {\n        color: tokens.colorPaletteLilacForeground2,\n        backgroundColor: tokens.colorPaletteLilacBackground2\n    },\n    pink: {\n        color: tokens.colorPalettePinkForeground2,\n        backgroundColor: tokens.colorPalettePinkBackground2\n    },\n    magenta: {\n        color: tokens.colorPaletteMagentaForeground2,\n        backgroundColor: tokens.colorPaletteMagentaBackground2\n    },\n    plum: {\n        color: tokens.colorPalettePlumForeground2,\n        backgroundColor: tokens.colorPalettePlumBackground2\n    },\n    beige: {\n        color: tokens.colorPaletteBeigeForeground2,\n        backgroundColor: tokens.colorPaletteBeigeBackground2\n    },\n    mink: {\n        color: tokens.colorPaletteMinkForeground2,\n        backgroundColor: tokens.colorPaletteMinkBackground2\n    },\n    platinum: {\n        color: tokens.colorPalettePlatinumForeground2,\n        backgroundColor: tokens.colorPalettePlatinumBackground2\n    },\n    anchor: {\n        color: tokens.colorPaletteAnchorForeground2,\n        backgroundColor: tokens.colorPaletteAnchorBackground2\n    }\n});\nconst useRingColorStyles = makeStyles({\n    neutral: {\n        '::before': {\n            color: tokens.colorBrandStroke1\n        }\n    },\n    brand: {\n        '::before': {\n            color: tokens.colorBrandStroke1\n        }\n    },\n    'dark-red': {\n        '::before': {\n            color: tokens.colorPaletteDarkRedBorderActive\n        }\n    },\n    cranberry: {\n        '::before': {\n            color: tokens.colorPaletteCranberryBorderActive\n        }\n    },\n    red: {\n        '::before': {\n            color: tokens.colorPaletteRedBorderActive\n        }\n    },\n    pumpkin: {\n        '::before': {\n            color: tokens.colorPalettePumpkinBorderActive\n        }\n    },\n    peach: {\n        '::before': {\n            color: tokens.colorPalettePeachBorderActive\n        }\n    },\n    marigold: {\n        '::before': {\n            color: tokens.colorPaletteMarigoldBorderActive\n        }\n    },\n    gold: {\n        '::before': {\n            color: tokens.colorPaletteGoldBorderActive\n        }\n    },\n    brass: {\n        '::before': {\n            color: tokens.colorPaletteBrassBorderActive\n        }\n    },\n    brown: {\n        '::before': {\n            color: tokens.colorPaletteBrownBorderActive\n        }\n    },\n    forest: {\n        '::before': {\n            color: tokens.colorPaletteForestBorderActive\n        }\n    },\n    seafoam: {\n        '::before': {\n            color: tokens.colorPaletteSeafoamBorderActive\n        }\n    },\n    'dark-green': {\n        '::before': {\n            color: tokens.colorPaletteDarkGreenBorderActive\n        }\n    },\n    'light-teal': {\n        '::before': {\n            color: tokens.colorPaletteLightTealBorderActive\n        }\n    },\n    teal: {\n        '::before': {\n            color: tokens.colorPaletteTealBorderActive\n        }\n    },\n    steel: {\n        '::before': {\n            color: tokens.colorPaletteSteelBorderActive\n        }\n    },\n    blue: {\n        '::before': {\n            color: tokens.colorPaletteBlueBorderActive\n        }\n    },\n    'royal-blue': {\n        '::before': {\n            color: tokens.colorPaletteRoyalBlueBorderActive\n        }\n    },\n    cornflower: {\n        '::before': {\n            color: tokens.colorPaletteCornflowerBorderActive\n        }\n    },\n    navy: {\n        '::before': {\n            color: tokens.colorPaletteNavyBorderActive\n        }\n    },\n    lavender: {\n        '::before': {\n            color: tokens.colorPaletteLavenderBorderActive\n        }\n    },\n    purple: {\n        '::before': {\n            color: tokens.colorPalettePurpleBorderActive\n        }\n    },\n    grape: {\n        '::before': {\n            color: tokens.colorPaletteGrapeBorderActive\n        }\n    },\n    lilac: {\n        '::before': {\n            color: tokens.colorPaletteLilacBorderActive\n        }\n    },\n    pink: {\n        '::before': {\n            color: tokens.colorPalettePinkBorderActive\n        }\n    },\n    magenta: {\n        '::before': {\n            color: tokens.colorPaletteMagentaBorderActive\n        }\n    },\n    plum: {\n        '::before': {\n            color: tokens.colorPalettePlumBorderActive\n        }\n    },\n    beige: {\n        '::before': {\n            color: tokens.colorPaletteBeigeBorderActive\n        }\n    },\n    mink: {\n        '::before': {\n            color: tokens.colorPaletteMinkBorderActive\n        }\n    },\n    platinum: {\n        '::before': {\n            color: tokens.colorPalettePlatinumBorderActive\n        }\n    },\n    anchor: {\n        '::before': {\n            color: tokens.colorPaletteAnchorBorderActive\n        }\n    }\n});\nexport const useAvatarStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, shape, active, activeAppearance, color } = state;\n    const rootClassName = useRootClassName();\n    const imageClassName = useImageClassName();\n    const iconInitialsClassName = useIconInitialsClassName();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const colorStyles = useColorStyles();\n    const ringColorStyles = useRingColorStyles();\n    const rootClasses = [\n        rootClassName,\n        size !== 32 && sizeStyles[size]\n    ];\n    if (state.badge) {\n        rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);\n    }\n    if (size <= 24) {\n        rootClasses.push(styles.textCaption2Strong);\n    } else if (size <= 28) {\n        rootClasses.push(styles.textCaption1Strong);\n    } else if (size <= 40) {\n    // Default text size included in useRootClassName\n    } else if (size <= 56) {\n        rootClasses.push(styles.textSubtitle2);\n    } else if (size <= 96) {\n        rootClasses.push(styles.textSubtitle1);\n    } else {\n        rootClasses.push(styles.textTitle3);\n    }\n    if (shape === 'square') {\n        if (size <= 24) {\n            rootClasses.push(styles.squareSmall);\n        } else if (size <= 48) {\n            rootClasses.push(styles.squareMedium);\n        } else if (size <= 72) {\n            rootClasses.push(styles.squareLarge);\n        } else {\n            rootClasses.push(styles.squareXLarge);\n        }\n    }\n    if (active === 'active' || active === 'inactive') {\n        rootClasses.push(styles.activeOrInactive);\n        if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n            rootClasses.push(styles.ring, ringColorStyles[color]);\n            if (state.badge) {\n                rootClasses.push(styles.ringBadgeCutout);\n            }\n            if (size <= 48) {\n                rootClasses.push(styles.ringThick);\n            } else if (size <= 64) {\n                rootClasses.push(styles.ringThicker);\n            } else {\n                rootClasses.push(styles.ringThickest);\n            }\n        }\n        if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n            rootClasses.push(styles.shadow);\n            if (size <= 28) {\n                rootClasses.push(styles.shadow4);\n            } else if (size <= 48) {\n                rootClasses.push(styles.shadow8);\n            } else if (size <= 64) {\n                rootClasses.push(styles.shadow16);\n            } else {\n                rootClasses.push(styles.shadow28);\n            }\n        }\n        // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n        if (active === 'inactive') {\n            rootClasses.push(styles.inactive);\n        }\n    }\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n    if (state.badge) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n    }\n    if (state.image) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);\n    }\n    if (state.initials) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);\n    }\n    if (state.icon) {\n        let iconSizeClass;\n        if (size <= 16) {\n            iconSizeClass = styles.icon12;\n        } else if (size <= 24) {\n            iconSizeClass = styles.icon16;\n        } else if (size <= 40) {\n            iconSizeClass = styles.icon20;\n        } else if (size <= 48) {\n            iconSizeClass = styles.icon24;\n        } else if (size <= 56) {\n            iconSizeClass = styles.icon28;\n        } else if (size <= 72) {\n            iconSizeClass = styles.icon32;\n        } else {\n            iconSizeClass = styles.icon48;\n        }\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Avatar/useAvatarStyles.styles.raw.js

@@ -670,14 +670,18 @@ export const useAvatarStyles_unstable = (state)=>{
             rootClasses.push(styles.inactive);
         }
     }
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
     if (state.badge) {
+        // eslint-disable-next-line react-hooks/immutability
         state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
     }
     if (state.image) {
+        // eslint-disable-next-line react-hooks/immutability
         state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
     }
     if (state.initials) {
+        // eslint-disable-next-line react-hooks/immutability
         state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
     }
     if (state.icon) {
@@ -697,6 +701,7 @@ export const useAvatarStyles_unstable = (state)=>{
         } else {
             iconSizeClass = styles.icon48;
         }
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
     }
     return state;