@fluentui/react-avatar 9.0.4 → 9.1.1

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js

@@ -0,0 +1,307 @@
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles';
+import { useSizeStyles } from '../Avatar/useAvatarStyles';
+export const avatarGroupPopoverClassNames = {
+  root: 'fui-AvatarGroupPopover',
+  content: 'fui-AvatarGroupPopover__content',
+  popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
+  tooltip: 'fui-AvatarGroupPopover__tooltip',
+  triggerButton: 'fui-AvatarGroupPopover__triggerButton'
+};
+/**
+ * Styles for the content slot.
+ */
+
+const useContentStyles = /*#__PURE__*/__styles({
+  "base": {
+    "dclx09": "ftrb29c",
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"]
+  }
+}, {
+  "d": [".ftrb29c{list-style-type:none;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
+});
+/**
+ * Styles for the popoverSurface slot.
+ */
+
+
+const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bxyxcbc": "fopcw2o",
+    "sshi5w": "f1n5o1gx",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "fqkkaap",
+    "z8tnut": "f1kwiid1",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "f5b47ha",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
+    "a9b677": "f13dwy2t"
+  }
+}, {
+  "d": [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f13dwy2t{width:220px;}"]
+});
+/**
+ * Styles for the triggerButton slot.
+ */
+
+
+const useTriggerButtonStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "qhf8xq": "f10pi13n",
+    "Bnnss6s": "fi64zpg",
+    "Brf1p80": "f4d9j23",
+    "Bt984gj": "f122n59",
+    "sj55zd": "f19n0e5",
+    "De3pzq": "fxugw4r",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"],
+    "Bjwas2f": "fw33nwi",
+    "Bn1d65q": ["f1ptkjjm", "fmzzjfk"],
+    "Bxeuatn": "f15j0dln",
+    "n51gp8": ["fmzzjfk", "f1ptkjjm"]
+  },
+  "pie": {
+    "De3pzq": "f1c21dwh",
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "sj55zd": "f44pa96"
+  },
+  "focusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "r6j8yp": "f9sgzds",
+    "w235jp": ["fut1j4r", "fkf1fqv"],
+    "Bjm0d8m": "f1t0sa4d",
+    "jwfw70": ["fkf1fqv", "fut1j4r"],
+    "Hbfjuj": "fikr5py",
+    "zog540": "f1rsleix",
+    "yj03m6": "fv9e16l"
+  },
+  "pieFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "oszr8s": "f1y8129k",
+    "B50rz4d": ["fu21ej", "f1pmrd9z"],
+    "Bb145of": "f1vgtxyk",
+    "Bxp30wo": ["f1pmrd9z", "fu21ej"],
+    "d5lb0k": "f1pah1tb",
+    "Bvq7845": ["f1q2ljzj", "f1cf0pyq"],
+    "Bt5y04j": "fgb2zbd",
+    "Bt3jgif": ["f1cf0pyq", "f1q2ljzj"],
+    "r6j8yp": "fm5t4ci",
+    "w235jp": ["f1f04vxt", "f1bag0yd"],
+    "Bjm0d8m": "fxk9raq",
+    "jwfw70": ["f1bag0yd", "f1f04vxt"]
+  },
+  "states": {
+    "Bi91k9c": "feu1g3u",
+    "Jwef8y": "f1knas48",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "lj723h": "f1g4hkjv",
+    "ecr2s2": "fb40n2d",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"]
+  },
+  "selected": {
+    "sj55zd": "f14nttnl",
+    "De3pzq": "f1nfm20t",
+    "g2u3we": "f1ly1fcm",
+    "h3c5rm": ["fi8bssc", "fj6btzu"],
+    "B9xav0g": "f1s9tnsa",
+    "zhjwy3": ["fj6btzu", "fi8bssc"]
+  },
+  "icon12": {
+    "Be2twd7": "f1ugzwwg"
+  },
+  "icon16": {
+    "Be2twd7": "f4ybsrx"
+  },
+  "icon20": {
+    "Be2twd7": "fe5j1ua"
+  },
+  "icon24": {
+    "Be2twd7": "f1rt2boy"
+  },
+  "icon28": {
+    "Be2twd7": "f24l1pt"
+  },
+  "icon32": {
+    "Be2twd7": "ffl51b"
+  },
+  "icon48": {
+    "Be2twd7": "f18m8u13"
+  },
+  "caption2Strong": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f13mqy1h",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fcpl73t"
+  },
+  "caption1Strong": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "body1Strong": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "subtitle2": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "faaz57k"
+  },
+  "subtitle1": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f106mvju"
+  },
+  "title3": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1x0m3f5",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "fb86gi6"
+  },
+  "borderThin": {
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"]
+  },
+  "borderThick": {
+    "B4j52fo": "f18zi460",
+    "Bekrc4i": ["f1wpluaz", "fsfsuhs"],
+    "Bn0qgzm": "fmklw6v",
+    "ibv6hh": ["fsfsuhs", "f1wpluaz"]
+  },
+  "borderThicker": {
+    "B4j52fo": "fgx37oo",
+    "Bekrc4i": ["f130t4y6", "f1efpmoh"],
+    "Bn0qgzm": "fv51ejd",
+    "ibv6hh": ["f1efpmoh", "f130t4y6"]
+  },
+  "borderThickest": {
+    "B4j52fo": "fwn6jck",
+    "Bekrc4i": ["figl7jc", "f1g0iy8l"],
+    "Bn0qgzm": "f1b8shu7",
+    "ibv6hh": ["f1g0iy8l", "figl7jc"]
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".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);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f9sgzds.fui-focus-visible{border-top-color:transparent;}", ".fut1j4r.fui-focus-visible{border-right-color:transparent;}", ".fkf1fqv.fui-focus-visible{border-left-color:transparent;}", ".f1t0sa4d.fui-focus-visible{border-bottom-color:transparent;}", ".fikr5py.fui-focus-visible{outline-color:var(--colorStrokeFocus2);}", ".f1rsleix.fui-focus-visible{outline-width:var(--strokeWidthThick);}", ".fv9e16l.fui-focus-visible{outline-style:solid;}", ".f1y8129k.fui-focus-visible{border-top-width:var(--strokeWidthThick);}", ".fu21ej.fui-focus-visible{border-right-width:var(--strokeWidthThick);}", ".f1pmrd9z.fui-focus-visible{border-left-width:var(--strokeWidthThick);}", ".f1vgtxyk.fui-focus-visible{border-bottom-width:var(--strokeWidthThick);}", ".f1pah1tb.fui-focus-visible{border-top-style:solid;}", ".f1q2ljzj.fui-focus-visible{border-right-style:solid;}", ".f1cf0pyq.fui-focus-visible{border-left-style:solid;}", ".fgb2zbd.fui-focus-visible{border-bottom-style:solid;}", ".fm5t4ci.fui-focus-visible{border-top-color:var(--colorStrokeFocus2);}", ".f1f04vxt.fui-focus-visible{border-right-color:var(--colorStrokeFocus2);}", ".f1bag0yd.fui-focus-visible{border-left-color:var(--colorStrokeFocus2);}", ".fxk9raq.fui-focus-visible{border-bottom-color:var(--colorStrokeFocus2);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
+  "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f15j0dln{border-bottom-color:CanvasText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmzzjfk{border-left-color:CanvasText;}.f1ptkjjm{border-right-color:CanvasText;}}", {
+    "m": "(forced-colors: active)"
+  }]],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
+  "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
+});
+/**
+ * Apply styling to the AvatarGroupPopover slots based on the state
+ */
+
+
+export const useAvatarGroupPopoverStyles_unstable = state => {
+  const {
+    indicator,
+    size,
+    layout,
+    popoverOpen
+  } = state;
+  const sizeStyles = useSizeStyles();
+  const triggerButtonStyles = useTriggerButtonStyles();
+  const contentStyles = useContentStyles();
+  const popoverSurfaceStyles = usePopoverSurfaceStyles();
+  const groupChildClassName = useGroupChildClassName(layout, size, true);
+  const triggerButtonClasses = [];
+
+  if (size < 36) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThin);
+  } else if (size < 56) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThick);
+  } else if (size < 72) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThicker);
+  } else {
+    triggerButtonClasses.push(triggerButtonStyles.borderThickest);
+  }
+
+  if (indicator === 'count') {
+    if (size <= 24) {
+      triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
+    } else if (size <= 28) {
+      triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
+    } else if (size <= 40) {
+      triggerButtonClasses.push(triggerButtonStyles.body1Strong);
+    } else if (size <= 56) {
+      triggerButtonClasses.push(triggerButtonStyles.subtitle2);
+    } else if (size <= 96) {
+      triggerButtonClasses.push(triggerButtonStyles.subtitle1);
+    } else {
+      triggerButtonClasses.push(triggerButtonStyles.title3);
+    }
+  } else {
+    if (size <= 16) {
+      triggerButtonClasses.push(triggerButtonStyles.icon12);
+    } else if (size <= 24) {
+      triggerButtonClasses.push(triggerButtonStyles.icon16);
+    } else if (size <= 40) {
+      triggerButtonClasses.push(triggerButtonStyles.icon20);
+    } else if (size <= 48) {
+      triggerButtonClasses.push(triggerButtonStyles.icon24);
+    } else if (size <= 56) {
+      triggerButtonClasses.push(triggerButtonStyles.icon28);
+    } else if (size <= 72) {
+      triggerButtonClasses.push(triggerButtonStyles.icon32);
+    } else {
+      triggerButtonClasses.push(triggerButtonStyles.icon48);
+    }
+  }
+
+  state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, layout === 'pie' && triggerButtonStyles.pieFocusIndicator, layout !== 'pie' && triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
+  state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+  state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
+  return state;
+};
+//# sourceMappingURL=useAvatarGroupPopoverStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","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  // These styles match the default button styles.\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n  }),\n\n  // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n  pieFocusIndicator: 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, true);\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    layout === 'pie' && triggerButtonStyles.pieFocusIndicator,\n    layout !== 'pie' && 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"],"sourceRoot":"../src/"}

