@fluentui/react-avatar 9.2.16 → 9.3.1

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Mon, 23 Jan 2023 16:41:44 GMT",
+      "date": "Tue, 31 Jan 2023 19:50:42 GMT",
+      "tag": "@fluentui/react-avatar_v9.3.1",
+      "version": "9.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.22",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.7",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.4.5",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.4.2",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.1.12",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.5.1",
+            "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 13:30:51 GMT",
+      "tag": "@fluentui/react-avatar_v9.3.0",
+      "version": "9.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "f5f1f5eed0c4e45333f38fbefc4b1b42580b4836",
+            "comment": "chore: deprecates AvatarSizes in favor of AvatarSize"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.21",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.6",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.4.4",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.2.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.4.1",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.1.11",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.5.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 Jan 2023 16:43:12 GMT",
       "tag": "@fluentui/react-avatar_v9.2.16",
       "version": "9.2.16",
       "comments": {
@@ -11,13 +113,13 @@
             "author": "beachball",
             "package": "@fluentui/react-avatar",
             "comment": "Bump @fluentui/react-popover to v9.4.3",
-            "commit": "86a28f6ebcc84819c695f12b841b9377736fb5f7"
+            "commit": "828c4260edc4fba07c9ccc8e94f15051c7fd25d3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-avatar",
             "comment": "Bump @fluentui/react-tooltip to v9.1.10",
-            "commit": "86a28f6ebcc84819c695f12b841b9377736fb5f7"
+            "commit": "828c4260edc4fba07c9ccc8e94f15051c7fd25d3"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,18 +1,48 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Mon, 23 Jan 2023 16:41:44 GMT and should not be manually modified.
+This log was last generated on Tue, 31 Jan 2023 19:50:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.1)
+
+Tue, 31 Jan 2023 19:50:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.0..@fluentui/react-avatar_v9.3.1)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.0.22 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-popover to v9.4.5 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-tabster to v9.4.2 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.12 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.0)
+
+Thu, 26 Jan 2023 13:30:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.16..@fluentui/react-avatar_v9.3.0)
+
+### Minor changes
+
+- chore: deprecates AvatarSizes in favor of AvatarSize ([PR #26492](https://github.com/microsoft/fluentui/pull/26492) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-badge to v9.0.21 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.6 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-popover to v9.4.4 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.2.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-tabster to v9.4.1 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.11 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-utilities to v9.5.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+
 ## [9.2.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.16)
 
-Mon, 23 Jan 2023 16:41:44 GMT 
+Mon, 23 Jan 2023 16:43:12 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.15..@fluentui/react-avatar_v9.2.16)
 
 ### Patches
 
-- Bump @fluentui/react-popover to v9.4.3 ([PR #26454](https://github.com/microsoft/fluentui/pull/26454) by beachball)
-- Bump @fluentui/react-tooltip to v9.1.10 ([PR #26454](https://github.com/microsoft/fluentui/pull/26454) by beachball)
+- Bump @fluentui/react-popover to v9.4.3 ([PR #26434](https://github.com/microsoft/fluentui/pull/26434) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.10 ([PR #26434](https://github.com/microsoft/fluentui/pull/26434) by beachball)
 
 ## [9.2.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.15)
 

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export declare const AvatarContextProvider: React_2.Provider<AvatarContextValue
  * @internal
  */
 export declare interface AvatarContextValue {
-    size?: AvatarSizes;
+    size?: AvatarSize;
 }
 
 /**
@@ -84,7 +84,7 @@ export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots>
      */
     isOverflowItem?: boolean;
     layout: AvatarGroupProps['layout'];
-    size: AvatarSizes;
+    size: AvatarSize;
 };
 
 /**
@@ -140,7 +140,7 @@ export declare type AvatarGroupPopoverSlots = {
 export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
     popoverOpen: boolean;
     layout: AvatarGroupProps['layout'];
-    size: AvatarSizes;
+    size: AvatarSize;
 };
 
 /**
@@ -156,7 +156,7 @@ export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
      * Size of the AvatarGroupItems.
      * @default 32
      */
-    size?: AvatarSizes;
+    size?: AvatarSize;
 };
 
 export declare const AvatarGroupProvider: Provider<AvatarGroupContextValue> & FC<ProviderProps<AvatarGroupContextValue>>;
@@ -237,13 +237,19 @@ export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
      *
      * @default 32
      */
-    size?: AvatarSizes;
+    size?: AvatarSize;
 };
 
 /**
  * Sizes for the avatar
  */
-export declare type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export declare type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+/**
+ * Sizes for the avatar
+ * @deprecated use AvatarSize instead
+ */
+export declare type AvatarSizes = AvatarSize;
 
 export declare type AvatarSlots = {
     root: Slot<'span'>;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"]}
+{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the AvatarGroupItems should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Size of the AvatarGroupItems.\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"]}
+{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the AvatarGroupItems should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Size of the AvatarGroupItems.\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"]}

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, AvatarSizes } 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: AvatarSizes;\n};\n"]}
+{"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"]}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,aAAa,QAAQ,cAAc;AAC5C,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAMjF,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,aAAa,EAAE;CAChB;AAED,MAAMC,8BAA8B,GAAG,sCAAsC;AAE7E;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAapB;AAEF;;;AAGA,MAAMC,eAAe,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOtB;AAEF;;;AAGA,MAAMC,sBAAsB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM7B;AAEF;;;AAGA,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAcrB;AAEF;;;AAGA,MAAMC,eAAe,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMtB;AAEF;;;AAGA,MAAMC,YAAY,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsEnB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAM;IAAEC,cAAc;IAAEC,MAAM;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAC9C,MAAM;IAAEI;EAAG,CAAE,GAAGjB,SAAS,EAAE;EAE3B,MAAMkB,YAAY,GAAGX,eAAe,EAAE;EACtC,MAAMY,mBAAmB,GAAGX,sBAAsB,EAAE;EACpD,MAAMY,SAAS,GAAGT,YAAY,EAAE;EAChC,MAAMU,UAAU,GAAGf,aAAa,EAAE;EAClC,MAAMgB,UAAU,GAAGxB,aAAa,EAAE;EAElC,MAAMyB,mBAAmB,GAAGC,sBAAsB,CAACT,MAAM,EAAEC,IAAI,CAAC;EAEhE,MAAMS,WAAW,GAAG,CAACJ,UAAU,CAACK,IAAI,CAAC;EAErC,IAAI,CAACZ,cAAc,EAAE;IACnBW,WAAW,CAACE,IAAI,CAACN,UAAU,CAACO,eAAe,CAAC;IAC5CH,WAAW,CAACE,IAAI,CAACJ,mBAAmB,CAAC;IACrCE,WAAW,CAACE,IAAI,CAACL,UAAU,CAACN,IAAI,CAAC,CAAC;IAElC,IAAID,MAAM,KAAK,KAAK,EAAE;MACpBU,WAAW,CAACE,IAAI,CAACP,SAAS,CAACM,IAAI,CAAC;MAEhC,IAAIV,IAAI,GAAG,EAAE,EAAE;QACbS,WAAW,CAACE,IAAI,CAACP,SAAS,CAACS,KAAK,CAAC;OAClC,MAAM,IAAIb,IAAI,GAAG,EAAE,EAAE;QACpBS,WAAW,CAACE,IAAI,CAACP,SAAS,CAACU,OAAO,CAAC;OACpC,MAAM;QACLL,WAAW,CAACE,IAAI,CAACP,SAAS,CAACW,QAAQ,CAAC;;MAGtCN,WAAW,CAACE,IAAI,CAACP,SAAS,CAACY,MAAM,CAAC;MAElC,IAAIf,GAAG,KAAK,KAAK,EAAE;QACjBQ,WAAW,CAACE,IAAI,CAACP,SAAS,CAACa,SAAS,CAAC;;;GAG1C,MAAM;IACLR,WAAW,CAACE,IAAI,CAACN,UAAU,CAACa,YAAY,CAAC;;EAG3CrB,KAAK,CAACX,IAAI,CAACiC,SAAS,GAAGzC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAE,GAAGuB,WAAW,EAAEZ,KAAK,CAACX,IAAI,CAACiC,SAAS,CAAC;EAEzGtB,KAAK,CAACV,MAAM,CAACgC,SAAS,GAAGzC,YAAY,CACnCO,yBAAyB,CAACE,MAAM,EAChC,CAACW,cAAc,IAAII,YAAY,CAACU,eAAe,EAC/Cb,MAAM,KAAK,KAAK,IAAIG,YAAY,CAACkB,GAAG,EACpCvB,KAAK,CAACV,MAAM,CAACgC,SAAS,CACvB;EAED,IAAItB,KAAK,CAACT,aAAa,EAAE;IACvBS,KAAK,CAACT,aAAa,CAAC+B,SAAS,GAAGzC,YAAY,CAC1CO,yBAAyB,CAACG,aAAa,EACvCe,mBAAmB,CAACO,IAAI,EACxBb,KAAK,CAACT,aAAa,CAAC+B,SAAS,CAC9B;;EAGH,OAAOtB,KAAK;AACd,CAAC;AAED;;;;AAIA,OAAO,MAAMW,sBAAsB,GAAG,CAACT,MAAkC,EAAEC,IAAiB,KAAY;EACtG,MAAMqB,WAAW,GAAG5B,cAAc,EAAE;EACpC,MAAM6B,YAAY,GAAG5B,eAAe,EAAE;EACtC,MAAM6B,aAAa,GAAG,EAAE;EAExB,IAAIvB,IAAI,EAAE;IACR,IAAID,MAAM,KAAK,OAAO,EAAE;MACtB,IAAIC,IAAI,GAAG,EAAE,EAAE;QACbuB,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACR,KAAK,CAAC;OACtC,MAAM,IAAIb,IAAI,GAAG,EAAE,EAAE;QACpBuB,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACP,OAAO,CAAC;OACxC,MAAM;QACLS,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACN,QAAQ,CAAC;;MAG1C,IAAIf,IAAI,GAAG,EAAE,EAAE;QACbuB,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACG,GAAG,CAAC;OACpC,MAAM,IAAIxB,IAAI,GAAG,EAAE,EAAE;QACpBuB,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACI,EAAE,CAAC;OACnC,MAAM,IAAIzB,IAAI,GAAG,EAAE,EAAE;QACpBuB,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACK,CAAC,CAAC;OAClC,MAAM;QACLH,aAAa,CAACZ,IAAI,CAACU,WAAW,CAACM,CAAC,CAAC;;KAEpC,MAAM,IAAI5B,MAAM,KAAK,QAAQ,EAAE;MAC9B,IAAIC,IAAI,GAAG,EAAE,EAAE;QACbuB,aAAa,CAACZ,IAAI,CAACW,YAAY,CAACI,CAAC,CAAC;OACnC,MAAM,IAAI1B,IAAI,GAAG,EAAE,EAAE;QACpBuB,aAAa,CAACZ,IAAI,CAACW,YAAY,CAACM,MAAM,CAAC;OACxC,MAAM,IAAI5B,IAAI,GAAG,EAAE,EAAE;QACpBuB,aAAa,CAACZ,IAAI,CAACW,YAAY,CAACK,CAAC,CAAC;OACnC,MAAM;QACLJ,aAAa,CAACZ,IAAI,CAACW,YAAY,CAACO,EAAE,CAAC;;;;EAKzC,OAAOnD,YAAY,CAAC,GAAG6C,aAAa,CAAC;AACvC,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","useAvatarStyles","useOverflowLabelStyles","useStackStyles","useSpreadStyles","usePieStyles","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","base","push","nonOverflowItem","thick","thicker","thickest","slices","rtlSlices","overflowItem","className","pie","stackStyles","spreadStyles","layoutClasses","xxs","xs","s","l","mNudge","xl"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n  root: 'fui-AvatarGroupItem',\n  avatar: 'fui-AvatarGroupItem__avatar',\n  overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    flexShrink: 0,\n    position: 'relative',\n  },\n  overflowItem: {\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n  },\n  nonOverflowItem: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n  nonOverflowItem: {\n    position: 'absolute',\n  },\n  pie: {\n    ...shorthands.borderRadius(0),\n  },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n  base: {\n    marginLeft: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground1,\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n  thick: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n  },\n  thicker: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n  },\n  thickest: {\n    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n  },\n  xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n  xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n  s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n  l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n  s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n  mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n  m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n  l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n  xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n  base: {\n    position: 'absolute',\n  },\n  slices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n      left: '25%',\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n      left: '-25%',\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n      clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n      left: '50%',\n      top: '50%',\n      transform: 'scale(0.5)',\n      transformOrigin: '0 0',\n    },\n  },\n  rtlSlices: {\n    // Two slices\n    // 1st of 2 items\n    '&:nth-of-type(1):nth-last-of-type(2)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 2 items\n    '&:nth-of-type(2):nth-last-of-type(1)': {\n      clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n    },\n\n    // Three slices\n    // 1st of 3 items\n    '&:nth-of-type(1):nth-last-of-type(3)': {\n      clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n    },\n    // 2nd of 3 items\n    '&:nth-of-type(2):nth-last-of-type(2)': {\n      clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n      left: '0',\n    },\n    // 3rd of 3 items\n    '&:nth-of-type(3):nth-last-of-type(1)': {\n      clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n      left: '0',\n    },\n  },\n  thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n  thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n  thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n  const { isOverflowItem, layout, size } = state;\n  const { dir } = useFluent();\n\n  const avatarStyles = useAvatarStyles();\n  const overflowLabelStyles = useOverflowLabelStyles();\n  const pieStyles = usePieStyles();\n  const rootStyles = useRootStyles();\n  const sizeStyles = useSizeStyles();\n\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const rootClasses = [rootStyles.base];\n\n  if (!isOverflowItem) {\n    rootClasses.push(rootStyles.nonOverflowItem);\n    rootClasses.push(groupChildClassName);\n    rootClasses.push(sizeStyles[size]);\n\n    if (layout === 'pie') {\n      rootClasses.push(pieStyles.base);\n\n      if (size < 56) {\n        rootClasses.push(pieStyles.thick);\n      } else if (size < 72) {\n        rootClasses.push(pieStyles.thicker);\n      } else {\n        rootClasses.push(pieStyles.thickest);\n      }\n\n      rootClasses.push(pieStyles.slices);\n\n      if (dir === 'rtl') {\n        rootClasses.push(pieStyles.rtlSlices);\n      }\n    }\n  } else {\n    rootClasses.push(rootStyles.overflowItem);\n  }\n\n  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n  state.avatar.className = mergeClasses(\n    avatarGroupItemClassNames.avatar,\n    !isOverflowItem && avatarStyles.nonOverflowItem,\n    layout === 'pie' && avatarStyles.pie,\n    state.avatar.className,\n  );\n\n  if (state.overflowLabel) {\n    state.overflowLabel.className = mergeClasses(\n      avatarGroupItemClassNames.overflowLabel,\n      overflowLabelStyles.base,\n      state.overflowLabel.className,\n    );\n  }\n\n  return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n  const stackStyles = useStackStyles();\n  const spreadStyles = useSpreadStyles();\n  const layoutClasses = [];\n\n  if (size) {\n    if (layout === 'stack') {\n      if (size < 56) {\n        layoutClasses.push(stackStyles.thick);\n      } else if (size < 72) {\n        layoutClasses.push(stackStyles.thicker);\n      } else {\n        layoutClasses.push(stackStyles.thickest);\n      }\n\n      if (size < 24) {\n        layoutClasses.push(stackStyles.xxs);\n      } else if (size < 48) {\n        layoutClasses.push(stackStyles.xs);\n      } else if (size < 96) {\n        layoutClasses.push(stackStyles.s);\n      } else {\n        layoutClasses.push(stackStyles.l);\n      }\n    } else if (layout === 'spread') {\n      if (size < 20) {\n        layoutClasses.push(spreadStyles.s);\n      } else if (size < 32) {\n        layoutClasses.push(spreadStyles.mNudge);\n      } else if (size < 64) {\n        layoutClasses.push(spreadStyles.l);\n      } else {\n        layoutClasses.push(spreadStyles.xl);\n      }\n    }\n  }\n\n  return mergeClasses(...layoutClasses);\n};\n"]}
+{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","useAvatarStyles","useOverflowLabelStyles","useStackStyles","useSpreadStyles","usePieStyles","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","base","push","nonOverflowItem","thick","thicker","thickest","slices","rtlSlices","overflowItem","className","pie","stackStyles","spreadStyles","layoutClasses","xxs","xs","s","l","mNudge","xl"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { 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"]}

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 { AvatarSizes } 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: AvatarSizes;\n  };\n"]}
+{"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"]}

