npm - @fluentui/react-avatar - Versions diffs - 9.8.7 → 9.9.1 - Mend

@fluentui/react-avatar 9.8.7 → 9.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/lib/components/Avatar/useAvatarStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n const contextValues = useAvatarGroupContextValues(state);\n\n useAvatarGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);\n\n return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHook_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;","~~mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,gCAAgC;AAI9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAC7C,MAAME,gBAAgBR,4BAA4BO;IAElDL,8BAA8BK;IAE9BN,4BAA4B,iCAAiCM;IAE7D,OAAOT,2BAA2BS,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n const contextValues = useAvatarGroupContextValues(state);\n\n useAvatarGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);\n\n return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHook_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,gCAAgC;AAI9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAC7C,MAAME,gBAAgBR,4BAA4BO;IAElDL,8BAA8BK;IAE9BN,4BAA4B,iCAAiCM;IAE7D,OAAOT,2BAA2BS,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/AvatarGroup/AvatarGroup.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.types.ts"],"sourcesContent":["import type { AvatarSize } 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?: AvatarSize;\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"],"names":[],"~~rangeMappings":"","~~mappings":"AAiCA,WAEE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.types.ts"],"sourcesContent":["import type { AvatarSize } 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?: AvatarSize;\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"],"names":[],"mappings":"AAiCA,WAEE"}

package/lib/components/AvatarGroup/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/index.ts"],"sourcesContent":["export { AvatarGroup } from './AvatarGroup';\nexport type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './AvatarGroup.types';\nexport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nexport { defaultAvatarGroupSize, useAvatarGroup_unstable } from './useAvatarGroup';\nexport { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nexport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\n"],"names":["AvatarGroup","renderAvatarGroup_unstable","defaultAvatarGroupSize","useAvatarGroup_unstable","avatarGroupClassNames","useAvatarGroupStyles_unstable","useAvatarGroupContextValues"],"~~rangeMappings":";;;;","~~mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,sBAAsB,EAAEC,uBAAuB,QAAQ,mBAAmB;AACnF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC;AACrG,SAASC,2BAA2B,QAAQ,gCAAgC"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/index.ts"],"sourcesContent":["export { AvatarGroup } from './AvatarGroup';\nexport type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './AvatarGroup.types';\nexport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nexport { defaultAvatarGroupSize, useAvatarGroup_unstable } from './useAvatarGroup';\nexport { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nexport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\n"],"names":["AvatarGroup","renderAvatarGroup_unstable","defaultAvatarGroupSize","useAvatarGroup_unstable","avatarGroupClassNames","useAvatarGroupStyles_unstable","useAvatarGroupContextValues"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,sBAAsB,EAAEC,uBAAuB,QAAQ,mBAAmB;AACnF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC;AACrG,SAASC,2BAA2B,QAAQ,gCAAgC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"~~rangeMappings":";;;;;;;;;;;","~~mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC;IAClEJ,YAA8BG;IAE9B,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC;IAClEJ,YAA8BG;IAE9B,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n ['size'],\n ),\n { elementType: 'div' },\n );\n return { layout, size, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","always","role","elementType","components"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,SAAS,QAAQ,EAAEC,OAAOC,sBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,KAAKQ,MAAM,CACtBT,yBACE,OACA;QACEU,MAAM;QACN,GAAGP,KAAK;QACR,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FC,KAAKA;IACP,GACA;QAAC;KAAO,GAEV;QAAEO,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAQC;QAAMM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC3D,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n ['size'],\n ),\n { elementType: 'div' },\n );\n return { layout, size, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","always","role","elementType","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,SAAS,QAAQ,EAAEC,OAAOC,sBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,KAAKQ,MAAM,CACtBT,yBACE,OACA;QACEU,MAAM;QACN,GAAGP,KAAK;QACR,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FC,KAAKA;IACP,GACA;QAAC;KAAO,GAEV;QAAEO,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAQC;QAAMM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC3D,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n const { layout, size } = state;\n\n const avatarGroup: AvatarGroupContextValue = {\n layout,\n size,\n };\n\n return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"~~rangeMappings":";;;;;;;;;","~~mappings":"AAEA,OAAO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n const { layout, size } = state;\n\n const avatarGroup: AvatarGroupContextValue = {\n layout,\n size,\n };\n\n return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"mappings":"AAEA,OAAO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
+export const avatarGroupClassNames = {
+    root: 'fui-AvatarGroup'
+};
+/**
+ * Styles for the root slot.
+ */ const useStyles = makeStyles({
+    base: {
+        display: 'inline-flex',
+        position: 'relative'
+    },
+    pie: {
+        clipPath: 'circle(50%)',
+        backgroundColor: tokens.colorTransparentStroke,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'CanvasText'
+        }
+    }
+});
+/**
+ * Apply styling to the AvatarGroup slots based on the state
+ */ export const useAvatarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const { layout, size } = state;
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
+    return state;
+};

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\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 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,aAAa,QAAQ,mCAAmC;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,OAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,aAAahB;IAEnBY,MAAMV,IAAI,CAACe,SAAS,GAAGnB,aACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;","~~mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } 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: AvatarSize;\n};\n"],"names":[],"~~rangeMappings":";;","~~mappings":"AAwBA;;CAEC,GACD,WAUE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } 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: AvatarSize;\n};\n"],"names":[],"mappings":"AAwBA;;CAEC,GACD,WAUE"}

