@fluentui/react-avatar 9.5.17 → 9.5.18

package/CHANGELOG.json

@@ -2,7 +2,70 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:25 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:31 GMT",
+      "tag": "@fluentui/react-avatar_v9.5.18",
+      "version": "9.5.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "796e4426c50ede34b30e2dc2392328dcbadc2702",
+            "comment": "chore(cxe-red): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.25",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.7.12",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
       "tag": "@fluentui/react-avatar_v9.5.17",
       "version": "9.5.17",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.18)
+
+Wed, 09 Aug 2023 13:11:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.5.17..@fluentui/react-avatar_v9.5.18)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(cxe-red): migrate to new slot API ([PR #28753](https://github.com/microsoft/fluentui/pull/28753) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-badge to v9.1.25 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-popover to v9.7.12 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
 ## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.17)
 
-Fri, 04 Aug 2023 08:48:25 GMT 
+Fri, 04 Aug 2023 08:52:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.5.16..@fluentui/react-avatar_v9.5.17)
 
 ### Patches

package/lib/components/Avatar/renderAvatar.js

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 export const renderAvatar_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.initials && /*#__PURE__*/ createElement(slots.initials, slotProps.initials), slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), slots.image && /*#__PURE__*/ createElement(slots.image, slotProps.image), slots.badge && /*#__PURE__*/ createElement(slots.badge, slotProps.badge), state.activeAriaLabelElement);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.initials && /*#__PURE__*/ createElement(state.initials, null), state.icon && /*#__PURE__*/ createElement(state.icon, null), state.image && /*#__PURE__*/ createElement(state.image, null), state.badge && /*#__PURE__*/ createElement(state.badge, null), state.activeAriaLabelElement);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderAvatar_unstable","state","slots","slotProps","root","initials","icon","image","badge","activeAriaLabelElement"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA0BE;IAEvD,qBACE,AAXJ,cAWKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,QAAQ,kBAAI,AAZzB,cAY0BH,MAAMG,QAAQ,EAAKF,UAAUE,QAAQ,GACxDH,MAAMI,IAAI,kBAAI,AAbrB,cAasBJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI,GAC5CJ,MAAMK,KAAK,kBAAI,AAdtB,cAcuBL,MAAMK,KAAK,EAAKJ,UAAUI,KAAK,GAC/CL,MAAMM,KAAK,kBAAI,AAftB,cAeuBN,MAAMM,KAAK,EAAKL,UAAUK,KAAK,GAC/CP,MAAMQ,sBAAsB;AAGnC,EAAE"}
+{"version":3,"sources":["renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  assertSlots<AvatarSlots>(state);\n\n  return (\n    <state.root>\n      {state.initials && <state.initials />}\n      {state.icon && <state.icon />}\n      {state.image && <state.image />}\n      {state.badge && <state.badge />}\n      {state.activeAriaLabelElement}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3DF,YAAyBE;IAEzB,qBACE,AAXJ,cAWKA,MAAMC,IAAI,QACRD,MAAME,QAAQ,kBAAI,AAZzB,cAY0BF,MAAME,QAAQ,SACjCF,MAAMG,IAAI,kBAAI,AAbrB,cAasBH,MAAMG,IAAI,SACzBH,MAAMI,KAAK,kBAAI,AAdtB,cAcuBJ,MAAMI,KAAK,SAC3BJ,MAAMK,KAAK,kBAAI,AAftB,cAeuBL,MAAMK,KAAK,SAC3BL,MAAMM,sBAAsB;AAGnC,EAAE"}

package/lib/components/Avatar/useAvatar.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
 import { getInitials } from '../../utils/index';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
@@ -20,7 +20,7 @@ export const useAvatar_unstable = (props, ref)=>{
         color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
     }
     const baseId = useId('avatar-');
-    const root = getNativeElementProps('span', {
+    const root = slot.always(getNativeElementProps('span', {
         role: 'img',
         id: baseId,
         // aria-label and/or aria-labelledby are resolved below
@@ -28,70 +28,68 @@ export const useAvatar_unstable = (props, ref)=>{
         ref
     }, /* excludedPropNames: */ [
         'name'
-    ]);
+    ]), {
+        elementType: 'span'
+    });
     const [imageHidden, setImageHidden] = React.useState(undefined);
-    let image = resolveShorthand(props.image, {
+    let image = slot.optional(props.image, {
         defaultProps: {
             alt: '',
             role: 'presentation',
             'aria-hidden': true,
             hidden: imageHidden
-        }
-    });
-    // Image shouldn't be rendered if its src is not set
+        },
+        elementType: 'img'
+    }); // Image shouldn't be rendered if its src is not set
     if (!(image === null || image === void 0 ? void 0 : image.src)) {
         image = undefined;
-    }
-    // Hide the image if it fails to load and restore it on a successful load
+    } // Hide the image if it fails to load and restore it on a successful load
     if (image) {
         image.onError = mergeCallbacks(image.onError, ()=>setImageHidden(true));
         image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
-    }
-    // Resolve the initials slot, defaulted to getInitials.
-    let initials = resolveShorthand(props.initials, {
-        required: true,
+    } // Resolve the initials slot, defaulted to getInitials.
+    let initials = slot.optional(props.initials, {
+        renderByDefault: true,
         defaultProps: {
             children: getInitials(name, dir === 'rtl', {
                 firstInitialOnly: size <= 16
             }),
             id: baseId + '__initials'
-        }
-    });
-    // Don't render the initials slot if it's empty
+        },
+        elementType: 'span'
+    }); // Don't render the initials slot if it's empty
     if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
         initials = undefined;
