@fluentui/react-avatar 9.4.3 → 9.4.5

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

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAGjE;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC,MAAM,GAAG,QAAQ;IAAEC,IAAI,GAAGC;EAAsB,CAAE,GAAGJ,KAAK;EAElE,MAAMK,IAAI,GAAGP,qBAAqB,CAChC,KAAK,EACL;IACEQ,IAAI,EAAE,OAAO;IACb,GAAGN,KAAK;IACRC;GACD,EACD,CAAC,MAAM,CAAC,CACT;EAED,OAAO;IACLC,MAAM;IACNC,IAAI;IACJI,UAAU,EAAE;MACVF,IAAI,EAAE;KACP;IACDA;GACD;AACH,CAAC;AAED,OAAO,MAAMD,sBAAsB,GAAG,EAAE"}
+{"version":3,"names":["React","getNativeElementProps","useAvatarGroup_unstable","props","ref","layout","size","defaultAvatarGroupSize","root","role","components"],"sources":["../../../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n  const root = getNativeElementProps(\n    'div',\n    {\n      role: 'group',\n      ...props,\n      ref,\n    },\n    ['size'],\n  );\n\n  return {\n    layout,\n    size,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAGtC;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,MAAA,GAAS;IAAUC,IAAA,GAAOC;EAAsB,CAAE,GAAGJ,KAAA;EAE7D,MAAMK,IAAA,GAAOP,qBAAA,CACX,OACA;IACEQ,IAAA,EAAM;IACN,GAAGN,KAAK;IACRC;EACF,GACA,CAAC,OAAO;EAGV,OAAO;IACLC,MAAA;IACAC,IAAA;IACAI,UAAA,EAAY;MACVF,IAAA,EAAM;IACR;IACAA;EACF;AACF;AAEA,OAAO,MAAMD,sBAAA,GAAyB"}

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

@@ -1 +1 @@
-{"version":3,"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAEA,OAAO,MAAMA,2BAA2B,GAAIC,KAAuB,IAA8B;EAC/F,MAAM;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAE9B,MAAMG,WAAW,GAA4B;IAC3CF,MAAM;IACNC;GACD;EAED,OAAO;IAAEC;EAAW,CAAE;AACxB,CAAC"}
+{"version":3,"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"sources":["../../../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAA,GAA+BC,KAAA,IAAsD;EAChG,MAAM;IAAEC,MAAA;IAAQC;EAAI,CAAE,GAAGF,KAAA;EAEzB,MAAMG,WAAA,GAAuC;IAC3CF,MAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAY;AACvB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHooks_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,iCAAiC,QAAQ,4BAA4B;AAI9E;;;;AAIA,OAAO,MAAMC,eAAe,gBAA8CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGP,2BAA2B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAErDJ,iCAAiC,CAACK,KAAK,CAAC;EAExC,MAAM;IAAEL,iCAAiC,EAAEM;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC7FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,8BAA8B,CAACQ,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACM,WAAW,GAAG,iBAAiB"}
+{"version":3,"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHooks_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,iCAAiC,QAAQ;AAIlD;;;;AAIA,OAAO,MAAMC,eAAA,gBAA6DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQP,2BAAA,CAA4BK,KAAA,EAAOC,GAAA;EAEjDJ,iCAAA,CAAkCK,KAAA;EAElC,MAAM;IAAEL,iCAAA,EAAmCM;EAAe,CAAE,GAAGP,4BAAA;EAC/DO,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,8BAAA,CAA+BQ,KAAA;AACxC;AAEAJ,eAAA,CAAgBM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n"],"mappings":"AAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export * from './AvatarGroupItem';\nexport * from './AvatarGroupItem.types';\nexport * from './renderAvatarGroupItem';\nexport * from './useAvatarGroupItem';\nexport * from './useAvatarGroupItemStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js

@@ -8,12 +8,6 @@ export const renderAvatarGroupItem_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.avatar, {
-    ...slotProps.avatar
-  }), state.isOverflowItem && /*#__PURE__*/React.createElement(slots.overflowLabel, {
-    ...slotProps.overflowLabel
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.avatar, slotProps.avatar), state.isOverflowItem && /*#__PURE__*/React.createElement(slots.overflowLabel, slotProps.overflowLabel));
 };
 //# sourceMappingURL=renderAvatarGroupItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderAvatarGroupItem_unstable","state","slots","slotProps","createElement","root","avatar","isOverflowItem","overflowLabel"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI,EACrCL,KAAK,CAACM,cAAc,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,aAAa;IAAA,GAAKL,SAAS,CAACK;EAAa,EAAI,CAClE;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","renderAvatarGroupItem_unstable","state","slots","slotProps","createElement","root","avatar","isOverflowItem","overflowLabel"],"sources":["../../../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.avatar {...slotProps.avatar} />\n      {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgC;EAC7E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA+BE,KAAA;EAE5D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM,GACjCL,KAAA,CAAMM,cAAc,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,aAAa,EAAKL,SAAA,CAAUK,aAAa;AAG/E"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
 import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';

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

