loading-dev 0.3.6 → 0.3.8

package/README.md

@@ -1,5 +1,13 @@
+<a href="https://interfaces.dev/?utm_source=loading.dev">
+  <img width="320" height="168" alt="interfaces.dev" src="https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png" />
+</a>
+
+Read more in [Interfaces](https://interfaces.dev/?utm_source=loading.dev), the first design engineering magazine.
+
 # loading-dev
 
+[![npm downloads](https://img.shields.io/npm/dt/loading-dev)](https://www.npmjs.com/package/loading-dev)
+
 Beautiful loading indicators for React.
 
 ```sh
@@ -20,7 +28,7 @@ The spinners respect reduced motion out of the box and require React 19 or later
 
 Current list of indicators:
 
-`Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Morph`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Slide`, `Snake`, `Swirl`, `Trace`, `Wave`.
+`Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `Chevrons`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Fill`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Loop`, `Morph`, `Orbit`, `Phases`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Scan`, `Slide`, `Snake`, `Split`, `Steps`, `Swirl`, `Trace`, `Wave`.
 
 Docs and live previews are available at [loading.dev](https://loading.dev).
 

package/dist/arc.d.ts

@@ -1,7 +1,5 @@
-import { n as CapProps } from "./cap-Ba3uZx03.js";
-import { r as EasingProps } from "./easing-DhnLArHS.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/arc.d.ts
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface ArcProps extends SpinnerProps, EasingProps, CapProps {}
-export declare function Arc({ cap, easing, ...rest }: ArcProps): import("react").JSX.Element;
-//#endregion
+export declare function Arc({ cap, easing, ...rest }: ArcProps): import("react").JSX.Element;

package/dist/arc.js

@@ -2,7 +2,7 @@ import { linecap } from "./cap.js";
 import { rotationCss, spinClass } from "./easing.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/arc.tsx
+// src/arc.tsx
 const css = `
 ${rotationCss("arc")}
 `;
@@ -27,5 +27,4 @@ function Arc({ cap, easing, ...rest }) {
 		})
 	})] });
 }
-//#endregion
 export { Arc };

package/dist/atom.d.ts

@@ -1,6 +1,4 @@
-import { r as EasingProps } from "./easing-DhnLArHS.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/atom.d.ts
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface AtomProps extends SpinnerProps, EasingProps {}
-export declare function Atom({ easing, ...rest }: AtomProps): import("react").JSX.Element;
-//#endregion
+export declare function Atom({ easing, ...rest }: AtomProps): import("react").JSX.Element;

package/dist/atom.js

@@ -2,7 +2,7 @@ import { SIZE, stagger } from "./motion.js";
 import { rotationCss, spinClass } from "./easing.js";
 import { SpinnerStyle, cssVars, spinnerRoot, step } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/atom.tsx
+// src/atom.tsx
 const ORBITS = Array.from({ length: 3 }, (_, index) => index);
 const TILT = 180 / ORBITS.length;
 const css = `
@@ -66,5 +66,4 @@ function Atom({ easing, ...rest }) {
 		}, index))]
 	})] });
 }
-//#endregion
 export { Atom };

package/dist/blocks.d.ts

@@ -1,9 +1,7 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/blocks.d.ts
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export type BlocksSweep = "columns" | "diagonal" | "rows";
 export declare const DEFAULT_BLOCKS_SWEEP: BlocksSweep;
 export interface BlocksProps extends SpinnerProps {
   sweep?: BlocksSweep;
 }
-export declare function Blocks({ sweep, ...rest }: BlocksProps): import("react").JSX.Element;
-//#endregion
+export declare function Blocks({ sweep, ...rest }: BlocksProps): import("react").JSX.Element;

package/dist/blocks.js

@@ -1,7 +1,7 @@
 import { SIZE, animation, stagger } from "./motion.js";
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/blocks.tsx
+// src/blocks.tsx
 const DEFAULT_BLOCKS_SWEEP = "diagonal";
 const SIDE = 3;
 const CELLS = Array.from({ length: 9 }, (_, index) => ({
@@ -70,5 +70,4 @@ function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }) {
 		}, `${cell.col}-${cell.row}`))
 	})] });
 }
-//#endregion
 export { Blocks, DEFAULT_BLOCKS_SWEEP };

package/dist/bouncing-dots.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/bouncing-dots.d.ts
-export declare function BouncingDots(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function BouncingDots(props: SpinnerProps): import("react").JSX.Element;

package/dist/bouncing-dots.js

@@ -1,7 +1,7 @@
 import { SIZE, animation, stagger } from "./motion.js";
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/bouncing-dots.tsx
+// src/bouncing-dots.tsx
 const DOTS = Array.from({ length: 3 }, (_, index) => index);
 const css = `
 .ld-bouncing-dots {
@@ -41,5 +41,4 @@ function BouncingDots(props) {
 		}, dot))
 	})] });
 }
