nfx-ui 0.20.0 → 0.22.0

package/dist/animations/docker-icon.js

@@ -0,0 +1,101 @@
+import { forwardRef as e, useImperativeHandle as t, useRef as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/docker-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = n([]), m = async () => {
+		p.current.forEach((e) => e.stop()), p.current = [], p.current.push(f(".whale", { x: [
+			0,
+			2,
+			0
+		] }, {
+			duration: 1.2,
+			ease: "easeInOut",
+			repeat: Infinity
+		})), p.current.push(f(".containers", { y: [
+			0,
+			-1,
+			0
+		] }, {
+			duration: .8,
+			ease: "easeInOut",
+			repeat: Infinity
+		})), f(".dot", { scale: [
+			1,
+			1.3,
+			1
+		] }, {
+			duration: .5,
+			ease: "easeInOut"
+		});
+	}, h = () => {
+		p.current.forEach((e) => e.stop()), p.current = [], f(".whale", { x: 0 }, { duration: .3 }), f(".containers", { y: 0 }, { duration: .3 }), f(".dot", { scale: 1 }, { duration: .3 });
+	};
+	return t(u, () => ({
+		startAnimation: m,
+		stopAnimation: h
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: d,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: s,
+		strokeWidth: c,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${l}`,
+		onHoverStart: m,
+		onHoverEnd: h,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "whale",
+				d: "M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M5 10h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M8 10h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M11 10h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M8 7h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M11 7h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "containers",
+				d: "M11 4h3v3h-3z"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "whale",
+				d: "M4.571 18c1.5 0 2.047 -.074 2.958 -.78"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "dot",
+				style: { transformOrigin: "10 16" },
+				d: "M10 16l0 .01"
+			})
+		]
+	});
+});
+s.displayName = "DockerIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=docker-icon.js.map

package/dist/animations/docker-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docker-icon.js","names":[],"sources":["../../src/animations/docker-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DockerIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);\n\n    const start = async () => {\n      animationControls.current.forEach((control) => control.stop());\n      animationControls.current = [];\n\n      animationControls.current.push(\n        animate(\n          \".whale\",\n          { x: [0, 2, 0] },\n          { duration: 1.2, ease: \"easeInOut\", repeat: Infinity },\n        ),\n      );\n      animationControls.current.push(\n        animate(\n          \".containers\",\n          { y: [0, -1, 0] },\n          { duration: 0.8, ease: \"easeInOut\", repeat: Infinity },\n        ),\n      );\n      animate(\n        \".dot\",\n        { scale: [1, 1.3, 1] },\n        { duration: 0.5, ease: \"easeInOut\" },\n      );\n    };\n\n    const stop = () => {\n      animationControls.current.forEach((control) => control.stop());\n      animationControls.current = [];\n\n      animate(\".whale\", { x: 0 }, { duration: 0.3 });\n      animate(\".containers\", { y: 0 }, { duration: 0.3 });\n      animate(\".dot\", { scale: 1 }, { duration: 0.3 });\n    };\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <motion.path\n          className=\"whale\"\n          d=\"M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z\"\n        />\n        <motion.path className=\"containers\" d=\"M5 10h3v3h-3z\" />\n        <motion.path className=\"containers\" d=\"M8 10h3v3h-3z\" />\n        <motion.path className=\"containers\" d=\"M11 10h3v3h-3z\" />\n        <motion.path className=\"containers\" d=\"M8 7h3v3h-3z\" />\n        <motion.path className=\"containers\" d=\"M11 7h3v3h-3z\" />\n        <motion.path className=\"containers\" d=\"M11 4h3v3h-3z\" />\n        <motion.path\n          className=\"whale\"\n          d=\"M4.571 18c1.5 0 2.047 -.074 2.958 -.78\"\n        />\n        <motion.path\n          className=\"dot\"\n          style={{ transformOrigin: \"10 16\" }}\n          d=\"M10 16l0 .01\"\n        />\n      </motion.svg>\n    );\n  },\n);\n\nDockerIcon.displayName = \"DockerIcon\";\nexport default DockerIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAa,GAEf,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAC9B,IAAoB,EAA0C,CAAC,CAAC,GAEhE,IAAQ,YAAY;EAkBxB,AAjBA,EAAkB,QAAQ,SAAS,MAAY,EAAQ,KAAK,CAAC,GAC7D,EAAkB,UAAU,CAAC,GAE7B,EAAkB,QAAQ,KACxB,EACE,UACA,EAAE,GAAG;GAAC;GAAG;GAAG;EAAC,EAAE,GACf;GAAE,UAAU;GAAK,MAAM;GAAa,QAAQ;EAAS,CACvD,CACF,GACA,EAAkB,QAAQ,KACxB,EACE,eACA,EAAE,GAAG;GAAC;GAAG;GAAI;EAAC,EAAE,GAChB;GAAE,UAAU;GAAK,MAAM;GAAa,QAAQ;EAAS,CACvD,CACF,GACA,EACE,QACA,EAAE,OAAO;GAAC;GAAG;GAAK;EAAC,EAAE,GACrB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAEM,UAAa;EAMjB,AALA,EAAkB,QAAQ,SAAS,MAAY,EAAQ,KAAK,CAAC,GAC7D,EAAkB,UAAU,CAAC,GAE7B,EAAQ,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,GAAI,CAAC,GAC7C,EAAQ,eAAe,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,GAAI,CAAC,GAClD,EAAQ,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,GAAI,CAAC;CACjD;CAOA,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,cAAc;EACd,YAAY;EAbd,UAAA;GAeE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GACnD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;GACH,CAAA;GACD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAiB,CAAA;GACvD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAiB,CAAA;GACvD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAkB,CAAA;GACxD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAgB,CAAA;GACtD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAiB,CAAA;GACvD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAa,GAAE;GAAiB,CAAA;GACvD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;GACH,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,QAAQ;IAClC,GAAE;GACH,CAAA;EACS;;AAEhB,CACF;AAEA,EAAW,cAAc"}

package/dist/animations/dots-horizontal-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DotsHorizontalIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DotsHorizontalIcon;
+//# sourceMappingURL=dots-horizontal-icon.d.ts.map

package/dist/animations/dots-horizontal-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots-horizontal-icon.d.ts","sourceRoot":"","sources":["../../src/animations/dots-horizontal-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,kBAAkB,kHAiGvB,CAAC;AAGF,eAAe,kBAAkB,CAAC"}

package/dist/animations/dots-horizontal-icon.js

@@ -0,0 +1,91 @@
+import { forwardRef as e, useCallback as t, useImperativeHandle as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/dots-horizontal-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		f(".dot-left", {
+			x: [-2, 0],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .3,
+			ease: "easeOut"
+		}), f(".dot-center", { scale: [
+			1,
+			1.3,
+			1
+		] }, {
+			duration: .3,
+			delay: .1,
+			ease: "easeOut"
+		}), f(".dot-right", {
+			x: [2, 0],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .3,
+			delay: .2,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(() => {
+		f(".dot-left, .dot-center, .dot-right", {
+			x: 0,
+			scale: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: d,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: s,
+		strokeWidth: c,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${l}`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-left",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-center",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-right",
+				style: { transformOrigin: "50% 50%" }
+			})
+		]
+	});
+});
+s.displayName = "DotsHorizontalIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=dots-horizontal-icon.js.map

