@fluentui/react-avatar 9.2.5 → 9.2.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarStyles.js","sourceRoot":"","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\nconst animations = {\n  fastOutSlowInMax: tokens.curveDecelerateMax,\n  fastOutSlowInMid: tokens.curveDecelerateMid,\n  fastOutSlowInMin: tokens.curveDecelerateMin,\n  slowOutFastInMax: tokens.curveAccelerateMax,\n  slowOutFastInMid: tokens.curveAccelerateMid,\n  slowOutFastInMin: tokens.curveAccelerateMin,\n  fastEase: tokens.curveEasyEaseMax,\n  normalEase: tokens.curveEasyEase,\n  nullEasing: tokens.curveLinear,\n};\n\nconst 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: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n  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    // The ::before element is the ring when active\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n    '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n    '::before': { color: tokens.colorPaletteCranberryBorderActive },\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n    '::before': { color: tokens.colorPaletteRedBorderActive },\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n    '::before': { color: tokens.colorPalettePumpkinBorderActive },\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n    '::before': { color: tokens.colorPalettePeachBorderActive },\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n    '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n    '::before': { color: tokens.colorPaletteGoldBorderActive },\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n    '::before': { color: tokens.colorPaletteBrassBorderActive },\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n    '::before': { color: tokens.colorPaletteBrownBorderActive },\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n    '::before': { color: tokens.colorPaletteForestBorderActive },\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n    '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n    '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n    '::before': { color: tokens.colorPaletteLightTealBorderActive },\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n    '::before': { color: tokens.colorPaletteTealBorderActive },\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n    '::before': { color: tokens.colorPaletteSteelBorderActive },\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n    '::before': { color: tokens.colorPaletteBlueBorderActive },\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n    '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n    '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n    '::before': { color: tokens.colorPaletteNavyBorderActive },\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n    '::before': { color: tokens.colorPaletteLavenderBorderActive },\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n    '::before': { color: tokens.colorPalettePurpleBorderActive },\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n    '::before': { color: tokens.colorPaletteGrapeBorderActive },\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n    '::before': { color: tokens.colorPaletteLilacBorderActive },\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n    '::before': { color: tokens.colorPalettePinkBorderActive },\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n    '::before': { color: tokens.colorPaletteMagentaBorderActive },\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n    '::before': { color: tokens.colorPalettePlumBorderActive },\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n    '::before': { color: tokens.colorPaletteBeigeBorderActive },\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n    '::before': { color: tokens.colorPaletteMinkBorderActive },\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n    '::before': { color: tokens.colorPalettePlatinumBorderActive },\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n    '::before': { color: tokens.colorPaletteAnchorBorderActive },\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const 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"]}

package/lib-amd/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,17 @@
+define(["require", "exports", "react", "./renderAvatarGroup", "./useAvatarGroup", "./useAvatarGroupContextValues", "./useAvatarGroupStyles"], function (require, exports, React, renderAvatarGroup_1, useAvatarGroup_1, useAvatarGroupContextValues_1, useAvatarGroupStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AvatarGroup = void 0;
+    /**
+     * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+     * of individual Avatars in a spread, stack, or pie layout.
+     */
+    exports.AvatarGroup = React.forwardRef(function (props, ref) {
+        var state = useAvatarGroup_1.useAvatarGroup_unstable(props, ref);
+        var contextValues = useAvatarGroupContextValues_1.useAvatarGroupContextValues(state);
+        useAvatarGroupStyles_1.useAvatarGroupStyles_unstable(state);
+        return renderAvatarGroup_1.renderAvatarGroup_unstable(state, contextValues);
+    });
+    exports.AvatarGroup.displayName = 'AvatarGroup';
+});
+//# sourceMappingURL=AvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;IAQA;;;OAGG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAClD,IAAM,aAAa,GAAG,yDAA2B,CAAC,KAAK,CAAC,CAAC;QAEzD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","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"]}

package/lib-amd/components/AvatarGroup/AvatarGroup.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=AvatarGroup.types.js.map