-//#endregion
 export { BouncingDots };

package/dist/{cap-Ba3uZx03.d.ts → cap-B_Mo1a7N.d.ts}

@@ -1,9 +1,7 @@
-//#region src/cap.d.ts
 type Cap = "flat" | "round";
 declare const DEFAULT_CAP: Cap;
 interface CapProps {
   cap?: Cap;
 }
 declare function linecap(cap?: Cap): "butt" | "round";
-//#endregion
 export { linecap as i, CapProps as n, DEFAULT_CAP as r, Cap as t };

package/dist/cap.d.ts

@@ -1,2 +1,2 @@
-import { i as linecap, n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-Ba3uZx03.js";
+import { i as linecap, n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-B_Mo1a7N.js";
 export { Cap, CapProps, DEFAULT_CAP, linecap };

package/dist/cap.js

@@ -1,7 +1,6 @@
-//#region src/cap.ts
+// src/cap.ts
 const DEFAULT_CAP = "round";
 function linecap(cap = DEFAULT_CAP) {
 	return cap === "flat" ? "butt" : "round";
 }
-//#endregion
 export { DEFAULT_CAP, linecap };

package/dist/cascade.d.ts

@@ -1,6 +1,4 @@
-import { n as CapProps } from "./cap-Ba3uZx03.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/cascade.d.ts
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface CascadeProps extends SpinnerProps, CapProps {}
-export declare function Cascade({ cap, ...rest }: CascadeProps): import("react").JSX.Element;
-//#endregion
+export declare function Cascade({ cap, ...rest }: CascadeProps): import("react").JSX.Element;

package/dist/cascade.js

@@ -2,7 +2,7 @@ import { linecap } from "./cap.js";
 import { animation, stagger } from "./motion.js";
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/cascade.tsx
+// src/cascade.tsx
 const RADII = [
 	10.5,
 	7,
@@ -46,5 +46,4 @@ function Cascade({ cap, ...rest }) {
 		})
 	})] });
 }
-//#endregion
 export { Cascade };

package/dist/chevrons.d.ts

@@ -0,0 +1,2 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Chevrons(props: SpinnerProps): import("react").JSX.Element;

package/dist/chevrons.js

