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