feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { usePresenceBadge_unstable } from './usePresenceBadge';
+import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { renderBadge_unstable } from '../../Badge';
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */ export const PresenceBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePresenceBadge_unstable(props, ref);
+    usePresenceBadgeStyles_unstable(state);
+    useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);
+    return renderBadge_unstable(state);
+});
+PresenceBadge.displayName = 'PresenceBadge';

node_modules/@fluentui/react-badge/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,cAAc;AAInD;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CN,gCAAgCO;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-badge/lib/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":"AAmCA,WAAyG"}

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

@@ -0,0 +1,4 @@
+export { PresenceBadge } from './PresenceBadge';
+export { usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './usePresenceBadge';
+export { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';
+export { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';

node_modules/@fluentui/react-badge/lib/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":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAQhD,SAASC,yBAAyB,EAAEC,6BAA6B,QAAQ,qBAAqB;AAC9F,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,kBAAkB"}

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

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { PresenceAvailable10Regular, PresenceAvailable12Regular, PresenceAvailable16Regular, PresenceAvailable20Regular, PresenceAvailable10Filled, PresenceAvailable12Filled, PresenceAvailable16Filled, PresenceAvailable20Filled, PresenceAway10Regular, PresenceAway12Regular, PresenceAway16Regular, PresenceAway20Regular, PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, PresenceAway20Filled, PresenceBlocked10Regular, PresenceBlocked12Regular, PresenceBlocked16Regular, PresenceBlocked20Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, PresenceBusy20Filled, PresenceDnd10Regular, PresenceDnd12Regular, PresenceDnd16Regular, PresenceDnd20Regular, PresenceDnd10Filled, PresenceDnd12Filled, PresenceDnd16Filled, PresenceDnd20Filled, PresenceOof10Regular, PresenceOof12Regular, PresenceOof16Regular, PresenceOof20Regular, PresenceOffline10Regular, PresenceOffline12Regular, PresenceOffline16Regular, PresenceOffline20Regular, PresenceUnknown10Regular, PresenceUnknown12Regular, PresenceUnknown16Regular, PresenceUnknown20Regular } from '@fluentui/react-icons';
+export const presenceAwayRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceAway10Regular,
+    'extra-small': PresenceAway10Regular,
+    small: PresenceAway12Regular,
+    medium: PresenceAway16Regular,
+    large: PresenceAway20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceAway20Regular
+};
+export const presenceAwayFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceAway10Filled,
+    'extra-small': PresenceAway10Filled,
+    small: PresenceAway12Filled,
+    medium: PresenceAway16Filled,
+    large: PresenceAway20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceAway20Filled
+};
+export const presenceAvailableRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceAvailable10Regular,
+    'extra-small': PresenceAvailable10Regular,
+    small: PresenceAvailable12Regular,
+    medium: PresenceAvailable16Regular,
+    large: PresenceAvailable20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceAvailable20Regular
+};
+export const presenceAvailableFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceAvailable10Filled,
+    'extra-small': PresenceAvailable10Filled,
+    small: PresenceAvailable12Filled,
+    medium: PresenceAvailable16Filled,
+    large: PresenceAvailable20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceAvailable20Filled
+};
+export const presenceBlockedRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceBlocked10Regular,
+    'extra-small': PresenceBlocked10Regular,
+    small: PresenceBlocked12Regular,
+    medium: PresenceBlocked16Regular,
+    large: PresenceBlocked20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceBlocked20Regular
+};
+export const presenceBusyFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceBusy10Filled,
+    'extra-small': PresenceBusy10Filled,
+    small: PresenceBusy12Filled,
+    medium: PresenceBusy16Filled,
+    large: PresenceBusy20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceBusy20Filled
+};
+export const presenceDndFilled = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceDnd10Filled,
+    'extra-small': PresenceDnd10Filled,
+    small: PresenceDnd12Filled,
+    medium: PresenceDnd16Filled,
+    large: PresenceDnd20Filled,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceDnd20Filled
+};
+export const presenceDndRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceDnd10Regular,
+    'extra-small': PresenceDnd10Regular,
+    small: PresenceDnd12Regular,
+    medium: PresenceDnd16Regular,
+    large: PresenceDnd20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceDnd20Regular
+};
+export const presenceOofRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceOof10Regular,
+    'extra-small': PresenceOof10Regular,
+    small: PresenceOof12Regular,
+    medium: PresenceOof16Regular,
+    large: PresenceOof20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceOof20Regular
+};
+export const presenceOfflineRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceOffline10Regular,
+    'extra-small': PresenceOffline10Regular,
+    small: PresenceOffline12Regular,
+    medium: PresenceOffline16Regular,
+    large: PresenceOffline20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceOffline20Regular
+};
+export const presenceUnknownRegular = {
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    tiny: PresenceUnknown10Regular,
+    'extra-small': PresenceUnknown10Regular,
+    small: PresenceUnknown12Regular,
+    medium: PresenceUnknown16Regular,
+    large: PresenceUnknown20Regular,
+    // FIXME not all presence icon sizes are available
+    // https://github.com/microsoft/fluentui/issues/20650
+    'extra-large': PresenceUnknown20Regular
+};

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

