@fluentui/react-avatar 9.4.10 → 9.5.0

package/lib-commonjs/components/Avatar/{useAvatarStyles.js → useAvatarStyles.styles.js}

@@ -21,8 +21,22 @@ const avatarClassNames = {
     icon: 'fui-Avatar__icon',
     badge: 'fui-Avatar__badge'
 };
-const useRootClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rz243wu", null, [
-    ".rz243wu{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}"
+// CSS variables used internally in Avatar's styles
+const vars = {
+    badgeRadius: '--fui-Avatar-badgeRadius',
+    badgeGap: '--fui-Avatar-badgeGap',
+    badgeAlign: '--fui-Avatar-badgeAlign',
+    ringWidth: '--fui-Avatar-ringWidth'
+};
+const useRootClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r81b29z", "r1aatmv", [
+    ".r81b29z{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}",
+    ".r81b29z::before,.r81b29z::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){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}",
+    ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}",
+    ".r1aatmv{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}",
+    ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left: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){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}",
+    ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"
 ]);
 const useImageClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r136dc0n", "rjly0nl", [
     ".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}",
@@ -32,6 +46,21 @@ const useIconInitialsClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rip
     ".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}",
     ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}"
 ]);
+/**
+ * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
+ * This creates a transparent gap between the badge and Avatar.
+ *
+ * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
+ */ const badgeMask = (margin)=>{
+    // Center the cutout at the badge's radius away from the edge.
+    // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
+    const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
+    // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
+    // to "fade" from transparent to opaque over a half-pixel and ease the transition.
+    const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
+    const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
+    return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
+};
 const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
     textCaption2Strong: {
         Be2twd7: "f13mqy1h"
@@ -125,146 +154,54 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         Bmy1vo4: "fv0atk9",
         B3o57yi: "f1iry5bo",
         Bkqvd7p: "f15n41j8",
-        Hwfdqs: "f1onx1g3",
-        Ftih45: "f1wl9k8s",
-        Brfgrao: "f1j7ml58",
-        Bciustq: "ffi060y",
-        Fbdkly: [
-            "f1fzr1x6",
-            "f1f351id"
-        ],
-        lawp4y: "fchca7p",
-        mdwyqc: [
-            "f1f351id",
-            "f1fzr1x6"
-        ],
-        Budzafs: [
-            "f1kd9phw",
-            "fyf2ch2"
-        ],
-        r59vdv: [
-            "fyf2ch2",
-            "f1kd9phw"
-        ],
-        n07z76: [
-            "f1gnrg9b",
-            "f1xx2lx6"
-        ],
-        ck0cow: [
-            "f1xx2lx6",
-            "f1gnrg9b"
-        ],
-        B8bqphf: "f1e9wvyh",
-        h7gv66: "f1vyz52m",
-        wjn42g: "f1s8xkrt",
-        B1pumaf: "f1ak47q9"
+        Hwfdqs: "f1onx1g3"
     },
     ring: {
-        Bdkvgpv: "f163fonl",
-        m598lv: [
-            "f1yq6w5o",
-            "f1jpmc5p"
-        ],
-        qa3bma: "f11yjt3y",
-        Bbv0w2i: [
-            "f1jpmc5p",
-            "f1yq6w5o"
-        ]
+        Ftih45: "f1wl9k8s"
+    },
+    ringBadgeCutout: {
+        f4a502: "fp2gujx"
     },
     ringThick: {
-        qehafq: "f1rbtjc9",
-        Bicfajf: [
-            "f1wm0e7m",
-            "f1o0l8kp"
-        ],
-        susq4k: "f1tz5420",
-        Biibvgv: [
-            "f1o0l8kp",
-            "f1wm0e7m"
-        ],
-        B0qfbqy: "f1q30tuz",
-        B4f6apu: [
-            "f9c0djs",
-            "fcwzx2y"
-        ],
-        y0oebl: "f1hdqo1a",
-        uvfttm: [
-            "fcwzx2y",
-            "f9c0djs"
-        ]
+        of393c: "fq1w1vq"
     },
     ringThicker: {
-        qehafq: "fk7ejgl",
-        Bicfajf: [
-            "f12sbt0w",
-            "f1tnh028"
-        ],
-        susq4k: "fcrsff4",
-        Biibvgv: [
-            "f1tnh028",
-            "f12sbt0w"
-        ],
-        B0qfbqy: "f1jrge4j",
-        B4f6apu: [
-            "fc2vpa6",
-            "f133djwz"
-        ],
-        y0oebl: "f9hcsm3",
-        uvfttm: [
-            "f133djwz",
-            "fc2vpa6"
-        ]
+        of393c: "fzg6ace"
     },
     ringThickest: {
-        qehafq: "fl3e39p",
-        Bicfajf: [
-            "f14m8wrz",
-            "fckzhtt"
-        ],
-        susq4k: "fnxq6pw",
-        Biibvgv: [
-            "fckzhtt",
-            "f14m8wrz"
-        ],
-        B0qfbqy: "fr6r3yi",
-        B4f6apu: [
-            "ftxoq8w",
-            "f4gs2h8"
-        ],
-        y0oebl: "f9gga8r",
-        uvfttm: [
-            "f4gs2h8",
-            "ftxoq8w"
-        ]
+        of393c: "f1nu8p71"
+    },
+    shadow: {
+        Bsft5z2: "f13zj6fq"
     },
     shadow4: {
-        h8m2vh: "f196qwgu"
+        Be6vj1x: "fcjn15l"
     },
     shadow8: {
-        h8m2vh: "fut48mo"
+        Be6vj1x: "f1tm8t9f"
     },
     shadow16: {
-        h8m2vh: "fh2kfig"
+        Be6vj1x: "f1a1aohj"
     },
     shadow28: {
-        h8m2vh: "f4c2u2p"
+        Be6vj1x: "fond6v5"
     },
     inactive: {
         abs64n: "fp25eh",
         Bz10aip: "f1clczzi",
         Bkqvd7p: "f1l3s34x",
-        qehafq: "fe3o830",
-        Bicfajf: [
-            "fzynn9s",
-            "f1z0ukd1"
+        Bucmhp4: "f1f5ar78",
+        b2tv09: [
+            "fqxtap0",
+            "fhjukvy"
         ],
-        susq4k: "f1kyqvp9",
-        Biibvgv: [
-            "f1z0ukd1",
-            "fzynn9s"
+        Bfgortx: "f1qj1nzo",
+        Bnvr3x9: [
+            "fhjukvy",
+            "fqxtap0"
         ],
-        vz82u: "f1dhznln",
-        wjn42g: "f1iysauc"
+        b6ubon: "fw457kn",
+        Bqinb2h: "f1wmllxl"
     },
     badge: {
         qhf8xq: "f1euv43f",
@@ -272,11 +209,40 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         j35jbq: [
             "f1e31b4d",
             "f1vgc2s3"
-        ],
-        E5pizo: "ffo9j2l"
+        ]
+    },
+    badgeCutout: {
+        btxmck: "f1eugkqs"
+    },
+    badgeAlign: {
+        Dnlfbu: [
+            "f1tlnv9o",
+            "f1y9kyih"
+        ]
+    },
+    tiny: {
+        Bdjeniz: "f1uwoubl",
+        niu6jh: "fid048z"
     },
-    badgeLarge: {
-        E5pizo: "f1nayfl2"
+    "extra-small": {
+        Bdjeniz: "f13ar0e0",
+        niu6jh: "fid048z"
+    },
+    small: {
+        Bdjeniz: "fwwuruf",
+        niu6jh: "fid048z"
+    },
+    medium: {
+        Bdjeniz: "f1af27q5",
+        niu6jh: "fid048z"
+    },
+    large: {
+        Bdjeniz: "f18yy57a",
+        niu6jh: "f924bxt"
+    },
+    "extra-large": {
+        Bdjeniz: "f2jg042",
+        niu6jh: "f924bxt"
     },
     icon12: {
         Be2twd7: "f1ugzwwg"
@@ -327,65 +293,39 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}",
         ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}",
         ".f1wl9k8s::before{content:\"\";}",
-        ".f1j7ml58::before{position:absolute;}",
-        ".ffi060y::before{top:0;}",
-        ".f1fzr1x6::before{left:0;}",
-        ".f1f351id::before{right:0;}",
-        ".fchca7p::before{bottom:0;}",
-        ".f1kd9phw::before{border-bottom-right-radius:inherit;}",
-        ".fyf2ch2::before{border-bottom-left-radius:inherit;}",
-        ".f1gnrg9b::before{border-top-right-radius:inherit;}",
-        ".f1xx2lx6::before{border-top-left-radius:inherit;}",
-        ".f1e9wvyh::before{transition-property:margin,opacity;}",
-        ".f1vyz52m::before{transition-duration:var(--durationUltraSlow),var(--durationSlower);}",
-        ".f1s8xkrt::before{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}",
-        ".f163fonl::before{border-top-style:solid;}",
-        ".f1yq6w5o::before{border-right-style:solid;}",
-        ".f1jpmc5p::before{border-left-style:solid;}",
-        ".f11yjt3y::before{border-bottom-style:solid;}",
-        ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}",
-        ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}",
-        ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}",
-        ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}",
-        ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}",
-        ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}",
-        ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}",
-        ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}",
-        ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}",
-        ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}",
-        ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}",
-        ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}",
-        ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}",
-        ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}",
-        ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}",
-        ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}",
-        ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}",
-        ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}",
-        ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}",
-        ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}",
-        ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}",
-        ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}",
-        ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}",
-        ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}",
-        ".f196qwgu::before{box-shadow:var(--shadow4);}",
-        ".fut48mo::before{box-shadow:var(--shadow8);}",
-        ".fh2kfig::before{box-shadow:var(--shadow16);}",
-        ".f4c2u2p::before{box-shadow:var(--shadow28);}",
+        ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}",
+        ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}",
+        ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}",
+        ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".fcjn15l::after{box-shadow:var(--shadow4);}",
+        ".f1tm8t9f::after{box-shadow:var(--shadow8);}",
+        ".f1a1aohj::after{box-shadow:var(--shadow16);}",
+        ".fond6v5::after{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);}",
         ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}",
