feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/PresenceBadge.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PresenceBadge", {
+    enumerable: true,
+    get: function() {
+        return PresenceBadge;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePresenceBadge = require("./usePresenceBadge");
+const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _Badge = require("../../Badge");
+const PresenceBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePresenceBadge.usePresenceBadge_unstable)(props, ref);
+    (0, _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePresenceBadgeStyles_unstable')(state);
+    return (0, _Badge.renderBadge_unstable)(state);
+});
+PresenceBadge.displayName = 'PresenceBadge';

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n  const state = usePresenceBadge_unstable(props, ref);\n\n  usePresenceBadgeStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n  return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;8CACf,kCAAkC;qCACtC,kCAAkC;uBACzC,cAAc;AAO5C,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCN,gDAAAA,EAA4B,mCAAmCM;IAE/D,WAAOL,2BAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n  | 'busy'\n  | 'out-of-office'\n  | 'away'\n  | 'available'\n  | 'offline'\n  | 'do-not-disturb'\n  | 'unknown'\n  | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n  Pick<BadgeProps, 'size'> & {\n    /**\n     * Represents several status\n     * @default available\n     */\n    status?: PresenceBadgeStatus;\n\n    /**\n     * Modifies the display to indicate that the user is out of office.\n     * This can be combined with any status to display an out-of-office version of that status\n     * @default false\n     */\n    outOfOffice?: boolean;\n  };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n  BadgeState &\n  Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n\nexport type PresenceBadgeBaseProps = Omit<PresenceBadgeProps, 'size'>;\n\nexport type PresenceBadgeBaseState = Omit<PresenceBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/index.js

