feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AvatarGroupPopover", {
+    enumerable: true,
+    get: function() {
+        return AvatarGroupPopover;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
+const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
+const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
+const AvatarGroupPopover = (props)=>{
+    const state = (0, _useAvatarGroupPopover.useAvatarGroupPopover_unstable)(props);
+    const contextValues = (0, _useAvatarGroupPopoverContextValues.useAvatarGroupPopoverContextValues_unstable)(state);
+    (0, _useAvatarGroupPopoverStylesstyles.useAvatarGroupPopoverStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAvatarGroupPopoverStyles_unstable')(state);
+    return (0, _renderAvatarGroupPopover.renderAvatarGroupPopover_unstable)(state, contextValues);
+};
+AvatarGroupPopover.displayName = 'AvatarGroupPopover';

node_modules/@fluentui/react-avatar/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;oDACnB,uCAAuC;qCACvD,kCAAkC;uCAC/B,0BAA0B;mDACpB,uCAAuC;AAMrF,MAAMM,qBAAwDC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-avatar/lib-commonjs/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":";;;;;iEAAuB,QAAQ"}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AvatarGroupPopover: function() {
+        return _AvatarGroupPopover.AvatarGroupPopover;
+    },
+    avatarGroupPopoverClassNames: function() {
+        return _useAvatarGroupPopoverStylesstyles.avatarGroupPopoverClassNames;
+    },
+    renderAvatarGroupPopover_unstable: function() {
+        return _renderAvatarGroupPopover.renderAvatarGroupPopover_unstable;
+    },
+    useAvatarGroupPopoverBase_unstable: function() {
+        return _useAvatarGroupPopover.useAvatarGroupPopoverBase_unstable;
+    },
+    useAvatarGroupPopoverContextValues_unstable: function() {
+        return _useAvatarGroupPopoverContextValues.useAvatarGroupPopoverContextValues_unstable;
+    },
+    useAvatarGroupPopoverStyles_unstable: function() {
+        return _useAvatarGroupPopoverStylesstyles.useAvatarGroupPopoverStyles_unstable;
+    },
+    useAvatarGroupPopover_unstable: function() {
+        return _useAvatarGroupPopover.useAvatarGroupPopover_unstable;
+    }
+});
+const _AvatarGroupPopover = require("./AvatarGroupPopover");
+const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
+const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
+const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
+const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");

node_modules/@fluentui/react-avatar/lib-commonjs/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":";;;;;;;;;;;IAASA;qDAAkB;;IAWzBI;8EAA4B;;;eAHrBH,2DAAiC;;;eACDE,yDAAkC;;;eAKlEG,+EAA2C;;;eAFlDD,uEAAoC;;;eAH7BH,qDAA8B;;;oCATJ,uBAAuB;0CAQR,6BAA6B;uCACI,0BAA0B;mDAItG,uCAAuC;oDACc,uCAAuC"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderAvatarGroupPopover_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderAvatarGroupPopover_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactpopover = require("@fluentui/react-popover");
+const renderAvatarGroupPopover_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpopover.PopoverTrigger, {
+                disableButtonEnhancement: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.tooltip, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.triggerButton, {})
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.popoverSurface, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AvatarGroupContext.AvatarGroupProvider, {
+                    value: contextValues.avatarGroup,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {})
+                })
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-avatar/lib-commonjs/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":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,oCAAoC;gCAG5C,4BAA4B;8BAEzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}

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

@@ -0,0 +1,136 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useAvatarGroupPopoverBase_unstable: function() {
+        return useAvatarGroupPopoverBase_unstable;
+    },
+    useAvatarGroupPopover_unstable: function() {
+        return useAvatarGroupPopover_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
+const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacticons = require("@fluentui/react-icons");
+const _reactpopover = require("@fluentui/react-popover");
+const _reacttooltip = require("@fluentui/react-tooltip");
+const useAvatarGroupPopover_unstable = (props)=>{
+    var _useAvatarGroupContext_unstable;
+    const size = (_useAvatarGroupContext_unstable = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.size)) !== null && _useAvatarGroupContext_unstable !== void 0 ? _useAvatarGroupContext_unstable : _useAvatarGroup.defaultAvatarGroupSize;
+    const layout = (0, _AvatarGroupContext.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(_reacticons.MoreHorizontalRegular, null);
+    }
+    return {
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            root: _reactpopover.Popover,
+            popoverSurface: _reactpopover.PopoverSurface,
+            tooltip: _reacttooltip.Tooltip
+        },
+        root: _reactutilities.slot.always(state.root, {
+            elementType: _reactpopover.Popover
+        }),
+        popoverSurface: _reactutilities.slot.always(props.popoverSurface, {
+            defaultProps: state.popoverSurface,
+            elementType: _reactpopover.PopoverSurface
+        }),
+        tooltip: _reactutilities.slot.always(props.tooltip, {
+            defaultProps: state.tooltip,
+            elementType: _reacttooltip.Tooltip
+        })
+    };
+};
+const useAvatarGroupPopoverBase_unstable = (props)=>{
+    const layout = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.layout);
+    const { indicator = 'count', count = _react.Children.count(props.children), children, ...restOfProps } = props;
+    const [popoverOpen, setPopoverOpen] = (0, _reactutilities.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: _reactpopover.Popover,
+            triggerButton: 'button',
+            content: 'ul',
+            popoverSurface: _reactpopover.PopoverSurface,
+            tooltip: _reacttooltip.Tooltip
+        },
+        root: _reactutilities.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: _reactutilities.slot.always(props.triggerButton, {
+            defaultProps: {
+                children: triggerButtonChildren,
+                type: 'button'
+            },
+            elementType: 'button'
+        }),
+        content: _reactutilities.slot.always(props.content, {
+            defaultProps: {
+                children,
+                role: 'list'
+            },
+            elementType: 'ul'
+        }),
+        popoverSurface: _reactutilities.slot.always(props.popoverSurface, {
+            defaultProps: {
+                'aria-label': 'Overflow',
+                tabIndex: 0
+            },
+            elementType: 'div'
+        }),
+        tooltip: _reactutilities.slot.always(props.tooltip, {
+            defaultProps: {
+                content: 'View more people.',
+                relationship: 'label'
+            },
+            elementType: 'div'
+        })
+    };
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAvatarGroupPopoverContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAvatarGroupPopoverContextValues_unstable;
+    }
+});
+const useAvatarGroupPopoverContextValues_unstable = (state)=>{
+    const avatarGroup = {
+        isOverflow: true,
+        size: 24
+    };
+    return {
+        avatarGroup
+    };
+};

