feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-avatar/lib/Avatar.js

@@ -0,0 +1 @@
+export { Avatar, DEFAULT_STRINGS, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useAvatarBase_unstable, useSizeStyles } from './components/Avatar/index';

node_modules/@fluentui/react-avatar/lib/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './components/Avatar/index';\nexport {\n  Avatar,\n  DEFAULT_STRINGS,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useAvatarBase_unstable,\n  useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","useSizeStyles"],"mappings":"AAYA,SACEA,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,aAAa,QACR,4BAA4B"}

node_modules/@fluentui/react-avatar/lib/AvatarGroup.js

@@ -0,0 +1 @@
+export { AvatarGroup, avatarGroupClassNames, defaultAvatarGroupSize, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './components/AvatarGroup/index';

node_modules/@fluentui/react-avatar/lib/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AvatarGroup.ts"],"sourcesContent":["export type {\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n} from './components/AvatarGroup/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  defaultAvatarGroupSize,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n  useAvatarGroupBase_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable"],"mappings":"AASA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,sBAAsB,EACtBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,iCAAiC"}

node_modules/@fluentui/react-avatar/lib/AvatarGroupItem.js

@@ -0,0 +1 @@
+export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, useGroupChildClassName, useAvatarGroupItemBase_unstable } from './components/AvatarGroupItem/index';

node_modules/@fluentui/react-avatar/lib/AvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n  AvatarGroupItemProps,\n  AvatarGroupItemSlots,\n  AvatarGroupItemState,\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n} from './components/AvatarGroupItem/index';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n  useGroupChildClassName,\n  useAvatarGroupItemBase_unstable,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName","useAvatarGroupItemBase_unstable"],"mappings":"AAOA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,sBAAsB,EACtBC,+BAA+B,QAC1B,qCAAqC"}

node_modules/@fluentui/react-avatar/lib/AvatarGroupPopover.js

@@ -0,0 +1 @@
+export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './components/AvatarGroupPopover/index';

node_modules/@fluentui/react-avatar/lib/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverSlots,\n  AvatarGroupPopoverState,\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n} from './components/AvatarGroupPopover/index';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverBase_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable"],"mappings":"AAOA,SACEA,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,2CAA2C,EAC3CC,oCAAoC,EACpCC,8BAA8B,EAC9BC,kCAAkC,QAC7B,wCAAwC"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import { renderAvatar_unstable } from './renderAvatar';
+import { useAvatar_unstable } from './useAvatar';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarStyles_unstable } from './useAvatarStyles.styles';
+export const Avatar = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatar_unstable(props, ref);
+    useAvatarStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);
+    return renderAvatar_unstable(state);
+});
+Avatar.displayName = 'Avatar';

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles.styles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHook_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,wBAAwB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCJ,yBAAyBK;IAEzBN,4BAA4B,4BAA4BM;IAExD,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-avatar/lib/components/Avatar/index.js

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar';
+export { renderAvatar_unstable } from './renderAvatar';
+export { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';
+export { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';

node_modules/@fluentui/react-avatar/lib/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":"AAYA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AAC1F,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,2BAA2B"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/renderAvatar.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+export const renderAvatar_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.initials && /*#__PURE__*/ _jsx(state.initials, {}),
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.image && /*#__PURE__*/ _jsx(state.image, {}),
+            state.badge && /*#__PURE__*/ _jsx(state.badge, {}),
+            state.activeAriaLabelElement
+        ]
+    });
+};

node_modules/@fluentui/react-avatar/lib/components/Avatar/renderAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarSlots, AvatarBaseState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarBaseState): JSXElement => {\n  assertSlots<AvatarSlots>(state);\n\n  return (\n    <state.root>\n      {state.initials && <state.initials />}\n      {state.icon && <state.icon />}\n      {state.image && <state.image />}\n      {state.badge && <state.badge />}\n      {state.activeAriaLabelElement}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC3BJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/useAvatar.js

@@ -0,0 +1,230 @@
+'use client';
+import * as React from 'react';
+import { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import { getInitials } from '../../utils/index';
+import { PersonRegular } from '@fluentui/react-icons';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useAvatarContext } from '../../contexts/AvatarContext';
+export const DEFAULT_STRINGS = {
+    active: 'active',
+    inactive: 'inactive'
+};
+export const useAvatar_unstable = (props, ref)=>{
+    const { dir } = useFluent();
+    const { shape: contextShape, size: contextSize } = useAvatarContext();
+    const { size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor, color: propColor = 'neutral', ...rest } = props;
+    const state = useAvatarBase_unstable(rest, ref);
+    var _ref;
+    // Resolve 'colorful' to a specific color name
+    const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
+    if (state.initials) {
+        var _state_initials;
+        state.initials = slot.optional(props.initials, {
+            renderByDefault: true,
+            defaultProps: {
+                children: getInitials(props.name, dir === 'rtl', {
+                    firstInitialOnly: size <= 16
+                }),
+                id: (_state_initials = state.initials) === null || _state_initials === void 0 ? void 0 : _state_initials.id
+            },
+            elementType: 'span'
+        });
+    }
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(PersonRegular, null);
+    }
+    const badge = slot.optional(props.badge, {
+        defaultProps: {
+            size: getBadgeSize(size),
+            id: state.root.id + '__badge'
+        },
+        elementType: PresenceBadge
+    });
+    let activeAriaLabelElement = state.activeAriaLabelElement;
+    // Enhance aria-label and/or aria-labelledby to include badge and active state
+    // Only process if aria attributes were not explicitly provided by the user
+    const userProvidedAriaLabel = props['aria-label'] !== undefined;
+    const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;
+    if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
+        if (props.name) {
+            if (badge) {
+                state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
+            }
+        } else if (state.initials) {
+            // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
+            delete state.root['aria-label'];
+        }
+        // Add the active state to the aria label
+        if (active === 'active' || active === 'inactive') {
+            const activeText = DEFAULT_STRINGS[active];
+            if (state.root['aria-labelledby']) {
+                // If using aria-labelledby, render a hidden span and append it to the labelledby
+                const activeId = state.root.id + '__active';
+                state.root['aria-labelledby'] += ' ' + activeId;
+                activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
+                    hidden: true,
+                    id: activeId
+                }, activeText);
+            } else if (state.root['aria-label']) {
+                // Otherwise, just append it to the aria-label
+                state.root['aria-label'] += ' ' + activeText;
+            }
+        }
+    }
+    return {
+        ...state,
+        size,
+        shape,
+        active,
+        activeAppearance,
+        activeAriaLabelElement,
+        color,
+        badge,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            badge: PresenceBadge
+        }
+    };
+};
+/**
+ * Base hook for Avatar component, manages state and structure common to all variants of Avatar
+ */ export const useAvatarBase_unstable = (props, ref)=>{
+    const { dir } = useFluent();
+    const { name, ...rest } = props;
+    const baseId = useId('avatar-');
+    const root = slot.always({
+        role: 'img',
+        id: baseId,
+        ref,
+        ...rest
+    }, {
+        elementType: 'span'
+    });
+    const [imageHidden, setImageHidden] = React.useState(undefined);
+    let image = slot.optional(props.image, {
+        defaultProps: {
+            alt: '',
+            role: 'presentation',
+            'aria-hidden': true,
+            hidden: imageHidden
+        },
+        elementType: 'img'
+    });
+    // Image shouldn't be rendered if its src is not set
+    if (!(image === null || image === void 0 ? void 0 : image.src)) {
+        image = undefined;
+    }
+    // Hide the image if it fails to load and restore it on a successful load
+    if (image) {
+        image.onError = mergeCallbacks(image.onError, ()=>setImageHidden(true));
+        image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
+    }
+    // Resolve the initials slot, defaulted to getInitials
+    let initials = slot.optional(props.initials, {
+        renderByDefault: true,
+        defaultProps: {
+            children: getInitials(name, dir === 'rtl'),
+            id: baseId + '__initials'
+        },
+        elementType: 'span'
+    });
+    // Don't render the initials slot if it's empty
+    if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
+        initials = undefined;
+    }
+    // Render the icon slot *only if* there aren't any initials or image to display
+    let icon = undefined;
+    if (!initials && (!image || imageHidden)) {
+        icon = slot.optional(props.icon, {
+            renderByDefault: true,
+            defaultProps: {
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        });
+    }
+    let activeAriaLabelElement;
+    // Resolve aria-label and/or aria-labelledby if not provided by the user
+    if (!root['aria-label'] && !root['aria-labelledby']) {
+        if (name) {
+            root['aria-label'] = name;
+        } else if (initials) {
+            // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            root['aria-labelledby'] = initials.id;
+        }
+    }
+    return {
+        activeAriaLabelElement,
+        components: {
+            root: 'span',
+            initials: 'span',
+            icon: 'span',
+            image: 'img'
+        },
+        root,
+        initials,
+        icon,
+        image
+    };
+};
+const getBadgeSize = (size)=>{
+    if (size >= 96) {
+        return 'extra-large';
+    } else if (size >= 64) {
+        return 'large';
+    } else if (size >= 56) {
+        return 'medium';
+    } else if (size >= 40) {
+        return 'small';
+    } else if (size >= 28) {
+        return 'extra-small';
+    } else {
+        return 'tiny';
+    }
+};
+const avatarColors = [
+    'dark-red',
+    'cranberry',
+    'red',
+    'pumpkin',
+    'peach',
+    'marigold',
+    'gold',
+    'brass',
+    'brown',
+    'forest',
+    'seafoam',
+    'dark-green',
+    'light-teal',
+    'teal',
+    'steel',
+    'blue',
+    'royal-blue',
+    'cornflower',
+    'navy',
+    'lavender',
+    'purple',
+    'grape',
+    'lilac',
+    'pink',
+    'magenta',
+    'plum',
+    'beige',
+    'mink',
+    'platinum',
+    'anchor'
+];
+const getHashCode = (str)=>{
+    let hashCode = 0;
+    for(let len = str.length - 1; len >= 0; len--){
+        const ch = str.charCodeAt(len);
+        const shift = len % 8;
+        hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
+    }
+    return hashCode;
+};

node_modules/@fluentui/react-avatar/lib/components/Avatar/useAvatarStyles.styles.js

@@ -0,0 +1,605 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+export const avatarClassNames = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge'
+};
+// CSS variables used internally in Avatar's styles
+const vars = {
+  badgeRadius: '--fui-Avatar-badgeRadius',
+  badgeGap: '--fui-Avatar-badgeGap',
+  badgeAlign: '--fui-Avatar-badgeAlign',
+  ringWidth: '--fui-Avatar-ringWidth'
+};
+const useRootClassName = /*#__PURE__*/__resetStyles("r81b29z", "r1aatmv", {
+  r: [".r81b29z{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}", ".r1aatmv{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}"]
+});
+const useImageClassName = /*#__PURE__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
+const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}"]);
+/**
+ * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
+ * This creates a transparent gap between the badge and Avatar.
+ *
+ * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
+ */
+const badgeMask = margin => {
+  // Center the cutout at the badge's radius away from the edge.
+  // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
+  const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
+  // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
+  // to "fade" from transparent to opaque over a half-pixel and ease the transition.
+  const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
+  const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
+  return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
+};
+const useStyles = /*#__PURE__*/__styles({
+  textCaption2Strong: {
+    Be2twd7: "f13mqy1h"
+  },
+  textCaption1Strong: {
+    Be2twd7: "fy9rknc"
+  },
+  textSubtitle2: {
+    Be2twd7: "fod5ikn"
+  },
+  textSubtitle1: {
+    Be2twd7: "f1pp30po"
+  },
+  textTitle3: {
+    Be2twd7: "f1x0m3f5"
+  },
+  squareSmall: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91"
+  },
+  squareMedium: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5"
+  },
+  squareLarge: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1o0qvyv"
+  },
+  squareXLarge: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  },
+  activeOrInactive: {
+    Bz10aip: "ftfx35i",
+    Bmy1vo4: "fv0atk9",
+    B3o57yi: "f1iry5bo",
+    Bkqvd7p: "f15n41j8",
+    Bg24rqe: "f9ttr0w"
+  },
+  ring: {
+    Ftih45: "f1wl9k8s"
+  },
+  ringBadgeCutout: {
+    f4a502: "fp2gujx"
+  },
+  ringThick: {
+    of393c: "fq1w1vq"
+  },
+  ringThicker: {
+    of393c: "fzg6ace"
+  },
+  ringThickest: {
+    of393c: "f1nu8p71"
+  },
+  shadow: {
+    Bsft5z2: "f13zj6fq"
+  },
+  shadow4: {
+    Be6vj1x: "fcjn15l"
+  },
+  shadow8: {
+    Be6vj1x: "f1tm8t9f"
+  },
+  shadow16: {
+    Be6vj1x: "f1a1aohj"
+  },
+  shadow28: {
+    Be6vj1x: "fond6v5"
+  },
+  inactive: {
+    abs64n: "fp25eh",
+    Bz10aip: "f1clczzi",
+    Bkqvd7p: "f1l3s34x",
+    Bfgortx: 0,
+    Bnvr3x9: 0,
+    b2tv09: 0,
+    Bucmhp4: 0,
+    iayac2: "flkahu5",
+    b6ubon: "fw457kn",
+    Bqinb2h: "f1wmllxl"
+  },
+  badge: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1yab3r1",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
+  },
+  badgeCutout: {
+    btxmck: "f1eugkqs"
+  },
+  badgeAlign: {
+    Dnlfbu: ["f1tlnv9o", "f1y9kyih"]
+  },
+  tiny: {
+    Bdjeniz: "f1uwoubl",
+    niu6jh: "fid048z"
+  },
+  "extra-small": {
+    Bdjeniz: "f13ar0e0",
+    niu6jh: "fid048z"
+  },
+  small: {
+    Bdjeniz: "fwwuruf",
+    niu6jh: "fid048z"
+  },
+  medium: {
+    Bdjeniz: "f1af27q5",
+    niu6jh: "fid048z"
+  },
+  large: {
+    Bdjeniz: "f18yy57a",
+    niu6jh: "f924bxt"
+  },
+  "extra-large": {
+    Bdjeniz: "f2jg042",
+    niu6jh: "f924bxt"
+  },
+  icon12: {
+    Be2twd7: "f1ugzwwg"
+  },
+  icon16: {
+    Be2twd7: "f4ybsrx"
+  },
+  icon20: {
+    Be2twd7: "fe5j1ua"
+  },
+  icon24: {
+    Be2twd7: "f1rt2boy"
+  },
+  icon28: {
+    Be2twd7: "f24l1pt"
+  },
+  icon32: {
+    Be2twd7: "ffl51b"
+  },
+  icon48: {
+    Be2twd7: "f18m8u13"
+  }
+}, {
+  d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], [".f1o0qvyv{border-radius:var(--borderRadiusLarge);}", {
+    p: -1
+  }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".ftfx35i{transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}", ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}", ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}", ".f13zj6fq::after{content:\"\";}", ".fcjn15l::after{box-shadow:var(--shadow4);}", ".f1tm8t9f::after{box-shadow:var(--shadow8);}", ".f1a1aohj::after{box-shadow:var(--shadow16);}", ".fond6v5::after{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{transform:scale(0.875);}", ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", [".flkahu5::before,.flkahu5::after{margin:0;}", {
+    p: -1
+  }], ".fw457kn::before,.fw457kn::after{opacity:0;}", ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}", ".f1y9kyih{--fui-Avatar-badgeAlign:left;}", ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}", ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}", ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}", ".fwwuruf{--fui-Avatar-badgeRadius:6px;}", ".f1af27q5{--fui-Avatar-badgeRadius:8px;}", ".f18yy57a{--fui-Avatar-badgeRadius:10px;}", ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}", ".f2jg042{--fui-Avatar-badgeRadius:14px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f9ttr0w{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
+});
+export const useSizeStyles = /*#__PURE__*/__styles({
+  "16": {
+    a9b677: "fjw5fx7",
+    Bqenvij: "fd461yt"
+  },
+  "20": {
+    a9b677: "f64fuq3",
+    Bqenvij: "fjamq6b"
+  },
+  "24": {
+    a9b677: "fq4mcun",
+    Bqenvij: "frvgh55"
+  },
+  "28": {
+    a9b677: "f1w9dchk",
+    Bqenvij: "fxldao9"
+  },
+  "32": {
+    a9b677: "f1szoe96",
+    Bqenvij: "f1d2rq10"
+  },
+  "36": {
+    a9b677: "fpdz1er",
+    Bqenvij: "f8ljn23"
+  },
+  "40": {
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac"
+  },
+  "48": {
+    a9b677: "f124akge",
+    Bqenvij: "ff2sm71"
+  },
+  "56": {
+    a9b677: "f1u66zr1",
+    Bqenvij: "fzki0ko"
+  },
+  "64": {
+    a9b677: "fa9ln6p",
+    Bqenvij: "f16k9i2m"
+  },
+  "72": {
+    a9b677: "fhcae8x",
+    Bqenvij: "f1shusfg"
+  },
+  "96": {
+    a9b677: "f1kyr2gn",
+    Bqenvij: "fypu0ge"
+  },
+  "120": {
+    a9b677: "fwfqyga",
+    Bqenvij: "fjr5b71"
+  },
+  "128": {
+    a9b677: "f1iksgmy",
+    Bqenvij: "fele2au"
+  }
+}, {
+  d: [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
+});
+const useColorStyles = /*#__PURE__*/__styles({
+  neutral: {
+    sj55zd: "f11d4kpn",
+    De3pzq: "f18f03hv"
+  },
+  brand: {
+    sj55zd: "fonrgv7",
+    De3pzq: "f1blnnmj"
+  },
+  "dark-red": {
+    sj55zd: "fqjd1y1",
+    De3pzq: "f1vq2oo4"
+  },
+  cranberry: {
+    sj55zd: "fg9gses",
+    De3pzq: "f1lwxszt"
+  },
+  red: {
+    sj55zd: "f23f7i0",
+    De3pzq: "f1q9qhfq"
+  },
+  pumpkin: {
+    sj55zd: "fjnan08",
+    De3pzq: "fz91bi3"
+  },
+  peach: {
+    sj55zd: "fknu15p",
+    De3pzq: "f1b9nr51"
+  },
+  marigold: {
+    sj55zd: "f9603vw",
+    De3pzq: "f3z4w6d"
+  },
+  gold: {
+    sj55zd: "fmq0uwp",
+    De3pzq: "fg50kya"
+  },
+  brass: {
+    sj55zd: "f28g5vo",
+    De3pzq: "f4w2gd0"
+  },
+  brown: {
+    sj55zd: "ftl572b",
+    De3pzq: "f14wu1f4"
+  },
+  forest: {
+    sj55zd: "f1gymlvd",
+    De3pzq: "f19ut4y6"
+  },
+  seafoam: {
+    sj55zd: "fnnb6wn",
+    De3pzq: "f1n057jc"
+  },
+  "dark-green": {
+    sj55zd: "ff58qw8",
+    De3pzq: "f11t05wk"
+  },
+  "light-teal": {
+    sj55zd: "f1up9qbj",
+    De3pzq: "f42feg1"
+  },
+  teal: {
+    sj55zd: "f135dsb4",
+    De3pzq: "f6hvv1p"
+  },
+  steel: {
+    sj55zd: "f151dlcp",
+    De3pzq: "f1lnp8zf"
+  },
+  blue: {
+    sj55zd: "f1rjv50u",
+    De3pzq: "f1ggcpy6"
+  },
+  "royal-blue": {
+    sj55zd: "f1emykk5",
+    De3pzq: "f12rj61f"
+  },
+  cornflower: {
+    sj55zd: "fqsigj7",
+    De3pzq: "f8k7hur"
+  },
+  navy: {
+    sj55zd: "f1nj97xi",
+    De3pzq: "f19gw0ux"
+  },
+  lavender: {
+    sj55zd: "fwctg0i",
+    De3pzq: "ff379vm"
+  },
+  purple: {
+    sj55zd: "fjrsgpu",
+    De3pzq: "f1mzf1e1"
+  },
+  grape: {
+    sj55zd: "f1fiiydq",
+    De3pzq: "f1o4k8oy"
+  },
+  lilac: {
+    sj55zd: "f1res9jt",
+    De3pzq: "f1x6mz1o"
+  },
+  pink: {
+    sj55zd: "fv3fbbi",
+    De3pzq: "fydlv6t"
+  },
+  magenta: {
+    sj55zd: "f1f1fwnz",
+    De3pzq: "f4xb6j5"
+  },
+  plum: {
+    sj55zd: "f8ptl6j",
+    De3pzq: "fqo8e26"
+  },
+  beige: {
+    sj55zd: "f1ntv3ld",
+    De3pzq: "f101elhj"
+  },
+  mink: {
+    sj55zd: "f1fscmp",
+    De3pzq: "f13g8o5c"
+  },
+  platinum: {
+    sj55zd: "f1dr00v2",
+    De3pzq: "fkh7blw"
+  },
+  anchor: {
+    sj55zd: "f1f3ti53",
+    De3pzq: "fu4yj0j"
+  }
+}, {
+  d: [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
+});
+const useRingColorStyles = /*#__PURE__*/__styles({
+  neutral: {
+    Bic5iru: "f1uuiafn"
+  },
+  brand: {
+    Bic5iru: "f1uuiafn"
+  },
+  "dark-red": {
+    Bic5iru: "f1t2x9on"
+  },
+  cranberry: {
+    Bic5iru: "f1pvshc9"
+  },
+  red: {
+    Bic5iru: "f1ectbk9"
+  },
+  pumpkin: {
+    Bic5iru: "fvzpl0b"
+  },
+  peach: {
+    Bic5iru: "fwj2kd7"
+  },
+  marigold: {
+    Bic5iru: "fr120vy"
+  },
+  gold: {
+    Bic5iru: "f8xmmar"
+  },
+  brass: {
+    Bic5iru: "f1hbety2"
+  },
+  brown: {
+    Bic5iru: "f1vg3s4g"
+  },
+  forest: {
+    Bic5iru: "f1m3olm5"
+  },
+  seafoam: {
+    Bic5iru: "f17xiqtr"
+  },
+  "dark-green": {
+    Bic5iru: "fx32vyh"
+  },
+  "light-teal": {
+    Bic5iru: "f1mkihwv"
+  },
+  teal: {
+    Bic5iru: "fecnooh"
+  },
+  steel: {
+    Bic5iru: "f15hfgzm"
+  },
+  blue: {
+    Bic5iru: "fqproka"
+  },
+  "royal-blue": {
+    Bic5iru: "f17v2w59"
+  },
+  cornflower: {
+    Bic5iru: "fp0q1mo"
+  },
+  navy: {
+    Bic5iru: "f1nlym55"
+  },
+  lavender: {
+    Bic5iru: "f62vk8h"
+  },
+  purple: {
+    Bic5iru: "f15zl69q"
+  },
+  grape: {
+    Bic5iru: "f53w4j7"
+  },
+  lilac: {
+    Bic5iru: "fu2771t"
+  },
+  pink: {
+    Bic5iru: "fzflscs"
+  },
+  magenta: {
+    Bic5iru: "fb6rmqc"
+  },
+  plum: {
+    Bic5iru: "f1a4gm5b"
+  },
+  beige: {
+    Bic5iru: "f1qpf9z1"
+  },
+  mink: {
+    Bic5iru: "f1l7or83"
+  },
+  platinum: {
+    Bic5iru: "fzrj0iu"
+  },
+  anchor: {
+    Bic5iru: "f8oz6wf"
+  }
+}, {
+  d: [".f1uuiafn::before{color:var(--colorBrandStroke1);}", ".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}", ".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}", ".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}", ".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}", ".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}", ".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}", ".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}", ".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}", ".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}", ".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}", ".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}", ".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}", ".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}", ".fecnooh::before{color:var(--colorPaletteTealBorderActive);}", ".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}", ".fqproka::before{color:var(--colorPaletteBlueBorderActive);}", ".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}", ".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}", ".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}", ".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}", ".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}", ".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}", ".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}", ".fzflscs::before{color:var(--colorPalettePinkBorderActive);}", ".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}", ".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}", ".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}", ".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}", ".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}", ".f8oz6wf::before{color:var(--colorPaletteAnchorBorderActive);}"]
+});
+export const useAvatarStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    size,
+    shape,
+    active,
+    activeAppearance,
+    color
+  } = state;
+  const rootClassName = useRootClassName();
+  const imageClassName = useImageClassName();
+  const iconInitialsClassName = useIconInitialsClassName();
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const colorStyles = useColorStyles();
+  const ringColorStyles = useRingColorStyles();
+  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];
+  if (state.badge) {
+    rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
+  }
+  if (size <= 24) {
+    rootClasses.push(styles.textCaption2Strong);
+  } else if (size <= 28) {
+    rootClasses.push(styles.textCaption1Strong);
+  } else if (size <= 40) {
+    // Default text size included in useRootClassName
+  } else if (size <= 56) {
+    rootClasses.push(styles.textSubtitle2);
+  } else if (size <= 96) {
+    rootClasses.push(styles.textSubtitle1);
+  } else {
+    rootClasses.push(styles.textTitle3);
+  }
+  if (shape === 'square') {
+    if (size <= 24) {
+      rootClasses.push(styles.squareSmall);
+    } else if (size <= 48) {
+      rootClasses.push(styles.squareMedium);
+    } else if (size <= 72) {
+      rootClasses.push(styles.squareLarge);
+    } else {
+      rootClasses.push(styles.squareXLarge);
+    }
+  }
+  if (active === 'active' || active === 'inactive') {
+    rootClasses.push(styles.activeOrInactive);
+    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.ring, ringColorStyles[color]);
+      if (state.badge) {
+        rootClasses.push(styles.ringBadgeCutout);
+      }
+      if (size <= 48) {
+        rootClasses.push(styles.ringThick);
+      } else if (size <= 64) {
+        rootClasses.push(styles.ringThicker);
+      } else {
+        rootClasses.push(styles.ringThickest);
+      }
+    }
+    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.shadow);
+      if (size <= 28) {
+        rootClasses.push(styles.shadow4);
+      } else if (size <= 48) {
+        rootClasses.push(styles.shadow8);
+      } else if (size <= 64) {
+        rootClasses.push(styles.shadow16);
+      } else {
+        rootClasses.push(styles.shadow28);
+      }
+    }
+    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
+    if (active === 'inactive') {
+      rootClasses.push(styles.inactive);
+    }
+  }
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
+  if (state.badge) {
+    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
+  }
+  if (state.image) {
+    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
+  }
+  if (state.initials) {
+    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
+  }
+  if (state.icon) {
+    let iconSizeClass;
+    if (size <= 16) {
+      iconSizeClass = styles.icon12;
+    } else if (size <= 24) {
+      iconSizeClass = styles.icon16;
+    } else if (size <= 40) {
+      iconSizeClass = styles.icon20;
+    } else if (size <= 48) {
+      iconSizeClass = styles.icon24;
+    } else if (size <= 56) {
+      iconSizeClass = styles.icon28;
+    } else if (size <= 72) {
+      iconSizeClass = styles.icon32;
+    } else {
+      iconSizeClass = styles.icon48;
+    }
+    state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-avatar/lib/components/Avatar/useAvatarStyles.styles.raw.js

@@ -0,0 +1,703 @@
+'use client';
+import { tokens } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+export const avatarClassNames = {
+    root: 'fui-Avatar',
+    image: 'fui-Avatar__image',
+    initials: 'fui-Avatar__initials',
+    icon: 'fui-Avatar__icon',
+    badge: 'fui-Avatar__badge'
+};
+// CSS variables used internally in Avatar's styles
+const vars = {
+    badgeRadius: '--fui-Avatar-badgeRadius',
+    badgeGap: '--fui-Avatar-badgeGap',
+    badgeAlign: '--fui-Avatar-badgeAlign',
+    ringWidth: '--fui-Avatar-ringWidth'
+};
+const useRootClassName = makeResetStyles({
+    display: 'inline-block',
+    flexShrink: 0,
+    position: 'relative',
+    verticalAlign: 'middle',
+    borderRadius: tokens.borderRadiusCircular,
+    fontFamily: tokens.fontFamilyBase,
+    fontWeight: tokens.fontWeightSemibold,
+    fontSize: tokens.fontSizeBase300,
+    width: '32px',
+    height: '32px',
+    // ::before is the ring, and ::after is the shadow.
+    // These are not displayed by default; the ring and shadow clases set content: "" to display them when appropriate.
+    '::before,::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: -1,
+        margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,
+        borderRadius: 'inherit',
+        transitionProperty: 'margin, opacity',
+        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,
+        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms'
+        }
+    },
+    '::before': {
+        borderStyle: 'solid',
+        borderWidth: `var(${vars.ringWidth})`
+    }
+});
+const useImageClassName = makeResetStyles({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: 'inherit',
+    objectFit: 'cover',
+    verticalAlign: 'top'
+});
+const useIconInitialsClassName = makeResetStyles({
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    lineHeight: '1',
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'center',
+    textAlign: 'center',
+    userSelect: 'none',
+    borderRadius: 'inherit'
+});
+/**
+ * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
+ * This creates a transparent gap between the badge and Avatar.
+ *
+ * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
+ */ const badgeMask = (margin)=>{
+    // Center the cutout at the badge's radius away from the edge.
+    // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
+    const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
+    // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
+    // to "fade" from transparent to opaque over a half-pixel and ease the transition.
+    const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
+    const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
+    return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
+};
+const useStyles = makeStyles({
+    textCaption2Strong: {
+        fontSize: tokens.fontSizeBase100
+    },
+    textCaption1Strong: {
+        fontSize: tokens.fontSizeBase200
+    },
+    textSubtitle2: {
+        fontSize: tokens.fontSizeBase400
+    },
+    textSubtitle1: {
+        fontSize: tokens.fontSizeBase500
+    },
+    textTitle3: {
+        fontSize: tokens.fontSizeBase600
+    },
+    squareSmall: {
+        borderRadius: tokens.borderRadiusSmall
+    },
+    squareMedium: {
+        borderRadius: tokens.borderRadiusMedium
+    },
+    squareLarge: {
+        borderRadius: tokens.borderRadiusLarge
+    },
+    squareXLarge: {
+        borderRadius: tokens.borderRadiusXLarge
+    },
+    activeOrInactive: {
+        transform: 'perspective(1px)',
+        transitionProperty: 'transform, opacity',
+        transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,
+        transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms'
+        }
+    },
+    ring: {
+        // Show the ::before pseudo-element, which is the ring
+        '::before': {
+            content: '""'
+        }
+    },
+    ringBadgeCutout: {
+        '::before': {
+            maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`)
+        }
+    },
+    ringThick: {
+        [vars.ringWidth]: tokens.strokeWidthThick
+    },
+    ringThicker: {
+        [vars.ringWidth]: tokens.strokeWidthThicker
+    },
+    ringThickest: {
+        [vars.ringWidth]: tokens.strokeWidthThickest
+    },
+    shadow: {
+        // Show the ::after pseudo-element, which is the shadow
+        '::after': {
+            content: '""'
+        }
+    },
+    shadow4: {
+        '::after': {
+            boxShadow: tokens.shadow4
+        }
+    },
+    shadow8: {
+        '::after': {
+            boxShadow: tokens.shadow8
+        }
+    },
+    shadow16: {
+        '::after': {
+            boxShadow: tokens.shadow16
+        }
+    },
+    shadow28: {
+        '::after': {
+            boxShadow: tokens.shadow28
+        }
+    },
+    inactive: {
+        opacity: '0.8',
+        transform: 'scale(0.875)',
+        transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,
+        '::before,::after': {
+            margin: 0,
+            opacity: 0,
+            transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`
+        }
+    },
+    // Applied to the badge slot
+    badge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0
+    },
+    // Applied to the image, initials, or icon slot when there is a badge
+    badgeCutout: {
+        maskImage: badgeMask()
+    },
+    // Applied to the root when there is a badge
+    badgeAlign: {
+        // Griffel won't auto-flip the "right" alignment to "left" in RTL if it is inline in the maskImage,
+        // so split it out into a css variable that will auto-flip.
+        [vars.badgeAlign]: 'right'
+    },
+    // Badge size: applied to root when there is a badge
+    tiny: {
+        [vars.badgeRadius]: '3px',
+        [vars.badgeGap]: tokens.strokeWidthThin
+    },
+    'extra-small': {
+        [vars.badgeRadius]: '5px',
+        [vars.badgeGap]: tokens.strokeWidthThin
+    },
+    small: {
+        [vars.badgeRadius]: '6px',
+        [vars.badgeGap]: tokens.strokeWidthThin
+    },
+    medium: {
+        [vars.badgeRadius]: '8px',
+        [vars.badgeGap]: tokens.strokeWidthThin
+    },
+    large: {
+        [vars.badgeRadius]: '10px',
+        [vars.badgeGap]: tokens.strokeWidthThick
+    },
+    'extra-large': {
+        [vars.badgeRadius]: '14px',
+        [vars.badgeGap]: tokens.strokeWidthThick
+    },
+    icon12: {
+        fontSize: '12px'
+    },
+    icon16: {
+        fontSize: '16px'
+    },
+    icon20: {
+        fontSize: '20px'
+    },
+    icon24: {
+        fontSize: '24px'
+    },
+    icon28: {
+        fontSize: '28px'
+    },
+    icon32: {
+        fontSize: '32px'
+    },
+    icon48: {
+        fontSize: '48px'
+    }
+});
+export const useSizeStyles = makeStyles({
+    16: {
+        width: '16px',
+        height: '16px'
+    },
+    20: {
+        width: '20px',
+        height: '20px'
+    },
+    24: {
+        width: '24px',
+        height: '24px'
+    },
+    28: {
+        width: '28px',
+        height: '28px'
+    },
+    32: {
+        width: '32px',
+        height: '32px'
+    },
+    36: {
+        width: '36px',
+        height: '36px'
+    },
+    40: {
+        width: '40px',
+        height: '40px'
+    },
+    48: {
+        width: '48px',
+        height: '48px'
+    },
+    56: {
+        width: '56px',
+        height: '56px'
+    },
+    64: {
+        width: '64px',
+        height: '64px'
+    },
+    72: {
+        width: '72px',
+        height: '72px'
+    },
+    96: {
+        width: '96px',
+        height: '96px'
+    },
+    120: {
+        width: '120px',
+        height: '120px'
+    },
+    128: {
+        width: '128px',
+        height: '128px'
+    }
+});
+const useColorStyles = makeStyles({
+    neutral: {
+        color: tokens.colorNeutralForeground3,
+        backgroundColor: tokens.colorNeutralBackground6
+    },
+    brand: {
+        color: tokens.colorNeutralForegroundStaticInverted,
+        backgroundColor: tokens.colorBrandBackgroundStatic
+    },
+    'dark-red': {
+        color: tokens.colorPaletteDarkRedForeground2,
+        backgroundColor: tokens.colorPaletteDarkRedBackground2
+    },
+    cranberry: {
+        color: tokens.colorPaletteCranberryForeground2,
+        backgroundColor: tokens.colorPaletteCranberryBackground2
+    },
+    red: {
+        color: tokens.colorPaletteRedForeground2,
+        backgroundColor: tokens.colorPaletteRedBackground2
+    },
+    pumpkin: {
+        color: tokens.colorPalettePumpkinForeground2,
+        backgroundColor: tokens.colorPalettePumpkinBackground2
+    },
+    peach: {
+        color: tokens.colorPalettePeachForeground2,
+        backgroundColor: tokens.colorPalettePeachBackground2
+    },
+    marigold: {
+        color: tokens.colorPaletteMarigoldForeground2,
+        backgroundColor: tokens.colorPaletteMarigoldBackground2
+    },
+    gold: {
+        color: tokens.colorPaletteGoldForeground2,
+        backgroundColor: tokens.colorPaletteGoldBackground2
+    },
+    brass: {
+        color: tokens.colorPaletteBrassForeground2,
+        backgroundColor: tokens.colorPaletteBrassBackground2
+    },
+    brown: {
+        color: tokens.colorPaletteBrownForeground2,
+        backgroundColor: tokens.colorPaletteBrownBackground2
+    },
+    forest: {
+        color: tokens.colorPaletteForestForeground2,
+        backgroundColor: tokens.colorPaletteForestBackground2
+    },
+    seafoam: {
+        color: tokens.colorPaletteSeafoamForeground2,
+        backgroundColor: tokens.colorPaletteSeafoamBackground2
+    },
+    'dark-green': {
+        color: tokens.colorPaletteDarkGreenForeground2,
+        backgroundColor: tokens.colorPaletteDarkGreenBackground2
+    },
+    'light-teal': {
+        color: tokens.colorPaletteLightTealForeground2,
+        backgroundColor: tokens.colorPaletteLightTealBackground2
+    },
+    teal: {
+        color: tokens.colorPaletteTealForeground2,
+        backgroundColor: tokens.colorPaletteTealBackground2
+    },
+    steel: {
+        color: tokens.colorPaletteSteelForeground2,
+        backgroundColor: tokens.colorPaletteSteelBackground2
+    },
+    blue: {
+        color: tokens.colorPaletteBlueForeground2,
+        backgroundColor: tokens.colorPaletteBlueBackground2
+    },
+    'royal-blue': {
+        color: tokens.colorPaletteRoyalBlueForeground2,
+        backgroundColor: tokens.colorPaletteRoyalBlueBackground2
+    },
+    cornflower: {
+        color: tokens.colorPaletteCornflowerForeground2,
+        backgroundColor: tokens.colorPaletteCornflowerBackground2
+    },
+    navy: {
+        color: tokens.colorPaletteNavyForeground2,
+        backgroundColor: tokens.colorPaletteNavyBackground2
+    },
+    lavender: {
+        color: tokens.colorPaletteLavenderForeground2,
+        backgroundColor: tokens.colorPaletteLavenderBackground2
+    },
+    purple: {
+        color: tokens.colorPalettePurpleForeground2,
+        backgroundColor: tokens.colorPalettePurpleBackground2
+    },
+    grape: {
+        color: tokens.colorPaletteGrapeForeground2,
+        backgroundColor: tokens.colorPaletteGrapeBackground2
+    },
+    lilac: {
+        color: tokens.colorPaletteLilacForeground2,
+        backgroundColor: tokens.colorPaletteLilacBackground2
+    },
+    pink: {
+        color: tokens.colorPalettePinkForeground2,
+        backgroundColor: tokens.colorPalettePinkBackground2
+    },
+    magenta: {
+        color: tokens.colorPaletteMagentaForeground2,
+        backgroundColor: tokens.colorPaletteMagentaBackground2
+    },
+    plum: {
+        color: tokens.colorPalettePlumForeground2,
+        backgroundColor: tokens.colorPalettePlumBackground2
+    },
+    beige: {
+        color: tokens.colorPaletteBeigeForeground2,
+        backgroundColor: tokens.colorPaletteBeigeBackground2
+    },
+    mink: {
+        color: tokens.colorPaletteMinkForeground2,
+        backgroundColor: tokens.colorPaletteMinkBackground2
+    },
+    platinum: {
+        color: tokens.colorPalettePlatinumForeground2,
+        backgroundColor: tokens.colorPalettePlatinumBackground2
+    },
+    anchor: {
+        color: tokens.colorPaletteAnchorForeground2,
+        backgroundColor: tokens.colorPaletteAnchorBackground2
+    }
+});
+const useRingColorStyles = makeStyles({
+    neutral: {
+        '::before': {
+            color: tokens.colorBrandStroke1
+        }
+    },
+    brand: {
+        '::before': {
+            color: tokens.colorBrandStroke1
+        }
+    },
+    'dark-red': {
+        '::before': {
+            color: tokens.colorPaletteDarkRedBorderActive
+        }
+    },
+    cranberry: {
+        '::before': {
+            color: tokens.colorPaletteCranberryBorderActive
+        }
+    },
+    red: {
+        '::before': {
+            color: tokens.colorPaletteRedBorderActive
+        }
+    },
+    pumpkin: {
+        '::before': {
+            color: tokens.colorPalettePumpkinBorderActive
+        }
+    },
+    peach: {
+        '::before': {
+            color: tokens.colorPalettePeachBorderActive
+        }
+    },
+    marigold: {
+        '::before': {
+            color: tokens.colorPaletteMarigoldBorderActive
+        }
+    },
+    gold: {
+        '::before': {
+            color: tokens.colorPaletteGoldBorderActive
+        }
+    },
+    brass: {
+        '::before': {
+            color: tokens.colorPaletteBrassBorderActive
+        }
+    },
+    brown: {
+        '::before': {
+            color: tokens.colorPaletteBrownBorderActive
+        }
+    },
+    forest: {
+        '::before': {
+            color: tokens.colorPaletteForestBorderActive
+        }
+    },
+    seafoam: {
+        '::before': {
+            color: tokens.colorPaletteSeafoamBorderActive
+        }
+    },
+    'dark-green': {
+        '::before': {
+            color: tokens.colorPaletteDarkGreenBorderActive
+        }
+    },
+    'light-teal': {
+        '::before': {
+            color: tokens.colorPaletteLightTealBorderActive
+        }
+    },
+    teal: {
+        '::before': {
+            color: tokens.colorPaletteTealBorderActive
+        }
+    },
+    steel: {
+        '::before': {
+            color: tokens.colorPaletteSteelBorderActive
+        }
+    },
+    blue: {
+        '::before': {
+            color: tokens.colorPaletteBlueBorderActive
+        }
+    },
+    'royal-blue': {
+        '::before': {
+            color: tokens.colorPaletteRoyalBlueBorderActive
+        }
+    },
+    cornflower: {
+        '::before': {
+            color: tokens.colorPaletteCornflowerBorderActive
+        }
+    },
+    navy: {
+        '::before': {
+            color: tokens.colorPaletteNavyBorderActive
+        }
+    },
+    lavender: {
+        '::before': {
+            color: tokens.colorPaletteLavenderBorderActive
+        }
+    },
+    purple: {
+        '::before': {
+            color: tokens.colorPalettePurpleBorderActive
+        }
+    },
+    grape: {
+        '::before': {
+            color: tokens.colorPaletteGrapeBorderActive
+        }
+    },
+    lilac: {
+        '::before': {
+            color: tokens.colorPaletteLilacBorderActive
+        }
+    },
+    pink: {
+        '::before': {
+            color: tokens.colorPalettePinkBorderActive
+        }
+    },
+    magenta: {
+        '::before': {
+            color: tokens.colorPaletteMagentaBorderActive
+        }
+    },
+    plum: {
+        '::before': {
+            color: tokens.colorPalettePlumBorderActive
+        }
+    },
+    beige: {
+        '::before': {
+            color: tokens.colorPaletteBeigeBorderActive
+        }
+    },
+    mink: {
+        '::before': {
+            color: tokens.colorPaletteMinkBorderActive
+        }
+    },
+    platinum: {
+        '::before': {
+            color: tokens.colorPalettePlatinumBorderActive
+        }
+    },
+    anchor: {
+        '::before': {
+            color: tokens.colorPaletteAnchorBorderActive
+        }
+    }
+});
+export const useAvatarStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, shape, active, activeAppearance, color } = state;
+    const rootClassName = useRootClassName();
+    const imageClassName = useImageClassName();
+    const iconInitialsClassName = useIconInitialsClassName();
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const colorStyles = useColorStyles();
+    const ringColorStyles = useRingColorStyles();
+    const rootClasses = [
+        rootClassName,
+        size !== 32 && sizeStyles[size]
+    ];
+    if (state.badge) {
+        rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
+    }
+    if (size <= 24) {
+        rootClasses.push(styles.textCaption2Strong);
+    } else if (size <= 28) {
+        rootClasses.push(styles.textCaption1Strong);
+    } else if (size <= 40) {
+    // Default text size included in useRootClassName
+    } else if (size <= 56) {
+        rootClasses.push(styles.textSubtitle2);
+    } else if (size <= 96) {
+        rootClasses.push(styles.textSubtitle1);
+    } else {
+        rootClasses.push(styles.textTitle3);
+    }
+    if (shape === 'square') {
+        if (size <= 24) {
+            rootClasses.push(styles.squareSmall);
+        } else if (size <= 48) {
+            rootClasses.push(styles.squareMedium);
+        } else if (size <= 72) {
+            rootClasses.push(styles.squareLarge);
+        } else {
+            rootClasses.push(styles.squareXLarge);
+        }
+    }
+    if (active === 'active' || active === 'inactive') {
+        rootClasses.push(styles.activeOrInactive);
+        if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
+            rootClasses.push(styles.ring, ringColorStyles[color]);
+            if (state.badge) {
+                rootClasses.push(styles.ringBadgeCutout);
+            }
+            if (size <= 48) {
+                rootClasses.push(styles.ringThick);
+            } else if (size <= 64) {
+                rootClasses.push(styles.ringThicker);
+            } else {
+                rootClasses.push(styles.ringThickest);
+            }
+        }
+        if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
+            rootClasses.push(styles.shadow);
+            if (size <= 28) {
+                rootClasses.push(styles.shadow4);
+            } else if (size <= 48) {
+                rootClasses.push(styles.shadow8);
+            } else if (size <= 64) {
+                rootClasses.push(styles.shadow16);
+            } else {
+                rootClasses.push(styles.shadow28);
+            }
+        }
+        // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
+        if (active === 'inactive') {
+            rootClasses.push(styles.inactive);
+        }
+    }
+    state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
+    if (state.badge) {
+        state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
+    }
+    if (state.image) {
+        state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
+    }
+    if (state.initials) {
+        state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
+    }
+    if (state.icon) {
+        let iconSizeClass;
+        if (size <= 16) {
+            iconSizeClass = styles.icon12;
+        } else if (size <= 24) {
+            iconSizeClass = styles.icon16;
+        } else if (size <= 40) {
+            iconSizeClass = styles.icon20;
+        } else if (size <= 48) {
+            iconSizeClass = styles.icon24;
+        } else if (size <= 56) {
+            iconSizeClass = styles.icon28;
+        } else if (size <= 72) {
+            iconSizeClass = styles.icon32;
+        } else {
+            iconSizeClass = styles.icon48;
+        }
+        state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { renderAvatarGroup_unstable } from './renderAvatarGroup';
+import { useAvatarGroup_unstable } from './useAvatarGroup';
+import { useAvatarGroupContextValues } from './useAvatarGroupContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';
+/**
+ * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+ * of individual Avatars in a spread, stack, or pie layout.
+ */ export const AvatarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatarGroup_unstable(props, ref);
+    const contextValues = useAvatarGroupContextValues(state);
+    useAvatarGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);
+    return renderAvatarGroup_unstable(state, contextValues);
+});
+AvatarGroup.displayName = 'AvatarGroup';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroup_unstable(props, ref);\n  const contextValues = useAvatarGroupContextValues(state);\n\n  useAvatarGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);\n\n  return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"names":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHook_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,gCAAgC;AAI9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAC7C,MAAME,gBAAgBR,4BAA4BO;IAElDL,8BAA8BK;IAE9BN,4BAA4B,iCAAiCM;IAE7D,OAAOT,2BAA2BS,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/AvatarGroup.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/AvatarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.types.ts"],"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\nexport type AvatarGroupBaseProps = Omit<AvatarGroupProps, 'size'>;\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupBaseState = Omit<AvatarGroupState, 'size'>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n  isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n  avatarGroup: AvatarGroupContextValue;\n};\n"],"names":[],"mappings":"AAqCA,WAEE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/index.js

@@ -0,0 +1,5 @@
+export { AvatarGroup } from './AvatarGroup';
+export { renderAvatarGroup_unstable } from './renderAvatarGroup';
+export { defaultAvatarGroupSize, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './useAvatarGroup';
+export { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';
+export { useAvatarGroupContextValues } from './useAvatarGroupContextValues';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/index.ts"],"sourcesContent":["export { AvatarGroup } from './AvatarGroup';\nexport type {\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n} from './AvatarGroup.types';\nexport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nexport { defaultAvatarGroupSize, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './useAvatarGroup';\nexport { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nexport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\n"],"names":["AvatarGroup","renderAvatarGroup_unstable","defaultAvatarGroupSize","useAvatarGroup_unstable","useAvatarGroupBase_unstable","avatarGroupClassNames","useAvatarGroupStyles_unstable","useAvatarGroupContextValues"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAU5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,sBAAsB,EAAEC,uBAAuB,EAAEC,2BAA2B,QAAQ,mBAAmB;AAChH,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC;AACrG,SAASC,2BAA2B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/renderAvatarGroup.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
+/**
+ * Render the final JSX of AvatarGroup
+ */ export const renderAvatarGroup_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(AvatarGroupProvider, {
+        value: contextValues.avatarGroup,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/renderAvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupSlots, AvatarGroupContextValues, AvatarGroupBaseState } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (\n  state: AvatarGroupBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupSlots>(state);\n\n  return (\n    <AvatarGroupProvider value={contextValues.avatarGroup}>\n      <state.root />\n    </AvatarGroupProvider>\n  );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEAJ,YAA8BG;IAE9B,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroup.js

@@ -0,0 +1,42 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render AvatarGroup.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,
+ * before being passed to renderAvatarGroup_unstable.
+ *
+ * @param props - props from this instance of AvatarGroup
+ * @param ref - reference to root HTMLElement of AvatarGroup
+ */ export const useAvatarGroup_unstable = (props, ref)=>{
+    const { size = defaultAvatarGroupSize, ...baseProps } = props;
+    const state = useAvatarGroupBase_unstable(baseProps, ref);
+    return {
+        size,
+        ...state
+    };
+};
+/**
+ * Create the base state to render AvatarGroup, without design-specific props.
+ *
+ * @param props - props from this instance of AvatarGroup
+ * @param ref - reference to root HTMLDivElement of AvatarGroup
+ */ export const useAvatarGroupBase_unstable = (props, ref)=>{
+    const { layout = 'spread' } = props;
+    const root = slot.always(getIntrinsicElementProps('div', {
+        role: 'group',
+        ...props,
+        ref
+    }), {
+        elementType: 'div'
+    });
+    return {
+        layout,
+        components: {
+            root: 'div'
+        },
+        root
+    };
+};
+export const defaultAvatarGroupSize = 32;

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n  AvatarGroupProps,\n  AvatarGroupState,\n} from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { size = defaultAvatarGroupSize, ...baseProps } = props;\n  const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n  props: AvatarGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n  const { layout = 'spread' } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'group',\n      ...props,\n      ref,\n    }),\n    { elementType: 'div' },\n  );\n  return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,KAAKW,MAAM,CACtBZ,yBAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEF,OAAO,MAAML,yBAAyB,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -0,0 +1,10 @@
+export const useAvatarGroupContextValues = (state)=>{
+    const { layout, size } = state;
+    const avatarGroup = {
+        layout,
+        size
+    };
+    return {
+        avatarGroup
+    };
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"mappings":"AAEA,OAAO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
+export const avatarGroupClassNames = {
+  root: 'fui-AvatarGroup'
+};
+/**
+ * Styles for the root slot.
+ */
+const useStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    qhf8xq: "f10pi13n"
+  },
+  pie: {
+    Bgl5zvf: "f1uz6ud1",
+    De3pzq: "f1ganh6p",
+    By8wz76: "f1wgxgin"
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}"],
+  m: [["@media (forced-colors: active){.f1wgxgin{background-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the AvatarGroup slots based on the state
+ */
+export const useAvatarGroupStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    layout,
+    size
+  } = state;
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","By8wz76","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n    root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const useStyles = makeStyles({\n    base: {\n        display: 'inline-flex',\n        position: 'relative'\n    },\n    pie: {\n        clipPath: 'circle(50%)',\n        backgroundColor: tokens.colorTransparentStroke,\n        '@media (forced-colors: active)': {\n            backgroundColor: 'CanvasText'\n        }\n    }\n});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { layout, size } = state;\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,kCAAkC;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,CAAC,CAAC;EAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACxK,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js

@@ -0,0 +1,32 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
+export const avatarGroupClassNames = {
+    root: 'fui-AvatarGroup'
+};
+/**
+ * Styles for the root slot.
+ */ const useStyles = makeStyles({
+    base: {
+        display: 'inline-flex',
+        position: 'relative'
+    },
+    pie: {
+        clipPath: 'circle(50%)',
+        backgroundColor: tokens.colorTransparentStroke,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'CanvasText'
+        }
+    }
+});
+/**
+ * Apply styling to the AvatarGroup slots based on the state
+ */ export const useAvatarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const { layout, size } = state;
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n  root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  pie: {\n    clipPath: 'circle(50%)',\n    backgroundColor: tokens.colorTransparentStroke,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n  'use no memo';\n\n  const { layout, size } = state;\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n\n  state.root.className = mergeClasses(\n    avatarGroupClassNames.root,\n    styles.base,\n    layout === 'pie' && sizeStyles[size],\n    layout === 'pie' && styles.pie,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,aAAa,QAAQ,mCAAmC;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,OAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,aAAahB;IAEnBY,MAAMV,IAAI,CAACe,SAAS,GAAGnB,aACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/AvatarGroupItem.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
+import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';
+/**
+ * The AvatarGroupItem component represents a single person or entity.
+ * AvatarGroupItem should only be used in an AvatarGroup component.
+ */ export const AvatarGroupItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatarGroupItem_unstable(props, ref);
+    useAvatarGroupItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);
+    return renderAvatarGroupItem_unstable(state);
+});
+AvatarGroupItem.displayName = 'AvatarGroupItem';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/AvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n  const state = useAvatarGroupItem_unstable(props, ref);\n\n  useAvatarGroupItemStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n  return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/AvatarGroupItem.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\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\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":"AAyCA,WAA0E"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/index.js

@@ -0,0 +1,4 @@
+export { AvatarGroupItem } from './AvatarGroupItem';
+export { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
+export { useAvatarGroupItem_unstable, useAvatarGroupItemBase_unstable } from './useAvatarGroupItem';
+export { avatarGroupItemClassNames, useAvatarGroupItemStyles_unstable, useGroupChildClassName } from './useAvatarGroupItemStyles.styles';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export { AvatarGroupItem } from './AvatarGroupItem';\nexport type {\n  AvatarGroupItemProps,\n  AvatarGroupItemSlots,\n  AvatarGroupItemState,\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n} from './AvatarGroupItem.types';\nexport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nexport { useAvatarGroupItem_unstable, useAvatarGroupItemBase_unstable } from './useAvatarGroupItem';\nexport {\n  avatarGroupItemClassNames,\n  useAvatarGroupItemStyles_unstable,\n  useGroupChildClassName,\n} from './useAvatarGroupItemStyles.styles';\n"],"names":["AvatarGroupItem","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","avatarGroupItemClassNames","useAvatarGroupItemStyles_unstable","useGroupChildClassName"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAQpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SACEC,yBAAyB,EACzBC,iCAAiC,EACjCC,sBAAsB,QACjB,oCAAoC"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/renderAvatarGroupItem.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of AvatarGroupItem
+ */ export const renderAvatarGroupItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.avatar, {}),
+            state.isOverflowItem && /*#__PURE__*/ _jsx(state.overflowLabel, {})
+        ]
+    });
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarGroupItemBaseState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemBaseState): JSXElement => {\n  assertSlots<AvatarGroupItemSlots>(state);\n\n  return (\n    <state.root>\n      <state.avatar />\n      {state.isOverflowItem && <state.overflowLabel />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;YACZF,MAAMG,cAAc,kBAAI,KAACH,MAAMI,aAAa;;;AAGnD,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -0,0 +1,88 @@
+'use client';
+import * as React from 'react';
+import { Avatar } from '../Avatar/Avatar';
+import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
+import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
+import { slot } from '@fluentui/react-utilities';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */ export const useAvatarGroupItem_unstable = (props, ref)=>{
+    const state = useAvatarGroupItemBase_unstable(props, ref);
+    const groupSize = useAvatarGroupContext_unstable((ctx)=>ctx.size);
+    const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
+    return {
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            avatar: Avatar
+        },
+        avatar: slot.always(props.avatar, {
+            defaultProps: {
+                size,
+                color: 'colorful',
+                ...state.avatar
+            },
+            elementType: Avatar
+        })
+    };
+};
+/**
+ * Create the base state required to render AvatarGroupItem, without default slot props or component types.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ * @returns AvatarGroupItem state without default slot props or component types
+ */ export const useAvatarGroupItemBase_unstable = (props, ref)=>{
+    const groupIsOverflow = useAvatarGroupContext_unstable((ctx)=>ctx.isOverflow);
+    const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
+    // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
+    const { style, className, overflowLabel, ...avatarSlotProps } = props;
+    const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
+    if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
+        // eslint-disable-next-line no-console
+        console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
+    }
+    return {
+        isOverflowItem: groupIsOverflow,
+        layout,
+        components: {
+            root: groupIsOverflow ? 'li' : 'div',
+            avatar: 'span',
+            overflowLabel: 'span'
+        },
+        root: slot.always(props.root, {
+            defaultProps: {
+                style,
+                className
+            },
+            elementType: groupIsOverflow ? 'li' : 'div'
+        }),
+        avatar: slot.always(props.avatar, {
+            defaultProps: {
+                ref,
+                ...avatarSlotProps
+            },
+            elementType: 'span'
+        }),
+        overflowLabel: slot.always(overflowLabel, {
+            defaultProps: {
+                // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
+                'aria-hidden': true,
+                children: props.name
+            },
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js

@@ -0,0 +1,261 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useSizeStyles } from '../../Avatar';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+export const avatarGroupItemClassNames = {
+  root: 'fui-AvatarGroupItem',
+  avatar: 'fui-AvatarGroupItem__avatar',
+  overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
+};
+const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    Bt984gj: "f122n59",
+    mc9l5x: "ftuwxu6",
+    Bnnss6s: "fi64zpg",
+    qhf8xq: "f10pi13n"
+  },
+  overflowItem: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f16d74zd"
+  },
+  nonOverflowItem: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9"
+  }
+}, {
+  d: [".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".fi64zpg{flex-shrink:0;}", ".f10pi13n{position:relative;}", [".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}", {
+    p: -1
+  }], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the avatar slot
+ */
+const useAvatarStyles = /*#__PURE__*/__styles({
+  nonOverflowItem: {
+    qhf8xq: "f1euv43f"
+  },
+  pie: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fokr779"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}", [".fokr779{border-radius:0;}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the label slot
+ */
+const useOverflowLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    Frg6f3: ["foyynoy", "f1vcna3q"],
+    sj55zd: "f19n0e5",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  }
+}, {
+  d: [".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+/**
+ * Styles for the stack layout
+ */
+const useStackStyles = /*#__PURE__*/__styles({
+  thick: {
+    E5pizo: "foiuzp5"
+  },
+  thicker: {
+    E5pizo: "f1x6o7w7"
+  },
+  thickest: {
+    E5pizo: "f2aml1u"
+  },
+  xxs: {
+    jhia2w: ["f1cjco14", "f13dxjc9"]
+  },
+  xs: {
+    jhia2w: ["f15p6bln", "f1bab3ru"]
+  },
+  s: {
+    jhia2w: ["f1v53ncc", "f17pu8r8"]
+  },
+  l: {
+    jhia2w: ["flv48ch", "fnh1ydj"]
+  }
+}, {
+  d: [".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}", ".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}", ".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"]
+});
+/**
+ * Styles for the spread layout
+ */
+const useSpreadStyles = /*#__PURE__*/__styles({
+  s: {
+    jhia2w: ["f7lhxv7", "f6ou2b0"]
+  },
+  mNudge: {
+    jhia2w: ["f1h0okno", "fnnqava"]
+  },
+  m: {
+    jhia2w: ["f1wkt588", "f1maio5g"]
+  },
+  l: {
+    jhia2w: ["f1l333zn", "f1r41m4c"]
+  },
+  xl: {
+    jhia2w: ["fahr13a", "f2n7rbo"]
+  }
+}, {
+  d: [".f7lhxv7:not(:first-child){margin-left:var(--spacingHorizontalS);}", ".f6ou2b0:not(:first-child){margin-right:var(--spacingHorizontalS);}", ".f1h0okno:not(:first-child){margin-left:var(--spacingHorizontalMNudge);}", ".fnnqava:not(:first-child){margin-right:var(--spacingHorizontalMNudge);}", ".f1wkt588:not(:first-child){margin-left:var(--spacingHorizontalM);}", ".f1maio5g:not(:first-child){margin-right:var(--spacingHorizontalM);}", ".f1l333zn:not(:first-child){margin-left:var(--spacingHorizontalL);}", ".f1r41m4c:not(:first-child){margin-right:var(--spacingHorizontalL);}", ".fahr13a:not(:first-child){margin-left:var(--spacingHorizontalXL);}", ".f2n7rbo:not(:first-child){margin-right:var(--spacingHorizontalXL);}"]
+});
+/**
+ * Styles for the pie layout
+ */
+const usePieStyles = /*#__PURE__*/__styles({
+  base: {
+    qhf8xq: "f1euv43f"
+  },
+  slices: {
+    B3gf25r: "f16m7w7k",
+    Be2twx7: ["f1o4hhgz", "fb4gjrz"],
+    Bvaow4n: "f1pgb5nx",
+    Gpecfs: ["fugirid", "f4sk99m"],
+    bhabj1: "fjreaf3",
+    B7rc6i7: ["f1k4vw81", "f1w1xcy7"],
+    Bwrfys5: "f1ef8vxk",
+    Bwuzm9m: ["f1x2qbfv", "f1xwf4nz"],
+    fflka: "ff6xuso",
+    do7bja: "fzpvk6c",
+    Be8zqhl: "f4onu7f",
+    Bij0kh0: ["f1ydfez1", "fjensob"],
+    Bwexnyt: "f1yv732j",
+    Bhe5x6o: "fchq2fj",
+    B3kv7bh: "ff5binh"
+  },
+  rtlSlices: {
+    B3gf25r: "f5vdl61",
+    Bvaow4n: "f1bnra92",
+    bhabj1: "f4ibo7t",
+    Bwrfys5: "f17heuis",
+    Bwuzm9m: ["f64f2ud", "f1yjglu3"],
+    Be8zqhl: "fa6l61x",
+    Bij0kh0: ["f1w2396a", "f14ab3yo"]
+  },
+  thick: {
+    uiicq7: "fnyfzln"
+  },
+  thicker: {
+    uiicq7: "f1xdzzot"
+  },
+  thickest: {
+    uiicq7: "f1auhru5"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right:0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
+});
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */
+export const useAvatarGroupItemStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    isOverflowItem,
+    layout,
+    size
+  } = state;
+  const {
+    dir
+  } = useFluent();
+  const avatarStyles = useAvatarStyles();
+  const overflowLabelStyles = useOverflowLabelStyles();
+  const pieStyles = usePieStyles();
+  const rootStyles = useRootStyles();
+  const sizeStyles = useSizeStyles();
+  const groupChildClassName = useGroupChildClassName(layout, size);
+  const rootClasses = [rootStyles.base];
+  if (!isOverflowItem) {
+    rootClasses.push(rootStyles.nonOverflowItem);
+    rootClasses.push(groupChildClassName);
+    rootClasses.push(sizeStyles[size]);
+    if (layout === 'pie') {
+      rootClasses.push(pieStyles.base);
+      if (size < 56) {
+        rootClasses.push(pieStyles.thick);
+      } else if (size < 72) {
+        rootClasses.push(pieStyles.thicker);
+      } else {
+        rootClasses.push(pieStyles.thickest);
+      }
+      rootClasses.push(pieStyles.slices);
+      if (dir === 'rtl') {
+        rootClasses.push(pieStyles.rtlSlices);
+      }
+    }
+  } else {
+    rootClasses.push(rootStyles.overflowItem);
+  }
+  state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
+  state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
+  if (state.overflowLabel) {
+    state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
+  }
+  return state;
+};
+/**
+ * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
+ * needed for each layout.
+ */
+export const useGroupChildClassName = (layout, size) => {
+  const stackStyles = useStackStyles();
+  const spreadStyles = useSpreadStyles();
+  const layoutClasses = [];
+  if (size) {
+    if (layout === 'stack') {
+      if (size < 56) {
+        layoutClasses.push(stackStyles.thick);
+      } else if (size < 72) {
+        layoutClasses.push(stackStyles.thicker);
+      } else {
+        layoutClasses.push(stackStyles.thickest);
+      }
+      if (size < 24) {
+        layoutClasses.push(stackStyles.xxs);
+      } else if (size < 48) {
+        layoutClasses.push(stackStyles.xs);
+      } else if (size < 96) {
+        layoutClasses.push(stackStyles.s);
+      } else {
+        layoutClasses.push(stackStyles.l);
+      }
+    } else if (layout === 'spread') {
+      if (size < 20) {
+        layoutClasses.push(spreadStyles.s);
+      } else if (size < 32) {
+        layoutClasses.push(spreadStyles.mNudge);
+      } else if (size < 64) {
+        layoutClasses.push(spreadStyles.l);
+      } else {
+        layoutClasses.push(spreadStyles.xl);
+      }
+    }
+  }
+  return mergeClasses(...layoutClasses);
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js

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

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
+import { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
+import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';
+/**
+ * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
+ */ export const AvatarGroupPopover = (props)=>{
+    const state = useAvatarGroupPopover_unstable(props);
+    const contextValues = useAvatarGroupPopoverContextValues_unstable(state);
+    useAvatarGroupPopoverStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);
+    return renderAvatarGroupPopover_unstable(state, contextValues);
+};
+AvatarGroupPopover.displayName = 'AvatarGroupPopover';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map

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

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/index.js

@@ -0,0 +1,5 @@
+export { AvatarGroupPopover } from './AvatarGroupPopover';
+export { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
+export { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';
+export { avatarGroupPopoverClassNames, useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';
+export { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverSlots,\n  AvatarGroupPopoverState,\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';\nexport {\n  avatarGroupPopoverClassNames,\n  useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAQ1D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,8BAA8B,EAAEC,kCAAkC,QAAQ,0BAA0B;AAC7G,SACEC,4BAA4B,EAC5BC,oCAAoC,QAC/B,uCAAuC;AAC9C,SAASC,2CAA2C,QAAQ,uCAAuC"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js

@@ -0,0 +1,25 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
+import { assertSlots } from '@fluentui/react-utilities';
+import { PopoverTrigger } from '@fluentui/react-popover';
+/**
+ * Render the final JSX of AvatarGroupPopover
+ */ export const renderAvatarGroupPopover_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                disableButtonEnhancement: true,
+                children: /*#__PURE__*/ _jsx(state.tooltip, {
+                    children: /*#__PURE__*/ _jsx(state.triggerButton, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(state.popoverSurface, {
+                children: /*#__PURE__*/ _jsx(AvatarGroupProvider, {
+                    value: contextValues.avatarGroup,
+                    children: /*#__PURE__*/ _jsx(state.content, {})
+                })
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -0,0 +1,130 @@
+'use client';
+import * as React from 'react';
+import { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
+import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
+import { useControllableState, slot } from '@fluentui/react-utilities';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
+import { Popover, PopoverSurface } from '@fluentui/react-popover';
+import { Tooltip } from '@fluentui/react-tooltip';
+/**
+ * Create the state required to render AvatarGroupPopover.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,
+ * before being passed to renderAvatarGroupPopover_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupPopover
+ */ export const useAvatarGroupPopover_unstable = (props)=>{
+    var _useAvatarGroupContext_unstable;
+    const size = (_useAvatarGroupContext_unstable = useAvatarGroupContext_unstable((ctx)=>ctx.size)) !== null && _useAvatarGroupContext_unstable !== void 0 ? _useAvatarGroupContext_unstable : defaultAvatarGroupSize;
+    const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
+    const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;
+    const state = useAvatarGroupPopoverBase_unstable({
+        indicator,
+        ...baseProps
+    });
+    if (layout === 'pie') {
+        state.triggerButton.children = null;
+    } else if (indicator === 'icon') {
+        state.triggerButton.children = /*#__PURE__*/ React.createElement(MoreHorizontalRegular, null);
+    }
+    return {
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            root: Popover,
+            popoverSurface: PopoverSurface,
+            tooltip: Tooltip
+        },
+        root: slot.always(state.root, {
+            elementType: Popover
+        }),
+        popoverSurface: slot.always(props.popoverSurface, {
+            defaultProps: state.popoverSurface,
+            elementType: PopoverSurface
+        }),
+        tooltip: slot.always(props.tooltip, {
+            defaultProps: state.tooltip,
+            elementType: Tooltip
+        })
+    };
+};
+/**
+ * Handles popover open/closed state, indicator display, and slot configuration.
+ * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.
+ *
+ * @param props - AvatarGroupPopover props
+ * @returns AvatarGroupPopover state
+ */ export const useAvatarGroupPopoverBase_unstable = (props)=>{
+    const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
+    const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;
+    const [popoverOpen, setPopoverOpen] = useControllableState({
+        state: props.open,
+        defaultState: props.defaultOpen,
+        initialState: false
+    });
+    const handleOnPopoverChange = (e, data)=>{
+        var _restOfProps_onOpenChange;
+        (_restOfProps_onOpenChange = restOfProps.onOpenChange) === null || _restOfProps_onOpenChange === void 0 ? void 0 : _restOfProps_onOpenChange.call(restOfProps, e, data);
+        setPopoverOpen(data.open);
+    };
+    let triggerButtonChildren;
+    if (layout === 'pie') {
+        triggerButtonChildren = null;
+    } else if (indicator === 'count') {
+        triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
+    }
+    return {
+        count,
+        indicator,
+        layout,
+        popoverOpen,
+        components: {
+            root: Popover,
+            triggerButton: 'button',
+            content: 'ul',
+            popoverSurface: PopoverSurface,
+            tooltip: Tooltip
+        },
+        root: slot.always({
+            // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.
+            children: /*#__PURE__*/ React.createElement(React.Fragment, null),
+            size: 'small',
+            trapFocus: true,
+            ...restOfProps,
+            open: popoverOpen,
+            onOpenChange: handleOnPopoverChange
+        }, {
+            elementType: 'div'
+        }),
+        triggerButton: slot.always(props.triggerButton, {
+            defaultProps: {
+                children: triggerButtonChildren,
+                type: 'button'
+            },
+            elementType: 'button'
+        }),
+        content: slot.always(props.content, {
+            defaultProps: {
+                children,
+                role: 'list'
+            },
+            elementType: 'ul'
+        }),
+        popoverSurface: slot.always(props.popoverSurface, {
+            defaultProps: {
+                'aria-label': 'Overflow',
+                tabIndex: 0
+            },
+            elementType: 'div'
+        }),
+        tooltip: slot.always(props.tooltip, {
+            defaultProps: {
+                content: 'View more people.',
+                relationship: 'label'
+            },
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js

@@ -0,0 +1,9 @@
+export const useAvatarGroupPopoverContextValues_unstable = (state)=>{
+    const avatarGroup = {
+        isOverflow: true,
+        size: 24
+    };
+    return {
+        avatarGroup
+    };
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"mappings":"AAGA,OAAO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js

@@ -0,0 +1,311 @@
+'use client';
+
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';
+import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
+export const avatarGroupPopoverClassNames = {
+  root: 'fui-AvatarGroupPopover',
+  content: 'fui-AvatarGroupPopover__content',
+  popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
+  tooltip: 'fui-AvatarGroupPopover__tooltip',
+  triggerButton: 'fui-AvatarGroupPopover__triggerButton'
+};
+/**
+ * Styles for the content slot.
+ */
+const useContentStyles = /*#__PURE__*/__styles({
+  base: {
+    dclx09: "ftrb29c",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1s184ao",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62"
+  }
+}, {
+  d: [".ftrb29c{list-style-type:none;}", [".f1s184ao{margin:0;}", {
+    p: -1
+  }], [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}"]
+});
+/**
+ * Styles for the popoverSurface slot.
+ */
+const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
+  base: {
+    Bxyxcbc: "fopcw2o",
+    sshi5w: "f1n5o1gx",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f19r5mr9",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1f5q0n8",
+    a9b677: "f13dwy2t"
+  }
+}, {
+  d: [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", [".f19r5mr9{overflow:hidden scroll;}", {
+    p: -1
+  }], [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f13dwy2t{width:220px;}"]
+});
+/**
+ * Styles for the triggerButton slot.
+ */
+const useTriggerButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    qhf8xq: "f10pi13n",
+    Bnnss6s: "fi64zpg",
+    Brf1p80: "f4d9j23",
+    Bt984gj: "f122n59",
+    sj55zd: "f19n0e5",
+    De3pzq: "fxugw4r",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai",
+    Bcq6wej: "fx5js7k",
+    Jcjdmf: ["f17aelzi", "f2tn0l4"],
+    sc4o1m: "f14ood81",
+    Bosien3: ["f2tn0l4", "f17aelzi"]
+  },
+  pie: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    sj55zd: "f44pa96"
+  },
+  focusIndicator: {
+    Byu6kyc: 0,
+    n8qw10: 0,
+    Bbjhlyh: 0,
+    i2cumq: 0,
+    Bunx835: 0,
+    Bdrgwmp: 0,
+    mqozju: 0,
+    lbo84a: 0,
+    Bksnhdo: 0,
+    Bci5o5g: 0,
+    u5e7qz: 0,
+    Bn40d3w: 0,
+    B7b6zxw: 0,
+    B8q5s1w: 0,
+    B5gfjzb: 0,
+    Bbcte9g: 0,
+    Bqz3imu: "f1j9b7x8",
+    g9k6zt: "f1nev41a"
+  },
+  states: {
+    Bi91k9c: "feu1g3u",
+    Jwef8y: "f1knas48",
+    Bgoe8wy: "fvcxoqz",
+    Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
+    oetu4i: "f1xlaoq0",
+    gg5e9n: ["f1m52nbi", "f1ub3y4t"],
+    lj723h: "f1g4hkjv",
+    ecr2s2: "fb40n2d",
+    B6oc9vd: "fvs00aa",
+    ak43y8: ["f1assf6x", "f4ruux4"],
+    wmxk5l: "fumykes",
+    B50zh58: ["f4ruux4", "f1assf6x"]
+  },
+  selected: {
+    sj55zd: "f14nttnl",
+    De3pzq: "f1nfm20t",
+    g2u3we: "f1ly1fcm",
+    h3c5rm: ["fi8bssc", "fj6btzu"],
+    B9xav0g: "f1s9tnsa",
+    zhjwy3: ["fj6btzu", "fi8bssc"]
+  },
+  icon12: {
+    Be2twd7: "f1ugzwwg"
+  },
+  icon16: {
+    Be2twd7: "f4ybsrx"
+  },
+  icon20: {
+    Be2twd7: "fe5j1ua"
+  },
+  icon24: {
+    Be2twd7: "f1rt2boy"
+  },
+  icon28: {
+    Be2twd7: "f24l1pt"
+  },
+  icon32: {
+    Be2twd7: "ffl51b"
+  },
+  icon48: {
+    Be2twd7: "f18m8u13"
+  },
+  caption2Strong: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  caption1Strong: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm"
+  },
+  body1Strong: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi"
+  },
+  subtitle2: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  },
+  subtitle1: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f1pp30po",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f106mvju"
+  },
+  title3: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f1x0m3f5",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fb86gi6"
+  },
+  borderThin: {
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"]
+  },
+  borderThick: {
+    B4j52fo: "f18zi460",
+    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
+    Bn0qgzm: "fmklw6v",
+    ibv6hh: ["fsfsuhs", "f1wpluaz"]
+  },
+  borderThicker: {
+    B4j52fo: "fgx37oo",
+    Bekrc4i: ["f130t4y6", "f1efpmoh"],
+    Bn0qgzm: "fv51ejd",
+    ibv6hh: ["f1efpmoh", "f130t4y6"]
+  },
+  borderThickest: {
+    B4j52fo: "fwn6jck",
+    Bekrc4i: ["figl7jc", "f1g0iy8l"],
+    Bn0qgzm: "f1b8shu7",
+    ibv6hh: ["f1g0iy8l", "figl7jc"]
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{flex-shrink:0;}", ".f4d9j23{justify-content:center;}", ".f122n59{align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
+  m: [["@media (forced-colors: active){.fx5js7k{border-top-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f17aelzi{border-right-color:CanvasText;}.f2tn0l4{border-left-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14ood81{border-bottom-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
+  a: [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
+});
+/**
+ * Apply styling to the AvatarGroupPopover slots based on the state
+ */
+export const useAvatarGroupPopoverStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    indicator,
+    size,
+    layout,
+    popoverOpen
+  } = state;
+  const sizeStyles = useSizeStyles();
+  const triggerButtonStyles = useTriggerButtonStyles();
+  const contentStyles = useContentStyles();
+  const popoverSurfaceStyles = usePopoverSurfaceStyles();
+  const groupChildClassName = useGroupChildClassName(layout, size);
+  const triggerButtonClasses = [];
+  if (size < 36) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThin);
+  } else if (size < 56) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThick);
+  } else if (size < 72) {
+    triggerButtonClasses.push(triggerButtonStyles.borderThicker);
+  } else {
+    triggerButtonClasses.push(triggerButtonStyles.borderThickest);
+  }
+  if (indicator === 'count') {
+    if (size <= 24) {
+      triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
+    } else if (size <= 28) {
+      triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
+    } else if (size <= 40) {
+      triggerButtonClasses.push(triggerButtonStyles.body1Strong);
+    } else if (size <= 56) {
+      triggerButtonClasses.push(triggerButtonStyles.subtitle2);
+    } else if (size <= 96) {
+      triggerButtonClasses.push(triggerButtonStyles.subtitle1);
+    } else {
+      triggerButtonClasses.push(triggerButtonStyles.title3);
+    }
+  } else {
+    if (size <= 16) {
+      triggerButtonClasses.push(triggerButtonStyles.icon12);
+    } else if (size <= 24) {
+      triggerButtonClasses.push(triggerButtonStyles.icon16);
+    } else if (size <= 40) {
+      triggerButtonClasses.push(triggerButtonStyles.icon20);
+    } else if (size <= 48) {
+      triggerButtonClasses.push(triggerButtonStyles.icon24);
+    } else if (size <= 56) {
+      triggerButtonClasses.push(triggerButtonStyles.icon28);
+    } else if (size <= 72) {
+      triggerButtonClasses.push(triggerButtonStyles.icon32);
+    } else {
+      triggerButtonClasses.push(triggerButtonStyles.icon48);
+    }
+  }
+  state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
+  state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+  state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
+  return state;
+};

node_modules/@fluentui/react-avatar/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js

@@ -0,0 +1,189 @@
+'use client';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';
+import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
+export const avatarGroupPopoverClassNames = {
+    root: 'fui-AvatarGroupPopover',
+    content: 'fui-AvatarGroupPopover__content',
+    popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
+    tooltip: 'fui-AvatarGroupPopover__tooltip',
+    triggerButton: 'fui-AvatarGroupPopover__triggerButton'
+};
+/**
+ * Styles for the content slot.
+ */ const useContentStyles = makeStyles({
+    base: {
+        listStyleType: 'none',
+        margin: '0',
+        padding: '0',
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+/**
+ * Styles for the popoverSurface slot.
+ */ const usePopoverSurfaceStyles = makeStyles({
+    base: {
+        maxHeight: '220px',
+        minHeight: '80px',
+        overflow: 'hidden scroll',
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+        width: '220px'
+    }
+});
+/**
+ * Styles for the triggerButton slot.
+ */ const useTriggerButtonStyles = makeStyles({
+    base: {
+        display: 'inline-flex',
+        position: 'relative',
+        flexShrink: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: tokens.colorNeutralForeground1,
+        backgroundColor: tokens.colorNeutralBackground1,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        borderRadius: tokens.borderRadiusCircular,
+        ...shorthands.borderStyle('solid'),
+        padding: '0',
+        // Match color to Avatar's outline color.
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('CanvasText')
+        }
+    },
+    pie: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorTransparentStroke),
+        color: 'transparent'
+    },
+    focusIndicator: createCustomFocusIndicatorStyle({
+        border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        outlineStyle: 'none'
+    }),
+    states: {
+        '&:hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)
+        },
+        '&:active': {
+            color: tokens.colorNeutralForeground1Pressed,
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)
+        }
+    },
+    selected: {
+        color: tokens.colorNeutralForeground1Selected,
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
+    },
+    icon12: {
+        fontSize: '12px'
+    },
+    icon16: {
+        fontSize: '16px'
+    },
+    icon20: {
+        fontSize: '20px'
+    },
+    icon24: {
+        fontSize: '24px'
+    },
+    icon28: {
+        fontSize: '28px'
+    },
+    icon32: {
+        fontSize: '32px'
+    },
+    icon48: {
+        fontSize: '48px'
+    },
+    caption2Strong: {
+        ...typographyStyles.caption2Strong
+    },
+    caption1Strong: {
+        ...typographyStyles.caption1Strong
+    },
+    body1Strong: {
+        ...typographyStyles.body1Strong
+    },
+    subtitle2: {
+        ...typographyStyles.subtitle2
+    },
+    subtitle1: {
+        ...typographyStyles.subtitle1
+    },
+    title3: {
+        ...typographyStyles.title3
+    },
+    borderThin: {
+        ...shorthands.borderWidth(tokens.strokeWidthThin)
+    },
+    borderThick: {
+        ...shorthands.borderWidth(tokens.strokeWidthThick)
+    },
+    borderThicker: {
+        ...shorthands.borderWidth(tokens.strokeWidthThicker)
+    },
+    borderThickest: {
+        ...shorthands.borderWidth(tokens.strokeWidthThickest)
+    }
+});
+/**
+ * Apply styling to the AvatarGroupPopover slots based on the state
+ */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{
+    'use no memo';
+    const { indicator, size, layout, popoverOpen } = state;
+    const sizeStyles = useSizeStyles();
+    const triggerButtonStyles = useTriggerButtonStyles();
+    const contentStyles = useContentStyles();
+    const popoverSurfaceStyles = usePopoverSurfaceStyles();
+    const groupChildClassName = useGroupChildClassName(layout, size);
+    const triggerButtonClasses = [];
+    if (size < 36) {
+        triggerButtonClasses.push(triggerButtonStyles.borderThin);
+    } else if (size < 56) {
+        triggerButtonClasses.push(triggerButtonStyles.borderThick);
+    } else if (size < 72) {
+        triggerButtonClasses.push(triggerButtonStyles.borderThicker);
+    } else {
+        triggerButtonClasses.push(triggerButtonStyles.borderThickest);
+    }
+    if (indicator === 'count') {
+        if (size <= 24) {
+            triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
+        } else if (size <= 28) {
+            triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
+        } else if (size <= 40) {
+            triggerButtonClasses.push(triggerButtonStyles.body1Strong);
+        } else if (size <= 56) {
+            triggerButtonClasses.push(triggerButtonStyles.subtitle2);
+        } else if (size <= 96) {
+            triggerButtonClasses.push(triggerButtonStyles.subtitle1);
+        } else {
+            triggerButtonClasses.push(triggerButtonStyles.title3);
+        }
+    } else {
+        if (size <= 16) {
+            triggerButtonClasses.push(triggerButtonStyles.icon12);
+        } else if (size <= 24) {
+            triggerButtonClasses.push(triggerButtonStyles.icon16);
+        } else if (size <= 40) {
+            triggerButtonClasses.push(triggerButtonStyles.icon20);
+        } else if (size <= 48) {
+            triggerButtonClasses.push(triggerButtonStyles.icon24);
+        } else if (size <= 56) {
+            triggerButtonClasses.push(triggerButtonStyles.icon28);
+        } else if (size <= 72) {
+            triggerButtonClasses.push(triggerButtonStyles.icon32);
+        } else {
+            triggerButtonClasses.push(triggerButtonStyles.icon48);
+        }
+    }
+    state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
+    state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+    state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
+    return state;
+};

node_modules/@fluentui/react-avatar/lib/contexts/AvatarContext.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+const avatarContext = React.createContext(undefined);
+const avatarContextDefaultValue = {};
+/**
+ * @internal
+ */ export const AvatarContextProvider = avatarContext.Provider;
+/**
+ * @internal
+ */ export const useAvatarContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(avatarContext)) !== null && _React_useContext !== void 0 ? _React_useContext : avatarContextDefaultValue;
+};

node_modules/@fluentui/react-avatar/lib/contexts/AvatarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/AvatarContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarShape, AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  shape?: AvatarShape;\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 = (): AvatarContextValue => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;CAEC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAA0BP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;EAA0B"}

node_modules/@fluentui/react-avatar/lib/contexts/AvatarGroupContext.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+/**
+ * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine
+ * default values of some props.
+ */ export const AvatarGroupContext = createContext(undefined);
+const avatarGroupContextDefaultValue = {};
+export const AvatarGroupProvider = AvatarGroupContext.Provider;
+export const useAvatarGroupContext_unstable = (selector)=>useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue)=>selector(ctx));