@@ -1 +1 @@
-{"version":3,"names":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { 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 groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\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    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\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        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,kBAAkB;AACzC,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,mCAAmC;AACtG,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,mBAAmB,QAAQ,kCAAkC;AAGtE;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAGA,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAMC,eAAe,GAAGP,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC;EAC7E,MAAMC,SAAS,GAAGV,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACG,IAAI,CAAC;EACjE,MAAMC,MAAM,GAAGZ,8BAA8B,CAACQ,GAAG,IAAIA,GAAG,CAACI,MAAM,CAAC;EAChE;EACA,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAE,GAAGC;EAAe,CAAE,GAAGV,KAAK;EACtD,MAAMM,IAAI,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIT,sBAAsB;EAChD,MAAMe,qBAAqB,GAAGb,mBAAmB,CAACJ,kBAAkB,CAAC;EAErE,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAI,CAACH,qBAAqB,EAAE;IACnE;IACAI,OAAO,CAACC,IAAI,CAAC,oEAAoE,CAAC;;EAGpF,OAAO;IACLC,cAAc,EAAEf,eAAe;IAC/BK,MAAM;IACND,IAAI;IACJY,UAAU,EAAE;MACVC,IAAI,EAAEjB,eAAe,GAAG,IAAI,GAAG,KAAK;MACpCkB,MAAM,EAAE3B,MAAM;MACd4B,aAAa,EAAE;KAChB;IACDF,IAAI,EAAEtB,gBAAgB,CAACG,KAAK,CAACmB,IAAI,EAAE;MACjCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZf,KAAK;QACLC;;KAEH,CAAC;IACFW,MAAM,EAAEvB,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MACrCE,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZtB,GAAG;QACHK,IAAI;QACJkB,KAAK,EAAE,UAAU;QACjB,GAAGd;;KAEN,CAAC;IACFW,aAAa,EAAExB,gBAAgB,CAACG,KAAK,CAACqB,aAAa,EAAE;MACnDC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ;QACA,aAAa,EAAE,IAAI;QACnBE,QAAQ,EAAEzB,KAAK,CAAC0B;;KAEnB;GACF;AACH,CAAC"}
+{"version":3,"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","resolveShorthand","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","required","defaultProps","color","children","name"],"sources":["../../../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { 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 groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\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    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        style,\n        className,\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        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ;AACnE,SAASC,sBAAsB,QAAQ;AACvC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AAGpC;;;;;;;;;AASA,OAAO,MAAMC,2BAAA,GAA8BA,CACzCC,KAAA,EACAC,GAAA,KACyB;EACzB,MAAMC,eAAA,GAAkBP,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAIC,UAAU;EAC5E,MAAMC,SAAA,GAAYV,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAIG,IAAI;EAChE,MAAMC,MAAA,GAASZ,8BAAA,CAA+BQ,GAAA,IAAOA,GAAA,CAAII,MAAM;EAC/D;EACA,MAAM;IAAEC,KAAA;IAAOC,SAAA;IAAW,GAAGC;EAAA,CAAiB,GAAGV,KAAA;EACjD,MAAMM,IAAA,GAAOD,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAaT,sBAAsB;EAChD,MAAMe,qBAAA,GAAwBb,mBAAA,CAAoBJ,kBAAA;EAElD,IAAIkB,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,qBAAA,EAAuB;IACnE;IACAI,OAAA,CAAQC,IAAI,CAAC;EACf;EAEA,OAAO;IACLC,cAAA,EAAgBf,eAAA;IAChBK,MAAA;IACAD,IAAA;IACAY,UAAA,EAAY;MACVC,IAAA,EAAMjB,eAAA,GAAkB,OAAO,KAAK;MACpCkB,MAAA,EAAQ3B,MAAA;MACR4B,aAAA,EAAe;IACjB;IACAF,IAAA,EAAMtB,gBAAA,CAAiBG,KAAA,CAAMmB,IAAI,EAAE;MACjCG,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZf,KAAA;QACAC;MACF;IACF;IACAW,MAAA,EAAQvB,gBAAA,CAAiBG,KAAA,CAAMoB,MAAM,EAAE;MACrCE,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZtB,GAAA;QACAK,IAAA;QACAkB,KAAA,EAAO;QACP,GAAGd;MACL;IACF;IACAW,aAAA,EAAexB,gBAAA,CAAiBG,KAAA,CAAMqB,aAAa,EAAE;MACnDC,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZ;QACA,eAAe,IAAI;QACnBE,QAAA,EAAUzB,KAAA,CAAM0B;MAClB;IACF;EACF;AACF"}

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

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

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
 import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';
 import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';

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

@@ -1 +1 @@
-{"version":3,"names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues","useCustomStyleHooks_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  const { useAvatarGroupPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"mappings":"AACA,SAASA,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,kCAAkC,QAAQ,sCAAsC;AACzF,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,oCAAoC,QAAQ,+BAA+B;AAGpF;;;AAGA,OAAO,MAAMC,kBAAkB,GAAsCC,KAAK,IAAG;EAC3E,MAAMC,KAAK,GAAGJ,8BAA8B,CAACG,KAAK,CAAC;EACnD,MAAME,aAAa,GAAGP,kCAAkC,CAACM,KAAK,CAAC;EAE/DH,oCAAoC,CAACG,KAAK,CAAC;EAE3C,MAAM;IAAEH,oCAAoC,EAAEK;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAChGO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOP,iCAAiC,CAACO,KAAK,EAAEC,aAAa,CAAC;AAChE,CAAC;AAEDH,kBAAkB,CAACK,WAAW,GAAG,oBAAoB"}
+{"version":3,"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues","useCustomStyleHooks_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  const { useAvatarGroupPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,kCAAkC,QAAQ;AACnD,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,oCAAoC,QAAQ;AAGrD;;;AAGA,OAAO,MAAMC,kBAAA,GAAwDC,KAAA,IAAS;EAC5E,MAAMC,KAAA,GAAQJ,8BAAA,CAA+BG,KAAA;EAC7C,MAAME,aAAA,GAAgBP,kCAAA,CAAmCM,KAAA;EAEzDH,oCAAA,CAAqCG,KAAA;EAErC,MAAM;IAAEH,oCAAA,EAAsCK;EAAe,CAAE,GAAGP,4BAAA;EAClEO,eAAA,CAAgBF,KAAA;EAEhB,OAAOP,iCAAA,CAAkCO,KAAA,EAAOC,aAAA;AAClD;AAEAH,kBAAA,CAAmBK,WAAW,GAAG"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=AvatarGroupPopover.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n"]}
+{"version":3,"names":["React"],"sources":["../../../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export * from './AvatarGroupPopover';\nexport * from './AvatarGroupPopover.types';\nexport * from './renderAvatarGroupPopover';\nexport * from './useAvatarGroupPopover';\nexport * from './useAvatarGroupPopoverStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js

@@ -10,20 +10,10 @@ export const renderAvatarGroupPopover_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(PopoverTrigger, {
     disableButtonEnhancement: true
-  }, /*#__PURE__*/React.createElement(slots.tooltip, {
-    ...slotProps.tooltip
-  }, /*#__PURE__*/React.createElement(slots.triggerButton, {
-    ...slotProps.triggerButton
-  }))), /*#__PURE__*/React.createElement(slots.popoverSurface, {
-    ...slotProps.popoverSurface
-  }, /*#__PURE__*/React.createElement(AvatarGroupProvider, {
+  }, /*#__PURE__*/React.createElement(slots.tooltip, slotProps.tooltip, /*#__PURE__*/React.createElement(slots.triggerButton, slotProps.triggerButton))), /*#__PURE__*/React.createElement(slots.popoverSurface, slotProps.popoverSurface, /*#__PURE__*/React.createElement(AvatarGroupProvider, {
     value: contextValues.avatarGroup
-  }, /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }))));
+  }, /*#__PURE__*/React.createElement(slots.content, slotProps.content))));
 };
 //# sourceMappingURL=renderAvatarGroupPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","AvatarGroupProvider","getSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","createElement","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAAuBC,cAAc,QAAQ,yBAAyB;AAItE;;;AAGA,OAAO,MAAMC,iCAAiC,GAAGA,CAC/CC,KAA8B,EAC9BC,aAAuC,KACrC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAA0BG,KAAK,CAAC;EAErE,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAMF,SAAS,CAACE;EAAqB,gBAC9CV,KAAA,CAAAS,aAAA,CAACN,cAAc;IAACQ,wBAAwB;EAAA,gBACtCX,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACK,OAAO;IAAA,GAAMJ,SAAS,CAACI;EAAwB,gBACpDZ,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACM,aAAa;IAAA,GAAKL,SAAS,CAACK;EAAa,EAAI,CACtC,CACD,eACjBb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,cAAc;IAAA,GAAKN,SAAS,CAACM;EAAc,gBAChDd,KAAA,CAAAS,aAAA,CAACR,mBAAmB;IAACc,KAAK,EAAET,aAAa,CAACU;EAAW,gBACnDhB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,CACpB,CACD,CACZ;AAEjB,CAAC"}