package/lib/contexts/AvatarGroupContext.js

@@ -1,8 +1,11 @@
-import { createContext } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 /**
- * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.
+ * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine
+ * default values of some props.
  */
-// eslint-disable-next-line @fluentui/no-context-default-value
 
-export const AvatarGroupContext = /*#__PURE__*/createContext({});
+export const AvatarGroupContext = /*#__PURE__*/createContext(undefined);
+const avatarGroupContextDefaultValue = {};
+export const AvatarGroupProvider = AvatarGroupContext.Provider;
+export const useAvatarGroupContext_unstable = selector => useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));
 //# sourceMappingURL=AvatarGroupContext.js.map

package/lib/contexts/AvatarGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA;;AAEG;AACH;;AACA,OAAO,MAAM,kBAAkB,gBAAqC,aAAa,CAAC,EAAD,CAA1E","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from './AvatarGroupContext.types';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAmE,kCAAnE;AAIA;;;AAGG;;AACH,OAAO,MAAM,kBAAkB,gBAAqC,aAAa,CAC/E,SAD+E,CAA1E;AAIP,MAAM,8BAA8B,GAA4B,EAAhE;AAEA,OAAO,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,QAA/C;AAEP,OAAO,MAAM,8BAA8B,GAAO,QAAJ,IAC5C,kBAAkB,CAAC,kBAAD,EAAqB,CAAC,GAAG,GAAG,8BAAP,KAA0C,QAAQ,CAAC,GAAD,CAAvE,CADb","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,6 +1,7 @@
 export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable } from './Avatar';