-    }
-    // Render the icon slot *only if* there aren't any initials or image to display
+    } // Render the icon slot *only if* there aren't any initials or image to display
     let icon = undefined;
     if (!initials && (!image || imageHidden)) {
-        icon = resolveShorthand(props.icon, {
-            required: true,
+        icon = slot.optional(props.icon, {
+            renderByDefault: true,
             defaultProps: {
                 children: /*#__PURE__*/ React.createElement(PersonRegular, null),
                 'aria-hidden': true
-            }
+            },
+            elementType: 'span'
         });
     }
-    const badge = resolveShorthand(props.badge, {
+    const badge = slot.optional(props.badge, {
         defaultProps: {
             size: getBadgeSize(size),
             id: baseId + '__badge'
-        }
+        },
+        elementType: PresenceBadge
     });
-    let activeAriaLabelElement;
-    // Resolve aria-label and/or aria-labelledby if not provided by the user
+    let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
     if (!root['aria-label'] && !root['aria-labelledby']) {
         if (name) {
-            root['aria-label'] = name;
-            // Include the badge in labelledby if it exists
+            root['aria-label'] = name; // Include the badge in labelledby if it exists
             if (badge) {
                 root['aria-labelledby'] = root.id + ' ' + badge.id;
             }
         } else if (initials) {
             // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
             root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
-        }
-        // Add the active state to the aria label
+        } // Add the active state to the aria label
         if (active === 'active' || active === 'inactive') {
             const activeText = DEFAULT_STRINGS[active];
             if (root['aria-labelledby']) {

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

@@ -1 +1 @@
-{"version":3,"sources":["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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? '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  let image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\n  }\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: 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"],"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","src","onError","onLoad","initials","required","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","span","components","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}
+{"version":3,"sources":["useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useId, slot } 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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? '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'] = slot.always(\n    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    { elementType: 'span' },\n  );\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  let image: AvatarState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  }); // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\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  } // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  }); // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\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 = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: { children: <PersonRegular />, 'aria-hidden': true },\n      elementType: 'span',\n    });\n  }\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: baseId + '__badge' },\n    elementType: PresenceBadge,\n  });\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement']; // 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; // 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    } // 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  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img', badge: PresenceBadge },\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","always","role","id","elementType","imageHidden","setImageHidden","useState","undefined","image","optional","defaultProps","alt","hidden","src","onError","onLoad","initials","renderByDefault","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","span","components","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC/F,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE,OAAO,MAAMC,kBAAkB;IAC7BC,QAAQ;IACRC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC,MAA6C;IAClG,MAAM,EAAEC,IAAG,EAAE,GAAGR;IAChB,MAAM,EAAES,OAAOC,aAAY,EAAEC,MAAMC,YAAW,EAAE,GAAGX;IACnD,MAAM,EACJY,KAAI,EACJF,MAAOC,wBAAAA,yBAAAA,cAAgB,EAAY,CAAA,EACnCH,OAAQC,yBAAAA,0BAAAA,eAAgB,UAAU,CAAA,EAClCP,QAAS,QAAO,EAChBW,kBAAmB,OAAM,EACzBC,WAAU,EACX,GAAGT;IACJ,IAAI,EAAEU,OAAQ,UAAS,EAAE,GAAGV;IAE5B,8CAA8C;IAC9C,IAAIU,UAAU,YAAY;YACSD;QAAjCC,QAAQC,YAAY,CAACC,YAAYH,CAAAA,OAAAA,uBAAAA,wBAAAA,aAAcF,IAAI,cAAlBE,kBAAAA,OAAsB,EAAE,IAAIE,aAAaE,MAAM,CAAC;IACnF,CAAC;IAED,MAAMC,SAAS1B,MAAM;IAErB,MAAM2B,OAA4B1B,KAAK2B,MAAM,CAC3C9B,sBACE,QACA;QACE+B,MAAM;QACNC,IAAIJ;QACJ,uDAAuD;QACvD,GAAGd,KAAK;QACRC;IACF,GACA,sBAAsB,GAAG;QAAC;KAAO,GAEnC;QAAEkB,aAAa;IAAO;IAExB,MAAM,CAACC,aAAaC,eAAe,GAAGpC,MAAMqC,QAAQ,CAAmBC;IACvE,IAAIC,QAA8BnC,KAAKoC,QAAQ,CAACzB,MAAMwB,KAAK,EAAE;QAC3DE,cAAc;YAAEC,KAAK;YAAIV,MAAM;YAAgB,eAAe,IAAI;YAAEW,QAAQR;QAAY;QACxFD,aAAa;IACf,IAAI,oDAAoD;IACxD,IAAI,CAACK,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOK,GAAG,AAAD,GAAG;QACfL,QAAQD;IACV,CAAC,CAAC,yEAAyE;IAC3E,IAAIC,OAAO;QACTA,MAAMM,OAAO,GAAG3C,eAAeqC,MAAMM,OAAO,EAAE,IAAMT,eAAe,IAAI;QACvEG,MAAMO,MAAM,GAAG5C,eAAeqC,MAAMO,MAAM,EAAE,IAAMV,eAAeE;IACnE,CAAC,CAAC,uDAAuD;IACzD,IAAIS,WAAoC3C,KAAKoC,QAAQ,CAACzB,MAAMgC,QAAQ,EAAE;QACpEC,iBAAiB,IAAI;QACrBP,cAAc;YACZQ,UAAU5C,YAAYiB,MAAML,QAAQ,OAAO;gBAAEiC,kBAAkB9B,QAAQ;YAAG;YAC1Ea,IAAIJ,SAAS;QACf;QACAK,aAAa;IACf,IAAI,+CAA+C;IACnD,IAAI,CAACa,CAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAUE,QAAQ,AAAD,GAAG;QACvBF,WAAWT;IACb,CAAC,CAAC,+EAA+E;IACjF,IAAIa,OAA4Bb;IAChC,IAAI,CAACS,YAAa,CAAA,CAACR,SAASJ,WAAU,GAAI;QACxCgB,OAAO/C,KAAKoC,QAAQ,CAACzB,MAAMoC,IAAI,EAAE;YAC/BH,iBAAiB,IAAI;YACrBP,cAAc;gBAAEQ,wBAAU,oBAAC3C;gBAAkB,eAAe,IAAI;YAAC;YACjE4B,aAAa;QACf;IACF,CAAC;IACD,MAAMkB,QAA8BhD,KAAKoC,QAAQ,CAACzB,MAAMqC,KAAK,EAAE;QAC7DX,cAAc;YAAErB,MAAMiC,aAAajC;YAAOa,IAAIJ,SAAS;QAAU;QACjEK,aAAa3B;IACf;IACA,IAAI+C,wBAA+D,wEAAwE;IAC3I,IAAI,CAACxB,IAAI,CAAC,aAAa,IAAI,CAACA,IAAI,CAAC,kBAAkB,EAAE;QACnD,IAAIR,MAAM;YACRQ,IAAI,CAAC,aAAa,GAAGR,MAAM,+CAA+C;YAC1E,IAAI8B,OAAO;gBACTtB,IAAI,CAAC,kBAAkB,GAAGA,KAAKG,EAAE,GAAG,MAAMmB,MAAMnB,EAAE;YACpD,CAAC;QACH,OAAO,IAAIc,UAAU;YACnB,0GAA0G;YAC1GjB,IAAI,CAAC,kBAAkB,GAAGiB,SAASd,EAAE,GAAImB,CAAAA,QAAQ,MAAMA,MAAMnB,EAAE,GAAG,EAAE,AAAD;QACrE,CAAC,CAAC,yCAAyC;QAC3C,IAAIrB,WAAW,YAAYA,WAAW,YAAY;YAChD,MAAM2C,aAAa5C,eAAe,CAACC,OAAO;YAC1C,IAAIkB,IAAI,CAAC,kBAAkB,EAAE;gBAC3B,iFAAiF;gBACjF,MAAM0B,WAAW3B,SAAS;gBAC1BC,IAAI,CAAC,kBAAkB,IAAI,MAAM0B;gBACjCF,uCACE,oBAACG;oBAAKd,QAAAA,IAAM;oBAACV,IAAIuB;mBACdD;YAGP,OAAO,IAAIzB,IAAI,CAAC,aAAa,EAAE;gBAC7B,8CAA8C;gBAC9CA,IAAI,CAAC,aAAa,IAAI,MAAMyB;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO;QACLnC;QACAF;QACAN;QACAW;QACA+B;QACA7B;QACAiC,YAAY;YAAE5B,MAAM;YAAQiB,UAAU;YAAQI,MAAM;YAAQZ,OAAO;YAAOa,OAAO7C;QAAc;QAC/FuB;QACAiB;QACAI;QACAZ;QACAa;IACF;AACF,EAAE;AACF,MAAMC,eAAe,CAACjC,OAA8B;IAClD,IAAIA,QAAQ,IAAI;QACd,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO,IAAIA,QAAQ,IAAI;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT,CAAC;AACH;AAEA,MAAMM,eAAmC;IACvC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,cAAc,CAACgC,MAAwB;IAC3C,IAAIC,WAAW;IACf,IAAK,IAAIC,MAAcF,IAAI/B,MAAM,GAAG,GAAGiC,OAAO,GAAGA,MAAO;QACtD,MAAMC,KAAKH,IAAII,UAAU,CAACF;QAC1B,MAAMG,QAAQH,MAAM;QACpBD,YAAY,AAACE,CAAAA,MAAME,KAAI,IAAMF,CAAAA,MAAO,IAAIE,KAAK,GAAI,iCAAiC;IACpF;IAEA,OAAOJ;AACT"}

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

@@ -14,9 +14,12 @@ const vars = {
   badgeAlign: '--fui-Avatar-badgeAlign',
   ringWidth: '--fui-Avatar-ringWidth'
 };
-const useRootClassName = /*#__PURE__*/__resetStyles("r81b29z", "r1aatmv", [".r81b29z{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", "@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}", ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}", ".r1aatmv{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", "@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}", ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"]);
+const useRootClassName = /*#__PURE__*/__resetStyles("r81b29z", "r1aatmv", {
+  r: [".r81b29z{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}", ".r1aatmv{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}"]
+});
 const useImageClassName = /*#__PURE__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
-const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}"]);
+const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}"]);
 /**
  * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
  * This creates a transparent gap between the badge and Avatar.
@@ -178,7 +181,7 @@ const useStyles = /*#__PURE__*/__styles({
     Be2twd7: "f18m8u13"
   }
 }, {
-  d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}", ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}", ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}", ".f13zj6fq::after{content:\"\";}", ".fcjn15l::after{box-shadow:var(--shadow4);}", ".f1tm8t9f::after{box-shadow:var(--shadow8);}", ".f1a1aohj::after{box-shadow:var(--shadow16);}", ".fond6v5::after{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1f5ar78::before,.f1f5ar78::after{margin-top:0;}", ".fqxtap0::before,.fqxtap0::after{margin-right:0;}", ".fhjukvy::before,.fhjukvy::after{margin-left:0;}", ".f1qj1nzo::before,.f1qj1nzo::after{margin-bottom:0;}", ".fw457kn::before,.fw457kn::after{opacity:0;}", ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}", ".f1y9kyih{--fui-Avatar-badgeAlign:left;}", ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}", ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}", ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}", ".fwwuruf{--fui-Avatar-badgeRadius:6px;}", ".f1af27q5{--fui-Avatar-badgeRadius:8px;}", ".f18yy57a{--fui-Avatar-badgeRadius:10px;}", ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}", ".f2jg042{--fui-Avatar-badgeRadius:14px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
+  d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}", ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}", ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}", ".f13zj6fq::after{content:\"\";}", ".fcjn15l::after{box-shadow:var(--shadow4);}", ".f1tm8t9f::after{box-shadow:var(--shadow8);}", ".f1a1aohj::after{box-shadow:var(--shadow16);}", ".fond6v5::after{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{transform:scale(0.875);}", ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1f5ar78::before,.f1f5ar78::after{margin-top:0;}", ".fqxtap0::before,.fqxtap0::after{margin-right:0;}", ".fhjukvy::before,.fhjukvy::after{margin-left:0;}", ".f1qj1nzo::before,.f1qj1nzo::after{margin-bottom:0;}", ".fw457kn::before,.fw457kn::after{opacity:0;}", ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}", ".f1y9kyih{--fui-Avatar-badgeAlign:left;}", ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}", ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}", ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}", ".fwwuruf{--fui-Avatar-badgeRadius:6px;}", ".f1af27q5{--fui-Avatar-badgeRadius:8px;}", ".f18yy57a{--fui-Avatar-badgeRadius:10px;}", ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}", ".f2jg042{--fui-Avatar-badgeRadius:14px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }]]

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

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