node_modules/@fluentui/react-avatar/lib/contexts/AvatarGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,mCAAmC;AAItG;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}

node_modules/@fluentui/react-avatar/lib/contexts/index.js

@@ -0,0 +1,2 @@
+export { AvatarGroupContext, AvatarGroupProvider, useAvatarGroupContext_unstable } from './AvatarGroupContext';
+export { AvatarContextProvider, useAvatarContext } from './AvatarContext';

node_modules/@fluentui/react-avatar/lib/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { AvatarGroupContext, AvatarGroupProvider, useAvatarGroupContext_unstable } from './AvatarGroupContext';\nexport type { AvatarContextValue } from './AvatarContext';\nexport { AvatarContextProvider, useAvatarContext } from './AvatarContext';\n"],"names":["AvatarGroupContext","AvatarGroupProvider","useAvatarGroupContext_unstable","AvatarContextProvider","useAvatarContext"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,EAAEC,8BAA8B,QAAQ,uBAAuB;AAE/G,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}

node_modules/@fluentui/react-avatar/lib/index.js

@@ -0,0 +1,6 @@
+export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useAvatarBase_unstable } from './Avatar';
+export { getInitials, partitionAvatarGroupItems } from './utils/index';
+export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './AvatarGroup';
+export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, useAvatarGroupItemBase_unstable } from './AvatarGroupItem';
+export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopoverBase_unstable } from './AvatarGroupPopover';
+export { AvatarContextProvider, AvatarGroupProvider, useAvatarContext, useAvatarGroupContext_unstable } from './contexts/index';