-        ".fe3o830::before{margin-top:0;}",
-        ".fzynn9s::before{margin-right:0;}",
-        ".f1z0ukd1::before{margin-left:0;}",
-        ".f1kyqvp9::before{margin-bottom:0;}",
-        ".f1dhznln::before{opacity:0;}",
-        ".f1iysauc::before{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}",
+        ".f1f5ar78::before,.f1f5ar78::after{margin-top:0;}",
+        ".fqxtap0::before,.fqxtap0::after{margin-right:0;}",
+        ".fhjukvy::before,.fhjukvy::after{margin-left:0;}",
+        ".f1qj1nzo::before,.f1qj1nzo::after{margin-bottom:0;}",
+        ".fw457kn::before,.fw457kn::after{opacity:0;}",
+        ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}",
         ".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);}",
+        ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) 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));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) 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));}",
+        ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}",
+        ".f1y9kyih{--fui-Avatar-badgeAlign:left;}",
+        ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}",
+        ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}",
+        ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}",
+        ".fwwuruf{--fui-Avatar-badgeRadius:6px;}",
+        ".f1af27q5{--fui-Avatar-badgeRadius:8px;}",
+        ".f18yy57a{--fui-Avatar-badgeRadius:10px;}",
+        ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}",
+        ".f2jg042{--fui-Avatar-badgeRadius:14px;}",
         ".f1ugzwwg{font-size:12px;}",
         ".f4ybsrx{font-size:16px;}",
         ".fe5j1ua{font-size:20px;}",