@@ -0,0 +1,36 @@
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/chevrons.tsx
+const CHEVRONS = [
+	3.5,
+	9,
+	14.5
+];
+const css = `
+${fadeCss("chevrons", "chevron", CHEVRONS.length, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function Chevrons(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "chevrons",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("chevrons", props),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2.5",
+		viewBox: "0 0 24 24",
+		children: CHEVRONS.map((x, index) => /* @__PURE__ */ jsx("path", {
+			className: "ld-chevrons-chevron",
+			d: `M${x} 6.5l5.5 5.5-5.5 5.5`,
+			style: step(index)
+		}, x))
+	})] });
+}
+export { Chevrons };

package/dist/circular-dots.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/circular-dots.d.ts
-export declare function CircularDots(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function CircularDots(props: SpinnerProps): import("react").JSX.Element;

package/dist/circular-dots.js

@@ -1,7 +1,7 @@
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { fadeCss } from "./fade.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/circular-dots.tsx
+// src/circular-dots.tsx
 const DOTS = [
 	[8, 1.5],
 	[12.5962, 3.4038],
@@ -36,5 +36,4 @@ function CircularDots(props) {
 		}, `${cx}-${cy}`))
 	})] });
 }
-//#endregion
 export { CircularDots };

package/dist/classic-v2.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/classic-v2.d.ts
-export declare function ClassicV2(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function ClassicV2(props: SpinnerProps): import("react").JSX.Element;

package/dist/classic-v2.js

@@ -1,7 +1,7 @@
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { fadeCss } from "./fade.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/classic-v2.tsx
+// src/classic-v2.tsx
 const 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",
@@ -37,5 +37,4 @@ function ClassicV2(props) {
 		})
 	})] });
 }
-//#endregion
 export { ClassicV2 };

package/dist/classic.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/classic.d.ts
-export declare function Classic(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Classic(props: SpinnerProps): import("react").JSX.Element;

package/dist/classic.js

@@ -2,7 +2,7 @@ import { SIZE, STEP_VAR } from "./motion.js";
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { fadeCss } from "./fade.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/classic.tsx
+// src/classic.tsx
 const BARS = Array.from({ length: 12 }, (_, index) => index);
 const css = `
 .ld-classic-inner {
@@ -44,5 +44,4 @@ function Classic(props) {
 		})
 	})] });
 }
-//#endregion
 export { Classic };

package/dist/clock.d.ts

@@ -1,6 +1,4 @@
-import { r as EasingProps } from "./easing-DhnLArHS.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/clock.d.ts
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface ClockProps extends SpinnerProps, EasingProps {}
-export declare function Clock({ easing, ...rest }: ClockProps): import("react").JSX.Element;
-//#endregion
+export declare function Clock({ easing, ...rest }: ClockProps): import("react").JSX.Element;

package/dist/clock.js

@@ -1,7 +1,7 @@
 import { rotationCss, spinClass } from "./easing.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/clock.tsx
+// src/clock.tsx
 const css = `
 ${rotationCss("clock")}
 `;
@@ -27,5 +27,4 @@ function Clock({ easing, ...rest }) {
 		})]
 	})] });
 }
-//#endregion
 export { Clock };

package/dist/comet.d.ts

@@ -1,6 +1,4 @@
-import { r as EasingProps } from "./easing-DhnLArHS.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/comet.d.ts
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface CometProps extends SpinnerProps, EasingProps {}
-export declare function Comet({ easing, ...rest }: CometProps): import("react").JSX.Element;
-//#endregion
+export declare function Comet({ easing, ...rest }: CometProps): import("react").JSX.Element;

package/dist/comet.js

@@ -2,7 +2,7 @@ import { SIZE } from "./motion.js";
 import { rotationCss, spinClass } from "./easing.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/comet.tsx
+// src/comet.tsx
 const css = `
 .ld-comet {
   --ld-comet-stroke: calc(${SIZE} * 0.12);
@@ -48,5 +48,4 @@ function Comet({ easing, ...rest }) {
 		})
 	})] });
 }
-//#endregion
 export { Comet };

package/dist/compass.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/compass.d.ts
-export declare function Compass(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Compass(props: SpinnerProps): import("react").JSX.Element;

package/dist/compass.js

@@ -1,7 +1,7 @@
 import { animation } from "./motion.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/compass.tsx
+// src/compass.tsx
 const css = `
 .ld-compass-ticks {
   transform-origin: center;
@@ -35,5 +35,4 @@ function Compass(props) {
 		})
 	})] });
 }
-//#endregion
 export { Compass };

package/dist/dual.d.ts

