feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Badge", {
+    enumerable: true,
+    get: function() {
+        return Badge;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useBadge = require("./useBadge");
+const _useBadgeStylesstyles = require("./useBadgeStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _renderBadge = require("./renderBadge");
+const Badge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useBadge.useBadge_unstable)(props, ref);
+    (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useBadgeStyles_unstable')(state);
+    return (0, _renderBadge.renderBadge_unstable)(state);
+});
+Badge.displayName = 'Badge';

node_modules/@fluentui/react-badge/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;0BACG,aAAa;sCACP,0BAA0B;qCACtB,kCAAkC;6BACzC,gBAAgB;AAO9C,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QAEvCN,6CAAAA,EAAwBO;QAExBN,gDAAAA,EAA4B,2BAA2BM;IAEvD,WAAOL,iCAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Badge: function() {
+        return _Badge.Badge;
+    },
+    badgeClassNames: function() {
+        return _useBadgeStylesstyles.badgeClassNames;
+    },
+    renderBadge_unstable: function() {
+        return _renderBadge.renderBadge_unstable;
+    },
+    useBadgeBase_unstable: function() {
+        return _useBadge.useBadgeBase_unstable;
+    },
+    useBadgeStyles_unstable: function() {
+        return _useBadgeStylesstyles.useBadgeStyles_unstable;
+    },
+    useBadge_unstable: function() {
+        return _useBadge.useBadge_unstable;
+    }
+});
+const _Badge = require("./Badge");
+const _renderBadge = require("./renderBadge");
+const _useBadge = require("./useBadge");
+const _useBadgeStylesstyles = require("./useBadgeStyles.styles");

