npm - @fluentui/react-avatar - Versions diffs - 9.5.4 → 9.5.5 - Mend

@fluentui/react-avatar 9.5.4 → 9.5.5

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 (147) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","_ref","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","createElement","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sources":["../../../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { shape: contextShape, size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = contextShape ?? 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: / ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true \| undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image \|\| imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' \|\| active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"mappings":"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"}
1	+ {"version":3,"sources":["useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { shape: contextShape, size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = contextShape ?? 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: / ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true \| undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image \|\| imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' \|\| active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","span","components","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","__resetStyles","__styles","mergeClasses","shorthands","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","useImageClassName","useIconInitialsClassName","badgeMask","margin","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Hwfdqs","ring","Ftih45","ringBadgeCutout","f4a502","ringThick","of393c","ringThicker","ringThickest","shadow","Bsft5z2","shadow4","Be6vj1x","shadow8","shadow16","shadow28","inactive","abs64n","Bucmhp4","b2tv09","Bfgortx","Bnvr3x9","b6ubon","Bqinb2h","qhf8xq","B5kzvoi","j35jbq","badgeCutout","btxmck","Dnlfbu","tiny","Bdjeniz","niu6jh","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useRingColorStyles","Bic5iru","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"sources":["../../../src/components/Avatar/useAvatarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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: {\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 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 ...shorthands.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 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"],"mappings":"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"}
1	+ {"version":3,"names":["tokens","__resetStyles","__styles","mergeClasses","shorthands","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","useImageClassName","useIconInitialsClassName","badgeMask","margin","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Hwfdqs","ring","Ftih45","ringBadgeCutout","f4a502","ringThick","of393c","ringThicker","ringThickest","shadow","Bsft5z2","shadow4","Be6vj1x","shadow8","shadow16","shadow28","inactive","abs64n","Bucmhp4","b2tv09","Bfgortx","Bnvr3x9","b6ubon","Bqinb2h","qhf8xq","B5kzvoi","j35jbq","badgeCutout","btxmck","Dnlfbu","tiny","Bdjeniz","niu6jh","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useRingColorStyles","Bic5iru","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"sources":["useAvatarStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const avatarClassNames = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge'\n};\n// CSS variables used internally in Avatar's styles\nconst vars = {\n badgeRadius: '--fui-Avatar-badgeRadius',\n badgeGap: '--fui-Avatar-badgeGap',\n badgeAlign: '--fui-Avatar-badgeAlign',\n ringWidth: '--fui-Avatar-ringWidth'\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n // ::before is the ring, and ::after is the shadow.\n // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n '::before,::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n zIndex: -1,\n margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n borderRadius: 'inherit',\n transitionProperty: 'margin, opacity',\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n },\n '::before': {\n borderStyle: 'solid',\n borderWidth: `var(${vars.ringWidth})`\n }\n});\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top'\n});\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit'\n});\n/*\n Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n \n Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n / const badgeMask = (margin)=>{\n // Center the cutout at the badge's radius away from the edge.\n // The ring (::before) also has a 2 ringWidth margin that also needs to be offset.\n const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;\n};\nconst useStyles = makeStyles({\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100\n },\n textCaption1Strong: {\n fontSize: tokens.fontSizeBase200\n },\n textSubtitle2: {\n fontSize: tokens.fontSizeBase400\n },\n textSubtitle1: {\n fontSize: tokens.fontSizeBase500\n },\n textTitle3: {\n fontSize: tokens.fontSizeBase600\n },\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall)\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge)\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge)\n },\n activeOrInactive: {\n transform: 'perspective(1px)',\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n },\n ring: {\n // Show the ::before pseudo-element, which is the ring\n '::before': {\n content: '\"\"'\n }\n },\n ringBadgeCutout: {\n '::before': {\n maskImage: badgeMask(/margin =/ `2 * var(${vars.ringWidth})`)\n }\n },\n ringThick: {\n [vars.ringWidth]: tokens.strokeWidthThick\n },\n ringThicker: {\n [vars.ringWidth]: tokens.strokeWidthThicker\n },\n ringThickest: {\n [vars.ringWidth]: tokens.strokeWidthThickest\n },\n shadow: {\n // Show the ::after pseudo-element, which is the shadow\n '::after': {\n content: '\"\"'\n }\n },\n shadow4: {\n '::after': {\n boxShadow: tokens.shadow4\n }\n },\n shadow8: {\n '::after': {\n boxShadow: tokens.shadow8\n }\n },\n shadow16: {\n '::after': {\n boxShadow: tokens.shadow16\n }\n },\n shadow28: {\n '::after': {\n boxShadow: tokens.shadow28\n }\n },\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n '::before,::after': {\n ...shorthands.margin(0),\n opacity: 0,\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`\n }\n },\n // Applied to the badge slot\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0\n },\n // Applied to the image, initials, or icon slot when there is a badge\n badgeCutout: {\n maskImage: badgeMask()\n },\n // Applied to the root when there is a badge\n badgeAlign: {\n // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n // so split it out into a css variable that will auto-flip.\n [vars.badgeAlign]: 'right'\n },\n // Badge size: applied to root when there is a badge\n tiny: {\n [vars.badgeRadius]: '3px',\n [vars.badgeGap]: tokens.strokeWidthThin\n },\n 'extra-small': {\n [vars.badgeRadius]: '5px',\n [vars.badgeGap]: tokens.strokeWidthThin\n },\n small: {\n [vars.badgeRadius]: '6px',\n [vars.badgeGap]: tokens.strokeWidthThin\n },\n medium: {\n [vars.badgeRadius]: '8px',\n [vars.badgeGap]: tokens.strokeWidthThin\n },\n large: {\n [vars.badgeRadius]: '10px',\n [vars.badgeGap]: tokens.strokeWidthThick\n },\n 'extra-large': {\n [vars.badgeRadius]: '14px',\n [vars.badgeGap]: tokens.strokeWidthThick\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n }\n});\nexport const useSizeStyles = makeStyles({\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2\n }\n});\nconst useRingColorStyles = makeStyles({\n neutral: {\n '::before': {\n color: tokens.colorBrandStroke1\n }\n },\n brand: {\n '::before': {\n color: tokens.colorBrandStroke1\n }\n },\n 'dark-red': {\n '::before': {\n color: tokens.colorPaletteDarkRedBorderActive\n }\n },\n cranberry: {\n '::before': {\n color: tokens.colorPaletteCranberryBorderActive\n }\n },\n red: {\n '::before': {\n color: tokens.colorPaletteRedBorderActive\n }\n },\n pumpkin: {\n '::before': {\n color: tokens.colorPalettePumpkinBorderActive\n }\n },\n peach: {\n '::before': {\n color: tokens.colorPalettePeachBorderActive\n }\n },\n marigold: {\n '::before': {\n color: tokens.colorPaletteMarigoldBorderActive\n }\n },\n gold: {\n '::before': {\n color: tokens.colorPaletteGoldBorderActive\n }\n },\n brass: {\n '::before': {\n color: tokens.colorPaletteBrassBorderActive\n }\n },\n brown: {\n '::before': {\n color: tokens.colorPaletteBrownBorderActive\n }\n },\n forest: {\n '::before': {\n color: tokens.colorPaletteForestBorderActive\n }\n },\n seafoam: {\n '::before': {\n color: tokens.colorPaletteSeafoamBorderActive\n }\n },\n 'dark-green': {\n '::before': {\n color: tokens.colorPaletteDarkGreenBorderActive\n }\n },\n 'light-teal': {\n '::before': {\n color: tokens.colorPaletteLightTealBorderActive\n }\n },\n teal: {\n '::before': {\n color: tokens.colorPaletteTealBorderActive\n }\n },\n steel: {\n '::before': {\n color: tokens.colorPaletteSteelBorderActive\n }\n },\n blue: {\n '::before': {\n color: tokens.colorPaletteBlueBorderActive\n }\n },\n 'royal-blue': {\n '::before': {\n color: tokens.colorPaletteRoyalBlueBorderActive\n }\n },\n cornflower: {\n '::before': {\n color: tokens.colorPaletteCornflowerBorderActive\n }\n },\n navy: {\n '::before': {\n color: tokens.colorPaletteNavyBorderActive\n }\n },\n lavender: {\n '::before': {\n color: tokens.colorPaletteLavenderBorderActive\n }\n },\n purple: {\n '::before': {\n color: tokens.colorPalettePurpleBorderActive\n }\n },\n grape: {\n '::before': {\n color: tokens.colorPaletteGrapeBorderActive\n }\n },\n lilac: {\n '::before': {\n color: tokens.colorPaletteLilacBorderActive\n }\n },\n pink: {\n '::before': {\n color: tokens.colorPalettePinkBorderActive\n }\n },\n magenta: {\n '::before': {\n color: tokens.colorPaletteMagentaBorderActive\n }\n },\n plum: {\n '::before': {\n color: tokens.colorPalettePlumBorderActive\n }\n },\n beige: {\n '::before': {\n color: tokens.colorPaletteBeigeBorderActive\n }\n },\n mink: {\n '::before': {\n color: tokens.colorPaletteMinkBorderActive\n }\n },\n platinum: {\n '::before': {\n color: tokens.colorPalettePlatinumBorderActive\n }\n },\n anchor: {\n '::before': {\n color: tokens.colorPaletteAnchorBorderActive\n }\n }\n});\nexport const useAvatarStyles_unstable = (state)=>{\n const { size , shape , active , activeAppearance , color } = state;\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n const ringColorStyles = useRingColorStyles();\n const rootClasses = [\n rootClassName,\n size !== 32 && sizeStyles[size]\n ];\n if (state.badge) {\n rootClasses.push(styles.badgeAlign, styles[state.badge.size \|\| 'medium']);\n }\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n if (active === 'active' \|\| active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n if (activeAppearance === 'ring' \|\| activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring, ringColorStyles[color]);\n if (state.badge) {\n rootClasses.push(styles.ringBadgeCutout);\n }\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n if (activeAppearance === 'shadow' \|\| activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.shadow);\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n if (state.badge) {\n state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n }\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);\n }\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);\n }\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,mBAAmB;EAC1BC,QAAQ,EAAE,sBAAsB;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,IAAI,GAAG;EACTC,WAAW,EAAE,0BAA0B;EACvCC,QAAQ,EAAE,uBAAuB;EACjCC,UAAU,EAAE,yBAAyB;EACrCC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,gBAAgB,gBAAGf,aAAA,2qDAiCxB,CAAC;AACF,MAAMgB,iBAAiB,gBAAGhB,aAAA,sRASzB,CAAC;AACF,MAAMiB,wBAAwB,gBAAGjB,aAAA,oqCAgBhC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AAAI,MAAMkB,SAAS,GAAIC,MAAM,IAAG;EAC5B;EACA;EACA,MAAMC,YAAY,GAAGD,MAAM,GAAI,YAAWT,IAAI,CAACC,WAAY,OAAMQ,MAAO,GAAE,GAAI,OAAMT,IAAI,CAACC,WAAY,GAAE;EACvG;EACA;EACA,MAAMU,WAAW,GAAI,YAAWX,IAAI,CAACC,WAAY,WAAUD,IAAI,CAACE,QAAS,aAAY;EACrF,MAAMU,WAAW,GAAI,YAAWZ,IAAI,CAACC,WAAY,WAAUD,IAAI,CAACE,QAAS,aAAY;EACrF,OAAQ,oCAAmCQ,YAAa,QAAOV,IAAI,CAACG,UAAW,KAAIO,YAAa,IAAG,GAAI,eAAcC,WAAY,WAAUC,WAAY,GAAE;AAC7J,CAAC;AACD,MAAMC,SAAS,gBAAGtB,QAAA;EAAAuB,kBAAA;IAAAC,OAAA;EAAA;EAAAC,kBAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAF,OAAA;EAAA;EAAAG,aAAA;IAAAH,OAAA;EAAA;EAAAI,UAAA;IAAAJ,OAAA;EAAA;EAAAK,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,WAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,YAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAD,MAAA;EAAA;EAAAE,YAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,QAAA;IAAAF,OAAA;EAAA;EAAAG,QAAA;IAAAH,OAAA;EAAA;EAAAI,QAAA;IAAAC,MAAA;IAAArB,OAAA;IAAAG,OAAA;IAAAmB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAzD,KAAA;IAAA0D,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAC,MAAA;EAAA;EAAA1D,UAAA;IAAA2D,MAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAH,OAAA;IAAAC,MAAA;EAAA;EAAAG,KAAA;IAAAJ,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,OAAA;IAAAC,MAAA;EAAA;EAAAI,MAAA;IAAAtD,OAAA;EAAA;EAAAuD,MAAA;IAAAvD,OAAA;EAAA;EAAAwD,MAAA;IAAAxD,OAAA;EAAA;EAAAyD,MAAA;IAAAzD,OAAA;EAAA;EAAA0D,MAAA;IAAA1D,OAAA;EAAA;EAAA2D,MAAA;IAAA3D,OAAA;EAAA;EAAA4D,MAAA;IAAA5D,OAAA;EAAA;AAAA;EAAA6D,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA2JjB,CAAC;AACF,OAAO,MAAMC,aAAa,gBAAGvF,QAAA;EAAA;IAAAwF,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAyD5B,CAAC;AACF,MAAMK,cAAc,gBAAG1F,QAAA;EAAA2F,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,MAAA;EAAA;EAAAE,SAAA;IAAAH,MAAA;IAAAC,MAAA;EAAA;EAAAG,GAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAL,MAAA;IAAAC,MAAA;EAAA;EAAAK,KAAA;IAAAN,MAAA;IAAAC,MAAA;EAAA;EAAAM,QAAA;IAAAP,MAAA;IAAAC,MAAA;EAAA;EAAAO,IAAA;IAAAR,MAAA;IAAAC,MAAA;EAAA;EAAAQ,KAAA;IAAAT,MAAA;IAAAC,MAAA;EAAA;EAAAS,KAAA;IAAAV,MAAA;IAAAC,MAAA;EAAA;EAAAU,MAAA;IAAAX,MAAA;IAAAC,MAAA;EAAA;EAAAW,OAAA;IAAAZ,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,MAAA;EAAA;EAAAY,IAAA;IAAAb,MAAA;IAAAC,MAAA;EAAA;EAAAa,KAAA;IAAAd,MAAA;IAAAC,MAAA;EAAA;EAAAc,IAAA;IAAAf,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAD,MAAA;IAAAC,MAAA;EAAA;EAAAe,UAAA;IAAAhB,MAAA;IAAAC,MAAA;EAAA;EAAAgB,IAAA;IAAAjB,MAAA;IAAAC,MAAA;EAAA;EAAAiB,QAAA;IAAAlB,MAAA;IAAAC,MAAA;EAAA;EAAAkB,MAAA;IAAAnB,MAAA;IAAAC,MAAA;EAAA;EAAAmB,KAAA;IAAApB,MAAA;IAAAC,MAAA;EAAA;EAAAoB,KAAA;IAAArB,MAAA;IAAAC,MAAA;EAAA;EAAAqB,IAAA;IAAAtB,MAAA;IAAAC,MAAA;EAAA;EAAAsB,OAAA;IAAAvB,MAAA;IAAAC,MAAA;EAAA;EAAAuB,IAAA;IAAAxB,MAAA;IAAAC,MAAA;EAAA;EAAAwB,KAAA;IAAAzB,MAAA;IAAAC,MAAA;EAAA;EAAAyB,IAAA;IAAA1B,MAAA;IAAAC,MAAA;EAAA;EAAA0B,QAAA;IAAA3B,MAAA;IAAAC,MAAA;EAAA;EAAA2B,MAAA;IAAA5B,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAR,CAAA;AAAA,CAiItB,CAAC;AACF,MAAMoC,kBAAkB,gBAAGzH,QAAA;EAAA2F,OAAA;IAAA+B,OAAA;EAAA;EAAA5B,KAAA;IAAA4B,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA3B,SAAA;IAAA2B,OAAA;EAAA;EAAA1B,GAAA;IAAA0B,OAAA;EAAA;EAAAzB,OAAA;IAAAyB,OAAA;EAAA;EAAAxB,KAAA;IAAAwB,OAAA;EAAA;EAAAvB,QAAA;IAAAuB,OAAA;EAAA;EAAAtB,IAAA;IAAAsB,OAAA;EAAA;EAAArB,KAAA;IAAAqB,OAAA;EAAA;EAAApB,KAAA;IAAAoB,OAAA;EAAA;EAAAnB,MAAA;IAAAmB,OAAA;EAAA;EAAAlB,OAAA;IAAAkB,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAAjB,IAAA;IAAAiB,OAAA;EAAA;EAAAhB,KAAA;IAAAgB,OAAA;EAAA;EAAAf,IAAA;IAAAe,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAAd,UAAA;IAAAc,OAAA;EAAA;EAAAb,IAAA;IAAAa,OAAA;EAAA;EAAAZ,QAAA;IAAAY,OAAA;EAAA;EAAAX,MAAA;IAAAW,OAAA;EAAA;EAAAV,KAAA;IAAAU,OAAA;EAAA;EAAAT,KAAA;IAAAS,OAAA;EAAA;EAAAR,IAAA;IAAAQ,OAAA;EAAA;EAAAP,OAAA;IAAAO,OAAA;EAAA;EAAAN,IAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;EAAAH,QAAA;IAAAG,OAAA;EAAA;EAAAF,MAAA;IAAAE,OAAA;EAAA;AAAA;EAAArC,CAAA;AAAA,CAiK1B,CAAC;AACF,OAAO,MAAMsC,wBAAwB,GAAIC,KAAK,IAAG;EAC7C,MAAM;IAAEC,IAAI;IAAGC,KAAK;IAAGC,MAAM;IAAGC,gBAAgB;IAAGC;EAAO,CAAC,GAAGL,KAAK;EACnE,MAAMM,aAAa,GAAGpH,gBAAgB,CAAC,CAAC;EACxC,MAAMqH,cAAc,GAAGpH,iBAAiB,CAAC,CAAC;EAC1C,MAAMqH,qBAAqB,GAAGpH,wBAAwB,CAAC,CAAC;EACxD,MAAMqH,MAAM,GAAG/G,SAAS,CAAC,CAAC;EAC1B,MAAMgH,UAAU,GAAG/C,aAAa,CAAC,CAAC;EAClC,MAAMgD,WAAW,GAAG7C,cAAc,CAAC,CAAC;EACpC,MAAM8C,eAAe,GAAGf,kBAAkB,CAAC,CAAC;EAC5C,MAAMgB,WAAW,GAAG,CAChBP,aAAa,EACbL,IAAI,KAAK,EAAE,IAAIS,UAAU,CAACT,IAAI,CAAC,CAClC;EACD,IAAID,KAAK,CAACpH,KAAK,EAAE;IACbiI,WAAW,CAACC,IAAI,CAACL,MAAM,CAACzH,UAAU,EAAEyH,MAAM,CAACT,KAAK,CAACpH,KAAK,CAACqH,IAAI,IAAI,QAAQ,CAAC,CAAC;EAC7E;EACA,IAAIA,IAAI,IAAI,EAAE,EAAE;IACZY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC9G,kBAAkB,CAAC;EAC/C,CAAC,MAAM,IAAIsG,IAAI,IAAI,EAAE,EAAE;IACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC5G,kBAAkB,CAAC;EAC/C,CAAC,MAAM,IAAIoG,IAAI,IAAI,EAAE,EAAE;IACvB;EAAA,CACC,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC3G,aAAa,CAAC;EAC1C,CAAC,MAAM,IAAImG,IAAI,IAAI,EAAE,EAAE;IACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC1G,aAAa,CAAC;EAC1C,CAAC,MAAM;IACH8G,WAAW,CAACC,IAAI,CAACL,MAAM,CAACzG,UAAU,CAAC;EACvC;EACA,IAAIkG,KAAK,KAAK,QAAQ,EAAE;IACpB,IAAID,IAAI,IAAI,EAAE,EAAE;MACZY,WAAW,CAACC,IAAI,CAACL,MAAM,CAACxG,WAAW,CAAC;IACxC,CAAC,MAAM,IAAIgG,IAAI,IAAI,EAAE,EAAE;MACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAACnG,YAAY,CAAC;IACzC,CAAC,MAAM,IAAI2F,IAAI,IAAI,EAAE,EAAE;MACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAClG,WAAW,CAAC;IACxC,CAAC,MAAM;MACHsG,WAAW,CAACC,IAAI,CAACL,MAAM,CAACjG,YAAY,CAAC;IACzC;EACJ;EACA,IAAI2F,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,UAAU,EAAE;IAC9CU,WAAW,CAACC,IAAI,CAACL,MAAM,CAAChG,gBAAgB,CAAC;IACzC,IAAI2F,gBAAgB,KAAK,MAAM,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACnES,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC1F,IAAI,EAAE6F,eAAe,CAACP,KAAK,CAAC,CAAC;MACrD,IAAIL,KAAK,CAACpH,KAAK,EAAE;QACbiI,WAAW,CAACC,IAAI,CAACL,MAAM,CAACxF,eAAe,CAAC;MAC5C;MACA,IAAIgF,IAAI,IAAI,EAAE,EAAE;QACZY,WAAW,CAACC,IAAI,CAACL,MAAM,CAACtF,SAAS,CAAC;MACtC,CAAC,MAAM,IAAI8E,IAAI,IAAI,EAAE,EAAE;QACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAACpF,WAAW,CAAC;MACxC,CAAC,MAAM;QACHwF,WAAW,CAACC,IAAI,CAACL,MAAM,CAACnF,YAAY,CAAC;MACzC;IACJ;IACA,IAAI8E,gBAAgB,KAAK,QAAQ,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACrES,WAAW,CAACC,IAAI,CAACL,MAAM,CAAClF,MAAM,CAAC;MAC/B,IAAI0E,IAAI,IAAI,EAAE,EAAE;QACZY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAChF,OAAO,CAAC;MACpC,CAAC,MAAM,IAAIwE,IAAI,IAAI,EAAE,EAAE;QACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC9E,OAAO,CAAC;MACpC,CAAC,MAAM,IAAIsE,IAAI,IAAI,EAAE,EAAE;QACnBY,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC7E,QAAQ,CAAC;MACrC,CAAC,MAAM;QACHiF,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC5E,QAAQ,CAAC;MACrC;IACJ;IACA;IACA,IAAIsE,MAAM,KAAK,UAAU,EAAE;MACvBU,WAAW,CAACC,IAAI,CAACL,MAAM,CAAC3E,QAAQ,CAAC;IACrC;EACJ;EACAkE,KAAK,CAACxH,IAAI,CAACuI,SAAS,GAAG1I,YAAY,CAACE,gBAAgB,CAACC,IAAI,EAAE,GAAGqI,WAAW,EAAEb,KAAK,CAACxH,IAAI,CAACuI,SAAS,CAAC;EAChG,IAAIf,KAAK,CAACpH,KAAK,EAAE;IACboH,KAAK,CAACpH,KAAK,CAACmI,SAAS,GAAG1I,YAAY,CAACE,gBAAgB,CAACK,KAAK,EAAE6H,MAAM,CAAC7H,KAAK,EAAEoH,KAAK,CAACpH,KAAK,CAACmI,SAAS,CAAC;EACrG;EACA,IAAIf,KAAK,CAACvH,KAAK,EAAE;IACbuH,KAAK,CAACvH,KAAK,CAACsI,SAAS,GAAG1I,YAAY,CAACE,gBAAgB,CAACE,KAAK,EAAE8H,cAAc,EAAEI,WAAW,CAACN,KAAK,CAAC,EAAEL,KAAK,CAACpH,KAAK,IAAI6H,MAAM,CAAChE,WAAW,EAAEuD,KAAK,CAACvH,KAAK,CAACsI,SAAS,CAAC;EAC9J;EACA,IAAIf,KAAK,CAACtH,QAAQ,EAAE;IAChBsH,KAAK,CAACtH,QAAQ,CAACqI,SAAS,GAAG1I,YAAY,CAACE,gBAAgB,CAACG,QAAQ,EAAE8H,qBAAqB,EAAEG,WAAW,CAACN,KAAK,CAAC,EAAEL,KAAK,CAACpH,KAAK,IAAI6H,MAAM,CAAChE,WAAW,EAAEuD,KAAK,CAACtH,QAAQ,CAACqI,SAAS,CAAC;EAC9K;EACA,IAAIf,KAAK,CAACrH,IAAI,EAAE;IACZ,IAAIqI,aAAa;IACjB,IAAIf,IAAI,IAAI,EAAE,EAAE;MACZe,aAAa,GAAGP,MAAM,CAACvD,MAAM;IACjC,CAAC,MAAM,IAAI+C,IAAI,IAAI,EAAE,EAAE;MACnBe,aAAa,GAAGP,MAAM,CAACtD,MAAM;IACjC,CAAC,MAAM,IAAI8C,IAAI,IAAI,EAAE,EAAE;MACnBe,aAAa,GAAGP,MAAM,CAACrD,MAAM;IACjC,CAAC,MAAM,IAAI6C,IAAI,IAAI,EAAE,EAAE;MACnBe,aAAa,GAAGP,MAAM,CAACpD,MAAM;IACjC,CAAC,MAAM,IAAI4C,IAAI,IAAI,EAAE,EAAE;MACnBe,aAAa,GAAGP,MAAM,CAACnD,MAAM;IACjC,CAAC,MAAM,IAAI2C,IAAI,IAAI,EAAE,EAAE;MACnBe,aAAa,GAAGP,MAAM,CAAClD,MAAM;IACjC,CAAC,MAAM;MACHyD,aAAa,GAAGP,MAAM,CAACjD,MAAM;IACjC;IACAwC,KAAK,CAACrH,IAAI,CAACoI,SAAS,GAAG1I,YAAY,CAACE,gBAAgB,CAACI,IAAI,EAAE6H,qBAAqB,EAAEQ,aAAa,EAAEL,WAAW,CAACN,KAAK,CAAC,EAAEL,KAAK,CAACpH,KAAK,IAAI6H,MAAM,CAAChE,WAAW,EAAEuD,KAAK,CAACrH,IAAI,CAACoI,SAAS,CAAC;EACjL;EACA,OAAOf,KAAK;AAChB,CAAC"}

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

@@ -7,13 +7,11 @@ import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';
 /**
  * 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.
- */
-export const AvatarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAvatarGroup_unstable(props, ref);
-  const contextValues = useAvatarGroupContextValues(state);
-  useAvatarGroupStyles_unstable(state);
-  useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);
-  return renderAvatarGroup_unstable(state, contextValues);
+ */ export const AvatarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatarGroup_unstable(props, ref);
+    const contextValues = useAvatarGroupContextValues(state);
+    useAvatarGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);
+    return renderAvatarGroup_unstable(state, contextValues);
 });
 AvatarGroup.displayName = 'AvatarGroup';
-//# sourceMappingURL=AvatarGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHook_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"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"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,0BAA0B,QAAQ;~~AAC3C~~,SAASC,uBAAuB,QAAQ;~~AACxC~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,6BAA6B,QAAQ;~~AAI9C;;;;AAIA~~,OAAO,MAAMC,~~WAAA~~,~~gBAAqDN~~,~~KAAA,CAAMO,~~UAAU,CAAC,CAACC,~~KAAA~~,~~EAAOC,GAAA,KAAQ~~;~~EACjG~~,MAAMC,~~KAAA~~,~~GAAQR~~,~~uBAAA,CAAwBM,KAAA,EAAOC,GAAA~~;~~EAC7C~~,MAAME,~~aAAA~~,~~GAAgBR,2BAAA,CAA4BO,KAAA~~;~~EAElDL~~,~~6BAAA,CAA8BK,KAAA~~;~~EAE9BN~~,~~2BAAA~~,~~CAA4B,~~iCAAiCM~~,KAAA~~;~~EAE7D~~,OAAOT,~~0BAAA~~,~~CAA2BS,KAAA,EAAOC,aAAA~~;AAC3C;~~AAEAL~~,~~WAAA~~,~~CAAYM,~~WAAW,GAAG"}
1	+ {"version":3,"sources":["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,MAAQ;IACjG,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 CHANGED Viewed

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=AvatarGroup.types.js.map
+export { };

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~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"],"mappings":"AAAA"}
1	+ {"version":3,"sources":["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":"AAAA,WAmCE"}

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

@@ -4,4 +4,3 @@ export * from './renderAvatarGroup';
 export * from './useAvatarGroup';
 export * from './useAvatarGroupStyles.styles';
 export * from './useAvatarGroupContextValues';
-//# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/AvatarGroup/~~index.ts"],"sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles.styles';\nexport * from './useAvatarGroupContextValues';\n"],"mappings":"AAAA,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AvatarGroup';\nexport * from './AvatarGroup.types';\nexport * from './renderAvatarGroup';\nexport * from './useAvatarGroup';\nexport * from './useAvatarGroupStyles.styles';\nexport * from './useAvatarGroupContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":["createElement","getSlotsNext","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"~~sources":["~~../../../src/components/AvatarGroup/~~renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n const { slots, slotProps } = getSlotsNext<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.root {...slotProps.root} />\n </AvatarGroupProvider>\n );\n};\n"],"mappings":"AAAA,~~2BACA~~,~~yBAEA~~,SAASA,aAAa,QAAQ;~~AAE9B~~,SAASC,YAAY,QAAQ;~~AAC7B~~,SAASC,mBAAmB,QAAQ;~~AAGpC;;;AAGA~~,OAAO,MAAMC,~~0BAAA~~,~~GAA6BA,~~CAACC,~~KAAA~~,~~EAAyBC,aAAA,KAA4C~~;~~EAC9G~~,MAAM~~;IAAEC~~,~~KAAA;IAAOC;EAAS~~,~~CAAE~~,GAAGN,~~YAAA,CAA~~+BG~~,KAAA~~;~~EAE5D~~,~~oBACEJ~~,~~aAfJ~~,~~CAeKE,mBAAA~~;~~IAAoBM~~,~~KAAA~~,~~EAAOH~~,~~aAAA,CAAcI~~;~~kBACxCT~~,~~aAhBN~~,~~CAgBOM~~,~~KAAA~~,~~CAAMI,~~IAAI,EAAKH,~~SAAA~~,~~CAAUG,~~IAAI;AAGpC"}
1	+ {"version":3,"sources":["renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n const { slots, slotProps } = getSlotsNext<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.root {...slotProps.root} />\n </AvatarGroupProvider>\n );\n};\n"],"names":["createElement","getSlotsNext","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","slots","slotProps","value","avatarGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC,gBAA4C;IAC9G,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA+BG;IAE5D,qBACE,AAfJ,cAeKF;QAAoBM,OAAOH,cAAcI,WAAW;qBACnD,AAhBN,cAgBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}

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

@@ -8,25 +8,22 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  *
  * @param props - props from this instance of AvatarGroup
  * @param ref - reference to root HTMLElement of AvatarGroup
- */
-export const useAvatarGroup_unstable = (props, ref) => {
-  const {
-    layout = 'spread',
-    size = defaultAvatarGroupSize
-  } = props;
-  const root = getNativeElementProps('div', {
-    role: 'group',
-    ...props,
-    ref
-  }, ['size']);
-  return {
-    layout,
-    size,
-    components: {
-      root: 'div'
-    },
-    root
-  };
+ */ export const useAvatarGroup_unstable = (props, ref)=>{
+    const { layout ='spread' , size =defaultAvatarGroupSize  } = props;
+    const root = getNativeElementProps('div', {
+        role: 'group',
+        ...props,
+        ref
+    }, [
+        'size'
+    ]);
+    return {
+        layout,
+        size,
+        components: {
+            root: 'div'
+        },
+        root
+    };
 };
 export const defaultAvatarGroupSize = 32;
-//# sourceMappingURL=useAvatarGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"~~sources":["~~../../../src/components/AvatarGroup/~~useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n },\n ['size'],\n );\n\n return {\n layout,\n size,\n components: {\n root: 'div',\n },\n root,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,qBAAqB,QAAQ;~~AAGtC;;;;;;;;;AASA~~,OAAO,MAAMC,~~uBAAA~~,~~GAA0BA,~~CAACC,~~KAAA~~,~~EAAyBC,GAAA,KAAkD~~;~~EACjH~~,MAAM~~;IAAEC~~,~~MAAA~~,~~GAAS;IAAUC~~,~~IAAA~~,~~GAAOC;EAAsB~~,~~CAAE~~,GAAGJ~~,KAAA~~;~~EAE7D~~,MAAMK,~~IAAA~~,~~GAAOP~~,~~qBAAA,CACX,~~OACA;~~IACEQ~~,~~IAAA,EAAM~~;~~IACN~~,GAAGN,KAAK;~~IACRC~~;~~EACF~~,GACA~~,CAAC,OAAO~~;~~EAGV~~,OAAO;~~IACLC,MAAA~~;~~IACAC,IAAA~~;~~IACAI~~,~~UAAA,EAAY~~;~~MACVF~~,~~IAAA,EAAM~~;~~IACR~~;~~IACAA~~;~~EACF~~;AACF;~~AAEA~~,OAAO,MAAMD,~~sBAAA~~,~~GAAyB~~"}
1	+ {"version":3,"sources":["useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n },\n ['size'],\n );\n\n return {\n layout,\n size,\n components: {\n root: 'div',\n },\n root,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,QAAS,SAAQ,EAAEC,MAAOC,uBAAsB,EAAE,GAAGJ;IAE7D,MAAMK,OAAOP,sBACX,OACA;QACEQ,MAAM;QACN,GAAGN,KAAK;QACRC;IACF,GACA;QAAC;KAAO;IAGV,OAAO;QACLC;QACAC;QACAI,YAAY;YACVF,MAAM;QACR;QACAA;IACF;AACF,EAAE;AAEF,OAAO,MAAMD,yBAAyB,GAAG"}

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

@@ -1,14 +1,10 @@
-export const useAvatarGroupContextValues = state => {
-  const {
-    layout,
-    size
-  } = state;
-  const avatarGroup = {
-    layout,
-    size
-  };
-  return {
-    avatarGroup
-  };
+export const useAvatarGroupContextValues = (state)=>{
+    const { layout , size  } = state;
+    const avatarGroup = {
+        layout,
+        size
+    };
+    return {
+        avatarGroup
+    };
 };
-//# sourceMappingURL=useAvatarGroupContextValues.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"~~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"],"mappings":"AAEA,OAAO,MAAMA,~~2BAAA~~,~~GAA+BC~~,~~KAAA,IAAsD~~;~~EAChG~~,MAAM~~;IAAEC~~,~~MAAA;IAAQC;EAAI~~,~~CAAE~~,GAAGF~~,KAAA~~;~~EAEzB~~,MAAMG,~~WAAA,GAAuC~~;~~IAC3CF,MAAA~~;~~IACAC~~;~~EACF~~;~~EAEA~~,OAAO;~~IAAEC~~;~~EAAY~~;AACvB"}
1	+ {"version":3,"sources":["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,QAAsD;IAChG,MAAM,EAAEC,OAAM,EAAEC,KAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["~~../../../src/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 const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root~~,\n~~ styles.base~~,\n~~ layout === 'pie' && sizeStyles[size]~~,\n~~ layout === 'pie' && styles.pie~~,\n~~ state.root.className~~,\n~~ );\n\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;~~AACzC~~,SAASC,MAAM,QAAQ;~~AACvB~~,SAASC,aAAa,QAAQ;~~AAI9B~~,OAAO,MAAMC,~~qBAAA~~,~~GAA0D~~;~~EACrEC~~,~~IAAA~~,~~EAAM~~;~~AACR~~;~~AAEA;;;AAGA~~,MAAMC,~~SAAA~~,~~gBAAYN~~,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,~~EAYlB~~;~~AAEA;;;AAGA~~,OAAO,MAAMC,~~6BAAA~~,~~GAAiCC~~,~~KAAA~~,~~IAA8C~~;~~EAC1F~~,MAAM;IAAEC,~~MAAA~~;~~IAAQC~~;~~EAAI~~,~~CAAE~~,GAAGF,~~KAAA~~;~~EACzB~~,MAAMG,~~MAAA~~,~~GAASd~~,~~SAAA~~;~~EACf~~,MAAMe,~~UAAA~~,~~GAAalB~~,~~aAAA~~;~~EAEnBc~~,~~KAAA~~,~~CAAMZ~~,IAAI,CAACiB,SAAS,GAAGrB,~~YAAA~~,~~CACrBG~~,~~qBAAA~~,~~CAAsBC~~,IAAI,~~EAC1Be~~,~~MAAA~~,~~CAAOb~~,IAAI,~~EACXW~~,~~MAAA~~,~~KAAW~~,~~SAASG~~,UAAU,CAACF,~~IAAA~~,~~CAAK~~,~~EACpCD~~,~~MAAA~~,~~KAAW~~,~~SAASE~~,~~MAAA~~,~~CAAOV~~,GAAG,~~EAC9BO~~,~~KAAA~~,~~CAAMZ~~,IAAI,CAACiB,SAAS;~~EAGtB~~,OAAOL,~~KAAA~~;~~AACT~~"}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/*\n Styles for the root slot.\n / const 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 Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n const { layout , size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,kCAAkC;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAM;IAAEC,MAAM;IAAGC;EAAM,CAAC,GAAGF,KAAK;EAChC,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,CAAC,CAAC;EAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACxK,OAAOL,KAAK;AAChB,CAAC"}

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

@@ -6,12 +6,10 @@ import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.st
 /**
  * The AvatarGroupItem component represents a single person or entity.
  * AvatarGroupItem should only be used in an AvatarGroup component.
- */
-export const AvatarGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAvatarGroupItem_unstable(props, ref);
-  useAvatarGroupItemStyles_unstable(state);
-  useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);
-  return renderAvatarGroupItem_unstable(state);
+ */ export const AvatarGroupItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatarGroupItem_unstable(props, ref);
+    useAvatarGroupItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);
+    return renderAvatarGroupItem_unstable(state);
 });
 AvatarGroupItem.displayName = 'AvatarGroupItem';
-//# sourceMappingURL=AvatarGroupItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"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"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,8BAA8B,QAAQ;~~AAC/C~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,iCAAiC,QAAQ;~~AAIlD;;;;AAIA~~,OAAO,MAAMC,~~eAAA~~,~~gBAA6DL~~,~~KAAA,CAAMM,~~UAAU,CAAC,CAACC,~~KAAA~~,~~EAAOC,GAAA,KAAQ~~;~~EACzG~~,MAAMC,~~KAAA~~,~~GAAQP~~,~~2BAAA,CAA4BK,KAAA,EAAOC,GAAA~~;~~EAEjDJ~~,~~iCAAA,CAAkCK,KAAA~~;~~EAElCN~~,~~2BAAA~~,~~CAA4B,~~qCAAqCM~~,KAAA~~;~~EAEjE~~,OAAOR~~,8BAAA,CAA~~+BQ~~,KAAA~~;AACxC;~~AAEAJ~~,~~eAAA~~,~~CAAgBK,~~WAAW,GAAG"}
1	+ {"version":3,"sources":["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,MAAQ;IACzG,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 CHANGED Viewed

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=AvatarGroupItem.types.js.map
+export { };

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~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"],"mappings":"AAAA"}
1	+ {"version":3,"sources":["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":"AAAA,WAqCE"}

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

@@ -3,4 +3,3 @@ export * from './AvatarGroupItem.types';
 export * from './renderAvatarGroupItem';
 export * from './useAvatarGroupItem';
 export * from './useAvatarGroupItemStyles.styles';
-//# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/AvatarGroupItem/~~index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles.styles';\n"],"mappings":"AAAA,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC"}

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

@@ -1,13 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of AvatarGroupItem
- */
-export const renderAvatarGroupItem_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.avatar, slotProps.avatar), state.isOverflowItem && /*#__PURE__*/createElement(slots.overflowLabel, slotProps.overflowLabel));
+ */ export const renderAvatarGroupItem_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.avatar, slotProps.avatar), state.isOverflowItem && /*#__PURE__*/ createElement(slots.overflowLabel, slotProps.overflowLabel));
 };
-//# sourceMappingURL=renderAvatarGroupItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"~~names":["createElement","getSlotsNext","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"~~sources":["~~../../../src/components/AvatarGroupItem/~~renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<AvatarGroupItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.avatar {...slotProps.avatar} />\n {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,~~2BACA~~,~~yBAEA~~,SAASA,aAAa,QAAQ;~~AAE9B~~,SAASC,YAAY,QAAQ;~~AAG7B;;;AAGA~~,OAAO,MAAMC,~~8BAAA~~,~~GAAkCC~~,~~KAAA,IAAgC~~;~~EAC7E~~,MAAM~~;IAAEC~~,~~KAAA;IAAOC;EAAS~~,~~CAAE~~,~~GAAGJ~~,~~YAAA~~,~~CAAmCE~~,~~KAAA~~;~~EAEhE~~,~~oBACEH~~,~~aAdJ~~,~~CAcKI~~,~~KAAA~~,~~CAAME,~~IAAI,EAAKD,~~SAAA~~,~~CAAUC,~~IAAI,~~eAC5BN~~,~~aAfN~~,~~CAeOI~~,~~KAAA~~,~~CAAMG,~~MAAM,EAAKF,~~SAAA~~,~~CAAUE,~~MAAM,GACjCJ,~~KAAA~~,~~CAAMK,~~cAAc,~~iBAAIR~~,~~aAhB~~/B,~~CAgBgCI~~,~~KAAA~~,~~CAAMK,~~aAAa,EAAKJ,~~SAAA~~,~~CAAUI,~~aAAa;AAG/E"}
1	+ {"version":3,"sources":["renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement /\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderAvatarGroupItem_unstable","state","slots","slotProps","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAmCE;IAEhE,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOF,MAAMG,MAAM,EAAKF,UAAUE,MAAM,GACjCJ,MAAMK,cAAc,kBAAI,AAhB/B,cAgBgCJ,MAAMK,aAAa,EAAKJ,UAAUI,aAAa;AAG/E,EAAE"}