feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/Spinner.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Spinner", {
+    enumerable: true,
+    get: function() {
+        return Spinner;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSpinner = require("./useSpinner");
+const _renderSpinner = require("./renderSpinner");
+const _useSpinnerStylesstyles = require("./useSpinnerStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Spinner = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSpinner.useSpinner_unstable)(props, ref);
+    (0, _useSpinnerStylesstyles.useSpinnerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSpinnerStyles_unstable')(state);
+    return (0, _renderSpinner.renderSpinner_unstable)(state);
+});
+Spinner.displayName = 'Spinner';

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;qCAG1B,kCAAkC;AAKvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQR,+BAAAA,EAAoBM,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOP,qCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/Spinner.types.js

@@ -0,0 +1,6 @@
+/**
+ * Spinner base state, excluding design-related state like appearance and size.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/Spinner.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div', 'span'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Time in milliseconds after component mount before spinner is visible.\n   * @default 0\n   */\n  delay?: number;\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n    /**\n     * Should the spinner be rendered in the DOM\n     */\n    shouldRenderSpinner: boolean;\n  };\n\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/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, {
+    Spinner: function() {
+        return _Spinner.Spinner;
+    },
+    renderSpinner_unstable: function() {
+        return _renderSpinner.renderSpinner_unstable;
+    },
+    spinnerClassNames: function() {
+        return _useSpinnerStylesstyles.spinnerClassNames;
+    },
+    useSpinnerBase_unstable: function() {
+        return _useSpinner.useSpinnerBase_unstable;
+    },
+    useSpinnerStyles_unstable: function() {
+        return _useSpinnerStylesstyles.useSpinnerStyles_unstable;
+    },
+    useSpinner_unstable: function() {
+        return _useSpinner.useSpinner_unstable;
+    }
+});
+const _Spinner = require("./Spinner");
+const _renderSpinner = require("./renderSpinner");
+const _useSpinner = require("./useSpinner");
+const _useSpinnerStylesstyles = require("./useSpinnerStyles.styles");

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBG,yCAAiB;;;eADID,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/renderSpinner.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderSpinner_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderSpinner_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderSpinner_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    const { labelPosition, shouldRenderSpinner } = state;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
+            state.spinner && shouldRenderSpinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinner, {
+                children: state.spinnerTail && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinnerTail, {})
+            }),
+            state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {})
+        ]
+    });
+};

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/renderSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/useSpinner.js

@@ -0,0 +1,98 @@
+'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, {
+    useSpinnerBase_unstable: function() {
+        return useSpinnerBase_unstable;
+    },
+    useSpinner_unstable: function() {
+        return useSpinner_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 _reactlabel = require("@fluentui/react-label");
+const _SpinnerContext = require("../../contexts/SpinnerContext");
+const useSpinner_unstable = (props, ref)=>{
+    const { size: contextSize } = (0, _SpinnerContext.useSpinnerContext)();
+    const { appearance = 'primary', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
+    const baseState = useSpinnerBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};
+const useSpinnerBase_unstable = (props, ref)=>{
+    const { delay = 0, labelPosition = 'after' } = props;
+    const baseId = (0, _reactutilities.useId)('spinner');
+    const { role = 'progressbar', ...rest } = props;
+    const nativeRoot = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref,
+        role,
+        ...rest
+    }), {
+        elementType: 'div'
+    });
+    const [isShownAfterDelay, setIsShownAfterDelay] = _react.useState(false);
+    const [setDelayTimeout, clearDelayTimeout] = (0, _reactutilities.useTimeout)();
+    _react.useEffect(()=>{
+        if (delay <= 0) {
+            return;
+        }
+        setDelayTimeout(()=>{
+            setIsShownAfterDelay(true);
+        }, delay);
+        return ()=>{
+            clearDelayTimeout();
+        };
+    }, [
+        setDelayTimeout,
+        clearDelayTimeout,
+        delay
+    ]);
+    const labelShorthand = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            id: baseId
+        },
+        renderByDefault: false,
+        elementType: _reactlabel.Label
+    });
+    const spinnerShortHand = _reactutilities.slot.optional(props.spinner, {
+        renderByDefault: true,
+        elementType: 'span'
+    });
+    if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
+        nativeRoot['aria-labelledby'] = labelShorthand.id;
+    }
+    const state = {
+        delay,
+        labelPosition,
+        shouldRenderSpinner: !delay || isShownAfterDelay,
+        components: {
+            root: 'div',
+            spinner: 'span',
+            spinnerTail: 'span',
+            label: _reactlabel.Label
+        },
+        root: nativeRoot,
+        spinner: spinnerShortHand,
+        spinnerTail: _reactutilities.slot.always(props.spinnerTail, {
+            elementType: 'span'
+        }),
+        label: labelShorthand
+    };
+    return state;
+};

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js

