nfx-ui 0.17.0 → 0.22.0

package/dist/animations/filled-checked-icon.js

@@ -0,0 +1,84 @@
+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/filled-checked-icon.tsx
+var s = e(({ size: e = 24, className: s = "", color: c = "currentColor", strokeWidth: l = "1" }, u) => {
+	let [d, f] = i(), p = t(async () => {
+		await f("svg", { scale: 1.1 }, {
+			duration: .1,
+			ease: "easeInOut"
+		}), f(".filled-circle", {
+			scale: 1.15,
+			opacity: .8
+		}, {
+			duration: .15,
+			ease: "easeOut"
+		}), await f(".check-icon", { pathLength: 0 }, {
+			duration: .1,
+			ease: "easeInOut"
+		}), f(".filled-circle", {
+			scale: 1,
+			opacity: 1
+		}, {
+			duration: .3,
+			ease: "easeInOut"
+		}), await f(".check-icon", { pathLength: 1 }, {
+			duration: .4,
+			ease: "easeInOut"
+		}), await f("svg", { scale: 1 }, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f("svg, .filled-circle, .check-icon", {
+			scale: 1,
+			opacity: 1,
+			pathLength: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.div, {
+		ref: d,
+		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: "currentColor",
+			stroke: c || "currentColor",
+			strokeWidth: l,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: s,
+			children: [
+				/* @__PURE__ */ a("path", {
+					stroke: "none",
+					d: "M0 0h24v24H0z",
+					fill: "none"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336z",
+					className: `filled-circle ${s}`,
+					style: { transformOrigin: "center" }
+				}),
+				/* @__PURE__ */ a(r.path, {
+					d: "M15.707 9.293a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",
+					className: "check-icon text-background",
+					fill: "currentColor"
+				})
+			]
+		})
+	});
+});
+s.displayName = "FilledCheckedIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=filled-checked-icon.js.map

package/dist/animations/filled-checked-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-checked-icon.js","names":[],"sources":["../../src/animations/filled-checked-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst FilledCheckedIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, className = \"\", color = \"currentColor\", strokeWidth = \"1\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = useCallback(async () => {\n      await animate(\n        \"svg\",\n        {\n          scale: 1.1,\n        },\n        {\n          duration: 0.1,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".filled-circle\",\n        {\n          scale: 1.15,\n          opacity: 0.8,\n        },\n        {\n          duration: 0.15,\n          ease: \"easeOut\",\n        },\n      );\n      await animate(\n        \".check-icon\",\n        {\n          pathLength: 0,\n        },\n        {\n          duration: 0.1,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".filled-circle\",\n        {\n          scale: 1,\n          opacity: 1,\n        },\n        {\n          duration: 0.3,\n          ease: \"easeInOut\",\n        },\n      );\n      await animate(\n        \".check-icon\",\n        {\n          pathLength: 1,\n        },\n        {\n          duration: 0.4,\n          ease: \"easeInOut\",\n        },\n      );\n      await animate(\n        \"svg\",\n        {\n          scale: 1,\n        },\n        {\n          duration: 0.2,\n          ease: \"easeInOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \"svg, .filled-circle, .check-icon\",\n        { scale: 1, opacity: 1, pathLength: 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 ref={scope} onHoverStart={start} onHoverEnd={stop}>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          stroke={color || \"currentColor\"}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={className}\n        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <motion.path\n            d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336z\"\n            className={`filled-circle ${className}`}\n            style={{ transformOrigin: \"center\" }}\n          />\n          <motion.path\n            d=\"M15.707 9.293a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"\n            className=\"check-icon text-background\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nFilledCheckedIcon.displayName = \"FilledCheckedIcon\";\nexport default FilledCheckedIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAoB,GAEtB,EAAE,UAAO,IAAI,eAAY,IAAI,WAAQ,gBAAgB,iBAAc,OACnE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAqDpC,AApDA,MAAM,EACJ,OACA,EACE,OAAO,IACT,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,kBACA;GACE,OAAO;GACP,SAAS;EACX,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,MAAM,EACJ,eACA,EACE,YAAY,EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,kBACA;GACE,OAAO;GACP,SAAS;EACX,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,MAAM,EACJ,eACA,EACE,YAAY,EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,MAAM,EACJ,OACA,EACE,OAAO,EACT,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,oCACA;GAAE,OAAO;GAAG,SAAS;GAAG,YAAY;EAAE,GACtC;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;EAAY,KAAK;EAAO,cAAc;EAAO,YAAY;EACvD,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ,KAAS;GACJ;GACb,eAAc;GACd,gBAAe;GACJ;GAVb,UAAA;IAYE,kBAAC,QAAD;KAAM,QAAO;KAAO,GAAE;KAAgB,MAAK;IAAQ,CAAA;IACnD,kBAAC,EAAO,MAAR;KACE,GAAE;KACF,WAAW,iBAAiB;KAC5B,OAAO,EAAE,iBAAiB,SAAS;IACpC,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,GAAE;KACF,WAAU;KACV,MAAK;IACN,CAAA;GACE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAkB,cAAc"}

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

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

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

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

package/dist/animations/filter-icon.js

@@ -0,0 +1,186 @@
+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/filter-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 && (Array.from({ length: 8 }).map((e, t) => `.p-in-${t}`).forEach((e, t) => {
+			p(e, {
+				y: [-4, 8],
+				opacity: [
+					0,
+					1,
+					0
+				],
+				scale: [
+					.3,
+					.8,
+					.3
+				]
+			}, {
+				duration: .8,
+				delay: t * .1,
+				ease: "easeIn"
+			});
+		}), await new Promise((e) => setTimeout(e, 600)), m.current) && (p(".funnel", {
+			scale: [
+				1,
+				1.1,
+				1
+			],
+			strokeWidth: [
+				l,
+				l + .8,
+				l
+			]
+		}, {
+			duration: .4,
+			ease: "backOut"
+		}), [".p-out-1", ".p-out-2"].forEach((e, t) => {
+			p(e, {
+				y: [14, 22],
+				opacity: [
+					0,
+					1,
+					0
+				],
+				scale: [
+					.5,
+					1,
+					.5
+				]
+			}, {
+				duration: .6,
+				delay: t * .2,
+				ease: "easeOut"
+			});
+		}), await new Promise((e) => setTimeout(e, 1e3)), m.current););
+	}, [p, l]), g = t(() => {
+		m.current = !1, p(".funnel", {
+			rotate: 0,
+			scale: 1,
+			strokeWidth: l
+		}, { duration: .3 }), p("[class^='p-in'], [class^='p-out']", { opacity: 0 }, { duration: .3 });
+	}, [p, l]);
+	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: "funnel",
+				d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+				style: { transformOrigin: "12px 14px" }
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-0",
+				cx: "12",
+				cy: "0",
+				r: "0.5",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-1",
+				cx: "8",
+				cy: "-1",
+				r: "0.4",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-2",
+				cx: "16",
+				cy: "-2",
+				r: "0.6",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-3",
+				cx: "10",
+				cy: "1",
+				r: "0.4",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-4",
+				cx: "14",
+				cy: "0",
+				r: "0.5",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-5",
+				cx: "7",
+				cy: "2",
+				r: "0.3",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-6",
+				cx: "17",
+				cy: "1",
+				r: "0.4",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-in-7",
+				cx: "12",
+				cy: "-3",
+				r: "0.5",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-out-1",
+				cx: "12",
+				cy: "0",
+				r: "1.2",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			}),
+			/* @__PURE__ */ o(i.circle, {
+				className: "p-out-2",
+				cx: "12",
+				cy: "0",
+				r: "1",
+				fill: c,
+				stroke: "none",
+				opacity: 0
+			})
+		]
+	});
+});
+c.displayName = "FilterIcon";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=filter-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-icon.js","names":[],"sources":["../../src/animations/filter-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback, useRef } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst FilterIcon = 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      // Filtering Loop\n      while (isAnimatingRef.current) {\n        // 1. Swarm of Input Particles (8-10 entering)\n        const inParticles = Array.from({ length: 8 }).map(\n          (_, i) => `.p-in-${i}`,\n        );\n        inParticles.forEach((selector, i) => {\n          animate(\n            selector,\n            { y: [-4, 8], opacity: [0, 1, 0], scale: [0.3, 0.8, 0.3] },\n            { duration: 0.8, delay: i * 0.1, ease: \"easeIn\" },\n          );\n        });\n\n        // 2. Wait for \"processing\"\n        await new Promise((resolve) => setTimeout(resolve, 600));\n        if (!isAnimatingRef.current) break;\n\n        // 3. Output Particles (2 emerge from bottom)\n        const outParticles = [\".p-out-1\", \".p-out-2\"];\n\n        // Sync Neck Pump with output\n        animate(\n          \".funnel\",\n          {\n            scale: [1, 1.1, 1],\n            strokeWidth: [strokeWidth, strokeWidth + 0.8, strokeWidth],\n          },\n          { duration: 0.4, ease: \"backOut\" },\n        );\n\n        outParticles.forEach((selector, i) => {\n          animate(\n            selector,\n            { y: [14, 22], opacity: [0, 1, 0], scale: [0.5, 1, 0.5] },\n            { duration: 0.6, delay: i * 0.2, ease: \"easeOut\" },\n          );\n        });\n\n        await new Promise((resolve) => setTimeout(resolve, 1000));\n        if (!isAnimatingRef.current) break;\n      }\n    }, [animate, strokeWidth]);\n\n    const stop = useCallback(() => {\n      isAnimatingRef.current = false;\n      animate(\n        \".funnel\",\n        { rotate: 0, scale: 1, strokeWidth },\n        { duration: 0.3 },\n      );\n      animate(\n        \"[class^='p-in'], [class^='p-out']\",\n        { opacity: 0 },\n        { duration: 0.3 },\n      );\n    }, [animate, strokeWidth]);\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        <motion.path\n          className=\"funnel\"\n          d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n          style={{ transformOrigin: \"12px 14px\" }}\n        />\n\n        {/* Input Swarm (8 Particles) */}\n        <motion.circle\n          className=\"p-in-0\"\n          cx=\"12\"\n          cy=\"0\"\n          r=\"0.5\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-1\"\n          cx=\"8\"\n          cy=\"-1\"\n          r=\"0.4\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-2\"\n          cx=\"16\"\n          cy=\"-2\"\n          r=\"0.6\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-3\"\n          cx=\"10\"\n          cy=\"1\"\n          r=\"0.4\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-4\"\n          cx=\"14\"\n          cy=\"0\"\n          r=\"0.5\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-5\"\n          cx=\"7\"\n          cy=\"2\"\n          r=\"0.3\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-6\"\n          cx=\"17\"\n          cy=\"1\"\n          r=\"0.4\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-in-7\"\n          cx=\"12\"\n          cy=\"-3\"\n          r=\"0.5\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n\n        {/* Output Stream (2 Filtered Particles) */}\n        <motion.circle\n          className=\"p-out-1\"\n          cx=\"12\"\n          cy=\"0\"\n          r=\"1.2\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n        <motion.circle\n          className=\"p-out-2\"\n          cx=\"12\"\n          cy=\"0\"\n          r=\"1\"\n          fill={color}\n          stroke=\"none\"\n          opacity={0}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nFilterIcon.displayName = \"FilterIcon\";\nexport default FilterIcon;\n"],"mappings":"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"}

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

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

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

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

