@fluentui/react-avatar 9.4.9 → 9.5.0

package/lib/components/Avatar/useAvatarStyles.js

@@ -1,493 +0,0 @@
-import { __resetStyles, __styles, mergeClasses, 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'
-};
-const useRootClassName = /*#__PURE__*/__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;}"]);
-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;}"]);
-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",
-    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"
-  },
-  ring: {
-    Bdkvgpv: "f163fonl",
-    m598lv: ["f1yq6w5o", "f1jpmc5p"],
-    qa3bma: "f11yjt3y",
-    Bbv0w2i: ["f1jpmc5p", "f1yq6w5o"]
-  },
-  ringThick: {
-    qehafq: "f1rbtjc9",
-    Bicfajf: ["f1wm0e7m", "f1o0l8kp"],
-    susq4k: "f1tz5420",
-    Biibvgv: ["f1o0l8kp", "f1wm0e7m"],
-    B0qfbqy: "f1q30tuz",
-    B4f6apu: ["f9c0djs", "fcwzx2y"],
-    y0oebl: "f1hdqo1a",
-    uvfttm: ["fcwzx2y", "f9c0djs"]
-  },
-  ringThicker: {
-    qehafq: "fk7ejgl",
-    Bicfajf: ["f12sbt0w", "f1tnh028"],
-    susq4k: "fcrsff4",
-    Biibvgv: ["f1tnh028", "f12sbt0w"],
-    B0qfbqy: "f1jrge4j",
-    B4f6apu: ["fc2vpa6", "f133djwz"],
-    y0oebl: "f9hcsm3",
-    uvfttm: ["f133djwz", "fc2vpa6"]
-  },
-  ringThickest: {
-    qehafq: "fl3e39p",
-    Bicfajf: ["f14m8wrz", "fckzhtt"],
-    susq4k: "fnxq6pw",
-    Biibvgv: ["fckzhtt", "f14m8wrz"],
-    B0qfbqy: "fr6r3yi",
-    B4f6apu: ["ftxoq8w", "f4gs2h8"],
-    y0oebl: "f9gga8r",
-    uvfttm: ["f4gs2h8", "ftxoq8w"]
-  },
-  shadow4: {
-    h8m2vh: "f196qwgu"
-  },
-  shadow8: {
-    h8m2vh: "fut48mo"
-  },
-  shadow16: {
-    h8m2vh: "fh2kfig"
-  },
-  shadow28: {
-    h8m2vh: "f4c2u2p"
-  },
-  inactive: {
-    abs64n: "fp25eh",
-    Bz10aip: "f1clczzi",
-    Bkqvd7p: "f1l3s34x",
-    qehafq: "fe3o830",
-    Bicfajf: ["fzynn9s", "f1z0ukd1"],
-    susq4k: "f1kyqvp9",
-    Biibvgv: ["f1z0ukd1", "fzynn9s"],
-    vz82u: "f1dhznln",
-    wjn42g: "f1iysauc"
-  },
-  badge: {
-    qhf8xq: "f1euv43f",
-    B5kzvoi: "f1yab3r1",
-    j35jbq: ["f1e31b4d", "f1vgc2s3"],
-    E5pizo: "ffo9j2l"
-  },
-  badgeLarge: {
-    E5pizo: "f1nayfl2"
-  },
-  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:\"\";}", ".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);}", ".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);}", ".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);}", ".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)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{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",
-    Bic5iru: "f1uuiafn"
-  },
-  brand: {
-    sj55zd: "fonrgv7",
-    De3pzq: "f1blnnmj",
-    Bic5iru: "f1uuiafn"
-  },
-  "dark-red": {
-    sj55zd: "fqjd1y1",
-    De3pzq: "f1vq2oo4",
-    Bic5iru: "f1t2x9on"
-  },
-  cranberry: {
-    sj55zd: "fg9gses",
-    De3pzq: "f1lwxszt",
-    Bic5iru: "f1pvshc9"
-  },
-  red: {
-    sj55zd: "f23f7i0",
-    De3pzq: "f1q9qhfq",
-    Bic5iru: "f1ectbk9"
-  },
-  pumpkin: {
-    sj55zd: "fjnan08",
-    De3pzq: "fz91bi3",
-    Bic5iru: "fvzpl0b"
-  },
-  peach: {
-    sj55zd: "fknu15p",
-    De3pzq: "f1b9nr51",
-    Bic5iru: "fwj2kd7"
-  },
-  marigold: {
-    sj55zd: "f9603vw",
-    De3pzq: "f3z4w6d",
-    Bic5iru: "fr120vy"
-  },
-  gold: {
-    sj55zd: "fmq0uwp",
-    De3pzq: "fg50kya",
-    Bic5iru: "f8xmmar"
-  },
-  brass: {
-    sj55zd: "f28g5vo",
-    De3pzq: "f4w2gd0",
-    Bic5iru: "f1hbety2"
-  },
-  brown: {
-    sj55zd: "ftl572b",
-    De3pzq: "f14wu1f4",
-    Bic5iru: "f1vg3s4g"
-  },
-  forest: {
-    sj55zd: "f1gymlvd",
-    De3pzq: "f19ut4y6",
-    Bic5iru: "f1m3olm5"
-  },
-  seafoam: {
-    sj55zd: "fnnb6wn",
-    De3pzq: "f1n057jc",
-    Bic5iru: "f17xiqtr"
-  },
-  "dark-green": {
-    sj55zd: "ff58qw8",
-    De3pzq: "f11t05wk",
-    Bic5iru: "fx32vyh"
-  },
-  "light-teal": {
-    sj55zd: "f1up9qbj",
-    De3pzq: "f42feg1",
-    Bic5iru: "f1mkihwv"
-  },
-  teal: {
-    sj55zd: "f135dsb4",
-    De3pzq: "f6hvv1p",
-    Bic5iru: "fecnooh"
-  },
-  steel: {
-    sj55zd: "f151dlcp",
-    De3pzq: "f1lnp8zf",
-    Bic5iru: "f15hfgzm"
-  },
-  blue: {
-    sj55zd: "f1rjv50u",
-    De3pzq: "f1ggcpy6",
-    Bic5iru: "fqproka"
-  },
-  "royal-blue": {
-    sj55zd: "f1emykk5",
-    De3pzq: "f12rj61f",
-    Bic5iru: "f17v2w59"
-  },
-  cornflower: {
-    sj55zd: "fqsigj7",
-    De3pzq: "f8k7hur",
-    Bic5iru: "fp0q1mo"
-  },
-  navy: {
-    sj55zd: "f1nj97xi",
-    De3pzq: "f19gw0ux",
-    Bic5iru: "f1nlym55"
-  },
-  lavender: {
-    sj55zd: "fwctg0i",
-    De3pzq: "ff379vm",
-    Bic5iru: "f62vk8h"
-  },
-  purple: {
-    sj55zd: "fjrsgpu",
-    De3pzq: "f1mzf1e1",
-    Bic5iru: "f15zl69q"
-  },
-  grape: {
-    sj55zd: "f1fiiydq",
-    De3pzq: "f1o4k8oy",
-    Bic5iru: "f53w4j7"
-  },
-  lilac: {
-    sj55zd: "f1res9jt",
-    De3pzq: "f1x6mz1o",
-    Bic5iru: "fu2771t"
-  },
-  pink: {
-    sj55zd: "fv3fbbi",
-    De3pzq: "fydlv6t",
-    Bic5iru: "fzflscs"
-  },
-  magenta: {
-    sj55zd: "f1f1fwnz",
-    De3pzq: "f4xb6j5",
-    Bic5iru: "fb6rmqc"
-  },
-  plum: {
-    sj55zd: "f8ptl6j",
-    De3pzq: "fqo8e26",
-    Bic5iru: "f1a4gm5b"
-  },
-  beige: {
-    sj55zd: "f1ntv3ld",
-    De3pzq: "f101elhj",
-    Bic5iru: "f1qpf9z1"
-  },
-  mink: {
-    sj55zd: "f1fscmp",
-    De3pzq: "f13g8o5c",
-    Bic5iru: "f1l7or83"
-  },
-  platinum: {
-    sj55zd: "f1dr00v2",
-    De3pzq: "fkh7blw",
-    Bic5iru: "fzrj0iu"
-  },
-  anchor: {
-    sj55zd: "f1f3ti53",
-    De3pzq: "fu4yj0j",
-    Bic5iru: "f8oz6wf"
-  }
-}, {
-  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);}", ".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 rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];
-  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);
-      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') {
-      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, size >= 64 && styles.badgeLarge, state.badge.className);
-  }
-  if (state.image) {
-    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);
-  }
-  if (state.initials) {
-    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, 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, state.icon.className);
-  }
-  return state;
-};
-//# sourceMappingURL=useAvatarStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","useRootClassName","useImageClassName","useIconInitialsClassName","useStyles","textCaption2Strong","Be2twd7","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","squareMedium","squareLarge","squareXLarge","activeOrInactive","Bz10aip","Bmy1vo4","B3o57yi","Bkqvd7p","Hwfdqs","Ftih45","Brfgrao","Bciustq","Fbdkly","lawp4y","mdwyqc","Budzafs","r59vdv","n07z76","ck0cow","B8bqphf","h7gv66","wjn42g","B1pumaf","ring","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","ringThick","qehafq","Bicfajf","susq4k","Biibvgv","B0qfbqy","B4f6apu","y0oebl","uvfttm","ringThicker","ringThickest","shadow4","h8m2vh","shadow8","shadow16","shadow28","inactive","abs64n","vz82u","qhf8xq","B5kzvoi","j35jbq","E5pizo","badgeLarge","icon12","icon16","icon20","icon24","icon28","icon32","icon48","d","m","useSizeStyles","a9b677","Bqenvij","useColorStyles","neutral","sj55zd","De3pzq","Bic5iru","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","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","className","iconSizeClass"],"sources":["../../../src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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\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\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\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    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n\n      ...shorthands.borderRadius('inherit'),\n      transitionProperty: 'margin, opacity',\n      transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n      transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n      },\n    },\n  },\n\n  ring: {\n    '::before': {\n      ...shorthands.borderStyle('solid'),\n    },\n  },\n  ringThick: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  ringThicker: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  ringThickest: {\n    '::before': {\n      ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n\n  shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n  shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n  shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n  shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n  inactive: {\n    opacity: '0.8',\n    transform: 'scale(0.875)',\n    transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n\n    '::before': {\n      ...shorthands.margin(0),\n      opacity: 0,\n      transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n    },\n  },\n\n  badge: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n  },\n\n  badgeLarge: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\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    // The ::before element is the ring when active\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n    backgroundColor: tokens.colorBrandBackgroundStatic,\n    '::before': { color: tokens.colorBrandStroke1 },\n  },\n  'dark-red': {\n    color: tokens.colorPaletteDarkRedForeground2,\n    backgroundColor: tokens.colorPaletteDarkRedBackground2,\n    '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n  },\n  cranberry: {\n    color: tokens.colorPaletteCranberryForeground2,\n    backgroundColor: tokens.colorPaletteCranberryBackground2,\n    '::before': { color: tokens.colorPaletteCranberryBorderActive },\n  },\n  red: {\n    color: tokens.colorPaletteRedForeground2,\n    backgroundColor: tokens.colorPaletteRedBackground2,\n    '::before': { color: tokens.colorPaletteRedBorderActive },\n  },\n  pumpkin: {\n    color: tokens.colorPalettePumpkinForeground2,\n    backgroundColor: tokens.colorPalettePumpkinBackground2,\n    '::before': { color: tokens.colorPalettePumpkinBorderActive },\n  },\n  peach: {\n    color: tokens.colorPalettePeachForeground2,\n    backgroundColor: tokens.colorPalettePeachBackground2,\n    '::before': { color: tokens.colorPalettePeachBorderActive },\n  },\n  marigold: {\n    color: tokens.colorPaletteMarigoldForeground2,\n    backgroundColor: tokens.colorPaletteMarigoldBackground2,\n    '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n  },\n  gold: {\n    color: tokens.colorPaletteGoldForeground2,\n    backgroundColor: tokens.colorPaletteGoldBackground2,\n    '::before': { color: tokens.colorPaletteGoldBorderActive },\n  },\n  brass: {\n    color: tokens.colorPaletteBrassForeground2,\n    backgroundColor: tokens.colorPaletteBrassBackground2,\n    '::before': { color: tokens.colorPaletteBrassBorderActive },\n  },\n  brown: {\n    color: tokens.colorPaletteBrownForeground2,\n    backgroundColor: tokens.colorPaletteBrownBackground2,\n    '::before': { color: tokens.colorPaletteBrownBorderActive },\n  },\n  forest: {\n    color: tokens.colorPaletteForestForeground2,\n    backgroundColor: tokens.colorPaletteForestBackground2,\n    '::before': { color: tokens.colorPaletteForestBorderActive },\n  },\n  seafoam: {\n    color: tokens.colorPaletteSeafoamForeground2,\n    backgroundColor: tokens.colorPaletteSeafoamBackground2,\n    '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n  },\n  'dark-green': {\n    color: tokens.colorPaletteDarkGreenForeground2,\n    backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n    '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n  },\n  'light-teal': {\n    color: tokens.colorPaletteLightTealForeground2,\n    backgroundColor: tokens.colorPaletteLightTealBackground2,\n    '::before': { color: tokens.colorPaletteLightTealBorderActive },\n  },\n  teal: {\n    color: tokens.colorPaletteTealForeground2,\n    backgroundColor: tokens.colorPaletteTealBackground2,\n    '::before': { color: tokens.colorPaletteTealBorderActive },\n  },\n  steel: {\n    color: tokens.colorPaletteSteelForeground2,\n    backgroundColor: tokens.colorPaletteSteelBackground2,\n    '::before': { color: tokens.colorPaletteSteelBorderActive },\n  },\n  blue: {\n    color: tokens.colorPaletteBlueForeground2,\n    backgroundColor: tokens.colorPaletteBlueBackground2,\n    '::before': { color: tokens.colorPaletteBlueBorderActive },\n  },\n  'royal-blue': {\n    color: tokens.colorPaletteRoyalBlueForeground2,\n    backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n    '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n  },\n  cornflower: {\n    color: tokens.colorPaletteCornflowerForeground2,\n    backgroundColor: tokens.colorPaletteCornflowerBackground2,\n    '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n  },\n  navy: {\n    color: tokens.colorPaletteNavyForeground2,\n    backgroundColor: tokens.colorPaletteNavyBackground2,\n    '::before': { color: tokens.colorPaletteNavyBorderActive },\n  },\n  lavender: {\n    color: tokens.colorPaletteLavenderForeground2,\n    backgroundColor: tokens.colorPaletteLavenderBackground2,\n    '::before': { color: tokens.colorPaletteLavenderBorderActive },\n  },\n  purple: {\n    color: tokens.colorPalettePurpleForeground2,\n    backgroundColor: tokens.colorPalettePurpleBackground2,\n    '::before': { color: tokens.colorPalettePurpleBorderActive },\n  },\n  grape: {\n    color: tokens.colorPaletteGrapeForeground2,\n    backgroundColor: tokens.colorPaletteGrapeBackground2,\n    '::before': { color: tokens.colorPaletteGrapeBorderActive },\n  },\n  lilac: {\n    color: tokens.colorPaletteLilacForeground2,\n    backgroundColor: tokens.colorPaletteLilacBackground2,\n    '::before': { color: tokens.colorPaletteLilacBorderActive },\n  },\n  pink: {\n    color: tokens.colorPalettePinkForeground2,\n    backgroundColor: tokens.colorPalettePinkBackground2,\n    '::before': { color: tokens.colorPalettePinkBorderActive },\n  },\n  magenta: {\n    color: tokens.colorPaletteMagentaForeground2,\n    backgroundColor: tokens.colorPaletteMagentaBackground2,\n    '::before': { color: tokens.colorPaletteMagentaBorderActive },\n  },\n  plum: {\n    color: tokens.colorPalettePlumForeground2,\n    backgroundColor: tokens.colorPalettePlumBackground2,\n    '::before': { color: tokens.colorPalettePlumBorderActive },\n  },\n  beige: {\n    color: tokens.colorPaletteBeigeForeground2,\n    backgroundColor: tokens.colorPaletteBeigeBackground2,\n    '::before': { color: tokens.colorPaletteBeigeBorderActive },\n  },\n  mink: {\n    color: tokens.colorPaletteMinkForeground2,\n    backgroundColor: tokens.colorPaletteMinkBackground2,\n    '::before': { color: tokens.colorPaletteMinkBorderActive },\n  },\n  platinum: {\n    color: tokens.colorPalettePlatinumForeground2,\n    backgroundColor: tokens.colorPalettePlatinumBackground2,\n    '::before': { color: tokens.colorPalettePlatinumBorderActive },\n  },\n  anchor: {\n    color: tokens.colorPaletteAnchorForeground2,\n    backgroundColor: tokens.colorPaletteAnchorBackground2,\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\n  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n  if (size <= 24) {\n    rootClasses.push(styles.textCaption2Strong);\n  } else if (size <= 28) {\n    rootClasses.push(styles.textCaption1Strong);\n  } else if (size <= 40) {\n    // 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);\n\n      if (size <= 48) {\n        rootClasses.push(styles.ringThick);\n      } else if (size <= 64) {\n        rootClasses.push(styles.ringThicker);\n      } else {\n        rootClasses.push(styles.ringThickest);\n      }\n    }\n\n    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n      if (size <= 28) {\n        rootClasses.push(styles.shadow4);\n      } else if (size <= 48) {\n        rootClasses.push(styles.shadow8);\n      } else if (size <= 64) {\n        rootClasses.push(styles.shadow16);\n      } else {\n        rootClasses.push(styles.shadow28);\n      }\n    }\n\n    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n    if (active === 'inactive') {\n      rootClasses.push(styles.inactive);\n    }\n  }\n\n  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n  if (state.badge) {\n    state.badge.className = mergeClasses(\n      avatarClassNames.badge,\n      styles.badge,\n      size >= 64 && styles.badgeLarge,\n      state.badge.className,\n    );\n  }\n\n  if (state.image) {\n    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n  }\n\n  if (state.initials) {\n    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n  }\n\n  if (state.icon) {\n    let iconSizeClass;\n    if (size <= 16) {\n      iconSizeClass = styles.icon12;\n    } else if (size <= 24) {\n      iconSizeClass = styles.icon16;\n    } else if (size <= 40) {\n      iconSizeClass = styles.icon20;\n    } else if (size <= 48) {\n      iconSizeClass = styles.icon24;\n    } else if (size <= 56) {\n      iconSizeClass = styles.icon28;\n    } else if (size <= 72) {\n      iconSizeClass = styles.icon32;\n    } else {\n      iconSizeClass = styles.icon48;\n    }\n\n    state.icon.className = mergeClasses(\n      avatarClassNames.icon,\n      iconInitialsClassName,\n      iconSizeClass,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["../../../src/components/AvatarGroup/useAvatarGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAI9B,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,EAYlB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAM;IAAEC,MAAA;IAAQC;EAAI,CAAE,GAAGF,KAAA;EACzB,MAAMG,MAAA,GAASd,SAAA;EACf,MAAMe,UAAA,GAAalB,aAAA;EAEnBc,KAAA,CAAMZ,IAAI,CAACiB,SAAS,GAAGrB,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1Be,MAAA,CAAOb,IAAI,EACXW,MAAA,KAAW,SAASG,UAAU,CAACF,IAAA,CAAK,EACpCD,MAAA,KAAW,SAASE,MAAA,CAAOV,GAAG,EAC9BO,KAAA,CAAMZ,IAAI,CAACiB,SAAS;EAGtB,OAAOL,KAAA;AACT"}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","z8tnut","z189sj","Byoj8tv","uwmqm3","nonOverflowItem","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"sources":["../../../src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"],"mappings":"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"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createCustomFocusIndicatorStyle","__styles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","dclx09","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","d","usePopoverSurfaceStyles","Bxyxcbc","sshi5w","B68tc82","Bmxbyg5","a9b677","useTriggerButtonStyles","mc9l5x","qhf8xq","Bnnss6s","Brf1p80","Bt984gj","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","vrafjx","oivjwe","wvpqe5","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","pie","focusIndicator","Brovlpu","B486eqv","Bbcte9g","Bn40d3w","i2cumq","lbo84a","B5gfjzb","u5e7qz","Bbjhlyh","mqozju","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","f","i","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"sources":["../../../src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\n  root: 'fui-AvatarGroupPopover',\n  content: 'fui-AvatarGroupPopover__content',\n  popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n  tooltip: 'fui-AvatarGroupPopover__tooltip',\n  triggerButton: 'fui-AvatarGroupPopover__triggerButton',\n};\n\n/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n  base: {\n    listStyleType: 'none',\n    ...shorthands.margin('0'),\n    ...shorthands.padding('0'),\n  },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    width: '220px',\n  },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst useTriggerButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    flexShrink: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.padding(0),\n\n    // Match color to Avatar's outline color.\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('CanvasText'),\n    },\n  },\n\n  pie: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: 'transparent',\n  },\n\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n  }),\n\n  states: {\n    '&:hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    '&:active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  selected: {\n    color: tokens.colorNeutralForeground1Selected,\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\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  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\n  const { indicator, size, layout, popoverOpen } = state;\n  const sizeStyles = useSizeStyles();\n  const triggerButtonStyles = useTriggerButtonStyles();\n  const contentStyles = useContentStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const triggerButtonClasses = [];\n\n  if (size < 36) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThin);\n  } else if (size < 56) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThick);\n  } else if (size < 72) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n  } else {\n    triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n  }\n\n  if (indicator === 'count') {\n    if (size <= 24) {\n      triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n    } else {\n      triggerButtonClasses.push(triggerButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      triggerButtonClasses.push(triggerButtonStyles.icon12);\n    } else if (size <= 24) {\n      triggerButtonClasses.push(triggerButtonStyles.icon16);\n    } else if (size <= 40) {\n      triggerButtonClasses.push(triggerButtonStyles.icon20);\n    } else if (size <= 48) {\n      triggerButtonClasses.push(triggerButtonStyles.icon24);\n    } else if (size <= 56) {\n      triggerButtonClasses.push(triggerButtonStyles.icon28);\n    } else if (size <= 72) {\n      triggerButtonClasses.push(triggerButtonStyles.icon32);\n    } else {\n      triggerButtonClasses.push(triggerButtonStyles.icon48);\n    }\n  }\n\n  state.triggerButton.className = mergeClasses(\n    avatarGroupPopoverClassNames.triggerButton,\n    groupChildClassName,\n    sizeStyles[size],\n    triggerButtonStyles.base,\n    layout === 'pie' && triggerButtonStyles.pie,\n    triggerButtonStyles.focusIndicator,\n    layout !== 'pie' && triggerButtonStyles.states,\n    layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n    ...triggerButtonClasses,\n    state.triggerButton.className,\n  );\n\n  state.content.className = mergeClasses(\n    avatarGroupPopoverClassNames.content,\n    contentStyles.base,\n    state.content.className,\n  );\n\n  state.popoverSurface.className = mergeClasses(\n    avatarGroupPopoverClassNames.popoverSurface,\n    popoverSurfaceStyles.base,\n    state.popoverSurface.className,\n  );\n\n  return state;\n};\n"],"mappings":"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"}