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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/AvatarGroupItem/useAvatarGroupItem.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,sBAAT,QAAuC,+BAAvC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,uBAAhC,CAAlD;EACA,MAAM,eAAe,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,UAAhC,CAA1C;EACA,MAAM,MAAM,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,MAAhC,CAAjC;EACA,MAAM,SAAS,GAAG,kBAAkB,CAAC,kBAAD,EAAqB,GAAG,IAAI,GAAG,CAAC,IAAhC,CAApC,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,sBAA1B;EACA,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,kBAAD,CAAjD;;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,MAFE;MAGV,aAAa,EAAE;IAHL,CALP;IAUL,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,KADY;QAEZ,SAFY;QAGZ,IAAI,EAAE,eAAe,GAAG,UAAH,GAAgB;MAHzB;IAFmB,CAAb,CAVjB;IAkBL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;MACrC,QAAQ,EAAE,IAD2B;MAErC,YAAY,EAAE;QACZ,GADY;QAEZ,IAFY;QAGZ,KAAK,EAAE,UAHK;QAIZ,GAAG;MAJS;IAFuB,CAAf,CAlBnB;IA2BL,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,EAAsB;MACnD,QAAQ,EAAE,IADyC;MAEnD,YAAY,EAAE;QACZ,QAAQ,EAAE,KAAK,CAAC;MADJ;IAFqC,CAAtB;EA3B1B,CAAP;AAkCD,CApDM","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/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -0,0 +1,356 @@
+import { useSizeStyles } from '../../Avatar';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const 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__*/__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__*/__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__*/__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__*/__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__*/__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__*/__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
+ */
+
+
+export const useAvatarGroupItemStyles_unstable = state => {
+  const {
+    nonOverflowAvatarsCount,
+    isOverflowItem,
+    layout,
+    size
+  } = state;
+  const rootStyles = useRootStyles();
+  const pieStyles = usePieStyles();
+  const sizeStyles = useSizeStyles();
+  const overflowLabelStyles = useOverflowLabelStyles();
+  const avatarStyles = useAvatarStyles();
+  const groupChildClassName = useGroupChildClassName(layout, size);
+  const rootClasses = [rootStyles.base];
+
+  if (!isOverflowItem) {
+    rootClasses.push(rootStyles.nonOverflowItem);
+    rootClasses.push(groupChildClassName);
+    rootClasses.push(sizeStyles[size]);
+
+    if (layout === 'pie') {
+      rootClasses.push(pieStyles.base);
+
+      if (size < 56) {
+        rootClasses.push(pieStyles.thick);
+      } else if (size < 72) {
+        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 = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
+  state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, !isOverflowItem && layout === 'pie' && avatarStyles.pie, state.avatar.className);
+
+  if (state.overflowLabel) {
+    state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
+  }
+
+  return state;
+};
+/**
+ * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
+ * needed for each layout.
+ */
+
+export const useGroupChildClassName = (layout, size, 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 mergeClasses(...layoutClasses);
+};
+//# sourceMappingURL=useAvatarGroupItemStyles.js.map

package/lib/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/contexts/AvatarGroupContext.js

@@ -0,0 +1,7 @@
+import { createContext } from '@fluentui/react-context-selector';
+/**
+ * AvatarGroupContext is provided by AvatarGroup, and is consumed by Avatar to determine default values of some props.
+ */
+
+export const AvatarGroupContext = /*#__PURE__*/createContext({});
+//# sourceMappingURL=AvatarGroupContext.js.map

package/lib/contexts/AvatarGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["contexts/AvatarGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA;;AAEG;;AACH,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 */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}

package/lib/contexts/AvatarGroupContext.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvatarGroupContext.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupContext.types.js","sourceRoot":"../src/","sources":["contexts/AvatarGroupContext.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarGroupProps } from '../AvatarGroup';\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n  nonOverflowAvatarsCount?: number;\n};\n"]}

package/lib/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './AvatarGroupContext';
+//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './AvatarGroupContext';\n"]}

package/lib/index.js

@@ -1,5 +1,5 @@
-export { Avatar, // eslint-disable-next-line deprecation/deprecation
-avatarClassName, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable } from './Avatar';
+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 { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable } from './AvatarGroupItem';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE;AACA,eAHF,EAIE,gBAJF,EAKE,qBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP;AAUA,SAAS,WAAT,QAA4B,eAA5B;AACA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","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":"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","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/utils/getInitials.js

@@ -73,6 +73,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
  */
 
 

package/lib/utils/getInitials.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,MAAM,yBAAyB,GAAW,6BAA1C;AAEA;;;AAGG;;AACH,MAAM,oBAAoB,GAAW,4DAArC;AAEA;;;AAGG;;AACH,MAAM,iBAAiB,GAAW,+BAAlC;AAEA;;AACA,MAAM,0BAA0B,GAAW,MAA3C;AAEA;;;;;;;AAOG;AACH;;AACA,MAAM,sBAAsB,GAAW,4MAAvC;;AAEA,SAAS,gBAAT,CAA0B,WAA1B,EAA+C,KAA/C,EAA+D,gBAA/D,EAAyF;AACvF,MAAI,QAAQ,GAAG,EAAf;AAEA,QAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;AACA,MAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;;AAED,MAAI,CAAC,gBAAL,EAAuB;AACrB,QAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,KAFD,MAEO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;AACF;;AAED,MAAI,KAAK,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAA/B,EAAkC;AAChC,WAAO,QAAQ,CAAC,MAAT,CAAgB,CAAhB,IAAqB,QAAQ,CAAC,MAAT,CAAgB,CAAhB,CAA5B;AACD;;AAED,SAAO,QAAP;AACD;;AAED,SAAS,kBAAT,CAA4B,WAA5B,EAA+C;AAC7C,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,yBAApB,EAA+C,EAA/C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,oBAApB,EAA0C,EAA1C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,0BAApB,EAAgD,GAAhD,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,IAAZ,EAAd;AAEA,SAAO,WAAP;AACD;AAED;;;;;;;;;AASG;;;AACH,OAAM,SAAU,WAAV,CACJ,WADI,EAEJ,KAFI,EAGJ,OAHI,EASH;AAED,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,EAAP;AACD;;AAED,EAAA,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CANC,CAQD;;AACA,MACE,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KACC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,kBAAV,KAAgC,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAFnC,EAGE;AACA,WAAO,EAAP;AACD;;AAED,SAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,EAAqB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAA9B,CAAvB;AACD","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n *  so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n *             CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string {\n  let initials = '';\n\n  const splits: string[] = displayName.split(' ');\n  if (splits.length !== 0) {\n    initials += splits[0].charAt(0).toUpperCase();\n  }\n\n  if (!firstInitialOnly) {\n    if (splits.length === 2) {\n      initials += splits[1].charAt(0).toUpperCase();\n    } else if (splits.length === 3) {\n      initials += splits[2].charAt(0).toUpperCase();\n    }\n  }\n\n  if (isRtl && initials.length > 1) {\n    return initials.charAt(1) + initials.charAt(0);\n  }\n\n  return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n  displayName = displayName.trim();\n\n  return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param options - Extra options to control the behavior of getInitials\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n */\nexport function getInitials(\n  displayName: string | undefined | null,\n  isRtl: boolean,\n  options?: {\n    /** Should initials be generated from phone numbers (default false) */\n    allowPhoneInitials?: boolean;\n\n    /** Returns only the first initial */\n    firstInitialOnly?: boolean;\n  },\n): string {\n  if (!displayName) {\n    return '';\n  }\n\n  displayName = cleanupDisplayName(displayName);\n\n  // For names containing CJK characters, and phone numbers, we don't display initials\n  if (\n    UNSUPPORTED_TEXT_REGEX.test(displayName) ||\n    (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n  ) {\n    return '';\n  }\n\n  return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,MAAM,yBAAyB,GAAW,6BAA1C;AAEA;;;AAGG;;AACH,MAAM,oBAAoB,GAAW,4DAArC;AAEA;;;AAGG;;AACH,MAAM,iBAAiB,GAAW,+BAAlC;AAEA;;AACA,MAAM,0BAA0B,GAAW,MAA3C;AAEA;;;;;;;AAOG;AACH;;AACA,MAAM,sBAAsB,GAAW,4MAAvC;;AAEA,SAAS,gBAAT,CAA0B,WAA1B,EAA+C,KAA/C,EAA+D,gBAA/D,EAAyF;EACvF,IAAI,QAAQ,GAAG,EAAf;EAEA,MAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;EACA,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;IACvB,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;EACD;;EAED,IAAI,CAAC,gBAAL,EAAuB;IACrB,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;MACvB,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;IACD,CAFD,MAEO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;MAC9B,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;IACD;EACF;;EAED,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAA/B,EAAkC;IAChC,OAAO,QAAQ,CAAC,MAAT,CAAgB,CAAhB,IAAqB,QAAQ,CAAC,MAAT,CAAgB,CAAhB,CAA5B;EACD;;EAED,OAAO,QAAP;AACD;;AAED,SAAS,kBAAT,CAA4B,WAA5B,EAA+C;EAC7C,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,yBAApB,EAA+C,EAA/C,CAAd;EACA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,oBAApB,EAA0C,EAA1C,CAAd;EACA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,0BAApB,EAAgD,GAAhD,CAAd;EACA,WAAW,GAAG,WAAW,CAAC,IAAZ,EAAd;EAEA,OAAO,WAAP;AACD;AAED;;;;;;;;;;;AAWG;;;AACH,OAAM,SAAU,WAAV,CACJ,WADI,EAEJ,KAFI,EAGJ,OAHI,EASH;EAED,IAAI,CAAC,WAAL,EAAkB;IAChB,OAAO,EAAP;EACD;;EAED,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CANC,CAQD;;EACA,IACE,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KACC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,kBAAV,KAAgC,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAFnC,EAGE;IACA,OAAO,EAAP;EACD;;EAED,OAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,EAAqB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAA9B,CAAvB;AACD","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n *  so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n *             CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string {\n  let initials = '';\n\n  const splits: string[] = displayName.split(' ');\n  if (splits.length !== 0) {\n    initials += splits[0].charAt(0).toUpperCase();\n  }\n\n  if (!firstInitialOnly) {\n    if (splits.length === 2) {\n      initials += splits[1].charAt(0).toUpperCase();\n    } else if (splits.length === 3) {\n      initials += splits[2].charAt(0).toUpperCase();\n    }\n  }\n\n  if (isRtl && initials.length > 1) {\n    return initials.charAt(1) + initials.charAt(0);\n  }\n\n  return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n  displayName = displayName.trim();\n\n  return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param options - Extra options to control the behavior of getInitials\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n *\n * @internal\n */\nexport function getInitials(\n  displayName: string | undefined | null,\n  isRtl: boolean,\n  options?: {\n    /** Should initials be generated from phone numbers (default false) */\n    allowPhoneInitials?: boolean;\n\n    /** Returns only the first initial */\n    firstInitialOnly?: boolean;\n  },\n): string {\n  if (!displayName) {\n    return '';\n  }\n\n  displayName = cleanupDisplayName(displayName);\n\n  // For names containing CJK characters, and phone numbers, we don't display initials\n  if (\n    UNSUPPORTED_TEXT_REGEX.test(displayName) ||\n    (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n  ) {\n    return '';\n  }\n\n  return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/AvatarGroupItem.js

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

package/lib-commonjs/AvatarGroupItem.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADrB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJlB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJlB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -24,7 +24,7 @@ const useAvatar_unstable = (props, ref) => {
 
   const {
     dir
-  } = react_shared_contexts_1.useFluent();
+  } = react_shared_contexts_1.useFluent_unstable();
   const {
     name,
     size = 32,
@@ -58,7 +58,7 @@ const useAvatar_unstable = (props, ref) => {
       children: index_1.getInitials(name, dir === 'rtl', {
         firstInitialOnly: size <= 16
       }),
-      'aria-hidden': true
+      id: baseId + '__initials'
     }
   }); // Render the icon slot *only if* there aren't any initials to display.
 
@@ -70,8 +70,7 @@ const useAvatar_unstable = (props, ref) => {
       required: true,
       defaultProps: {
         children: React.createElement(react_icons_1.PersonRegular, null),
-        'aria-hidden': true,
-        id: baseId + '__initials'
+        'aria-hidden': true
       }
     });
   }
@@ -97,8 +96,6 @@ const useAvatar_unstable = (props, ref) => {
   const badge = react_utilities_1.resolveShorthand(props.badge, {
     defaultProps: {
       size: getBadgeSize(size),
-      role: 'presentation',
-      'aria-hidden': true,
       id: baseId + '__badge'
     }
   }); // Resolve aria-label and/or aria-labelledby if not provided by the user
@@ -155,7 +152,7 @@ const getBadgeSize = size => {
   }
 };
 
-const avatarColors = ['darkRed', 'cranberry', 'red', 'pumpkin', 'peach', 'marigold', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'darkGreen', 'lightTeal', 'teal', 'steel', 'blue', 'royalBlue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor'];
+const avatarColors = ['dark-red', 'cranberry', 'red', 'pumpkin', 'peach', 'marigold', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'dark-green', 'light-teal', 'teal', 'steel', 'blue', 'royal-blue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor'];
 
 const getHashCode = str => {
   let hashCode = 0;