package/lib-amd/components/AvatarGroup/AvatarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the AvatarGroupItems should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Size of the AvatarGroupItems.\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"]}

package/lib-amd/components/AvatarGroup/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./AvatarGroup", "./AvatarGroup.types", "./renderAvatarGroup", "./useAvatarGroup", "./useAvatarGroupStyles", "./useAvatarGroupContextValues"], function (require, exports, tslib_1, AvatarGroup_1, AvatarGroup_types_1, renderAvatarGroup_1, useAvatarGroup_1, useAvatarGroupStyles_1, useAvatarGroupContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(AvatarGroup_1, exports);
+    tslib_1.__exportStar(AvatarGroup_types_1, exports);
+    tslib_1.__exportStar(renderAvatarGroup_1, exports);
+    tslib_1.__exportStar(useAvatarGroup_1, exports);
+    tslib_1.__exportStar(useAvatarGroupStyles_1, exports);
+    tslib_1.__exportStar(useAvatarGroupContextValues_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC;IACvC,6DAA8C","sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles';\nexport * from './useAvatarGroupContextValues';\n"]}

package/lib-amd/components/AvatarGroup/renderAvatarGroup.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/AvatarGroupContext"], function (require, exports, tslib_1, React, react_utilities_1, AvatarGroupContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderAvatarGroup_unstable = void 0;
+    /**
+     * Render the final JSX of AvatarGroup
+     */
+    var renderAvatarGroup_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(AvatarGroupContext_1.AvatarGroupProvider, { value: contextValues.avatarGroup },
+            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
+    };
+    exports.renderAvatarGroup_unstable = renderAvatarGroup_unstable;
+});
+//# sourceMappingURL=renderAvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderAvatarGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB,EAAE,aAAuC;QACnG,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,wCAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,WAAW;YACnD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACd,CACvB,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,0BAA0B,8BAQrC","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"]}

package/lib-amd/components/AvatarGroup/useAvatarGroup.js

@@ -0,0 +1,29 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.defaultAvatarGroupSize = exports.useAvatarGroup_unstable = void 0;
+    /**
+     * Create the state required to render AvatarGroup.
+     *
+     * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,
+     * before being passed to renderAvatarGroup_unstable.
+     *
+     * @param props - props from this instance of AvatarGroup
+     * @param ref - reference to root HTMLElement of AvatarGroup
+     */
+    var useAvatarGroup_unstable = function (props, ref) {
+        var _a = props.layout, layout = _a === void 0 ? 'spread' : _a, _b = props.size, size = _b === void 0 ? exports.defaultAvatarGroupSize : _b;
+        var root = react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ role: 'group' }, props), { ref: ref }), ['size']);
+        return {
+            layout: layout,
+            size: size,
+            components: {
+                root: 'div',
+            },
+            root: root,
+        };
+    };
+    exports.useAvatarGroup_unstable = useAvatarGroup_unstable;
+    exports.defaultAvatarGroupSize = 32;
+});
+//# sourceMappingURL=useAvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAClF,IAAA,KAAqD,KAAK,OAAzC,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EAAE,KAAkC,KAAK,KAAV,EAA7B,IAAI,mBAAG,8BAAsB,KAAA,CAAW;QAEnE,IAAM,IAAI,GAAG,uCAAqB,CAChC,KAAK,sCAEH,IAAI,EAAE,OAAO,IACV,KAAK,KACR,GAAG,KAAA,KAEL,CAAC,MAAM,CAAC,CACT,CAAC;QAEF,OAAO;YACL,MAAM,QAAA;YACN,IAAI,MAAA;YACJ,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,MAAA;SACL,CAAC;IACJ,CAAC,CAAC;IArBW,QAAA,uBAAuB,2BAqBlC;IAEW,QAAA,sBAAsB,GAAG,EAAE,CAAC","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"]}