package/lib/contexts/AvatarContext.js.map

@@ -1 +1 @@
-{"version":3,"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,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACP,aAAa,CAAC,mCAAIG,yBAAyB;AAAA","names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { AvatarSizes } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSizes;\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"]}
+{"version":3,"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,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACP,aAAa,CAAC,mCAAIG,yBAAyB;AAAA","names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"sourceRoot":"../src/","sources":["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"]}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,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","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"],"sourceRoot":"../src/","sources":["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';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } 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"]}
+{"version":3,"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","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"],"sourceRoot":"../src/","sources":["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"]}

package/lib-amd/components/Avatar/Avatar.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"]}
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"]}

package/lib-amd/components/AvatarGroup/AvatarGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the AvatarGroupItems should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Size of the AvatarGroupItems.\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"]}
+{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n  /**\n   * Layout the AvatarGroupItems should be displayed as.\n   * @default spread\n   */\n  layout?: 'spread' | 'stack' | 'pie';\n\n  /**\n   * Size of the AvatarGroupItems.\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSizes } 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: AvatarSizes;\n};\n"]}
+{"version":3,"file":"AvatarGroupItem.types.js","sourceRoot":"","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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { AvatarSizes } 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: AvatarSizes;\n  };\n"]}
+{"version":3,"file":"AvatarGroupPopover.types.js","sourceRoot":"","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"]}

package/lib-amd/contexts/AvatarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"names":[],"mappings":";;;;IAGA,IAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiC,SAAS,CAAC,CAAC;IASrF,IAAM,yBAAyB,GAAuB,EAAE,CAAC;IAEzD;;OAEG;IACU,QAAA,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;IAE5D;;OAEG;IACI,IAAM,gBAAgB,GAAG,sBAAM,OAAA,MAAA,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,mCAAI,yBAAyB,CAAA,EAAA,CAAC;IAAtF,QAAA,gBAAgB,oBAAsE","sourcesContent":["import * as React from 'react';\nimport { AvatarSizes } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSizes;\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"]}
+{"version":3,"file":"AvatarContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"names":[],"mappings":";;;;IAGA,IAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiC,SAAS,CAAC,CAAC;IASrF,IAAM,yBAAyB,GAAuB,EAAE,CAAC;IAEzD;;OAEG;IACU,QAAA,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;IAE5D;;OAEG;IACI,IAAM,gBAAgB,GAAG,sBAAM,OAAA,MAAA,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,mCAAI,yBAAyB,CAAA,EAAA,CAAC;IAAtF,QAAA,gBAAgB,oBAAsE","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"]}

package/lib-amd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAGX,oGAAA,WAAW,OAAA;IAAE,kHAAA,yBAAyB,OAAA;IAG7C,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,yHAAA,0BAA0B,OAAA;IAC1B,0HAAA,2BAA2B,OAAA;IAC3B,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IAUvB,kHAAA,eAAe,OAAA;IACf,4HAAA,yBAAyB,OAAA;IACzB,iIAAA,8BAA8B,OAAA;IAC9B,oIAAA,iCAAiC,OAAA;IACjC,8HAAA,2BAA2B,OAAA;IAI3B,wHAAA,kBAAkB,OAAA;IAClB,kIAAA,4BAA4B,OAAA;IAC5B,uIAAA,iCAAiC,OAAA;IACjC,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAI9B,8GAAA,qBAAqB,OAAA;IACrB,4GAAA,mBAAmB,OAAA;IACnB,yGAAA,gBAAgB,OAAA;IAChB,uHAAA,8BAA8B,OAAA","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { 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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAIX,oGAAA,WAAW,OAAA;IAAE,kHAAA,yBAAyB,OAAA;IAG7C,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,yHAAA,0BAA0B,OAAA;IAC1B,0HAAA,2BAA2B,OAAA;IAC3B,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IAUvB,kHAAA,eAAe,OAAA;IACf,4HAAA,yBAAyB,OAAA;IACzB,iIAAA,8BAA8B,OAAA;IAC9B,oIAAA,iCAAiC,OAAA;IACjC,8HAAA,2BAA2B,OAAA;IAI3B,wHAAA,kBAAkB,OAAA;IAClB,kIAAA,4BAA4B,OAAA;IAC5B,uIAAA,iCAAiC,OAAA;IACjC,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAI9B,8GAAA,qBAAqB,OAAA;IACrB,4GAAA,mBAAmB,OAAA;IACnB,yGAAA,gBAAgB,OAAA;IAChB,uHAAA,8BAA8B,OAAA","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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAGA,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAa,CAAiCC,SAAS,CAAC;AASpF,MAAMC,yBAAyB,GAAuB,EAAE;AAExD;;;AAGaC,6BAAqB,GAAGL,aAAa,CAACM,QAAQ;AAE3D;;;AAGO,MAAMC,gBAAgB,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACR,aAAa,CAAC,mCAAII,yBAAyB;AAAA;AAArFC,wBAAgB","names":["avatarContext","React","createContext","undefined","avatarContextDefaultValue","exports","Provider","useAvatarContext","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { AvatarSizes } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSizes;\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"]}
+{"version":3,"mappings":";;;;;;AAAA;AAGA,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAa,CAAiCC,SAAS,CAAC;AASpF,MAAMC,yBAAyB,GAAuB,EAAE;AAExD;;;AAGaC,6BAAqB,GAAGL,aAAa,CAACM,QAAQ;AAE3D;;;AAGO,MAAMC,gBAAgB,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACR,aAAa,CAAC,mCAAII,yBAAyB;AAAA;AAArFC,wBAAgB","names":["avatarContext","React","createContext","undefined","avatarContextDefaultValue","exports","Provider","useAvatarContext","useContext"],"sourceRoot":"../src/","sources":["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"]}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,sBAAM;EAAA;AAAA;AACNF;EAAAC;EAAAC;IAAA,gCAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,qCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,kCAAkB;EAAA;AAAA;AAGpB;AAASF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AAE/C;AACEF;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,gDAA2B;EAAA;AAAA;AAC3BF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AASzB;AACEF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AACfF;EAAAC;EAAAC;IAAA,kDAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,uDAA8B;EAAA;AAAA;AAC9BF;EAAAC;EAAAC;IAAA,0DAAiC;EAAA;AAAA;AACjCF;EAAAC;EAAAC;IAAA,oDAA2B;EAAA;AAAA;AAG7B;AACEF;EAAAC;EAAAC;IAAA,8CAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,wDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,6DAAiC;EAAA;AAAA;AACjCF;EAAAC;EAAAC;IAAA,gEAAoC;EAAA;AAAA;AACpCF;EAAAC;EAAAC;IAAA,0DAA8B;EAAA;AAAA;AAGhC;AACEF;EAAAC;EAAAC;IAAA,oCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,kCAAmB;EAAA;AAAA;AACnBF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,6CAA8B;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["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';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } 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"]}
+{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,sBAAM;EAAA;AAAA;AACNF;EAAAC;EAAAC;IAAA,gCAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,qCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,kCAAkB;EAAA;AAAA;AAIpB;AAASF;EAAAC;EAAAC;IAAA,0BAAW;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,wCAAyB;EAAA;AAAA;AAE/C;AACEF;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,gDAA2B;EAAA;AAAA;AAC3BF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AASzB;AACEF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AACfF;EAAAC;EAAAC;IAAA,kDAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,uDAA8B;EAAA;AAAA;AAC9BF;EAAAC;EAAAC;IAAA,0DAAiC;EAAA;AAAA;AACjCF;EAAAC;EAAAC;IAAA,oDAA2B;EAAA;AAAA;AAG7B;AACEF;EAAAC;EAAAC;IAAA,8CAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,wDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,6DAAiC;EAAA;AAAA;AACjCF;EAAAC;EAAAC;IAAA,gEAAoC;EAAA;AAAA;AACpCF;EAAAC;EAAAC;IAAA,0DAA8B;EAAA;AAAA;AAGhC;AACEF;EAAAC;EAAAC;IAAA,oCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,kCAAmB;EAAA;AAAA;AACnBF;EAAAC;EAAAC;IAAA,+BAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,6CAA8B;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.2.16",
+  "version": "9.3.1",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,15 +36,15 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.0.20",
-    "@fluentui/react-context-selector": "^9.1.5",
+    "@fluentui/react-badge": "^9.0.22",
+    "@fluentui/react-context-selector": "^9.1.7",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.4.3",
-    "@fluentui/react-shared-contexts": "^9.1.5",
-    "@fluentui/react-tabster": "^9.4.0",
+    "@fluentui/react-popover": "^9.4.5",
+    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-tabster": "^9.4.2",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-tooltip": "^9.1.10",
-    "@fluentui/react-utilities": "^9.4.0",
+    "@fluentui/react-tooltip": "^9.1.12",
+    "@fluentui/react-utilities": "^9.5.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },