@blockstack/ui/dist/spinner/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, taggedTemplateLiteralLoose as _taggedTemplateLiteralLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import styled, { keyframes } from 'styled-components';
import { Box } from '../box/index.esm.js';
import { VisuallyHidden } from '../visually-hidden/index.esm.js';

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  animation: ", " ", " linear infinite;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var spin = /*#__PURE__*/keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
var StyledBox = /*#__PURE__*/styled(Box)( /*#__PURE__*/_templateObject(), spin, function (props) {
  return props.speed;
});

var getSize = function getSize(size) {
  switch (size) {
    case 'xs':
      return '0.75rem';

    case 'sm':
      return '1rem';

    case 'md':
      return '1.5rem';

    case 'lg':
      return '2rem';

    case 'xl':
      return '3rem';

    default:
      return size;
  }
};

var Spinner = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'md' : _ref$size,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? 'Loading...' : _ref$label,
      _ref$thickness = _ref.thickness,
      thickness = _ref$thickness === void 0 ? '2px' : _ref$thickness,
      _ref$speed = _ref.speed,
      speed = _ref$speed === void 0 ? '0.85s' : _ref$speed,
      color = _ref.color,
      _ref$emptyColor = _ref.emptyColor,
      emptyColor = _ref$emptyColor === void 0 ? 'transparent' : _ref$emptyColor,
      props = _objectWithoutPropertiesLoose(_ref, ["size", "label", "thickness", "speed", "color", "emptyColor"]);

  var _size = getSize(size);

  return React__default.createElement(StyledBox, Object.assign({
    ref: ref,
    display: "inline-block",
    borderWidth: thickness,
    borderColor: "currentColor",
    borderBottomColor: emptyColor,
    borderLeftColor: emptyColor,
    borderRadius: "100%",
    speed: speed,
    color: color,
    size: _size
  }, props), label && React__default.createElement(VisuallyHidden, null, label));
});
Spinner.displayName = 'Spinner';

export { Spinner };
//# sourceMappingURL=index.esm.js.map