@fluentui/react-avatar 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11

package/lib/components/Avatar/useAvatarStyles.js

@@ -1,9 +1,16 @@
-import { __spreadArrays } from "tslib";
-import { mergeClasses, __styles } from '@fluentui/react-make-styles'; //
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const avatarClassNames = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge'
+}; //
 // TODO: All animation constants should go to theme or globals?
 // https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665
 
-var animationDuration = {
+const animationDuration = {
   duration50: '50ms',
   duration100: '100ms',
   duration150: '150ms',
@@ -12,7 +19,7 @@ var animationDuration = {
   duration400: '400ms',
   duration500: '500ms'
 };
-var animationTiming = {
+const animationTiming = {
   ultraFast: animationDuration.duration50,
   faster: animationDuration.duration100,
   fast: animationDuration.duration150,
@@ -21,7 +28,7 @@ var animationTiming = {
   slower: animationDuration.duration400,
   ultraSlow: animationDuration.duration500
 };
-var animationLines = {
+const animationLines = {
   decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',
   decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',
   decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',
@@ -32,7 +39,7 @@ var animationLines = {
   easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',
   linear: 'linear'
 };
-var animations = {
+const animations = {
   fastOutSlowInMax: animationLines.decelerateMax,
   fastOutSlowInMid: animationLines.decelerateMid,
   fastOutSlowInMin: animationLines.decelerateMin,
@@ -44,20 +51,22 @@ var animations = {
   nullEasing: animationLines.linear
 };
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f14t3ns0",
     "Bnnss6s": "fi64zpg",
     "qhf8xq": "f10pi13n",
     "ha4doy": "fmrv4ls",
-    "Dimara": "f44lkw9",
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
     "Bahqtrf": "fk6fouc",
-    "Bhrd7zp": "fl43uef",
-    "E5pizo": "fi63bka"
+    "Bhrd7zp": "fl43uef"
   },
-  "textCaption2": {
+  "textCaption2Strong": {
     "Be2twd7": "f13mqy1h",
-    "Bhrd7zp": "figsok6"
+    "Bhrd7zp": "fl43uef"
   },
   "textCaption1Strong": {
     "Be2twd7": "fy9rknc"
@@ -75,28 +84,47 @@ var useStyles = /*#__PURE__*/__styles({
     "Be2twd7": "f1x0m3f5"
   },
   "squareSmall": {
-    "Dimara": "fq9zq91"
+    "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
+    "Beyfa6y": ["fi2rrw2", "f1g3puop"],
+    "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
+    "Btl43ni": ["f1s4nn1u", "f1rstyi9"]
   },
   "squareMedium": {
-    "Dimara": "ft85np5"
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"]
   },
   "squareLarge": {
-    "Dimara": "f1o0qvyv"
+    "Bbmb7ep": ["f1ldthgs", "frrelxk"],
+    "Beyfa6y": ["frrelxk", "f1ldthgs"],
+    "B7oj6ja": ["fobrfso", "ffisxpw"],
+    "Btl43ni": ["ffisxpw", "fobrfso"]
   },
   "squareXLarge": {
-    "Dimara": "f1kijzfu"
+    "Bbmb7ep": ["fnivh3a", "fc7yr5o"],
+    "Beyfa6y": ["fc7yr5o", "fnivh3a"],
+    "B7oj6ja": ["f1el4m67", "f8yange"],
+    "Btl43ni": ["f8yange", "f1el4m67"]
   },
   "activeOrInactive": {
     "Bz10aip": "ftfx35i",
-    "Bi2q7bf": ["fdxp0rs", "f1j95ynu"],
+    "Bmy1vo4": "fv0atk9",
+    "B3o57yi": "f19s7mzo",
+    "Cwk7ip": "f1iounmt",
     "rurcny": "fuzzvh5",
     "xx9plb": "fxf9f1y",
     "Bf8kmfk": "f14oqhab",
     "Byque4d": ["f1t0u0az", "fmlx6bj"],
     "Bj2wrql": "flqennz",
     "qd6xl9": ["fmlx6bj", "f1t0u0az"],
-    "zf3lio": "fi8trbp",
-    "Daq60n": ["focxjrq", "foku6zw"]
+    "px8gyy": ["f7gntx7", "f1mc89cj"],
+    "B5c9fhp": ["f1mc89cj", "f7gntx7"],
+    "Bhe99jt": ["f1vj2lhw", "f1trbl44"],
+    "B2r1szc": ["f1trbl44", "f1vj2lhw"],
+    "iukgx1": "f1psx457",
+    "B5szp9g": "feqeuj",
+    "Bk5q3gb": "f1o6ticg"
   },
   "ring": {
     "ijj6k": "f17s8eb2",
@@ -139,39 +167,31 @@ var useStyles = /*#__PURE__*/__styles({
     "Bcasopp": ["fthel6x", "f1lg5lk7"]
   },
   "shadow4": {
-    "Byi50p1": ["f15gzsq7", "fmwiy3e"]
+    "Byi50p1": "f15gzsq7"
   },
   "shadow8": {
-    "Byi50p1": ["f1eebxl", "f1g7losn"]
+    "Byi50p1": "f1eebxl"
   },
   "shadow16": {
-    "Byi50p1": ["fsnqaoy", "fatcbo"]
+    "Byi50p1": "fsnqaoy"
   },
   "shadow28": {
-    "Byi50p1": ["f1sh7vtk", "f12w6mm1"]
-  },
-  "glow4": {
-    "Byi50p1": ["f1req3t3", "f1qs661"]
-  },
-  "glow8": {
-    "Byi50p1": ["f11tkyhd", "f1hlud6i"]
-  },
-  "glow16": {
-    "Byi50p1": ["f1xqctk0", "fuya5pq"]
-  },
-  "glow28": {
-    "Byi50p1": ["fqxfid0", "f1v4stzs"]
+    "Byi50p1": "f1sh7vtk"
   },
   "inactive": {
     "abs64n": "fp25eh",
     "Bz10aip": "f1clczzi",
-    "Bi2q7bf": ["f1kdcj3l", "f1ffhrox"],
+    "Bmy1vo4": "fv0atk9",
+    "B3o57yi": "f19s7mzo",
+    "Cwk7ip": "ftf4am9",
     "D18yk7": "fede8dz",
     "vrnxjr": ["fhlqc5k", "flnsm0g"],
     "z1nrnc": "fc3uzr1",
     "Hpwax1": ["flnsm0g", "fhlqc5k"],
     "ngabwx": "f1429bq1",
-    "Daq60n": ["f1l86c9o", "fxt0dw5"]
+    "iukgx1": "f1psx457",
+    "B5szp9g": "feqeuj",
+    "Bk5q3gb": "fuorts1"
   },
   "badge": {
     "qhf8xq": "f1euv43f",
@@ -188,29 +208,74 @@ var useStyles = /*#__PURE__*/__styles({
     "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
     "a9b677": "fly5x3f",
     "Bqenvij": "f1l02sjl",
-    "Dimara": "f12b9xdw",
+    "Bbmb7ep": ["f1d9uwra", "fzibvwi"],
+    "Beyfa6y": ["fzibvwi", "f1d9uwra"],
+    "B7oj6ja": ["fuoumxm", "f1vtqnvc"],
+    "Btl43ni": ["f1vtqnvc", "fuoumxm"],
     "st4lth": "f1ps3kmd",
     "ha4doy": "f12kltsn"
   },
-  "iconLabel": {
+  "iconInitials": {
     "qhf8xq": "f1euv43f",
+    "B7ck84d": "f1ewtqcl",
     "Bhzewxz": "f15twtuk",
     "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
     "a9b677": "fly5x3f",
     "Bqenvij": "f1l02sjl",
     "Bg96gwp": "fp6vxd",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
     "mc9l5x": "f22iagw",
     "Bt984gj": "f122n59",
     "Brf1p80": "f4d9j23",
     "ha4doy": "fa4t5tb",
     "fsow6f": "f17mccla",
-    "Dimara": "f12b9xdw"
+    "famaaq": "f1xqy1su",
+    "Bbmb7ep": ["f1d9uwra", "fzibvwi"],
+    "Beyfa6y": ["fzibvwi", "f1d9uwra"],
+    "B7oj6ja": ["fuoumxm", "f1vtqnvc"],
+    "Btl43ni": ["f1vtqnvc", "fuoumxm"]
+  },
+  "icon12": {
+    "Be2twd7": "f1ugzwwg"
+  },
+  "icon16": {
+    "Be2twd7": "f4ybsrx"
+  },
+  "icon20": {
+    "Be2twd7": "fe5j1ua"
+  },
+  "icon24": {
+    "Be2twd7": "f1rt2boy"
+  },
+  "icon28": {
+    "Be2twd7": "f24l1pt"
+  },
+  "icon32": {
+    "Be2twd7": "ffl51b"
+  },
+  "icon48": {
+    "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;}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fi63bka{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorTransparentStroke) inset;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".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);}", ".fq9zq91{border-radius:var(--borderRadiusSmall);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1o0qvyv{border-radius:var(--borderRadiusLarge);}", ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fdxp0rs{-webkit-transition:-webkit-transform 500ms cubic-bezier(0.80,0.00,0.20,1.00),opacity 100ms linear;transition:transform 500ms cubic-bezier(0.80,0.00,0.20,1.00),opacity 100ms linear;}", ".f1j95ynu{-webkit-transition:-webkit-transform 500ms cubic-bezier(0.80, 0.00, 0.20, 1.00),opacity 100ms linear;transition:transform 500ms cubic-bezier(0.80, 0.00, 0.20, 1.00),opacity 100ms linear;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f14oqhab:before{top:0;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".flqennz:before{bottom:0;}", ".fi8trbp:before{border-radius:inherit;}", ".focxjrq:before{-webkit-transition:margin 500ms cubic-bezier(0.80,0.00,0.20,1.00),opacity 400ms linear;transition:margin 500ms cubic-bezier(0.80,0.00,0.20,1.00),opacity 400ms linear;}", ".foku6zw:before{-webkit-transition:margin 500ms cubic-bezier(0.80, 0.00, 0.20, 1.00),opacity 400ms linear;transition:margin 500ms cubic-bezier(0.80, 0.00, 0.20, 1.00),opacity 400ms 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);}", ".fmwiy3e:before{box-shadow:var(--shadow-4);}", ".f1eebxl:before{box-shadow:var(--shadow8);}", ".f1g7losn:before{box-shadow:var(--shadow-8);}", ".fsnqaoy:before{box-shadow:var(--shadow16);}", ".fatcbo:before{box-shadow:var(--shadow-16);}", ".f1sh7vtk:before{box-shadow:var(--shadow28);}", ".f12w6mm1:before{box-shadow:var(--shadow-28);}", ".f1req3t3:before{box-shadow:var(--shadow4),0 0 4px 2px rgba(0,120,212,0.3);}", ".f1qs661:before{box-shadow:var(--shadow-4),0 0 4px 2px rgba(0,120,212,0.3);}", ".f11tkyhd:before{box-shadow:var(--shadow8),0 0 8px 2px rgba(0,120,212,0.3);}", ".f1hlud6i:before{box-shadow:var(--shadow-8),0 0 8px 2px rgba(0,120,212,0.3);}", ".f1xqctk0:before{box-shadow:var(--shadow16),0 0 8px 2px rgba(0,120,212,0.3);}", ".fuya5pq:before{box-shadow:var(--shadow-16),0 0 8px 2px rgba(0,120,212,0.3);}", ".fqxfid0:before{box-shadow:var(--shadow28),0 0 28px 4px rgba(0,120,212,0.3);}", ".f1v4stzs:before{box-shadow:var(--shadow-28),0 0 28px 4px rgba(0,120,212,0.3);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".f1kdcj3l{-webkit-transition:-webkit-transform 500ms cubic-bezier(0.33,0.00,0.10,1.00),opacity 100ms linear;transition:transform 500ms cubic-bezier(0.33,0.00,0.10,1.00),opacity 100ms linear;}", ".f1ffhrox{-webkit-transition:-webkit-transform 500ms cubic-bezier(0.33, 0.00, 0.10, 1.00),opacity 100ms linear;transition:transform 500ms cubic-bezier(0.33, 0.00, 0.10, 1.00),opacity 100ms 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;}", ".f1l86c9o:before{-webkit-transition:margin 500ms cubic-bezier(0.33,0.00,0.10,1.00),opacity 400ms linear;transition:margin 500ms cubic-bezier(0.33,0.00,0.10,1.00),opacity 400ms linear;}", ".fxt0dw5:before{-webkit-transition:margin 500ms cubic-bezier(0.33, 0.00, 0.10, 1.00),opacity 400ms linear;transition:margin 500ms cubic-bezier(0.33, 0.00, 0.10, 1.00),opacity 400ms 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%;}", ".f12b9xdw{border-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".fp6vxd{line-height:1;}", ".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;}"]
+  "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;}"]
 });
 
-var useSizeStyles = /*#__PURE__*/__styles({
+const useSizeStyles = /*#__PURE__*/__styles({
+  "16": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt"
+  },
   "20": {
     "a9b677": "f64fuq3",
     "Bqenvij": "fjamq6b"
@@ -264,155 +329,157 @@ var useSizeStyles = /*#__PURE__*/__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;}"]
 });
 
-var useColorStyles = /*#__PURE__*/__styles({
+const useColorStyles = /*#__PURE__*/__styles({
   "neutral": {
     "sj55zd": "f11d4kpn",
-    "ayd6f0": "fqve7z"
+    "De3pzq": "f18f03hv"
   },
   "brand": {
     "sj55zd": "fqpbvvt",
-    "ayd6f0": "fmni2i0"
+    "De3pzq": "f1blnnmj"
   },
-  "darkRed": {
+  "dark-red": {
     "sj55zd": "fqjd1y1",
-    "ayd6f0": "f1oz1xn0"
+    "De3pzq": "f1vq2oo4"
   },
   "cranberry": {
     "sj55zd": "fg9gses",
-    "ayd6f0": "f1aze4e3"
+    "De3pzq": "f1lwxszt"
   },
   "red": {
     "sj55zd": "f23f7i0",
-    "ayd6f0": "fper0yy"
+    "De3pzq": "f1q9qhfq"
   },
   "pumpkin": {
     "sj55zd": "fjnan08",
-    "ayd6f0": "f6324zg"
+    "De3pzq": "fz91bi3"
   },
   "peach": {
     "sj55zd": "fknu15p",
-    "ayd6f0": "fkkm67b"
+    "De3pzq": "f1b9nr51"
   },
   "marigold": {
     "sj55zd": "f9603vw",
-    "ayd6f0": "fgt7mi1"
+    "De3pzq": "f3z4w6d"
   },
   "gold": {
     "sj55zd": "fmq0uwp",
-    "ayd6f0": "fjikhr9"
+    "De3pzq": "fg50kya"
   },
   "brass": {
     "sj55zd": "f28g5vo",
-    "ayd6f0": "fifu2hy"
+    "De3pzq": "f4w2gd0"
   },
   "brown": {
     "sj55zd": "ftl572b",
-    "ayd6f0": "fygwt5x"
+    "De3pzq": "f14wu1f4"
   },
   "forest": {
     "sj55zd": "f1gymlvd",
-    "ayd6f0": "fd9lmqj"
+    "De3pzq": "f19ut4y6"
   },
   "seafoam": {
     "sj55zd": "fnnb6wn",
-    "ayd6f0": "f154k2v8"
+    "De3pzq": "f1n057jc"
   },
-  "darkGreen": {
+  "dark-green": {
     "sj55zd": "ff58qw8",
-    "ayd6f0": "fi9tyyh"
+    "De3pzq": "f11t05wk"
   },
-  "lightTeal": {
+  "light-teal": {
     "sj55zd": "f1up9qbj",
-    "ayd6f0": "fndc5m8"
+    "De3pzq": "f42feg1"
   },
   "teal": {
     "sj55zd": "f135dsb4",
-    "ayd6f0": "f4mxikz"
+    "De3pzq": "f6hvv1p"
   },
   "steel": {
     "sj55zd": "f151dlcp",
-    "ayd6f0": "f1pbol7w"
+    "De3pzq": "f1lnp8zf"
   },
   "blue": {
     "sj55zd": "f1rjv50u",
-    "ayd6f0": "f1k41da4"
+    "De3pzq": "f1ggcpy6"
   },
-  "royalBlue": {
+  "royal-blue": {
     "sj55zd": "f1emykk5",
-    "ayd6f0": "f11u0ylr"
+    "De3pzq": "f12rj61f"
   },
   "cornflower": {
     "sj55zd": "fqsigj7",
-    "ayd6f0": "fbvcuk7"
+    "De3pzq": "f8k7hur"
   },
   "navy": {
     "sj55zd": "f1nj97xi",
-    "ayd6f0": "f80d7iu"
+    "De3pzq": "f19gw0ux"
   },
   "lavender": {
     "sj55zd": "fwctg0i",
-    "ayd6f0": "f1oe6jqm"
+    "De3pzq": "ff379vm"
   },
   "purple": {
     "sj55zd": "fjrsgpu",
-    "ayd6f0": "fi65me1"
+    "De3pzq": "f1mzf1e1"
   },
   "grape": {
     "sj55zd": "f1fiiydq",
-    "ayd6f0": "f9i3bnj"
+    "De3pzq": "f1o4k8oy"
   },
   "lilac": {
     "sj55zd": "f1res9jt",
-    "ayd6f0": "fydr5ee"
+    "De3pzq": "f1x6mz1o"
   },
   "pink": {
     "sj55zd": "fv3fbbi",
-    "ayd6f0": "f13re5qg"
+    "De3pzq": "fydlv6t"
   },
   "magenta": {
     "sj55zd": "f1f1fwnz",
-    "ayd6f0": "fy8elgt"
+    "De3pzq": "f4xb6j5"
   },
   "plum": {
     "sj55zd": "f8ptl6j",
-    "ayd6f0": "fctjgte"
+    "De3pzq": "fqo8e26"
   },
   "beige": {
     "sj55zd": "f1ntv3ld",
-    "ayd6f0": "f1r4rlt8"
+    "De3pzq": "f101elhj"
   },
   "mink": {
     "sj55zd": "f1fscmp",
-    "ayd6f0": "fp253wn"
+    "De3pzq": "f13g8o5c"
   },
   "platinum": {
     "sj55zd": "f1dr00v2",
-    "ayd6f0": "f4rvktu"
+    "De3pzq": "fkh7blw"
   },
   "anchor": {
     "sj55zd": "f1f3ti53",
-    "ayd6f0": "f1bldg66"
+    "De3pzq": "fu4yj0j"
   }
 }, {
-  "d": [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fqve7z{background:var(--colorNeutralBackground6);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".fmni2i0{background:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1oz1xn0{background:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1aze4e3{background:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".fper0yy{background:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".f6324zg{background:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".fkkm67b{background:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".fgt7mi1{background:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fjikhr9{background:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".fifu2hy{background:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".fygwt5x{background:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".fd9lmqj{background:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f154k2v8{background:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".fi9tyyh{background:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".fndc5m8{background:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f4mxikz{background:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1pbol7w{background:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1k41da4{background:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f11u0ylr{background:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".fbvcuk7{background:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f80d7iu{background:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".f1oe6jqm{background:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".fi65me1{background:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f9i3bnj{background:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".fydr5ee{background:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".f13re5qg{background:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".fy8elgt{background:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fctjgte{background:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f1r4rlt8{background:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".fp253wn{background:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".f4rvktu{background:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".f1bldg66{background:var(--colorPaletteAnchorBackground2);}"]
+  "d": [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
 });
 
-export var useAvatarStyles = function (state) {
-  var size = state.size,
-      shape = state.shape,
-      active = state.active,
-      activeAppearance = state.activeAppearance,
-      color = state.color;
-  var styles = useStyles();
-  var sizeStyles = useSizeStyles();
-  var colorStyles = useColorStyles();
-  var rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];
+export const useAvatarStyles_unstable = state => {
+  const {
+    size,
+    shape,
+    active,
+    activeAppearance,
+    color
+  } = state;
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const colorStyles = useColorStyles();
+  const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];
 
   if (size <= 24) {
-    rootClasses.push(styles.textCaption2);
+    rootClasses.push(styles.textCaption2Strong);
   } else if (size <= 28) {
     rootClasses.push(styles.textCaption1Strong);
   } else if (size <= 40) {
@@ -440,7 +507,7 @@ export var useAvatarStyles = function (state) {
   if (active === 'active' || active === 'inactive') {
     rootClasses.push(styles.activeOrInactive);
 
-    if (activeAppearance.includes('ring')) {
+    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
       rootClasses.push(styles.ring);
 
       if (size <= 48) {
@@ -452,7 +519,7 @@ export var useAvatarStyles = function (state) {
       }
     }
 
-    if (activeAppearance.includes('shadow')) {
+    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
       if (size <= 28) {
         rootClasses.push(styles.shadow4);
       } else if (size <= 48) {
@@ -462,18 +529,6 @@ export var useAvatarStyles = function (state) {
       } else {
         rootClasses.push(styles.shadow28);
       }
-    }
-
-    if (activeAppearance.includes('glow')) {
-      if (size <= 28) {
-        rootClasses.push(styles.glow4);
-      } else if (size <= 48) {
-        rootClasses.push(styles.glow8);
-      } else if (size <= 64) {
-        rootClasses.push(styles.glow16);
-      } else {
-        rootClasses.push(styles.glow28);
-      }
     } // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
 
 
@@ -482,22 +537,40 @@ export var useAvatarStyles = function (state) {
     }
   }
 
-  state.root.className = mergeClasses.apply(void 0, __spreadArrays(rootClasses, [state.root.className]));
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
 
   if (state.badge) {
-    state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
   }
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);
   }
 
-  if (state.label) {
-    state.label.className = mergeClasses(styles.iconLabel, state.label.className);
+  if (state.initials) {
+    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);
   }
 
   if (state.icon) {
-    state.icon.className = mergeClasses(styles.iconLabel, state.icon.className);
+    let iconSizeClass;
+
+    if (size <= 16) {
+      iconSizeClass = styles.icon12;
+    } else if (size <= 24) {
+      iconSizeClass = styles.icon16;
+    } else if (size <= 40) {
+      iconSizeClass = styles.icon20;
+    } else if (size <= 48) {
+      iconSizeClass = styles.icon24;
+    } else if (size <= 56) {
+      iconSizeClass = styles.icon28;
+    } else if (size <= 72) {
+      iconSizeClass = styles.icon32;
+    } else {
+      iconSizeClass = styles.icon48;
+    }
+
+    state.icon.className = mergeClasses(avatarClassNames.icon, styles.iconInitials, iconSizeClass, state.icon.className);
   }
 
   return state;