import React from 'react';
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
import { getStyles } from './SpinnerIcon.styles.js';
export var sizes = {
    big: {
        size: 96,
        width: 4,
        radius: 32,
    },
    normal: {
        size: 48,
        width: 2,
        radius: 16,
    },
    mini: {
        size: 16,
        width: 1.5,
        radius: 6,
    },
};
var isSizeAlias = function (size) {
    return typeof size === 'string' && size in sizes;
};
export var SpinnerIcon = function (_a) {
    var _b, _c;
    var size = _a.size, className = _a.className, inline = _a.inline, width = _a.width, color = _a.color;
    var _size = isSizeAlias(size) ? sizes[size] : size;
    var currentSize = inline ? sizes.mini : _size;
    var cx = useEmotion().cx;
    var styles = useStyles(getStyles);
    return (React.createElement("span", { className: cx(styles.root(), (_b = {}, _b[styles.rootInline()] = inline, _b)) },
        React.createElement("svg", { viewBox: "0 0 ".concat(currentSize.size, " ").concat(currentSize.size), className: cx(styles.icon(), className, (_c = {},
                _c[styles.iconInline()] = inline,
                _c)), width: currentSize.size, height: currentSize.size, fill: "none", stroke: color, strokeDasharray: "".concat((10 * currentSize.radius) / 6, ", ").concat((27 * currentSize.radius) / 6), strokeDashoffset: "0", strokeWidth: width || currentSize.width, focusable: "false", "aria-hidden": "true" },
            React.createElement("circle", { cx: currentSize.size / 2, cy: currentSize.size / 2, r: currentSize.radius }))));
};
//# sourceMappingURL=SpinnerIcon.js.map