@fluentui/react-avatar 9.1.1 → 9.2.1

package/lib-commonjs/AvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AvatarGroupPopover.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AvatarGroupPopover/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/AvatarGroupPopover.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AvatarGroupPopover/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Avatar/renderAvatar.js

@@ -19,7 +19,7 @@ const renderAvatar_unstable = state => {
   }), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
   }), slots.image && React.createElement(slots.image, { ...slotProps.image
   }), slots.badge && React.createElement(slots.badge, { ...slotProps.badge
-  }));
+  }), state.activeAriaLabelElement);
 };
 
 exports.renderAvatar_unstable = renderAvatar_unstable;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJlB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJlB,EAKG,KAAK,CAAC,sBALT,CADF;AASD,CAZM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Avatar/useAvatar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAvatar_unstable = void 0;
+exports.useAvatar_unstable = exports.DEFAULT_STRINGS = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -17,15 +17,25 @@ const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
 
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
+const AvatarContext_1 = /*#__PURE__*/require("../../contexts/AvatarContext");
+
+exports.DEFAULT_STRINGS = {
+  active: 'active',
+  inactive: 'inactive'
+};
+
 const useAvatar_unstable = (props, ref) => {
   var _a;
 
   const {
     dir
   } = react_shared_contexts_1.useFluent_unstable();
+  const {
+    size: contextSize
+  } = AvatarContext_1.useAvatarContext();
   const {
     name,
-    size = 32,
+    size = contextSize !== null && contextSize !== void 0 ? contextSize : 32,
     shape = 'circular',
     active = 'unset',
     activeAppearance = 'ring',
@@ -93,7 +103,8 @@ const useAvatar_unstable = (props, ref) => {
       size: getBadgeSize(size),
       id: baseId + '__badge'
     }
-  }); // 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) {
@@ -105,6 +116,24 @@ const useAvatar_unstable = (props, ref) => {
     } 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
+
+
+    if (active === 'active' || active === 'inactive') {
+      const activeText = exports.DEFAULT_STRINGS[active];
+
+      if (root['aria-labelledby']) {
+        // If using aria-labelledby, render a hidden span and append it to the labelledby
+        const activeId = baseId + '__active';
+        root['aria-labelledby'] += ' ' + activeId;
+        activeAriaLabelElement = React.createElement("span", {
+          hidden: true,
+          id: activeId
+        }, activeText);
+      } else if (root['aria-label']) {
+        // Otherwise, just append it to the aria-label
+        root['aria-label'] += ' ' + activeText;
+      }
     }
   }
 
