welcome-ui/dist/Loader.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as e } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { Box as c } from "./Box.mjs";
import { shouldForwardProp as l, forwardRef as m } from "./System.mjs";
import d, { keyframes as f, css as n, system as p } from "@xstyled/styled-components";
import { Shape as h } from "./Shape.mjs";
const y = f`
  0%, 100% {
    opacity: .5;
    transform: scale3d(.8, .8, 1);
  }
  30%, 60% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
`, u = n`
  animation: ${y} 1.5s cubic-bezier(0.86, 0, 0.07, 1) infinite;
`, s = d(h).withConfig({ shouldForwardProp: l })(
  ({ size: a, theme: i }) => {
    var r;
    const o = ((r = i.loaders) == null ? void 0 : r[a]) || a, t = typeof o == "number" ? i.toRem(o) : o;
    return n`
      width: ${t};
      height: ${t};
      background-color: currentColor;
      ${p}
      ${u};
      &:not(:first-child) {
        margin-left: calc(${t} / 2);
      }
      &:nth-child(1) {
        animation-delay: 0s;
      }
      &:nth-child(2) {
        animation-delay: 0.125s;
      }
      &:nth-child(3) {
        animation-delay: 0.25s;
      }
    `;
  }
), x = m(
  ({ color: a, dataTestId: i, size: o = "sm", ...t }, r) => /* @__PURE__ */ e.jsxs(c, { color: a, "data-testid": i, display: "flex", ref: r, ...t, children: [
    /* @__PURE__ */ e.jsx(s, { shape: "circle", size: o }),
    /* @__PURE__ */ e.jsx(s, { shape: "circle", size: o }),
    /* @__PURE__ */ e.jsx(s, { shape: "circle", size: o })
  ] })
);
x.displayName = "Loader";
export {
  x as Loader
};