package/lib-amd/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -0,0 +1,15 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarGroupContextValues = void 0;
+    var useAvatarGroupContextValues = function (state) {
+        var layout = state.layout, size = state.size;
+        var avatarGroup = {
+            layout: layout,
+            size: size,
+        };
+        return { avatarGroup: avatarGroup };
+    };
+    exports.useAvatarGroupContextValues = useAvatarGroupContextValues;
+});
+//# sourceMappingURL=useAvatarGroupContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarGroupContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"names":[],"mappings":";;;;IAEO,IAAM,2BAA2B,GAAG,UAAC,KAAuB;QACzD,IAAA,MAAM,GAAW,KAAK,OAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QAE/B,IAAM,WAAW,GAA4B;YAC3C,MAAM,QAAA;YACN,IAAI,MAAA;SACL,CAAC;QAEF,OAAO,EAAE,WAAW,aAAA,EAAE,CAAC;IACzB,CAAC,CAAC;IATW,QAAA,2BAA2B,+BAStC","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"]}

package/lib-amd/components/AvatarGroup/useAvatarGroupStyles.js

@@ -0,0 +1,36 @@
+define(["require", "exports", "@griffel/react", "@fluentui/react-theme", "../Avatar/useAvatarStyles"], function (require, exports, react_1, react_theme_1, useAvatarStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarGroupStyles_unstable = exports.avatarGroupClassNames = void 0;
+    exports.avatarGroupClassNames = {
+        root: 'fui-AvatarGroup',
+    };
+    /**
+     * Styles for the root slot.
+     */
+    var useStyles = react_1.makeStyles({
+        base: {
+            display: 'inline-flex',
+            position: 'relative',
+        },
+        pie: {
+            clipPath: 'circle(50%)',
+            backgroundColor: react_theme_1.tokens.colorTransparentStroke,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'CanvasText',
+            },
+        },
+    });
+    /**
+     * Apply styling to the AvatarGroup slots based on the state
+     */
+    var useAvatarGroupStyles_unstable = function (state) {
+        var layout = state.layout, size = state.size;
+        var styles = useStyles();
+        var sizeStyles = useAvatarStyles_1.useSizeStyles();
+        state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
+        return state;
+    };
+    exports.useAvatarGroupStyles_unstable = useAvatarGroupStyles_unstable;
+});
+//# sourceMappingURL=useAvatarGroupStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarGroupStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;IAMa,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;KACxB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE,UAAU;SACrB;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,aAAa;YACvB,eAAe,EAAE,oBAAM,CAAC,sBAAsB;YAC9C,gCAAgC,EAAE;gBAChC,eAAe,EAAE,YAAY;aAC9B;SACF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QAC3D,IAAA,MAAM,GAAW,KAAK,OAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QAC/B,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,IAAM,UAAU,GAAG,+BAAa,EAAE,CAAC;QAEnC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,6BAAqB,CAAC,IAAI,EAC1B,MAAM,CAAC,IAAI,EACX,MAAM,KAAK,KAAK,IAAI,UAAU,CAAC,IAAI,CAAC,EACpC,MAAM,KAAK,KAAK,IAAI,MAAM,CAAC,GAAG,EAC9B,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,6BAA6B,iCAcxC","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"]}

package/lib-amd/components/AvatarGroupItem/AvatarGroupItem.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderAvatarGroupItem", "./useAvatarGroupItem", "./useAvatarGroupItemStyles"], function (require, exports, React, renderAvatarGroupItem_1, useAvatarGroupItem_1, useAvatarGroupItemStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AvatarGroupItem = void 0;
+    /**
+     * The AvatarGroupItem component represents a single person or entity.
+     * AvatarGroupItem should only be used in an AvatarGroup component.
+     */
+    exports.AvatarGroupItem = React.forwardRef(function (props, ref) {
+        var state = useAvatarGroupItem_1.useAvatarGroupItem_unstable(props, ref);
+        useAvatarGroupItemStyles_1.useAvatarGroupItemStyles_unstable(state);
+        return renderAvatarGroupItem_1.renderAvatarGroupItem_unstable(state);
+    });
+    exports.AvatarGroupItem.displayName = 'AvatarGroupItem';
+});
+//# sourceMappingURL=AvatarGroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACU,QAAA,eAAe,GAA8C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpG,IAAM,KAAK,GAAG,gDAA2B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEtD,4DAAiC,CAAC,KAAK,CAAC,CAAC;QACzC,OAAO,sDAA8B,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","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"]}

