@spark-web/spinner/dist/spark-web-spinner.esm.js

import { keyframes, css } from '@emotion/css';
import { VisuallyHidden } from '@spark-web/a11y';
import { Box } from '@spark-web/box';
import { createIcon } from '@spark-web/icon';
import { useSynchronizedAnimation } from '@spark-web/utils';
import { jsx, jsxs } from 'react/jsx-runtime';

function Spinner(_ref) {
  var tone = _ref.tone,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
      data = _ref.data;
  var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
  var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
  var styles = useSpinnerStyles();
  return /*#__PURE__*/jsxs(Box, {
    as: "span",
    ref: spinAnimationRef,
    className: css(styles),
    height: size,
    width: size,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    data: data,
    children: [/*#__PURE__*/jsx(VisuallyHidden, {
      children: "Image of a partial circle indicating \"loading\"."
    }), /*#__PURE__*/jsx(SpinnerIcon, {
      size: size,
      tone: tone,
      ref: strokeAnimationRef,
      "aria-hidden": "true"
    })]
  });
}
Spinner.displayName = 'Spinner';
var SpinnerIcon = createIcon( /*#__PURE__*/jsx("circle", {
  cx: 12,
  cy: 12,
  r: 9
}), 'SpinnerIcon');
var spinAnimation = keyframes({
  from: {
    transform: 'rotate(0deg)'
  },
  to: {
    transform: 'rotate(360deg)'
  }
});
var strokeDashAnimation = keyframes({
  '0%': {
    strokeDasharray: '1px, 200px',
    strokeDashoffset: 0
  },
  '100%': {
    strokeDasharray: '200px, 200px',
    strokeDashoffset: '-55px'
  }
});

function useSpinnerStyles() {
  return {
    animation: "".concat(spinAnimation, " 1.4s linear infinite"),
    '& circle': {
      animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
    }
  };
}

export { Spinner };