feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-badge/lib/Badge.js

@@ -0,0 +1 @@
+export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from './components/Badge/index';

node_modules/@fluentui/react-badge/lib/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeBaseProps, BadgeProps, BadgeSlots, BadgeBaseState, BadgeState } from './components/Badge/index';\nexport {\n  Badge,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n  useBadgeBase_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

node_modules/@fluentui/react-badge/lib/CounterBadge.js

@@ -0,0 +1 @@
+export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from './components/CounterBadge/index';

node_modules/@fluentui/react-badge/lib/CounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type {\n  CounterBadgeProps,\n  CounterBadgeState,\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n} from './components/CounterBadge/index';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n  useCounterBadgeBase_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type {\n  PresenceBadgeProps,\n  PresenceBadgeState,\n  PresenceBadgeStatus,\n  PresenceBadgeBaseProps,\n  PresenceBadgeBaseState,\n} from './components/PresenceBadge/index';\nexport {\n  PresenceBadge,\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceAwayRegular,\n  presenceBadgeClassNames,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  usePresenceBadgeBase_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,EACtBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,mCAAmC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n\n  useBadgeStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n  /**\n   * A Badge can be filled, outline, ghost, inverted\n   * @defaultvalue filled\n   */\n  appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n  /**\n   * A Badge can be one of preset colors\n   * @defaultvalue brand\n   */\n  color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n  /**\n   * A Badge can position the icon before or after the content.\n   * @defaultvalue before\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A Badge can be square, circular or rounded.\n   * @defaultvalue circular\n   */\n  shape?: 'circular' | 'rounded' | 'square';\n\n  /**\n   * A Badge can be on of several preset sizes.\n   * @defaultvalue medium\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n  Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n\nexport type BadgeBaseProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type BadgeBaseState = Omit<BadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":"AA8CA,WAAyF"}

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

@@ -0,0 +1,4 @@
+export { Badge } from './Badge';
+export { renderBadge_unstable } from './renderBadge';
+export { useBadge_unstable, useBadgeBase_unstable } from './useBadge';
+export { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable, useBadgeBase_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","useBadgeBase_unstable","badgeClassNames","useBadgeStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAGhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

node_modules/@fluentui/react-badge/lib/components/Badge/renderBadge.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+export const renderBadge_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.iconPosition === 'before' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.root.children,
+            state.iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-badge/lib/components/Badge/renderBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { BadgeBaseState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeBaseState): JSXElement => {\n  assertSlots<BadgeSlots>(state);\n\n  return (\n    <state.root>\n      {state.iconPosition === 'before' && state.icon && <state.icon />}\n      {state.root.children}\n      {state.iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGlE,EAAE"}

node_modules/@fluentui/react-badge/lib/components/Badge/useBadge.js

@@ -0,0 +1,40 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Returns the props and state required to render the component
+ */ export const useBadge_unstable = (props, ref)=>{
+    const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;
+    const state = useBadgeBase_unstable(badgeProps, ref);
+    return {
+        ...state,
+        shape,
+        size,
+        appearance,
+        color
+    };
+};
+/**
+ * Base hook for Badge component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Badge component.
+ * @param ref - User provided ref to be passed to the Badge component.
+ */ export const useBadgeBase_unstable = (props, ref)=>{
+    const { iconPosition = 'before' } = props;
+    return {
+        iconPosition,
+        components: {
+            root: 'div',
+            icon: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: slot.optional(props.icon, {
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-badge/lib/components/Badge/useBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/useBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;\n\n  const state = useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    ...state,\n    shape,\n    size,\n    appearance,\n    color,\n  };\n};\n\n/**\n * Base hook for Badge component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Badge component.\n * @param ref - User provided ref to be passed to the Badge component.\n */\nexport const useBadgeBase_unstable = (props: BadgeBaseProps, ref: React.Ref<HTMLDivElement>): BadgeBaseState => {\n  const { iconPosition = 'before' } = props;\n\n  return {\n    iconPosition,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBadge_unstable","props","ref","shape","size","appearance","color","badgeProps","state","useBadgeBase_unstable","iconPosition","components","root","icon","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,QAAQ,UAAU,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAE,GAAGC,YAAY,GAAGN;IAEvG,MAAMO,QAAQC,sBAAsBF,YAAYL;IAEhD,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,wBAAwB,CAACR,OAAuBC;IAC3D,MAAM,EAAEQ,eAAe,QAAQ,EAAE,GAAGT;IAEpC,OAAO;QACLS;QACAC,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMb,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBF,MAAMd,KAAKiB,QAAQ,CAACf,MAAMY,IAAI,EAAE;YAAEE,aAAa;QAAO;IACxD;AACF,EAAE"}

node_modules/@fluentui/react-badge/lib/components/Badge/useBadgeStyles.styles.js

@@ -0,0 +1,344 @@
+'use client';
+
+import * as React from 'react';
+import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const badgeClassNames = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon'
+};
+// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
+// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
+const textPadding = tokens.spacingHorizontalXXS;
+const useRootClassName = /*#__PURE__*/__resetStyles("r1iycov", "r115jdol", [".r1iycov{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".r115jdol{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  fontSmallToTiny: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  tiny: {
+    a9b677: "f16dn6v3",
+    Bqenvij: "f3mu39s",
+    Be2twd7: "f130uwy9",
+    Bg96gwp: "fod1mrr",
+    Bf4jedk: "f18p0k4z",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f19jm9xf"
+  },
+  "extra-small": {
+    a9b677: "fpd43o0",
+    Bqenvij: "f30q22z",
+    Be2twd7: "f1tccstq",
+    Bg96gwp: "f1y3arg5",
+    Bf4jedk: "f18p0k4z",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f19jm9xf"
+  },
+  small: {
+    Bf4jedk: "fq2vo04",
+    Bqenvij: "fd461yt",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fupdldz"
+  },
+  medium: {},
+  large: {
+    Bf4jedk: "f17fgpbq",
+    Bqenvij: "frvgh55",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1996nqw"
+  },
+  "extra-large": {
+    Bf4jedk: "fwbmr0d",
+    Bqenvij: "f1d2rq10",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fty64o7"
+  },
+  square: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1fabniw"
+  },
+  rounded: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5"
+  },
+  roundedSmallToTiny: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91"
+  },
+  circular: {},
+  borderGhost: {
+    ap17g6: "f10ludwy"
+  },
+  filled: {},
+  "filled-brand": {
+    De3pzq: "ffp7eso",
+    sj55zd: "f1phragk"
+  },
+  "filled-danger": {
+    De3pzq: "fdl5y0r",
+    sj55zd: "f1phragk"
+  },
+  "filled-important": {
+    De3pzq: "f1c73kur",
+    sj55zd: "fr0bkrk"
+  },
+  "filled-informative": {
+    De3pzq: "f3vzo32",
+    sj55zd: "f11d4kpn"
+  },
+  "filled-severe": {
+    De3pzq: "f1s438gw",
+    sj55zd: "f1phragk"
+  },
+  "filled-subtle": {
+    De3pzq: "fxugw4r",
+    sj55zd: "f19n0e5"
+  },
+  "filled-success": {
+    De3pzq: "flxk52p",
+    sj55zd: "f1phragk"
+  },
+  "filled-warning": {
+    De3pzq: "ffq97bm",
+    sj55zd: "ff5vbop"
+  },
+  ghost: {},
+  "ghost-brand": {
+    sj55zd: "f16muhyy"
+  },
+  "ghost-danger": {
+    sj55zd: "f1whyuy6"
+  },
+  "ghost-important": {
+    sj55zd: "f19n0e5"
+  },
+  "ghost-informative": {
+    sj55zd: "f11d4kpn"
+  },
+  "ghost-severe": {
+    sj55zd: "f1l8vj45"
+  },
+  "ghost-subtle": {
+    sj55zd: "fonrgv7"
+  },
+  "ghost-success": {
+    sj55zd: "f1m7fhi8"
+  },
+  "ghost-warning": {
+    sj55zd: "fpti2h4"
+  },
+  outline: {
+    g2u3we: "f23ftbb",
+    h3c5rm: ["f1gkuv52", "f1p1bl80"],
+    B9xav0g: "fioka3i",
+    zhjwy3: ["f1p1bl80", "f1gkuv52"]
+  },
+  "outline-brand": {
+    sj55zd: "f16muhyy"
+  },
+  "outline-danger": {
+    sj55zd: "f1whyuy6",
+    g2u3we: "fyqpifd",
+    h3c5rm: ["f3ukxca", "f1k7dugc"],
+    B9xav0g: "f1njxb2b",
+    zhjwy3: ["f1k7dugc", "f3ukxca"]
+  },
+  "outline-important": {
+    sj55zd: "f11d4kpn",
+    g2u3we: "fq0vr37",
+    h3c5rm: ["f1byw159", "f11cr0be"],
+    B9xav0g: "f1c1zstj",
+    zhjwy3: ["f11cr0be", "f1byw159"]
+  },
+  "outline-informative": {
+    sj55zd: "f11d4kpn",
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"]
+  },
+  "outline-severe": {
+    sj55zd: "f1l8vj45"
+  },
+  "outline-subtle": {
+    sj55zd: "fonrgv7"
+  },
+  "outline-success": {
+    sj55zd: "f1m7fhi8",
+    g2u3we: "f1mmhl11",
+    h3c5rm: ["f1tjpp2f", "f1ocn5n7"],
+    B9xav0g: "f1gjv25d",
+    zhjwy3: ["f1ocn5n7", "f1tjpp2f"]
+  },
+  "outline-warning": {
+    sj55zd: "fpti2h4"
+  },
+  tint: {},
+  "tint-brand": {
+    De3pzq: "f16xkysk",
+    sj55zd: "faj9fo0",
+    g2u3we: "f161y7kd",
+    h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
+    B9xav0g: "f1619yhw",
+    zhjwy3: ["f1sl6hi9", "f1c8dzaj"]
+  },
+  "tint-danger": {
+    De3pzq: "ff0poqj",
+    sj55zd: "f1hcrxcs",
+    g2u3we: "f1oqjm8o",
+    h3c5rm: ["fkgrb8g", "frb5wm0"],
+    B9xav0g: "f1iai1ph",
+    zhjwy3: ["frb5wm0", "fkgrb8g"]
+  },
+  "tint-important": {
+    De3pzq: "f945g0u",
+    sj55zd: "fr0bkrk",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"]
+  },
+  "tint-informative": {
+    De3pzq: "f1ctqxl6",
+    sj55zd: "f11d4kpn",
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"]
+  },
+  "tint-severe": {
+    De3pzq: "f1xzsg4",
+    sj55zd: "f1k5f75o",
+    g2u3we: "fxy9dsj",
+    h3c5rm: ["f54u6j2", "fcm23ze"],
+    B9xav0g: "f4vf0uq",
+    zhjwy3: ["fcm23ze", "f54u6j2"]
+  },
+  "tint-subtle": {
+    De3pzq: "fxugw4r",
+    sj55zd: "f11d4kpn",
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"]
+  },
+  "tint-success": {
+    De3pzq: "f2vsrz6",
+    sj55zd: "ffmvakt",
+    g2u3we: "fdmic9h",
+    h3c5rm: ["f196y6m", "fetptd8"],
+    B9xav0g: "f1pev5xq",
+    zhjwy3: ["fetptd8", "f196y6m"]
+  },
+  "tint-warning": {
+    De3pzq: "f10s6hli",
+    sj55zd: "f42v8de",
+    g2u3we: "fn9i3n",
+    h3c5rm: ["f1aw8cx4", "f51if14"],
+    B9xav0g: "fvq8iai",
+    zhjwy3: ["f51if14", "f1aw8cx4"]
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", [".f19jm9xf{padding:unset;}", {
+    p: -1
+  }], ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", [".f19jm9xf{padding:unset;}", {
+    p: -1
+  }], ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", [".fupdldz{padding:0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", [".f1996nqw{padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", [".fty64o7{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".f10ludwy::after{display:none;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
+});
+const useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
+const useIconStyles = /*#__PURE__*/__styles({
+  beforeText: {
+    t21cq0: ["f1t8l4o1", "f11juvx6"]
+  },
+  afterText: {
+    Frg6f3: ["f11juvx6", "f1t8l4o1"]
+  },
+  beforeTextXL: {
+    t21cq0: ["f1rs9grm", "f1kwmkpi"]
+  },
+  afterTextXL: {
+    Frg6f3: ["f1kwmkpi", "f1rs9grm"]
+  },
+  tiny: {
+    Be2twd7: "f1tccstq"
+  },
+  "extra-small": {
+    Be2twd7: "fnmn6fi"
+  },
+  small: {
+    Be2twd7: "f1ugzwwg"
+  },
+  medium: {},
+  large: {
+    Be2twd7: "f4ybsrx"
+  },
+  "extra-large": {
+    Be2twd7: "fe5j1ua"
+  }
+}, {
+  d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
+});
+/**
+ * Applies style classnames to slots
+ */
+export const useBadgeStyles_unstable = state => {
+  'use no memo';
+
+  const rootClassName = useRootClassName();
+  const rootStyles = useRootStyles();
+  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+  state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  const iconRootClassName = useIconRootClassName();
+  const iconStyles = useIconStyles();
+  if (state.icon) {
+    let iconPositionClass;
+    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+    if (React.Children.toArray(state.root.children).length > 0) {
+      if (state.size === 'extra-large') {
+        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
+      } else {
+        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
+      }
+    }
+    state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-badge/lib/components/Badge/useBadgeStyles.styles.raw.js

@@ -0,0 +1,295 @@
+'use client';
+import * as React from 'react';
+import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const badgeClassNames = {
+    root: 'fui-Badge',
+    icon: 'fui-Badge__icon'
+};
+// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
+// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
+const textPadding = tokens.spacingHorizontalXXS;
+const useRootClassName = makeResetStyles({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    ...typographyStyles.caption1Strong,
+    height: '20px',
+    minWidth: '20px',
+    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
+    borderRadius: tokens.borderRadiusCircular,
+    // Use a transparent stroke (rather than no border) so the border is visible in high contrast
+    borderColor: tokens.colorTransparentStroke,
+    '::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        borderStyle: 'solid',
+        borderColor: 'inherit',
+        borderWidth: tokens.strokeWidthThin,
+        borderRadius: 'inherit'
+    }
+});
+const useRootStyles = makeStyles({
+    fontSmallToTiny: {
+        ...typographyStyles.caption2Strong
+    },
+    // size
+    tiny: {
+        width: '6px',
+        height: '6px',
+        fontSize: '4px',
+        lineHeight: '4px',
+        minWidth: 'unset',
+        padding: 'unset'
+    },
+    'extra-small': {
+        width: '10px',
+        height: '10px',
+        fontSize: '6px',
+        lineHeight: '6px',
+        minWidth: 'unset',
+        padding: 'unset'
+    },
+    small: {
+        minWidth: '16px',
+        height: '16px',
+        padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    medium: {
+    },
+    large: {
+        minWidth: '24px',
+        height: '24px',
+        padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    'extra-large': {
+        minWidth: '32px',
+        height: '32px',
+        padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`
+    },
+    // shape
+    square: {
+        borderRadius: tokens.borderRadiusNone
+    },
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium
+    },
+    roundedSmallToTiny: {
+        borderRadius: tokens.borderRadiusSmall
+    },
+    circular: {
+    },
+    // hide the boder when appearance is "ghost"
+    borderGhost: {
+        // The border is applied in an ::after pseudo-element because it should not affect layout.
+        // The padding and size of the badge should be the same regardless of whether or not it has a border.
+        '::after': {
+            display: 'none'
+        }
+    },
+    // appearance: filled
+    filled: {
+    },
+    'filled-brand': {
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-danger': {
+        backgroundColor: tokens.colorPaletteRedBackground3,
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-important': {
+        backgroundColor: tokens.colorNeutralForeground1,
+        color: tokens.colorNeutralBackground1
+    },
+    'filled-informative': {
+        backgroundColor: tokens.colorNeutralBackground5,
+        color: tokens.colorNeutralForeground3
+    },
+    'filled-severe': {
+        backgroundColor: tokens.colorPaletteDarkOrangeBackground3,
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-subtle': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1
+    },
+    'filled-success': {
+        backgroundColor: tokens.colorPaletteGreenBackground3,
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-warning': {
+        backgroundColor: tokens.colorPaletteYellowBackground3,
+        color: tokens.colorNeutralForeground1Static
+    },
+    // appearance: ghost
+    ghost: {
+    },
+    'ghost-brand': {
+        color: tokens.colorBrandForeground1
+    },
+    'ghost-danger': {
+        color: tokens.colorPaletteRedForeground3
+    },
+    'ghost-important': {
+        color: tokens.colorNeutralForeground1
+    },
+    'ghost-informative': {
+        color: tokens.colorNeutralForeground3
+    },
+    'ghost-severe': {
+        color: tokens.colorPaletteDarkOrangeForeground3
+    },
+    'ghost-subtle': {
+        color: tokens.colorNeutralForegroundStaticInverted
+    },
+    'ghost-success': {
+        color: tokens.colorPaletteGreenForeground3
+    },
+    'ghost-warning': {
+        color: tokens.colorPaletteYellowForeground2
+    },
+    // appearance: outline
+    outline: {
+        ...shorthands.borderColor('currentColor')
+    },
+    'outline-brand': {
+        color: tokens.colorBrandForeground1
+    },
+    'outline-danger': {
+        color: tokens.colorPaletteRedForeground3,
+        ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+    },
+    'outline-important': {
+        color: tokens.colorNeutralForeground3,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)
+    },
+    'outline-informative': {
+        color: tokens.colorNeutralForeground3,
+        ...shorthands.borderColor(tokens.colorNeutralStroke2)
+    },
+    'outline-severe': {
+        color: tokens.colorPaletteDarkOrangeForeground3
+    },
+    'outline-subtle': {
+        color: tokens.colorNeutralForegroundStaticInverted
+    },
+    'outline-success': {
+        color: tokens.colorPaletteGreenForeground3,
+        ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)
+    },
+    'outline-warning': {
+        color: tokens.colorPaletteYellowForeground2
+    },
+    // appearance: tint
+    tint: {
+    },
+    'tint-brand': {
+        backgroundColor: tokens.colorBrandBackground2,
+        color: tokens.colorBrandForeground2,
+        ...shorthands.borderColor(tokens.colorBrandStroke2)
+    },
+    'tint-danger': {
+        backgroundColor: tokens.colorPaletteRedBackground1,
+        color: tokens.colorPaletteRedForeground1,
+        ...shorthands.borderColor(tokens.colorPaletteRedBorder1)
+    },
+    'tint-important': {
+        backgroundColor: tokens.colorNeutralForeground3,
+        color: tokens.colorNeutralBackground1,
+        ...shorthands.borderColor(tokens.colorTransparentStroke)
+    },
+    'tint-informative': {
+        backgroundColor: tokens.colorNeutralBackground4,
+        color: tokens.colorNeutralForeground3,
+        ...shorthands.borderColor(tokens.colorNeutralStroke2)
+    },
+    'tint-severe': {
+        backgroundColor: tokens.colorPaletteDarkOrangeBackground1,
+        color: tokens.colorPaletteDarkOrangeForeground1,
+        ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)
+    },
+    'tint-subtle': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground3,
+        ...shorthands.borderColor(tokens.colorNeutralStroke2)
+    },
+    'tint-success': {
+        backgroundColor: tokens.colorPaletteGreenBackground1,
+        color: tokens.colorPaletteGreenForeground1,
+        ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)
+    },
+    'tint-warning': {
+        backgroundColor: tokens.colorPaletteYellowBackground1,
+        color: tokens.colorPaletteYellowForeground1,
+        ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)
+    }
+});
+const useIconRootClassName = makeResetStyles({
+    display: 'flex',
+    lineHeight: '1',
+    margin: `0 calc(-1 * ${textPadding})`,
+    fontSize: '12px'
+});
+const useIconStyles = makeStyles({
+    beforeText: {
+        marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    afterText: {
+        marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    beforeTextXL: {
+        marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    afterTextXL: {
+        marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    // size
+    tiny: {
+        fontSize: '6px'
+    },
+    'extra-small': {
+        fontSize: '10px'
+    },
+    small: {
+        fontSize: '12px'
+    },
+    medium: {
+    },
+    large: {
+        fontSize: '16px'
+    },
+    'extra-large': {
+        fontSize: '20px'
+    }
+});
+/**
+ * Applies style classnames to slots
+ */ export const useBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const rootStyles = useRootStyles();
+    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+    state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+    const iconRootClassName = useIconRootClassName();
+    const iconStyles = useIconStyles();
+    if (state.icon) {
+        let iconPositionClass;
+        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
+        if (React.Children.toArray(state.root.children).length > 0) {
+            if (state.size === 'extra-large') {
+                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
+            } else {
+                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
+            }
+        }
+        state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+    }
+    return state;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n\n  useCounterBadgeStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,iBAAiB;AAItD;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n  /**\n   * A Badge can have different appearances that emphasize certain parts of it:\n   *  - filled: The default appearance if one is not specified.\n   *    The badge background is filled with color with a contrasting foreground text to match.\n   *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n   * @default filled\n   */\n  appearance?: 'filled' | 'ghost';\n\n  /**\n   * Semantic colors for a counter badge\n   * @default brand\n   */\n  color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n  /**\n   * Value displayed by the Badge\n   * @default 0\n   */\n  count?: number;\n\n  /**\n   * If a dot should be displayed without the count\n   * @default false\n   */\n  dot?: boolean;\n\n  /**\n   * Max number to be displayed\n   * @default 99\n   */\n  overflowCount?: number;\n\n  /**\n   * A Badge can be circular or rounded\n   * @default circular\n   */\n  shape?: 'circular' | 'rounded';\n\n  /**\n   * If the badge should be shown when count is 0\n   * @default false\n   */\n  showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n  Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n\nexport type CounterBadgeBaseProps = Omit<CounterBadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type CounterBadgeBaseState = Omit<CounterBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":"AAsDA,WAAuG"}

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

@@ -0,0 +1,3 @@
+export { CounterBadge } from './CounterBadge';
+export { useCounterBadge_unstable, useCounterBadgeBase_unstable } from './useCounterBadge';
+export { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/index.ts"],"sourcesContent":["export { CounterBadge } from './CounterBadge';\nexport type {\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n  CounterBadgeProps,\n  CounterBadgeState,\n} from './CounterBadge.types';\nexport { useCounterBadge_unstable, useCounterBadgeBase_unstable } from './useCounterBadge';\nexport { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\n"],"names":["CounterBadge","useCounterBadge_unstable","useCounterBadgeBase_unstable","counterBadgeClassNames","useCounterBadgeStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadge.js

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { useBadgeBase_unstable } from '../Badge/index';
+/**
+ * Returns the props and state required to render the component
+ */ export const useCounterBadge_unstable = (props, ref)=>{
+    const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;
+    const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);
+    return {
+        ...state,
+        shape,
+        appearance,
+        color,
+        size
+    };
+};
+/**
+ * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.
+ *
+ * @param props - User provided props to the CounterBadge component.
+ * @param ref - User provided ref to be passed to the CounterBadge component.
+ */ export const useCounterBadgeBase_unstable = (props, ref)=>{
+    const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;
+    const state = {
+        ...useBadgeBase_unstable(badgeProps, ref),
+        showZero,
+        count,
+        dot
+    };
+    if ((count !== 0 || showZero) && !dot && !state.root.children) {
+        state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
+    }
+    return state;
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadgeBase_unstable } from '../Badge/index';\nimport type {\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n  CounterBadgeProps,\n  CounterBadgeState,\n} from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;\n\n  const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);\n\n  return {\n    ...state,\n    shape,\n    appearance,\n    color,\n    size,\n  };\n};\n\n/**\n * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.\n *\n * @param props - User provided props to the CounterBadge component.\n * @param ref - User provided ref to be passed to the CounterBadge component.\n */\nexport const useCounterBadgeBase_unstable = (\n  props: CounterBadgeBaseProps,\n  ref: React.Ref<HTMLElement>,\n): CounterBadgeBaseState => {\n  const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;\n\n  const state: CounterBadgeBaseState = {\n    ...useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>),\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"],"names":["React","useBadgeBase_unstable","useCounterBadge_unstable","props","ref","shape","appearance","color","size","counterBadgeProps","state","useCounterBadgeBase_unstable","showZero","overflowCount","count","dot","badgeProps","root","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AAQvD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,QAAQ,UAAU,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAEC,OAAO,QAAQ,EAAE,GAAGC,mBAAmB,GAAGN;IAE9G,MAAMO,QAAQC,6BAA6BF,mBAAmBL;IAE9D,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,+BAA+B,CAC1CR,OACAC;IAEA,MAAM,EAAEQ,WAAW,KAAK,EAAEC,gBAAgB,EAAE,EAAEC,QAAQ,CAAC,EAAEC,MAAM,KAAK,EAAE,GAAGC,YAAY,GAAGb;IAExF,MAAMO,QAA+B;QACnC,GAAGT,sBAAsBe,YAAYZ,IAAiC;QACtEQ;QACAE;QACAC;IACF;IAEA,IAAI,AAACD,CAAAA,UAAU,KAAKF,QAAO,KAAM,CAACG,OAAO,CAACL,MAAMO,IAAI,CAACC,QAAQ,EAAE;QAC7DR,MAAMO,IAAI,CAACC,QAAQ,GAAGJ,QAAQD,gBAAgB,GAAGA,cAAc,CAAC,CAAC,GAAG,GAAGC,OAAO;IAChF;IAEA,OAAOJ;AACT,EAAE"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { mergeClasses, __styles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon'
+};
+const useStyles = /*#__PURE__*/__styles({
+  dot: {
+    Bf4jedk: "fgfkb25",
+    a9b677: "f16dn6v3",
+    Bqenvij: "f3mu39s",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai"
+  },
+  hide: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [".fgfkb25{min-width:auto;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".fjseox{display:none;}"]
+});
+/**
+ * Applies style classnames to slots
+ */
+export const useCounterBadgeStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+  return useBadgeStyles_unstable(state);
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;IACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC1F;EACA,OAAOrB,uBAAuB,CAACmB,KAAK,CAAC;AACzC,CAAC","ignoreList":[]}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js

@@ -0,0 +1,29 @@
+'use client';
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+    root: 'fui-CounterBadge',
+    icon: 'fui-CounterBadge__icon'
+};
+const useStyles = makeStyles({
+    dot: {
+        minWidth: 'auto',
+        width: '6px',
+        height: '6px',
+        padding: '0'
+    },
+    hide: {
+        display: 'none'
+    }
+});
+/**
+ * Applies style classnames to slots
+ */ export const useCounterBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+    }
+    return useBadgeStyles_unstable(state);
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,QAAQ,iCAAiC;AAKzE,OAAO,MAAMC,yBAAqD;IAChEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGjB,aAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOf,wBAAwBa;AACjC,EAAE"}

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

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

@@ -0,0 +1,3 @@
+export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from './Badge';
+export { PresenceBadge, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, usePresenceBadgeBase_unstable, presenceAwayRegular, presenceAwayFilled, presenceAvailableRegular, presenceAvailableFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndRegular, presenceDndFilled, presenceOofRegular, presenceOfflineRegular, presenceUnknownRegular } from './PresenceBadge';
+export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from './CounterBadge';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Badge,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n  useBadgeBase_unstable,\n} from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState, BadgeBaseProps, BadgeBaseState } from './Badge';\nexport {\n  PresenceBadge,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  usePresenceBadgeBase_unstable,\n  presenceAwayRegular,\n  presenceAwayFilled,\n  presenceAvailableRegular,\n  presenceAvailableFilled,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndRegular,\n  presenceDndFilled,\n  presenceOofRegular,\n  presenceOfflineRegular,\n  presenceUnknownRegular,\n} from './PresenceBadge';\nexport type {\n  PresenceBadgeProps,\n  PresenceBadgeState,\n  PresenceBadgeStatus,\n  PresenceBadgeBaseProps,\n  PresenceBadgeBaseState,\n} from './PresenceBadge';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n  useCounterBadgeBase_unstable,\n} from './CounterBadge';\nexport type {\n  CounterBadgeProps,\n  CounterBadgeState,\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n} from './CounterBadge';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceAwayRegular","presenceAwayFilled","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU;AAEjB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,EAC7BC,mBAAmB,EACnBC,kBAAkB,EAClBC,wBAAwB,EACxBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,QACjB,kBAAkB;AAQzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB"}