@@ -0,0 +1,257 @@
+'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, {
+    spinnerClassNames: function() {
+        return spinnerClassNames;
+    },
+    useSpinnerStyles_unstable: function() {
+        return useSpinnerStyles_unstable;
+    }
+});
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _react = require("@griffel/react");
+const spinnerClassNames = {
+    root: 'fui-Spinner',
+    spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
+    label: 'fui-Spinner__label'
+};
+/**
+ * CSS variables used internally by Spinner
+ */ const vars = {
+    strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rpp59a7", null, [
+    ".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"
+]);
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    vertical: {
+        Beiy3e4: "f1vx9l62"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}"
+    ]
+});
+const useSpinnerBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvgcg50", "r15nd2jo", {
+    r: [
+        ".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}",
+        "@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}",
+        ".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}",
+        "@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"
+    ],
+    s: [
+        "@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}",
+        "@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}"
+    ]
+});
+// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
+// The segments are rotated out from behind the mask to expand the visible arc from
+// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
+// The tail and spinner itself also have 360deg rotation animations for the spin.
+const useSpinnerTailBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxov3xa", "r1o544mv", {
+    r: [
+        ".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}",
+        ".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
+        "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}",
+        ".rxov3xa::before{animation-name:r18vhmn8;}",
+        "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}",
+        ".rxov3xa::after{animation-name:rkgrvoi;}",
+        "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}",
+        ".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}",
+        ".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
+        "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}",
+        ".r1o544mv::before{animation-name:r17whflh;}",
+        "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}",
+        ".r1o544mv::after{animation-name:re4odhl;}",
+        "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"
+    ],
+    s: [
+        "@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"
+    ]
+});
+const useSpinnerStyles = /*#__PURE__*/ (0, _react.__styles)({
+    inverted: {
+        De3pzq: "fr407j0",
+        sj55zd: "f1f7voed"
+    },
+    rtlTail: {
+        btxmck: "f179dep3",
+        gb5jj2: "fbz9ihp",
+        Bdya8wy: "f1pme1qz"
+    },
+    "extra-tiny": {
+        Bqenvij: "fd461yt",
+        a9b677: "fjw5fx7",
+        qmp6fs: "f1v3ph3m"
+    },
+    tiny: {
+        Bqenvij: "fjamq6b",
+        a9b677: "f64fuq3",
+        qmp6fs: "f1v3ph3m"
+    },
+    "extra-small": {
+        Bqenvij: "frvgh55",
+        a9b677: "fq4mcun",
+        qmp6fs: "f1v3ph3m"
+    },
+    small: {
+        Bqenvij: "fxldao9",
+        a9b677: "f1w9dchk",
+        qmp6fs: "f1v3ph3m"
+    },
+    medium: {
+        Bqenvij: "f1d2rq10",
+        a9b677: "f1szoe96",
+        qmp6fs: "fb52u90"
+    },
+    large: {
+        Bqenvij: "f8ljn23",
+        a9b677: "fpdz1er",
+        qmp6fs: "fb52u90"
+    },
+    "extra-large": {
+        Bqenvij: "fbhnoac",
+        a9b677: "feqmc2u",
+        qmp6fs: "fb52u90"
+    },
+    huge: {
+        Bqenvij: "f1ft4266",
+        a9b677: "fksc0bp",
+        qmp6fs: "fa3u9ii"
+    }
+}, {
+    d: [
+        ".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}",
+        ".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}",
+        ".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}",
+        ".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}",
+        ".fd461yt{height:16px;}",
+        ".fjw5fx7{width:16px;}",
+        ".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}",
+        ".fjamq6b{height:20px;}",
+        ".f64fuq3{width:20px;}",
+        ".frvgh55{height:24px;}",
+        ".fq4mcun{width:24px;}",
+        ".fxldao9{height:28px;}",
+        ".f1w9dchk{width:28px;}",
+        ".f1d2rq10{height:32px;}",
+        ".f1szoe96{width:32px;}",
+        ".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}",
+        ".f8ljn23{height:36px;}",
+        ".fpdz1er{width:36px;}",
+        ".fbhnoac{height:40px;}",
+        ".feqmc2u{width:40px;}",
+        ".f1ft4266{height:44px;}",
+        ".fksc0bp{width:44px;}",
+        ".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}"
+    ],
+    m: [
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1pme1qz{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ]
+    ]
+});
+const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
+    inverted: {
+        sj55zd: "fonrgv7"
+    },
+    "extra-tiny": {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    tiny: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    "extra-small": {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    small: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    medium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "faaz57k"
+    },
+    large: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "faaz57k"
+    },
+    "extra-large": {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "faaz57k"
+    },
+    huge: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f1pp30po",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f106mvju"
+    }
+}, {
+    d: [
+        ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".f1pp30po{font-size:var(--fontSizeBase500);}",
+        ".f106mvju{line-height:var(--lineHeightBase500);}"
+    ]
+});
+const useSpinnerStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition, size, appearance } = state;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const spinnerBaseClassName = useSpinnerBaseClassName();
+    const spinnerStyles = useSpinnerStyles();
+    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
+    const labelStyles = useLabelStyles();
+    state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
+    if (state.spinner) {
+        state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
+    }
+    if (state.spinnerTail) {
+        state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
+    }
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-spinner/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js