-export { getInitials } from './utils/index';
-export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupStyles_unstable, useAvatarGroup_unstable } from './AvatarGroup';
+export { getInitials, partitionAvatarGroupItems } from './utils/index';
+export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable } from './AvatarGroup';
 export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable } from './AvatarGroupItem';
-export * from './AvatarGroupOverflow';
+export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable } from './AvatarGroupPopover';
+export { AvatarGroupProvider, useAvatarGroupContext_unstable } from './contexts/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,eADF,EAEE,yBAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,2BALF,QAMO,mBANP;AAQA,cAAc,uBAAd","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport * from './AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SAAS,WAAT,EAAsB,yBAAtB,QAAuD,eAAvD;AAEA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,2BAJF,EAKE,6BALF,EAME,uBANF,QAOO,eAPP;AAeA,SACE,eADF,EAEE,yBAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,2BALF,QAMO,mBANP;AAQA,SACE,kBADF,EAEE,4BAFF,EAGE,iCAHF,EAIE,oCAJF,EAKE,8BALF,QAMO,sBANP;AAQA,SAAS,mBAAT,EAA8B,8BAA9B,QAAoE,kBAApE","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport { AvatarGroupProvider, useAvatarGroupContext_unstable } from './contexts/index';\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js

@@ -1,2 +1,3 @@
 export { getInitials } from './getInitials';
+export { partitionAvatarGroupItems } from './partitionAvatarGroupItems';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { getInitials } from './getInitials';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"]}

package/lib/utils/partitionAvatarGroupItems.js

@@ -0,0 +1,30 @@
+/**
+ * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.
+ *
+ * @param options - Configure the partition options
+ *
+ * @returns Two arrays split into inline items and overflow items based on maxInlineItems.
+ */
+export const partitionAvatarGroupItems = options => {
+  var _a;
+
+  const {
+    items
+  } = options;
+  const isPie = options.layout === 'pie';
+
+  if (isPie) {
+    return {
+      inlineItems: items.slice(0, 3),
+      overflowItems: items
+    };
+  }
+
+  const maxInlineItems = (_a = options.maxInlineItems) !== null && _a !== void 0 ? _a : 5;
+  const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));
+  return {
+    inlineItems: items.slice(inlineCount),
+    overflowItems: items.slice(0, inlineCount)
+  };
+};
+//# sourceMappingURL=partitionAvatarGroupItems.js.map