package/lib-amd/components/AvatarGroupItem/AvatarGroupItem.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=AvatarGroupItem.types.js.map

package/lib-amd/components/AvatarGroupItem/AvatarGroupItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSizes } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSizes;\n};\n"]}

package/lib-amd/components/AvatarGroupItem/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./AvatarGroupItem", "./AvatarGroupItem.types", "./renderAvatarGroupItem", "./useAvatarGroupItem", "./useAvatarGroupItemStyles"], function (require, exports, tslib_1, AvatarGroupItem_1, AvatarGroupItem_types_1, renderAvatarGroupItem_1, useAvatarGroupItem_1, useAvatarGroupItemStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(AvatarGroupItem_1, exports);
+    tslib_1.__exportStar(AvatarGroupItem_types_1, exports);
+    tslib_1.__exportStar(renderAvatarGroupItem_1, exports);
+    tslib_1.__exportStar(useAvatarGroupItem_1, exports);
+    tslib_1.__exportStar(useAvatarGroupItemStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts"],"names":[],"mappings":";;;IAAA,iDAAkC;IAClC,uDAAwC;IACxC,uDAAwC;IACxC,oDAAqC;IACrC,0DAA2C","sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"]}

package/lib-amd/components/AvatarGroupItem/renderAvatarGroupItem.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderAvatarGroupItem_unstable = void 0;
+    /**
+     * Render the final JSX of AvatarGroupItem
+     */
+    var renderAvatarGroupItem_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.avatar, tslib_1.__assign({}, slotProps.avatar)),
+            state.isOverflowItem && React.createElement(slots.overflowLabel, tslib_1.__assign({}, slotProps.overflowLabel))));
+    };
+    exports.renderAvatarGroupItem_unstable = renderAvatarGroupItem_unstable;
+});
+//# sourceMappingURL=renderAvatarGroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderAvatarGroupItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,8BAA8B,GAAG,UAAC,KAA2B;QAClE,IAAA,KAAuB,0BAAQ,CAAuB,KAAK,CAAC,EAA1D,KAAK,WAAA,EAAE,SAAS,eAA0C,CAAC;QAEnE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;YACrC,KAAK,CAAC,cAAc,IAAI,oBAAC,KAAK,CAAC,aAAa,uBAAK,SAAS,CAAC,aAAa,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,8BAA8B,kCASzC","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"]}

