@fluentui/react-avatar 9.0.0-rc.6 → 9.0.0-rc.9

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

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

package/lib/components/AvatarGroup/AvatarGroup.strings.js

@@ -0,0 +1,4 @@
+export const avatarGroupDefaultStrings = {
+  tooltipContent: '{numOverflowedAvatars} more people.'
+};
+//# sourceMappingURL=AvatarGroup.strings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroup/AvatarGroup.strings.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAM,yBAAyB,GAAuB;AAC3D,EAAA,cAAc,EAAE;AAD2C,CAAtD","sourcesContent":["import type { AvatarGroupStrings } from './AvatarGroup.types';\n\nexport const avatarGroupDefaultStrings: AvatarGroupStrings = {\n  tooltipContent: '{numOverflowedAvatars} more people.',\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: Slot<'div'>;\n};\n\ntype AvatarGroupCommons = {\n  // TODO Add things shared between props and state here\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & AvatarGroupCommons;\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & AvatarGroupCommons;\n"]}
+{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport { AvatarSizes } from '../Avatar/Avatar.types';\nimport { Button } from '@fluentui/react-button';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Popover trigger slot that can be used to change the overflow indicator.\n   */\n  popoverTrigger?: Slot<typeof Button>;\n\n  /**\n   * Popover surface that will be displayed when the popover is triggered.\n   */\n  popoverSurface?: Slot<typeof PopoverSurface>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the Avatars should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Maximum number of Avatars to be displayed before overflowing.\n   * NOTE: if pie layout is used, `maxAvatars` will be ignored.\n   * @default 5\n   */\n  maxAvatars?: number;\n\n  /**\n   * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.\n   * @default false\n   */\n  overflowIndicator?: 'number-overflowed' | 'icon';\n\n  /**\n   * Size of the avatars.\n   * @default 32\n   */\n  size?: AvatarSizes;\n\n  /**\n   * Strings for localizing text in the tooltip.\n   */\n  strings?: AvatarGroupStrings;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & {\n  tooltipContent: TooltipProps['content'];\n};\n\nexport type AvatarGroupStrings = {\n  /**\n   * Text applied to the overflow indicator's tooltip.\n   * Can include the token \"\\{numOverflowedAvatars\\}\" which will be replaced with the number of overflowed avatars.\n   */\n  tooltipContent: string;\n};\n"]}

package/lib/components/AvatarGroup/useAvatarGroup.js

@@ -1,4 +1,7 @@
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { PopoverSurface } from '@fluentui/react-popover';
+import { Button } from '@fluentui/react-button';
+import { avatarGroupDefaultStrings } from './AvatarGroup.strings';
 /**
  * Create the state required to render AvatarGroup.
  *
@@ -10,17 +13,38 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
  */
 
 export const useAvatarGroup_unstable = (props, ref) => {
+  const {
+    children,
+    strings = avatarGroupDefaultStrings
+  } = props;
   return {
-    // TODO add appropriate props/defaults
+    // TODO: Replace with actual logic.
+    tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),
     components: {
       // TODO add each slot's element type or component
-      root: 'div'
+      root: 'div',
+      popoverSurface: PopoverSurface,
+      popoverTrigger: Button
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
     root: getNativeElementProps('div', {
       ref,
       ...props
+    }),
+    popoverTrigger: resolveShorthand(props.popoverTrigger, {
+      required: true,
+      defaultProps: {
+        // TODO: Update children
+        children: '+10'
+      }
+    }),
+    popoverSurface: resolveShorthand(props.popoverSurface, {
+      required: true,
+      defaultProps: {
+        // TODO: Update children
+        children: children
+      }
     })
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,SAAO;AACL;AACA,IAAA,UAAU,EAAE;AACV;AACA,MAAA,IAAI,EAAE;AAFI,KAFP;AAML;AACA;AACA,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AARtB,GAAP;AAaD,CAdM","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  return {\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,yBAAT,QAA0C,uBAA1C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,OAAO,GAAG;AAAtB,MAAoD,KAA1D;AAEA,SAAO;AACL;AACA,IAAA,cAAc,EAAE,OAAO,CAAC,cAAR,CAAuB,OAAvB,CAA+B,wBAA/B,EAAyD,MAAM,CAAC,EAAD,CAA/D,CAFX;AAGL,IAAA,UAAU,EAAE;AACV;AACA,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,cAAc,EAAE,cAHN;AAIV,MAAA,cAAc,EAAE;AAJN,KAHP;AASL;AACA;AACA,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAXtB;AAeL,IAAA,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvB,CAf3B;AAsBL,IAAA,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvB;AAtB3B,GAAP;AA8BD,CAjCM","sourcesContent":["import * as React from 'react';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport { Button } from '@fluentui/react-button';\nimport { avatarGroupDefaultStrings } from './AvatarGroup.strings';\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 { children, strings = avatarGroupDefaultStrings } = props;\n\n  return {\n    // TODO: Replace with actual logic.\n    tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n      popoverSurface: PopoverSurface,\n      popoverTrigger: Button,\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    popoverTrigger: resolveShorthand(props.popoverTrigger, {\n      required: true,\n      defaultProps: {\n        // TODO: Update children\n        children: '+10',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        // TODO: Update children\n        children: children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js

@@ -1,8 +1,11 @@
 import { __styles, mergeClasses } from '@griffel/react';
 export const avatarGroupClassNames = {
-  root: 'fui-AvatarGroup' // TODO: add class names for all slots on AvatarGroupSlots.
-  // Should be of the form `<slotName>: 'fui-AvatarGroup__<slotName>`
-
+  root: 'fui-AvatarGroup',
+  popoverSurface: 'fui-AvatarGroup__popoverSurface',
+  popoverTrigger: 'fui-AvatarGroup__popoverTrigger'
+};
+export const extraAvatarGroupClassNames = {
+  popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem'
 };
 /**
  * Styles for the root slot
@@ -21,6 +24,14 @@ export const useAvatarGroupStyles_unstable = state => {
   state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
 
+  if (state.popoverSurface) {
+    state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);
+  }
+
+  if (state.popoverTrigger) {
+    state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);
+  }
+
   return state;
 };
 //# sourceMappingURL=useAvatarGroupStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D,CAErE;AACA;;AAHqE,CAAhE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC,CAFyF,CAIzF;AACA;;AAEA,SAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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  // TODO: add class names for all slots on AvatarGroupSlots.\n  // Should be of the form `<slotName>: 'fui-AvatarGroup__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,cAAc,EAAE,iCAFqD;AAGrE,EAAA,cAAc,EAAE;AAHqD,CAAhE;AAMP,OAAO,MAAM,0BAA0B,GAAG;AACxC,EAAA,kBAAkB,EAAE;AADoB,CAAnC;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC,CAFyF,CAIzF;AACA;;AAEA,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,YAAY,CAAC,qBAAqB,CAAC,cAAvB,EAAuC,KAAK,CAAC,cAAN,CAAqB,SAA5D,CAA7C;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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  popoverSurface: 'fui-AvatarGroup__popoverSurface',\n  popoverTrigger: 'fui-AvatarGroup__popoverTrigger',\n};\n\nexport const extraAvatarGroupClassNames = {\n  popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    // TODO Add default styles for the root element\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  if (state.popoverSurface) {\n    state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);\n  }\n\n  if (state.popoverTrigger) {\n    state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE;AACA,eAHF,EAIE,gBAJF,EAKE,qBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP;AAUA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Avatar,\n  // eslint-disable-next-line deprecation/deprecation\n  avatarClassName,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE;AACA,eAHF,EAIE,gBAJF,EAKE,qBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP;AAUA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Avatar,\n  // eslint-disable-next-line deprecation/deprecation\n  avatarClassName,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\n"],"sourceRoot":"../src/"}

package/lib/utils/getInitials.js

@@ -34,20 +34,22 @@ const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
 
 const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
 
-function getInitialsLatin(displayName, isRtl) {
+function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
   let initials = '';
   const splits = displayName.split(' ');
 
-  if (splits.length === 2) {
-    initials += splits[0].charAt(0).toUpperCase();
-    initials += splits[1].charAt(0).toUpperCase();
-  } else if (splits.length === 3) {
-    initials += splits[0].charAt(0).toUpperCase();
-    initials += splits[2].charAt(0).toUpperCase();
-  } else if (splits.length !== 0) {
+  if (splits.length !== 0) {
     initials += splits[0].charAt(0).toUpperCase();
   }
 
+  if (!firstInitialOnly) {
+    if (splits.length === 2) {
+      initials += splits[1].charAt(0).toUpperCase();
+    } else if (splits.length === 3) {
+      initials += splits[2].charAt(0).toUpperCase();
+    }
+  }
+
   if (isRtl && initials.length > 1) {
     return initials.charAt(1) + initials.charAt(0);
   }
@@ -67,24 +69,24 @@ function cleanupDisplayName(displayName) {
  *
  * @param displayName - The full name of the person or entity
  * @param isRtl - Whether the display is in RTL
- * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
+ * @param options - Extra options to control the behavior of getInitials
  *
  * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
  * could be derived from the name.
  */
 
 
-export function getInitials(displayName, isRtl, allowPhoneInitials) {
+export function getInitials(displayName, isRtl, options) {
   if (!displayName) {
     return '';
   }
 
   displayName = cleanupDisplayName(displayName); // For names containing CJK characters, and phone numbers, we don't display initials
 
-  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !allowPhoneInitials && PHONENUMBER_REGEX.test(displayName)) {
+  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
     return '';
   }
 
-  return getInitialsLatin(displayName, isRtl);
+  return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
 }
 //# sourceMappingURL=getInitials.js.map

package/lib/utils/getInitials.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,MAAM,yBAAyB,GAAW,6BAA1C;AAEA;;;AAGG;;AACH,MAAM,oBAAoB,GAAW,4DAArC;AAEA;;;AAGG;;AACH,MAAM,iBAAiB,GAAW,+BAAlC;AAEA;;AACA,MAAM,0BAA0B,GAAW,MAA3C;AAEA;;;;;;;AAOG;AACH;;AACA,MAAM,sBAAsB,GAAW,4MAAvC;;AAEA,SAAS,gBAAT,CAA0B,WAA1B,EAA+C,KAA/C,EAA6D;AAC3D,MAAI,QAAQ,GAAG,EAAf;AAEA,QAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;AAEA,MAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACA,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,GAHD,MAGO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACA,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,GAHM,MAGA,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;;AAED,MAAI,KAAK,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAA/B,EAAkC;AAChC,WAAO,QAAQ,CAAC,MAAT,CAAgB,CAAhB,IAAqB,QAAQ,CAAC,MAAT,CAAgB,CAAhB,CAA5B;AACD;;AAED,SAAO,QAAP;AACD;;AAED,SAAS,kBAAT,CAA4B,WAA5B,EAA+C;AAC7C,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,yBAApB,EAA+C,EAA/C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,oBAApB,EAA0C,EAA1C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,0BAApB,EAAgD,GAAhD,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,IAAZ,EAAd;AAEA,SAAO,WAAP;AACD;AAED;;;;;;;;;AASG;;;AACH,OAAM,SAAU,WAAV,CACJ,WADI,EAEJ,KAFI,EAGJ,kBAHI,EAGwB;AAE5B,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,EAAP;AACD;;AAED,EAAA,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CAN4B,CAQ5B;;AACA,MAAI,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KAA6C,CAAC,kBAAD,IAAuB,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAAxE,EAA8G;AAC5G,WAAO,EAAP;AACD;;AAED,SAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,CAAvB;AACD","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n *  so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n *             CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean): string {\n  let initials = '';\n\n  const splits: string[] = displayName.split(' ');\n\n  if (splits.length === 2) {\n    initials += splits[0].charAt(0).toUpperCase();\n    initials += splits[1].charAt(0).toUpperCase();\n  } else if (splits.length === 3) {\n    initials += splits[0].charAt(0).toUpperCase();\n    initials += splits[2].charAt(0).toUpperCase();\n  } else if (splits.length !== 0) {\n    initials += splits[0].charAt(0).toUpperCase();\n  }\n\n  if (isRtl && initials.length > 1) {\n    return initials.charAt(1) + initials.charAt(0);\n  }\n\n  return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n  displayName = displayName.trim();\n\n  return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n */\nexport function getInitials(\n  displayName: string | undefined | null,\n  isRtl: boolean,\n  allowPhoneInitials?: boolean,\n): string {\n  if (!displayName) {\n    return '';\n  }\n\n  displayName = cleanupDisplayName(displayName);\n\n  // For names containing CJK characters, and phone numbers, we don't display initials\n  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {\n    return '';\n  }\n\n  return getInitialsLatin(displayName, isRtl);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,MAAM,yBAAyB,GAAW,6BAA1C;AAEA;;;AAGG;;AACH,MAAM,oBAAoB,GAAW,4DAArC;AAEA;;;AAGG;;AACH,MAAM,iBAAiB,GAAW,+BAAlC;AAEA;;AACA,MAAM,0BAA0B,GAAW,MAA3C;AAEA;;;;;;;AAOG;AACH;;AACA,MAAM,sBAAsB,GAAW,4MAAvC;;AAEA,SAAS,gBAAT,CAA0B,WAA1B,EAA+C,KAA/C,EAA+D,gBAA/D,EAAyF;AACvF,MAAI,QAAQ,GAAG,EAAf;AAEA,QAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;AACA,MAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;;AAED,MAAI,CAAC,gBAAL,EAAuB;AACrB,QAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,KAFD,MAEO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;AACF;;AAED,MAAI,KAAK,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAA/B,EAAkC;AAChC,WAAO,QAAQ,CAAC,MAAT,CAAgB,CAAhB,IAAqB,QAAQ,CAAC,MAAT,CAAgB,CAAhB,CAA5B;AACD;;AAED,SAAO,QAAP;AACD;;AAED,SAAS,kBAAT,CAA4B,WAA5B,EAA+C;AAC7C,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,yBAApB,EAA+C,EAA/C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,oBAApB,EAA0C,EAA1C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,0BAApB,EAAgD,GAAhD,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,IAAZ,EAAd;AAEA,SAAO,WAAP;AACD;AAED;;;;;;;;;AASG;;;AACH,OAAM,SAAU,WAAV,CACJ,WADI,EAEJ,KAFI,EAGJ,OAHI,EASH;AAED,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,EAAP;AACD;;AAED,EAAA,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CANC,CAQD;;AACA,MACE,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KACC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,kBAAV,KAAgC,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAFnC,EAGE;AACA,WAAO,EAAP;AACD;;AAED,SAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,EAAqB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAA9B,CAAvB;AACD","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n *  so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n *             CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string {\n  let initials = '';\n\n  const splits: string[] = displayName.split(' ');\n  if (splits.length !== 0) {\n    initials += splits[0].charAt(0).toUpperCase();\n  }\n\n  if (!firstInitialOnly) {\n    if (splits.length === 2) {\n      initials += splits[1].charAt(0).toUpperCase();\n    } else if (splits.length === 3) {\n      initials += splits[2].charAt(0).toUpperCase();\n    }\n  }\n\n  if (isRtl && initials.length > 1) {\n    return initials.charAt(1) + initials.charAt(0);\n  }\n\n  return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n  displayName = displayName.trim();\n\n  return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param options - Extra options to control the behavior of getInitials\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n */\nexport function getInitials(\n  displayName: string | undefined | null,\n  isRtl: boolean,\n  options?: {\n    /** Should initials be generated from phone numbers (default false) */\n    allowPhoneInitials?: boolean;\n\n    /** Returns only the first initial */\n    firstInitialOnly?: boolean;\n  },\n): string {\n  if (!displayName) {\n    return '';\n  }\n\n  displayName = cleanupDisplayName(displayName);\n\n  // For names containing CJK characters, and phone numbers, we don't display initials\n  if (\n    UNSUPPORTED_TEXT_REGEX.test(displayName) ||\n    (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n  ) {\n    return '';\n  }\n\n  return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"],"sourceRoot":"../src/"}

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

@@ -55,7 +55,9 @@ const useAvatar_unstable = (props, ref) => {
   let initials = react_utilities_1.resolveShorthand(props.initials, {
     required: true,
     defaultProps: {
-      children: index_1.getInitials(name, dir === 'rtl'),
+      children: index_1.getInitials(name, dir === 'rtl', {
+        firstInitialOnly: size <= 16
+      }),
       'aria-hidden': true
     }
   }); // Render the icon slot *only if* there aren't any initials to display.
@@ -116,12 +118,10 @@ const useAvatar_unstable = (props, ref) => {
 
   return {
     size,
-    name,
     shape,
     active,
     activeAppearance,
     color,
-    idForColor,
     components: {
       root: 'span',
       initials: 'span',

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

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

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

@@ -260,6 +260,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "B7oj6ja": ["fuoumxm", "f1vtqnvc"],
     "Btl43ni": ["f1vtqnvc", "fuoumxm"]
   },
+  "icon12": {
+    "Be2twd7": "f1ugzwwg"
+  },
   "icon16": {
     "Be2twd7": "f4ybsrx"
   },
@@ -279,10 +282,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Be2twd7": "f18m8u13"
   }
 }, {
-  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f14oqhab:before{top:0;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".flqennz:before{bottom:0;}", ".f7gntx7:before{border-bottom-right-radius:inherit;}", ".f1mc89cj:before{border-bottom-left-radius:inherit;}", ".f1vj2lhw:before{border-top-right-radius:inherit;}", ".f1trbl44:before{border-top-left-radius:inherit;}", ".f1psx457:before{transition-property:margin,opacity;}", ".feqeuj:before{transition-duration:500ms,400ms;}", ".f1o6ticg:before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f17s8eb2:before{border-top-color:var(--colorBrandBackgroundStatic);}", ".fv9ryek:before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f2ueew:before{border-left-color:var(--colorBrandBackgroundStatic);}", ".f1jwrqhc:before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fh80ci2:before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f2bwiux:before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".fsprf8b:before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f3h6zru:before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q8k45v:before{border-top-width:var(--strokeWidthThick);}", ".fsu5318:before{border-right-width:var(--strokeWidthThick);}", ".f17ooz8x:before{border-left-width:var(--strokeWidthThick);}", ".f1tf78pn:before{border-bottom-width:var(--strokeWidthThick);}", ".f19fdhy9:before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".fylzcb7:before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".fsjc8ey:before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fw4k5ov:before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".fcdg7pk:before{border-top-width:var(--strokeWidthThicker);}", ".fqkplwy:before{border-right-width:var(--strokeWidthThicker);}", ".f14dmnnh:before{border-left-width:var(--strokeWidthThicker);}", ".fccqzkf:before{border-bottom-width:var(--strokeWidthThicker);}", ".flif9b5:before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".fo923rx:before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".f7jyntm:before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".f18p1wo9:before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fjoz5ua:before{border-top-width:var(--strokeWidthThickest);}", ".f1lg5lk7:before{border-right-width:var(--strokeWidthThickest);}", ".fthel6x:before{border-left-width:var(--strokeWidthThickest);}", ".f4i03fv:before{border-bottom-width:var(--strokeWidthThickest);}", ".f15gzsq7:before{box-shadow:var(--shadow4);}", ".f1eebxl:before{box-shadow:var(--shadow8);}", ".fsnqaoy:before{box-shadow:var(--shadow16);}", ".f1sh7vtk:before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fede8dz:before{margin-top:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".fc3uzr1:before{margin-bottom:0;}", ".f1429bq1:before{opacity:0;}", ".fuorts1:before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"]
+  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f14oqhab:before{top:0;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".flqennz:before{bottom:0;}", ".f7gntx7:before{border-bottom-right-radius:inherit;}", ".f1mc89cj:before{border-bottom-left-radius:inherit;}", ".f1vj2lhw:before{border-top-right-radius:inherit;}", ".f1trbl44:before{border-top-left-radius:inherit;}", ".f1psx457:before{transition-property:margin,opacity;}", ".feqeuj:before{transition-duration:500ms,400ms;}", ".f1o6ticg:before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f17s8eb2:before{border-top-color:var(--colorBrandBackgroundStatic);}", ".fv9ryek:before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f2ueew:before{border-left-color:var(--colorBrandBackgroundStatic);}", ".f1jwrqhc:before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fh80ci2:before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f2bwiux:before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".fsprf8b:before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f3h6zru:before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q8k45v:before{border-top-width:var(--strokeWidthThick);}", ".fsu5318:before{border-right-width:var(--strokeWidthThick);}", ".f17ooz8x:before{border-left-width:var(--strokeWidthThick);}", ".f1tf78pn:before{border-bottom-width:var(--strokeWidthThick);}", ".f19fdhy9:before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".fylzcb7:before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".fsjc8ey:before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fw4k5ov:before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".fcdg7pk:before{border-top-width:var(--strokeWidthThicker);}", ".fqkplwy:before{border-right-width:var(--strokeWidthThicker);}", ".f14dmnnh:before{border-left-width:var(--strokeWidthThicker);}", ".fccqzkf:before{border-bottom-width:var(--strokeWidthThicker);}", ".flif9b5:before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".fo923rx:before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".f7jyntm:before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".f18p1wo9:before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fjoz5ua:before{border-top-width:var(--strokeWidthThickest);}", ".f1lg5lk7:before{border-right-width:var(--strokeWidthThickest);}", ".fthel6x:before{border-left-width:var(--strokeWidthThickest);}", ".f4i03fv:before{border-bottom-width:var(--strokeWidthThickest);}", ".f15gzsq7:before{box-shadow:var(--shadow4);}", ".f1eebxl:before{box-shadow:var(--shadow8);}", ".fsnqaoy:before{box-shadow:var(--shadow16);}", ".f1sh7vtk:before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fede8dz:before{margin-top:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".fc3uzr1:before{margin-bottom:0;}", ".f1429bq1:before{opacity:0;}", ".fuorts1:before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"]
 });
 
 const useSizeStyles = /*#__PURE__*/react_1.__styles({
+  "16": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt"
+  },
   "20": {
     "a9b677": "f64fuq3",
     "Bqenvij": "fjamq6b"
@@ -336,7 +343,7 @@ const useSizeStyles = /*#__PURE__*/react_1.__styles({
     "Bqenvij": "fele2au"
   }
 }, {
-  "d": [".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
+  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
 });
 
 const useColorStyles = /*#__PURE__*/react_1.__styles({
@@ -561,7 +568,9 @@ const useAvatarStyles_unstable = state => {
   if (state.icon) {
     let iconSizeClass;
 
-    if (size <= 24) {
+    if (size <= 16) {
+      iconSizeClass = styles.icon12;
+    } else if (size <= 24) {
       iconSizeClass = styles.icon16;
     } else if (size <= 40) {
       iconSizeClass = styles.icon20;