@fluentui/react-avatar 9.3.7 → 9.4.0

package/CHANGELOG.json

@@ -2,7 +2,72 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 23:04:48 GMT",
+      "date": "Wed, 08 Mar 2023 17:38:54 GMT",
+      "tag": "@fluentui/react-avatar_v9.4.0",
+      "version": "9.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "096600ed000f020406c96703c8c1678515b017c7",
+            "comment": "feat: Adding call to custom styles hook derived from context."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.11",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.5.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.5.4",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "677a67b551966986db34a6fac608cb89ee150471",
+            "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:07 GMT",
       "tag": "@fluentui/react-avatar_v9.3.7",
       "version": "9.3.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 22 Feb 2023 23:04:48 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:38:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.4.0)
+
+Wed, 08 Mar 2023 17:38:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.7..@fluentui/react-avatar_v9.4.0)
+
+### Minor changes
+
+- feat: Adding call to custom styles hook derived from context. ([PR #27060](https://github.com/microsoft/fluentui/pull/27060) by gcox@microsoft.com)
+- Bump @fluentui/react-badge to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-popover to v9.5.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-tabster to v9.5.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
 ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.7)
 
-Wed, 22 Feb 2023 23:04:48 GMT 
+Wed, 22 Feb 2023 23:06:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.6..@fluentui/react-avatar_v9.3.7)
 
 ### Patches

package/lib/components/Avatar/Avatar.js

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { renderAvatar_unstable } from './renderAvatar';
 import { useAvatar_unstable } from './useAvatar';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { useAvatarStyles_unstable } from './useAvatarStyles';
 export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatar_unstable(props, ref);
   useAvatarStyles_unstable(state);
+  const {
+    useAvatarStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderAvatar_unstable(state);
 });
 Avatar.displayName = 'Avatar';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAE/B,OAAOP,qBAAqB,CAACO,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","renderAvatar_unstable","useAvatar_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx"],"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"]}
