nfx-ui 0.20.0 → 0.22.0

package/dist/animations/shopping-cart-icon.js

@@ -0,0 +1,118 @@
+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/shopping-cart-icon.tsx
+var c = t(({ size: t = 24, color: c = "currentColor", strokeWidth: l = 2, className: u = "" }, d) => {
+	let [f, p] = a(), m = n(async () => {
+		p(".cart-upper", { x: [
+			0,
+			10,
+			0
+		] }, {
+			duration: .6,
+			ease: "easeInOut"
+		}), p(".cart-wheel-left", {
+			rotate: [
+				0,
+				180,
+				0
+			],
+			x: [
+				0,
+				10,
+				0
+			]
+		}, {
+			duration: .6,
+			ease: "easeInOut"
+		}), p(".cart-wheel-right", {
+			rotate: [
+				0,
+				180,
+				0
+			],
+			x: [
+				0,
+				10,
+				0
+			]
+		}, {
+			duration: .6,
+			ease: "easeInOut"
+		}), p(".cart-item", { y: [
+			0,
+			-2,
+			0
+		] }, {
+			duration: .4,
+			ease: "easeInOut"
+		});
+	}, [p]), h = n(() => {
+		p(".cart-upper, .cart-wheel-left, .cart-wheel-right, .cart-item", {
+			x: 0,
+			rotate: 0,
+			y: 0
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [p]);
+	return r(d, () => ({
+		startAnimation: m,
+		stopAnimation: h
+	})), /* @__PURE__ */ o(i.div, {
+		ref: f,
+		onHoverStart: m,
+		onHoverEnd: h,
+		className: `inline-flex cursor-pointer ${u}`,
+		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: "cart-upper",
+					d: "M8.49994 10H41L37.569 21.4367C36.9345 23.5517 34.9879 25 32.7798 25H10.4999"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-wheel-left",
+					style: { transformOrigin: "11px 41px" },
+					d: "M11 45C13.2091 45 15 43.2091 15 41C15 38.7909 13.2091 37 11 37C8.79086 37 7 38.7909 7 41C7 43.2091 8.79086 45 11 45Z"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-wheel-right",
+					style: { transformOrigin: "37px 41px" },
+					d: "M37 45C39.2091 45 41 43.2091 41 41C41 38.7909 39.2091 37 37 37C34.7909 37 33 38.7909 33 41C33 43.2091 34.7909 45 37 45Z"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-upper",
+					d: "M41 32H9.46174C7.17727 32 6.08953 29.1885 7.77914 27.651L10.6923 25L7.81067 5.14103C7.63231 3.91188 6.57863 3.00005 5.33661 3.00003L3 3"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-item cart-upper",
+					d: "M30 16L30 19"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-item cart-upper",
+					d: "M24 16L24 19"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "cart-item cart-upper",
+					d: "M18 16L18 19"
+				})
+			]
+		})
+	});
+});
+c.displayName = "ShoppingCartIcon";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=shopping-cart-icon.js.map

package/dist/animations/shopping-cart-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopping-cart-icon.js","names":[],"sources":["../../src/animations/shopping-cart-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 ShoppingCartIcon = 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        \".cart-upper\",\n        {\n          x: [0, 10, 0],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".cart-wheel-left\",\n        {\n          rotate: [0, 180, 0],\n          x: [0, 10, 0],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeInOut\",\n        },\n      );\n\n      animate(\n        \".cart-wheel-right\",\n        {\n          rotate: [0, 180, 0],\n          x: [0, 10, 0],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".cart-item\",\n        {\n          y: [0, -2, 0],\n        },\n        {\n          duration: 0.4,\n          ease: \"easeInOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".cart-upper, .cart-wheel-left, .cart-wheel-right, .cart-item\",\n        { x: 0, rotate: 0, y: 0 },\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        onHoverStart={start}\n        onHoverEnd={stop}\n        className={`inline-flex cursor-pointer ${className}`}\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=\"cart-upper\"\n            d=\"M8.49994 10H41L37.569 21.4367C36.9345 23.5517 34.9879 25 32.7798 25H10.4999\"\n          />\n\n          <motion.path\n            className=\"cart-wheel-left\"\n            style={{ transformOrigin: \"11px 41px\" }}\n            d=\"M11 45C13.2091 45 15 43.2091 15 41C15 38.7909 13.2091 37 11 37C8.79086 37 7 38.7909 7 41C7 43.2091 8.79086 45 11 45Z\"\n          />\n\n          <motion.path\n            className=\"cart-wheel-right\"\n            style={{ transformOrigin: \"37px 41px\" }}\n            d=\"M37 45C39.2091 45 41 43.2091 41 41C41 38.7909 39.2091 37 37 37C34.7909 37 33 38.7909 33 41C33 43.2091 34.7909 45 37 45Z\"\n          />\n\n          <motion.path\n            className=\"cart-upper\"\n            d=\"M41 32H9.46174C7.17727 32 6.08953 29.1885 7.77914 27.651L10.6923 25L7.81067 5.14103C7.63231 3.91188 6.57863 3.00005 5.33661 3.00003L3 3\"\n          />\n\n          <motion.path className=\"cart-item cart-upper\" d=\"M30 16L30 19\" />\n          <motion.path className=\"cart-item cart-upper\" d=\"M24 16L24 19\" />\n          <motion.path className=\"cart-item cart-upper\" d=\"M18 16L18 19\" />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nShoppingCartIcon.displayName = \"ShoppingCartIcon\";\nexport default ShoppingCartIcon;\n"],"mappings":";;;;;AAKA,IAAM,IAAmB,GAErB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAkCpC,AAjCA,EACE,eACA,EACE,GAAG;GAAC;GAAG;GAAI;EAAC,EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,oBACA;GACE,QAAQ;IAAC;IAAG;IAAK;GAAC;GAClB,GAAG;IAAC;IAAG;IAAI;GAAC;EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GAEA,EACE,qBACA;GACE,QAAQ;IAAC;IAAG;IAAK;GAAC;GAClB,GAAG;IAAC;IAAG;IAAI;GAAC;EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,cACA,EACE,GAAG;GAAC;GAAG;GAAI;EAAC,EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,gEACA;GAAE,GAAG;GAAG,QAAQ;GAAG,GAAG;EAAE,GACxB;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,cAAc;EACd,YAAY;EACZ,WAAW,8BAA8B;EAEzC,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;IAWE,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,YAAY;KACtC,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,YAAY;KACtC,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAuB,GAAE;IAAgB,CAAA;IAChE,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAuB,GAAE;IAAgB,CAAA;IAChE,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAuB,GAAE;IAAgB,CAAA;GAC7D;;CACK,CAAA;AAEhB,CACF;AAEA,EAAiB,cAAc"}

package/dist/animations/simple-checked-icon.d.ts

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

package/dist/animations/simple-checked-icon.d.ts.map

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

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

@@ -0,0 +1,50 @@
+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/simple-checked-icon.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(".check-path", { pathLength: 0 }, {
+			duration: .1,
+			ease: "easeInOut"
+		}), await f(".check-path", { pathLength: 1 }, {
+			duration: .4,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".check-path", { pathLength: 1 }, { duration: .2 });
+	}, [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: "none",
+			stroke: s,
+			strokeWidth: c,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "",
+			children: [/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}), /* @__PURE__ */ a(r.path, {
+				d: "M5 12l5 5l10 -10",
+				className: `check-path ${l}`
+			})]
+		})
+	});
+});
+s.displayName = "SimpleCheckedIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=simple-checked-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"simple-checked-icon.js","names":[],"sources":["../../src/animations/simple-checked-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst SimpleCheckedIcon = 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-path\",\n        { pathLength: 0 },\n        { duration: 0.1, ease: \"easeInOut\" },\n      );\n      await animate(\n        \".check-path\",\n        { pathLength: 1 },\n        { duration: 0.4, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\".check-path\", { pathLength: 1 }, { duration: 0.2 });\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=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"\"\n        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <motion.path\n            d=\"M5 12l5 5l10 -10\"\n            className={`check-path ${className}`}\n          />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nSimpleCheckedIcon.displayName = \"SimpleCheckedIcon\";\nexport default SimpleCheckedIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAoB,GAEtB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAMpC,AALA,MAAM,EACJ,eACA,EAAE,YAAY,EAAE,GAChB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC,GACA,MAAM,EACJ,eACA,EAAE,YAAY,EAAE,GAChB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EAAQ,eAAe,EAAE,YAAY,EAAE,GAAG,EAAE,UAAU,GAAI,CAAC;CAC7D,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;GACK;GACb,eAAc;GACd,gBAAe;GACf,WAAU;GAVZ,UAAA,CAYE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA,GACnD,kBAAC,EAAO,MAAR;IACE,GAAE;IACF,WAAW,cAAc;GAC1B,CAAA,CACE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAkB,cAAc"}

