feat: Fluent UI Outlook Lite + connections mockup

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;
+};