package/lib-amd/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -0,0 +1,58 @@
+define(["require", "exports", "tslib", "../Avatar/Avatar", "../../contexts/AvatarGroupContext", "../AvatarGroup/useAvatarGroup", "@fluentui/react-utilities", "@fluentui/react-context-selector"], function (require, exports, tslib_1, Avatar_1, AvatarGroupContext_1, useAvatarGroup_1, react_utilities_1, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarGroupItem_unstable = void 0;
+    /**
+     * Create the state required to render AvatarGroupItem.
+     *
+     * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+     * before being passed to renderAvatarGroupItem_unstable.
+     *
+     * @param props - props from this instance of AvatarGroupItem
+     * @param ref - reference to root HTMLElement of AvatarGroupItem
+     */
+    var useAvatarGroupItem_unstable = function (props, ref) {
+        var groupIsOverflow = AvatarGroupContext_1.useAvatarGroupContext_unstable(function (ctx) { return ctx.isOverflow; });
+        var groupSize = AvatarGroupContext_1.useAvatarGroupContext_unstable(function (ctx) { return ctx.size; });
+        var layout = AvatarGroupContext_1.useAvatarGroupContext_unstable(function (ctx) { return ctx.layout; });
+        // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+        var style = props.style, className = props.className, avatarSlotProps = tslib_1.__rest(props, ["style", "className"]);
+        var size = groupSize !== null && groupSize !== void 0 ? groupSize : useAvatarGroup_1.defaultAvatarGroupSize;
+        var hasAvatarGroupContext = react_context_selector_1.useHasParentContext(AvatarGroupContext_1.AvatarGroupContext);
+        if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
+            // eslint-disable-next-line no-console
+            console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
+        }
+        return {
+            isOverflowItem: groupIsOverflow,
+            layout: layout,
+            size: size,
+            components: {
+                root: groupIsOverflow ? 'li' : 'div',
+                avatar: Avatar_1.Avatar,
+                overflowLabel: 'span',
+            },
+            root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: {
+                    style: style,
+                    className: className,
+                },
+            }),
+            avatar: react_utilities_1.resolveShorthand(props.avatar, {
+                required: true,
+                defaultProps: tslib_1.__assign({ ref: ref, size: size, color: 'colorful' }, avatarSlotProps),
+            }),
+            overflowLabel: react_utilities_1.resolveShorthand(props.overflowLabel, {
+                required: true,
+                defaultProps: {
+                    // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
+                    'aria-hidden': true,
+                    children: props.name,
+                },
+            }),
+        };
+    };
+    exports.useAvatarGroupItem_unstable = useAvatarGroupItem_unstable;
+});
+//# sourceMappingURL=useAvatarGroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarGroupItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":";;;;IAQA;;;;;;;;OAQG;IACI,IAAM,2BAA2B,GAAG,UACzC,KAA2B,EAC3B,GAA2B;QAE3B,IAAM,eAAe,GAAG,mDAA8B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,UAAU,EAAd,CAAc,CAAC,CAAC;QAC9E,IAAM,SAAS,GAAG,mDAA8B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAR,CAAQ,CAAC,CAAC;QAClE,IAAM,MAAM,GAAG,mDAA8B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,MAAM,EAAV,CAAU,CAAC,CAAC;QACjE,qGAAqG;QAC7F,IAAA,KAAK,GAAoC,KAAK,MAAzC,EAAE,SAAS,GAAyB,KAAK,UAA9B,EAAK,eAAe,kBAAK,KAAK,EAAhD,sBAAwC,CAAF,CAAW;QACvD,IAAM,IAAI,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uCAAsB,CAAC;QACjD,IAAM,qBAAqB,GAAG,4CAAmB,CAAC,uCAAkB,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,CAAC,qBAAqB,EAAE;YACnE,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;SACpF;QAED,OAAO;YACL,cAAc,EAAE,eAAe;YAC/B,MAAM,QAAA;YACN,IAAI,MAAA;YACJ,UAAU,EAAE;gBACV,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACpC,MAAM,EAAE,eAAM;gBACd,aAAa,EAAE,MAAM;aACtB;YACD,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,KAAK,OAAA;oBACL,SAAS,WAAA;iBACV;aACF,CAAC;YACF,MAAM,EAAE,kCAAgB,CAAC,KAAK,CAAC,MAAM,EAAE;gBACrC,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,GAAG,KAAA,EACH,IAAI,MAAA,EACJ,KAAK,EAAE,UAAU,IACd,eAAe,CACnB;aACF,CAAC;YACF,aAAa,EAAE,kCAAgB,CAAC,KAAK,CAAC,aAAa,EAAE;gBACnD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,kGAAkG;oBAClG,aAAa,EAAE,IAAI;oBACnB,QAAQ,EAAE,KAAK,CAAC,IAAI;iBACrB;aACF,CAAC;SACH,CAAC;IACJ,CAAC,CAAC;IAnDW,QAAA,2BAA2B,+BAmDtC","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"]}