package/dist/animations/skull-emoji.d.ts

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

package/dist/animations/skull-emoji.d.ts.map

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

package/dist/animations/skull-emoji.js

@@ -0,0 +1,129 @@
+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/skull-emoji.tsx
+var c = t(({ size: t = 24, color: c = "currentColor", strokeWidth: l = 2, className: u = "" }, d) => {
+	let [f, p] = a(), m = n(async () => {
+		p(".skull-head", {
+			rotate: [
+				0,
+				-8,
+				8,
+				-8,
+				8,
+				-4,
+				4,
+				0
+			],
+			y: [
+				0,
+				-2,
+				0,
+				-2,
+				0,
+				-1,
+				0
+			]
+		}, {
+			duration: .6,
+			ease: "easeInOut"
+		}), p(".skull-eye-left, .skull-eye-right", { scale: [
+			1,
+			1.3,
+			.8,
+			1.2,
+			1
+		] }, {
+			duration: .6,
+			ease: "easeInOut"
+		}), await p(".skull-tooth", { y: [
+			0,
+			-3,
+			0,
+			-2,
+			0,
+			-3,
+			0
+		] }, {
+			duration: .5,
+			ease: "easeInOut",
+			delay: .1
+		}), await p(".skull-head", {
+			y: [
+				0,
+				-4,
+				0
+			],
+			scale: [
+				1,
+				1.05,
+				1
+			]
+		}, {
+			duration: .3,
+			ease: "easeOut"
+		});
+	}, [p]), h = n(() => {
+		p(".skull-head, .skull-eye-left, .skull-eye-right, .skull-tooth", {
+			rotate: 0,
+			y: 0,
+			scale: 1
+		}, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [p]);
+	return r(d, () => ({
+		startAnimation: m,
+		stopAnimation: h
+	})), /* @__PURE__ */ o(i.div, {
+		ref: f,
+		onHoverStart: m,
+		onHoverEnd: h,
+		className: `inline-flex cursor-pointer ${u}`,
+		children: /* @__PURE__ */ s("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			x: "0px",
+			y: "0px",
+			width: t,
+			height: t,
+			viewBox: "0 0 32 32",
+			fill: "none",
+			stroke: c,
+			strokeWidth: e(l, 32),
+			strokeMiterlimit: "10",
+			strokeLinecap: "square",
+			children: [
+				/* @__PURE__ */ o(i.path, {
+					className: "skull-tooth-left skull-tooth",
+					d: "M14 27V30"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "skull-tooth-right skull-tooth",
+					d: "M18 27V30"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "skull-head",
+					style: { transformOrigin: "16px 16px" },
+					d: "M16 2C9.09644 2 3.5 7.59644 3.5 14.5C3.5 18.8099 5.68123 22.6104 9 24.8577L9.32436 28.1936C9.424 29.2183 10.2854 30 11.315 30H20.685C21.7146 30 22.576 29.2183 22.6756 28.1936L23 24.8577C26.3188 22.6104 28.5 18.8099 28.5 14.5C28.5 7.59644 22.9036 2 16 2Z"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "skull-eye-right",
+					style: { transformOrigin: "21px 16px" },
+					d: "M24 16C24 17.6569 22.6569 19 21 19C19.3431 19 18 17.6569 18 16C18 15.25 20.2198 13 21 13C22.6569 13 24 14.3431 24 16Z"
+				}),
+				/* @__PURE__ */ o(i.path, {
+					className: "skull-eye-left",
+					style: { transformOrigin: "11px 16px" },
+					d: "M8 16C8 17.6569 9.34315 19 11 19C12.6569 19 14 17.6569 14 16C14 15.25 11.7802 13 11 13C9.34315 13 8 14.3431 8 16Z"
+				})
+			]
+		})
+	});
+});
+c.displayName = "SkullEmoji";
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=skull-emoji.js.map

package/dist/animations/skull-emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skull-emoji.js","names":[],"sources":["../../src/animations/skull-emoji.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 SkullEmoji = 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        \".skull-head\",\n        {\n          rotate: [0, -8, 8, -8, 8, -4, 4, 0],\n          y: [0, -2, 0, -2, 0, -1, 0],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".skull-eye-left, .skull-eye-right\",\n        {\n          scale: [1, 1.3, 0.8, 1.2, 1],\n        },\n        {\n          duration: 0.6,\n          ease: \"easeInOut\",\n        },\n      );\n      await animate(\n        \".skull-tooth\",\n        {\n          y: [0, -3, 0, -2, 0, -3, 0],\n        },\n        {\n          duration: 0.5,\n          ease: \"easeInOut\",\n          delay: 0.1,\n        },\n      );\n      await animate(\n        \".skull-head\",\n        {\n          y: [0, -4, 0],\n          scale: [1, 1.05, 1],\n        },\n        {\n          duration: 0.3,\n          ease: \"easeOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".skull-head, .skull-eye-left, .skull-eye-right, .skull-tooth\",\n        { rotate: 0, 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.div\n        ref={scope}\n        onHoverStart={start}\n        onHoverEnd={stop}\n        className={`inline-flex cursor-pointer ${className}`}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          x=\"0px\"\n          y=\"0px\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 32 32\"\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}\n          strokeMiterlimit=\"10\"\n          strokeLinecap=\"square\"\n        >\n          <motion.path className=\"skull-tooth-left skull-tooth\" d=\"M14 27V30\" />\n          <motion.path\n            className=\"skull-tooth-right skull-tooth\"\n            d=\"M18 27V30\"\n          />\n          <motion.path\n            className=\"skull-head\"\n            style={{ transformOrigin: \"16px 16px\" }}\n            d=\"M16 2C9.09644 2 3.5 7.59644 3.5 14.5C3.5 18.8099 5.68123 22.6104 9 24.8577L9.32436 28.1936C9.424 29.2183 10.2854 30 11.315 30H20.685C21.7146 30 22.576 29.2183 22.6756 28.1936L23 24.8577C26.3188 22.6104 28.5 18.8099 28.5 14.5C28.5 7.59644 22.9036 2 16 2Z\"\n          />\n          <motion.path\n            className=\"skull-eye-right\"\n            style={{ transformOrigin: \"21px 16px\" }}\n            d=\"M24 16C24 17.6569 22.6569 19 21 19C19.3431 19 18 17.6569 18 16C18 15.25 20.2198 13 21 13C22.6569 13 24 14.3431 24 16Z\"\n          />\n          <motion.path\n            className=\"skull-eye-left\"\n            style={{ transformOrigin: \"11px 16px\" }}\n            d=\"M8 16C8 17.6569 9.34315 19 11 19C12.6569 19 14 17.6569 14 16C14 15.25 11.7802 13 11 13C9.34315 13 8 14.3431 8 16Z\"\n          />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nSkullEmoji.displayName = \"SkullEmoji\";\nexport default SkullEmoji;\n"],"mappings":";;;;;AAKA,IAAM,IAAa,GAEf,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAiCpC,AAhCA,EACE,eACA;GACE,QAAQ;IAAC;IAAG;IAAI;IAAG;IAAI;IAAG;IAAI;IAAG;GAAC;GAClC,GAAG;IAAC;IAAG;IAAI;IAAG;IAAI;IAAG;IAAI;GAAC;EAC5B,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,qCACA,EACE,OAAO;GAAC;GAAG;GAAK;GAAK;GAAK;EAAC,EAC7B,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,MAAM,EACJ,gBACA,EACE,GAAG;GAAC;GAAG;GAAI;GAAG;GAAI;GAAG;GAAI;EAAC,EAC5B,GACA;GACE,UAAU;GACV,MAAM;GACN,OAAO;EACT,CACF,GACA,MAAM,EACJ,eACA;GACE,GAAG;IAAC;IAAG;IAAI;GAAC;GACZ,OAAO;IAAC;IAAG;IAAM;GAAC;EACpB,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,gEACA;GAAE,QAAQ;GAAG,GAAG;GAAG,OAAO;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,cAAc;EACd,YAAY;EACZ,WAAW,8BAA8B;EAEzC,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,GAAE;GACF,GAAE;GACF,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAQ;GACR,aAAa,EAAkB,GAAa,EAAE;GAC9C,kBAAiB;GACjB,eAAc;GAXhB,UAAA;IAaE,kBAAC,EAAO,MAAR;KAAa,WAAU;KAA+B,GAAE;IAAa,CAAA;IACrE,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,GAAE;IACH,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,YAAY;KACtC,GAAE;IACH,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,YAAY;KACtC,GAAE;IACH,CAAA;IACD,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,YAAY;KACtC,GAAE;IACH,CAAA;GACE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAW,cAAc"}

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

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

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

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