@@ -0,0 +1,64 @@
+"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, {
+    PresenceBadge: function() {
+        return _PresenceBadge.PresenceBadge;
+    },
+    presenceAvailableFilled: function() {
+        return _presenceIcons.presenceAvailableFilled;
+    },
+    presenceAvailableRegular: function() {
+        return _presenceIcons.presenceAvailableRegular;
+    },
+    presenceAwayFilled: function() {
+        return _presenceIcons.presenceAwayFilled;
+    },
+    presenceAwayRegular: function() {
+        return _presenceIcons.presenceAwayRegular;
+    },
+    presenceBadgeClassNames: function() {
+        return _usePresenceBadgeStylesstyles.presenceBadgeClassNames;
+    },
+    presenceBlockedRegular: function() {
+        return _presenceIcons.presenceBlockedRegular;
+    },
+    presenceBusyFilled: function() {
+        return _presenceIcons.presenceBusyFilled;
+    },
+    presenceDndFilled: function() {
+        return _presenceIcons.presenceDndFilled;
+    },
+    presenceDndRegular: function() {
+        return _presenceIcons.presenceDndRegular;
+    },
+    presenceOfflineRegular: function() {
+        return _presenceIcons.presenceOfflineRegular;
+    },
+    presenceOofRegular: function() {
+        return _presenceIcons.presenceOofRegular;
+    },
+    presenceUnknownRegular: function() {
+        return _presenceIcons.presenceUnknownRegular;
+    },
+    usePresenceBadgeBase_unstable: function() {
+        return _usePresenceBadge.usePresenceBadgeBase_unstable;
+    },
+    usePresenceBadgeStyles_unstable: function() {
+        return _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable;
+    },
+    usePresenceBadge_unstable: function() {
+        return _usePresenceBadge.usePresenceBadge_unstable;
+    }
+});
+const _PresenceBadge = require("./PresenceBadge");
+const _usePresenceBadge = require("./usePresenceBadge");
+const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
+const _presenceIcons = require("./presenceIcons");

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceBadge/index.ts"],"sourcesContent":["export { PresenceBadge } from './PresenceBadge';\nexport type {\n  PresenceBadgeBaseProps,\n  PresenceBadgeBaseState,\n  PresenceBadgeProps,\n  PresenceBadgeState,\n  PresenceBadgeStatus,\n} from './PresenceBadge.types';\nexport { usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './usePresenceBadge';\nexport { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nexport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceAwayRegular,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\n"],"names":["PresenceBadge","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular"],"mappings":";;;;;;;;;;;IAASA;2CAAa;;;eAWpBK,sCAAuB;;;eACvBC,uCAAwB;;;eACxBC,iCAAkB;;;eAClBC,kCAAmB;;;eALZL,qDAAuB;;;eAM9BM,qCAAsB;;;eACtBC,iCAAkB;;;eAClBC,gCAAiB;;;eACjBC,iCAAkB;;IAClBC;oDAAsB;;;eACtBC,iCAAkB;;;eAClBC,qCAAsB;;;eAbYb,+CAA6B;;;eAC/BE,6DAA+B;;;eADxDH,2CAAyB;;;+BARJ,kBAAkB;kCAQyB,qBAAqB;8CACrB,kCAAkC;+BAapG,kBAAkB"}

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/presenceIcons.js

@@ -0,0 +1,180 @@
+"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, {
+    presenceAvailableFilled: function() {
+        return presenceAvailableFilled;
+    },
+    presenceAvailableRegular: function() {
+        return presenceAvailableRegular;
+    },
+    presenceAwayFilled: function() {
+        return presenceAwayFilled;
+    },
+    presenceAwayRegular: function() {
+        return presenceAwayRegular;
+    },
+    presenceBlockedRegular: function() {
+        return presenceBlockedRegular;
+    },
+    presenceBusyFilled: function() {
+        return presenceBusyFilled;
+    },
+    presenceDndFilled: function() {
+        return presenceDndFilled;
+    },
+    presenceDndRegular: function() {
+        return presenceDndRegular;
+    },
+    presenceOfflineRegular: function() {
+        return presenceOfflineRegular;
+    },
+    presenceOofRegular: function() {
+        return presenceOofRegular;
+    },
+    presenceUnknownRegular: function() {
+        return presenceUnknownRegular;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacticons = require("@fluentui/react-icons");
+const presenceAwayRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceAway10Regular,
+    'extra-small': _reacticons.PresenceAway10Regular,
+    small: _reacticons.PresenceAway12Regular,
+    medium: _reacticons.PresenceAway16Regular,
+    large: _reacticons.PresenceAway20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceAway20Regular
+};
+const presenceAwayFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceAway10Filled,
+    'extra-small': _reacticons.PresenceAway10Filled,
+    small: _reacticons.PresenceAway12Filled,
+    medium: _reacticons.PresenceAway16Filled,
+    large: _reacticons.PresenceAway20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceAway20Filled
+};
+const presenceAvailableRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceAvailable10Regular,
+    'extra-small': _reacticons.PresenceAvailable10Regular,
+    small: _reacticons.PresenceAvailable12Regular,
+    medium: _reacticons.PresenceAvailable16Regular,
+    large: _reacticons.PresenceAvailable20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceAvailable20Regular
+};
+const presenceAvailableFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceAvailable10Filled,
+    'extra-small': _reacticons.PresenceAvailable10Filled,
+    small: _reacticons.PresenceAvailable12Filled,
+    medium: _reacticons.PresenceAvailable16Filled,
+    large: _reacticons.PresenceAvailable20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceAvailable20Filled
+};
+const presenceBlockedRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceBlocked10Regular,
+    'extra-small': _reacticons.PresenceBlocked10Regular,
+    small: _reacticons.PresenceBlocked12Regular,
+    medium: _reacticons.PresenceBlocked16Regular,
+    large: _reacticons.PresenceBlocked20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceBlocked20Regular
+};
+const presenceBusyFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceBusy10Filled,
+    'extra-small': _reacticons.PresenceBusy10Filled,
+    small: _reacticons.PresenceBusy12Filled,
+    medium: _reacticons.PresenceBusy16Filled,
+    large: _reacticons.PresenceBusy20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceBusy20Filled
+};
+const presenceDndFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceDnd10Filled,
+    'extra-small': _reacticons.PresenceDnd10Filled,
+    small: _reacticons.PresenceDnd12Filled,
+    medium: _reacticons.PresenceDnd16Filled,
+    large: _reacticons.PresenceDnd20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceDnd20Filled
+};
+const presenceDndRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceDnd10Regular,
+    'extra-small': _reacticons.PresenceDnd10Regular,
+    small: _reacticons.PresenceDnd12Regular,
+    medium: _reacticons.PresenceDnd16Regular,
+    large: _reacticons.PresenceDnd20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceDnd20Regular
+};
+const presenceOofRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceOof10Regular,
+    'extra-small': _reacticons.PresenceOof10Regular,
+    small: _reacticons.PresenceOof12Regular,
+    medium: _reacticons.PresenceOof16Regular,
+    large: _reacticons.PresenceOof20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceOof20Regular
+};
+const presenceOfflineRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceOffline10Regular,
+    'extra-small': _reacticons.PresenceOffline10Regular,
+    small: _reacticons.PresenceOffline12Regular,
+    medium: _reacticons.PresenceOffline16Regular,
+    large: _reacticons.PresenceOffline20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceOffline20Regular
+};
+const presenceUnknownRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: _reacticons.PresenceUnknown10Regular,
+    'extra-small': _reacticons.PresenceUnknown10Regular,
+    small: _reacticons.PresenceUnknown12Regular,
+    medium: _reacticons.PresenceUnknown16Regular,
+    large: _reacticons.PresenceUnknown20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': _reacticons.PresenceUnknown20Regular
+};

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/usePresenceBadge.js