package/lib/utils/partitionAvatarGroupItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/partitionAvatarGroupItems.ts"],"names":[],"mappings":"AAMA;;;;;;AAMG;AACH,OAAO,MAAM,yBAAyB,GAAO,OAAJ,IAAoD;;;EAC3F,MAAM;IAAE;EAAF,IAAY,OAAlB;EACA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAR,KAAmB,KAAjC;;EAEA,IAAI,KAAJ,EAAW;IACT,OAAO;MACL,WAAW,EAAE,KAAK,CAAC,KAAN,CAAY,CAAZ,EAAe,CAAf,CADR;MAEL,aAAa,EAAE;IAFV,CAAP;EAID;;EAED,MAAM,cAAc,GAAG,CAAA,EAAA,GAAA,OAAO,CAAC,cAAR,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAA0B,CAAjD;EACA,MAAM,WAAW,GAAG,EAAE,cAAc,IAAI,KAAK,CAAC,MAAN,GAAe,cAAf,GAAgC,CAAhC,GAAoC,CAAxC,CAAhB,CAApB;EAEA,OAAO;IACL,WAAW,EAAE,KAAK,CAAC,KAAN,CAAY,WAAZ,CADR;IAEL,aAAa,EAAE,KAAK,CAAC,KAAN,CAAY,CAAZ,EAAe,WAAf;EAFV,CAAP;AAID,CAlBM","sourcesContent":["export type PartitionAvatarGroupItemsOptions<T> = {\n  items: readonly T[];\n  layout?: 'spread' | 'stack' | 'pie';\n  maxInlineItems?: number;\n};\n\n/**\n * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.\n *\n * @param options - Configure the partition options\n *\n * @returns Two arrays split into inline items and overflow items based on maxInlineItems.\n */\nexport const partitionAvatarGroupItems = <T>(options: PartitionAvatarGroupItemsOptions<T>) => {\n  const { items } = options;\n  const isPie = options.layout === 'pie';\n\n  if (isPie) {\n    return {\n      inlineItems: items.slice(0, 3),\n      overflowItems: items,\n    };\n  }\n\n  const maxInlineItems = options.maxInlineItems ?? 5;\n  const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));\n\n  return {\n    inlineItems: items.slice(inlineCount),\n    overflowItems: items.slice(0, inlineCount),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/{AvatarGroupOverflow.js → AvatarGroupPopover.js}

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
-tslib_1.__exportStar(require("./components/AvatarGroupOverflow/index"), exports);
-//# sourceMappingURL=AvatarGroupOverflow.js.map
+tslib_1.__exportStar(require("./components/AvatarGroupPopover/index"), exports);
+//# sourceMappingURL=AvatarGroupPopover.js.map

package/lib-commonjs/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AvatarGroupPopover.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AvatarGroupPopover/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Avatar/useAvatar.js

@@ -17,8 +17,6 @@ const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
 
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const useAvatar_unstable = (props, ref) => {
   var _a;
 
@@ -85,12 +83,9 @@ const useAvatar_unstable = (props, ref) => {
     }
   }); // Hide the image if it fails to load and restore it on a successful load
 
-  const imageOnError = react_utilities_2.useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onError, () => setImageHidden(true));
-  const imageOnLoad = react_utilities_2.useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onLoad, () => setImageHidden(undefined));
-
   if (image) {
-    image.onError = imageOnError;
-    image.onLoad = imageOnLoad;
+    image.onError = react_utilities_1.mergeCallbacks(image.onError, () => setImageHidden(true));
+    image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
   }
 
   const badge = react_utilities_1.resolveShorthand(props.badge, {

package/lib-commonjs/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n  const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n  if (image) {\n    image.onError = imageOnError;\n    image.onLoad = imageOnLoad;\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Avatar/useAvatarStyles.js

@@ -369,7 +369,7 @@ const useColorStyles = /*#__PURE__*/react_1.__styles({
     "De3pzq": "f18f03hv"
   },
   "brand": {
-    "sj55zd": "fqpbvvt",
+    "sj55zd": "fonrgv7",
     "De3pzq": "f1blnnmj"
   },
   "dark-red": {
@@ -493,7 +493,7 @@ const useColorStyles = /*#__PURE__*/react_1.__styles({
     "De3pzq": "fu4yj0j"
   }
 }, {
-  "d": [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
+  "d": [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
 });
 
 const useAvatarStyles_unstable = state => {