@@ -400,12 +340,6 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
             {
                 m: "screen and (prefers-reduced-motion: reduce)"
             }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{transition-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
         ]
     ]
 });
@@ -501,260 +435,329 @@ const useSizeStyles = /*#__PURE__*/ (0, _react["__styles"])({
 const useColorStyles = /*#__PURE__*/ (0, _react["__styles"])({
     neutral: {
         sj55zd: "f11d4kpn",
-        De3pzq: "f18f03hv",
-        Bic5iru: "f1uuiafn"
+        De3pzq: "f18f03hv"
     },
     brand: {
         sj55zd: "fonrgv7",
-        De3pzq: "f1blnnmj",
-        Bic5iru: "f1uuiafn"
+        De3pzq: "f1blnnmj"
     },
     "dark-red": {
         sj55zd: "fqjd1y1",
-        De3pzq: "f1vq2oo4",
-        Bic5iru: "f1t2x9on"
+        De3pzq: "f1vq2oo4"
     },
     cranberry: {
         sj55zd: "fg9gses",
-        De3pzq: "f1lwxszt",
-        Bic5iru: "f1pvshc9"
+        De3pzq: "f1lwxszt"
     },
     red: {
         sj55zd: "f23f7i0",
-        De3pzq: "f1q9qhfq",
-        Bic5iru: "f1ectbk9"
+        De3pzq: "f1q9qhfq"
     },
     pumpkin: {
         sj55zd: "fjnan08",
-        De3pzq: "fz91bi3",
-        Bic5iru: "fvzpl0b"
+        De3pzq: "fz91bi3"
     },
     peach: {
         sj55zd: "fknu15p",
-        De3pzq: "f1b9nr51",
-        Bic5iru: "fwj2kd7"
+        De3pzq: "f1b9nr51"
     },
     marigold: {
         sj55zd: "f9603vw",
-        De3pzq: "f3z4w6d",
-        Bic5iru: "fr120vy"
+        De3pzq: "f3z4w6d"
     },
     gold: {
         sj55zd: "fmq0uwp",
-        De3pzq: "fg50kya",
-        Bic5iru: "f8xmmar"
+        De3pzq: "fg50kya"
     },
     brass: {
         sj55zd: "f28g5vo",
-        De3pzq: "f4w2gd0",
-        Bic5iru: "f1hbety2"
+        De3pzq: "f4w2gd0"
     },
     brown: {
         sj55zd: "ftl572b",
-        De3pzq: "f14wu1f4",
-        Bic5iru: "f1vg3s4g"
+        De3pzq: "f14wu1f4"
     },
     forest: {
         sj55zd: "f1gymlvd",
-        De3pzq: "f19ut4y6",
-        Bic5iru: "f1m3olm5"
+        De3pzq: "f19ut4y6"
     },
     seafoam: {
         sj55zd: "fnnb6wn",
-        De3pzq: "f1n057jc",
-        Bic5iru: "f17xiqtr"
+        De3pzq: "f1n057jc"
     },
     "dark-green": {
         sj55zd: "ff58qw8",
-        De3pzq: "f11t05wk",
-        Bic5iru: "fx32vyh"
+        De3pzq: "f11t05wk"
     },
     "light-teal": {
         sj55zd: "f1up9qbj",
-        De3pzq: "f42feg1",
-        Bic5iru: "f1mkihwv"
+        De3pzq: "f42feg1"
     },
     teal: {
         sj55zd: "f135dsb4",
-        De3pzq: "f6hvv1p",
-        Bic5iru: "fecnooh"
+        De3pzq: "f6hvv1p"
     },
     steel: {
         sj55zd: "f151dlcp",
-        De3pzq: "f1lnp8zf",
-        Bic5iru: "f15hfgzm"
+        De3pzq: "f1lnp8zf"
     },
     blue: {
         sj55zd: "f1rjv50u",
-        De3pzq: "f1ggcpy6",
-        Bic5iru: "fqproka"
+        De3pzq: "f1ggcpy6"
     },
     "royal-blue": {
         sj55zd: "f1emykk5",
-        De3pzq: "f12rj61f",
-        Bic5iru: "f17v2w59"
+        De3pzq: "f12rj61f"
     },
     cornflower: {
         sj55zd: "fqsigj7",
-        De3pzq: "f8k7hur",
-        Bic5iru: "fp0q1mo"
+        De3pzq: "f8k7hur"
     },
     navy: {
         sj55zd: "f1nj97xi",
-        De3pzq: "f19gw0ux",
-        Bic5iru: "f1nlym55"
+        De3pzq: "f19gw0ux"
     },
     lavender: {
         sj55zd: "fwctg0i",
-        De3pzq: "ff379vm",
-        Bic5iru: "f62vk8h"
+        De3pzq: "ff379vm"
     },
     purple: {
         sj55zd: "fjrsgpu",
-        De3pzq: "f1mzf1e1",
-        Bic5iru: "f15zl69q"
+        De3pzq: "f1mzf1e1"
     },
     grape: {
         sj55zd: "f1fiiydq",
-        De3pzq: "f1o4k8oy",
-        Bic5iru: "f53w4j7"
+        De3pzq: "f1o4k8oy"
     },
     lilac: {
         sj55zd: "f1res9jt",
-        De3pzq: "f1x6mz1o",
-        Bic5iru: "fu2771t"
+        De3pzq: "f1x6mz1o"
     },
     pink: {
         sj55zd: "fv3fbbi",
-        De3pzq: "fydlv6t",
-        Bic5iru: "fzflscs"
+        De3pzq: "fydlv6t"
     },
     magenta: {
         sj55zd: "f1f1fwnz",
-        De3pzq: "f4xb6j5",
-        Bic5iru: "fb6rmqc"
+        De3pzq: "f4xb6j5"
     },
     plum: {
         sj55zd: "f8ptl6j",
-        De3pzq: "fqo8e26",
-        Bic5iru: "f1a4gm5b"
+        De3pzq: "fqo8e26"
     },
     beige: {
         sj55zd: "f1ntv3ld",
-        De3pzq: "f101elhj",
-        Bic5iru: "f1qpf9z1"
+        De3pzq: "f101elhj"
     },
     mink: {
         sj55zd: "f1fscmp",
-        De3pzq: "f13g8o5c",
-        Bic5iru: "f1l7or83"
+        De3pzq: "f13g8o5c"
     },
     platinum: {
         sj55zd: "f1dr00v2",
-        De3pzq: "fkh7blw",
-        Bic5iru: "fzrj0iu"
+        De3pzq: "fkh7blw"
     },
     anchor: {
         sj55zd: "f1f3ti53",
-        De3pzq: "fu4yj0j",
-        Bic5iru: "f8oz6wf"
+        De3pzq: "fu4yj0j"
     }
 }, {
     d: [
         ".f11d4kpn{color:var(--colorNeutralForeground3);}",
         ".f18f03hv{background-color:var(--colorNeutralBackground6);}",
-        ".f1uuiafn::before{color:var(--colorBrandStroke1);}",
         ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
         ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}",
         ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}",
         ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}",
-        ".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}",
         ".fg9gses{color:var(--colorPaletteCranberryForeground2);}",
         ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}",
-        ".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}",
         ".f23f7i0{color:var(--colorPaletteRedForeground2);}",
         ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}",