@@ -113,6 +142,7 @@ const useAvatar_unstable = (props, ref) => {
     shape,
     active,
     activeAppearance,
+    activeAriaLabelElement,
     color,
     components: {
       root: 'span',

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","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';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = 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  // 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  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\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\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // 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  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n  root: 'fui-Avatar',\n  image: 'fui-Avatar__image',\n  initials: 'fui-Avatar__initials',\n  icon: 'fui-Avatar__icon',\n  badge: 'fui-Avatar__badge',\n};\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n  duration50: '50ms',\n  duration100: '100ms',\n  duration150: '150ms',\n  duration200: '200ms',\n  duration300: '300ms',\n  duration400: '400ms',\n  duration500: '500ms',\n};\n\nconst animationTiming = {\n  ultraFast: animationDuration.duration50,\n  faster: animationDuration.duration100,\n  fast: animationDuration.duration150,\n  normal: animationDuration.duration200,\n  slow: animationDuration.duration300,\n  slower: animationDuration.duration400,\n  ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n  decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n  decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n  decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n  accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n  accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n  accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n  maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n  easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n  linear: 'linear',\n};\n\nconst animations = {\n  fastOutSlowInMax: animationLines.decelerateMax,\n  fastOutSlowInMid: animationLines.decelerateMid,\n  fastOutSlowInMin: animationLines.decelerateMin,\n  slowOutFastInMax: animationLines.accelerateMax,\n  slowOutFastInMid: animationLines.accelerateMid,\n  slowOutFastInMin: animationLines.accelerateMin,\n  fastEase: animationLines.maxEasyEase,\n  normalEase: animationLines.easyEase,\n  nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  textCaption2Strong: {\n    fontSize: tokens.fontSizeBase100,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  image: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n\n    ...shorthands.borderRadius('inherit'),\n    objectFit: 'cover',\n    verticalAlign: 'top',\n  },\n\n  iconInitials: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    ...shorthands.borderRadius('inherit'),\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n  },\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});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const colorStyles = useColorStyles();\n\n  const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    rootClasses.push(styles.textBody1Strong);\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.textTitle);\n  }\n\n  if (shape === 'square') {\n    if (size <= 24) {\n      rootClasses.push(styles.squareSmall);\n    } else if (size <= 48) {\n      rootClasses.push(styles.squareMedium);\n    } else if (size <= 72) {\n      rootClasses.push(styles.squareLarge);\n    } else {\n      rootClasses.push(styles.squareXLarge);\n    }\n  }\n\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      styles.iconInitials,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n  root: 'fui-Avatar',\n  image: 'fui-Avatar__image',\n  initials: 'fui-Avatar__initials',\n  icon: 'fui-Avatar__icon',\n  badge: 'fui-Avatar__badge',\n};\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n  duration50: '50ms',\n  duration100: '100ms',\n  duration150: '150ms',\n  duration200: '200ms',\n  duration300: '300ms',\n  duration400: '400ms',\n  duration500: '500ms',\n};\n\nconst animationTiming = {\n  ultraFast: animationDuration.duration50,\n  faster: animationDuration.duration100,\n  fast: animationDuration.duration150,\n  normal: animationDuration.duration200,\n  slow: animationDuration.duration300,\n  slower: animationDuration.duration400,\n  ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n  decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n  decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n  decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n  accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n  accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n  accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n  maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n  easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n  linear: 'linear',\n};\n\nconst animations = {\n  fastOutSlowInMax: animationLines.decelerateMax,\n  fastOutSlowInMid: animationLines.decelerateMid,\n  fastOutSlowInMin: animationLines.decelerateMin,\n  slowOutFastInMax: animationLines.accelerateMax,\n  slowOutFastInMid: animationLines.accelerateMid,\n  slowOutFastInMin: animationLines.accelerateMin,\n  fastEase: animationLines.maxEasyEase,\n  normalEase: animationLines.easyEase,\n  nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    flexShrink: 0,\n    position: 'relative',\n    verticalAlign: 'middle',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fontFamily: tokens.fontFamilyBase,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  textCaption2Strong: {\n    fontSize: tokens.fontSizeBase100,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n  },\n\n  image: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n\n    ...shorthands.borderRadius('inherit'),\n    objectFit: 'cover',\n    verticalAlign: 'top',\n  },\n\n  iconInitials: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    lineHeight: '1',\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'center',\n    textAlign: 'center',\n    userSelect: 'none',\n    ...shorthands.borderRadius('inherit'),\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n  },\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});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const colorStyles = useColorStyles();\n\n  const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    rootClasses.push(styles.textBody1Strong);\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.textTitle);\n  }\n\n  if (shape === 'square') {\n    if (size <= 24) {\n      rootClasses.push(styles.squareSmall);\n    } else if (size <= 48) {\n      rootClasses.push(styles.squareMedium);\n    } else if (size <= 72) {\n      rootClasses.push(styles.squareLarge);\n    } else {\n      rootClasses.push(styles.squareXLarge);\n    }\n  }\n\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring);\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      styles.iconInitials,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EACA,MAAM,aAAa,GAAG,6BAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAtB;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,aAAlC,CAAP;AACD,CANiE,CAArD;AAQb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroup_unstable(props, ref);\n  const contextValues = useAvatarGroupContextValues(state);\n\n  useAvatarGroupStyles_unstable(state);\n  return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EACA,MAAM,aAAa,GAAG,6BAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAtB;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,aAAlC,CAAP;AACD,CANiE,CAArD;AAQb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroup_unstable(props, ref);\n  const contextValues = useAvatarGroupContextValues(state);\n\n  useAvatarGroupStyles_unstable(state);\n  return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles';\nexport * from './useAvatarGroupContextValues';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles';\nexport * from './useAvatarGroupContextValues';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAG,CAAC,KAAD,EAA0B,aAA1B,KAAqE;EAC7G,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAG,CAAC,KAAD,EAA0B,aAA1B,KAAqE;EAC7G,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <slots.root {...slotProps.root} />\n    </AvatarGroupProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,MAAM,GAAG,QAAX;IAAqB,IAAI,GAAG,OAAA,CAAA;EAA5B,IAAuD,KAA7D;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CACX,KADW,EAEX;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE;EAHF,CAFW,EAOX,CAAC,MAAD,CAPW,CAAb;EAUA,OAAO;IACL,MADK;IAEL,IAFK;IAGL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAHP;IAML;EANK,CAAP;AAQD,CArBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;AAuBA,OAAA,CAAA,sBAAA,GAAyB,EAAzB","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,MAAM,GAAG,QAAX;IAAqB,IAAI,GAAG,OAAA,CAAA;EAA5B,IAAuD,KAA7D;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CACX,KADW,EAEX;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE;EAHF,CAFW,EAOX,CAAC,MAAD,CAPW,CAAb;EAUA,OAAO;IACL,MADK;IAEL,IAFK;IAGL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAHP;IAML;EANK,CAAP;AAQD,CArBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;AAuBA,OAAA,CAAA,sBAAA,GAAyB,EAAzB","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,2BAA2B,GAAI,KAAD,IAAsD;EAC/F,MAAM;IAAE,MAAF;IAAU;EAAV,IAAmB,KAAzB;EAEA,MAAM,WAAW,GAA4B;IAC3C,MAD2C;IAE3C;EAF2C,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CATM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,2BAA2B,GAAI,KAAD,IAAsD;EAC/F,MAAM;IAAE,MAAF;IAAU;EAAV,IAAmB,KAAzB;EAEA,MAAM,WAAW,GAA4B;IAC3C,MAD2C;IAE3C;EAF2C,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CATM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE;AAD+D,CAA1D;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAcA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM;IAAE,MAAF;IAAU;EAAV,IAAmB,KAAzB;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,EAAnB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,KAAK,KAAX,IAAoB,UAAU,CAAC,IAAD,CAHT,EAIrB,MAAM,KAAK,KAAX,IAAoB,MAAM,CAAC,GAJN,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAQA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE;AAD+D,CAA1D;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAcA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM;IAAE,MAAF;IAAU;EAAV,IAAmB,KAAzB;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,EAAnB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,KAAK,KAAX,IAAoB,UAAU,CAAC,IAAD,CAHT,EAIrB,MAAM,KAAK,KAAX,IAAoB,MAAM,CAAC,GAJN,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAQA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,EAAmC,GAAnC,CAAd;EAEA,0BAAA,CAAA,iCAAA,CAAkC,KAAlC;EACA,OAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAP;AACD,CALyE,CAA7D;AAOb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,EAAmC,GAAnC,CAAd;EAEA,0BAAA,CAAA,iCAAA,CAAkC,KAAlC;EACA,OAAO,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAP;AACD,CALyE,CAA7D;AAOb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CADF,EAEG,KAAK,CAAC,cAAN,IAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAF3B,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CADF,EAEG,KAAK,CAAC,cAAN,IAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAF3B,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM,eAAe,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,UAA1C,CAAxB;EACA,MAAM,SAAS,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,IAA1C,CAAlB;EACA,MAAM,MAAM,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,MAA1C,CAAf,CAHwB,CAIxB;;EACA,MAAM;IAAE,KAAF;IAAS,SAAT;IAAoB,GAAG;EAAvB,IAA2C,KAAjD;EACA,MAAM,IAAI,GAAG,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,gBAAA,CAAA,sBAA1B;EACA,MAAM,qBAAqB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,oBAAA,CAAA,kBAApB,CAA9B;;EAEA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,CAAC,qBAA9C,EAAqE;IACnE;IACA,OAAO,CAAC,IAAR,CAAa,oEAAb;EACD;;EAED,OAAO;IACL,cAAc,EAAE,eADX;IAEL,MAFK;IAGL,IAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,eAAe,GAAG,IAAH,GAAU,KADrB;MAEV,MAAM,EAAE,QAAA,CAAA,MAFE;MAGV,aAAa,EAAE;IAHL,CAJP;IASL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,KADY;QAEZ;MAFY;IAFmB,CAA7B,CATD;IAgBL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;MACrC,QAAQ,EAAE,IAD2B;MAErC,YAAY,EAAE;QACZ,GADY;QAEZ,IAFY;QAGZ,KAAK,EAAE,UAHK;QAIZ,GAAG;MAJS;IAFuB,CAA/B,CAhBH;IAyBL,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,EAAsC;MACnD,QAAQ,EAAE,IADyC;MAEnD,YAAY,EAAE;QACZ;QACA,eAAe,IAFH;QAGZ,QAAQ,EAAE,KAAK,CAAC;MAHJ;IAFqC,CAAtC;EAzBV,CAAP;AAkCD,CAnDM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM,eAAe,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,UAA1C,CAAxB;EACA,MAAM,SAAS,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,IAA1C,CAAlB;EACA,MAAM,MAAM,GAAG,oBAAA,CAAA,8BAAA,CAA+B,GAAG,IAAI,GAAG,CAAC,MAA1C,CAAf,CAHwB,CAIxB;;EACA,MAAM;IAAE,KAAF;IAAS,SAAT;IAAoB,GAAG;EAAvB,IAA2C,KAAjD;EACA,MAAM,IAAI,GAAG,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,gBAAA,CAAA,sBAA1B;EACA,MAAM,qBAAqB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,oBAAA,CAAA,kBAApB,CAA9B;;EAEA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,CAAC,qBAA9C,EAAqE;IACnE;IACA,OAAO,CAAC,IAAR,CAAa,oEAAb;EACD;;EAED,OAAO;IACL,cAAc,EAAE,eADX;IAEL,MAFK;IAGL,IAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,eAAe,GAAG,IAAH,GAAU,KADrB;MAEV,MAAM,EAAE,QAAA,CAAA,MAFE;MAGV,aAAa,EAAE;IAHL,CAJP;IASL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,KADY;QAEZ;MAFY;IAFmB,CAA7B,CATD;IAgBL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;MACrC,QAAQ,EAAE,IAD2B;MAErC,YAAY,EAAE;QACZ,GADY;QAEZ,IAFY;QAGZ,KAAK,EAAE,UAHK;QAIZ,GAAG;MAJS;IAFuB,CAA/B,CAhBH;IAyBL,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,EAAsC;MACnD,QAAQ,EAAE,IADyC;MAEnD,YAAY,EAAE;QACZ;QACA,eAAe,IAFH;QAGZ,QAAQ,EAAE,KAAK,CAAC;MAHJ;IAFqC,CAAtC;EAzBV,CAAP;AAkCD,CAnDM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  base: {\n    '&::after': {\n      content: \"''\",\n      position: 'absolute',\n      display: 'inline-flex',\n      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n      ...shorthands.borderColor(tokens.colorNeutralBackground2),\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      ...shorthands.borderStyle('solid'),\n\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  overflowButton: {\n    '&:focus::after': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  thick: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThick})`,\n      top: `calc(-1 * ${tokens.strokeWidthThick})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  thicker: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  thickest: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n  borderThin: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n    },\n  },\n  borderThick: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n    },\n  },\n  borderThicker: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n    },\n  },\n  borderThickest: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n    },\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (\n  layout: AvatarGroupProps['layout'],\n  size: AvatarSizes,\n  isOverflowButton?: boolean,\n): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      layoutClasses.push(stackStyles.base);\n\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n      if (isOverflowButton) {\n        layoutClasses.push(stackStyles.overflowButton);\n\n        if (size < 36) {\n          layoutClasses.push(stackStyles.borderThin);\n        } else if (size < 56) {\n          layoutClasses.push(stackStyles.borderThick);\n        } else if (size < 72) {\n          layoutClasses.push(stackStyles.borderThicker);\n        } else {\n          layoutClasses.push(stackStyles.borderThickest);\n        }\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  base: {\n    '&::after': {\n      content: \"''\",\n      position: 'absolute',\n      display: 'inline-flex',\n      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n      ...shorthands.borderColor(tokens.colorNeutralBackground2),\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      ...shorthands.borderStyle('solid'),\n\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  overflowButton: {\n    '&:focus::after': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  thick: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThick})`,\n      top: `calc(-1 * ${tokens.strokeWidthThick})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  thicker: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  thickest: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n  borderThin: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n    },\n  },\n  borderThick: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n    },\n  },\n  borderThicker: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n    },\n  },\n  borderThickest: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n    },\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (\n  layout: AvatarGroupProps['layout'],\n  size: AvatarSizes,\n  isOverflowButton?: boolean,\n): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      layoutClasses.push(stackStyles.base);\n\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n      if (isOverflowButton) {\n        layoutClasses.push(stackStyles.overflowButton);\n\n        if (size < 36) {\n          layoutClasses.push(stackStyles.borderThin);\n        } else if (size < 56) {\n          layoutClasses.push(stackStyles.borderThick);\n        } else if (size < 72) {\n          layoutClasses.push(stackStyles.borderThicker);\n        } else {\n          layoutClasses.push(stackStyles.borderThickest);\n        }\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,oCAAA,gBAAA,OAAA,CAAA,sCAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAsC,KAAK,IAAG;EAC3E,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAd;EACA,MAAM,aAAa,GAAG,oCAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAtB;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,0BAAA,CAAA,iCAAA,CAAkC,KAAlC,EAAyC,aAAzC,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAQb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,oCAAA,gBAAA,OAAA,CAAA,sCAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAsC,KAAK,IAAG;EAC3E,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,CAAd;EACA,MAAM,aAAa,GAAG,oCAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAtB;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,0BAAA,CAAA,iCAAA,CAAkC,KAAlC,EAAyC,aAAzC,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAQb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupPopover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupPopover/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,EACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,EACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const {\n    indicator = size < 24 ? 'icon' : 'count',\n    count = React.Children.count(props.children),\n    children,\n    ...restOfProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'icon') {\n    triggerButtonChildren = <MoreHorizontalRegular />;\n  } else {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    popoverOpen,\n    layout,\n    indicator,\n    size,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: {\n      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n      children: <></>,\n      size: 'small',\n      trapFocus: true,\n      ...restOfProps,\n      open: popoverOpen,\n      onOpenChange: handleOnPopoverChange,\n    },\n    triggerButton: resolveShorthand(props.triggerButton, {\n      required: true,\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        children: children,\n        role: 'list',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n    }),\n    tooltip: resolveShorthand(props.tooltip, {\n      required: true,\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const {\n    indicator = size < 24 ? 'icon' : 'count',\n    count = React.Children.count(props.children),\n    children,\n    ...restOfProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'icon') {\n    triggerButtonChildren = <MoreHorizontalRegular />;\n  } else {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    popoverOpen,\n    layout,\n    indicator,\n    size,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: {\n      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n      children: <></>,\n      size: 'small',\n      trapFocus: true,\n      ...restOfProps,\n      open: popoverOpen,\n      onOpenChange: handleOnPopoverChange,\n    },\n    triggerButton: resolveShorthand(props.triggerButton, {\n      required: true,\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        children: children,\n        role: 'list',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n    }),\n    tooltip: resolveShorthand(props.tooltip, {\n      required: true,\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"names":[],"mappings":";;;;;;;AAGO,MAAM,kCAAkC,GAAI,KAAD,IAA6D;EAC7G,MAAM,WAAW,GAA4B;IAC3C,UAAU,EAAE,IAD+B;IAE3C,IAAI,EAAE;EAFqC,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CAPM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"names":[],"mappings":";;;;;;;AAGO,MAAM,kCAAkC,GAAI,KAAD,IAA6D;EAC7G,MAAM,WAAW,GAA4B;IAC3C,UAAU,EAAE,IAD+B;IAE3C,IAAI,EAAE;EAFqC,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CAPM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}