package/lib-amd/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -0,0 +1,206 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "../../Avatar"], function (require, exports, tslib_1, react_1, react_theme_1, Avatar_1) {
+    "use strict";
+    var _a, _b, _c;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useGroupChildClassName = exports.useAvatarGroupItemStyles_unstable = exports.avatarGroupItemClassNames = void 0;
+    exports.avatarGroupItemClassNames = {
+        root: 'fui-AvatarGroupItem',
+        avatar: 'fui-AvatarGroupItem__avatar',
+        overflowLabel: 'fui-AvatarGroupItem__overflowLabel',
+    };
+    var avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
+    /**
+     * Styles for the root slot
+     */
+    var useRootStyles = react_1.makeStyles({
+        base: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            flexShrink: 0,
+            position: 'relative',
+        },
+        overflowItem: tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXS, react_theme_1.tokens.spacingHorizontalXS)),
+        nonOverflowItem: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
+    });
+    /**
+     * Styles for the avatar slot
+     */
+    var useAvatarStyles = react_1.makeStyles({
+        nonOverflowItem: {
+            position: 'absolute',
+        },
+        pie: tslib_1.__assign({}, react_1.shorthands.borderRadius(0)),
+    });
+    /**
+     * Styles for the label slot
+     */
+    var useOverflowLabelStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ marginLeft: react_theme_1.tokens.spacingHorizontalS, color: react_theme_1.tokens.colorNeutralForeground1 }, react_theme_1.typographyStyles.body1),
+    });
+    /**
+     * Styles for the stack layout
+     */
+    var useStackStyles = react_1.makeStyles({
+        thick: {
+            boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorNeutralBackground2,
+        },
+        thicker: {
+            boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThicker + " " + react_theme_1.tokens.colorNeutralBackground2,
+        },
+        thickest: {
+            boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThickest + " " + react_theme_1.tokens.colorNeutralBackground2,
+        },
+        xxs: { '&:not(:first-child)': { marginLeft: "calc(-1 * " + react_theme_1.tokens.spacingHorizontalXXS + ")" } },
+        xs: { '&:not(:first-child)': { marginLeft: "calc(-1 * " + react_theme_1.tokens.spacingHorizontalXS + ")" } },
+        s: { '&:not(:first-child)': { marginLeft: "calc(-1 * " + react_theme_1.tokens.spacingHorizontalS + ")" } },
+        l: { '&:not(:first-child)': { marginLeft: "calc(-1 * " + react_theme_1.tokens.spacingHorizontalL + ")" } },
+    });
+    /**
+     * Styles for the spread layout
+     */
+    var useSpreadStyles = react_1.makeStyles({
+        s: { '&:not(:first-child)': { marginLeft: react_theme_1.tokens.spacingHorizontalS } },
+        mNudge: { '&:not(:first-child)': { marginLeft: react_theme_1.tokens.spacingHorizontalMNudge } },
+        m: { '&:not(:first-child)': { marginLeft: react_theme_1.tokens.spacingHorizontalM } },
+        l: { '&:not(:first-child)': { marginLeft: react_theme_1.tokens.spacingHorizontalL } },
+        xl: { '&:not(:first-child)': { marginLeft: react_theme_1.tokens.spacingHorizontalXL } },
+    });
+    /**
+     * Styles for the pie layout
+     */
+    var usePieStyles = react_1.makeStyles({
+        base: {
+            position: 'absolute',
+        },
+        slices: {
+            // Two slices
+            // 1st of 2 items
+            '&:nth-of-type(1):nth-last-of-type(2)': {
+                clipPath: "inset(0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)) 0 25%)",
+                left: '-25%',
+            },
+            // 2nd of 2 items
+            '&:nth-of-type(2):nth-last-of-type(1)': {
+                clipPath: "inset(0 25% 0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)))",
+                left: '25%',
+            },
+            // Three slices
+            // 1st of 3 items
+            '&:nth-of-type(1):nth-last-of-type(3)': {
+                clipPath: "inset(0 calc(25% + (var(" + avatarGroupItemDividerWidthVar + ") / 2)) 0 25%)",
+                left: '-25%',
+            },
+            // 2nd of 3 items
+            '&:nth-of-type(2):nth-last-of-type(2)': {
+                // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.
+                clipPath: "inset(0 0 var(" + avatarGroupItemDividerWidthVar + ") var(" + avatarGroupItemDividerWidthVar + "))",
+                left: '50%',
+                transform: 'scale(0.5)',
+                transformOrigin: '0 0',
+            },
+            // 3rd of 3 items
+            '&:nth-of-type(3):nth-last-of-type(1)': {
+                clipPath: "inset(var(" + avatarGroupItemDividerWidthVar + ") 0 0 var(" + avatarGroupItemDividerWidthVar + "))",
+                left: '50%',
+                top: '50%',
+                transform: 'scale(0.5)',
+                transformOrigin: '0 0',
+            },
+        },
+        thick: (_a = {}, _a[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThick, _a),
+        thicker: (_b = {}, _b[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThicker, _b),
+        thickest: (_c = {}, _c[avatarGroupItemDividerWidthVar] = react_theme_1.tokens.strokeWidthThickest, _c),
+    });
+    /**
+     * Apply styling to the AvatarGroupItem slots based on the state
+     */
+    var useAvatarGroupItemStyles_unstable = function (state) {
+        var isOverflowItem = state.isOverflowItem, layout = state.layout, size = state.size;
+        var avatarStyles = useAvatarStyles();
+        var overflowLabelStyles = useOverflowLabelStyles();
+        var pieStyles = usePieStyles();
+        var rootStyles = useRootStyles();
+        var sizeStyles = Avatar_1.useSizeStyles();
+        var groupChildClassName = exports.useGroupChildClassName(layout, size);
+        var rootClasses = [rootStyles.base];
+        if (!isOverflowItem) {
+            rootClasses.push(rootStyles.nonOverflowItem);
+            rootClasses.push(groupChildClassName);
+            rootClasses.push(sizeStyles[size]);
+            if (layout === 'pie') {
+                rootClasses.push(pieStyles.base);
+                if (size < 56) {
+                    rootClasses.push(pieStyles.thick);
+                }
+                else if (size < 72) {
+                    rootClasses.push(pieStyles.thicker);
+                }
+                else {
+                    rootClasses.push(pieStyles.thickest);
+                }
+                rootClasses.push(pieStyles.slices);
+            }
+        }
+        else {
+            rootClasses.push(rootStyles.overflowItem);
+        }
+        state.root.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.avatarGroupItemClassNames.root], rootClasses), [state.root.className]));
+        state.avatar.className = react_1.mergeClasses(exports.avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
+        if (state.overflowLabel) {
+            state.overflowLabel.className = react_1.mergeClasses(exports.avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
+        }
+        return state;
+    };
+    exports.useAvatarGroupItemStyles_unstable = useAvatarGroupItemStyles_unstable;
+    /**
+     * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
+     * needed for each layout.
+     */
+    var useGroupChildClassName = function (layout, size) {
+        var stackStyles = useStackStyles();
+        var spreadStyles = useSpreadStyles();
+        var layoutClasses = [];
+        if (size) {
+            if (layout === 'stack') {
+                if (size < 56) {
+                    layoutClasses.push(stackStyles.thick);
+                }
+                else if (size < 72) {
+                    layoutClasses.push(stackStyles.thicker);
+                }
+                else {
+                    layoutClasses.push(stackStyles.thickest);
+                }
+                if (size < 24) {
+                    layoutClasses.push(stackStyles.xxs);
+                }
+                else if (size < 48) {
+                    layoutClasses.push(stackStyles.xs);
+                }
+                else if (size < 96) {
+                    layoutClasses.push(stackStyles.s);
+                }
+                else {
+                    layoutClasses.push(stackStyles.l);
+                }
+            }
+            else if (layout === 'spread') {
+                if (size < 20) {
+                    layoutClasses.push(spreadStyles.s);
+                }
+                else if (size < 32) {
+                    layoutClasses.push(spreadStyles.mNudge);
+                }
+                else if (size < 64) {
+                    layoutClasses.push(spreadStyles.l);
+                }
+                else {
+                    layoutClasses.push(spreadStyles.xl);
+                }
+            }
+        }
+        return react_1.mergeClasses.apply(void 0, layoutClasses);
+    };
+    exports.useGroupChildClassName = useGroupChildClassName;
+});
+//# sourceMappingURL=useAvatarGroupItemStyles.js.map