@@ -1,7 +1,5 @@
-import { n as CapProps } from "./cap-Ba3uZx03.js";
-import { r as EasingProps } from "./easing-DhnLArHS.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/dual.d.ts
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 export interface DualProps extends SpinnerProps, EasingProps, CapProps {}
-export declare function Dual({ cap, easing, ...rest }: DualProps): import("react").JSX.Element;
-//#endregion
+export declare function Dual({ cap, easing, ...rest }: DualProps): import("react").JSX.Element;

package/dist/dual.js

@@ -2,7 +2,7 @@ import { linecap } from "./cap.js";
 import { rotationCss, spinClass } from "./easing.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/dual.tsx
+// src/dual.tsx
 const css = `
 ${rotationCss("dual")}
 
@@ -43,5 +43,4 @@ function Dual({ cap, easing, ...rest }) {
 		})]
 	})] });
 }
-//#endregion
 export { Dual };

package/dist/{easing-DhnLArHS.d.ts → easing-BM_1QWrA.d.ts}

@@ -1,5 +1,4 @@
-import { l as SpinnerName } from "./motion-D_zUuA3S.js";
-//#region src/easing.d.ts
+import { l as SpinnerName } from "./motion-trIEyOxA.js";
 type Easing = "linear" | "ease-in-out" | "stacked";
 declare const DEFAULT_EASING: Easing;
 interface EasingProps {
@@ -7,5 +6,4 @@ interface EasingProps {
 }
 declare function spinClass(name: SpinnerName, easing?: Easing): string;
 declare function rotationCss(name: SpinnerName, turn?: string): string;
-//#endregion
 export { spinClass as a, rotationCss as i, Easing as n, EasingProps as r, DEFAULT_EASING as t };

package/dist/easing.d.ts

@@ -1,2 +1,2 @@
-import { a as spinClass, i as rotationCss, n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-DhnLArHS.js";
+import { a as spinClass, i as rotationCss, n as Easing, r as EasingProps, t as DEFAULT_EASING } from "./easing-BM_1QWrA.js";
 export { DEFAULT_EASING, Easing, EasingProps, rotationCss, spinClass };

package/dist/easing.js

@@ -1,5 +1,5 @@
 import { animation } from "./motion.js";
-//#region src/easing.ts
+// src/easing.ts
 const DEFAULT_EASING = "linear";
 function spinClass(name, easing = DEFAULT_EASING) {
 	const base = `ld-${name}-spin`;
@@ -30,5 +30,4 @@ function rotationCss(name, turn = ROTATE) {
 }
 `;
 }
-//#endregion
 export { DEFAULT_EASING, rotationCss, spinClass };