node_modules/@fluentui/react-avatar/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useAvatarBase_unstable,\n} from './Avatar';\nexport type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarSlots,\n  AvatarState,\n  AvatarShape,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSize,\n  AvatarBaseProps,\n  AvatarBaseState,\n} 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  useAvatarGroupBase_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n  useAvatarGroupItemBase_unstable,\n} from './AvatarGroupItem';\nexport type {\n  AvatarGroupItemProps,\n  AvatarGroupItemSlots,\n  AvatarGroupItemState,\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n} from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopoverBase_unstable,\n} from './AvatarGroupPopover';\nexport type {\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverSlots,\n  AvatarGroupPopoverState,\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverBase_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAalB,SAASC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAEvE,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,gBAAgB;AAUvB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,oBAAoB;AAQ3B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,8BAA8B,EAC9BC,2CAA2C,EAC3CC,oCAAoC,EACpCC,kCAAkC,QAC7B,uBAAuB;AAQ9B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB,mBAAmB"}

node_modules/@fluentui/react-avatar/lib/utils/getInitials.js

@@ -0,0 +1,90 @@
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */ /**
+ * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+ *  so for example, (xyz) [xyz] {xyz} all would be ignored
+ */ const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+/**
+ * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+ * Applies after unwanted enclosures have been removed.
+ * Note: the range starts at \uE000 (not \uD800) to avoid matching surrogate code units, which would break
+ * supplementary Unicode characters (encoded as surrogate pairs in UTF-16) such as GB18030-2022 extension characters.
+ */ const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uE000-\uFFFF]/g;
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */ const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+/** Regular expression matching one or more spaces. */ const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+/**
+ * Regular expression matching languages for which we currently don't support initials.
+ * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.
+ * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
+ * Japanese: Hiragana, Katakana.
+ * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs.
+ * Note: Supplementary CJK characters (GB18030-2022 extension characters in Ext B-I) are intentionally not listed
+ * here so they can be rendered as initials.
+ */ const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]/;
+function getFirstCodePoint(value) {
+    if (!value) {
+        return '';
+    }
+    const codePoint = value.codePointAt(0);
+    return codePoint === undefined ? '' : String.fromCodePoint(codePoint);
+}
+function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
+    let initials = '';
+    const splits = displayName.split(' ');
+    if (splits.length !== 0) {
+        // Use code point-aware helper to correctly handle supplementary characters (e.g. GB18030-2022 extension chars)
+        // that are encoded as surrogate pairs; charAt(0) would only return half of such a character.
+        initials += getFirstCodePoint(splits[0]).toUpperCase();
+    }
+    if (!firstInitialOnly) {
+        if (splits.length === 2) {
+            initials += getFirstCodePoint(splits[1]).toUpperCase();
+        } else if (splits.length === 3) {
+            initials += getFirstCodePoint(splits[2]).toUpperCase();
+        }
+    }
+    if (isRtl && [
+        ...initials
+    ].length > 1) {
+        const chars = [
+            ...initials
+        ];
+        return chars[1] + chars[0];
+    }
+    return initials;
+}
+function cleanupDisplayName(displayName) {
+    displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+    displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
+    displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+    displayName = displayName.trim();
+    return displayName;
+}
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param options - Extra options to control the behavior of getInitials
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ *
+ * @internal
+ */ export function getInitials(displayName, isRtl, options) {
+    if (!displayName) {
+        return '';
+    }
+    displayName = cleanupDisplayName(displayName);
+    // Check only the first code point against UNSUPPORTED_TEXT_REGEX so that names starting with a supported
+    // character (e.g. GB18030-2022 extension characters) produce an initial even when the rest of the string
+    // contains BMP CJK characters that would otherwise trigger the regex.
+    const firstCodePoint = getFirstCodePoint(displayName);
+    if (UNSUPPORTED_TEXT_REGEX.test(firstCodePoint) || !(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
+        return '';
+    }
+    return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
+}

node_modules/@fluentui/react-avatar/lib/utils/index.js

@@ -0,0 +1,2 @@
+export { getInitials } from './getInitials';
+export { partitionAvatarGroupItems } from './partitionAvatarGroupItems';

node_modules/@fluentui/react-avatar/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"],"names":["getInitials","partitionAvatarGroupItems"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,yBAAyB,QAAQ,8BAA8B"}