node_modules/@fluentui/react-avatar/lib-commonjs/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":";;;;;;;;;;AAGO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}

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

@@ -0,0 +1,509 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    avatarGroupPopoverClassNames: function() {
+        return avatarGroupPopoverClassNames;
+    },
+    useAvatarGroupPopoverStyles_unstable: function() {
+        return useAvatarGroupPopoverStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
+const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
+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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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);}"
+    ]
+});
+const useAvatarGroupPopoverStyles_unstable = (state)=>{
+    'use no memo';
+    const { indicator, size, layout, popoverOpen } = state;
+    const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
+    const triggerButtonStyles = useTriggerButtonStyles();
+    const contentStyles = useContentStyles();
+    const popoverSurfaceStyles = usePopoverSurfaceStyles();
+    const groupChildClassName = (0, _useAvatarGroupItemStylesstyles.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 = (0, _react.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 = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+    state.popoverSurface.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
+    return state;
+};

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

@@ -0,0 +1,205 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    avatarGroupPopoverClassNames: function() {
+        return avatarGroupPopoverClassNames;
+    },
+    useAvatarGroupPopoverStyles_unstable: function() {
+        return useAvatarGroupPopoverStyles_unstable;
+    }
+});
+const _reacttabster = require("@fluentui/react-tabster");
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
+const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
+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 = (0, _react.makeStyles)({
+    base: {
+        listStyleType: 'none',
+        margin: '0',
+        padding: '0',
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+/**
+ * Styles for the popoverSurface slot.
+ */ const usePopoverSurfaceStyles = (0, _react.makeStyles)({
+    base: {
+        maxHeight: '220px',
+        minHeight: '80px',
+        overflow: 'hidden scroll',
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`,
+        width: '220px'
+    }
+});
+/**
+ * Styles for the triggerButton slot.
+ */ const useTriggerButtonStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'inline-flex',
+        position: 'relative',
+        flexShrink: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        ..._react.shorthands.borderStyle('solid'),
+        padding: '0',
+        // Match color to Avatar's outline color.
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('CanvasText')
+        }
+    },
+    pie: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke),
+        color: 'transparent'
+    },
+    focusIndicator: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+        outlineStyle: 'none'
+    }),
+    states: {
+        '&:hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover)
+        },
+        '&:active': {
+            color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed)
+        }
+    },
+    selected: {
+        color: _reacttheme.tokens.colorNeutralForeground1Selected,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
+    },
+    icon12: {
+        fontSize: '12px'
+    },
+    icon16: {
+        fontSize: '16px'
+    },
+    icon20: {
+        fontSize: '20px'
+    },
+    icon24: {
+        fontSize: '24px'
+    },
+    icon28: {
+        fontSize: '28px'
+    },
+    icon32: {
+        fontSize: '32px'
+    },
+    icon48: {
+        fontSize: '48px'
+    },
+    caption2Strong: {
+        ..._reacttheme.typographyStyles.caption2Strong
+    },
+    caption1Strong: {
+        ..._reacttheme.typographyStyles.caption1Strong
+    },
+    body1Strong: {
+        ..._reacttheme.typographyStyles.body1Strong
+    },
+    subtitle2: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    subtitle1: {
+        ..._reacttheme.typographyStyles.subtitle1
+    },
+    title3: {
+        ..._reacttheme.typographyStyles.title3
+    },
+    borderThin: {
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
+    },
+    borderThick: {
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick)
+    },
+    borderThicker: {
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker)
+    },
+    borderThickest: {
+        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThickest)
+    }
+});
+const useAvatarGroupPopoverStyles_unstable = (state)=>{
+    'use no memo';
+    const { indicator, size, layout, popoverOpen } = state;
+    const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
+    const triggerButtonStyles = useTriggerButtonStyles();
+    const contentStyles = useContentStyles();
+    const popoverSurfaceStyles = usePopoverSurfaceStyles();
+    const groupChildClassName = (0, _useAvatarGroupItemStylesstyles.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 = (0, _react.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 = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+    state.popoverSurface.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
+    return state;
+};