@@ -0,0 +1,247 @@
+'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, {
+    spinnerClassNames: function() {
+        return spinnerClassNames;
+    },
+    useSpinnerStyles_unstable: function() {
+        return useSpinnerStyles_unstable;
+    }
+});
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const spinnerClassNames = {
+    root: 'fui-Spinner',
+    spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
+    label: 'fui-Spinner__label'
+};
+/**
+ * CSS variables used internally by Spinner
+ */ const vars = {
+    strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '0',
+    gap: '8px',
+    overflow: 'hidden',
+    minWidth: 'min-content'
+});
+const useRootStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useSpinnerBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    flexShrink: 0,
+    // Use a mask to create the ring shape of the spinner.
+    maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
+    backgroundColor: _reacttheme.tokens.colorBrandStroke2Contrast,
+    color: _reacttheme.tokens.colorBrandStroke1,
+    '@media screen and (forced-colors: active)': {
+        backgroundColor: 'HighlightText',
+        color: 'Highlight',
+        forcedColorAdjust: 'none'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationName: {
+        '0%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(360deg)'
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationDuration: '1.8s'
+    }
+});
+// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
+// The segments are rotated out from behind the mask to expand the visible arc from
+// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
+// The tail and spinner itself also have 360deg rotation animations for the spin.
+const useSpinnerTailBaseClassName = (0, _react.makeResetStyles)({
+    position: 'absolute',
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
+    '&::before, &::after': {
+        content: '""',
+        position: 'absolute',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        animation: 'inherit',
+        backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: _reacttheme.tokens.curveEasyEase,
+    animationName: {
+        '0%': {
+            transform: 'rotate(-135deg)'
+        },
+        '50%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(225deg)'
+        }
+    },
+    '&::before': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(105deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '&::after': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(225deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationIterationCount: '0',
+        backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
+        '&::before, &::after': {
+            content: 'none'
+        }
+    }
+});
+const useSpinnerStyles = (0, _react.makeStyles)({
+    inverted: {
+        backgroundColor: _reacttheme.tokens.colorNeutralStrokeAlpha2,
+        color: _reacttheme.tokens.colorNeutralStrokeOnBrand2
+    },
+    rtlTail: {
+        maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
+        '&::before, &::after': {
+            backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
+        },
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
+        }
+    },
+    'extra-tiny': {
+        height: '16px',
+        width: '16px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    tiny: {
+        height: '20px',
+        width: '20px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    'extra-small': {
+        height: '24px',
+        width: '24px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    small: {
+        height: '28px',
+        width: '28px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    medium: {
+        height: '32px',
+        width: '32px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    large: {
+        height: '36px',
+        width: '36px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    'extra-large': {
+        height: '40px',
+        width: '40px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    huge: {
+        height: '44px',
+        width: '44px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThickest
+    }
+});
+const useLabelStyles = (0, _react.makeStyles)({
+    inverted: {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'extra-tiny': {
+        ..._reacttheme.typographyStyles.body1
+    },
+    tiny: {
+        ..._reacttheme.typographyStyles.body1
+    },
+    'extra-small': {
+        ..._reacttheme.typographyStyles.body1
+    },
+    small: {
+        ..._reacttheme.typographyStyles.body1
+    },
+    medium: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    large: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    'extra-large': {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    huge: {
+        ..._reacttheme.typographyStyles.subtitle1
+    }
+});
+const useSpinnerStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition, size, appearance } = state;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const spinnerBaseClassName = useSpinnerBaseClassName();
+    const spinnerStyles = useSpinnerStyles();
+    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
+    const labelStyles = useLabelStyles();
+    state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
+    if (state.spinner) {
+        state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
+    }
+    if (state.spinnerTail) {
+        state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
+    }
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
+    }
+    return state;
+};