+{"version":3,"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHooks_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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  const { useAvatarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D,OAAO,MAAMC,MAAM,gBAAqCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGP,kBAAkB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAE/B,MAAM;IAAEL,wBAAwB,EAAEM;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACpFO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,qBAAqB,CAACQ,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACM,WAAW,GAAG,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,QAAQ,iBAAIP,oBAACI,KAAK,CAACG,QAAQ;IAAA,GAAKF,SAAS,CAACE;EAAQ,EAAI,EAC5DH,KAAK,CAACI,IAAI,iBAAIR,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,EAChDJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDL,KAAK,CAACM,KAAK,iBAAIV,oBAACI,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnDP,KAAK,CAACQ,sBAAsB,CAClB;AAEjB,CAAC","names":["React","getSlots","renderAvatar_unstable","state","slots","slotProps","root","initials","icon","image","badge","activeAriaLabelElement"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"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      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","renderAvatar_unstable","state","slots","slotProps","createElement","root","initials","icon","image","badge","activeAriaLabelElement"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"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      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,QAAQ,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,QAAQ;IAAA,GAAKH,SAAS,CAACG;EAAQ,EAAI,EAC5DJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChDL,KAAK,CAACM,KAAK,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnDN,KAAK,CAACO,KAAK,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,EACnDR,KAAK,CAACS,sBAAsB,CAClB;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","size","contextSize","name","shape","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { 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 { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\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: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\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: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['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\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\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 + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\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"]}
+{"version":3,"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","size","contextSize","name","shape","activeAppearance","idForColor","color","avatarColors","getHashCode","_a","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","createElement","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { 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 { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\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: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\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: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['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\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\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 + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAC1G,SAASC,WAAW,QAAQ,mBAAmB;AAE/C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,gBAAgB,QAAQ,8BAA8B;AAE/D,OAAO,MAAMC,eAAe,GAAG;EAC7BC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE;CACX;AAED,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,KAAkB,EAAEC,GAA2B,KAAiB;;EACjG,MAAM;IAAEC;EAAG,CAAE,GAAGR,SAAS,EAAE;EAC3B,MAAM;IAAES,IAAI,EAAEC;EAAW,CAAE,GAAGT,gBAAgB,EAAE;EAChD,MAAM;IACJU,IAAI;IACJF,IAAI,GAAGC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAK,EAAY;IACnCE,KAAK,GAAG,UAAU;IAClBT,MAAM,GAAG,OAAO;IAChBU,gBAAgB,GAAG,MAAM;IACzBC;EAAU,CACX,GAAGR,KAAK;EACT,IAAI;IAAES,KAAK,GAAG;EAAS,CAAE,GAAGT,KAAK;EAEjC;EACA,IAAIS,KAAK,KAAK,UAAU,EAAE;IACxBA,KAAK,GAAGC,YAAY,CAACC,WAAW,CAAC,CAAAC,EAAA,GAAAJ,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIH,IAAI,cAAAO,EAAA,cAAAA,EAAA,GAAI,EAAE,CAAC,GAAGF,YAAY,CAACG,MAAM,CAAC;;EAGnF,MAAMC,MAAM,GAAGzB,KAAK,CAAC,SAAS,CAAC;EAE/B,MAAM0B,IAAI,GAAwB7B,qBAAqB,CACrD,MAAM,EACN;IACE8B,IAAI,EAAE,KAAK;IACXC,EAAE,EAAEH,MAAM;IACV;IACA,GAAGd,KAAK;IACRC;GACD,EACD,wBAAyB,CAAC,MAAM,CAAC,CAClC;EAED,MAAM,CAACiB,WAAW,EAAEC,cAAc,CAAC,GAAGlC,KAAK,CAACmC,QAAQ,CAAmBC,SAAS,CAAC;EACjF,MAAMC,KAAK,GAAyBlC,gBAAgB,CAACY,KAAK,CAACsB,KAAK,EAAE;IAChEC,YAAY,EAAE;MACZC,GAAG,EAAE,EAAE;MACPR,IAAI,EAAE,cAAc;MACpB,aAAa,EAAE,IAAI;MACnBS,MAAM,EAAEP;;GAEX,CAAC;EAEF;EACA,IAAII,KAAK,EAAE;IACTA,KAAK,CAACI,OAAO,GAAGvC,cAAc,CAACmC,KAAK,CAACI,OAAO,EAAE,MAAMP,cAAc,CAAC,IAAI,CAAC,CAAC;IACzEG,KAAK,CAACK,MAAM,GAAGxC,cAAc,CAACmC,KAAK,CAACK,MAAM,EAAE,MAAMR,cAAc,CAACE,SAAS,CAAC,CAAC;;EAG9E;EACA,IAAIO,QAAQ,GAA4BxC,gBAAgB,CAACY,KAAK,CAAC4B,QAAQ,EAAE;IACvEC,QAAQ,EAAE,IAAI;IACdN,YAAY,EAAE;MACZO,QAAQ,EAAExC,WAAW,CAACe,IAAI,EAAEH,GAAG,KAAK,KAAK,EAAE;QAAE6B,gBAAgB,EAAE5B,IAAI,IAAI;MAAE,CAAE,CAAC;MAC5Ec,EAAE,EAAEH,MAAM,GAAG;;GAEhB,CAAC;EAEF;EACA,IAAI,EAACc,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEE,QAAQ,GAAE;IACvBF,QAAQ,GAAGP,SAAS;;EAGtB;EACA,IAAIW,IAAI,GAAwBX,SAAS;EACzC,IAAI,CAACO,QAAQ,KAAK,CAACN,KAAK,IAAIJ,WAAW,CAAC,EAAE;IACxCc,IAAI,GAAG5C,gBAAgB,CAACY,KAAK,CAACgC,IAAI,EAAE;MAClCH,QAAQ,EAAE,IAAI;MACdN,YAAY,EAAE;QACZO,QAAQ,eAAE7C,KAAA,CAAAgD,aAAA,CAAC1C,aAAa,OAAG;QAC3B,aAAa,EAAE;;KAElB,CAAC;;EAGJ,MAAM2C,KAAK,GAAyB9C,gBAAgB,CAACY,KAAK,CAACkC,KAAK,EAAE;IAChEX,YAAY,EAAE;MACZpB,IAAI,EAAEgC,YAAY,CAAChC,IAAI,CAAC;MACxBc,EAAE,EAAEH,MAAM,GAAG;;GAEhB,CAAC;EAEF,IAAIsB,sBAA6D;EAEjE;EACA,IAAI,CAACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAACA,IAAI,CAAC,iBAAiB,CAAC,EAAE;IACnD,IAAIV,IAAI,EAAE;MACRU,IAAI,CAAC,YAAY,CAAC,GAAGV,IAAI;MAEzB;MACA,IAAI6B,KAAK,EAAE;QACTnB,IAAI,CAAC,iBAAiB,CAAC,GAAGA,IAAI,CAACE,EAAE,GAAG,GAAG,GAAGiB,KAAK,CAACjB,EAAE;;KAErD,MAAM,IAAIW,QAAQ,EAAE;MACnB;MACAb,IAAI,CAAC,iBAAiB,CAAC,GAAGa,QAAQ,CAACX,EAAE,IAAIiB,KAAK,GAAG,GAAG,GAAGA,KAAK,CAACjB,EAAE,GAAG,EAAE,CAAC;;IAGvE;IACA,IAAIpB,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,UAAU,EAAE;MAChD,MAAMwC,UAAU,GAAGzC,eAAe,CAACC,MAAM,CAAC;MAC1C,IAAIkB,IAAI,CAAC,iBAAiB,CAAC,EAAE;QAC3B;QACA,MAAMuB,QAAQ,GAAGxB,MAAM,GAAG,UAAU;QACpCC,IAAI,CAAC,iBAAiB,CAAC,IAAI,GAAG,GAAGuB,QAAQ;QACzCF,sBAAsB,gBACpBnD,KAAA,CAAAgD,aAAA;UAAMR,MAAM;UAACR,EAAE,EAAEqB;QAAQ,GACtBD,UAAU,CAEd;OACF,MAAM,IAAItB,IAAI,CAAC,YAAY,CAAC,EAAE;QAC7B;QACAA,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,GAAGsB,UAAU;;;;EAK5C,OAAO;IACLlC,IAAI;IACJG,KAAK;IACLT,MAAM;IACNU,gBAAgB;IAChB6B,sBAAsB;IACtB3B,KAAK;IAEL8B,UAAU,EAAE;MACVxB,IAAI,EAAE,MAAM;MACZa,QAAQ,EAAE,MAAM;MAChBI,IAAI,EAAE,MAAM;MACZV,KAAK,EAAE,KAAK;MACZY,KAAK,EAAE1C;KACR;IAEDuB,IAAI;IACJa,QAAQ;IACRI,IAAI;IACJV,KAAK;IACLY;GACD;AACH,CAAC;AAED,MAAMC,YAAY,GAAIhC,IAAyB,IAAI;EACjD,IAAIA,IAAI,IAAI,EAAE,EAAE;IACd,OAAO,aAAa;GACrB,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACrB,OAAO,OAAO;GACf,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACrB,OAAO,QAAQ;GAChB,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACrB,OAAO,OAAO;GACf,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACrB,OAAO,aAAa;GACrB,MAAM;IACL,OAAO,MAAM;;AAEjB,CAAC;AAED,MAAMO,YAAY,GAAuB,CACvC,UAAU,EACV,WAAW,EACX,KAAK,EACL,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,OAAO,EACP,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACV,QAAQ,CACT;AAED,MAAMC,WAAW,GAAI6B,GAAW,IAAY;EAC1C,IAAIC,QAAQ,GAAG,CAAC;EAChB,KAAK,IAAIC,GAAG,GAAWF,GAAG,CAAC3B,MAAM,GAAG,CAAC,EAAE6B,GAAG,IAAI,CAAC,EAAEA,GAAG,EAAE,EAAE;IACtD,MAAMC,EAAE,GAAGH,GAAG,CAACI,UAAU,CAACF,GAAG,CAAC;IAC9B,MAAMG,KAAK,GAAGH,GAAG,GAAG,CAAC;IACrBD,QAAQ,IAAI,CAACE,EAAE,IAAIE,KAAK,KAAKF,EAAE,IAAK,CAAC,GAAGE,KAAM,CAAC,CAAC,CAAC;;;EAGnD,OAAOJ,QAAQ;AACjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","useImageClassName","useIconInitialsClassName","useStyles","useSizeStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\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\nconst animations = {\n  fastOutSlowInMax: tokens.curveDecelerateMax,\n  fastOutSlowInMid: tokens.curveDecelerateMid,\n  fastOutSlowInMin: tokens.curveDecelerateMin,\n  slowOutFastInMax: tokens.curveAccelerateMax,\n  slowOutFastInMid: tokens.curveAccelerateMid,\n  slowOutFastInMin: tokens.curveAccelerateMin,\n  fastEase: tokens.curveEasyEaseMax,\n  normalEase: tokens.curveEasyEase,\n  nullEasing: tokens.curveLinear,\n};\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});\n\nconst useImageClassName = makeResetStyles({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n\n  borderRadius: 'inherit',\n  objectFit: 'cover',\n  verticalAlign: 'top',\n});\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\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'center',\n  textAlign: 'center',\n  userSelect: 'none',\n  borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n  textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n    // The ::before element is the ring when active\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n    '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n    '::before': { color: tokens.colorPaletteCranberryBorderActive },\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n    '::before': { color: tokens.colorPaletteRedBorderActive },\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n    '::before': { color: tokens.colorPalettePumpkinBorderActive },\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n    '::before': { color: tokens.colorPalettePeachBorderActive },\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n    '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n    '::before': { color: tokens.colorPaletteGoldBorderActive },\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n    '::before': { color: tokens.colorPaletteBrassBorderActive },\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n    '::before': { color: tokens.colorPaletteBrownBorderActive },\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n    '::before': { color: tokens.colorPaletteForestBorderActive },\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n    '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n    '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n    '::before': { color: tokens.colorPaletteLightTealBorderActive },\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n    '::before': { color: tokens.colorPaletteTealBorderActive },\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n    '::before': { color: tokens.colorPaletteSteelBorderActive },\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n    '::before': { color: tokens.colorPaletteBlueBorderActive },\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n    '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n    '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n    '::before': { color: tokens.colorPaletteNavyBorderActive },\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n    '::before': { color: tokens.colorPaletteLavenderBorderActive },\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n    '::before': { color: tokens.colorPalettePurpleBorderActive },\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n    '::before': { color: tokens.colorPaletteGrapeBorderActive },\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n    '::before': { color: tokens.colorPaletteLilacBorderActive },\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n    '::before': { color: tokens.colorPalettePinkBorderActive },\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n    '::before': { color: tokens.colorPaletteMagentaBorderActive },\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n    '::before': { color: tokens.colorPalettePlumBorderActive },\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n    '::before': { color: tokens.colorPaletteBeigeBorderActive },\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n    '::before': { color: tokens.colorPaletteMinkBorderActive },\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n    '::before': { color: tokens.colorPalettePlatinumBorderActive },\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n    '::before': { color: tokens.colorPaletteAnchorBorderActive },\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\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\n  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\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\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\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\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\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-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\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\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n  }\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\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      iconInitialsClassName,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","useImageClassName","useIconInitialsClassName","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Cwk7ip","Hwfdqs","Ftih45","Brfgrao","Bciustq","Fbdkly","lawp4y","mdwyqc","Budzafs","r59vdv","n07z76","ck0cow","B8bqphf","h7gv66","Bvy8d8o","B1pumaf","B17wnbm","ring","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","ringThick","qehafq","Bicfajf","susq4k","Biibvgv","B0qfbqy","B4f6apu","y0oebl","uvfttm","ringThicker","ringThickest","shadow4","h8m2vh","shadow8","shadow16","shadow28","inactive","abs64n","Bwz0kr7","vz82u","qhf8xq","B5kzvoi","j35jbq","E5pizo","badgeLarge","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","Bic5iru","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","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","className","iconSizeClass"],"sources":["../src/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\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\nconst animations = {\n  fastOutSlowInMax: tokens.curveDecelerateMax,\n  fastOutSlowInMid: tokens.curveDecelerateMid,\n  fastOutSlowInMin: tokens.curveDecelerateMin,\n  slowOutFastInMax: tokens.curveAccelerateMax,\n  slowOutFastInMid: tokens.curveAccelerateMid,\n  slowOutFastInMin: tokens.curveAccelerateMin,\n  fastEase: tokens.curveEasyEaseMax,\n  normalEase: tokens.curveEasyEase,\n  nullEasing: tokens.curveLinear,\n};\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});\n\nconst useImageClassName = makeResetStyles({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n\n  borderRadius: 'inherit',\n  objectFit: 'cover',\n  verticalAlign: 'top',\n});\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\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'center',\n  textAlign: 'center',\n  userSelect: 'none',\n  borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n  textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n    // The ::before element is the ring when active\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n    '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n    '::before': { color: tokens.colorPaletteCranberryBorderActive },\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n    '::before': { color: tokens.colorPaletteRedBorderActive },\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n    '::before': { color: tokens.colorPalettePumpkinBorderActive },\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n    '::before': { color: tokens.colorPalettePeachBorderActive },\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n    '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n    '::before': { color: tokens.colorPaletteGoldBorderActive },\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n    '::before': { color: tokens.colorPaletteBrassBorderActive },\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n    '::before': { color: tokens.colorPaletteBrownBorderActive },\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n    '::before': { color: tokens.colorPaletteForestBorderActive },\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n    '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n    '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n    '::before': { color: tokens.colorPaletteLightTealBorderActive },\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n    '::before': { color: tokens.colorPaletteTealBorderActive },\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n    '::before': { color: tokens.colorPaletteSteelBorderActive },\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n    '::before': { color: tokens.colorPaletteBlueBorderActive },\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n    '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n    '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n    '::before': { color: tokens.colorPaletteNavyBorderActive },\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n    '::before': { color: tokens.colorPaletteLavenderBorderActive },\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n    '::before': { color: tokens.colorPalettePurpleBorderActive },\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n    '::before': { color: tokens.colorPaletteGrapeBorderActive },\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n    '::before': { color: tokens.colorPaletteLilacBorderActive },\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n    '::before': { color: tokens.colorPalettePinkBorderActive },\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n    '::before': { color: tokens.colorPaletteMagentaBorderActive },\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n    '::before': { color: tokens.colorPalettePlumBorderActive },\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n    '::before': { color: tokens.colorPaletteBeigeBorderActive },\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n    '::before': { color: tokens.colorPaletteMinkBorderActive },\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n    '::before': { color: tokens.colorPalettePlatinumBorderActive },\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n    '::before': { color: tokens.colorPaletteAnchorBorderActive },\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\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\n  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\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\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\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\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\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-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\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\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n  }\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\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      iconInitialsClassName,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { renderAvatarGroup_unstable } from './renderAvatarGroup';
 import { useAvatarGroup_unstable } from './useAvatarGroup';
 import { useAvatarGroupContextValues } from './useAvatarGroupContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';
 /**
  * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
@@ -11,6 +12,10 @@ export const AvatarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatarGroup_unstable(props, ref);
   const contextValues = useAvatarGroupContextValues(state);
   useAvatarGroupStyles_unstable(state);
+  const {
+    useAvatarGroupStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderAvatarGroup_unstable(state, contextValues);
 });
 AvatarGroup.displayName = 'AvatarGroup';

package/lib/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;;AAIA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EACjD,MAAME,aAAa,GAAGP,2BAA2B,CAACM,KAAK,CAAC;EAExDL,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAOR,0BAA0B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACzD,CAAC,CAAC;AAEFL,WAAW,CAACM,WAAW,GAAG,aAAa","names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroup_unstable(props, ref);\n  const contextValues = useAvatarGroupContextValues(state);\n\n  useAvatarGroupStyles_unstable(state);\n  return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"]}
+{"version":3,"names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHooks_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroup_unstable(props, ref);\n  const contextValues = useAvatarGroupContextValues(state);\n\n  useAvatarGroupStyles_unstable(state);\n\n  const { useAvatarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;;AAIA,OAAO,MAAMC,WAAW,gBAA0CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EACjD,MAAME,aAAa,GAAGR,2BAA2B,CAACO,KAAK,CAAC;EAExDL,6BAA6B,CAACK,KAAK,CAAC;EAEpC,MAAM;IAAEL,6BAA6B,EAAEO;EAAe,CAAE,GAAGR,4BAA4B,EAAE;EACzFQ,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOT,0BAA0B,CAACS,KAAK,EAAEC,aAAa,CAAC;AACzD,CAAC,CAAC;AAEFL,WAAW,CAACO,WAAW,GAAG,aAAa"}

package/lib/components/AvatarGroup/renderAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAG,CAACC,KAAuB,EAAEC,aAAuC,KAAI;EAC7G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,oBAACE,mBAAmB;IAACM,KAAK,EAAEH,aAAa,CAACI;EAAW,gBACnDT,oBAACM,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACd;AAE1B,CAAC","names":["React","getSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","createElement","value","avatarGroup","root"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;AAGA,OAAO,MAAMC,0BAA0B,GAAGA,CAACC,KAAuB,EAAEC,aAAuC,KAAI;EAC7G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,mBAAmB;IAACO,KAAK,EAAEJ,aAAa,CAACK;EAAW,gBACnDV,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACd;AAE1B,CAAC"}

package/lib/components/AvatarGroup/useAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC;EAAsB,CAAE,GAAGJ,KAAK;EAElE,MAAMK,IAAI,GAAGP,qBAAqB,CAChC,KAAK,EACL;IACEQ,IAAI,EAAE,OAAO;IACb,GAAGN,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJI,UAAU,EAAE;MACVF,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AAED,OAAO,MAAMD,sBAAsB,GAAG,EAAE","names":["getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"]}
+{"version":3,"names":["getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC;EAAsB,CAAE,GAAGJ,KAAK;EAElE,MAAMK,IAAI,GAAGP,qBAAqB,CAChC,KAAK,EACL;IACEQ,IAAI,EAAE,OAAO;IACb,GAAGN,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJI,UAAU,EAAE;MACVF,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AAED,OAAO,MAAMD,sBAAsB,GAAG,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,OAAO,MAAMA,2BAA2B,GAAIC,KAAuB,IAA8B;EAC/F,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAE9B,MAAMG,WAAW,GAA4B;IAC3CF,MAAM;IACNC;GACD;EAED,OAAO;IAAEC;EAAW,CAAE;AACxB,CAAC","names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"]}
+{"version":3,"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAEA,OAAO,MAAMA,2BAA2B,GAAIC,KAAuB,IAA8B;EAC/F,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAE9B,MAAMG,WAAW,GAA4B;IAC3CF,MAAM;IACNC;GACD;EAED,OAAO;IAAEC;EAAW,CAAE;AACxB,CAAC"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AAIzD,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGL,SAAS,EAAE;EAC1B,MAAMM,UAAU,GAAGT,aAAa,EAAE;EAElCK,KAAK,CAACH,IAAI,CAACQ,SAAS,GAAGZ,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1BM,MAAM,CAACG,IAAI,EACXL,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EACpCD,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACI,GAAG,EAC9BP,KAAK,CAACH,IAAI,CAACQ,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className","base","pie"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AAIzD,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGd,SAAS,EAAE;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,EAAE;EAElCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1Be,MAAM,CAACb,IAAI,EACXW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EACpCD,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAC9BO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
 import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';
 /**
  * The AvatarGroupItem component represents a single person or entity.
@@ -9,6 +10,10 @@ import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';
 export const AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatarGroupItem_unstable(props, ref);
   useAvatarGroupItemStyles_unstable(state);
+  const {
+    useAvatarGroupItemStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderAvatarGroupItem_unstable(state);
 });
 AvatarGroupItem.displayName = 'AvatarGroupItem';

package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,iCAAiC,QAAQ,4BAA4B;AAI9E;;;;AAIA,OAAO,MAAMC,eAAe,gBAA8CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGN,2BAA2B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAErDJ,iCAAiC,CAACK,KAAK,CAAC;EACxC,OAAOP,8BAA8B,CAACO,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACK,WAAW,GAAG,iBAAiB","names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"]}
+{"version":3,"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHooks_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,iCAAiC,QAAQ,4BAA4B;AAI9E;;;;AAIA,OAAO,MAAMC,eAAe,gBAA8CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGP,2BAA2B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAErDJ,iCAAiC,CAACK,KAAK,CAAC;EAExC,MAAM;IAAEL,iCAAiC,EAAEM;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC7FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,8BAA8B,CAACQ,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACM,WAAW,GAAG,iBAAiB"}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,MAAM;IAAA,GAAKF,SAAS,CAACE;EAAM,EAAI,EACrCJ,KAAK,CAACK,cAAc,iBAAIR,oBAACI,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,CAClE;AAEjB,CAAC","names":["React","getSlots","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","renderAvatarGroupItem_unstable","state","slots","slotProps","createElement","root","avatar","isOverflowItem","overflowLabel"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,EACrCL,KAAK,CAACM,cAAc,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,aAAa;IAAA,GAAKL,SAAS,CAACK;EAAa,EAAI,CAClE;AAEjB,CAAC"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,MAAM,QAAQ,kBAAkB;AACzC,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,mCAAmC;AACtG,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,mBAAmB,QAAQ,kCAAkC;AAGtE;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGP,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGV,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGZ,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGV,KAAK;EACtD,MAAMM,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIT,sBAAsB;EAChD,MAAMe,qBAAqB,GAAGb,mBAAmB,CAACJ,kBAAkB,CAAC;EAErE,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACH,qBAAqB,EAAE;IACnE;IACAI,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAEf,eAAe;IAC/BK,MAAM;IACND,IAAI;IACJY,UAAU,EAAE;MACVC,IAAI,EAAEjB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCkB,MAAM,EAAE3B,MAAM;MACd4B,aAAa,EAAE;KAChB;IACDF,IAAI,EAAEtB,gBAAgB,CAACG,KAAK,CAACmB,IAAI,EAAE;MACjCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZf,KAAK;QACLC;;KAEH,CAAC;IACFW,MAAM,EAAEvB,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MACrCE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZtB,GAAG;QACHK,IAAI;QACJkB,KAAK,EAAE,UAAU;QACjB,GAAGd;;KAEN,CAAC;IACFW,aAAa,EAAExB,gBAAgB,CAACG,KAAK,CAACqB,aAAa,EAAE;MACnDC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAEzB,KAAK,CAAC0B;;KAEnB;GACF;AACH,CAAC","names":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"]}
+{"version":3,"names":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,kBAAkB;AACzC,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,mCAAmC;AACtG,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,mBAAmB,QAAQ,kCAAkC;AAGtE;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAGA,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGP,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGV,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGZ,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGV,KAAK;EACtD,MAAMM,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIT,sBAAsB;EAChD,MAAMe,qBAAqB,GAAGb,mBAAmB,CAACJ,kBAAkB,CAAC;EAErE,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACH,qBAAqB,EAAE;IACnE;IACAI,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAEf,eAAe;IAC/BK,MAAM;IACND,IAAI;IACJY,UAAU,EAAE;MACVC,IAAI,EAAEjB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCkB,MAAM,EAAE3B,MAAM;MACd4B,aAAa,EAAE;KAChB;IACDF,IAAI,EAAEtB,gBAAgB,CAACG,KAAK,CAACmB,IAAI,EAAE;MACjCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZf,KAAK;QACLC;;KAEH,CAAC;IACFW,MAAM,EAAEvB,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MACrCE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZtB,GAAG;QACHK,IAAI;QACJkB,KAAK,EAAE,UAAU;QACjB,GAAGd;;KAEN,CAAC;IACFW,aAAa,EAAExB,gBAAgB,CAACG,KAAK,CAACqB,aAAa,EAAE;MACnDC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAEzB,KAAK,CAAC0B;;KAEnB;GACF;AACH,CAAC"}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","useAvatarStyles","useOverflowLabelStyles","useStackStyles","useSpreadStyles","usePieStyles","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","base","push","nonOverflowItem","thick","thicker","thickest","slices","rtlSlices","overflowItem","className","pie","stackStyles","spreadStyles","layoutClasses","xxs","xs","s","l","mNudge","xl"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","z8tnut","z189sj","Byoj8tv","uwmqm3","nonOverflowItem","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"mappings":"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"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -1,5 +1,6 @@
 import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
 import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
 import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';
 /**
@@ -9,6 +10,10 @@ export const AvatarGroupPopover = props => {
   const state = useAvatarGroupPopover_unstable(props);
   const contextValues = useAvatarGroupPopoverContextValues(state);
   useAvatarGroupPopoverStyles_unstable(state);
+  const {
+    useAvatarGroupPopoverStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderAvatarGroupPopover_unstable(state, contextValues);
 };
 AvatarGroupPopover.displayName = 'AvatarGroupPopover';