package/dist/animations/dots-horizontal-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots-horizontal-icon.js","names":[],"sources":["../../src/animations/dots-horizontal-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DotsHorizontalIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      animate(\n        \".dot-left\",\n        {\n          x: [-2, 0],\n          scale: [1, 1.2, 1],\n        },\n        {\n          duration: 0.3,\n          ease: \"easeOut\",\n        },\n      );\n\n      animate(\n        \".dot-center\",\n        {\n          scale: [1, 1.3, 1],\n        },\n        {\n          duration: 0.3,\n          delay: 0.1,\n          ease: \"easeOut\",\n        },\n      );\n\n      animate(\n        \".dot-right\",\n        {\n          x: [2, 0],\n          scale: [1, 1.2, 1],\n        },\n        {\n          duration: 0.3,\n          delay: 0.2,\n          ease: \"easeOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".dot-left, .dot-center, .dot-right\",\n        { x: 0, scale: 1 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n\n        <motion.path\n          d=\"M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-left\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-center\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-right\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nDotsHorizontalIcon.displayName = \"DotsHorizontalIcon\";\nexport default DotsHorizontalIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAqB,GAEvB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAyBpC,AAxBA,EACE,aACA;GACE,GAAG,CAAC,IAAI,CAAC;GACT,OAAO;IAAC;IAAG;IAAK;GAAC;EACnB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,EACE,eACA,EACE,OAAO;GAAC;GAAG;GAAK;EAAC,EACnB,GACA;GACE,UAAU;GACV,OAAO;GACP,MAAM;EACR,CACF,GAEA,EACE,cACA;GACE,GAAG,CAAC,GAAG,CAAC;GACR,OAAO;IAAC;IAAG;IAAK;GAAC;EACnB,GACA;GACE,UAAU;GACV,OAAO;GACP,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,sCACA;GAAE,GAAG;GAAG,OAAO;EAAE,GACjB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,cAAc;EACd,YAAY;EAbd,UAAA;GAeE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GAEnD,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;GAED,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;GAED,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAmB,cAAc"}

