@fluentui/react-avatar 9.4.10 → 9.5.0

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

@@ -0,0 +1,584 @@
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+export const avatarClassNames = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge'
+};
+// 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__*/__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__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
+const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".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__*/__styles({
+  textCaption2Strong: {
+    Be2twd7: "f13mqy1h"
+  },
+  textCaption1Strong: {
+    Be2twd7: "fy9rknc"
+  },
+  textSubtitle2: {
+    Be2twd7: "fod5ikn"
+  },
+  textSubtitle1: {
+    Be2twd7: "f1pp30po"
+  },
+  textTitle3: {
+    Be2twd7: "f1x0m3f5"
+  },
+  squareSmall: {
+    Bbmb7ep: ["f1g3puop", "fi2rrw2"],
+    Beyfa6y: ["fi2rrw2", "f1g3puop"],
+    B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
+    Btl43ni: ["f1s4nn1u", "f1rstyi9"]
+  },
+  squareMedium: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"]
+  },
+  squareLarge: {
+    Bbmb7ep: ["f1ldthgs", "frrelxk"],
+    Beyfa6y: ["frrelxk", "f1ldthgs"],
+    B7oj6ja: ["fobrfso", "ffisxpw"],
+    Btl43ni: ["ffisxpw", "fobrfso"]
+  },
+  squareXLarge: {
+    Bbmb7ep: ["fnivh3a", "fc7yr5o"],
+    Beyfa6y: ["fc7yr5o", "fnivh3a"],
+    B7oj6ja: ["f1el4m67", "f8yange"],
+    Btl43ni: ["f8yange", "f1el4m67"]
+  },
+  activeOrInactive: {
+    Bz10aip: "ftfx35i",
+    Bmy1vo4: "fv0atk9",
+    B3o57yi: "f1iry5bo",
+    Bkqvd7p: "f15n41j8",
+    Hwfdqs: "f1onx1g3"
+  },
+  ring: {
+    Ftih45: "f1wl9k8s"
+  },
+  ringBadgeCutout: {
+    f4a502: "fp2gujx"
+  },
+  ringThick: {
+    of393c: "fq1w1vq"
+  },
+  ringThicker: {
+    of393c: "fzg6ace"
+  },
+  ringThickest: {
+    of393c: "f1nu8p71"
+  },
+  shadow: {
+    Bsft5z2: "f13zj6fq"
+  },
+  shadow4: {
+    Be6vj1x: "fcjn15l"
+  },
+  shadow8: {
+    Be6vj1x: "f1tm8t9f"
+  },
+  shadow16: {
+    Be6vj1x: "f1a1aohj"
+  },
+  shadow28: {
+    Be6vj1x: "fond6v5"
+  },
+  inactive: {
+    abs64n: "fp25eh",
+    Bz10aip: "f1clczzi",
+    Bkqvd7p: "f1l3s34x",
+    Bucmhp4: "f1f5ar78",
+    b2tv09: ["fqxtap0", "fhjukvy"],
+    Bfgortx: "f1qj1nzo",
+    Bnvr3x9: ["fhjukvy", "fqxtap0"],
+    b6ubon: "fw457kn",
+    Bqinb2h: "f1wmllxl"
+  },
+  badge: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1yab3r1",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
+  },
+  badgeCutout: {
+    btxmck: "f1eugkqs"
+  },
+  badgeAlign: {
+    Dnlfbu: ["f1tlnv9o", "f1y9kyih"]
+  },
+  tiny: {
+    Bdjeniz: "f1uwoubl",
+    niu6jh: "fid048z"
+  },
+  "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"
+  },
+  icon16: {
+    Be2twd7: "f4ybsrx"
+  },
+  icon20: {
+    Be2twd7: "fe5j1ua"
+  },
+  icon24: {
+    Be2twd7: "f1rt2boy"
+  },
+  icon28: {
+    Be2twd7: "f24l1pt"
+  },
+  icon32: {
+    Be2twd7: "ffl51b"
+  },
+  icon48: {
+    Be2twd7: "f18m8u13"
+  }
+}, {
+  d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".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;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".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);}", ".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;}", ".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;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
+});
+export const useSizeStyles = /*#__PURE__*/__styles({
+  "16": {
+    a9b677: "fjw5fx7",
+    Bqenvij: "fd461yt"
+  },
+  "20": {
+    a9b677: "f64fuq3",
+    Bqenvij: "fjamq6b"
+  },
+  "24": {
+    a9b677: "fq4mcun",
+    Bqenvij: "frvgh55"
+  },
+  "28": {
+    a9b677: "f1w9dchk",
+    Bqenvij: "fxldao9"
+  },
+  "32": {
+    a9b677: "f1szoe96",
+    Bqenvij: "f1d2rq10"
+  },
+  "36": {
+    a9b677: "fpdz1er",
+    Bqenvij: "f8ljn23"
+  },
+  "40": {
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac"
+  },
+  "48": {
+    a9b677: "f124akge",
+    Bqenvij: "ff2sm71"
+  },
+  "56": {
+    a9b677: "f1u66zr1",
+    Bqenvij: "fzki0ko"
+  },
+  "64": {
+    a9b677: "fa9ln6p",
+    Bqenvij: "f16k9i2m"
+  },
+  "72": {
+    a9b677: "fhcae8x",
+    Bqenvij: "f1shusfg"
+  },
+  "96": {
+    a9b677: "f1kyr2gn",
+    Bqenvij: "fypu0ge"
+  },
+  "120": {
+    a9b677: "fwfqyga",
+    Bqenvij: "fjr5b71"
+  },
+  "128": {
+    a9b677: "f1iksgmy",
+    Bqenvij: "fele2au"
+  }
+}, {
+  d: [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
+});
+const useColorStyles = /*#__PURE__*/__styles({
+  neutral: {
+    sj55zd: "f11d4kpn",
+    De3pzq: "f18f03hv"
+  },
+  brand: {
+    sj55zd: "fonrgv7",
+    De3pzq: "f1blnnmj"
+  },
+  "dark-red": {
+    sj55zd: "fqjd1y1",
+    De3pzq: "f1vq2oo4"
+  },
+  cranberry: {
+    sj55zd: "fg9gses",
+    De3pzq: "f1lwxszt"
+  },
+  red: {
+    sj55zd: "f23f7i0",
+    De3pzq: "f1q9qhfq"
+  },
+  pumpkin: {
+    sj55zd: "fjnan08",
+    De3pzq: "fz91bi3"
+  },
+  peach: {
+    sj55zd: "fknu15p",
+    De3pzq: "f1b9nr51"
+  },
+  marigold: {
+    sj55zd: "f9603vw",
+    De3pzq: "f3z4w6d"
+  },
+  gold: {
+    sj55zd: "fmq0uwp",
+    De3pzq: "fg50kya"
+  },
+  brass: {
+    sj55zd: "f28g5vo",
+    De3pzq: "f4w2gd0"
+  },
+  brown: {
+    sj55zd: "ftl572b",
+    De3pzq: "f14wu1f4"
+  },
+  forest: {
+    sj55zd: "f1gymlvd",
+    De3pzq: "f19ut4y6"
+  },
+  seafoam: {
+    sj55zd: "fnnb6wn",
+    De3pzq: "f1n057jc"
+  },
+  "dark-green": {
+    sj55zd: "ff58qw8",
+    De3pzq: "f11t05wk"
+  },
+  "light-teal": {
+    sj55zd: "f1up9qbj",
+    De3pzq: "f42feg1"
+  },
+  teal: {
+    sj55zd: "f135dsb4",
+    De3pzq: "f6hvv1p"
+  },
+  steel: {
+    sj55zd: "f151dlcp",
+    De3pzq: "f1lnp8zf"
+  },
+  blue: {
+    sj55zd: "f1rjv50u",
+    De3pzq: "f1ggcpy6"
+  },
+  "royal-blue": {
+    sj55zd: "f1emykk5",
+    De3pzq: "f12rj61f"
+  },
+  cornflower: {
+    sj55zd: "fqsigj7",
+    De3pzq: "f8k7hur"
+  },
+  navy: {
+    sj55zd: "f1nj97xi",
+    De3pzq: "f19gw0ux"
+  },
+  lavender: {
+    sj55zd: "fwctg0i",
+    De3pzq: "ff379vm"
+  },
+  purple: {
+    sj55zd: "fjrsgpu",
+    De3pzq: "f1mzf1e1"
+  },
+  grape: {
+    sj55zd: "f1fiiydq",
+    De3pzq: "f1o4k8oy"
+  },
+  lilac: {
+    sj55zd: "f1res9jt",
+    De3pzq: "f1x6mz1o"
+  },
+  pink: {
+    sj55zd: "fv3fbbi",
+    De3pzq: "fydlv6t"
+  },
+  magenta: {
+    sj55zd: "f1f1fwnz",
+    De3pzq: "f4xb6j5"
+  },
+  plum: {
+    sj55zd: "f8ptl6j",
+    De3pzq: "fqo8e26"
+  },
+  beige: {
+    sj55zd: "f1ntv3ld",
+    De3pzq: "f101elhj"
+  },
+  mink: {
+    sj55zd: "f1fscmp",
+    De3pzq: "f13g8o5c"
+  },
+  platinum: {
+    sj55zd: "f1dr00v2",
+    De3pzq: "fkh7blw"
+  },
+  anchor: {
+    sj55zd: "f1f3ti53",
+    De3pzq: "fu4yj0j"
+  }
+}, {
+  d: [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".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);}"]
+});
+const useRingColorStyles = /*#__PURE__*/__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);}"]
+});
+export const useAvatarStyles_unstable = state => {
+  const {
+    size,
+    shape,
+    active,
+    activeAppearance,
+    color
+  } = state;
+  const rootClassName = useRootClassName();
+  const imageClassName = useImageClassName();
+  const iconInitialsClassName = useIconInitialsClassName();
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const colorStyles = useColorStyles();
+  const ringColorStyles = useRingColorStyles();
+  const rootClasses = [rootClassName, 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) {
+    rootClasses.push(styles.textCaption1Strong);
+  } else if (size <= 40) {
+    // Default text size included in useRootClassName
+  } else if (size <= 56) {
+    rootClasses.push(styles.textSubtitle2);
+  } else if (size <= 96) {
+    rootClasses.push(styles.textSubtitle1);
+  } else {
+    rootClasses.push(styles.textTitle3);
+  }
+  if (shape === 'square') {
+    if (size <= 24) {
+      rootClasses.push(styles.squareSmall);
+    } else if (size <= 48) {
+      rootClasses.push(styles.squareMedium);
+    } else if (size <= 72) {
+      rootClasses.push(styles.squareLarge);
+    } else {
+      rootClasses.push(styles.squareXLarge);
+    }
+  }
+  if (active === 'active' || active === 'inactive') {
+    rootClasses.push(styles.activeOrInactive);
+    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.ring, ringColorStyles[color]);
+      if (state.badge) {
+        rootClasses.push(styles.ringBadgeCutout);
+      }
+      if (size <= 48) {
+        rootClasses.push(styles.ringThick);
+      } else if (size <= 64) {
+        rootClasses.push(styles.ringThicker);
+      } else {
+        rootClasses.push(styles.ringThickest);
+      }
+    }
+    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.shadow);
+      if (size <= 28) {
+        rootClasses.push(styles.shadow4);
+      } else if (size <= 48) {
+        rootClasses.push(styles.shadow8);
+      } else if (size <= 64) {
+        rootClasses.push(styles.shadow16);
+      } else {
+        rootClasses.push(styles.shadow28);
+      }
+    }
+    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
+    if (active === 'inactive') {
+      rootClasses.push(styles.inactive);
+    }
+  }
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
+  if (state.badge) {
+    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
+  }
+  if (state.image) {
+    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
+  }
+  if (state.initials) {
+    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
+  }
+  if (state.icon) {
+    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, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useAvatarStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__resetStyles","__styles","mergeClasses","shorthands","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","useImageClassName","useIconInitialsClassName","badgeMask","margin","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Hwfdqs","ring","Ftih45","ringBadgeCutout","f4a502","ringThick","of393c","ringThicker","ringThickest","shadow","Bsft5z2","shadow4","Be6vj1x","shadow8","shadow16","shadow28","inactive","abs64n","Bucmhp4","b2tv09","Bfgortx","Bnvr3x9","b6ubon","Bqinb2h","qhf8xq","B5kzvoi","j35jbq","badgeCutout","btxmck","Dnlfbu","tiny","Bdjeniz","niu6jh","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","brand","cranberry","red","pumpkin","peach","marigold","gold","brass","brown","forest","seafoam","teal","steel","blue","cornflower","navy","lavender","purple","grape","lilac","pink","magenta","plum","beige","mink","platinum","anchor","useRingColorStyles","Bic5iru","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"sources":["../../../src/components/Avatar/useAvatarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n  root: 'fui-Avatar',\n  image: 'fui-Avatar__image',\n  initials: 'fui-Avatar__initials',\n  icon: 'fui-Avatar__icon',\n  badge: 'fui-Avatar__badge',\n};\n\n// CSS variables used internally in Avatar's styles\nconst vars = {\n  badgeRadius: '--fui-Avatar-badgeRadius',\n  badgeGap: '--fui-Avatar-badgeGap',\n  badgeAlign: '--fui-Avatar-badgeAlign',\n  ringWidth: '--fui-Avatar-ringWidth',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-block',\n  flexShrink: 0,\n  position: 'relative',\n  verticalAlign: 'middle',\n  borderRadius: tokens.borderRadiusCircular,\n  fontFamily: tokens.fontFamilyBase,\n  fontWeight: tokens.fontWeightSemibold,\n  fontSize: tokens.fontSizeBase300,\n  width: '32px',\n  height: '32px',\n\n  // ::before is the ring, and ::after is the shadow.\n  // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n  '::before,::after': {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    zIndex: -1,\n    margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n    borderRadius: 'inherit',\n    transitionProperty: 'margin, opacity',\n    transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n  '::before': {\n    borderStyle: 'solid',\n    borderWidth: `var(${vars.ringWidth})`,\n  },\n});\n\nconst useImageClassName = makeResetStyles({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n\n  borderRadius: 'inherit',\n  objectFit: 'cover',\n  verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n  position: 'absolute',\n  boxSizing: 'border-box',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  lineHeight: '1',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'center',\n  textAlign: 'center',\n  userSelect: 'none',\n  borderRadius: 'inherit',\n});\n\n/**\n * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n *\n * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n */\nconst badgeMask = (margin?: string) => {\n  // Center the cutout at the badge's radius away from the edge.\n  // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.\n  const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n  // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n  // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n  const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n  const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n\n  return (\n    `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` +\n    `transparent ${innerRadius}, white ${outerRadius})`\n  );\n};\n\nconst useStyles = makeStyles({\n  textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n  textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n  textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n  textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n  textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n  squareSmall: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  squareMedium: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  squareLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  },\n  squareXLarge: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n  },\n\n  activeOrInactive: {\n    transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n    transitionProperty: 'transform, opacity',\n    transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n    transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n\n  ring: {\n    // Show the ::before pseudo-element, which is the ring\n    '::before': { content: '\"\"' },\n  },\n  ringBadgeCutout: {\n    '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) },\n  },\n  ringThick: {\n    [vars.ringWidth]: tokens.strokeWidthThick,\n  },\n  ringThicker: {\n    [vars.ringWidth]: tokens.strokeWidthThicker,\n  },\n  ringThickest: {\n    [vars.ringWidth]: tokens.strokeWidthThickest,\n  },\n\n  shadow: {\n    // Show the ::after pseudo-element, which is the shadow\n    '::after': { content: '\"\"' },\n  },\n  shadow4: {\n    '::after': { boxShadow: tokens.shadow4 },\n  },\n  shadow8: {\n    '::after': { boxShadow: tokens.shadow8 },\n  },\n  shadow16: {\n    '::after': { boxShadow: tokens.shadow16 },\n  },\n  shadow28: {\n    '::after': { boxShadow: tokens.shadow28 },\n  },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n    transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n\n    '::before,::after': {\n      ...shorthands.margin(0),\n      opacity: 0,\n      transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n    },\n  },\n\n  // Applied to the badge slot\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n  },\n\n  // Applied to the image, initials, or icon slot when there is a badge\n  badgeCutout: {\n    maskImage: badgeMask(),\n  },\n\n  // Applied to the root when there is a badge\n  badgeAlign: {\n    // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n    // so split it out into a css variable that will auto-flip.\n    [vars.badgeAlign]: 'right',\n  },\n\n  // Badge size: applied to root when there is a badge\n  tiny: {\n    [vars.badgeRadius]: '3px',\n    [vars.badgeGap]: tokens.strokeWidthThin,\n  },\n  'extra-small': {\n    [vars.badgeRadius]: '5px',\n    [vars.badgeGap]: tokens.strokeWidthThin,\n  },\n  small: {\n    [vars.badgeRadius]: '6px',\n    [vars.badgeGap]: tokens.strokeWidthThin,\n  },\n  medium: {\n    [vars.badgeRadius]: '8px',\n    [vars.badgeGap]: tokens.strokeWidthThin,\n  },\n  large: {\n    [vars.badgeRadius]: '10px',\n    [vars.badgeGap]: tokens.strokeWidthThick,\n  },\n  'extra-large': {\n    [vars.badgeRadius]: '14px',\n    [vars.badgeGap]: tokens.strokeWidthThick,\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n  neutral: {\n    color: tokens.colorNeutralForeground3,\n    backgroundColor: tokens.colorNeutralBackground6,\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\n  },\n});\n\nconst useRingColorStyles = makeStyles({\n  neutral: {\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  brand: {\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  'dark-red': {\n    '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n  },\n  cranberry: {\n    '::before': { color: tokens.colorPaletteCranberryBorderActive },\n  },\n  red: {\n    '::before': { color: tokens.colorPaletteRedBorderActive },\n  },\n  pumpkin: {\n    '::before': { color: tokens.colorPalettePumpkinBorderActive },\n  },\n  peach: {\n    '::before': { color: tokens.colorPalettePeachBorderActive },\n  },\n  marigold: {\n    '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n  },\n  gold: {\n    '::before': { color: tokens.colorPaletteGoldBorderActive },\n  },\n  brass: {\n    '::before': { color: tokens.colorPaletteBrassBorderActive },\n  },\n  brown: {\n    '::before': { color: tokens.colorPaletteBrownBorderActive },\n  },\n  forest: {\n    '::before': { color: tokens.colorPaletteForestBorderActive },\n  },\n  seafoam: {\n    '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n  },\n  'dark-green': {\n    '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n  },\n  'light-teal': {\n    '::before': { color: tokens.colorPaletteLightTealBorderActive },\n  },\n  teal: {\n    '::before': { color: tokens.colorPaletteTealBorderActive },\n  },\n  steel: {\n    '::before': { color: tokens.colorPaletteSteelBorderActive },\n  },\n  blue: {\n    '::before': { color: tokens.colorPaletteBlueBorderActive },\n  },\n  'royal-blue': {\n    '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n  },\n  cornflower: {\n    '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n  },\n  navy: {\n    '::before': { color: tokens.colorPaletteNavyBorderActive },\n  },\n  lavender: {\n    '::before': { color: tokens.colorPaletteLavenderBorderActive },\n  },\n  purple: {\n    '::before': { color: tokens.colorPalettePurpleBorderActive },\n  },\n  grape: {\n    '::before': { color: tokens.colorPaletteGrapeBorderActive },\n  },\n  lilac: {\n    '::before': { color: tokens.colorPaletteLilacBorderActive },\n  },\n  pink: {\n    '::before': { color: tokens.colorPalettePinkBorderActive },\n  },\n  magenta: {\n    '::before': { color: tokens.colorPaletteMagentaBorderActive },\n  },\n  plum: {\n    '::before': { color: tokens.colorPalettePlumBorderActive },\n  },\n  beige: {\n    '::before': { color: tokens.colorPaletteBeigeBorderActive },\n  },\n  mink: {\n    '::before': { color: tokens.colorPaletteMinkBorderActive },\n  },\n  platinum: {\n    '::before': { color: tokens.colorPalettePlatinumBorderActive },\n  },\n  anchor: {\n    '::before': { color: tokens.colorPaletteAnchorBorderActive },\n  },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n  const { size, shape, active, activeAppearance, color } = state;\n\n  const rootClassName = useRootClassName();\n  const imageClassName = useImageClassName();\n  const iconInitialsClassName = useIconInitialsClassName();\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const colorStyles = useColorStyles();\n  const ringColorStyles = useRingColorStyles();\n\n  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];\n\n  if (state.badge) {\n    rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);\n  }\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    // Default text size included in useRootClassName\n  } else if (size <= 56) {\n    rootClasses.push(styles.textSubtitle2);\n  } else if (size <= 96) {\n    rootClasses.push(styles.textSubtitle1);\n  } else {\n    rootClasses.push(styles.textTitle3);\n  }\n\n  if (shape === 'square') {\n    if (size <= 24) {\n      rootClasses.push(styles.squareSmall);\n    } else if (size <= 48) {\n      rootClasses.push(styles.squareMedium);\n    } else if (size <= 72) {\n      rootClasses.push(styles.squareLarge);\n    } else {\n      rootClasses.push(styles.squareXLarge);\n    }\n  }\n\n  if (active === 'active' || active === 'inactive') {\n    rootClasses.push(styles.activeOrInactive);\n\n    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.ring, ringColorStyles[color]);\n      if (state.badge) {\n        rootClasses.push(styles.ringBadgeCutout);\n      }\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      rootClasses.push(styles.shadow);\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(\n      avatarClassNames.image,\n      imageClassName,\n      colorStyles[color],\n      state.badge && styles.badgeCutout,\n      state.image.className,\n    );\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(\n      avatarClassNames.initials,\n      iconInitialsClassName,\n      colorStyles[color],\n      state.badge && styles.badgeCutout,\n      state.initials.className,\n    );\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      iconInitialsClassName,\n      iconSizeClass,\n      colorStyles[color],\n      state.badge && styles.badgeCutout,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}