package/dist/eclipse.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/eclipse.d.ts
-export declare function Eclipse(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Eclipse(props: SpinnerProps): import("react").JSX.Element;

package/dist/eclipse.js

@@ -1,7 +1,7 @@
 import { STEP_VAR, animation, stagger } from "./motion.js";
 import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/eclipse.tsx
+// src/eclipse.tsx
 const DOTS = [0, 1];
 const css = `
 .ld-eclipse {
@@ -65,5 +65,4 @@ function Eclipse(props) {
 		}, index))
 	})] });
 }
-//#endregion
 export { Eclipse };

package/dist/fade.d.ts

@@ -1,7 +1,5 @@
-import { l as SpinnerName } from "./motion-D_zUuA3S.js";
-//#region src/fade.d.ts
+import { l as SpinnerName } from "./motion-trIEyOxA.js";
 export declare function fadeCss(name: SpinnerName, element: string, count: number, { dim, rest }: {
   dim: number;
   rest: number;
-}): string;
-//#endregion
+}): string;

package/dist/fade.js

@@ -1,5 +1,5 @@
 import { animation, stagger } from "./motion.js";
-//#region src/fade.ts
+// src/fade.ts
 function fadeCss(name, element, count, { dim, rest }) {
 	return `
 .ld-${name}-${element} {
@@ -23,5 +23,4 @@ function fadeCss(name, element, count, { dim, rest }) {
 }
 `;
 }
-//#endregion
 export { fadeCss };

package/dist/fill.d.ts

@@ -0,0 +1,2 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Fill(props: SpinnerProps): import("react").JSX.Element;

package/dist/fill.js

@@ -0,0 +1,59 @@
+import { animation } from "./motion.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/fill.tsx
+const LENGTH = 100;
+const css = `
+.ld-fill-pie {
+  ${animation("fill", "ld-fill-sweep", "cubic-bezier(0.65, 0, 0.35, 1)")}
+}
+
+@keyframes ld-fill-sweep {
+  0% {
+    stroke-dasharray: 0 ${LENGTH};
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: ${LENGTH} ${LENGTH};
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: ${LENGTH} ${LENGTH};
+    stroke-dashoffset: -100;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-fill-pie {
+    stroke-dasharray: ${LENGTH / 4} ${LENGTH};
+  }
+}
+`;
+function Fill(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "fill",
+		children: css
+	}), /* @__PURE__ */ jsxs("svg", {
+		...spinnerRoot("fill", props),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			opacity: "0.2",
+			r: "10.25",
+			strokeWidth: "2.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			className: "ld-fill-pie",
+			cx: "12",
+			cy: "12",
+			pathLength: LENGTH,
+			r: "3.75",
+			strokeWidth: "7.5",
+			transform: "rotate(-90 12 12)"
+		})]
+	})] });
+}
+export { Fill };

package/dist/flip.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/flip.d.ts
-export declare function Flip(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Flip(props: SpinnerProps): import("react").JSX.Element;

package/dist/flip.js

@@ -1,7 +1,7 @@
 import { SIZE, animation } from "./motion.js";
 import { SpinnerStyle, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/flip.tsx
+// src/flip.tsx
 const css = `
 .ld-flip {
   perspective: calc(${SIZE} * 3);
@@ -37,5 +37,4 @@ function Flip(props) {
 		children: /* @__PURE__ */ jsx("div", { className: "ld-flip-face" })
 	})] });
 }
-//#endregion
 export { Flip };

package/dist/frame.d.ts

@@ -1,7 +1,6 @@
-import { l as SpinnerName } from "./motion-D_zUuA3S.js";
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
+import { l as SpinnerName } from "./motion-trIEyOxA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
 import { CSSProperties } from "react";
-//#region src/frame.d.ts
 export declare function SpinnerStyle({ children, name }: {
   children: string;
   name: SpinnerName;
@@ -12,5 +11,4 @@ export declare function spinnerRoot(name: SpinnerName, { className, color, durat
   "aria-hidden": boolean;
   className: string;
   style: CSSProperties;
-};
-//#endregion
+};

package/dist/frame.js

@@ -1,6 +1,6 @@
 import { DURATION_VAR, PLAY_STATE_VAR, SIZE, SIZE_VAR, STEP_VAR } from "./motion.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/frame.tsx
+// src/frame.tsx
 function SpinnerStyle({ children, name }) {
 	return /* @__PURE__ */ jsx("style", {
 		href: `ld-${name}`,
@@ -38,5 +38,4 @@ function spinnerRoot(name, { className, color, duration, playState, size = 20 })
 		})
 	};
 }
-//#endregion
 export { SpinnerStyle, cssVars, spinnerRoot, step };

package/dist/gather.d.ts

@@ -1,4 +1,2 @@
-import { t as SpinnerProps } from "./types-BYaenrWm.js";
-//#region src/gather.d.ts
-export declare function Gather(props: SpinnerProps): import("react").JSX.Element;
-//#endregion
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Gather(props: SpinnerProps): import("react").JSX.Element;

package/dist/gather.js

@@ -1,7 +1,7 @@
 import { SIZE, animation } from "./motion.js";
 import { SpinnerStyle, cssVars, spinnerRoot } from "./frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/gather.tsx
+// src/gather.tsx
 const BLOCKS = [
 	{
 		x: 1,
@@ -81,5 +81,4 @@ function Gather(props) {
 		})
 	})] });
 }
-//#endregion
 export { Gather };