-        ".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}",
         ".fjnan08{color:var(--colorPalettePumpkinForeground2);}",
         ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}",
-        ".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}",
         ".fknu15p{color:var(--colorPalettePeachForeground2);}",
         ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}",
-        ".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}",
         ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}",
         ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}",
-        ".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}",
         ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}",
         ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}",
-        ".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}",
         ".f28g5vo{color:var(--colorPaletteBrassForeground2);}",
         ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}",
-        ".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}",
         ".ftl572b{color:var(--colorPaletteBrownForeground2);}",
         ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}",
-        ".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}",
         ".f1gymlvd{color:var(--colorPaletteForestForeground2);}",
         ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}",
-        ".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}",
         ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}",
         ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}",
-        ".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}",
         ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}",
         ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}",
-        ".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}",
         ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}",
         ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}",
-        ".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}",
         ".f135dsb4{color:var(--colorPaletteTealForeground2);}",
         ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}",
-        ".fecnooh::before{color:var(--colorPaletteTealBorderActive);}",
         ".f151dlcp{color:var(--colorPaletteSteelForeground2);}",
         ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}",
-        ".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}",
         ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}",
         ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}",
-        ".fqproka::before{color:var(--colorPaletteBlueBorderActive);}",
         ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}",
         ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}",
-        ".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}",
         ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}",
         ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}",
-        ".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}",
         ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}",
         ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}",