package/dist/animations/slack-icon.js

@@ -0,0 +1,95 @@
+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/slack-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(".piece1", { rotate: [
+			0,
+			-90,
+			0
+		] }, {
+			duration: .6,
+			ease: "easeInOut"
+		}), f(".piece2", { rotate: [
+			0,
+			90,
+			0
+		] }, {
+			duration: .6,
+			ease: "easeInOut",
+			delay: .1
+		}), f(".piece3", { rotate: [
+			0,
+			-90,
+			0
+		] }, {
+			duration: .6,
+			ease: "easeInOut",
+			delay: .2
+		}), f(".piece4", { rotate: [
+			0,
+			90,
+			0
+		] }, {
+			duration: .6,
+			ease: "easeInOut",
+			delay: .3
+		});
+	}, [f]), m = t(() => {
+		f(".piece1, .piece2, .piece3, .piece4", { rotate: 0 }, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	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}`,
+		children: [
+			/* @__PURE__ */ a("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.g, {
+				className: "piece1",
+				style: { transformOrigin: "center" },
+				children: /* @__PURE__ */ a("path", { d: "M12 12v-6a2 2 0 0 1 4 0v6m0 -2a2 2 0 1 1 2 2h-6" })
+			}),
+			/* @__PURE__ */ a(r.g, {
+				className: "piece2",
+				style: { transformOrigin: "center" },
+				children: /* @__PURE__ */ a("path", { d: "M12 12h6a2 2 0 0 1 0 4h-6m2 0a2 2 0 1 1 -2 2v-6" })
+			}),
+			/* @__PURE__ */ a(r.g, {
+				className: "piece3",
+				style: { transformOrigin: "center" },
+				children: /* @__PURE__ */ a("path", { d: "M12 12v6a2 2 0 0 1 -4 0v-6m0 2a2 2 0 1 1 -2 -2h6" })
+			}),
+			/* @__PURE__ */ a(r.g, {
+				className: "piece4",
+				style: { transformOrigin: "center" },
+				children: /* @__PURE__ */ a("path", { d: "M12 12h-6a2 2 0 0 1 0 -4h6m-2 0a2 2 0 1 1 2 -2v6" })
+			})
+		]
+	});
+});
+s.displayName = "SlackIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=slack-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slack-icon.js","names":[],"sources":["../../src/animations/slack-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst SlackIcon = 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        \".piece1\",\n        { rotate: [0, -90, 0] },\n        { duration: 0.6, ease: \"easeInOut\" },\n      );\n      animate(\n        \".piece2\",\n        { rotate: [0, 90, 0] },\n        { duration: 0.6, ease: \"easeInOut\", delay: 0.1 },\n      );\n      animate(\n        \".piece3\",\n        { rotate: [0, -90, 0] },\n        { duration: 0.6, ease: \"easeInOut\", delay: 0.2 },\n      );\n      animate(\n        \".piece4\",\n        { rotate: [0, 90, 0] },\n        { duration: 0.6, ease: \"easeInOut\", delay: 0.3 },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".piece1, .piece2, .piece3, .piece4\",\n        { rotate: 0 },\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        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      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <motion.g className=\"piece1\" style={{ transformOrigin: \"center\" }}>\n          <path d=\"M12 12v-6a2 2 0 0 1 4 0v6m0 -2a2 2 0 1 1 2 2h-6\" />\n        </motion.g>\n        <motion.g className=\"piece2\" style={{ transformOrigin: \"center\" }}>\n          <path d=\"M12 12h6a2 2 0 0 1 0 4h-6m2 0a2 2 0 1 1 -2 2v-6\" />\n        </motion.g>\n        <motion.g className=\"piece3\" style={{ transformOrigin: \"center\" }}>\n          <path d=\"M12 12v6a2 2 0 0 1 -4 0v-6m0 2a2 2 0 1 1 -2 -2h6\" />\n        </motion.g>\n        <motion.g className=\"piece4\" style={{ transformOrigin: \"center\" }}>\n          <path d=\"M12 12h-6a2 2 0 0 1 0 -4h6m-2 0a2 2 0 1 1 2 -2v6\" />\n        </motion.g>\n      </motion.svg>\n    );\n  },\n);\n\nSlackIcon.displayName = \"SlackIcon\";\nexport default SlackIcon;\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;EAgBpC,AAfA,EACE,WACA,EAAE,QAAQ;GAAC;GAAG;GAAK;EAAC,EAAE,GACtB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC,GACA,EACE,WACA,EAAE,QAAQ;GAAC;GAAG;GAAI;EAAC,EAAE,GACrB;GAAE,UAAU;GAAK,MAAM;GAAa,OAAO;EAAI,CACjD,GACA,EACE,WACA,EAAE,QAAQ;GAAC;GAAG;GAAK;EAAC,EAAE,GACtB;GAAE,UAAU;GAAK,MAAM;GAAa,OAAO;EAAI,CACjD,GACA,EACE,WACA,EAAE,QAAQ;GAAC;GAAG;GAAI;EAAC,EAAE,GACrB;GAAE,UAAU;GAAK,MAAM;GAAa,OAAO;EAAI,CACjD;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,sCACA,EAAE,QAAQ,EAAE,GACZ;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,cAAc;EACd,YAAY;EACZ,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACK;EACb,eAAc;EACd,gBAAe;EACf,WAAW,kBAAkB;EAb/B,UAAA;GAeE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GACnD,kBAAC,EAAO,GAAR;IAAU,WAAU;IAAS,OAAO,EAAE,iBAAiB,SAAS;IAC9D,UAAA,kBAAC,QAAD,EAAM,GAAE,kDAAmD,CAAA;GACnD,CAAA;GACV,kBAAC,EAAO,GAAR;IAAU,WAAU;IAAS,OAAO,EAAE,iBAAiB,SAAS;IAC9D,UAAA,kBAAC,QAAD,EAAM,GAAE,kDAAmD,CAAA;GACnD,CAAA;GACV,kBAAC,EAAO,GAAR;IAAU,WAAU;IAAS,OAAO,EAAE,iBAAiB,SAAS;IAC9D,UAAA,kBAAC,QAAD,EAAM,GAAE,mDAAoD,CAAA;GACpD,CAAA;GACV,kBAAC,EAAO,GAAR;IAAU,WAAU;IAAS,OAAO,EAAE,iBAAiB,SAAS;IAC9D,UAAA,kBAAC,QAAD,EAAM,GAAE,mDAAoD,CAAA;GACpD,CAAA;EACA;;AAEhB,CACF;AAEA,EAAU,cAAc"}

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

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

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

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

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

@@ -0,0 +1,177 @@
+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/sliders-horizontal-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(() => {
+		f(".slider-1", { x: [
+			0,
+			-4,
+			0
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut"
+		}), f(".path-1-left", { x2: [
+			10,
+			6,
+			10
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut"
+		}), f(".path-1-right", { x1: [
+			14,
+			10,
+			14
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut"
+		}), f(".slider-2", { x: [
+			0,
+			4,
+			0
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .2
+		}), f(".path-2-left", { x2: [
+			8,
+			12,
+			8
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .2
+		}), f(".path-2-right", { x1: [
+			12,
+			16,
+			12
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .2
+		}), f(".slider-3", { x: [
+			0,
+			-4,
+			0
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .4
+		}), f(".path-3-left", { x2: [
+			12,
+			8,
+			12
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .4
+		}), f(".path-3-right", { x1: [
+			16,
+			12,
+			16
+		] }, {
+			duration: 2,
+			repeat: Infinity,
+			ease: "easeInOut",
+			delay: .4
+		});
+	}, [f]), m = t(() => {
+		f(".slider-1, .slider-2, .slider-3", { x: 0 }, { duration: .3 }), f(".path-1-left", { x2: 10 }, { duration: .3 }), f(".path-1-right", { x1: 14 }, { duration: .3 }), f(".path-2-left", { x2: 8 }, { duration: .3 }), f(".path-2-right", { x1: 12 }, { duration: .3 }), f(".path-3-left", { x2: 12 }, { duration: .3 }), f(".path-3-right", { x1: 16 }, { duration: .3 });
+	}, [f]);
+	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}`,
+		children: [
+			/* @__PURE__ */ a(r.line, {
+				className: "path-1-left",
+				x1: "3",
+				y1: "5",
+				x2: "10",
+				y2: "5"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "slider-1",
+				x1: "14",
+				y1: "3",
+				x2: "14",
+				y2: "7"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "path-1-right",
+				x1: "14",
+				y1: "5",
+				x2: "21",
+				y2: "5"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "path-2-left",
+				x1: "3",
+				y1: "12",
+				x2: "8",
+				y2: "12"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "slider-2",
+				x1: "8",
+				y1: "10",
+				x2: "8",
+				y2: "14"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "path-2-right",
+				x1: "12",
+				y1: "12",
+				x2: "21",
+				y2: "12"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "path-3-left",
+				x1: "3",
+				y1: "19",
+				x2: "12",
+				y2: "19"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "slider-3",
+				x1: "16",
+				y1: "17",
+				x2: "16",
+				y2: "21"
+			}),
+			/* @__PURE__ */ a(r.line, {
+				className: "path-3-right",
+				x1: "16",
+				y1: "19",
+				x2: "21",
+				y2: "19"
+			})
+		]
+	});
+});
+s.displayName = "SlidersHorizontalIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=sliders-horizontal-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sliders-horizontal-icon.js","names":[],"sources":["../../src/animations/sliders-horizontal-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst SlidersHorizontalIcon = 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      // Row 1: Slider at x=14\n      animate(\n        \".slider-1\",\n        { x: [0, -4, 0] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\" },\n      );\n      animate(\n        \".path-1-left\",\n        { x2: [10, 6, 10] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\" },\n      );\n      animate(\n        \".path-1-right\",\n        { x1: [14, 10, 14] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\" },\n      );\n\n      // Row 2: Slider at x=8\n      animate(\n        \".slider-2\",\n        { x: [0, 4, 0] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.2 },\n      );\n      animate(\n        \".path-2-left\",\n        { x2: [8, 12, 8] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.2 },\n      );\n      animate(\n        \".path-2-right\",\n        { x1: [12, 16, 12] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.2 },\n      );\n\n      // Row 3: Slider at x=16\n      animate(\n        \".slider-3\",\n        { x: [0, -4, 0] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.4 },\n      );\n      animate(\n        \".path-3-left\",\n        { x2: [12, 8, 12] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.4 },\n      );\n      animate(\n        \".path-3-right\",\n        { x1: [16, 12, 16] },\n        { duration: 2, repeat: Infinity, ease: \"easeInOut\", delay: 0.4 },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\".slider-1, .slider-2, .slider-3\", { x: 0 }, { duration: 0.3 });\n      // Reset paths manually to their original coordinates\n      animate(\".path-1-left\", { x2: 10 }, { duration: 0.3 });\n      animate(\".path-1-right\", { x1: 14 }, { duration: 0.3 });\n      animate(\".path-2-left\", { x2: 8 }, { duration: 0.3 });\n      animate(\".path-2-right\", { x1: 12 }, { duration: 0.3 });\n      animate(\".path-3-left\", { x2: 12 }, { duration: 0.3 });\n      animate(\".path-3-right\", { x1: 16 }, { duration: 0.3 });\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      >\n        {/* Row 1: y=5 */}\n        <motion.line className=\"path-1-left\" x1=\"3\" y1=\"5\" x2=\"10\" y2=\"5\" />\n        <motion.line className=\"slider-1\" x1=\"14\" y1=\"3\" x2=\"14\" y2=\"7\" />\n        <motion.line className=\"path-1-right\" x1=\"14\" y1=\"5\" x2=\"21\" y2=\"5\" />\n\n        {/* Row 2: y=12 */}\n        <motion.line className=\"path-2-left\" x1=\"3\" y1=\"12\" x2=\"8\" y2=\"12\" />\n        <motion.line className=\"slider-2\" x1=\"8\" y1=\"10\" x2=\"8\" y2=\"14\" />\n        <motion.line className=\"path-2-right\" x1=\"12\" y1=\"12\" x2=\"21\" y2=\"12\" />\n\n        {/* Row 3: y=19 */}\n        <motion.line className=\"path-3-left\" x1=\"3\" y1=\"19\" x2=\"12\" y2=\"19\" />\n        <motion.line className=\"slider-3\" x1=\"16\" y1=\"17\" x2=\"16\" y2=\"21\" />\n        <motion.line className=\"path-3-right\" x1=\"16\" y1=\"19\" x2=\"21\" y2=\"19\" />\n      </motion.svg>\n    );\n  },\n);\n\nSlidersHorizontalIcon.displayName = \"SlidersHorizontalIcon\";\nexport default SlidersHorizontalIcon;\n"],"mappings":"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"}