@@ -0,0 +1,83 @@
+'use client';
+import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';
+import { useBadgeBase_unstable } from '../Badge/index';
+const iconMap = (status, outOfOffice, size)=>{
+    switch(status){
+        case 'available':
+            return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];
+        case 'away':
+            return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];
+        case 'blocked':
+            return presenceBlockedRegular[size];
+        case 'busy':
+            return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];
+        case 'do-not-disturb':
+            return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];
+        case 'offline':
+            return outOfOffice ? presenceOofRegular[size] : presenceOfflineRegular[size];
+        case 'out-of-office':
+            return presenceOofRegular[size];
+        case 'unknown':
+            return presenceUnknownRegular[size];
+    }
+};
+export 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'
+};
+/**
+ * Returns the props and state required to render the component
+ */ export 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;
+};
+/**
+ * Base hook for PresenceBadge component, which manages state related to presence status and ARIA attributes.
+ * Note: size is excluded from BaseProps as it is a design prop; icon selection uses the 'medium' size default.
+ * To render size-specific icons, use the full usePresenceBadge_unstable hook.
+ *
+ * @param props - User provided props to the PresenceBadge component.
+ * @param ref - User provided ref to be passed to the PresenceBadge component.
+ */ export 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 = {
+        ...useBadgeBase_unstable({
+            'aria-label': statusText + oofText,
+            role: 'img',
+            ...props,
+            icon: slot.optional(props.icon, {
+                renderByDefault: true,
+                elementType: 'span'
+            })
+        }, ref),
+        status,
+        outOfOffice
+    };
+    return state;
+};

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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__*/__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__*/__resetStyles("r11ag4qr", null, [".r11ag4qr{display:flex;margin:-1px;}"]);
+const useStyles = /*#__PURE__*/__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;}"]
+});
+/**
+ * Applies style classnames to slots
+ */
+export const usePresenceBadgeStyles_unstable = state => {
+  'use no memo';
+
+  const rootClassName = useRootClassName();
+  const iconClassName = useIconClassName();
+  const styles = useStyles();
+  const isBusy = getIsBusy(state.status);
+  state.root.className = 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 = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,105 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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 = makeResetStyles({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: tokens.borderRadiusCircular,
+    backgroundColor: 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 = makeResetStyles({
+    display: 'flex',
+    margin: '-1px'
+});
+const useStyles = makeStyles({
+    statusBusy: {
+        color: tokens.colorPaletteRedBackground3
+    },
+    statusAway: {
+        color: tokens.colorPaletteMarigoldBackground3
+    },
+    statusAvailable: {
+        color: tokens.colorPaletteLightGreenForeground3
+    },
+    statusOffline: {
+        color: tokens.colorNeutralForeground3
+    },
+    statusOutOfOffice: {
+        color: tokens.colorPaletteBerryForeground3
+    },
+    statusUnknown: {
+        color: tokens.colorNeutralForeground3
+    },
+    outOfOffice: {
+        color: tokens.colorNeutralBackground1
+    },
+    outOfOfficeAvailable: {
+        color: tokens.colorPaletteLightGreenForeground3
+    },
+    outOfOfficeBusy: {
+        color: tokens.colorPaletteRedBackground3
+    },
+    outOfOfficeUnknown: {
+        color: 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'
+        }
+    }
+});
+/**
+ * Applies style classnames to slots
+ */ export const usePresenceBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const iconClassName = useIconClassName();
+    const styles = useStyles();
+    const isBusy = getIsBusy(state.status);
+    state.root.className = 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 = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
+    }
+    return state;
+};