package/dist/animations/dots-vertical-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DotsVerticalIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DotsVerticalIcon;
+//# sourceMappingURL=dots-vertical-icon.d.ts.map

package/dist/animations/dots-vertical-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots-vertical-icon.d.ts","sourceRoot":"","sources":["../../src/animations/dots-vertical-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,gBAAgB,kHAiGrB,CAAC;AAGF,eAAe,gBAAgB,CAAC"}

package/dist/animations/dots-vertical-icon.js

@@ -0,0 +1,91 @@
+import { forwardRef as e, useCallback as t, useImperativeHandle as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/dots-vertical-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		f(".dot-top", {
+			y: [-2, 0],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .3,
+			ease: "easeOut"
+		}), f(".dot-middle", { scale: [
+			1,
+			1.3,
+			1
+		] }, {
+			duration: .3,
+			delay: .1,
+			ease: "easeOut"
+		}), f(".dot-bottom", {
+			y: [2, 0],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .3,
+			delay: .2,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(() => {
+		f(".dot-top, .dot-middle, .dot-bottom", {
+			y: 0,
+			scale: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: d,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: s,
+		strokeWidth: c,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${l}`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-middle",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-bottom",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+				className: "dot-top",
+				style: { transformOrigin: "50% 50%" }
+			})
+		]
+	});
+});
+s.displayName = "DotsVerticalIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=dots-vertical-icon.js.map

package/dist/animations/dots-vertical-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots-vertical-icon.js","names":[],"sources":["../../src/animations/dots-vertical-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DotsVerticalIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      animate(\n        \".dot-top\",\n        {\n          y: [-2, 0],\n          scale: [1, 1.2, 1],\n        },\n        {\n          duration: 0.3,\n          ease: \"easeOut\",\n        },\n      );\n\n      animate(\n        \".dot-middle\",\n        {\n          scale: [1, 1.3, 1],\n        },\n        {\n          duration: 0.3,\n          delay: 0.1,\n          ease: \"easeOut\",\n        },\n      );\n\n      animate(\n        \".dot-bottom\",\n        {\n          y: [2, 0],\n          scale: [1, 1.2, 1],\n        },\n        {\n          duration: 0.3,\n          delay: 0.2,\n          ease: \"easeOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".dot-top, .dot-middle, .dot-bottom\",\n        { y: 0, scale: 1 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n\n        <motion.path\n          d=\"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-middle\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-bottom\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"\n          className=\"dot-top\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nDotsVerticalIcon.displayName = \"DotsVerticalIcon\";\nexport default DotsVerticalIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAmB,GAErB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAyBpC,AAxBA,EACE,YACA;GACE,GAAG,CAAC,IAAI,CAAC;GACT,OAAO;IAAC;IAAG;IAAK;GAAC;EACnB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,EACE,eACA,EACE,OAAO;GAAC;GAAG;GAAK;EAAC,EACnB,GACA;GACE,UAAU;GACV,OAAO;GACP,MAAM;EACR,CACF,GAEA,EACE,eACA;GACE,GAAG,CAAC,GAAG,CAAC;GACR,OAAO;IAAC;IAAG;IAAK;GAAC;EACnB,GACA;GACE,UAAU;GACV,OAAO;GACP,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,sCACA;GAAE,GAAG;GAAG,OAAO;EAAE,GACjB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,cAAc;EACd,YAAY;EAbd,UAAA;GAeE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GAEnD,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;GAED,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;GAED,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAU;IACV,OAAO,EAAE,iBAAiB,UAAU;GACrC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAiB,cAAc"}

package/dist/animations/double-check-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DoubleCheckIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DoubleCheckIcon;
+//# sourceMappingURL=double-check-icon.d.ts.map

package/dist/animations/double-check-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"double-check-icon.d.ts","sourceRoot":"","sources":["../../src/animations/double-check-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIrE,QAAA,MAAM,eAAe,kHA+EpB,CAAC;AAGF,eAAe,eAAe,CAAC"}

package/dist/animations/double-check-icon.js

@@ -0,0 +1,64 @@
+import { scaledStrokeWidth as e } from "./types.js";
+import { forwardRef as t, useCallback as n, useImperativeHandle as r } from "react";
+import { motion as i, useAnimate as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/animations/double-check-icon.tsx
+var c = t(({ size: t = 24, color: c = "currentColor", strokeWidth: l = 2, className: u = "" }, d) => {
+	let [f, p] = a(), m = n(async () => {
+		await p(".check-first", {
+			pathLength: [0, 1],
+			opacity: [0, 1]
+		}, {
+			duration: .5,
+			ease: "easeInOut"
+		}), await p(".check-second", {
+			pathLength: [0, 1],
+			opacity: [0, 1]
+		}, {
+			duration: .5,
+			ease: "easeInOut"
+		});
+	}, [p]), h = n(() => {
+		p(".check-first, .check-second", {
+			pathLength: 1,
+			opacity: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [p]);
+	return r(d, () => ({
+		startAnimation: m,
+		stopAnimation: h
+	})), /* @__PURE__ */ o(i.div, {
+		ref: f,
+		className: `inline-flex cursor-pointer ${u}`,
+		onHoverStart: m,
+		onHoverEnd: h,
+		children: /* @__PURE__ */ s("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: t,
+			height: t,
+			viewBox: "0 0 48 48",
+			fill: "none",
+			stroke: c,
+			strokeWidth: e(l, 48),
+			strokeMiterlimit: "10",
+			strokeLinecap: "square",
+			children: [/* @__PURE__ */ o(i.path, {
+				className: "check-first",
+				style: { transformOrigin: "19px 25px" },
+				d: "M3 26.4L11.8846 39L35 11"
+			}), /* @__PURE__ */ o(i.path, {
+				className: "check-second",
+				style: { transformOrigin: "33px 25px" },
+				d: "M45 11L21.8847 39L20.2098 36.6248"
+			})]
+		})
+	});
+});
+c.displayName = "DoubleCheckIcon";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=double-check-icon.js.map

package/dist/animations/double-check-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"double-check-icon.js","names":[],"sources":["../../src/animations/double-check-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { scaledStrokeWidth } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DoubleCheckIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      await animate(\n        \".check-first\",\n        {\n          pathLength: [0, 1],\n          opacity: [0, 1],\n        },\n        {\n          duration: 0.5,\n          ease: \"easeInOut\",\n        },\n      );\n\n      await animate(\n        \".check-second\",\n        {\n          pathLength: [0, 1],\n          opacity: [0, 1],\n        },\n        {\n          duration: 0.5,\n          ease: \"easeInOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".check-first, .check-second\",\n        { pathLength: 1, opacity: 1 },\n        { duration: 0.2, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.div\n        ref={scope}\n        className={`inline-flex cursor-pointer ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 48 48\"\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}\n          strokeMiterlimit=\"10\"\n          strokeLinecap=\"square\"\n        >\n          <motion.path\n            className=\"check-first\"\n            style={{ transformOrigin: \"19px 25px\" }}\n            d=\"M3 26.4L11.8846 39L35 11\"\n          />\n\n          <motion.path\n            className=\"check-second\"\n            style={{ transformOrigin: \"33px 25px\" }}\n            d=\"M45 11L21.8847 39L20.2098 36.6248\"\n          />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nDoubleCheckIcon.displayName = \"DoubleCheckIcon\";\nexport default DoubleCheckIcon;\n"],"mappings":";;;;;AAKA,IAAM,IAAkB,GAEpB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAapC,AAZA,MAAM,EACJ,gBACA;GACE,YAAY,CAAC,GAAG,CAAC;GACjB,SAAS,CAAC,GAAG,CAAC;EAChB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,MAAM,EACJ,iBACA;GACE,YAAY,CAAC,GAAG,CAAC;GACjB,SAAS,CAAC,GAAG,CAAC;EAChB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,+BACA;GAAE,YAAY;GAAG,SAAS;EAAE,GAC5B;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,WAAW,8BAA8B;EACzC,cAAc;EACd,YAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ;GACR,aAAa,EAAkB,GAAa,EAAE;GAC9C,kBAAiB;GACjB,eAAc;GAThB,UAAA,CAWE,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,YAAY;IACtC,GAAE;GACH,CAAA,GAED,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,YAAY;IACtC,GAAE;GACH,CAAA,CACE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAgB,cAAc"}

package/dist/animations/down-chevron.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DownChevron: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DownChevron;
+//# sourceMappingURL=down-chevron.d.ts.map

package/dist/animations/down-chevron.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"down-chevron.d.ts","sourceRoot":"","sources":["../../src/animations/down-chevron.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,WAAW,kHAsDhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/animations/down-chevron.js

@@ -0,0 +1,52 @@
+import { forwardRef as e, useCallback as t, useImperativeHandle as n } from "react";
+import { motion as r, useAnimate as i } from "motion/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/animations/down-chevron.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		await f(".chevron-down", { y: [
+			0,
+			6,
+			0
+		] }, {
+			duration: .8,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".chevron-down", { y: 0 }, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.div, {
+		ref: d,
+		className: `inline-flex cursor-pointer items-center justify-center ${l}`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: /* @__PURE__ */ o("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: e,
+			height: e,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: s,
+			strokeWidth: c,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "chevron-down",
+			children: [/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}), /* @__PURE__ */ a("path", { d: "M6 9l6 6l6 -6" })]
+		})
+	});
+});
+s.displayName = "DownChevron";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=down-chevron.js.map

