@fluentui/react-avatar 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/lib/components/Avatar/Avatar.module.css

@@ -0,0 +1,587 @@
+@layer fluentui {
+  /* ---- Root base (32px default, circular) ---- */
+  .root {
+    display: inline-block;
+    flex-shrink: 0;
+    position: relative;
+    vertical-align: middle;
+    border-radius: var(--borderRadiusCircular);
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    /* Default text size (sizes 32–40): caption1Strong base is fontSizeBase300 */
+    font-size: var(--fontSizeBase300);
+    width: 32px;
+    height: 32px;
+    /* Default icon size for sizes 28–40 */
+    & :global(.fui-Avatar__icon) {
+      font-size: 20px;
+    }
+  }
+
+  /* ::before = ring, ::after = shadow. Hidden by default (no content). */
+  .root::before,
+  .root::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    margin: calc(-2 * var(--fui-Avatar-ringWidth, 0px));
+    border-radius: inherit;
+    transition-property: margin, opacity;
+    transition-timing-function: var(--curveEasyEaseMax), var(--curveLinear);
+    transition-duration: var(--durationUltraSlow), var(--durationSlower);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .root::before,
+    .root::after {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  .root::before {
+    border-style: solid;
+    border-width: var(--fui-Avatar-ringWidth, 0px);
+  }
+
+  /* ---- Image slot ---- */
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+    vertical-align: top;
+  }
+
+  /* ---- Icon and initials slots share the same base layout ---- */
+  .iconInitials {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    user-select: none;
+    border-radius: inherit;
+  }
+
+  /* ---- Badge slot (bottom-right corner) ---- */
+  .badge {
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+  }
+
+  /* Root modifier when badge is present */
+  .badgeAlign {
+    --fui-Avatar-badgeAlign: right;
+  }
+  .badgeAlign:dir(rtl) {
+    --fui-Avatar-badgeAlign: left;
+  }
+
+  /* Badge cutout mask */
+  .badgeCutout {
+    mask-image: radial-gradient(
+      circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign, right) var(--fui-Avatar-badgeRadius),
+      transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px),
+      white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px)
+    );
+  }
+
+  /* Ring ::before cutout when badge is also present */
+  .ringBadgeCutout::before {
+    mask-image: radial-gradient(
+      circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth, 0px))
+        var(--fui-Avatar-badgeAlign, right) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth, 0px)),
+      transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px),
+      white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px)
+    );
+  }
+
+  /* ---- Sizes with embedded font-size and icon-size ---- */
+  /* Each size class sets width/height, and overrides font-size + icon font-size where they
+     differ from the .root defaults (fontSizeBase300, icon 20px). */
+
+  .size16 {
+    width: 16px;
+    height: 16px;
+    font-size: var(--fontSizeBase100);
+    & :global(.fui-Avatar__icon) {
+      font-size: 12px;
+    }
+  }
+  .size20 {
+    width: 20px;
+    height: 20px;
+    font-size: var(--fontSizeBase100);
+    & :global(.fui-Avatar__icon) {
+      font-size: 16px;
+    }
+  }
+  .size24 {
+    width: 24px;
+    height: 24px;
+    font-size: var(--fontSizeBase100);
+    & :global(.fui-Avatar__icon) {
+      font-size: 16px;
+    }
+  }
+  .size28 {
+    width: 28px;
+    height: 28px;
+    font-size: var(--fontSizeBase200);
+    /* icon stays 20px (inherited from .root default) */
+  }
+  /* size32: .root default (no class applied) */
+  .size36 {
+    width: 36px;
+    height: 36px; /* font/icon: .root defaults */
+  }
+  .size40 {
+    width: 40px;
+    height: 40px; /* font/icon: .root defaults */
+  }
+  .size48 {
+    width: 48px;
+    height: 48px;
+    font-size: var(--fontSizeBase400);
+    & :global(.fui-Avatar__icon) {
+      font-size: 24px;
+    }
+  }
+  .size56 {
+    width: 56px;
+    height: 56px;
+    font-size: var(--fontSizeBase400);
+    & :global(.fui-Avatar__icon) {
+      font-size: 28px;
+    }
+  }
+  .size64 {
+    width: 64px;
+    height: 64px;
+    font-size: var(--fontSizeBase500);
+    & :global(.fui-Avatar__icon) {
+      font-size: 32px;
+    }
+  }
+  .size72 {
+    width: 72px;
+    height: 72px;
+    font-size: var(--fontSizeBase500);
+    & :global(.fui-Avatar__icon) {
+      font-size: 32px;
+    }
+  }
+  .size96 {
+    width: 96px;
+    height: 96px;
+    font-size: var(--fontSizeBase500);
+    & :global(.fui-Avatar__icon) {
+      font-size: 48px;
+    }
+  }
+  .size120 {
+    width: 120px;
+    height: 120px;
+    font-size: var(--fontSizeBase600);
+    & :global(.fui-Avatar__icon) {
+      font-size: 48px;
+    }
+  }
+  .size128 {
+    width: 128px;
+    height: 128px;
+    font-size: var(--fontSizeBase600);
+    & :global(.fui-Avatar__icon) {
+      font-size: 48px;
+    }
+  }
+
+  .size32 {
+    width: 32px;
+    height: 32px;
+  }
+
+  /* ---- Square shape: border-radius per size group ---- */
+  /* :where() keeps specificity at (0,1,0) — same as a single class */
+  .square:where(.size16, .size20, .size24) {
+    border-radius: var(--borderRadiusSmall);
+  }
+  .square:where(.size28, .size32, .size36, .size40, .size48) {
+    border-radius: var(--borderRadiusMedium);
+  }
+  .square:where(.size56, .size64, .size72) {
+    border-radius: var(--borderRadiusLarge);
+  }
+  .square:where(.size96, .size120, .size128) {
+    border-radius: var(--borderRadiusXLarge);
+  }
+  /* size32 has no class, so we need to handle it: .square without a size class = size32 */
+  .square:not(
+      :is(
+          .size16,
+          .size20,
+          .size24,
+          .size28,
+          .size36,
+          .size40,
+          .size48,
+          .size56,
+          .size64,
+          .size72,
+          .size96,
+          .size120,
+          .size128
+        )
+    ) {
+    border-radius: var(--borderRadiusMedium);
+  }
+
+  /* ---- Badge size: CSS vars for mask calculations ---- */
+  .tiny {
+    --fui-Avatar-badgeRadius: 3px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThin);
+  }
+  .extra-small {
+    --fui-Avatar-badgeRadius: 5px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThin);
+  }
+  .small {
+    --fui-Avatar-badgeRadius: 6px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThin);
+  }
+  .medium {
+    --fui-Avatar-badgeRadius: 8px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThin);
+  }
+  .large {
+    --fui-Avatar-badgeRadius: 10px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThick);
+  }
+  .extra-large {
+    --fui-Avatar-badgeRadius: 14px;
+    --fui-Avatar-badgeGap: var(--strokeWidthThick);
+  }
+
+  /* ---- Ring (::before): activate + thickness from size ---- */
+  .ring::before {
+    content: '';
+  }
+
+  /* Ring thickness: controlled by --fui-Avatar-ringWidth, selected by size group */
+  .ring:where(.size16, .size20, .size24, .size28, .size36, .size40, .size48),
+  .ring:not(
+      :is(.size16, .size20, .size24, .size28, .size36, .size40, .size56, .size64, .size72, .size96, .size120, .size128)
+    ) {
+    --fui-Avatar-ringWidth: var(--strokeWidthThick); /* sizes ≤ 48 */
+  }
+  .ring:where(.size56, .size64) {
+    --fui-Avatar-ringWidth: var(--strokeWidthThicker);
+  }
+  .ring:where(.size72, .size96, .size120, .size128) {
+    --fui-Avatar-ringWidth: var(--strokeWidthThickest);
+  }
+
+  /* Ring border colors (one per palette color) */
+  .ring:where(.neutral, .brand)::before {
+    border-color: var(--colorBrandStroke1);
+  }
+  .ring:where(.dark-red)::before {
+    border-color: var(--colorPaletteDarkRedBorderActive);
+  }
+  .ring:where(.cranberry)::before {
+    border-color: var(--colorPaletteCranberryBorderActive);
+  }
+  .ring:where(.red)::before {
+    border-color: var(--colorPaletteRedBorderActive);
+  }
+  .ring:where(.pumpkin)::before {
+    border-color: var(--colorPalettePumpkinBorderActive);
+  }
+  .ring:where(.peach)::before {
+    border-color: var(--colorPalettePeachBorderActive);
+  }
+  .ring:where(.marigold)::before {
+    border-color: var(--colorPaletteMarigoldBorderActive);
+  }
+  .ring:where(.gold)::before {
+    border-color: var(--colorPaletteGoldBorderActive);
+  }
+  .ring:where(.brass)::before {
+    border-color: var(--colorPaletteBrassBorderActive);
+  }
+  .ring:where(.brown)::before {
+    border-color: var(--colorPaletteBrownBorderActive);
+  }
+  .ring:where(.forest)::before {
+    border-color: var(--colorPaletteForestBorderActive);
+  }
+  .ring:where(.seafoam)::before {
+    border-color: var(--colorPaletteSeafoamBorderActive);
+  }
+  .ring:where(.dark-green)::before {
+    border-color: var(--colorPaletteDarkGreenBorderActive);
+  }
+  .ring:where(.light-teal)::before {
+    border-color: var(--colorPaletteLightTealBorderActive);
+  }
+  .ring:where(.teal)::before {
+    border-color: var(--colorPaletteTealBorderActive);
+  }
+  .ring:where(.steel)::before {
+    border-color: var(--colorPaletteSteelBorderActive);
+  }
+  .ring:where(.blue)::before {
+    border-color: var(--colorPaletteBlueBorderActive);
+  }
+  .ring:where(.royal-blue)::before {
+    border-color: var(--colorPaletteRoyalBlueBorderActive);
+  }
+  .ring:where(.cornflower)::before {
+    border-color: var(--colorPaletteCornflowerBorderActive);
+  }
+  .ring:where(.navy)::before {
+    border-color: var(--colorPaletteNavyBorderActive);
+  }
+  .ring:where(.lavender)::before {
+    border-color: var(--colorPaletteLavenderBorderActive);
+  }
+  .ring:where(.purple)::before {
+    border-color: var(--colorPalettePurpleBorderActive);
+  }
+  .ring:where(.grape)::before {
+    border-color: var(--colorPaletteGrapeBorderActive);
+  }
+  .ring:where(.lilac)::before {
+    border-color: var(--colorPaletteLilacBorderActive);
+  }
+  .ring:where(.pink)::before {
+    border-color: var(--colorPalettePinkBorderActive);
+  }
+  .ring:where(.magenta)::before {
+    border-color: var(--colorPaletteMagentaBorderActive);
+  }
+  .ring:where(.plum)::before {
+    border-color: var(--colorPalettePlumBorderActive);
+  }
+  .ring:where(.beige)::before {
+    border-color: var(--colorPaletteBeigeBorderActive);
+  }
+  .ring:where(.mink)::before {
+    border-color: var(--colorPaletteMinkBorderActive);
+  }
+  .ring:where(.platinum)::before {
+    border-color: var(--colorPalettePlatinumBorderActive);
+  }
+  .ring:where(.anchor)::before {
+    border-color: var(--colorPaletteAnchorBorderActive);
+  }
+
+  /* ---- Shadow (::after): activate + depth from size ---- */
+  .shadow::after {
+    content: '';
+  }
+
+  .shadow:where(.size16, .size20, .size24, .size28)::after {
+    box-shadow: var(--shadow4);
+  }
+  .shadow:where(.size36, .size40, .size48)::after {
+    box-shadow: var(--shadow8);
+  }
+  .shadow:where(.size56, .size64)::after {
+    box-shadow: var(--shadow16);
+  }
+  .shadow:where(.size72, .size96, .size120, .size128)::after {
+    box-shadow: var(--shadow28);
+  }
+  /* size32 (no class): shadow8 range (29–48) */
+  .shadow:not(
+      :is(
+          .size16,
+          .size20,
+          .size24,
+          .size28,
+          .size36,
+          .size40,
+          .size48,
+          .size56,
+          .size64,
+          .size72,
+          .size96,
+          .size120,
+          .size128
+        )
+    )::after {
+    box-shadow: var(--shadow8);
+  }
+
+  /* ---- Active / inactive transition ---- */
+  .activeOrInactive {
+    transform: perspective(1px);
+    transition-property: transform, opacity;
+    transition-duration: var(--durationUltraSlow), var(--durationFaster);
+    transition-timing-function: var(--curveEasyEaseMax), var(--curveLinear);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .activeOrInactive {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  .inactive {
+    opacity: 0.8;
+    transform: scale(0.875);
+    transition-timing-function: var(--curveDecelerateMin), var(--curveLinear);
+  }
+
+  .inactive::before,
+  .inactive::after {
+    margin: 0;
+    opacity: 0;
+    transition-timing-function: var(--curveDecelerateMin), var(--curveLinear);
+  }
+
+  /* Keep root color qualifiers specificity-neutral and target only its own slots. */
+  :where(.neutral) > .iconInitials {
+    color: var(--colorNeutralForeground3);
+    background-color: var(--colorNeutralBackground6);
+  }
+  :where(.brand) > .iconInitials {
+    color: var(--colorNeutralForegroundStaticInverted);
+    background-color: var(--colorBrandBackgroundStatic);
+  }
+  :where(.dark-red) > .iconInitials {
+    color: var(--colorPaletteDarkRedForeground2);
+    background-color: var(--colorPaletteDarkRedBackground2);
+  }
+  :where(.cranberry) > .iconInitials {
+    color: var(--colorPaletteCranberryForeground2);
+    background-color: var(--colorPaletteCranberryBackground2);
+  }
+  :where(.red) > .iconInitials {
+    color: var(--colorPaletteRedForeground2);
+    background-color: var(--colorPaletteRedBackground2);
+  }
+  :where(.pumpkin) > .iconInitials {
+    color: var(--colorPalettePumpkinForeground2);
+    background-color: var(--colorPalettePumpkinBackground2);
+  }
+  :where(.peach) > .iconInitials {
+    color: var(--colorPalettePeachForeground2);
+    background-color: var(--colorPalettePeachBackground2);
+  }
+  :where(.marigold) > .iconInitials {
+    color: var(--colorPaletteMarigoldForeground2);
+    background-color: var(--colorPaletteMarigoldBackground2);
+  }
+  :where(.gold) > .iconInitials {
+    color: var(--colorPaletteGoldForeground2);
+    background-color: var(--colorPaletteGoldBackground2);
+  }
+  :where(.brass) > .iconInitials {
+    color: var(--colorPaletteBrassForeground2);
+    background-color: var(--colorPaletteBrassBackground2);
+  }
+  :where(.brown) > .iconInitials {
+    color: var(--colorPaletteBrownForeground2);
+    background-color: var(--colorPaletteBrownBackground2);
+  }
+  :where(.forest) > .iconInitials {
+    color: var(--colorPaletteForestForeground2);
+    background-color: var(--colorPaletteForestBackground2);
+  }
+  :where(.seafoam) > .iconInitials {
+    color: var(--colorPaletteSeafoamForeground2);
+    background-color: var(--colorPaletteSeafoamBackground2);
+  }
+  :where(.dark-green) > .iconInitials {
+    color: var(--colorPaletteDarkGreenForeground2);
+    background-color: var(--colorPaletteDarkGreenBackground2);
+  }
+  :where(.light-teal) > .iconInitials {
+    color: var(--colorPaletteLightTealForeground2);
+    background-color: var(--colorPaletteLightTealBackground2);
+  }
+  :where(.teal) > .iconInitials {
+    color: var(--colorPaletteTealForeground2);
+    background-color: var(--colorPaletteTealBackground2);
+  }
+  :where(.steel) > .iconInitials {
+    color: var(--colorPaletteSteelForeground2);
+    background-color: var(--colorPaletteSteelBackground2);
+  }
+  :where(.blue) > .iconInitials {
+    color: var(--colorPaletteBlueForeground2);
+    background-color: var(--colorPaletteBlueBackground2);
+  }
+  :where(.royal-blue) > .iconInitials {
+    color: var(--colorPaletteRoyalBlueForeground2);
+    background-color: var(--colorPaletteRoyalBlueBackground2);
+  }
+  :where(.cornflower) > .iconInitials {
+    color: var(--colorPaletteCornflowerForeground2);
+    background-color: var(--colorPaletteCornflowerBackground2);
+  }
+  :where(.navy) > .iconInitials {
+    color: var(--colorPaletteNavyForeground2);
+    background-color: var(--colorPaletteNavyBackground2);
+  }
+  :where(.lavender) > .iconInitials {
+    color: var(--colorPaletteLavenderForeground2);
+    background-color: var(--colorPaletteLavenderBackground2);
+  }
+  :where(.purple) > .iconInitials {
+    color: var(--colorPalettePurpleForeground2);
+    background-color: var(--colorPalettePurpleBackground2);
+  }
+  :where(.grape) > .iconInitials {
+    color: var(--colorPaletteGrapeForeground2);
+    background-color: var(--colorPaletteGrapeBackground2);
+  }
+  :where(.lilac) > .iconInitials {
+    color: var(--colorPaletteLilacForeground2);
+    background-color: var(--colorPaletteLilacBackground2);
+  }
+  :where(.pink) > .iconInitials {
+    color: var(--colorPalettePinkForeground2);
+    background-color: var(--colorPalettePinkBackground2);
+  }
+  :where(.magenta) > .iconInitials {
+    color: var(--colorPaletteMagentaForeground2);
+    background-color: var(--colorPaletteMagentaBackground2);
+  }
+  :where(.plum) > .iconInitials {
+    color: var(--colorPalettePlumForeground2);
+    background-color: var(--colorPalettePlumBackground2);
+  }
+  :where(.beige) > .iconInitials {
+    color: var(--colorPaletteBeigeForeground2);
+    background-color: var(--colorPaletteBeigeBackground2);
+  }
+  :where(.mink) > .iconInitials {
+    color: var(--colorPaletteMinkForeground2);
+    background-color: var(--colorPaletteMinkBackground2);
+  }
+  :where(.platinum) > .iconInitials {
+    color: var(--colorPalettePlatinumForeground2);
+    background-color: var(--colorPalettePlatinumBackground2);
+  }
+  :where(.anchor) > .iconInitials {
+    color: var(--colorPaletteAnchorForeground2);
+    background-color: var(--colorPaletteAnchorBackground2);
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { PresenceBadge, PresenceBadgeBaseProps } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\nexport type AvatarBaseSlots = Omit<AvatarSlots, 'badge'> & {\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<PresenceBadgeBaseProps>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<AvatarBaseSlots> & Pick<AvatarProps, 'active' | 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<AvatarBaseSlots> & Pick<AvatarState, 'active' | 'activeAriaLabelElement'>;\n"],"names":[],"mappings":"AAsLA,WAAuH"}
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { PresenceBadge, PresenceBadgeBaseProps } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\nexport type AvatarBaseSlots = Omit<AvatarSlots, 'badge'> & {\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<PresenceBadgeBaseProps>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<AvatarBaseSlots> & Pick<AvatarProps, 'active' | 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<AvatarBaseSlots> & Pick<AvatarState, 'active' | 'activeAriaLabelElement'>;\n"],"names":[],"mappings":"AAsLA,WAAuH"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarBaseSlots,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":"AAaA,SAASA,MAAM,QAAQ,cAAW;AAClC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,EAAEC,sBAAsB,QAAQ,iBAAc;AAC1F,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,8BAA2B"}
+{"version":3,"sources":["../../../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarBaseSlots,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":"AAaA,SAASA,MAAM,QAAQ,cAAW;AAClC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,EAAEC,sBAAsB,QAAQ,iBAAc;AAC1F,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,8BAA2B"}

package/lib/components/Avatar/renderAvatar.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 export const renderAvatar_unstable = (state)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsxs(state.root, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarBaseSlots, AvatarBaseState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarBaseState): JSXElement => {\n  assertSlots<AvatarBaseSlots>(state);\n\n  return (\n    <state.root>\n      {state.initials && <state.initials />}\n      {state.icon && <state.icon />}\n      {state.image && <state.image />}\n      {state.badge && <state.badge />}\n      {state.activeAriaLabelElement}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC3BJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}
+{"version":3,"sources":["../../../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarBaseSlots, AvatarBaseState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarBaseState): JSXElement => {\n  assertSlots<AvatarBaseSlots>(state);\n\n  return (\n    <state.root>\n      {state.initials && <state.initials />}\n      {state.icon && <state.icon />}\n      {state.image && <state.image />}\n      {state.badge && <state.badge />}\n      {state.activeAriaLabelElement}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC3BJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}

package/lib/components/Avatar/useAvatar.js

@@ -11,11 +11,11 @@ export const DEFAULT_STRINGS = {
     inactive: 'inactive'
 };
 export const useAvatar_unstable = (props, ref)=>{
+    var _ref;
     const { dir } = useFluent();
     const { shape: contextShape, size: contextSize } = useAvatarContext();
     const { size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', activeAppearance = 'ring', idForColor, color: propColor = 'neutral', ...rest } = props;
     const state = useAvatarBase_unstable(rest, ref);
-    var _ref;
     // Resolve 'colorful' to a specific color name
     const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
     if (state.initials) {