@fluentui/react-avatar 9.0.0-rc.9 → 9.0.2

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAvatarGroupItem_unstable = void 0;
+
+const Avatar_1 = /*#__PURE__*/require("../Avatar/Avatar");
+
+const AvatarGroupContext_1 = /*#__PURE__*/require("../../contexts/AvatarGroupContext");
+
+const useAvatarGroup_1 = /*#__PURE__*/require("../AvatarGroup/useAvatarGroup");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */
+
+
+const useAvatarGroupItem_unstable = (props, ref) => {
+  const nonOverflowAvatarsCount = react_context_selector_1.useContextSelector(AvatarGroupContext_1.AvatarGroupContext, ctx => ctx.nonOverflowAvatarsCount);
+  const groupIsOverflow = react_context_selector_1.useContextSelector(AvatarGroupContext_1.AvatarGroupContext, ctx => ctx.isOverflow);
+  const layout = react_context_selector_1.useContextSelector(AvatarGroupContext_1.AvatarGroupContext, ctx => ctx.layout);
+  const groupSize = react_context_selector_1.useContextSelector(AvatarGroupContext_1.AvatarGroupContext, ctx => ctx.size); // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+
+  const {
+    style,
+    className,
+    ...avatarSlotProps
+  } = props;
+  const size = groupSize !== null && groupSize !== void 0 ? groupSize : useAvatarGroup_1.defaultAvatarGroupSize;
+  const hasAvatarGroupContext = react_context_selector_1.useHasParentContext(AvatarGroupContext_1.AvatarGroupContext);
+
+  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
+    // eslint-disable-next-line no-console
+    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
+  }
+
+  return {
+    nonOverflowAvatarsCount: nonOverflowAvatarsCount !== null && nonOverflowAvatarsCount !== void 0 ? nonOverflowAvatarsCount : 1,
+    layout,
+    size,
+    isOverflowItem: groupIsOverflow,
+    components: {
+      root: 'div',
+      avatar: Avatar_1.Avatar,
+      overflowLabel: 'span'
+    },
+    root: react_utilities_1.resolveShorthand(props.root, {
+      required: true,
+      defaultProps: {
+        style,
+        className,
+        role: groupIsOverflow ? 'listitem' : undefined
+      }
+    }),
+    avatar: react_utilities_1.resolveShorthand(props.avatar, {
+      required: true,
+      defaultProps: {
+        ref,
+        size,
+        color: 'colorful',
+        ...avatarSlotProps
+      }
+    }),
+    overflowLabel: react_utilities_1.resolveShorthand(props.overflowLabel, {
+      required: true,
+      defaultProps: {
+        children: props.name
+      }
+    })
+  };
+};
+
+exports.useAvatarGroupItem_unstable = useAvatarGroupItem_unstable;
+//# sourceMappingURL=useAvatarGroupItem.js.map

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM,uBAAuB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,oBAAA,CAAA,kBAAnB,EAAuC,GAAG,IAAI,GAAG,CAAC,uBAAlD,CAAhC;EACA,MAAM,eAAe,GAAG,wBAAA,CAAA,kBAAA,CAAmB,oBAAA,CAAA,kBAAnB,EAAuC,GAAG,IAAI,GAAG,CAAC,UAAlD,CAAxB;EACA,MAAM,MAAM,GAAG,wBAAA,CAAA,kBAAA,CAAmB,oBAAA,CAAA,kBAAnB,EAAuC,GAAG,IAAI,GAAG,CAAC,MAAlD,CAAf;EACA,MAAM,SAAS,GAAG,wBAAA,CAAA,kBAAA,CAAmB,oBAAA,CAAA,kBAAnB,EAAuC,GAAG,IAAI,GAAG,CAAC,IAAlD,CAAlB,CAJwB,CAKxB;;EACA,MAAM;IAAE,KAAF;IAAS,SAAT;IAAoB,GAAG;EAAvB,IAA2C,KAAjD;EACA,MAAM,IAAI,GAAG,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,gBAAA,CAAA,sBAA1B;EACA,MAAM,qBAAqB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,oBAAA,CAAA,kBAApB,CAA9B;;EAEA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,CAAC,qBAA9C,EAAqE;IACnE;IACA,OAAO,CAAC,IAAR,CAAa,oEAAb;EACD;;EAED,OAAO;IACL,uBAAuB,EAAE,uBAAuB,KAAA,IAAvB,IAAA,uBAAuB,KAAA,KAAA,CAAvB,GAAA,uBAAA,GAA2B,CAD/C;IAEL,MAFK;IAGL,IAHK;IAIL,cAAc,EAAE,eAJX;IAKL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,QAAA,CAAA,MAFE;MAGV,aAAa,EAAE;IAHL,CALP;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,KADY;QAEZ,SAFY;QAGZ,IAAI,EAAE,eAAe,GAAG,UAAH,GAAgB;MAHzB;IAFmB,CAA7B,CAVD;IAkBL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;MACrC,QAAQ,EAAE,IAD2B;MAErC,YAAY,EAAE;QACZ,GADY;QAEZ,IAFY;QAGZ,KAAK,EAAE,UAHK;QAIZ,GAAG;MAJS;IAFuB,CAA/B,CAlBH;IA2BL,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,EAAsC;MACnD,QAAQ,EAAE,IADyC;MAEnD,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAK,CAAC;MADJ;IAFqC,CAAtC;EA3BV,CAAP;AAkCD,CApDM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const nonOverflowAvatarsCount = useContextSelector(AvatarGroupContext, ctx => ctx.nonOverflowAvatarsCount);\n  const groupIsOverflow = useContextSelector(AvatarGroupContext, ctx => ctx.isOverflow);\n  const layout = useContextSelector(AvatarGroupContext, ctx => ctx.layout);\n  const groupSize = useContextSelector(AvatarGroupContext, ctx => ctx.size);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    nonOverflowAvatarsCount: nonOverflowAvatarsCount ?? 1,\n    layout,\n    size,\n    isOverflowItem: groupIsOverflow,\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\n        role: groupIsOverflow ? 'listitem' : undefined,\n      },\n    }),\n    avatar: resolveShorthand(props.avatar, {\n      required: true,\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n    }),\n    overflowLabel: resolveShorthand(props.overflowLabel, {\n      required: true,\n      defaultProps: {\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -0,0 +1,370 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroupChildClassName = exports.useAvatarGroupItemStyles_unstable = exports.avatarGroupItemClassNames = void 0;
+
+const Avatar_1 = /*#__PURE__*/require("../../Avatar");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+exports.avatarGroupItemClassNames = {
+  root: 'fui-AvatarGroupItem',
+  avatar: 'fui-AvatarGroupItem__avatar',
+  overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
+};
+const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divier--width';
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/react_1.__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"]
+  }
+}, {
+  "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__*/react_1.__styles({
+  "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;}"]
+});
+/**
+ * Styles for the label slot
+ */
+
+
+const useOverflowLabelStyles = /*#__PURE__*/react_1.__styles({
+  "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);}"]
+});
+/**
+ * Styles for the pie layout
+ */
+
+
+const usePieStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "qhf8xq": "f1euv43f"
+  },
+  "twoSlices": {
+    "way436": "f1mfxe7f",
+    "Bqy7o86": ["f1c18q0d", "fojsu5g"],
+    "Hjso5x": "f1oifxvu",
+    "B73oaz0": ["fqdbg8w", "fzmpboy"]
+  },
+  "threeSlices": {
+    "way436": "f1mfxe7f",
+    "Bqy7o86": ["f1c18q0d", "fojsu5g"],
+    "B4jwau3": "f1ifdbou",
+    "d8ohzp": ["f137bn9p", "ffwkz12"],
+    "B395mff": "fkr8g3j",
+    "Bqzfac6": "f1l8nhah",
+    "tv7yr1": "f7qglgr",
+    "Bo30zgl": "flj7kkj"
+  },
+  "thick": {
+    "Bw9cqsg": "f1hcqiyb"
+  },
+  "thicker": {
+    "Bw9cqsg": "f3scl8u"
+  },
+  "thickest": {
+    "Bw9cqsg": "f46m186"
+  }
+}, {
+  "d": [".f1euv43f{position:absolute;}", ".f1mfxe7f:first-child{-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)) 0 25%);}", ".f1c18q0d:first-child{left:-25%;}", ".fojsu5g:first-child{right:-25%;}", ".f1oifxvu:nth-child(2){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divier--width) / 2)));}", ".fqdbg8w:nth-child(2){left:25%;}", ".fzmpboy:nth-child(2){right:25%;}", ".f1ifdbou:not(:first-child){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divier--width) var(--fuiAvatarGroupItem__divier--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divier--width) var(--fuiAvatarGroupItem__divier--width));}", ".f137bn9p:not(:first-child){left:50%;}", ".ffwkz12:not(:first-child){right:50%;}", ".fkr8g3j:not(:first-child){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".f1l8nhah:not(:first-child){transform-origin:0 0;}", ".f7qglgr:nth-child(3){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divier--width) 0 0 var(--fuiAvatarGroupItem__divier--width));clip-path:inset(var(--fuiAvatarGroupItem__divier--width) 0 0 var(--fuiAvatarGroupItem__divier--width));}", ".flj7kkj:nth-child(3){top:50%;}", ".f1hcqiyb{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThick);}", ".f3scl8u{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThicker);}", ".f46m186{--fuiAvatarGroupItem__divier--width:var(--strokeWidthThickest);}"]
+});
+
+const useStackStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Bsft5z2": "f1iwjod4",
+    "E3zdtr": "f1mdlcz9",
+    "ap17g6": "f15zbnnk",
+    "B0n5ga8": "f1de97fc",
+    "s924m2": ["fnkdar3", "f1rue1y9"],
+    "B1q35kw": "f6bjq4p",
+    "Gp14am": ["f1rue1y9", "fnkdar3"],
+    "B3778ie": ["fprarqb", "f14vs0nd"],
+    "d9w3h3": ["f14vs0nd", "fprarqb"],
+    "Bl18szs": ["f1gtfqs9", "f18zvfd9"],
+    "B4j8arr": ["f18zvfd9", "f1gtfqs9"],
+    "Bm2nyyq": "f8rth92",
+    "Barhvk9": ["flthirb", "ftkbnf5"],
+    "Bw17bha": "f1lh990p",
+    "vfts7": ["ftkbnf5", "flthirb"],
+    "qx5q1e": "f1dpauah"
+  },
+  "overflowButton": {
+    "Bc0dv0h": "f1o149bd",
+    "Bt0nq95": ["f1xgvrhv", "f34pcxu"],
+    "Bte176d": "f9nu0bd",
+    "Buo7p3s": ["f34pcxu", "f1xgvrhv"],
+    "Bjwas2f": "f14pvji2",
+    "Bn1d65q": ["f1xeojaw", "f1hodmrf"],
+    "Bxeuatn": "fcbbwn3",
+    "n51gp8": ["f1hodmrf", "f1xeojaw"]
+  },
+  "thick": {
+    "a2br6o": "fiy03ts",
+    "Dlnsje": "f5o33kw",
+    "Eqx8gd": ["f5kz84h", "f8jassg"],
+    "bn5sak": "f1oigyhu",
+    "xrcqlc": "fozawe0",
+    "Ihftqj": ["f15gmigz", "f11o3tup"],
+    "Bcgy8vk": "f14pi962",
+    "Bhxzhr1": ["f11o3tup", "f15gmigz"]
+  },
+  "thicker": {
+    "a2br6o": "fiy03ts",
+    "Dlnsje": "f5o33kw",
+    "Eqx8gd": ["f1f2c3j3", "f1g5d141"],
+    "bn5sak": "f1vvl5ts",
+    "xrcqlc": "f1gbh4dy",
+    "Ihftqj": ["f1os6oqe", "f4y7ea8"],
+    "Bcgy8vk": "f1a3lyng",
+    "Bhxzhr1": ["f4y7ea8", "f1os6oqe"]
+  },
+  "thickest": {
+    "a2br6o": "fiy03ts",
+    "Dlnsje": "f5o33kw",
+    "Eqx8gd": ["fueot05", "f1mir6xb"],
+    "bn5sak": "f1izs6vq",
+    "xrcqlc": "f15ae8rs",
+    "Ihftqj": ["f1c7xjog", "fn35eni"],
+    "Bcgy8vk": "f9v1pvc",
+    "Bhxzhr1": ["fn35eni", "f1c7xjog"]
+  },
+  "borderThin": {
+    "a2br6o": "fe2wxzu",
+    "Dlnsje": "fcr18t3",
+    "Eqx8gd": ["fhjhgwu", "fh9v7u1"],
+    "bn5sak": "f1mqssek"
+  },
+  "borderThick": {
+    "a2br6o": "f19rfb2x",
+    "Dlnsje": "fk4cr37",
+    "Eqx8gd": ["foc71j7", "f1xoeo06"],
+    "bn5sak": "fd6iyyb"
+  },
+  "borderThicker": {
+    "a2br6o": "f1byqz6t",
+    "Dlnsje": "fdqxnrd",
+    "Eqx8gd": ["f1x8rm7i", "ftx9300"],
+    "bn5sak": "f13zu3lb"
+  },
+  "borderThickest": {
+    "a2br6o": "f1i9snzy",
+    "Dlnsje": "f19z50l7",
+    "Eqx8gd": ["f1fgc9m6", "f1d4bgoy"],
+    "bn5sak": "fkll7mr"
+  },
+  "xxs": {
+    "jhia2w": ["f1cjco14", "f13dxjc9"]
+  },
+  "xs": {
+    "jhia2w": ["f15p6bln", "f1bab3ru"]
+  },
+  "s": {
+    "jhia2w": ["f1v53ncc", "f17pu8r8"]
+  },
+  "l": {
+    "jhia2w": ["flv48ch", "fnh1ydj"]
+  }
+}, {
+  "d": [".f1iwjod4::after{content:'';}", ".f1mdlcz9::after{position:absolute;}", ".f15zbnnk::after{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1de97fc::after{border-top-color:var(--colorNeutralBackground2);}", ".fnkdar3::after{border-right-color:var(--colorNeutralBackground2);}", ".f1rue1y9::after{border-left-color:var(--colorNeutralBackground2);}", ".f6bjq4p::after{border-bottom-color:var(--colorNeutralBackground2);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".fiy03ts::after{width:100%;}", ".f5o33kw::after{height:100%;}", ".f5kz84h::after{left:calc(-1 * var(--strokeWidthThick));}", ".f8jassg::after{right:calc(-1 * var(--strokeWidthThick));}", ".f1oigyhu::after{top:calc(-1 * var(--strokeWidthThick));}", ".fozawe0::after{border-top-width:var(--strokeWidthThick);}", ".f15gmigz::after{border-right-width:var(--strokeWidthThick);}", ".f11o3tup::after{border-left-width:var(--strokeWidthThick);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1f2c3j3::after{left:calc(-1 * var(--strokeWidthThicker));}", ".f1g5d141::after{right:calc(-1 * var(--strokeWidthThicker));}", ".f1vvl5ts::after{top:calc(-1 * var(--strokeWidthThicker));}", ".f1gbh4dy::after{border-top-width:var(--strokeWidthThicker);}", ".f1os6oqe::after{border-right-width:var(--strokeWidthThicker);}", ".f4y7ea8::after{border-left-width:var(--strokeWidthThicker);}", ".f1a3lyng::after{border-bottom-width:var(--strokeWidthThicker);}", ".fueot05::after{left:calc(-1 * var(--strokeWidthThickest));}", ".f1mir6xb::after{right:calc(-1 * var(--strokeWidthThickest));}", ".f1izs6vq::after{top:calc(-1 * var(--strokeWidthThickest));}", ".f15ae8rs::after{border-top-width:var(--strokeWidthThickest);}", ".f1c7xjog::after{border-right-width:var(--strokeWidthThickest);}", ".fn35eni::after{border-left-width:var(--strokeWidthThickest);}", ".f9v1pvc::after{border-bottom-width:var(--strokeWidthThickest);}", ".fe2wxzu::after{width:calc(100% + var(--strokeWidthThin) * 2);}", ".fcr18t3::after{height:calc(100% + var(--strokeWidthThin) * 2);}", ".fhjhgwu::after{left:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".fh9v7u1::after{right:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f1mqssek::after{top:calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));}", ".f19rfb2x::after{width:calc(100% + var(--strokeWidthThick) * 2);}", ".fk4cr37::after{height:calc(100% + var(--strokeWidthThick) * 2);}", ".foc71j7::after{left:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1xoeo06::after{right:calc(-1 * var(--strokeWidthThick) * 2);}", ".fd6iyyb::after{top:calc(-1 * var(--strokeWidthThick) * 2);}", ".f1byqz6t::after{width:calc(100% + var(--strokeWidthThicker) * 2);}", ".fdqxnrd::after{height:calc(100% + var(--strokeWidthThicker) * 2);}", ".f1x8rm7i::after{left:calc(-1 * var(--strokeWidthThicker) * 2);}", ".ftx9300::after{right:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f13zu3lb::after{top:calc(-1 * var(--strokeWidthThicker) * 2);}", ".f1i9snzy::after{width:calc(100% + var(--strokeWidthThickest) * 2);}", ".f19z50l7::after{height:calc(100% + var(--strokeWidthThickest) * 2);}", ".f1fgc9m6::after{left:calc(-1 * var(--strokeWidthThickest) * 2);}", ".f1d4bgoy::after{right:calc(-1 * var(--strokeWidthThickest) * 2);}", ".fkll7mr::after{top:calc(-1 * var(--strokeWidthThickest) * 2);}", ".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));}"],
+  "m": [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
+    "m": "(forced-colors: active)"
+  }]],
+  "f": [".f1o149bd:focus::after{border-top-color:transparent;}", ".f1xgvrhv:focus::after{border-right-color:transparent;}", ".f34pcxu:focus::after{border-left-color:transparent;}", ".f9nu0bd:focus::after{border-bottom-color:transparent;}"]
+});
+
+const useSpreadStyles = /*#__PURE__*/react_1.__styles({
+  "s": {
+    "jhia2w": ["f7lhxv7", "f6ou2b0"]
+  },
+  "mNudge": {
+    "jhia2w": ["f1h0okno", "fnnqava"]
+  },
+  "m": {
+    "jhia2w": ["f1wkt588", "f1maio5g"]
+  },
+  "l": {
+    "jhia2w": ["f1l333zn", "f1r41m4c"]
+  },
+  "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);}"]
+});
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */
+
+
+const useAvatarGroupItemStyles_unstable = state => {
+  const {
+    nonOverflowAvatarsCount,
+    isOverflowItem,
+    layout,
+    size
+  } = state;
+  const rootStyles = useRootStyles();
+  const pieStyles = usePieStyles();
+  const sizeStyles = Avatar_1.useSizeStyles();
+  const overflowLabelStyles = useOverflowLabelStyles();
+  const avatarStyles = useAvatarStyles();
+  const groupChildClassName = exports.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) {
+        rootClasses.push(pieStyles.thicker);
+      } else {
+        rootClasses.push(pieStyles.thickest);
+      }
+
+      if (nonOverflowAvatarsCount === 2) {
+        rootClasses.push(pieStyles.twoSlices);
+      } else if (nonOverflowAvatarsCount === 3) {
+        rootClasses.push(pieStyles.threeSlices);
+      }
+    }
+  } else {
+    rootClasses.push(rootStyles.overflowItem);
+  }
+
+  state.root.className = react_1.mergeClasses(exports.avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
+  state.avatar.className = react_1.mergeClasses(exports.avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, !isOverflowItem && layout === 'pie' && avatarStyles.pie, state.avatar.className);
+
+  if (state.overflowLabel) {
+    state.overflowLabel.className = react_1.mergeClasses(exports.avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
+  }
+
+  return state;
+};
+
+exports.useAvatarGroupItemStyles_unstable = useAvatarGroupItemStyles_unstable;
+/**
+ * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
+ * needed for each layout.
+ */
+
+const useGroupChildClassName = (layout, size, isOverflowButton) => {
+  const stackStyles = useStackStyles();
+  const spreadStyles = useSpreadStyles();
+  const layoutClasses = [];
+
+  if (size) {
+    if (layout === 'stack') {
+      layoutClasses.push(stackStyles.base);
+
+      if (size < 56) {
+        layoutClasses.push(stackStyles.thick);
+      } else if (size < 72) {
+        layoutClasses.push(stackStyles.thicker);
+      } else {
+        layoutClasses.push(stackStyles.thickest);
+      } // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width
+      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.
+
+
+      if (isOverflowButton) {
+        layoutClasses.push(stackStyles.overflowButton);
+
+        if (size < 36) {
+          layoutClasses.push(stackStyles.borderThin);
+        } else if (size < 56) {
+          layoutClasses.push(stackStyles.borderThick);
+        } else if (size < 72) {
+          layoutClasses.push(stackStyles.borderThicker);
+        } else {
+          layoutClasses.push(stackStyles.borderThickest);
+        }
+      }
+
+      if (size < 24) {
+        layoutClasses.push(stackStyles.xxs);
+      } else if (size < 48) {
+        layoutClasses.push(stackStyles.xs);
+      } else if (size < 96) {
+        layoutClasses.push(stackStyles.s);
+      } else {
+        layoutClasses.push(stackStyles.l);
+      }
+    } else if (layout === 'spread') {
+      if (size < 20) {
+        layoutClasses.push(spreadStyles.s);
+      } else if (size < 32) {
+        layoutClasses.push(spreadStyles.mNudge);
+      } else if (size < 64) {
+        layoutClasses.push(spreadStyles.l);
+      } else {
+        layoutClasses.push(spreadStyles.xl);
+      }
+    }
+  }
+
+  return react_1.mergeClasses(...layoutClasses);
+};
+
+exports.useGroupChildClassName = useGroupChildClassName;
+//# sourceMappingURL=useAvatarGroupItemStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { useSizeStyles } from '../../Avatar';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\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__divier--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 pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  twoSlices: {\n    '&:first-child': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    '&:nth-child(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n  },\n  threeSlices: {\n    '&:first-child': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    '&:not(:first-child)': {\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    '&:nth-child(3)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      top: '50%',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\nconst useStackStyles = makeStyles({\n  base: {\n    '&::after': {\n      content: \"''\",\n      position: 'absolute',\n      display: 'inline-flex',\n      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n      ...shorthands.borderColor(tokens.colorNeutralBackground2),\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      ...shorthands.borderStyle('solid'),\n\n      '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  overflowButton: {\n    // border-color has to be set to transparent when there's focus due to the outline overlapping the focus ring.\n    '&:focus': {\n      '&::after': {\n        ...shorthands.borderColor('transparent'),\n      },\n    },\n    // hide inner border when using high contrast mode and use the outer (::after) to match Avatar's outline\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('Canvas'),\n    },\n  },\n  thick: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThick})`,\n      top: `calc(-1 * ${tokens.strokeWidthThick})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  },\n  thicker: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    },\n  },\n  thickest: {\n    '&::after': {\n      width: '100%',\n      height: '100%',\n      left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n      ...shorthands.borderWidth(tokens.strokeWidthThickest),\n    },\n  },\n  borderThin: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n    },\n  },\n  borderThick: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n    },\n  },\n  borderThicker: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n    },\n  },\n  borderThickest: {\n    '&::after': {\n      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n    },\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\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 * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { nonOverflowAvatarsCount, isOverflowItem, layout, size } = state;\n\n  const rootStyles = useRootStyles();\n  const pieStyles = usePieStyles();\n  const sizeStyles = useSizeStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const avatarStyles = useAvatarStyles();\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      if (nonOverflowAvatarsCount === 2) {\n        rootClasses.push(pieStyles.twoSlices);\n      } else if (nonOverflowAvatarsCount === 3) {\n        rootClasses.push(pieStyles.threeSlices);\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    !isOverflowItem && 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 = (\n  layout: AvatarGroupProps['layout'],\n  size: AvatarSizes,\n  isOverflowButton?: boolean,\n): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      layoutClasses.push(stackStyles.base);\n\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      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n      if (isOverflowButton) {\n        layoutClasses.push(stackStyles.overflowButton);\n\n        if (size < 36) {\n          layoutClasses.push(stackStyles.borderThin);\n        } else if (size < 56) {\n          layoutClasses.push(stackStyles.borderThick);\n        } else if (size < 72) {\n          layoutClasses.push(stackStyles.borderThicker);\n        } else {\n          layoutClasses.push(stackStyles.borderThickest);\n        }\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/"}

package/lib-commonjs/contexts/AvatarGroupContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarGroupContext = void 0;
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+/**
+ * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.
+ */
+
+
+exports.AvatarGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
+//# sourceMappingURL=AvatarGroupContext.js.map

package/lib-commonjs/contexts/AvatarGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAuD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAAvD","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 */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/AvatarGroupContext.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AvatarGroupContext.types.js.map

package/lib-commonjs/contexts/AvatarGroupContext.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/contexts/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./AvatarGroupContext"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/contexts/index.js.map

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

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.avatarClassName = exports.Avatar = void 0;
+exports.useAvatarGroupItem_unstable = exports.useAvatarGroupItemStyles_unstable = exports.renderAvatarGroupItem_unstable = exports.avatarGroupItemClassNames = exports.AvatarGroupItem = exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.Avatar = void 0;
 
 var Avatar_1 = /*#__PURE__*/require("./Avatar");
 
@@ -12,13 +12,6 @@ Object.defineProperty(exports, "Avatar", {
   get: function () {
     return Avatar_1.Avatar;
   }
-}); // eslint-disable-next-line deprecation/deprecation
-
-Object.defineProperty(exports, "avatarClassName", {
-  enumerable: true,
-  get: function () {
-    return Avatar_1.avatarClassName;
-  }
 });
 Object.defineProperty(exports, "avatarClassNames", {
   enumerable: true,
@@ -86,4 +79,37 @@ Object.defineProperty(exports, "useAvatarGroup_unstable", {
     return AvatarGroup_1.useAvatarGroup_unstable;
   }
 });
+
+var AvatarGroupItem_1 = /*#__PURE__*/require("./AvatarGroupItem");
+
+Object.defineProperty(exports, "AvatarGroupItem", {
+  enumerable: true,
+  get: function () {
+    return AvatarGroupItem_1.AvatarGroupItem;
+  }
+});
+Object.defineProperty(exports, "avatarGroupItemClassNames", {
+  enumerable: true,
+  get: function () {
+    return AvatarGroupItem_1.avatarGroupItemClassNames;
+  }
+});
+Object.defineProperty(exports, "renderAvatarGroupItem_unstable", {
+  enumerable: true,
+  get: function () {
+    return AvatarGroupItem_1.renderAvatarGroupItem_unstable;
+  }
+});
+Object.defineProperty(exports, "useAvatarGroupItemStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return AvatarGroupItem_1.useAvatarGroupItemStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useAvatarGroupItem_unstable", {
+  enumerable: true,
+  get: function () {
+    return AvatarGroupItem_1.useAvatarGroupItem_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;;AAGF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,WAAA;AAAW;AAAX,CAAA;;AACT,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,WAAA;AAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourcesContent":["export {\n  Avatar,\n  // eslint-disable-next-line deprecation/deprecation\n  avatarClassName,\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';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","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';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/getInitials.js

@@ -79,6 +79,8 @@ function cleanupDisplayName(displayName) {
  *
  * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
  * could be derived from the name.
+ *
+ * @internal
  */