node_modules/@fluentui/react-badge/lib-commonjs/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":";;;;;;;;;;;;eAASA,YAAK;;;eAKLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAJJ,UAAU;6BAGK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderBadge_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderBadge_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderBadge_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.iconPosition === 'before' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            state.root.children,
+            state.iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-badge/lib-commonjs/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":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCAErB,4BAA4B;AAKjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGlE,EAAE"}

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

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useBadgeBase_unstable: function() {
+        return useBadgeBase_unstable;
+    },
+    useBadge_unstable: function() {
+        return useBadge_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const 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
+    };
+};
+const useBadgeBase_unstable = (props, ref)=>{
+    const { iconPosition = 'before' } = props;
+    return {
+        iconPosition,
+        components: {
+            root: 'div',
+            icon: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: _reactutilities.slot.optional(props.icon, {
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-badge/lib-commonjs/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;;;;;;;;;;;;yBA6BaY;eAAAA;;qBApBAT;;;;;iEAPU,QAAQ;gCACgB,4BAA4B;AAMpE,MAAMA,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;AAQK,8BAA8B,CAACL,OAAuBC;IAC3D,MAAM,EAAEQ,eAAe,QAAQ,EAAE,GAAGT;IAEpC,OAAO;QACLS;QACAC,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMb,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBF,MAAMd,oBAAAA,CAAKiB,QAAQ,CAACf,MAAMY,IAAI,EAAE;YAAEE,aAAa;QAAO;IACxD;AACF,EAAE"}

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

@@ -0,0 +1,593 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    badgeClassNames: function() {
+        return badgeClassNames;
+    },
+    useBadgeStyles_unstable: function() {
+        return useBadgeStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+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 = _reacttheme.tokens.spacingHorizontalXXS;
+const useRootClassName = /*#__PURE__*/ (0, _react1.__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__*/ (0, _react1.__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__*/ (0, _react1.__resetStyles)("rttl5z0", null, [
+    ".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"
+]);
+const useIconStyles = /*#__PURE__*/ (0, _react1.__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;}"
+    ]
+});
+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 = (0, _react1.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 = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,306 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    badgeClassNames: function() {
+        return badgeClassNames;
+    },
+    useBadgeStyles_unstable: function() {
+        return useBadgeStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+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 = _reacttheme.tokens.spacingHorizontalXXS;
+const useRootClassName = (0, _react1.makeResetStyles)({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    ..._reacttheme.typographyStyles.caption1Strong,
+    height: '20px',
+    minWidth: '20px',
+    padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`,
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    // Use a transparent stroke (rather than no border) so the border is visible in high contrast
+    borderColor: _reacttheme.tokens.colorTransparentStroke,
+    '::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        borderStyle: 'solid',
+        borderColor: 'inherit',
+        borderWidth: _reacttheme.tokens.strokeWidthThin,
+        borderRadius: 'inherit'
+    }
+});
+const useRootStyles = (0, _react1.makeStyles)({
+    fontSmallToTiny: {
+        ..._reacttheme.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(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    medium: {},
+    large: {
+        minWidth: '24px',
+        height: '24px',
+        padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    'extra-large': {
+        minWidth: '32px',
+        height: '32px',
+        padding: `0 calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${textPadding})`
+    },
+    // shape
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    },
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    roundedSmallToTiny: {
+        borderRadius: _reacttheme.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: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-danger': {
+        backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-important': {
+        backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
+        color: _reacttheme.tokens.colorNeutralBackground1
+    },
+    'filled-informative': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground5,
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    'filled-severe': {
+        backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-subtle': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground1
+    },
+    'filled-success': {
+        backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-warning': {
+        backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground3,
+        color: _reacttheme.tokens.colorNeutralForeground1Static
+    },
+    // appearance: ghost
+    ghost: {},
+    'ghost-brand': {
+        color: _reacttheme.tokens.colorBrandForeground1
+    },
+    'ghost-danger': {
+        color: _reacttheme.tokens.colorPaletteRedForeground3
+    },
+    'ghost-important': {
+        color: _reacttheme.tokens.colorNeutralForeground1
+    },
+    'ghost-informative': {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    'ghost-severe': {
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
+    },
+    'ghost-subtle': {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'ghost-success': {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3
+    },
+    'ghost-warning': {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    // appearance: outline
+    outline: {
+        ..._react1.shorthands.borderColor('currentColor')
+    },
+    'outline-brand': {
+        color: _reacttheme.tokens.colorBrandForeground1
+    },
+    'outline-danger': {
+        color: _reacttheme.tokens.colorPaletteRedForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+    },
+    'outline-important': {
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
+    },
+    'outline-informative': {
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'outline-severe': {
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
+    },
+    'outline-subtle': {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'outline-success': {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
+    },
+    'outline-warning': {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    // appearance: tint
+    tint: {},
+    'tint-brand': {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground2,
+        color: _reacttheme.tokens.colorBrandForeground2,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
+    },
+    'tint-danger': {
+        backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
+        color: _reacttheme.tokens.colorPaletteRedForeground1,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
+    },
+    'tint-important': {
+        backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
+        color: _reacttheme.tokens.colorNeutralBackground1,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+    },
+    'tint-informative': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'tint-severe': {
+        backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
+    },
+    'tint-subtle': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'tint-success': {
+        backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
+        color: _reacttheme.tokens.colorPaletteGreenForeground1,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
+    },
+    'tint-warning': {
+        backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
+        color: _reacttheme.tokens.colorPaletteYellowForeground1,
+        ..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
+    }
+});
+const useIconRootClassName = (0, _react1.makeResetStyles)({
+    display: 'flex',
+    lineHeight: '1',
+    margin: `0 calc(-1 * ${textPadding})`,
+    fontSize: '12px'
+});
+const useIconStyles = (0, _react1.makeStyles)({
+    beforeText: {
+        marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    afterText: {
+        marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    beforeTextXL: {
+        marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    afterTextXL: {
+        marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    // size
+    tiny: {
+        fontSize: '6px'
+    },
+    'extra-small': {
+        fontSize: '10px'
+    },
+    small: {
+        fontSize: '12px'
+    },
+    medium: {},
+    large: {
+        fontSize: '16px'
+    },
+    'extra-large': {
+        fontSize: '20px'
+    }
+});
+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 = (0, _react1.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 = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+    }
+    return state;
+};