"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Loader = void 0;
/* eslint-disable import/prefer-default-export */
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const box_1 = require("../box/box");
const css_class_1 = require("../../utils/css-class");
const Spinner = styled_components_1.default.div.attrs({
    className: 'lds-facebook',
}) `
  & {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  & div {
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 13px;
    background: ${({ theme }) => theme.colors.primary100};
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  & div:nth-child(1) {
    left: 6px;
    animation-delay: -0.24s;
  }
  & div:nth-child(2) {
    left: 26px;
    animation-delay: -0.12s;
  }
  & div:nth-child(3) {
    left: 45px;
    animation-delay: 0;
  }
  @keyframes lds-facebook {
    0% {
      top: 6px;
      height: 51px;
    }
    50%, 100% {
      top: 19px;
      height: 26px;
    }
  }
`;
/**
 * @classdesc
 *
 *  *
 * Simple loader
 *
 * ### Usage
 *
 * ```javascript
 * import { Loader } from '@adminjs/design-system'
 * ```
 *
 * @component
 * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-loader--default Storybook}
 * @hideconstructor
 * @subcategory Atoms
 * @example
 * return (
 *   
 * )
 * @section design-system
 */
const Loader = () => (react_1.default.createElement(box_1.Box, { p: "x3", style: { textAlign: 'center' }, "data-testid": "Loader", className: css_class_1.cssClass('Loader') },
    react_1.default.createElement(Spinner, null,
        react_1.default.createElement("div", null),
        react_1.default.createElement("div", null),
        react_1.default.createElement("div", null))));
exports.Loader = Loader;
exports.default = Loader;
 *
 * Simple loader
 *
 * ### Usage
 *
 * ```javascript
 * import { Loader } from '@adminjs/design-system'
 * ```
 *
 * @component
 * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-loader--default Storybook}
 * @hideconstructor
 * @subcategory Atoms
 * @example
 * return (
 *   
 * )
 * @section design-system
 */
const Loader = () => (react_1.default.createElement(box_1.Box, { p: "x3", style: { textAlign: 'center' }, "data-testid": "Loader", className: css_class_1.cssClass('Loader') },
    react_1.default.createElement(Spinner, null,
        react_1.default.createElement("div", null),
        react_1.default.createElement("div", null),
        react_1.default.createElement("div", null))));
exports.Loader = Loader;
exports.default = Loader;