feat: Fluent UI Outlook Lite + connections mockup

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