node_modules/@fluentui/react-avatar/lib/utils/partitionAvatarGroupItems.js

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

node_modules/@fluentui/react-avatar/lib/utils/partitionAvatarGroupItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/partitionAvatarGroupItems.ts"],"sourcesContent":["export type PartitionAvatarGroupItemsOptions<T> = {\n  items: readonly T[];\n  layout?: 'spread' | 'stack' | 'pie';\n  maxInlineItems?: number;\n};\n\nexport type PartitionAvatarGroupItems<T> = {\n  inlineItems: readonly T[];\n  overflowItems?: readonly T[];\n};\n\n/**\n * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.\n *\n * @param options - Configure the partition options\n *\n * @returns Two arrays split into inline items and overflow items based on maxInlineItems.\n */\nexport const partitionAvatarGroupItems = <T>(\n  options: PartitionAvatarGroupItemsOptions<T>,\n): PartitionAvatarGroupItems<T> => {\n  const { items } = options;\n  const isPie = options.layout === 'pie';\n\n  if (isPie) {\n    return {\n      inlineItems: items.slice(0, 3),\n      overflowItems: items.length > 0 ? items : undefined,\n    };\n  }\n\n  const maxInlineItems = options.maxInlineItems ?? 5;\n  const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));\n  const overflowItems = items.slice(0, inlineCount);\n\n  return {\n    inlineItems: items.slice(inlineCount),\n    overflowItems: overflowItems.length > 0 ? overflowItems : undefined,\n  };\n};\n"],"names":["partitionAvatarGroupItems","options","items","isPie","layout","inlineItems","slice","overflowItems","length","undefined","maxInlineItems","inlineCount"],"mappings":"AAWA;;;;;;CAMC,GACD,OAAO,MAAMA,4BAA4B,CACvCC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,MAAME,QAAQF,QAAQG,MAAM,KAAK;IAEjC,IAAID,OAAO;QACT,OAAO;YACLE,aAAaH,MAAMI,KAAK,CAAC,GAAG;YAC5BC,eAAeL,MAAMM,MAAM,GAAG,IAAIN,QAAQO;QAC5C;IACF;QAEuBR;IAAvB,MAAMS,iBAAiBT,CAAAA,0BAAAA,QAAQS,cAAc,cAAtBT,qCAAAA,0BAA0B;IACjD,MAAMU,cAAc,CAAED,CAAAA,iBAAkBR,CAAAA,MAAMM,MAAM,GAAGE,iBAAiB,IAAI,CAAA,CAAC;IAC7E,MAAMH,gBAAgBL,MAAMI,KAAK,CAAC,GAAGK;IAErC,OAAO;QACLN,aAAaH,MAAMI,KAAK,CAACK;QACzBJ,eAAeA,cAAcC,MAAM,GAAG,IAAID,gBAAgBE;IAC5D;AACF,EAAE"}