-        ".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}",
         ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}",
         ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}",
-        ".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}",
         ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}",
         ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}",
-        ".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}",
         ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}",
         ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}",
-        ".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}",
         ".f1res9jt{color:var(--colorPaletteLilacForeground2);}",
         ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}",
-        ".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}",
         ".fv3fbbi{color:var(--colorPalettePinkForeground2);}",
         ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}",
-        ".fzflscs::before{color:var(--colorPalettePinkBorderActive);}",
         ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}",
         ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}",
-        ".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}",
         ".f8ptl6j{color:var(--colorPalettePlumForeground2);}",
         ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}",
-        ".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}",
         ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}",
         ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}",
-        ".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}",
         ".f1fscmp{color:var(--colorPaletteMinkForeground2);}",
         ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}",
-        ".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}",
         ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}",
         ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}",
-        ".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}",
         ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}",
-        ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}",
+        ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"
+    ]
+});
+const useRingColorStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    neutral: {
+        Bic5iru: "f1uuiafn"
+    },
+    brand: {
+        Bic5iru: "f1uuiafn"
+    },
+    "dark-red": {
+        Bic5iru: "f1t2x9on"
+    },
+    cranberry: {
+        Bic5iru: "f1pvshc9"
+    },
+    red: {
+        Bic5iru: "f1ectbk9"
+    },
+    pumpkin: {
+        Bic5iru: "fvzpl0b"
+    },
+    peach: {
+        Bic5iru: "fwj2kd7"
+    },
+    marigold: {
+        Bic5iru: "fr120vy"
+    },
+    gold: {
+        Bic5iru: "f8xmmar"
+    },
+    brass: {
+        Bic5iru: "f1hbety2"
+    },
+    brown: {
+        Bic5iru: "f1vg3s4g"
+    },
+    forest: {
+        Bic5iru: "f1m3olm5"
+    },
+    seafoam: {
+        Bic5iru: "f17xiqtr"
+    },
+    "dark-green": {
+        Bic5iru: "fx32vyh"
+    },
+    "light-teal": {
+        Bic5iru: "f1mkihwv"
+    },
+    teal: {
+        Bic5iru: "fecnooh"
+    },
+    steel: {
+        Bic5iru: "f15hfgzm"
+    },
+    blue: {
+        Bic5iru: "fqproka"
+    },
+    "royal-blue": {
+        Bic5iru: "f17v2w59"
+    },
+    cornflower: {
+        Bic5iru: "fp0q1mo"
+    },
+    navy: {
+        Bic5iru: "f1nlym55"
+    },
+    lavender: {
+        Bic5iru: "f62vk8h"
+    },
+    purple: {
+        Bic5iru: "f15zl69q"
+    },
+    grape: {
+        Bic5iru: "f53w4j7"
+    },
+    lilac: {
+        Bic5iru: "fu2771t"
+    },
+    pink: {
+        Bic5iru: "fzflscs"
+    },
+    magenta: {
+        Bic5iru: "fb6rmqc"
+    },
+    plum: {
+        Bic5iru: "f1a4gm5b"
+    },
+    beige: {
+        Bic5iru: "f1qpf9z1"
+    },
+    mink: {
+        Bic5iru: "f1l7or83"
+    },
+    platinum: {
+        Bic5iru: "fzrj0iu"
+    },
+    anchor: {
+        Bic5iru: "f8oz6wf"
+    }
+}, {
+    d: [
+        ".f1uuiafn::before{color:var(--colorBrandStroke1);}",
+        ".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}",
+        ".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}",
+        ".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}",
+        ".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}",
+        ".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}",
+        ".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}",
+        ".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}",
+        ".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}",
+        ".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}",
+        ".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}",
+        ".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}",
+        ".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}",
+        ".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}",
+        ".fecnooh::before{color:var(--colorPaletteTealBorderActive);}",
+        ".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}",
+        ".fqproka::before{color:var(--colorPaletteBlueBorderActive);}",
+        ".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}",
+        ".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}",
+        ".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}",
+        ".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}",
+        ".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}",
+        ".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}",
+        ".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}",
+        ".fzflscs::before{color:var(--colorPalettePinkBorderActive);}",
+        ".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}",
+        ".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}",
+        ".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}",
+        ".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}",
+        ".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}",
         ".f8oz6wf::before{color:var(--colorPaletteAnchorBorderActive);}"
     ]
 });