@@ -0,0 +1,96 @@
+'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, {
+    DEFAULT_STRINGS: function() {
+        return DEFAULT_STRINGS;
+    },
+    usePresenceBadgeBase_unstable: function() {
+        return usePresenceBadgeBase_unstable;
+    },
+    usePresenceBadge_unstable: function() {
+        return usePresenceBadge_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _presenceIcons = require("./presenceIcons");
+const _index = require("../Badge/index");
+const iconMap = (status, outOfOffice, size)=>{
+    switch(status){
+        case 'available':
+            return outOfOffice ? _presenceIcons.presenceAvailableRegular[size] : _presenceIcons.presenceAvailableFilled[size];
+        case 'away':
+            return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceAwayFilled[size];
+        case 'blocked':
+            return _presenceIcons.presenceBlockedRegular[size];
+        case 'busy':
+            return outOfOffice ? _presenceIcons.presenceUnknownRegular[size] : _presenceIcons.presenceBusyFilled[size];
+        case 'do-not-disturb':
+            return outOfOffice ? _presenceIcons.presenceDndRegular[size] : _presenceIcons.presenceDndFilled[size];
+        case 'offline':
+            return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceOfflineRegular[size];
+        case 'out-of-office':
+            return _presenceIcons.presenceOofRegular[size];
+        case 'unknown':
+            return _presenceIcons.presenceUnknownRegular[size];
+    }
+};
+const DEFAULT_STRINGS = {
+    busy: 'busy',
+    'out-of-office': 'out of office',
+    away: 'away',
+    available: 'available',
+    offline: 'offline',
+    'do-not-disturb': 'do not disturb',
+    unknown: 'unknown',
+    blocked: 'blocked'
+};
+const usePresenceBadge_unstable = (props, ref)=>{
+    const { size = 'medium', outOfOffice = false, ...baseProps } = props;
+    var _props_status;
+    const status = (_props_status = props.status) !== null && _props_status !== void 0 ? _props_status : 'available';
+    const IconElement = iconMap(status, outOfOffice, size);
+    const state = {
+        ...usePresenceBadgeBase_unstable(baseProps, ref),
+        appearance: 'filled',
+        color: 'brand',
+        shape: 'circular',
+        size,
+        outOfOffice
+    };
+    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(IconElement, null);
+    }
+    return state;
+};
+const usePresenceBadgeBase_unstable = (props, ref)=>{
+    const { status = 'available', outOfOffice = false } = props;
+    const statusText = DEFAULT_STRINGS[status];
+    const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';
+    const state = {
+        ...(0, _index.useBadgeBase_unstable)({
+            'aria-label': statusText + oofText,
+            role: 'img',
+            ...props,
+            icon: _reactutilities.slot.optional(props.icon, {
+                renderByDefault: true,
+                elementType: 'span'
+            })
+        }, ref),
+        status,
+        outOfOffice
+    };
+    return state;
+};

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js

