@fluentui/react-avatar 9.2.10 → 9.2.12

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -11,170 +11,157 @@ const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
 /**
  * Styles for the root slot
  */
-
 const useRootStyles = /*#__PURE__*/__styles({
-  "base": {
-    "Bt984gj": "f122n59",
-    "mc9l5x": "ftuwxu6",
-    "Bnnss6s": "fi64zpg",
-    "qhf8xq": "f10pi13n"
-  },
-  "overflowItem": {
-    "z8tnut": "f1ywm7hm",
-    "z189sj": ["f7x41pl", "fruq291"],
-    "Byoj8tv": "f14wxoun",
-    "uwmqm3": ["fruq291", "f7x41pl"]
-  },
-  "nonOverflowItem": {
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
+  base: {
+    Bt984gj: "f122n59",
+    mc9l5x: "ftuwxu6",
+    Bnnss6s: "fi64zpg",
+    qhf8xq: "f10pi13n"
+  },
+  overflowItem: {
+    z8tnut: "f1ywm7hm",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f14wxoun",
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  nonOverflowItem: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
 });
 /**
  * Styles for the avatar slot
  */
-
-
 const useAvatarStyles = /*#__PURE__*/__styles({
-  "nonOverflowItem": {
-    "qhf8xq": "f1euv43f"
-  },
-  "pie": {
-    "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
-    "Beyfa6y": ["f1deotkl", "f1krrbdw"],
-    "B7oj6ja": ["f10ostut", "f1ozlkrg"],
-    "Btl43ni": ["f1ozlkrg", "f10ostut"]
+  nonOverflowItem: {
+    qhf8xq: "f1euv43f"
+  },
+  pie: {
+    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
+    Beyfa6y: ["f1deotkl", "f1krrbdw"],
+    B7oj6ja: ["f10ostut", "f1ozlkrg"],
+    Btl43ni: ["f1ozlkrg", "f10ostut"]
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}"]
+  d: [".f1euv43f{position:absolute;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}"]
 });
 /**
  * Styles for the label slot
  */
-
-
 const useOverflowLabelStyles = /*#__PURE__*/__styles({
-  "base": {
-    "Frg6f3": ["foyynoy", "f1vcna3q"],
-    "sj55zd": "f19n0e5",
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "f1i3iumi"
+  base: {
+    Frg6f3: ["foyynoy", "f1vcna3q"],
+    sj55zd: "f19n0e5",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
   }
 }, {
-  "d": [".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+  d: [".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
 });
 /**
  * Styles for the stack layout
  */
-
-
 const useStackStyles = /*#__PURE__*/__styles({
-  "thick": {
-    "E5pizo": "foiuzp5"
+  thick: {
+    E5pizo: "foiuzp5"
   },
-  "thicker": {
-    "E5pizo": "f1x6o7w7"
+  thicker: {
+    E5pizo: "f1x6o7w7"
   },
-  "thickest": {
-    "E5pizo": "f2aml1u"
+  thickest: {
+    E5pizo: "f2aml1u"
   },
-  "xxs": {
-    "jhia2w": ["f1cjco14", "f13dxjc9"]
+  xxs: {
+    jhia2w: ["f1cjco14", "f13dxjc9"]
   },
-  "xs": {
-    "jhia2w": ["f15p6bln", "f1bab3ru"]
+  xs: {
+    jhia2w: ["f15p6bln", "f1bab3ru"]
   },
-  "s": {
-    "jhia2w": ["f1v53ncc", "f17pu8r8"]
+  s: {
+    jhia2w: ["f1v53ncc", "f17pu8r8"]
   },
-  "l": {
-    "jhia2w": ["flv48ch", "fnh1ydj"]
+  l: {
+    jhia2w: ["flv48ch", "fnh1ydj"]
   }
 }, {
-  "d": [".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}", ".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}", ".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"]
+  d: [".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}", ".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}", ".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"]
 });
 /**
  * Styles for the spread layout
  */
-
-
 const useSpreadStyles = /*#__PURE__*/__styles({
-  "s": {
-    "jhia2w": ["f7lhxv7", "f6ou2b0"]
+  s: {
+    jhia2w: ["f7lhxv7", "f6ou2b0"]
   },
-  "mNudge": {
-    "jhia2w": ["f1h0okno", "fnnqava"]
+  mNudge: {
+    jhia2w: ["f1h0okno", "fnnqava"]
   },
-  "m": {
-    "jhia2w": ["f1wkt588", "f1maio5g"]
+  m: {
+    jhia2w: ["f1wkt588", "f1maio5g"]
   },
-  "l": {
-    "jhia2w": ["f1l333zn", "f1r41m4c"]
+  l: {
+    jhia2w: ["f1l333zn", "f1r41m4c"]
   },
-  "xl": {
-    "jhia2w": ["fahr13a", "f2n7rbo"]
+  xl: {
+    jhia2w: ["fahr13a", "f2n7rbo"]
   }
 }, {
-  "d": [".f7lhxv7:not(:first-child){margin-left:var(--spacingHorizontalS);}", ".f6ou2b0:not(:first-child){margin-right:var(--spacingHorizontalS);}", ".f1h0okno:not(:first-child){margin-left:var(--spacingHorizontalMNudge);}", ".fnnqava:not(:first-child){margin-right:var(--spacingHorizontalMNudge);}", ".f1wkt588:not(:first-child){margin-left:var(--spacingHorizontalM);}", ".f1maio5g:not(:first-child){margin-right:var(--spacingHorizontalM);}", ".f1l333zn:not(:first-child){margin-left:var(--spacingHorizontalL);}", ".f1r41m4c:not(:first-child){margin-right:var(--spacingHorizontalL);}", ".fahr13a:not(:first-child){margin-left:var(--spacingHorizontalXL);}", ".f2n7rbo:not(:first-child){margin-right:var(--spacingHorizontalXL);}"]
+  d: [".f7lhxv7:not(:first-child){margin-left:var(--spacingHorizontalS);}", ".f6ou2b0:not(:first-child){margin-right:var(--spacingHorizontalS);}", ".f1h0okno:not(:first-child){margin-left:var(--spacingHorizontalMNudge);}", ".fnnqava:not(:first-child){margin-right:var(--spacingHorizontalMNudge);}", ".f1wkt588:not(:first-child){margin-left:var(--spacingHorizontalM);}", ".f1maio5g:not(:first-child){margin-right:var(--spacingHorizontalM);}", ".f1l333zn:not(:first-child){margin-left:var(--spacingHorizontalL);}", ".f1r41m4c:not(:first-child){margin-right:var(--spacingHorizontalL);}", ".fahr13a:not(:first-child){margin-left:var(--spacingHorizontalXL);}", ".f2n7rbo:not(:first-child){margin-right:var(--spacingHorizontalXL);}"]
 });
 /**
  * Styles for the pie layout
  */
-
-
 const usePieStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qhf8xq": "f1euv43f"
-  },
-  "slices": {
-    "B3gf25r": "f16m7w7k",
-    "Be2twx7": ["f1o4hhgz", "fb4gjrz"],
-    "Bvaow4n": "f1pgb5nx",
-    "Gpecfs": ["fugirid", "f4sk99m"],
-    "bhabj1": "fjreaf3",
-    "B7rc6i7": ["f1k4vw81", "f1w1xcy7"],
-    "Bwrfys5": "f1ef8vxk",
-    "Bwuzm9m": ["f1x2qbfv", "f1xwf4nz"],
-    "fflka": "ff6xuso",
-    "do7bja": "fzpvk6c",
-    "Be8zqhl": "f4onu7f",
-    "Bij0kh0": ["f1ydfez1", "fjensob"],
-    "Bwexnyt": "f1yv732j",
-    "Bhe5x6o": "fchq2fj",
-    "B3kv7bh": "ff5binh"
-  },
-  "rtlSlices": {
-    "B3gf25r": "f5vdl61",
-    "Bvaow4n": "f1bnra92",
-    "bhabj1": "f4ibo7t",
-    "Bwrfys5": "f17heuis",
-    "Bwuzm9m": ["f64f2ud", "f1yjglu3"],
-    "Be8zqhl": "fa6l61x",
-    "Bij0kh0": ["f1w2396a", "f14ab3yo"]
-  },
-  "thick": {
-    "uiicq7": "fnyfzln"
-  },
-  "thicker": {
-    "uiicq7": "f1xdzzot"
-  },
-  "thickest": {
-    "uiicq7": "f1auhru5"
+  base: {
+    qhf8xq: "f1euv43f"
+  },
+  slices: {
+    B3gf25r: "f16m7w7k",
+    Be2twx7: ["f1o4hhgz", "fb4gjrz"],
+    Bvaow4n: "f1pgb5nx",
+    Gpecfs: ["fugirid", "f4sk99m"],
+    bhabj1: "fjreaf3",
+    B7rc6i7: ["f1k4vw81", "f1w1xcy7"],
+    Bwrfys5: "f1ef8vxk",
+    Bwuzm9m: ["f1x2qbfv", "f1xwf4nz"],
+    fflka: "ff6xuso",
+    do7bja: "fzpvk6c",
+    Be8zqhl: "f4onu7f",
+    Bij0kh0: ["f1ydfez1", "fjensob"],
+    Bwexnyt: "f1yv732j",
+    Bhe5x6o: "fchq2fj",
+    B3kv7bh: "ff5binh"
+  },
+  rtlSlices: {
+    B3gf25r: "f5vdl61",
+    Bvaow4n: "f1bnra92",
+    bhabj1: "f4ibo7t",
+    Bwrfys5: "f17heuis",
+    Bwuzm9m: ["f64f2ud", "f1yjglu3"],
+    Be8zqhl: "fa6l61x",
+    Bij0kh0: ["f1w2396a", "f14ab3yo"]
+  },
+  thick: {
+    uiicq7: "fnyfzln"
+  },
+  thicker: {
+    uiicq7: "f1xdzzot"
+  },
+  thickest: {
+    uiicq7: "f1auhru5"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right:0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
+  d: [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right:0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
 });
 /**
  * Apply styling to the AvatarGroupItem slots based on the state
  */
-
-
 export const useAvatarGroupItemStyles_unstable = state => {
   const {
     isOverflowItem,
@@ -191,15 +178,12 @@ export const useAvatarGroupItemStyles_unstable = state => {
   const sizeStyles = useSizeStyles();
   const groupChildClassName = useGroupChildClassName(layout, size);
   const rootClasses = [rootStyles.base];
-
   if (!isOverflowItem) {
     rootClasses.push(rootStyles.nonOverflowItem);
     rootClasses.push(groupChildClassName);
     rootClasses.push(sizeStyles[size]);
-
     if (layout === 'pie') {
       rootClasses.push(pieStyles.base);
-
       if (size < 56) {
         rootClasses.push(pieStyles.thick);
       } else if (size < 72) {
@@ -207,9 +191,7 @@ export const useAvatarGroupItemStyles_unstable = state => {
       } else {
         rootClasses.push(pieStyles.thickest);
       }
-
       rootClasses.push(pieStyles.slices);
-
       if (dir === 'rtl') {
         rootClasses.push(pieStyles.rtlSlices);
       }
@@ -217,26 +199,21 @@ export const useAvatarGroupItemStyles_unstable = state => {
   } else {
     rootClasses.push(rootStyles.overflowItem);
   }
-
   state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
   state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
-
   if (state.overflowLabel) {
     state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
   }
-
   return state;
 };
 /**
  * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
  * needed for each layout.
  */
-
 export const useGroupChildClassName = (layout, size) => {
   const stackStyles = useStackStyles();
   const spreadStyles = useSpreadStyles();
   const layoutClasses = [];
-
   if (size) {
     if (layout === 'stack') {
       if (size < 56) {
@@ -246,7 +223,6 @@ export const useGroupChildClassName = (layout, size) => {
       } else {
         layoutClasses.push(stackStyles.thickest);
       }
-
       if (size < 24) {
         layoutClasses.push(stackStyles.xxs);
       } else if (size < 48) {
@@ -268,7 +244,6 @@ export const useGroupChildClassName = (layout, size) => {
       }
     }
   }
-
   return mergeClasses(...layoutClasses);
 };
 //# sourceMappingURL=useAvatarGroupItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AACA,SAAS,aAAT,QAA8B,cAA9B;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAMA,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,aAAa,EAAE;AAH8D,CAAxE;AAMP,MAAM,8BAA8B,GAAG,sCAAvC;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAeA;;AAEG;;;AACH,MAAM,eAAe,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAxB;AASA;;AAEG;;;AACH,MAAM,sBAAsB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA/B;AAQA;;AAEG;;;AACH,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAgBA;;AAEG;;;AACH,MAAM,eAAe,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAxB;AAQA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAArB;AAwEA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM;IAAE,cAAF;IAAkB,MAAlB;IAA0B;EAA1B,IAAmC,KAAzC;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EAEA,MAAM,YAAY,GAAG,eAAe,EAApC;EACA,MAAM,mBAAmB,GAAG,sBAAsB,EAAlD;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EAEA,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,MAAD,EAAS,IAAT,CAAlD;EAEA,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC,IAAZ,CAApB;;EAEA,IAAI,CAAC,cAAL,EAAqB;IACnB,WAAW,CAAC,IAAZ,CAAiB,UAAU,CAAC,eAA5B;IACA,WAAW,CAAC,IAAZ,CAAiB,mBAAjB;IACA,WAAW,CAAC,IAAZ,CAAiB,UAAU,CAAC,IAAD,CAA3B;;IAEA,IAAI,MAAM,KAAK,KAAf,EAAsB;MACpB,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,IAA3B;;MAEA,IAAI,IAAI,GAAG,EAAX,EAAe;QACb,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,KAA3B;MACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,OAA3B;MACD,CAFM,MAEA;QACL,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,QAA3B;MACD;;MAED,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,MAA3B;;MAEA,IAAI,GAAG,KAAK,KAAZ,EAAmB;QACjB,WAAW,CAAC,IAAZ,CAAiB,SAAS,CAAC,SAA3B;MACD;IACF;EACF,CAtBD,MAsBO;IACL,WAAW,CAAC,IAAZ,CAAiB,UAAU,CAAC,YAA5B;EACD;;EAED,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAyB,CAAC,IAA3B,EAAiC,GAAG,WAApC,EAAiD,KAAK,CAAC,IAAN,CAAW,SAA5D,CAAnC;EAEA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,CAAC,cAAD,IAAmB,YAAY,CAAC,eAFG,EAGnC,MAAM,KAAK,KAAX,IAAoB,YAAY,CAAC,GAHE,EAInC,KAAK,CAAC,MAAN,CAAa,SAJsB,CAArC;;EAOA,IAAI,KAAK,CAAC,aAAV,EAAyB;IACvB,KAAK,CAAC,aAAN,CAAoB,SAApB,GAAgC,YAAY,CAC1C,yBAAyB,CAAC,aADgB,EAE1C,mBAAmB,CAAC,IAFsB,EAG1C,KAAK,CAAC,aAAN,CAAoB,SAHsB,CAA5C;EAKD;;EAED,OAAO,KAAP;AACD,CA1DM;AA4DP;;;AAGG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,MAAD,EAAqC,IAArC,KAAkE;EACtG,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,MAAM,YAAY,GAAG,eAAe,EAApC;EACA,MAAM,aAAa,GAAG,EAAtB;;EAEA,IAAI,IAAJ,EAAU;IACR,IAAI,MAAM,KAAK,OAAf,EAAwB;MACtB,IAAI,IAAI,GAAG,EAAX,EAAe;QACb,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,KAA/B;MACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,OAA/B;MACD,CAFM,MAEA;QACL,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,QAA/B;MACD;;MAED,IAAI,IAAI,GAAG,EAAX,EAAe;QACb,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,GAA/B;MACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,EAA/B;MACD,CAFM,MAEA,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,CAA/B;MACD,CAFM,MAEA;QACL,aAAa,CAAC,IAAd,CAAmB,WAAW,CAAC,CAA/B;MACD;IACF,CAlBD,MAkBO,IAAI,MAAM,KAAK,QAAf,EAAyB;MAC9B,IAAI,IAAI,GAAG,EAAX,EAAe;QACb,aAAa,CAAC,IAAd,CAAmB,YAAY,CAAC,CAAhC;MACD,CAFD,MAEO,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,aAAa,CAAC,IAAd,CAAmB,YAAY,CAAC,MAAhC;MACD,CAFM,MAEA,IAAI,IAAI,GAAG,EAAX,EAAe;QACpB,aAAa,CAAC,IAAd,CAAmB,YAAY,CAAC,CAAhC;MACD,CAFM,MAEA;QACL,aAAa,CAAC,IAAd,CAAmB,YAAY,CAAC,EAAhC;MACD;IACF;EACF;;EAED,OAAO,YAAY,CAAC,GAAG,aAAJ,CAAnB;AACD,CAtCM","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 { AvatarSizes } 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: AvatarSizes): 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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","useAvatarStyles","useOverflowLabelStyles","useStackStyles","useSpreadStyles","usePieStyles","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","base","push","nonOverflowItem","thick","thicker","thickest","slices","rtlSlices","overflowItem","className","pie","stackStyles","spreadStyles","layoutClasses","xxs","xs","s","l","mNudge","xl"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/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 { AvatarSizes } 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: AvatarSizes): 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"]}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -5,7 +5,6 @@ import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverSty
 /**
  * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
  */
-
 export const AvatarGroupPopover = props => {
   const state = useAvatarGroupPopover_unstable(props);
   const contextValues = useAvatarGroupPopoverContextValues(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"names":[],"mappings":"AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,kCAAT,QAAmD,sCAAnD;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAsC,KAAK,IAAG;EAC3E,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,CAA5C;EACA,MAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,iCAAiC,CAAC,KAAD,EAAQ,aAAR,CAAxC;AACD,CANM;AAQP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,kCAAkC,QAAQ,sCAAsC;AACzF,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,oCAAoC,QAAQ,+BAA+B;AAGpF;;;AAGA,OAAO,MAAMC,kBAAkB,GAAsCC,KAAK,IAAG;EAC3E,MAAMC,KAAK,GAAGJ,8BAA8B,CAACG,KAAK,CAAC;EACnD,MAAME,aAAa,GAAGN,kCAAkC,CAACK,KAAK,CAAC;EAE/DH,oCAAoC,CAACG,KAAK,CAAC;EAC3C,OAAON,iCAAiC,CAACM,KAAK,EAAEC,aAAa,CAAC;AAChE,CAAC;AAEDH,kBAAkB,CAACI,WAAW,GAAG,oBAAoB","names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"]}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js

@@ -5,21 +5,25 @@ import { PopoverTrigger } from '@fluentui/react-popover';
 /**
  * Render the final JSX of AvatarGroupPopover
  */
-
 export const renderAvatarGroupPopover_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
     disableButtonEnhancement: true
-  }, /*#__PURE__*/React.createElement(slots.tooltip, { ...slotProps.tooltip
-  }, /*#__PURE__*/React.createElement(slots.triggerButton, { ...slotProps.triggerButton
-  }))), /*#__PURE__*/React.createElement(slots.popoverSurface, { ...slotProps.popoverSurface
+  }, /*#__PURE__*/React.createElement(slots.tooltip, {
+    ...slotProps.tooltip
+  }, /*#__PURE__*/React.createElement(slots.triggerButton, {
+    ...slotProps.triggerButton
+  }))), /*#__PURE__*/React.createElement(slots.popoverSurface, {
+    ...slotProps.popoverSurface
   }, /*#__PURE__*/React.createElement(AvatarGroupProvider, {
     value: contextValues.avatarGroup
-  }, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
+  }, /*#__PURE__*/React.createElement(slots.content, {
+    ...slotProps.content
   }))));
 };
 //# sourceMappingURL=renderAvatarGroupPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,mCAApC;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAuB,cAAvB,QAA6C,yBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,wBAAwB,EAAA;EAAzB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,eACE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAAuBC,cAAc,QAAQ,yBAAyB;AAItE;;;AAGA,OAAO,MAAMC,iCAAiC,GAAG,CAC/CC,KAA8B,EAC9BC,aAAuC,KACrC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAA0BG,KAAK,CAAC;EAErE,oBACEL,oBAACO,KAAK,CAACE,IAAI;IAAA,GAAMD,SAAS,CAACC;EAAqB,gBAC9CT,oBAACG,cAAc;IAACO,wBAAwB;EAAA,gBACtCV,oBAACO,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAwB,gBACpDX,oBAACO,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,CACtC,CACD,eACjBZ,oBAACO,KAAK,CAACM,cAAc;IAAA,GAAKL,SAAS,CAACK;EAAc,gBAChDb,oBAACC,mBAAmB;IAACa,KAAK,EAAER,aAAa,CAACS;EAAW,gBACnDf,oBAACO,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,CACpB,CACD,CACZ;AAEjB,CAAC","names":["React","AvatarGroupProvider","getSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"]}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -13,10 +13,8 @@ import { Tooltip } from '@fluentui/react-tooltip';
  *
  * @param props - props from this instance of AvatarGroupPopover
  */
-
 export const useAvatarGroupPopover_unstable = props => {
   var _a;
-
   const size = (_a = useAvatarGroupContext_unstable(ctx => ctx.size)) !== null && _a !== void 0 ? _a : defaultAvatarGroupSize;
   const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
   const {
@@ -30,16 +28,12 @@ export const useAvatarGroupPopover_unstable = props => {
     defaultState: props.defaultOpen,
     initialState: false
   });
-
   const handleOnPopoverChange = (e, data) => {
     var _a;
-
     (_a = restOfProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(restOfProps, e, data);
     setPopoverOpen(data.open);
   };
-
   let triggerButtonChildren;
-
   if (layout === 'pie') {
     triggerButtonChildren = null;
   } else if (indicator === 'icon') {
@@ -47,7 +41,6 @@ export const useAvatarGroupPopover_unstable = props => {
   } else {
     triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
   }
-
   return {
     count,
     indicator,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const {\n    indicator = size < 24 ? 'icon' : 'count',\n    count = React.Children.count(props.children),\n    children,\n    ...restOfProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'icon') {\n    triggerButtonChildren = <MoreHorizontalRegular />;\n  } else {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n    size,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: {\n      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n      children: <></>,\n      size: 'small',\n      trapFocus: true,\n      ...restOfProps,\n      open: popoverOpen,\n      onOpenChange: handleOnPopoverChange,\n    },\n    triggerButton: resolveShorthand(props.triggerButton, {\n      required: true,\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n    }),\n    tooltip: resolveShorthand(props.tooltip, {\n      required: true,\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useControllableState","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","count","Children","children","restOfProps","popoverOpen","setPopoverOpen","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","components","root","triggerButton","content","popoverSurface","tooltip","trapFocus","required","defaultProps","type","role","tabIndex","relationship"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand, useControllableState } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const {\n    indicator = size < 24 ? 'icon' : 'count',\n    count = React.Children.count(props.children),\n    children,\n    ...restOfProps\n  } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'icon') {\n    triggerButtonChildren = <MoreHorizontalRegular />;\n  } else {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n    size,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: {\n      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n      children: <></>,\n      size: 'small',\n      trapFocus: true,\n      ...restOfProps,\n      open: popoverOpen,\n      onOpenChange: handleOnPopoverChange,\n    },\n    triggerButton: resolveShorthand(props.triggerButton, {\n      required: true,\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n    }),\n    popoverSurface: resolveShorthand(props.popoverSurface, {\n      required: true,\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n    }),\n    tooltip: resolveShorthand(props.tooltip, {\n      required: true,\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n    }),\n  };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"names":[],"mappings":"AAGA,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAA6D;EAC7G,MAAM,WAAW,GAA4B;IAC3C,UAAU,EAAE,IAD+B;IAE3C,IAAI,EAAE;EAFqC,CAA7C;EAKA,OAAO;IAAE;EAAF,CAAP;AACD,CAPM","sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAGA,OAAO,MAAMA,kCAAkC,GAAIC,KAA8B,IAA8B;EAC7G,MAAMC,WAAW,GAA4B;IAC3CC,UAAU,EAAE,IAAI;IAChBC,IAAI,EAAE;GACP;EAED,OAAO;IAAEF;EAAW,CAAE;AACxB,CAAC","names":["useAvatarGroupPopoverContextValues","state","avatarGroup","isOverflow","size"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"]}