loading-dev 0.3.3 → 0.3.5

package/dist/index.js

@@ -1,1797 +1,109 @@
-// src/cap.ts
-var DEFAULT_CAP = "round";
-function linecap(cap = DEFAULT_CAP) {
-  return cap === "flat" ? "butt" : "round";
-}
-
-// src/motion.ts
-var DURATION_VAR = "--ld-duration";
-var PLAY_STATE_VAR = "--ld-play-state";
-var SIZE_VAR = "--ld-size";
-var STEP_VAR = "--ld-step";
-var DEFAULT_SIZE = 20;
-var SIZE = `var(${SIZE_VAR}, ${DEFAULT_SIZE}px)`;
-var SPINNER_MOTION = {
-  arc: 800,
-  atom: 1e3,
-  blocks: 1300,
-  "bouncing-dots": 500,
-  cascade: 1500,
-  "circular-dots": 800,
-  classic: 1200,
-  "classic-v2": 800,
-  clock: 1200,
-  comet: 700,
-  compass: 500,
-  dual: 1e3,
-  eclipse: 1200,
-  flip: 1200,
-  gather: 1600,
-  leap: 1800,
-  "linear-dots": 900,
-  loading: 1e3,
-  morph: 1200,
-  orbit: 750,
-  pulse: 1200,
-  radar: 1500,
-  ring: 800,
-  ripple: 1200,
-  slide: 2400,
-  snake: 1400,
-  swirl: 1200,
-  trace: 1200,
-  wave: 900
-};
-function duration(name) {
-  return `var(${DURATION_VAR}, ${SPINNER_MOTION[name]}ms)`;
-}
-function stagger(name, count) {
-  return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`;
-}
-var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
-
-// src/easing.ts
-var DEFAULT_EASING = "linear";
-function spinClass(name, easing = DEFAULT_EASING) {
-  const base = `ld-${name}-spin`;
-  return easing === "linear" ? base : `${base} ${base}-${easing}`;
-}
-var ROTATE = `to {
-    transform: rotate(360deg);
-  }`;
-function rotationCss(name, turn = ROTATE) {
-  return `
-.ld-${name}-spin {
-  transform-origin: center;
-  animation: ld-${name}-rotate ${duration(name)} linear infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-${name}-spin-ease-in-out {
-  animation-timing-function: ease-in-out;
-}
-
-.ld-${name}-spin-stacked {
-  animation-name: ld-${name}-rotate, ld-${name}-rotate;
-  animation-timing-function: linear, ease-in-out;
-  animation-composition: add;
-}
-
-@keyframes ld-${name}-rotate {
-  ${turn}
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-${name}-spin {
-    animation: none;
-  }
-}
-`;
-}
-
-// src/frame.tsx
-import { jsx } from "react/jsx-runtime";
-function SpinnerStyle({
-  children,
-  name
-}) {
-  return /* @__PURE__ */ jsx("style", { href: `ld-${name}`, precedence: "loading-dev", children });
-}
-function cssVars(vars) {
-  return vars;
-}
-function step(index) {
-  return cssVars({ [STEP_VAR]: index });
-}
-function spinnerRoot(name, { className, color, duration: duration2, playState, size = DEFAULT_SIZE }) {
-  return {
-    "aria-hidden": true,
-    className: [`ld-${name}`, className].filter(Boolean).join(" "),
-    style: cssVars({
-      [SIZE_VAR]: `${size}px`,
-      ...color === void 0 ? null : { color },
-      ...duration2 === void 0 ? null : { [DURATION_VAR]: `${duration2}ms` },
-      ...playState === void 0 ? null : { [PLAY_STATE_VAR]: playState }
-    })
-  };
-}
-
-// src/arc.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var css = `
-.ld-arc {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("arc")}
-`;
-function Arc({ cap, easing, ...rest }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(SpinnerStyle, { name: "arc", children: css }),
-    /* @__PURE__ */ jsx2(
-      "svg",
-      {
-        ...spinnerRoot("arc", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ jsx2(
-          "circle",
-          {
-            className: spinClass("arc", easing),
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeDasharray: "18 44.8",
-            strokeLinecap: linecap(cap),
-            strokeWidth: "2.5"
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/atom.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ORBITS = Array.from({ length: 3 }, (_, index) => index);
-var TILT = 180 / ORBITS.length;
-var STROKE = `calc(${SIZE} * 0.055)`;
-var INNER_STROKE = `calc(${SIZE} * 0.045)`;
-var css2 = `
-.ld-atom {
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-atom-shell {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border: ${STROKE} solid currentColor;
-  border-radius: 9999px;
-}
-
-.ld-atom-orbit {
-  position: absolute;
-  inset: 0;
-  transform-style: preserve-3d;
-  transform: rotate(var(--ld-atom-tilt)) rotateX(90deg);
-}
-
-.ld-atom-ring {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border: ${INNER_STROKE} solid currentColor;
-  border-radius: 9999px;
-  transform: rotateX(90deg);
-}
-
-${rotationCss("atom")}
-
-.ld-atom-spin {
-  position: absolute;
-  inset: 0;
-  transform-style: preserve-3d;
-  animation-delay: ${stagger("atom", ORBITS.length)};
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-atom-spin {
-    transform: rotate(${TILT}deg);
-  }
-}
-`;
-function Atom({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(SpinnerStyle, { name: "atom", children: css2 }),
-    /* @__PURE__ */ jsxs2("div", { ...spinnerRoot("atom", rest), children: [
-      /* @__PURE__ */ jsx3("div", { className: "ld-atom-shell" }),
-      ORBITS.map((index) => /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: "ld-atom-orbit",
-          style: cssVars({ "--ld-atom-tilt": `${index * TILT}deg` }),
-          children: /* @__PURE__ */ jsx3("div", { className: spinClass("atom", easing), style: step(index), children: /* @__PURE__ */ jsx3("div", { className: "ld-atom-ring" }) })
-        },
-        index
-      ))
-    ] })
-  ] });
-}
-
-// src/blocks.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DEFAULT_BLOCKS_SWEEP = "diagonal";
-var SIDE = 3;
-var CELLS = Array.from({ length: SIDE * SIDE }, (_, index) => ({
-  col: index % SIDE,
-  row: Math.floor(index / SIDE)
-}));
-var SWEEPS = {
-  columns: { count: SIDE, place: ({ col }) => col },
-  diagonal: { count: SIDE * 2 - 1, place: ({ col, row }) => row + col },
-  rows: { count: SIDE, place: ({ row }) => row }
-};
-var css3 = `
-.ld-blocks {
-  display: grid;
-  grid-template-columns: repeat(${SIDE}, 1fr);
-  grid-template-rows: repeat(${SIDE}, 1fr);
-  gap: calc(${SIZE} * 0.1);
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-blocks-cell {
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.0625);
-  animation: ld-blocks-sweep ${duration("blocks")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-${Object.entries(SWEEPS).map(
-  ([sweep, { count }]) => `
-.ld-blocks-cell-${sweep} {
-  animation-delay: ${stagger("blocks", count)};
-}
-`
-).join("")}
-@keyframes ld-blocks-sweep {
-  0%,
-  70%,
-  100% {
-    transform: scale(1);
-  }
-  35% {
-    transform: scale(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-blocks-cell {
-    transform: scale(0.8);
-    animation: none;
-  }
-}
-`;
-function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }) {
-  const { place } = SWEEPS[sweep];
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(SpinnerStyle, { name: "blocks", children: css3 }),
-    /* @__PURE__ */ jsx4("div", { ...spinnerRoot("blocks", rest), children: CELLS.map((cell) => /* @__PURE__ */ jsx4(
-      "div",
-      {
-        className: `ld-blocks-cell ld-blocks-cell-${sweep}`,
-        style: step(place(cell))
-      },
-      `${cell.col}-${cell.row}`
-    )) })
-  ] });
-}
-
-// src/bouncing-dots.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var DOTS = Array.from({ length: 3 }, (_, index) => index);
-var dur = duration("bouncing-dots");
-var css4 = `
-.ld-bouncing-dots {
-  display: flex;
-  align-items: center;
-  gap: calc(${SIZE} * 0.2);
-  height: ${SIZE};
-}
-
-.ld-bouncing-dots-dot {
-  width: calc(${SIZE} * 0.22);
-  height: calc(${SIZE} * 0.22);
-  background: currentColor;
-  border-radius: 9999px;
-  animation: ld-bouncing-dots-bounce ${dur} ease-in-out infinite alternate;
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-bouncing-dots-dot:nth-child(1) {
-  animation-delay: calc(${dur} * -0.64);
-}
-
-.ld-bouncing-dots-dot:nth-child(2) {
-  animation-delay: calc(${dur} * -0.32);
-}
-
-@keyframes ld-bouncing-dots-bounce {
-  from {
-    transform: translateY(28%);
-  }
-  to {
-    transform: translateY(-72%);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-bouncing-dots-dot {
-    animation: none;
-  }
-}
-`;
-function BouncingDots(props) {
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(SpinnerStyle, { name: "bouncing-dots", children: css4 }),
-    /* @__PURE__ */ jsx5("div", { ...spinnerRoot("bouncing-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx5("div", { className: "ld-bouncing-dots-dot" }, dot)) })
-  ] });
-}
-
-// src/cascade.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var RADII = [10.5, 7, 3.5];
-var SLOTS = 24;
-var css5 = `
-.ld-cascade {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-cascade-arc {
-  transform-origin: center;
-  animation: ld-cascade-turn ${duration("cascade")} cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite;
-  animation-delay: ${stagger("cascade", SLOTS)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-cascade-turn {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-cascade-arc {
-    animation: none;
-  }
-}
-`;
-function Cascade({ cap, ...rest }) {
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(SpinnerStyle, { name: "cascade", children: css5 }),
-    /* @__PURE__ */ jsx6(
-      "svg",
-      {
-        ...spinnerRoot("cascade", rest),
-        fill: "none",
-        role: "presentation",
-        stroke: "currentColor",
-        strokeLinecap: linecap(cap),
-        strokeWidth: "2",
-        viewBox: "0 0 24 24",
-        children: RADII.map((r, index) => {
-          const circumference = 2 * Math.PI * r;
-          return /* @__PURE__ */ jsx6(
-            "circle",
-            {
-              className: "ld-cascade-arc",
-              cx: "12",
-              cy: "12",
-              r,
-              strokeDasharray: `${circumference / 4} ${circumference * 3 / 4}`,
-              style: step(index)
-            },
-            r
-          );
-        })
-      }
-    )
-  ] });
-}
-
-// src/circular-dots.tsx
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var DOTS2 = [
-  [8, 1.5],
-  [12.5962, 3.4038],
-  [14.5, 8],
-  [12.5962, 12.5962],
-  [8, 14.5],
-  [3.4038, 12.5962],
-  [1.5, 8],
-  [3.4038, 3.4038]
-];
-var css6 = `
-.ld-circular-dots {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-circular-dots-dot {
-  animation: ld-circular-dots-fade ${duration("circular-dots")} linear infinite;
-  animation-delay: ${stagger("circular-dots", DOTS2.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-circular-dots-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-circular-dots-dot {
-    opacity: 0.6;
-    animation: none;
-  }
-}
-`;
-function CircularDots(props) {
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(SpinnerStyle, { name: "circular-dots", children: css6 }),
-    /* @__PURE__ */ jsx7(
-      "svg",
-      {
-        ...spinnerRoot("circular-dots", props),
-        fill: "currentColor",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: DOTS2.map(([cx, cy], index) => /* @__PURE__ */ jsx7(
-          "circle",
-          {
-            className: "ld-circular-dots-dot",
-            cx,
-            cy,
-            r: "1.5",
-            style: step(index)
-          },
-          `${cx}-${cy}`
-        ))
-      }
-    )
-  ] });
-}
-
-// src/classic.tsx
-import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var BARS = Array.from({ length: 12 }, (_, index) => index);
-var css7 = `
-.ld-classic {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-inner {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-bar {
-  position: absolute;
-  top: -3.9%;
-  left: -10%;
-  width: 24%;
-  height: 8%;
-  background: currentColor;
-  border-radius: 6px;
-  transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%);
-  animation: ld-classic-spin ${duration("classic")} linear infinite;
-  animation-delay: ${stagger("classic", BARS.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-classic-spin {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.15;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-classic-bar {
-    opacity: 0.5;
-    animation: none;
-  }
-}
-`;
-function Classic(props) {
-  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx8(SpinnerStyle, { name: "classic", children: css7 }),
-    /* @__PURE__ */ jsx8("div", { ...spinnerRoot("classic", props), children: /* @__PURE__ */ jsx8("div", { className: "ld-classic-inner", children: BARS.map((bar) => /* @__PURE__ */ jsx8("div", { className: "ld-classic-bar", style: step(bar) }, bar)) }) })
-  ] });
-}
-
-// src/classic-v2.tsx
-import { Fragment as Fragment8, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var TICKS = [
-  "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z",
-  "M11.7712 5.17154C11.5109 5.43189 11.0888 5.43189 10.8284 5.17154C10.5681 4.91119 10.5681 4.48908 10.8284 4.22873L12.714 2.34311C12.9744 2.08276 13.3965 2.08276 13.6568 2.34311C13.9172 2.60346 13.9172 3.02557 13.6568 3.28592L11.7712 5.17154Z",
-  "M12.6667 8.66667C12.2985 8.66667 12 8.36819 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.36819 15.7015 8.66667 15.3333 8.66667H12.6667Z",
-  "M10.8284 11.7713C10.5681 11.5109 10.5681 11.0888 10.8284 10.8284C11.0888 10.5681 11.5109 10.5681 11.7712 10.8284L13.6568 12.7141C13.9172 12.9744 13.9172 13.3965 13.6568 13.6569C13.3965 13.9172 12.9744 13.9172 12.714 13.6569L10.8284 11.7713Z",
-  "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z",
-  "M3.28594 13.6569C3.02559 13.9172 2.60348 13.9172 2.34313 13.6569C2.08278 13.3965 2.08278 12.9744 2.34313 12.714L4.22875 10.8284C4.4891 10.5681 4.91121 10.5681 5.17156 10.8284C5.43191 11.0888 5.43191 11.5109 5.17156 11.7712L3.28594 13.6569Z",
-  "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.36819 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.36819 3.70152 8.66667 3.33333 8.66667H0.666667Z",
-  "M2.34315 3.28594C2.0828 3.02559 2.0828 2.60348 2.34315 2.34314C2.6035 2.08279 3.02561 2.08279 3.28596 2.34313L5.17158 4.22875C5.43193 4.4891 5.43193 4.91121 5.17158 5.17156C4.91123 5.43191 4.48912 5.43191 4.22877 5.17156L2.34315 3.28594Z"
-];
-var css8 = `
-.ld-classic-v2 {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-v2-tick {
-  animation: ld-classic-v2-fade ${duration("classic-v2")} linear infinite;
-  animation-delay: ${stagger("classic-v2", TICKS.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-classic-v2-fade {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.4;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-classic-v2-tick {
-    opacity: 0.5;
-    animation: none;
-  }
-}
-`;
-function ClassicV2(props) {
-  return /* @__PURE__ */ jsxs8(Fragment8, { children: [
-    /* @__PURE__ */ jsx9(SpinnerStyle, { name: "classic-v2", children: css8 }),
-    /* @__PURE__ */ jsx9(
-      "svg",
-      {
-        ...spinnerRoot("classic-v2", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: /* @__PURE__ */ jsx9("g", { fill: "currentColor", children: TICKS.map((d, tick) => /* @__PURE__ */ jsx9(
-          "path",
-          {
-            className: "ld-classic-v2-tick",
-            d,
-            style: step(tick)
-          },
-          d
-        )) })
-      }
-    )
-  ] });
-}
-
-// src/clock.tsx
-import { Fragment as Fragment9, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var css9 = `
-.ld-clock {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("clock")}
-`;
-function Clock({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs9(Fragment9, { children: [
-    /* @__PURE__ */ jsx10(SpinnerStyle, { name: "clock", children: css9 }),
-    /* @__PURE__ */ jsxs9(
-      "svg",
-      {
-        ...spinnerRoot("clock", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx10("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
-          /* @__PURE__ */ jsx10(
-            "path",
-            {
-              className: spinClass("clock", easing),
-              d: "M11.1937 2.92061C10.5206 2.49739 9.77304 2.21397 8.9954 2.08314C8.45076 1.99151 8 2.44772 8 3V7.20324C8 7.49211 8.12492 7.76686 8.34259 7.95677L11.8999 11.0603C12.3287 11.4344 12.9913 11.378 13.2643 10.8787C13.6356 10.1998 13.8736 9.45248 13.9617 8.67713C14.0892 7.55433 13.8971 6.41834 13.4074 5.39993C12.9177 4.38152 12.1503 3.5221 11.1937 2.92061Z",
-              fill: "currentColor"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/comet.tsx
-import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var css10 = `
-.ld-comet {
-  --ld-comet-stroke: calc(${SIZE} * 0.12);
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-comet-spin {
-  position: absolute;
-  inset: 0;
-}
-
-.ld-comet-tail {
-  position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  background: conic-gradient(from 0deg, transparent, currentColor);
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
-}
-
-.ld-comet-head {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: var(--ld-comet-stroke);
-  height: var(--ld-comet-stroke);
-  background: currentColor;
-  border-radius: 9999px;
-  transform: translateX(-50%);
-}
-
-${rotationCss("comet")}
-`;
-function Comet({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs10(Fragment10, { children: [
-    /* @__PURE__ */ jsx11(SpinnerStyle, { name: "comet", children: css10 }),
-    /* @__PURE__ */ jsx11("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs10("div", { className: spinClass("comet", easing), children: [
-      /* @__PURE__ */ jsx11("div", { className: "ld-comet-tail" }),
-      /* @__PURE__ */ jsx11("div", { className: "ld-comet-head" })
-    ] }) })
-  ] });
-}
-
-// src/compass.tsx
-import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var css11 = `
-.ld-compass {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-compass-ticks {
-  transform-origin: center;
-  animation: ld-compass-turn ${duration("compass")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-compass-turn {
-  to {
-    transform: rotate(90deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-compass-ticks {
-    animation: none;
-  }
-}
-`;
-function Compass(props) {
-  return /* @__PURE__ */ jsxs11(Fragment11, { children: [
-    /* @__PURE__ */ jsx12(SpinnerStyle, { name: "compass", children: css11 }),
-    /* @__PURE__ */ jsx12(
-      "svg",
-      {
-        ...spinnerRoot("compass", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: /* @__PURE__ */ jsxs11("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
-          /* @__PURE__ */ jsx12("path", { d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z" }),
-          /* @__PURE__ */ jsx12("path", { d: "M12.6667 8.66667C12.2985 8.66667 12 8.3682 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.3682 15.7015 8.66667 15.3333 8.66667H12.6667Z" }),
-          /* @__PURE__ */ jsx12("path", { d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z" }),
-          /* @__PURE__ */ jsx12("path", { d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.3682 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.3682 3.70152 8.66667 3.33333 8.66667H0.666667Z" })
-        ] })
-      }
-    )
-  ] });
-}
-
-// src/dual.tsx
-import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var css12 = `
-.ld-dual {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("dual")}
-
-.ld-dual-inner {
-  animation-direction: reverse;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-dual-inner {
-    transform: rotate(180deg);
-  }
-}
-`;
-function Dual({ cap, easing, ...rest }) {
-  return /* @__PURE__ */ jsxs12(Fragment12, { children: [
-    /* @__PURE__ */ jsx13(SpinnerStyle, { name: "dual", children: css12 }),
-    /* @__PURE__ */ jsxs12(
-      "svg",
-      {
-        ...spinnerRoot("dual", rest),
-        fill: "none",
-        role: "presentation",
-        stroke: "currentColor",
-        strokeLinecap: linecap(cap),
-        strokeWidth: "2.5",
-        viewBox: "0 0 24 24",
-        children: [
-          /* @__PURE__ */ jsx13(
-            "circle",
-            {
-              className: spinClass("dual", easing),
-              cx: "12",
-              cy: "12",
-              r: "10",
-              strokeDasharray: "18 44.8"
-            }
-          ),
-          /* @__PURE__ */ jsx13(
-            "circle",
-            {
-              className: `ld-dual-inner ${spinClass("dual", easing)}`,
-              cx: "12",
-              cy: "12",
-              r: "5.5",
-              strokeDasharray: "10 24.6"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/eclipse.tsx
-import { Fragment as Fragment13, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var DOTS3 = [0, 1];
-var css13 = `
-.ld-eclipse {
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-eclipse-dot {
-  position: absolute;
-  top: 30%;
-  left: 30%;
-  width: 40%;
-  height: 40%;
-  background: currentColor;
-  border-radius: 50%;
-  animation:
-    ld-eclipse-slide ${duration("eclipse")} ease-in-out infinite,
-    ld-eclipse-depth ${duration("eclipse")} ease-in-out infinite;
-  animation-delay: ${stagger("eclipse", DOTS3.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-eclipse-slide {
-  0%,
-  100% {
-    translate: 75% 0;
-  }
-  50% {
-    translate: -75% 0;
-  }
-}
-
-@keyframes ld-eclipse-depth {
-  0%,
-  50%,
-  100% {
-    opacity: 0.75;
-    scale: 1;
-  }
-  25% {
-    opacity: 1;
-    scale: 1.3;
-  }
-  75% {
-    opacity: 0.5;
-    scale: 0.7;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-eclipse-dot {
-    translate: calc(var(${STEP_VAR}) * 150% - 75%) 0;
-    animation: none;
-  }
-}
-`;
-function Eclipse(props) {
-  return /* @__PURE__ */ jsxs13(Fragment13, { children: [
-    /* @__PURE__ */ jsx14(SpinnerStyle, { name: "eclipse", children: css13 }),
-    /* @__PURE__ */ jsx14("div", { ...spinnerRoot("eclipse", props), children: DOTS3.map((index) => /* @__PURE__ */ jsx14("div", { className: "ld-eclipse-dot", style: step(index) }, index)) })
-  ] });
-}
-
-// src/flip.tsx
-import { Fragment as Fragment14, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var css14 = `
-.ld-flip {
-  width: ${SIZE};
-  height: ${SIZE};
-  perspective: calc(${SIZE} * 3);
-}
-
-.ld-flip-face {
-  width: 64%;
-  height: 64%;
-  margin: 18%;
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.06);
-  animation: ld-flip-turn ${duration("flip")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-flip-turn {
-  0% {
-    transform: rotateX(0) rotateY(0);
-  }
-  50% {
-    transform: rotateX(-180deg) rotateY(0);
-  }
-  100% {
-    transform: rotateX(-180deg) rotateY(-180deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-flip-face {
-    animation: none;
-  }
-}
-`;
-function Flip(props) {
-  return /* @__PURE__ */ jsxs14(Fragment14, { children: [
-    /* @__PURE__ */ jsx15(SpinnerStyle, { name: "flip", children: css14 }),
-    /* @__PURE__ */ jsx15("div", { ...spinnerRoot("flip", props), children: /* @__PURE__ */ jsx15("div", { className: "ld-flip-face" }) })
-  ] });
-}
-
-// src/gather.tsx
-import { Fragment as Fragment15, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var BLOCKS = [
-  { x: 1, y: 1 },
-  { x: -1, y: 1 },
-  { x: 1, y: -1 },
-  { x: -1, y: -1 }
-];
-var GAP = 24;
-var GAP_IN = 8;
-var BLOCK = (100 - GAP) / 2;
-var PULL = `${((GAP - GAP_IN) / 2 / BLOCK * 100).toFixed(1)}%`;
-var css15 = `
-.ld-gather {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-gather-group {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: ${GAP}%;
-  width: 100%;
-  height: 100%;
-  animation: ld-gather-turn ${duration("gather")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-gather-block {
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.14);
-  animation: ld-gather-pull ${duration("gather")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-gather-pull {
-  0%,
-  100% {
-    transform: translate(0, 0);
-  }
-  30%,
-  60% {
-    transform: translate(
-      calc(var(--ld-gather-x) * ${PULL}),
-      calc(var(--ld-gather-y) * ${PULL})
-    );
-  }
-}
-
-@keyframes ld-gather-turn {
-  0%,
-  30% {
-    transform: rotate(0);
-  }
-  60%,
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-gather-group,
-  .ld-gather-block {
-    animation: none;
-  }
-}
-`;
-function Gather(props) {
-  return /* @__PURE__ */ jsxs15(Fragment15, { children: [
-    /* @__PURE__ */ jsx16(SpinnerStyle, { name: "gather", children: css15 }),
-    /* @__PURE__ */ jsx16("div", { ...spinnerRoot("gather", props), children: /* @__PURE__ */ jsx16("div", { className: "ld-gather-group", children: BLOCKS.map(({ x, y }) => /* @__PURE__ */ jsx16(
-      "div",
-      {
-        className: "ld-gather-block",
-        style: cssVars({ "--ld-gather-x": x, "--ld-gather-y": y })
-      },
-      `${x}${y}`
-    )) }) })
-  ] });
-}
-
-// src/leap.tsx
-import { Fragment as Fragment16, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var DOTS4 = Array.from({ length: 3 }, (_, index) => index);
-var css16 = `
-.ld-leap {
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-leap-wrapper {
-  position: absolute;
-  inset: 0;
-  animation: ld-leap-hop ${duration("leap")} ease-in-out infinite;
-  animation-delay: ${stagger("leap", DOTS4.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-leap-dot {
-  position: absolute;
-  top: 39%;
-  left: 0;
-  width: 22%;
-  height: 22%;
-  background: currentColor;
-  border-radius: 50%;
-}
-
-@keyframes ld-leap-hop {
-  0% {
-    transform: translateX(0) rotate(0);
-  }
-  33.33% {
-    transform: translateX(0) rotate(180deg);
-  }
-  66.66% {
-    transform: translateX(-39%) rotate(180deg);
-  }
-  99.99% {
-    transform: translateX(-78%) rotate(180deg);
-  }
-  100% {
-    transform: translateX(0) rotate(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-leap-wrapper {
-    transform: translateX(calc(var(${STEP_VAR}) * 39%));
-    animation: none;
-  }
-}
-`;
-function Leap(props) {
-  return /* @__PURE__ */ jsxs16(Fragment16, { children: [
-    /* @__PURE__ */ jsx17(SpinnerStyle, { name: "leap", children: css16 }),
-    /* @__PURE__ */ jsx17("div", { ...spinnerRoot("leap", props), children: DOTS4.map((index) => /* @__PURE__ */ jsx17("div", { className: "ld-leap-wrapper", style: step(index), children: /* @__PURE__ */ jsx17("div", { className: "ld-leap-dot" }) }, index)) })
-  ] });
-}
-
-// src/linear-dots.tsx
-import { Fragment as Fragment17, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-var DOTS5 = Array.from({ length: 3 }, (_, index) => index);
-var css17 = `
-.ld-linear-dots {
-  display: flex;
-  align-items: center;
-  gap: calc(${SIZE} * 0.1875);
-  height: ${SIZE};
-}
-
-.ld-linear-dots-dot {
-  width: calc(${SIZE} * 0.1875);
-  height: calc(${SIZE} * 0.1875);
-  background: currentColor;
-  border-radius: 9999px;
-  animation: ld-linear-dots-fade ${duration("linear-dots")} linear infinite;
-  animation-delay: ${stagger("linear-dots", DOTS5.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-linear-dots-fade {
-  0% {
-    opacity: 1;
-  }
-  66.67% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-linear-dots-dot {
-    opacity: 0.75;
-    animation: none;
-  }
-}
-`;
-function LinearDots(props) {
-  return /* @__PURE__ */ jsxs17(Fragment17, { children: [
-    /* @__PURE__ */ jsx18(SpinnerStyle, { name: "linear-dots", children: css17 }),
-    /* @__PURE__ */ jsx18("div", { ...spinnerRoot("linear-dots", props), children: DOTS5.map((dot) => /* @__PURE__ */ jsx18("div", { className: "ld-linear-dots-dot", style: step(dot) }, dot)) })
-  ] });
-}
-
-// src/loading.tsx
-import { Fragment as Fragment18, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
-var BLOCK2 = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z";
-var SEGMENTS = [
-  { x: 12, y: 6 },
-  { x: 10, y: 10 },
-  { x: 6, y: 12 },
-  { x: 2, y: 10 },
-  { x: 0, y: 6 },
-  { x: 2, y: 2 },
-  { x: 6, y: 0 },
-  { x: 10, y: 2 }
-];
-var css18 = `
-.ld-loading {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-loading-segment {
-  animation: ld-loading-fade ${duration("loading")} linear infinite;
-  animation-delay: ${stagger("loading", SEGMENTS.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-loading-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-loading-segment {
-    opacity: 0.6;
-    animation: none;
-  }
-}
-`;
-function Loading(props) {
-  return /* @__PURE__ */ jsxs18(Fragment18, { children: [
-    /* @__PURE__ */ jsx19(SpinnerStyle, { name: "loading", children: css18 }),
-    /* @__PURE__ */ jsx19(
-      "svg",
-      {
-        ...spinnerRoot("loading", props),
-        fill: "currentColor",
-        role: "presentation",
-        viewBox: "0 0 15 15",
-        children: SEGMENTS.map(({ x, y }, segment) => /* @__PURE__ */ jsx19(
-          "path",
-          {
-            className: "ld-loading-segment",
-            d: BLOCK2,
-            style: step(segment),
-            transform: `translate(${x} ${y})`
-          },
-          `${x}-${y}`
-        ))
-      }
-    )
-  ] });
-}
-
-// src/morph.tsx
-import { Fragment as Fragment19, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
-var css19 = `
-.ld-morph {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-morph-shape {
-  width: 64%;
-  height: 64%;
-  margin: 18%;
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.08);
-  animation: ld-morph-round ${duration("morph")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-morph-round {
-  0% {
-    border-radius: calc(${SIZE} * 0.08);
-    transform: rotate(0);
-  }
-  50% {
-    border-radius: 50%;
-    transform: rotate(45deg);
-  }
-  100% {
-    border-radius: calc(${SIZE} * 0.08);
-    transform: rotate(90deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-morph-shape {
-    animation: none;
-  }
-}
-`;
-function Morph(props) {
-  return /* @__PURE__ */ jsxs19(Fragment19, { children: [
-    /* @__PURE__ */ jsx20(SpinnerStyle, { name: "morph", children: css19 }),
-    /* @__PURE__ */ jsx20("div", { ...spinnerRoot("morph", props), children: /* @__PURE__ */ jsx20("div", { className: "ld-morph-shape" }) })
-  ] });
-}
-
-// src/orbit.tsx
-import { Fragment as Fragment20, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
-var css20 = `
-.ld-orbit {
-  --ld-orbit-stroke: calc(${SIZE} * 0.0625);
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-orbit-track {
-  position: absolute;
-  inset: 8%;
-  border-radius: 9999px;
-  background: conic-gradient(from 180deg, transparent 0deg, currentColor 180deg, transparent 180deg);
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
-}
-
-.ld-orbit-dot {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 25%;
-  height: 25%;
-  background: currentColor;
-  border-radius: 9999px;
-  transform: translate(-50%, -50%);
-}
-
-${rotationCss("orbit")}
-`;
-function Orbit({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs20(Fragment20, { children: [
-    /* @__PURE__ */ jsx21(SpinnerStyle, { name: "orbit", children: css20 }),
-    /* @__PURE__ */ jsxs20("div", { ...spinnerRoot("orbit", rest), children: [
-      /* @__PURE__ */ jsx21("div", { className: "ld-orbit-dot" }),
-      /* @__PURE__ */ jsx21("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })
-    ] })
-  ] });
-}
-
-// src/pulse.tsx
-import { Fragment as Fragment21, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
-var css21 = `
-.ld-pulse {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-pulse-ring {
-  transform-origin: center;
-  animation: ld-pulse-ripple ${duration("pulse")} ease-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-pulse-ripple {
-  from {
-    opacity: 0.4;
-    transform: scale(0.25);
-  }
-  to {
-    opacity: 0;
-    transform: scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-pulse-ring {
-    opacity: 0.2;
-    animation: none;
-  }
-}
-`;
-function Pulse(props) {
-  return /* @__PURE__ */ jsxs21(Fragment21, { children: [
-    /* @__PURE__ */ jsx22(SpinnerStyle, { name: "pulse", children: css21 }),
-    /* @__PURE__ */ jsxs21(
-      "svg",
-      {
-        ...spinnerRoot("pulse", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx22(
-            "circle",
-            {
-              className: "ld-pulse-ring",
-              cx: "8",
-              cy: "8",
-              fill: "currentColor",
-              r: "8"
-            }
-          ),
-          /* @__PURE__ */ jsx22("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/radar.tsx
-import { useId } from "react";
-import { Fragment as Fragment22, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
-var css22 = `
-.ld-radar {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("radar")}
-`;
-function Radar({ easing, ...rest }) {
-  const beamGradient = useId();
-  return /* @__PURE__ */ jsxs22(Fragment22, { children: [
-    /* @__PURE__ */ jsx23(SpinnerStyle, { name: "radar", children: css22 }),
-    /* @__PURE__ */ jsxs22(
-      "svg",
-      {
-        ...spinnerRoot("radar", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx23("defs", { children: /* @__PURE__ */ jsxs22(
-            "radialGradient",
-            {
-              cx: "8",
-              cy: "8",
-              gradientUnits: "userSpaceOnUse",
-              id: beamGradient,
-              r: "8",
-              children: [
-                /* @__PURE__ */ jsx23("stop", { offset: "0.3334", stopColor: "currentColor" }),
-                /* @__PURE__ */ jsx23("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.2", r: "8" }),
-          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", opacity: "0.2", r: "5.5", stroke: "currentColor" }),
-          /* @__PURE__ */ jsx23(
-            "path",
-            {
-              className: spinClass("radar", easing),
-              d: "M8 0C9.50657 0 10.9824 0.425672 12.2578 1.22754C13.5333 2.02953 14.557 3.17533 15.21 4.5332C15.8629 5.89107 16.1193 7.40626 15.9492 8.90332C15.7791 10.4001 15.1896 11.8184 14.249 12.9951L10.4707 9.69922C10.8037 9.21598 11 8.63123 11 8C11 6.34315 9.65685 5 8 5V0Z",
-              fill: `url(#${beamGradient})`
-            }
-          ),
-          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/ring.tsx
-import { Fragment as Fragment23, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
-var css23 = `
-.ld-ring {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("ring")}
-`;
-function Ring({ cap, easing, ...rest }) {
-  return /* @__PURE__ */ jsxs23(Fragment23, { children: [
-    /* @__PURE__ */ jsx24(SpinnerStyle, { name: "ring", children: css23 }),
-    /* @__PURE__ */ jsxs23(
-      "svg",
-      {
-        ...spinnerRoot("ring", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        children: [
-          /* @__PURE__ */ jsx24(
-            "circle",
-            {
-              cx: "12",
-              cy: "12",
-              opacity: "0.2",
-              r: "10",
-              stroke: "currentColor",
-              strokeWidth: "2.5"
-            }
-          ),
-          /* @__PURE__ */ jsx24(
-            "circle",
-            {
-              className: spinClass("ring", easing),
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "currentColor",
-              strokeDasharray: "16 46.8",
-              strokeLinecap: linecap(cap),
-              strokeWidth: "2.5"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/ripple.tsx
-import { Fragment as Fragment24, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
-var DEFAULT_RIPPLE_DIRECTION = "out";
-var RINGS = Array.from({ length: 3 }, (_, index) => index);
-var css24 = `
-.ld-ripple {
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-ripple-ring {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  border: calc(${SIZE} * 0.08) solid currentColor;
-  border-radius: 9999px;
-  animation: ld-ripple-spread ${duration("ripple")} ease-out infinite;
-  animation-delay: ${stagger("ripple", RINGS.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-ripple-ring-in {
-  animation-direction: reverse;
-}
-
-@keyframes ld-ripple-spread {
-  from {
-    opacity: 1;
-    transform: scale(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-ripple-ring {
-    opacity: 0.4;
-    transform: scale(calc((var(${STEP_VAR}) + 1) / ${RINGS.length}));
-    animation: none;
-  }
-}
-`;
-function Ripple({
-  direction = DEFAULT_RIPPLE_DIRECTION,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs24(Fragment24, { children: [
-    /* @__PURE__ */ jsx25(SpinnerStyle, { name: "ripple", children: css24 }),
-    /* @__PURE__ */ jsx25("div", { ...spinnerRoot("ripple", rest), children: RINGS.map((index) => /* @__PURE__ */ jsx25(
-      "div",
-      {
-        className: `ld-ripple-ring ld-ripple-ring-${direction}`,
-        style: step(index)
-      },
-      index
-    )) })
-  ] });
-}
-
-// src/slide.tsx
-import { Fragment as Fragment25, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
-var DOT = 34;
-var GAP2 = 20;
-var MARGIN = (100 - 2 * DOT - GAP2) / 2;
-var FAR = `${((DOT + GAP2) / DOT * 100).toFixed(1)}%`;
-var RESTS = [
-  `translate(${FAR}, 0)`,
-  "translate(0, 0)",
-  `translate(0, ${FAR})`
-];
-var css25 = `
-.ld-slide {
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-slide-dot {
-  position: absolute;
-  top: ${MARGIN}%;
-  left: ${MARGIN}%;
-  width: ${DOT}%;
-  height: ${DOT}%;
-  background: currentColor;
-  border-radius: 50%;
-  animation: ld-slide-walk ${duration("slide")} ease-in-out infinite;
-  animation-delay: ${stagger("slide", RESTS.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-slide-walk {
-  0% {
-    transform: translate(${FAR}, 0);
-  }
-  8.33%,
-  25% {
-    transform: translate(${FAR}, ${FAR});
-  }
-  33.33%,
-  50% {
-    transform: translate(0, ${FAR});
-  }
-  58.33%,
-  75% {
-    transform: translate(0, 0);
-  }
-  83.33%,
-  100% {
-    transform: translate(${FAR}, 0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-slide-dot {
-    transform: var(--ld-slide-rest);
-    animation: none;
-  }
-}
-`;
-function Slide(props) {
-  return /* @__PURE__ */ jsxs25(Fragment25, { children: [
-    /* @__PURE__ */ jsx26(SpinnerStyle, { name: "slide", children: css25 }),
-    /* @__PURE__ */ jsx26("div", { ...spinnerRoot("slide", props), children: RESTS.map((rest, index) => /* @__PURE__ */ jsx26(
-      "div",
-      {
-        className: "ld-slide-dot",
-        style: cssVars({ ...step(index), "--ld-slide-rest": rest })
-      },
-      rest
-    )) })
-  ] });
-}
-
-// src/snake.tsx
-import { Fragment as Fragment26, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
-var css26 = `
-.ld-snake {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("snake")}
-
-.ld-snake-dash {
-  animation: ld-snake-stretch ${duration("snake")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-snake-stretch {
-  0% {
-    stroke-dasharray: 1 100;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 45 100;
-    stroke-dashoffset: -17;
-  }
-  100% {
-    stroke-dasharray: 45 100;
-    stroke-dashoffset: -62;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-snake-dash {
-    stroke-dasharray: 18 100;
-    animation: none;
-  }
-}
-`;
-function Snake({ cap, easing, ...rest }) {
-  return /* @__PURE__ */ jsxs26(Fragment26, { children: [
-    /* @__PURE__ */ jsx27(SpinnerStyle, { name: "snake", children: css26 }),
-    /* @__PURE__ */ jsx27(
-      "svg",
-      {
-        ...spinnerRoot("snake", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ jsx27("g", { className: spinClass("snake", easing), children: /* @__PURE__ */ jsx27(
-          "circle",
-          {
-            className: "ld-snake-dash",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeLinecap: linecap(cap),
-            strokeWidth: "2.5"
-          }
-        ) })
-      }
-    )
-  ] });
-}
-
-// src/swirl.tsx
-import { Fragment as Fragment27, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
-var RING = [0, 1, 2, 7, null, 3, 6, 5, 4];
-var PLACES = RING.filter((place) => place !== null).length;
-var css27 = `
-.ld-swirl {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: calc(${SIZE} * 0.15625);
-  box-sizing: border-box;
-  width: ${SIZE};
-  height: ${SIZE};
-  padding: calc(${SIZE} * 0.0625);
-}
-
-.ld-swirl-cell {
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.0625);
-  animation: ld-swirl-fade ${duration("swirl")} linear infinite;
-  animation-delay: ${stagger("swirl", PLACES)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-swirl-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-swirl-cell {
-    opacity: 0.6;
-    animation: none;
-  }
-}
-`;
-function Swirl(props) {
-  return /* @__PURE__ */ jsxs27(Fragment27, { children: [
-    /* @__PURE__ */ jsx28(SpinnerStyle, { name: "swirl", children: css27 }),
-    /* @__PURE__ */ jsx28("div", { ...spinnerRoot("swirl", props), children: RING.map(
-      (place, index) => place === null ? /* @__PURE__ */ jsx28("div", {}, index) : /* @__PURE__ */ jsx28("div", { className: "ld-swirl-cell", style: step(place) }, index)
-    ) })
-  ] });
-}
-
-// src/trace.tsx
-import { Fragment as Fragment28, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
-var VIEW = 20;
-var SIDE2 = 17.5;
-var RADIUS = 4;
-var PERIMETER = 4 * (SIDE2 - 2 * RADIUS) + 2 * Math.PI * RADIUS;
-var DASH = 16;
-var RECT = {
-  height: SIDE2,
-  rx: RADIUS,
-  width: SIDE2,
-  x: (VIEW - SIDE2) / 2,
-  y: (VIEW - SIDE2) / 2
-};
-var css28 = `
-.ld-trace {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss(
-  "trace",
-  `to {
-    stroke-dashoffset: ${-PERIMETER};
-  }`
-)}
-`;
-function Trace({ cap, easing, ...rest }) {
-  return /* @__PURE__ */ jsxs28(Fragment28, { children: [
-    /* @__PURE__ */ jsx29(SpinnerStyle, { name: "trace", children: css28 }),
-    /* @__PURE__ */ jsxs28(
-      "svg",
-      {
-        ...spinnerRoot("trace", rest),
-        fill: "none",
-        role: "presentation",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        viewBox: `0 0 ${VIEW} ${VIEW}`,
-        children: [
-          /* @__PURE__ */ jsx29("rect", { ...RECT, opacity: "0.2" }),
-          /* @__PURE__ */ jsx29(
-            "rect",
-            {
-              ...RECT,
-              className: spinClass("trace", easing),
-              strokeDasharray: `${DASH} ${PERIMETER - DASH}`,
-              strokeLinecap: linecap(cap)
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/wave.tsx
-import { Fragment as Fragment29, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
-var DEFAULT_WAVE_ORIGIN = "center";
-var BARS2 = Array.from({ length: 5 }, (_, index) => index);
-var css29 = `
-.ld-wave {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-wave-bar {
-  width: calc(${SIZE} * 0.12);
-  height: 100%;
-  background: currentColor;
-  border-radius: 9999px;
-  animation: ld-wave-rise ${duration("wave")} ease-in-out infinite;
-  animation-delay: ${stagger("wave", BARS2.length)};
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-wave-bar-bottom {
-  align-self: flex-end;
-}
-
-@keyframes ld-wave-rise {
-  0%,
-  100% {
-    height: 30%;
-  }
-  50% {
-    height: 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-wave-bar {
-    height: calc((0.4 + var(${STEP_VAR}) * 0.15) * 100%);
-    animation: none;
-  }
-}
-`;
-function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
-  return /* @__PURE__ */ jsxs29(Fragment29, { children: [
-    /* @__PURE__ */ jsx30(SpinnerStyle, { name: "wave", children: css29 }),
-    /* @__PURE__ */ jsx30("div", { ...spinnerRoot("wave", rest), children: BARS2.map((index) => /* @__PURE__ */ jsx30(
-      "div",
-      {
-        className: `ld-wave-bar ld-wave-bar-${origin}`,
-        style: step(index)
-      },
-      index
-    )) })
-  ] });
-}
-
-// src/spinners.ts
-var SPINNERS = {
-  arc: Arc,
-  atom: Atom,
-  blocks: Blocks,
-  "bouncing-dots": BouncingDots,
-  cascade: Cascade,
-  "circular-dots": CircularDots,
-  classic: Classic,
-  "classic-v2": ClassicV2,
-  clock: Clock,
-  comet: Comet,
-  compass: Compass,
-  dual: Dual,
-  eclipse: Eclipse,
-  flip: Flip,
-  gather: Gather,
-  leap: Leap,
-  "linear-dots": LinearDots,
-  loading: Loading,
-  morph: Morph,
-  orbit: Orbit,
-  pulse: Pulse,
-  radar: Radar,
-  ring: Ring,
-  ripple: Ripple,
-  slide: Slide,
-  snake: Snake,
-  swirl: Swirl,
-  trace: Trace,
-  wave: Wave
-};
+import {
+  SPINNERS
+} from "./chunk-HL7TIIDB.js";
+import {
+  Swirl
+} from "./chunk-SUUR5WMA.js";
+import {
+  Trace
+} from "./chunk-KAZ5BTXC.js";
+import {
+  DEFAULT_WAVE_ORIGIN,
+  Wave
+} from "./chunk-DKYEZLIN.js";
+import {
+  Orbit
+} from "./chunk-LDXBT62V.js";
+import {
+  Pulse
+} from "./chunk-PM6DU637.js";
+import {
+  Radar
+} from "./chunk-2OX27TAE.js";
+import {
+  Ring
+} from "./chunk-L2DUMHO4.js";
+import {
+  DEFAULT_RIPPLE_DIRECTION,
+  Ripple
+} from "./chunk-FQ2U2M7F.js";
+import {
+  Slide
+} from "./chunk-BCIAMPLU.js";
+import {
+  Snake
+} from "./chunk-UOXB5QOZ.js";
+import {
+  Flip
+} from "./chunk-YIB63EKJ.js";
+import {
+  Gather
+} from "./chunk-JKLL7YYG.js";
+import {
+  Leap
+} from "./chunk-4O4ADYWE.js";
+import {
+  LinearDots
+} from "./chunk-FWH6VWVK.js";
+import {
+  Loading
+} from "./chunk-RAHAQ7XK.js";
+import {
+  Morph
+} from "./chunk-P4BSSDSY.js";
+import {
+  Classic
+} from "./chunk-IJJULNRU.js";
+import {
+  Clock
+} from "./chunk-2TYML5J2.js";
+import {
+  Comet
+} from "./chunk-UXTZTFNZ.js";
+import {
+  Compass
+} from "./chunk-JQNF5GYA.js";
+import {
+  Dual
+} from "./chunk-5UAEBEER.js";
+import {
+  Eclipse
+} from "./chunk-2LMGBBRJ.js";
+import {
+  Arc
+} from "./chunk-MAKBZTL3.js";
+import {
+  Atom
+} from "./chunk-BAVSTTWG.js";
+import {
+  DEFAULT_EASING
+} from "./chunk-A2PZBHTA.js";
+import {
+  Blocks,
+  DEFAULT_BLOCKS_SWEEP
+} from "./chunk-VZX7APSS.js";
+import {
+  BouncingDots
+} from "./chunk-ULWRXY3A.js";
+import {
+  Cascade
+} from "./chunk-KOYM24WV.js";
+import {
+  DEFAULT_CAP
+} from "./chunk-JNR4T6LZ.js";
+import {
+  CircularDots
+} from "./chunk-3WMZVDPS.js";
+import {
+  ClassicV2
+} from "./chunk-R5ZDKN3Z.js";
+import "./chunk-PVVWLDIS.js";
+import "./chunk-UAO52LUL.js";
+import {
+  DURATION_VAR,
+  PLAY_STATE_VAR,
+  SPINNER_MOTION
+} from "./chunk-OMNMMKI7.js";
 export {
   Arc,
   Atom,