+{"version":3,"names":["React","AvatarGroupProvider","getSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","slots","slotProps","createElement","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"sources":["../../../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverState,\n  contextValues: AvatarGroupContextValues,\n) => {\n  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <slots.root {...(slotProps.root as PopoverProps)}>\n      <PopoverTrigger disableButtonEnhancement>\n        <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n          <slots.triggerButton {...slotProps.triggerButton} />\n        </slots.tooltip>\n      </PopoverTrigger>\n      <slots.popoverSurface {...slotProps.popoverSurface}>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <slots.content {...slotProps.content} />\n        </AvatarGroupProvider>\n      </slots.popoverSurface>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AAEpC,SAASC,QAAQ,QAAQ;AACzB,SAAuBC,cAAc,QAAQ;AAI7C;;;AAGA,OAAO,MAAMC,iCAAA,GAAoCA,CAC/CC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAkCG,KAAA;EAE/D,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAMF,SAAA,CAAUE,IAAI,eAC7BV,KAAA,CAAAS,aAAA,CAACN,cAAA;IAAeQ,wBAAA;kBACdX,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMK,OAAO,EAAMJ,SAAA,CAAUI,OAAO,eACnCZ,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMM,aAAa,EAAKL,SAAA,CAAUK,aAAa,kBAGpDb,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMO,cAAc,EAAKN,SAAA,CAAUM,cAAc,eAChDd,KAAA,CAAAS,aAAA,CAACR,mBAAA;IAAoBc,KAAA,EAAOT,aAAA,CAAcU;kBACxChB,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMU,OAAO,EAAKT,SAAA,CAAUS,OAAO;AAK9C"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -14,8 +14,8 @@ import { Tooltip } from '@fluentui/react-tooltip';
  * @param props - props from this instance of AvatarGroupPopover
  */
 export const useAvatarGroupPopover_unstable = props => {
-  var _a;
-  const size = (_a = useAvatarGroupContext_unstable(ctx => ctx.size)) !== null && _a !== void 0 ? _a : defaultAvatarGroupSize;
+  var _useAvatarGroupContext_unstable;
+  const size = (_useAvatarGroupContext_unstable = useAvatarGroupContext_unstable(ctx => ctx.size)) !== null && _useAvatarGroupContext_unstable !== void 0 ? _useAvatarGroupContext_unstable : defaultAvatarGroupSize;
   const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
   const {
     indicator = size < 24 ? 'icon' : 'count',
@@ -29,8 +29,8 @@ export const useAvatarGroupPopover_unstable = props => {
     initialState: false
   });
   const handleOnPopoverChange = (e, data) => {
-    var _a;
-    (_a = restOfProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(restOfProps, e, data);
+    var _restOfProps_onOpenChange;
+    (_restOfProps_onOpenChange = restOfProps.onOpenChange) === null || _restOfProps_onOpenChange === void 0 ? void 0 : _restOfProps_onOpenChange.call(restOfProps, e, data);
     setPopoverOpen(data.open);
   };
   let triggerButtonChildren;

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["useAvatarGroupPopoverContextValues","state","avatarGroup","isOverflow","size"],"sources":["../src/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAGA,OAAO,MAAMA,kCAAkC,GAAIC,KAA8B,IAA8B;EAC7G,MAAMC,WAAW,GAA4B;IAC3CC,UAAU,EAAE,IAAI;IAChBC,IAAI,EAAE;GACP;EAED,OAAO;IAAEF;EAAW,CAAE;AACxB,CAAC"}
+{"version":3,"names":["useAvatarGroupPopoverContextValues","state","avatarGroup","isOverflow","size"],"sources":["../../../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"mappings":"AAGA,OAAO,MAAMA,kCAAA,GAAsCC,KAAA,IAA6D;EAC9G,MAAMC,WAAA,GAAuC;IAC3CC,UAAA,EAAY,IAAI;IAChBC,IAAA,EAAM;EACR;EAEA,OAAO;IAAEF;EAAY;AACvB"}

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

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

package/lib/contexts/AvatarContext.js

@@ -5,11 +5,9 @@ const avatarContextDefaultValue = {};
  * @internal
  */
 export const AvatarContextProvider = avatarContext.Provider;
+var _React_useContext;
 /**
  * @internal
  */
-export const useAvatarContext = () => {
-  var _a;
-  return (_a = React.useContext(avatarContext)) !== null && _a !== void 0 ? _a : avatarContextDefaultValue;
-};
+export const useAvatarContext = () => (_React_useContext = React.useContext(avatarContext)) !== null && _React_useContext !== void 0 ? _React_useContext : avatarContextDefaultValue;
 //# sourceMappingURL=AvatarContext.js.map

package/lib/contexts/AvatarContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","_a","useContext"],"sources":["../src/packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/**\n * @internal\n */\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/**\n * @internal\n */\nexport const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,MAAMC,aAAa,gBAAGD,KAAK,CAACE,aAAa,CAAiCC,SAAS,CAAC;AASpF,MAAMC,yBAAyB,GAAuB,EAAE;AAExD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAGJ,aAAa,CAACK,QAAQ;AAE3D;;;AAGA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAK;EAAA,IAAAC,EAAA;EAAC,QAAAA,EAAA,GAAAR,KAAK,CAACS,UAAU,CAACR,aAAa,CAAC,cAAAO,EAAA,cAAAA,EAAA,GAAIJ,yBAAyB;AAAA"}
+{"version":3,"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","_React_useContext","useAvatarContext","useContext"],"sources":["../../src/contexts/AvatarContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/**\n * @internal\n */\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/**\n * @internal\n */\nexport const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAS1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;AAGA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;IAKrBC,iBAAA;AAHtC;;;AAGA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAM,CAAAD,iBAAA,GAAAP,KAAA,CAAMS,UAAU,CAACR,aAAA,eAAjBM,iBAAA,cAAAA,iBAAA,GAAmCH,yBAAyB"}

package/lib/contexts/AvatarGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"sources":["../src/packages/react-components/react-avatar/src/contexts/AvatarGroupContext.ts"],"sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,kCAAkC;AAIrG;;;;AAIA,OAAO,MAAMC,kBAAkB,gBAAqCF,aAAa,CAC/EG,SAAS,CAC0B;AAErC,MAAMC,8BAA8B,GAA4B,EAAE;AAElE,OAAO,MAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,QAAQ;AAE9D,OAAO,MAAMC,8BAA8B,GAAOC,QAAqD,IACrGP,kBAAkB,CAACC,kBAAkB,EAAE,CAACO,GAAG,GAAGL,8BAA8B,KAAKI,QAAQ,CAACC,GAAG,CAAC,CAAC"}
+{"version":3,"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"sources":["../../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB;AAInE;;;;AAIA,OAAO,MAAMC,kBAAA,gBAAuDF,aAAA,CAClEG,SAAA;AAGF,MAAMC,8BAAA,GAA0D,CAAC;AAEjE,OAAO,MAAMC,mBAAA,GAAsBH,kBAAA,CAAmBI,QAAQ;AAE9D,OAAO,MAAMC,8BAAA,GAAqCC,QAAA,IAChDP,kBAAA,CAAmBC,kBAAA,EAAoB,CAACO,GAAA,GAAML,8BAA8B,KAAKI,QAAA,CAASC,GAAA"}

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './AvatarGroupContext';\nexport * from './AvatarContext';\n"]}
+{"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './AvatarGroupContext';\nexport * from './AvatarContext';\n"],"mappings":"AAAA,cAAc;AACd,cAAc"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"sources":["../src/packages/react-components/react-avatar/src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\n// eslint-disable-next-line deprecation/deprecation\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes, AvatarSize } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAGjB,SAASC,WAAW,EAAEC,yBAAyB,QAAQ,eAAe;AAEtE,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAQtB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,mBAAmB;AAE1B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,oCAAoC,EACpCC,8BAA8B,QACzB,sBAAsB;AAE7B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB,kBAAkB"}
+{"version":3,"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\n// eslint-disable-next-line deprecation/deprecation\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes, AvatarSize } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb;AAGP,SAASC,WAAW,EAAEC,yBAAyB,QAAQ;AAEvD,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAQP,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB;AAEP,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,oCAAoC,EACpCC,8BAA8B,QACzB;AAEP,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB"}

package/lib/utils/getInitials.js

@@ -1,11 +1,9 @@
 /**
  * Regular expressions matching characters to ignore when calculating the initials.
- */
-/**
- * Regular expression matching characters within various types of enclosures, including the enclosures themselves
- *  so for example, (xyz) [xyz] {xyz} all would be ignored
- */
-const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+ */ /**
+    * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+    *  so for example, (xyz) [xyz] {xyz} all would be ignored
+    */const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 /**
  * Regular expression matching special ASCII characters except space, plus some unicode special characters.
  * Applies after unwanted enclosures have been removed
@@ -25,8 +23,7 @@ const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
  * Japanese: Hiragana, Katakana.
  * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
  *             CJK Unified Ideographs Extension B
- */
-// eslint-disable-next-line @fluentui/max-len
+ */ // eslint-disable-next-line @fluentui/max-len
 const UNSUPPORTED_TEXT_REGEX = /[\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]/;
 function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
   let initials = '';