@storybook/design-system/dist/components/Spinner.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Spinner = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _styles = require("./shared/styles");

var _animation = require("./shared/animation");

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var _ref = process.env.NODE_ENV === "production" ? {
  name: "10dq8pw",
  styles: "border-color:rgba(255, 255, 255, 0.2);border-top-color:rgba(255, 255, 255, 0.4)"
} : {
  name: "4l50yd-SpinnerWrapper",
  styles: "border-color:rgba(255, 255, 255, 0.2);border-top-color:rgba(255, 255, 255, 0.4);label:SpinnerWrapper;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var SpinnerWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1lbuirv0"
} : {
  target: "e1lbuirv0",
  label: "SpinnerWrapper"
})("border-radius:3em;cursor:progress;display:inline-block;overflow:hidden;position:relative;transition:all 200ms ease-out;vertical-align:top;position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-16px;height:32px;width:32px;animation:", _animation.rotate360, " 0.7s linear infinite;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.03);border-top-color:rgba(0, 0, 0, 0.15);", function (props) {
  return props.inverse && _ref;
}, ";", function (props) {
  return props.inForm && /*#__PURE__*/(0, _theming.css)("margin-top:-6px;margin-left:-6px;height:12px;width:12px;border:1px solid ", _styles.color.secondary, ";border-bottom-color:transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;"));
}, ";", function (props) {
  return props.inline && /*#__PURE__*/(0, _theming.css)("position:relative;top:initial;left:initial;margin-top:initial;margin-left:initial;vertical-align:middle;height:8px;width:8px;border:1px solid;border-top-color:", _styles.color.secondary, ";border-left-color:", _styles.color.secondary, ";border-right-color:", _styles.color.secondary, ";border-bottom-color:transparent;", props.positive && /*#__PURE__*/(0, _theming.css)("border-top-color:", _styles.color.positive, ";border-left-color:", _styles.color.positive, ";border-right-color:", _styles.color.positive, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;")), ";", props.negative && /*#__PURE__*/(0, _theming.css)("border-top-color:", _styles.color.red, ";border-left-color:", _styles.color.red, ";border-right-color:", _styles.color.red, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;")), ";", props.neutral && /*#__PURE__*/(0, _theming.css)("border-top-color:", _styles.color.dark, ";border-left-color:", _styles.color.dark, ";border-right-color:", _styles.color.dark, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;")), ";", props.inverse && /*#__PURE__*/(0, _theming.css)("border-top-color:", _styles.color.lightest, ";border-left-color:", _styles.color.lightest, ";border-right-color:", _styles.color.lightest, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;")), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SpinnerWrapper;"));
}, ";");

var Spinner = function Spinner(props) {
  return /*#__PURE__*/_react["default"].createElement(SpinnerWrapper, (0, _extends2["default"])({
    "aria-label": "Content is loading ...",
    "aria-live": "polite",
    role: "status"
  }, props));
};

exports.Spinner = Spinner;