package/lib/components/AvatarGroup/renderAvatarGroup.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 /**
  * Render the final JSX of AvatarGroup
  */ export const renderAvatarGroup_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(AvatarGroupProvider, {
         value: contextValues.avatarGroup
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC,gBAA4C;IAC9G,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA+BG;IAE5D,qBACE,AAfJ,cAeKF;QAAoBM,OAAOH,cAAcI,WAAW;qBACnD,AAhBN,cAgBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } 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  assertSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <state.root />\n    </AvatarGroupProvider>\n  );\n};\n"],"names":["createElement","assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC,gBAA4C;IAC9GJ,YAA8BG;IAE9B,qBACE,AAfJ,cAeKF;QAAoBI,OAAOD,cAAcE,WAAW;qBACnD,AAhBN,cAgBOH,MAAMI,IAAI;AAGjB,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render AvatarGroup.
  *
@@ -10,13 +10,15 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  * @param ref - reference to root HTMLElement of AvatarGroup
  */ export const useAvatarGroup_unstable = (props, ref)=>{
     const { layout ='spread' , size =defaultAvatarGroupSize  } = props;
-    const root = getNativeElementProps('div', {
+    const root = slot.always(getNativeElementProps('div', {
         role: 'group',
         ...props,
         ref
     }, [
         'size'
-    ]);
+    ]), {
+        elementType: 'div'
+    });
     return {
         layout,
         size,

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,QAAS,SAAQ,EAAEC,MAAOC,uBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,sBACX,OACA;QACEQ,MAAM;QACN,GAAGN,KAAK;QACRC;IACF,GACA;QAAC;KAAO;IAGV,OAAO;QACLC;QACAC;QACAI,YAAY;YACVF,MAAM;QACR;QACAA;IACF;AACF,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}
+{"version":3,"sources":["useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } 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 = slot.always(\n    getNativeElementProps(\n      'div',\n      {\n        role: 'group',\n        ...props,\n        ref,\n      },\n      ['size'],\n    ),\n    { elementType: 'div' },\n  );\n  return { layout, size, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getNativeElementProps","slot","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","always","role","elementType","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,QAAS,SAAQ,EAAEC,MAAOC,uBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,KAAKQ,MAAM,CACtBT,sBACE,OACA;QACEU,MAAM;QACN,GAAGP,KAAK;QACRC;IACF,GACA;QAAC;KAAO,GAEV;QAAEO,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAQC;QAAMM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC3D,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}

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

@@ -18,7 +18,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bsw6fvg: "fe2ae1k"
   }
 }, {
-  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}"],
+  d: [".ftuwxu6{display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}"],
   m: [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
     m: "(forced-colors: active)"
   }]]