package/lib/components/AvatarGroupItem/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export { AvatarGroupItem } from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nexport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nexport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nexport {\n avatarGroupItemClassNames,\n useAvatarGroupItemStyles_unstable,\n useGroupChildClassName,\n} from './useAvatarGroupItemStyles.styles';\n"],"names":["AvatarGroupItem","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","avatarGroupItemClassNames","useAvatarGroupItemStyles_unstable","useGroupChildClassName"],"~~rangeMappings":";;;","~~mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SACEC,yBAAyB,EACzBC,iCAAiC,EACjCC,sBAAsB,QACjB,oCAAoC"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export { AvatarGroupItem } from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nexport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nexport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nexport {\n avatarGroupItemClassNames,\n useAvatarGroupItemStyles_unstable,\n useGroupChildClassName,\n} from './useAvatarGroupItemStyles.styles';\n"],"names":["AvatarGroupItem","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","avatarGroupItemClassNames","useAvatarGroupItemStyles_unstable","useGroupChildClassName"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SACEC,yBAAyB,EACzBC,iCAAiC,EACjCC,sBAAsB,QACjB,oCAAoC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } 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 assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"~~rangeMappings":";;;;;;;;;;;;","~~mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;YACZF,MAAMG,cAAc,kBAAI,KAACH,MAAMI,aAAa;;;AAGnD,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } 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 assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;YACZF,MAAMG,cAAc,kBAAI,KAACH,MAAMI,aAAa;;;AAGnD,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } 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: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n elementType: Avatar,\n }),\n overflowLabel: slot.always(props.overflowLabel, {\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 elementType: 'span',\n }),\n };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,KAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,KAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B;QACf;QACA4B,eAAexB,KAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } 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: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n elementType: Avatar,\n }),\n overflowLabel: slot.always(props.overflowLabel, {\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 elementType: 'span',\n }),\n };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,KAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,KAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B;QACf;QACA4B,eAAexB,KAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,266 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useSizeStyles } from '../../Avatar';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+export const avatarGroupItemClassNames = {
+    root: 'fui-AvatarGroupItem',
+    avatar: 'fui-AvatarGroupItem__avatar',
+    overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
+};
+const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeStyles({
+    base: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        flexShrink: 0,
+        position: 'relative'
+    },
+    overflowItem: {
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`
+    },
+    nonOverflowItem: {
+        borderRadius: tokens.borderRadiusCircular
+    }
+});
+/**
+ * Styles for the avatar slot
+ */ const useAvatarStyles = makeStyles({
+    nonOverflowItem: {
+        position: 'absolute'
+    },
+    pie: {
+        borderRadius: '0'
+    }
+});
+/**
+ * Styles for the label slot
+ */ const useOverflowLabelStyles = makeStyles({
+    base: {
+        marginLeft: tokens.spacingHorizontalS,
+        color: tokens.colorNeutralForeground1,
+        ...typographyStyles.body1
+    }
+});
+/**
+ * Styles for the stack layout
+ */ const useStackStyles = makeStyles({
+    thick: {
+        boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`
+    },
+    thicker: {
+        boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`
+    },
+    thickest: {
+        boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`
+    },
+    xxs: {
+        '&:not(:first-child)': {
+            marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})`
+        }
+    },
+    xs: {
+        '&:not(:first-child)': {
+            marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`
+        }
+    },
+    s: {
+        '&:not(:first-child)': {
+            marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`
+        }
+    },
+    l: {
+        '&:not(:first-child)': {
+            marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`
+        }
+    }
+});
+/**
+ * Styles for the spread layout
+ */ const useSpreadStyles = makeStyles({
+    s: {
+        '&:not(:first-child)': {
+            marginLeft: tokens.spacingHorizontalS
+        }
+    },
+    mNudge: {
+        '&:not(:first-child)': {
+            marginLeft: tokens.spacingHorizontalMNudge
+        }
+    },
+    m: {
+        '&:not(:first-child)': {
+            marginLeft: tokens.spacingHorizontalM
+        }
+    },
+    l: {
+        '&:not(:first-child)': {
+            marginLeft: tokens.spacingHorizontalL
+        }
+    },
+    xl: {
+        '&:not(:first-child)': {
+            marginLeft: tokens.spacingHorizontalXL
+        }
+    }
+});
+/**
+ * Styles for the pie layout
+ */ const usePieStyles = 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'
+        }
+    },
+    rtlSlices: {
+        // Two slices
+        // 1st of 2 items
+        '&:nth-of-type(1):nth-last-of-type(2)': {
+            clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
+        },
+        // 2nd of 2 items
+        '&:nth-of-type(2):nth-last-of-type(1)': {
+            clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`
+        },
+        // Three slices
+        // 1st of 3 items
+        '&:nth-of-type(1):nth-last-of-type(3)': {
+            clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
+        },
+        // 2nd of 3 items
+        '&:nth-of-type(2):nth-last-of-type(2)': {
+            clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,
+            left: '0'
+        },
+        // 3rd of 3 items
+        '&:nth-of-type(3):nth-last-of-type(1)': {
+            clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,
+            left: '0'
+        }
+    },
+    thick: {
+        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick
+    },
+    thicker: {
+        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker
+    },
+    thickest: {
+        [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest
+    }
+});
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */ export const useAvatarGroupItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { isOverflowItem, layout, size } = state;
+    const { dir } = useFluent();
+    const avatarStyles = useAvatarStyles();
+    const overflowLabelStyles = useOverflowLabelStyles();
+    const pieStyles = usePieStyles();
+    const rootStyles = useRootStyles();
+    const sizeStyles = useSizeStyles();
+    const groupChildClassName = useGroupChildClassName(layout, size);
+    const 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);
+            if (dir === 'rtl') {
+                rootClasses.push(pieStyles.rtlSlices);
+            }
+        }
+    } else {
+        rootClasses.push(rootStyles.overflowItem);
+    }
+    state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
+    state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
+    if (state.overflowLabel) {
+        state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
+    }
+    return state;
+};
+/**
+ * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
+ * needed for each layout.
+ */ export const useGroupChildClassName = (layout, size)=>{
+    const stackStyles = useStackStyles();
+    const spreadStyles = useSpreadStyles();
+    const 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 mergeClasses(...layoutClasses);
+};

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\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_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;","~~mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\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_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /*\n Button that triggers the Popover.\n /\n triggerButton: NonNullable<Slot<'button'>>;\n\n /\n List that contains the overflowed AvatarGroupItems.\n /\n content: NonNullable<Slot<'ul'>>;\n\n /\n PopoverSurface that contains the content.\n /\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /\n Tooltip shown when triggerButton is hovered.\n /\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/\n AvatarGroupPopover Props\n /\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /\n Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n /\n indicator?: 'count' \| 'icon';\n\n /\n Number of AvatarGroupItems that will be rendered.\n \n Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n /\n count?: number;\n\n children: React.ReactNode;\n};\n\n/\n State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' \| 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":["React"],"~~rangeMappings":"","~~mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /*\n Button that triggers the Popover.\n /\n triggerButton: NonNullable<Slot<'button'>>;\n\n /\n List that contains the overflowed AvatarGroupItems.\n /\n content: NonNullable<Slot<'ul'>>;\n\n /\n PopoverSurface that contains the content.\n /\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /\n Tooltip shown when triggerButton is hovered.\n /\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/\n AvatarGroupPopover Props\n /\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /\n Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n /\n indicator?: 'count' \| 'icon';\n\n /\n Number of AvatarGroupItems that will be rendered.\n \n Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n /\n count?: number;\n\n children: React.ReactNode;\n};\n\n/\n State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' \| 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/AvatarGroupPopover/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"~~rangeMappings":";;;;","~~mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAM1D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SACEC,4BAA4B,EAC5BC,oCAAoC,QAC/B,uCAAuC;AAC9C,SAASC,2CAA2C,QAAQ,uCAAuC"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAM1D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SACEC,4BAA4B,EAC5BC,oCAAoC,QAC/B,uCAAuC;AAC9C,SAASC,2CAA2C,QAAQ,uCAAuC"}