@@ -766,11 +769,14 @@ const useAvatarStyles_unstable = (state)=>{
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const colorStyles = useColorStyles();
+    const ringColorStyles = useRingColorStyles();
     const rootClasses = [
         rootClassName,
-        size !== 32 && sizeStyles[size],
-        colorStyles[color]
+        size !== 32 && sizeStyles[size]
     ];
+    if (state.badge) {
+        rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
+    }
     if (size <= 24) {
         rootClasses.push(styles.textCaption2Strong);
     } else if (size <= 28) {
@@ -798,7 +804,10 @@ const useAvatarStyles_unstable = (state)=>{
     if (active === 'active' || active === 'inactive') {
         rootClasses.push(styles.activeOrInactive);
         if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
-            rootClasses.push(styles.ring);
+            rootClasses.push(styles.ring, ringColorStyles[color]);
+            if (state.badge) {
+                rootClasses.push(styles.ringBadgeCutout);
+            }
             if (size <= 48) {
                 rootClasses.push(styles.ringThick);
             } else if (size <= 64) {
@@ -808,6 +817,7 @@ const useAvatarStyles_unstable = (state)=>{
             }
         }
         if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
+            rootClasses.push(styles.shadow);
             if (size <= 28) {
                 rootClasses.push(styles.shadow4);
             } else if (size <= 48) {
@@ -825,13 +835,13 @@ const useAvatarStyles_unstable = (state)=>{
     }
     state.root.className = (0, _react.mergeClasses)(avatarClassNames.root, ...rootClasses, state.root.className);
     if (state.badge) {
-        state.badge.className = (0, _react.mergeClasses)(avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+        state.badge.className = (0, _react.mergeClasses)(avatarClassNames.badge, styles.badge, state.badge.className);
     }
     if (state.image) {
-        state.image.className = (0, _react.mergeClasses)(avatarClassNames.image, imageClassName, state.image.className);
+        state.image.className = (0, _react.mergeClasses)(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
     }
     if (state.initials) {
-        state.initials.className = (0, _react.mergeClasses)(avatarClassNames.initials, iconInitialsClassName, state.initials.className);
+        state.initials.className = (0, _react.mergeClasses)(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
     }
     if (state.icon) {
         let iconSizeClass;
@@ -850,9 +860,9 @@ const useAvatarStyles_unstable = (state)=>{
         } else {
             iconSizeClass = styles.icon48;
         }
-        state.icon.className = (0, _react.mergeClasses)(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
+        state.icon.className = (0, _react.mergeClasses)(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
     }
     return state;
-}; //# sourceMappingURL=useAvatarStyles.js.map
+}; //# sourceMappingURL=useAvatarStyles.styles.js.map
 
-//# sourceMappingURL=useAvatarStyles.js.map
+//# sourceMappingURL=useAvatarStyles.styles.js.map