package/dist/animations/flame-icon.js

@@ -0,0 +1,74 @@
+import { forwardRef as e, useImperativeHandle as t } from "react";
+import { motion as n, useAnimate as r } from "motion/react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/animations/flame-icon.tsx
+var a = e(({ size: e = 24, color: a = "currentColor", strokeWidth: o = 2, className: s = "" }, c) => {
+	let [l, u] = r(), d = async () => {
+		await u(".flame-group", {
+			y: [
+				0,
+				-2,
+				-1,
+				-2,
+				0
+			],
+			rotate: [
+				0,
+				4,
+				-3,
+				2,
+				0
+			],
+			x: [
+				0,
+				1,
+				-1,
+				.5,
+				0
+			]
+		}, {
+			duration: .6,
+			ease: "easeOut"
+		});
+	}, f = () => {
+		u(".flame-group", {
+			x: 0,
+			y: 0,
+			rotate: 0
+		}, {
+			duration: .2,
+			ease: "easeOut"
+		});
+	};
+	return t(c, () => ({
+		startAnimation: d,
+		stopAnimation: f
+	})), /* @__PURE__ */ i(n.svg, {
+		ref: l,
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: a,
+		strokeWidth: o,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${s}`,
+		style: { overflow: "visible" },
+		onHoverStart: d,
+		onHoverEnd: f,
+		children: /* @__PURE__ */ i(n.g, {
+			className: "flame-group",
+			style: {
+				transformOrigin: "50% 100%",
+				transformBox: "fill-box"
+			},
+			children: /* @__PURE__ */ i(n.path, { d: "M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.621 -2.333 5.588c0 3.704 3.134 6.706 7 6.706s7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235" })
+		})
+	});
+});
+a.displayName = "FlameIcon";
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=flame-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flame-icon.js","names":[],"sources":["../../src/animations/flame-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst FlameIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = async () => {\n      await animate(\n        \".flame-group\",\n        {\n          y: [0, -2, -1, -2, 0],\n          rotate: [0, 4, -3, 2, 0],\n          x: [0, 1, -1, 0.5, 0],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeOut\",\n        },\n      );\n    };\n\n    const stop = () => {\n      animate(\n        \".flame-group\",\n        { x: 0, y: 0, rotate: 0 },\n        { duration: 0.2, ease: \"easeOut\" },\n      );\n    };\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    return (\n      <motion.svg\n        ref={scope}\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        onHoverStart={start}\n        onHoverEnd={stop}\n      >\n        <motion.g\n          className=\"flame-group\"\n          style={{\n            transformOrigin: \"50% 100%\",\n            transformBox: \"fill-box\",\n          }}\n        >\n          <motion.path d=\"M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.621 -2.333 5.588c0 3.704 3.134 6.706 7 6.706s7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235\" />\n        </motion.g>\n      </motion.svg>\n    );\n  },\n);\n\nFlameIcon.displayName = \"FlameIcon\";\nexport default FlameIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAY,GAEd,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,YAAY;EACxB,MAAM,EACJ,gBACA;GACE,GAAG;IAAC;IAAG;IAAI;IAAI;IAAI;GAAC;GACpB,QAAQ;IAAC;IAAG;IAAG;IAAI;IAAG;GAAC;GACvB,GAAG;IAAC;IAAG;IAAG;IAAI;IAAK;GAAC;EACtB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAEM,UAAa;EACjB,EACE,gBACA;GAAE,GAAG;GAAG,GAAG;GAAG,QAAQ;EAAE,GACxB;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC;CACF;CAOA,OALA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAGA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAC7B,OAAO,EAAE,UAAU,UAAU;EAC7B,cAAc;EACd,YAAY;EAEZ,UAAA,kBAAC,EAAO,GAAR;GACE,WAAU;GACV,OAAO;IACL,iBAAiB;IACjB,cAAc;GAChB;GAEA,UAAA,kBAAC,EAAO,MAAR,EAAa,GAAE,kPAAmP,CAAA;EAC1P,CAAA;CACA,CAAA;AAEhB,CACF;AAEA,EAAU,cAAc"}

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

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

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

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

package/dist/animations/focus-icon.js

@@ -0,0 +1,68 @@
+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/focus-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(".center", { scale: 1.4 }, {
+			duration: .25,
+			ease: "easeOut"
+		}), f(".corners", { scale: .85 }, {
+			duration: .25,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(() => {
+		f(".center, .corners", { 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(r.circle, {
+				className: "center",
+				cx: "12",
+				cy: "12",
+				r: "3",
+				style: { transformOrigin: "12px 12px" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "corners",
+				d: "M3 7V5a2 2 0 0 1 2-2h2"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "corners",
+				d: "M17 3h2a2 2 0 0 1 2 2v2"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "corners",
+				d: "M21 17v2a2 2 0 0 1-2 2h-2"
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "corners",
+				d: "M7 21H5a2 2 0 0 1-2-2v-2"
+			})
+		]
+	});
+});
+s.displayName = "FocusIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=focus-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"focus-icon.js","names":[],"sources":["../../src/animations/focus-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst FocusIcon = 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(\".center\", { scale: 1.4 }, { duration: 0.25, ease: \"easeOut\" });\n\n      animate(\".corners\", { scale: 0.85 }, { duration: 0.25, ease: \"easeOut\" });\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".center, .corners\",\n        { 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        <motion.circle\n          className=\"center\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"3\"\n          style={{ transformOrigin: \"12px 12px\" }}\n        />\n        <motion.path className=\"corners\" d=\"M3 7V5a2 2 0 0 1 2-2h2\" />\n        <motion.path className=\"corners\" d=\"M17 3h2a2 2 0 0 1 2 2v2\" />\n        <motion.path className=\"corners\" d=\"M21 17v2a2 2 0 0 1-2 2h-2\" />\n        <motion.path className=\"corners\" d=\"M7 21H5a2 2 0 0 1-2-2v-2\" />\n      </motion.svg>\n    );\n  },\n);\n\nFocusIcon.displayName = \"FocusIcon\";\nexport default FocusIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAY,GAEd,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAGpC,AAFA,EAAQ,WAAW,EAAE,OAAO,IAAI,GAAG;GAAE,UAAU;GAAM,MAAM;EAAU,CAAC,GAEtE,EAAQ,YAAY,EAAE,OAAO,IAAK,GAAG;GAAE,UAAU;GAAM,MAAM;EAAU,CAAC;CAC1E,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,qBACA,EAAE,OAAO,EAAE,GACX;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,EAAO,QAAR;IACE,WAAU;IACV,IAAG;IACH,IAAG;IACH,GAAE;IACF,OAAO,EAAE,iBAAiB,YAAY;GACvC,CAAA;GACD,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAU,GAAE;GAA0B,CAAA;GAC7D,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAU,GAAE;GAA2B,CAAA;GAC9D,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAU,GAAE;GAA6B,CAAA;GAChE,kBAAC,EAAO,MAAR;IAAa,WAAU;IAAU,GAAE;GAA4B,CAAA;EACrD;;AAEhB,CACF;AAEA,EAAU,cAAc"}

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

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

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

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

package/dist/animations/gamepad-icon.js

@@ -0,0 +1,130 @@
+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/gamepad-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(() => {
+		f(d.current, { scale: 1.05 }, {
+			duration: .2,
+			ease: "easeOut"
+		}), f(".gamepad-dpad", {
+			x: [
+				0,
+				-.5,
+				.5,
+				-.5,
+				0
+			],
+			y: [
+				0,
+				.5,
+				-.5,
+				.5,
+				0
+			]
+		}, {
+			duration: .4,
+			repeat: Infinity,
+			ease: "linear"
+		}), f(".gamepad-dot-1", {
+			opacity: [
+				1,
+				.4,
+				1
+			],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .6,
+			repeat: Infinity,
+			ease: "easeInOut"
+		}), f(".gamepad-dot-2", {
+			opacity: [
+				1,
+				.4,
+				1
+			],
+			scale: [
+				1,
+				1.2,
+				1
+			]
+		}, {
+			duration: .6,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .3
+		});
+	}, [f, d]), m = t(() => {
+		f(d.current, { scale: 1 }, { duration: .2 }), f(".gamepad-dpad", {
+			x: 0,
+			y: 0
+		}, { duration: .2 }), f(".gamepad-dot-1", {
+			opacity: 1,
+			scale: 1
+		}, { duration: .2 }), f(".gamepad-dot-2", {
+			opacity: 1,
+			scale: 1
+		}, { duration: .2 });
+	}, [f, d]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ o(r.svg, {
+		ref: d,
+		onHoverStart: p,
+		onHoverEnd: m,
+		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}`,
+		style: { overflow: "visible" },
+		children: [
+			/* @__PURE__ */ a("path", { d: "M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" }),
+			/* @__PURE__ */ o(r.g, {
+				className: "gamepad-dpad",
+				children: [/* @__PURE__ */ a("line", {
+					x1: "6",
+					x2: "10",
+					y1: "11",
+					y2: "11"
+				}), /* @__PURE__ */ a("line", {
+					x1: "8",
+					x2: "8",
+					y1: "9",
+					y2: "13"
+				})]
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "gamepad-dot-1",
+				x1: "15",
+				x2: "15.01",
+				y1: "12",
+				y2: "12",
+				style: { transformOrigin: "15px 12px" }
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "gamepad-dot-2",
+				x1: "18",
+				x2: "18.01",
+				y1: "10",
+				y2: "10",
+				style: { transformOrigin: "18px 10px" }
+			})
+		]
+	});
+});
+s.displayName = "GamepadIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=gamepad-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gamepad-icon.js","names":[],"sources":["../../src/animations/gamepad-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst GamepadIcon = 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(() => {\n      // Body scale pulse\n      animate(\n        scope.current,\n        { scale: 1.05 },\n        { duration: 0.2, ease: \"easeOut\" },\n      );\n\n      // D-pad shake\n      animate(\n        \".gamepad-dpad\",\n        {\n          x: [0, -0.5, 0.5, -0.5, 0],\n          y: [0, 0.5, -0.5, 0.5, 0],\n        },\n        { duration: 0.4, repeat: Infinity, ease: \"linear\" },\n      );\n\n      // Buttons alternate pulse\n      animate(\n        \".gamepad-dot-1\",\n        { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] },\n        { duration: 0.6, repeat: Infinity, ease: \"easeInOut\" },\n      );\n      animate(\n        \".gamepad-dot-2\",\n        { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] },\n        { duration: 0.6, repeat: Infinity, ease: \"easeInOut\", delay: 0.3 },\n      );\n    }, [animate, scope]);\n\n    const stop = useCallback(() => {\n      animate(scope.current, { scale: 1 }, { duration: 0.2 });\n      animate(\".gamepad-dpad\", { x: 0, y: 0 }, { duration: 0.2 });\n      animate(\".gamepad-dot-1\", { opacity: 1, scale: 1 }, { duration: 0.2 });\n      animate(\".gamepad-dot-2\", { opacity: 1, scale: 1 }, { duration: 0.2 });\n    }, [animate, scope]);\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        {/* Body */}\n        <path d=\"M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z\" />\n\n        {/* D-pad Group */}\n        <motion.g className=\"gamepad-dpad\">\n          <line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\" />\n          <line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\" />\n        </motion.g>\n\n        {/* Buttons */}\n        <motion.line\n          className=\"gamepad-dot-1\"\n          x1=\"15\"\n          x2=\"15.01\"\n          y1=\"12\"\n          y2=\"12\"\n          style={{ transformOrigin: \"15px 12px\" }}\n        />\n        <motion.line\n          className=\"gamepad-dot-2\"\n          x1=\"18\"\n          x2=\"18.01\"\n          y1=\"10\"\n          y2=\"10\"\n          style={{ transformOrigin: \"18px 10px\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nGamepadIcon.displayName = \"GamepadIcon\";\nexport default GamepadIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAc,GAEhB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,QAAkB;EAwB9B,AAtBA,EACE,EAAM,SACN,EAAE,OAAO,KAAK,GACd;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC,GAGA,EACE,iBACA;GACE,GAAG;IAAC;IAAG;IAAM;IAAK;IAAM;GAAC;GACzB,GAAG;IAAC;IAAG;IAAK;IAAM;IAAK;GAAC;EAC1B,GACA;GAAE,UAAU;GAAK,QAAQ;GAAU,MAAM;EAAS,CACpD,GAGA,EACE,kBACA;GAAE,SAAS;IAAC;IAAG;IAAK;GAAC;GAAG,OAAO;IAAC;IAAG;IAAK;GAAC;EAAE,GAC3C;GAAE,UAAU;GAAK,QAAQ;GAAU,MAAM;EAAY,CACvD,GACA,EACE,kBACA;GAAE,SAAS;IAAC;IAAG;IAAK;GAAC;GAAG,OAAO;IAAC;IAAG;IAAK;GAAC;EAAE,GAC3C;GAAE,UAAU;GAAK,QAAQ;GAAU,MAAM;GAAa,OAAO;EAAI,CACnE;CACF,GAAG,CAAC,GAAS,CAAK,CAAC,GAEb,IAAO,QAAkB;EAI7B,AAHA,EAAQ,EAAM,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,GAAI,CAAC,GACtD,EAAQ,iBAAiB;GAAE,GAAG;GAAG,GAAG;EAAE,GAAG,EAAE,UAAU,GAAI,CAAC,GAC1D,EAAQ,kBAAkB;GAAE,SAAS;GAAG,OAAO;EAAE,GAAG,EAAE,UAAU,GAAI,CAAC,GACrE,EAAQ,kBAAkB;GAAE,SAAS;GAAG,OAAO;EAAE,GAAG,EAAE,UAAU,GAAI,CAAC;CACvE,GAAG,CAAC,GAAS,CAAK,CAAC;CAOnB,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,QAAD,EAAM,GAAE,6RAA8R,CAAA;GAGtS,kBAAC,EAAO,GAAR;IAAU,WAAU;IAApB,UAAA,CACE,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAK,IAAG;KAAK,IAAG;IAAM,CAAA,GACtC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;IAAM,CAAA,CAC5B;;GAGV,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,OAAO,EAAE,iBAAiB,YAAY;GACvC,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,IAAG;IACH,IAAG;IACH,IAAG;IACH,IAAG;IACH,OAAO,EAAE,iBAAiB,YAAY;GACvC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAY,cAAc"}

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

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

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

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