@@ -0,0 +1,119 @@
+'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, {
+    presenceBadgeClassNames: function() {
+        return presenceBadgeClassNames;
+    },
+    usePresenceBadgeStyles_unstable: function() {
+        return usePresenceBadgeStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const presenceBadgeClassNames = {
+    root: 'fui-PresenceBadge',
+    icon: 'fui-PresenceBadge__icon'
+};
+const getIsBusy = (status)=>{
+    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
+        return true;
+    }
+    return false;
+};
+const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r832ydo", null, [
+    ".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"
+]);
+const useIconClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r11ag4qr", null, [
+    ".r11ag4qr{display:flex;margin:-1px;}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    statusBusy: {
+        sj55zd: "fvi85wt"
+    },
+    statusAway: {
+        sj55zd: "f14k8a89"
+    },
+    statusAvailable: {
+        sj55zd: "fqa5hgp"
+    },
+    statusOffline: {
+        sj55zd: "f11d4kpn"
+    },
+    statusOutOfOffice: {
+        sj55zd: "fdce8r3"
+    },
+    statusUnknown: {
+        sj55zd: "f11d4kpn"
+    },
+    outOfOffice: {
+        sj55zd: "fr0bkrk"
+    },
+    outOfOfficeAvailable: {
+        sj55zd: "fqa5hgp"
+    },
+    outOfOfficeBusy: {
+        sj55zd: "fvi85wt"
+    },
+    outOfOfficeUnknown: {
+        sj55zd: "f11d4kpn"
+    },
+    tiny: {
+        Bubjx69: "f9ikmtg",
+        a9b677: "f16dn6v3",
+        B2eet1l: "f1w2irj7",
+        B5pe6w7: "fab5kbq",
+        p4uzdd: "f1ms1d91"
+    },
+    large: {
+        Bubjx69: "f9ikmtg",
+        a9b677: "f64fuq3",
+        B5pe6w7: "f1vfi1yj",
+        p4uzdd: "f15s34gz"
+    },
+    extraLarge: {
+        Bubjx69: "f9ikmtg",
+        a9b677: "f1w9dchk",
+        B5pe6w7: "f14efy9b",
+        p4uzdd: "fhipgdu"
+    }
+}, {
+    d: [
+        ".fvi85wt{color:var(--colorPaletteRedBackground3);}",
+        ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}",
+        ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".fdce8r3{color:var(--colorPaletteBerryForeground3);}",
+        ".fr0bkrk{color:var(--colorNeutralBackground1);}",
+        ".f9ikmtg{aspect-ratio:1;}",
+        ".f16dn6v3{width:6px;}",
+        ".f1w2irj7{background-clip:unset;}",
+        ".fab5kbq svg{width:6px!important;}",
+        ".f1ms1d91 svg{height:6px!important;}",
+        ".f64fuq3{width:20px;}",
+        ".f1vfi1yj svg{width:20px!important;}",
+        ".f15s34gz svg{height:20px!important;}",
+        ".f1w9dchk{width:28px;}",
+        ".f14efy9b svg{width:28px!important;}",
+        ".fhipgdu svg{height:28px!important;}"
+    ]
+});
+const usePresenceBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const iconClassName = useIconClassName();
+    const styles = useStyles();
+    const isBusy = getIsBusy(state.status);
+    state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-badge/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js

@@ -0,0 +1,121 @@
+'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, {
+    presenceBadgeClassNames: function() {
+        return presenceBadgeClassNames;
+    },
+    usePresenceBadgeStyles_unstable: function() {
+        return usePresenceBadgeStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const presenceBadgeClassNames = {
+    root: 'fui-PresenceBadge',
+    icon: 'fui-PresenceBadge__icon'
+};
+const getIsBusy = (status)=>{
+    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
+        return true;
+    }
+    return false;
+};
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
+    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
+    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.
+    // (* except size="tiny", where backgroundClip is unset)
+    padding: '1px',
+    backgroundClip: 'content-box'
+});
+const useIconClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    margin: '-1px'
+});
+const useStyles = (0, _react.makeStyles)({
+    statusBusy: {
+        color: _reacttheme.tokens.colorPaletteRedBackground3
+    },
+    statusAway: {
+        color: _reacttheme.tokens.colorPaletteMarigoldBackground3
+    },
+    statusAvailable: {
+        color: _reacttheme.tokens.colorPaletteLightGreenForeground3
+    },
+    statusOffline: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    statusOutOfOffice: {
+        color: _reacttheme.tokens.colorPaletteBerryForeground3
+    },
+    statusUnknown: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    outOfOffice: {
+        color: _reacttheme.tokens.colorNeutralBackground1
+    },
+    outOfOfficeAvailable: {
+        color: _reacttheme.tokens.colorPaletteLightGreenForeground3
+    },
+    outOfOfficeBusy: {
+        color: _reacttheme.tokens.colorPaletteRedBackground3
+    },
+    outOfOfficeUnknown: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    // Icons are not resizeable, and these sizes are currently missing
+    // use `!important` to size the currently available icons to the missing ones
+    //
+    tiny: {
+        aspectRatio: '1',
+        width: '6px',
+        backgroundClip: 'unset',
+        '& svg': {
+            width: '6px !important',
+            height: '6px !important'
+        }
+    },
+    large: {
+        aspectRatio: '1',
+        width: '20px',
+        '& svg': {
+            width: '20px !important',
+            height: '20px !important'
+        }
+    },
+    extraLarge: {
+        aspectRatio: '1',
+        width: '28px',
+        '& svg': {
+            width: '28px !important',
+            height: '28px !important'
+        }
+    }
+});
+const usePresenceBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const iconClassName = useIconClassName();
+    const styles = useStyles();
+    const isBusy = getIsBusy(state.status);
+    state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
+    }
+    return state;
+};