package/dist/animations/down-chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"down-chevron.js","names":[],"sources":["../../src/animations/down-chevron.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DownChevron = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      await animate(\n        \".chevron-down\",\n        {\n          y: [0, 6, 0],\n        },\n        {\n          duration: 0.8,\n          ease: \"easeInOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\".chevron-down\", { y: 0 }, { duration: 0.2, ease: \"easeInOut\" });\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.div\n        ref={scope}\n        className={`inline-flex cursor-pointer items-center justify-center ${className}`}\n        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"chevron-down\"\n        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nDownChevron.displayName = \"DownChevron\";\nexport default DownChevron;\n"],"mappings":";;;;AAIA,IAAM,IAAc,GAEhB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EACpC,MAAM,EACJ,iBACA,EACE,GAAG;GAAC;GAAG;GAAG;EAAC,EACb,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EAAQ,iBAAiB,EAAE,GAAG,EAAE,GAAG;GAAE,UAAU;GAAK,MAAM;EAAY,CAAC;CACzE,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,WAAW,0DAA0D;EACrE,cAAc;EACd,YAAY;EAEZ,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ;GACK;GACb,eAAc;GACd,gBAAe;GACf,WAAU;GAVZ,UAAA,CAYE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA,GACnD,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA,CACtB;;CACK,CAAA;AAEhB,CACF;AAEA,EAAY,cAAc"}

package/dist/animations/download-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DownloadIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DownloadIcon;
+//# sourceMappingURL=download-icon.d.ts.map

package/dist/animations/download-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-icon.d.ts","sourceRoot":"","sources":["../../src/animations/download-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,YAAY,kHAwGjB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/dist/animations/download-icon.js

@@ -0,0 +1,120 @@
+import { forwardRef as e, useCallback as t, useImperativeHandle as n, useRef as r } from "react";
+import { motion as i, useAnimate as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/animations/download-icon.tsx
+var c = e(({ size: e = 24, color: c = "currentColor", strokeWidth: l = 2, className: u = "" }, d) => {
+	let [f, p] = a(), m = r(!1), h = t(async () => {
+		if (!m.current) for (m.current = !0; m.current && (p(".arrow-head", {
+			y: [
+				0,
+				8,
+				8,
+				-8,
+				0
+			],
+			opacity: [
+				1,
+				0,
+				0,
+				0,
+				1
+			]
+		}, {
+			duration: 1,
+			times: [
+				0,
+				.4,
+				.5,
+				.6,
+				1
+			],
+			ease: "easeInOut"
+		}), await p(".arrow-stem", {
+			y: [
+				0,
+				8,
+				8,
+				-8,
+				0
+			],
+			opacity: [
+				1,
+				0,
+				0,
+				0,
+				1
+			]
+		}, {
+			duration: 1,
+			times: [
+				0,
+				.3,
+				.4,
+				.5,
+				1
+			],
+			ease: "easeInOut"
+		}), !(!m.current || (await p(".tray", {
+			y: [
+				0,
+				2,
+				0
+			],
+			scale: [
+				1,
+				1.05,
+				1
+			]
+		}, {
+			duration: .3,
+			ease: "easeOut"
+		}), !m.current)));) await new Promise((e) => setTimeout(e, 200));
+	}, [p]), g = t(() => {
+		m.current = !1, p(".arrow-head, .arrow-stem, .tray", {
+			y: 0,
+			opacity: 1,
+			scale: 1
+		}, { duration: .3 });
+	}, [p]);
+	return n(d, () => ({
+		startAnimation: h,
+		stopAnimation: g
+	})), /* @__PURE__ */ s(i.svg, {
+		ref: f,
+		onHoverStart: h,
+		onHoverEnd: g,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: c,
+		strokeWidth: l,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${u}`,
+		style: { overflow: "visible" },
+		children: [
+			/* @__PURE__ */ o(i.path, {
+				className: "tray",
+				d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+				style: { transformOrigin: "center bottom" }
+			}),
+			/* @__PURE__ */ o(i.path, {
+				className: "arrow-stem",
+				d: "M12 15V3",
+				style: { transformOrigin: "center" }
+			}),
+			/* @__PURE__ */ o(i.path, {
+				className: "arrow-head",
+				d: "m7 10 5 5 5-5",
+				style: { transformOrigin: "center" }
+			})
+		]
+	});
+});
+c.displayName = "DownloadIcon";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=download-icon.js.map

package/dist/animations/download-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-icon.js","names":[],"sources":["../../src/animations/download-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback, useRef } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst DownloadIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n    const isAnimatingRef = useRef(false);\n\n    const start = useCallback(async () => {\n      if (isAnimatingRef.current) return;\n      isAnimatingRef.current = true;\n\n      while (isAnimatingRef.current) {\n        // 1. Initial Arrow Drop through Tray\n        animate(\n          \".arrow-head\",\n          { y: [0, 8, 8, -8, 0], opacity: [1, 0, 0, 0, 1] },\n          {\n            duration: 1,\n            times: [0, 0.4, 0.5, 0.6, 1],\n            ease: \"easeInOut\",\n          },\n        );\n\n        await animate(\n          \".arrow-stem\",\n          { y: [0, 8, 8, -8, 0], opacity: [1, 0, 0, 0, 1] },\n          {\n            duration: 1,\n            times: [0, 0.3, 0.4, 0.5, 1],\n            ease: \"easeInOut\",\n          },\n        );\n\n        if (!isAnimatingRef.current) break;\n\n        // 2. Tray \"Weight\" Pulse\n        await animate(\n          \".tray\",\n          { y: [0, 2, 0], scale: [1, 1.05, 1] },\n          { duration: 0.3, ease: \"easeOut\" },\n        );\n\n        if (!isAnimatingRef.current) break;\n\n        // Slight pause between cycles\n        await new Promise((resolve) => setTimeout(resolve, 200));\n      }\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      isAnimatingRef.current = false;\n      animate(\n        \".arrow-head, .arrow-stem, .tray\",\n        { y: 0, opacity: 1, scale: 1 },\n        { duration: 0.3 },\n      );\n    }, [animate]);\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={start}\n        onHoverEnd={stop}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={`cursor-pointer ${className}`}\n        style={{ overflow: \"visible\" }}\n      >\n        {/* Tray */}\n        <motion.path\n          className=\"tray\"\n          d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\n          style={{ transformOrigin: \"center bottom\" }}\n        />\n\n        {/* Arrow Stem */}\n        <motion.path\n          className=\"arrow-stem\"\n          d=\"M12 15V3\"\n          style={{ transformOrigin: \"center\" }}\n        />\n\n        {/* Arrow Head */}\n        <motion.path\n          className=\"arrow-head\"\n          d=\"m7 10 5 5 5-5\"\n          style={{ transformOrigin: \"center\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nDownloadIcon.displayName = \"DownloadIcon\";\nexport default DownloadIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAe,GAEjB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAC9B,IAAiB,EAAO,EAAK,GAE7B,IAAQ,EAAY,YAAY;EAChC,OAAe,SAGnB,KAFA,EAAe,UAAU,IAElB,EAAe,YAEpB,EACE,eACA;GAAE,GAAG;IAAC;IAAG;IAAG;IAAG;IAAI;GAAC;GAAG,SAAS;IAAC;IAAG;IAAG;IAAG;IAAG;GAAC;EAAE,GAChD;GACE,UAAU;GACV,OAAO;IAAC;IAAG;IAAK;IAAK;IAAK;GAAC;GAC3B,MAAM;EACR,CACF,GAEA,MAAM,EACJ,eACA;GAAE,GAAG;IAAC;IAAG;IAAG;IAAG;IAAI;GAAC;GAAG,SAAS;IAAC;IAAG;IAAG;IAAG;IAAG;GAAC;EAAE,GAChD;GACE,UAAU;GACV,OAAO;IAAC;IAAG;IAAK;IAAK;IAAK;GAAC;GAC3B,MAAM;EACR,CACF,GAKA,EAHI,CAAC,EAAe,YAGpB,MAAM,EACJ,SACA;GAAE,GAAG;IAAC;IAAG;IAAG;GAAC;GAAG,OAAO;IAAC;IAAG;IAAM;GAAC;EAAE,GACpC;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC,GAEI,CAAC,EAAe,aAGpB,MAAM,IAAI,SAAS,MAAY,WAAW,GAAS,GAAG,CAAC;CAE3D,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAE7B,AADA,EAAe,UAAU,IACzB,EACE,mCACA;GAAE,GAAG;GAAG,SAAS;GAAG,OAAO;EAAE,GAC7B,EAAE,UAAU,GAAI,CAClB;CACF,GAAG,CAAC,CAAO,CAAC;CAOZ,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,cAAc;EACd,YAAY;EACZ,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,OAAO,EAAE,UAAU,UAAU;EAd/B,UAAA;GAiBE,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,OAAO,EAAE,iBAAiB,gBAAgB;GAC3C,CAAA;GAGD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,OAAO,EAAE,iBAAiB,SAAS;GACpC,CAAA;GAGD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,OAAO,EAAE,iBAAiB,SAAS;GACpC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAa,cAAc"}

package/dist/animations/drum-icon.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedIconHandle, AnimatedIconProps } from './types';
+declare const DrumIcon: import('react').ForwardRefExoticComponent<AnimatedIconProps & import('react').RefAttributes<AnimatedIconHandle>>;
+export default DrumIcon;
+//# sourceMappingURL=drum-icon.d.ts.map

package/dist/animations/drum-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drum-icon.d.ts","sourceRoot":"","sources":["../../src/animations/drum-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrE,QAAA,MAAM,QAAQ,kHA2Eb,CAAC;AAGF,eAAe,QAAQ,CAAC"}