nfx-ui 0.20.0 → 0.22.0

package/dist/animations/link-icon.js

@@ -0,0 +1,82 @@
+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/link-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(".link-top", {
+			x: 1.5,
+			y: -1.5
+		}, {
+			duration: .25,
+			ease: "easeOut"
+		}), f(".link-bottom", {
+			x: -1.5,
+			y: 1.5
+		}, {
+			duration: .25,
+			ease: "easeOut"
+		}), f(".link-middle", {
+			opacity: [.6, 1],
+			scale: [.95, 1]
+		}, {
+			duration: .2,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(async () => {
+		f(".link-top, .link-bottom, .link-middle", {
+			x: 0,
+			y: 0,
+			opacity: 1,
+			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: "M9 15l6 -6",
+				className: "link-middle",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464",
+				className: "link-top",
+				style: { transformOrigin: "50% 50%" }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				d: "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463",
+				className: "link-bottom",
+				style: { transformOrigin: "50% 50%" }
+			})
+		]
+	});
+});
+s.displayName = "LinkIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=link-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-icon.js","names":[],"sources":["../../src/animations/link-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LinkIcon = 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        \".link-top\",\n        { x: 1.5, y: -1.5 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n\n      animate(\n        \".link-bottom\",\n        { x: -1.5, y: 1.5 },\n        { duration: 0.25, ease: \"easeOut\" },\n      );\n\n      animate(\n        \".link-middle\",\n        { opacity: [0.6, 1], scale: [0.95, 1] },\n        { duration: 0.2, ease: \"easeOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(async () => {\n      animate(\n        \".link-top, .link-bottom, .link-middle\",\n        { x: 0, y: 0, opacity: 1, 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=\"M9 15l6 -6\"\n          className=\"link-middle\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464\"\n          className=\"link-top\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n\n        <motion.path\n          d=\"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463\"\n          className=\"link-bottom\"\n          style={{ transformOrigin: \"50% 50%\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nLinkIcon.displayName = \"LinkIcon\";\nexport default LinkIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAW,GAEb,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAapC,AAZA,EACE,aACA;GAAE,GAAG;GAAK,GAAG;EAAK,GAClB;GAAE,UAAU;GAAM,MAAM;EAAU,CACpC,GAEA,EACE,gBACA;GAAE,GAAG;GAAM,GAAG;EAAI,GAClB;GAAE,UAAU;GAAM,MAAM;EAAU,CACpC,GAEA,EACE,gBACA;GAAE,SAAS,CAAC,IAAK,CAAC;GAAG,OAAO,CAAC,KAAM,CAAC;EAAE,GACtC;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,EAAY,YAAY;EACnC,EACE,yCACA;GAAE,GAAG;GAAG,GAAG;GAAG,SAAS;GAAG,OAAO;EAAE,GACnC;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,EAAS,cAAc"}

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

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

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

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

package/dist/animations/linkedin-icon.js

@@ -0,0 +1,79 @@
+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/linkedin-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(".border", { scale: [
+			1,
+			1.05,
+			1
+		] }, {
+			duration: .4,
+			ease: "easeInOut"
+		}), await f(".lines", { pathLength: [0, 1] }, {
+			duration: .5,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(() => {
+		f(".lines, .border", {
+			pathLength: 1,
+			scale: 1
+		}, { duration: .2 });
+	}, [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, {
+				className: "lines",
+				d: "M8 11v5",
+				initial: { pathLength: 1 }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "lines",
+				d: "M8 8v.01",
+				initial: { pathLength: 1 }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "lines",
+				d: "M12 16v-5",
+				initial: { pathLength: 1 }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "lines",
+				d: "M16 16v-3a2 2 0 1 0 -4 0",
+				initial: { pathLength: 1 }
+			}),
+			/* @__PURE__ */ a(r.path, {
+				className: "border",
+				d: "M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z",
+				style: { transformOrigin: "center" }
+			})
+		]
+	});
+});
+s.displayName = "LinkedinIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=linkedin-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"linkedin-icon.js","names":[],"sources":["../../src/animations/linkedin-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LinkedinIcon = 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        \".border\",\n        { scale: [1, 1.05, 1] },\n        { duration: 0.4, ease: \"easeInOut\" },\n      );\n      await animate(\n        \".lines\",\n        { pathLength: [0, 1] },\n        { duration: 0.5, ease: \"easeOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".lines, .border\",\n        { pathLength: 1, scale: 1 },\n        { duration: 0.2 },\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        <motion.path\n          className=\"lines\"\n          d=\"M8 11v5\"\n          initial={{ pathLength: 1 }}\n        />\n        <motion.path\n          className=\"lines\"\n          d=\"M8 8v.01\"\n          initial={{ pathLength: 1 }}\n        />\n        <motion.path\n          className=\"lines\"\n          d=\"M12 16v-5\"\n          initial={{ pathLength: 1 }}\n        />\n        <motion.path\n          className=\"lines\"\n          d=\"M16 16v-3a2 2 0 1 0 -4 0\"\n          initial={{ pathLength: 1 }}\n        />\n        <motion.path\n          className=\"border\"\n          d=\"M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z\"\n          style={{ transformOrigin: \"center\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nLinkedinIcon.displayName = \"LinkedinIcon\";\nexport default LinkedinIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAe,GAEjB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAMpC,AALA,EACE,WACA,EAAE,OAAO;GAAC;GAAG;GAAM;EAAC,EAAE,GACtB;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC,GACA,MAAM,EACJ,UACA,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,GACrB;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,mBACA;GAAE,YAAY;GAAG,OAAO;EAAE,GAC1B,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,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;IACF,SAAS,EAAE,YAAY,EAAE;GAC1B,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,SAAS,EAAE,YAAY,EAAE;GAC1B,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,SAAS,EAAE,YAAY,EAAE;GAC1B,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,SAAS,EAAE,YAAY,EAAE;GAC1B,CAAA;GACD,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,OAAO,EAAE,iBAAiB,SAAS;GACpC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAa,cAAc"}

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

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

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

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

package/dist/animations/locate-icon.js

@@ -0,0 +1,101 @@
+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/locate-icon.tsx
+var s = e(({ size: e = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = t(() => {
+		f(".locate-target", {
+			opacity: 1,
+			scale: 1
+		}, {
+			duration: .3,
+			ease: "backOut"
+		}), f(".locate-crosshairs", { rotate: 90 }, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".locate-target", {
+			opacity: 0,
+			scale: 0
+		}, {
+			duration: .2,
+			ease: "easeIn"
+		}), f(".locate-crosshairs", { rotate: 0 }, {
+			duration: .3,
+			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}`,
+		style: { overflow: "visible" },
+		children: [
+			/* @__PURE__ */ o(r.g, {
+				className: "locate-crosshairs",
+				style: { transformOrigin: "center" },
+				children: [
+					/* @__PURE__ */ a("line", {
+						x1: "2",
+						x2: "5",
+						y1: "12",
+						y2: "12"
+					}),
+					/* @__PURE__ */ a("line", {
+						x1: "19",
+						x2: "22",
+						y1: "12",
+						y2: "12"
+					}),
+					/* @__PURE__ */ a("line", {
+						x1: "12",
+						x2: "12",
+						y1: "2",
+						y2: "5"
+					}),
+					/* @__PURE__ */ a("line", {
+						x1: "12",
+						x2: "12",
+						y1: "19",
+						y2: "22"
+					})
+				]
+			}),
+			/* @__PURE__ */ a("circle", {
+				cx: "12",
+				cy: "12",
+				r: "7"
+			}),
+			/* @__PURE__ */ a(r.circle, {
+				className: "locate-target",
+				cx: "12",
+				cy: "12",
+				r: "3",
+				initial: {
+					opacity: 0,
+					scale: 0
+				},
+				style: { transformOrigin: "center" }
+			})
+		]
+	});
+});
+s.displayName = "LocateIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=locate-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"locate-icon.js","names":[],"sources":["../../src/animations/locate-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LocateIcon = 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      // 1. Snappy Appearance of center target\n      animate(\n        \".locate-target\",\n        { opacity: 1, scale: 1 },\n        { duration: 0.3, ease: \"backOut\" },\n      );\n      // 2. Subtle rotation for mechanical feel\n      animate(\n        \".locate-crosshairs\",\n        { rotate: 90 },\n        { duration: 0.3, ease: \"easeInOut\" },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".locate-target\",\n        { opacity: 0, scale: 0 },\n        { duration: 0.2, ease: \"easeIn\" },\n      );\n      animate(\n        \".locate-crosshairs\",\n        { rotate: 0 },\n        { duration: 0.3, 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        style={{ overflow: \"visible\" }}\n      >\n        <motion.g\n          className=\"locate-crosshairs\"\n          style={{ transformOrigin: \"center\" }}\n        >\n          <line x1=\"2\" x2=\"5\" y1=\"12\" y2=\"12\" />\n          <line x1=\"19\" x2=\"22\" y1=\"12\" y2=\"12\" />\n          <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"5\" />\n          <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\n        </motion.g>\n\n        {/* Ring */}\n        <circle cx=\"12\" cy=\"12\" r=\"7\" />\n\n        {/* The \"Fix\" Target - Appears on Hover */}\n        <motion.circle\n          className=\"locate-target\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"3\"\n          initial={{ opacity: 0, scale: 0 }}\n          style={{ transformOrigin: \"center\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nLocateIcon.displayName = \"LocateIcon\";\nexport default LocateIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAa,GAEf,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,QAAkB;EAQ9B,AANA,EACE,kBACA;GAAE,SAAS;GAAG,OAAO;EAAE,GACvB;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC,GAEA,EACE,sBACA,EAAE,QAAQ,GAAG,GACb;GAAE,UAAU;GAAK,MAAM;EAAY,CACrC;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAM7B,AALA,EACE,kBACA;GAAE,SAAS;GAAG,OAAO;EAAE,GACvB;GAAE,UAAU;GAAK,MAAM;EAAS,CAClC,GACA,EACE,sBACA,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;EAC7B,OAAO,EAAE,UAAU,UAAU;EAd/B,UAAA;GAgBE,kBAAC,EAAO,GAAR;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,SAAS;IAFrC,UAAA;KAIE,kBAAC,QAAD;MAAM,IAAG;MAAI,IAAG;MAAI,IAAG;MAAK,IAAG;KAAM,CAAA;KACrC,kBAAC,QAAD;MAAM,IAAG;MAAK,IAAG;MAAK,IAAG;MAAK,IAAG;KAAM,CAAA;KACvC,kBAAC,QAAD;MAAM,IAAG;MAAK,IAAG;MAAK,IAAG;MAAI,IAAG;KAAK,CAAA;KACrC,kBAAC,QAAD;MAAM,IAAG;MAAK,IAAG;MAAK,IAAG;MAAK,IAAG;KAAM,CAAA;IAC/B;;GAGV,kBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;GAAK,CAAA;GAG/B,kBAAC,EAAO,QAAR;IACE,WAAU;IACV,IAAG;IACH,IAAG;IACH,GAAE;IACF,SAAS;KAAE,SAAS;KAAG,OAAO;IAAE;IAChC,OAAO,EAAE,iBAAiB,SAAS;GACpC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAW,cAAc"}

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

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

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

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

package/dist/animations/lock-icon.js

@@ -0,0 +1,67 @@
+import { forwardRef as e, useImperativeHandle as t } from "react";
+import { motion as n, useAnimate as r } from "motion/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/animations/lock-icon.tsx
+var o = e(({ size: e = 48, color: o = "currentColor", strokeWidth: s = 2, className: c = "" }, l) => {
+	let [u, d] = r(), f = async () => {
+		await d(".lock-upper-body", {
+			rotate: 40,
+			y: -1.7,
+			x: 3
+		}, {
+			duration: .28,
+			ease: "easeOut"
+		});
+	}, p = async () => {
+		await d(".lock-upper-body", {
+			rotate: 0,
+			x: 0,
+			y: 0
+		}, {
+			duration: .22,
+			ease: "easeInOut"
+		});
+	};
+	return t(l, () => ({
+		startAnimation: f,
+		stopAnimation: p
+	})), /* @__PURE__ */ a(n.svg, {
+		ref: u,
+		onHoverStart: () => {
+			f();
+		},
+		onHoverEnd: () => {
+			p();
+		},
+		xmlns: "http://www.w3.org/2000/svg",
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: o,
+		strokeWidth: s,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: `cursor-pointer ${c}`,
+		style: { overflow: "visible" },
+		children: [
+			/* @__PURE__ */ i("path", {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ i("path", { d: "M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" }),
+			/* @__PURE__ */ i("path", { d: "M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" }),
+			/* @__PURE__ */ i(n.path, {
+				className: "lock-upper-body",
+				d: "M8 11v-4a4 4 0 1 1 8 0v4",
+				style: { transformOrigin: "50% 100%" }
+			})
+		]
+	});
+});
+o.displayName = "LockIcon";
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=lock-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lock-icon.js","names":[],"sources":["../../src/animations/lock-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LockIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n  (\n    { size = 48, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n    ref,\n  ) => {\n    const [scope, animate] = useAnimate();\n\n    const start = async () => {\n      await animate(\n        \".lock-upper-body\",\n        { rotate: 40, y: -1.7, x: 3 },\n        { duration: 0.28, ease: \"easeOut\" },\n      );\n    };\n\n    const stop = async () => {\n      await animate(\n        \".lock-upper-body\",\n        { rotate: 0, x: 0, y: 0 },\n        { duration: 0.22, ease: \"easeInOut\" },\n      );\n    };\n\n    useImperativeHandle(ref, () => ({\n      startAnimation: start,\n      stopAnimation: stop,\n    }));\n\n    const handleHoverStart = () => {\n      start();\n    };\n\n    const handleHoverEnd = () => {\n      stop();\n    };\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\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        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n\n        {/* Lock body */}\n        <path d=\"M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z\" />\n\n        {/* Keyhole */}\n        <path d=\"M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\" />\n\n        {/* Lock shackle */}\n        <motion.path\n          className=\"lock-upper-body\"\n          d=\"M8 11v-4a4 4 0 1 1 8 0v4\"\n          style={{ transformOrigin: \"50% 100%\" }}\n        />\n      </motion.svg>\n    );\n  },\n);\n\nLockIcon.displayName = \"LockIcon\";\n\nexport default LockIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAW,GAEb,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,YAAY;EACxB,MAAM,EACJ,oBACA;GAAE,QAAQ;GAAI,GAAG;GAAM,GAAG;EAAE,GAC5B;GAAE,UAAU;GAAM,MAAM;EAAU,CACpC;CACF,GAEM,IAAO,YAAY;EACvB,MAAM,EACJ,oBACA;GAAE,QAAQ;GAAG,GAAG;GAAG,GAAG;EAAE,GACxB;GAAE,UAAU;GAAM,MAAM;EAAY,CACtC;CACF;CAeA,OAbA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAWA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,oBAX2B;GAC7B,EAAM;EACR;EAUI,kBARyB;GAC3B,EAAK;EACP;EAOI,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;GAgBE,kBAAC,QAAD;IAAM,QAAO;IAAO,GAAE;IAAgB,MAAK;GAAQ,CAAA;GAGnD,kBAAC,QAAD,EAAM,GAAE,iFAAkF,CAAA;GAG1F,kBAAC,QAAD,EAAM,GAAE,sCAAuC,CAAA;GAG/C,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,GAAE;IACF,OAAO,EAAE,iBAAiB,WAAW;GACtC,CAAA;EACS;;AAEhB,CACF;AAEA,EAAS,cAAc"}

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

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

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

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

package/dist/animations/logout-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/logout-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(".logout-arrow, .logout-arrow-bottom", { x: [
+			0,
+			6,
+			0
+		] }, {
+			duration: .3,
+			ease: "easeInOut"
+		}), f(".logout-door", { x: [
+			0,
+			-2,
+			0
+		] }, {
+			duration: .25,
+			ease: "easeOut"
+		});
+	}, [f]), m = t(() => {
+		f(".logout-arrow, .logout-arrow-bottom, .logout-door", { x: 0 }, {
+			duration: .2,
+			ease: "easeInOut"
+		});
+	}, [f]);
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.div, {
+		ref: d,
+		className: `inline-flex cursor-pointer ${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",
+			children: [
+				/* @__PURE__ */ a(r.path, {
+					className: "logout-door",
+					style: { transformOrigin: "50% 50%" },
+					d: "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "logout-arrow",
+					d: "M9 12h12"
+				}),
+				/* @__PURE__ */ a(r.path, {
+					className: "logout-arrow-bottom",
+					d: "M18 15l3 -3l-3 -3"
+				})
+			]
+		})
+	});
+});
+s.displayName = "LogoutIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=logout-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"logout-icon.js","names":[],"sources":["../../src/animations/logout-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useCallback } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst LogoutIcon = 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        \".logout-arrow, .logout-arrow-bottom\",\n        {\n          x: [0, 6, 0],\n        },\n        {\n          duration: 0.3,\n          ease: \"easeInOut\",\n        },\n      );\n      animate(\n        \".logout-door\",\n        {\n          x: [0, -2, 0],\n        },\n        {\n          duration: 0.25,\n          ease: \"easeOut\",\n        },\n      );\n    }, [animate]);\n\n    const stop = useCallback(() => {\n      animate(\n        \".logout-arrow, .logout-arrow-bottom, .logout-door\",\n        { x: 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        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 24 24\"\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <motion.path\n            className=\"logout-door\"\n            style={{ transformOrigin: \"50% 50%\" }}\n            d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"\n          />\n\n          <motion.path className=\"logout-arrow\" d=\"M9 12h12\" />\n\n          <motion.path className=\"logout-arrow-bottom\" d=\"M18 15l3 -3l-3 -3\" />\n        </svg>\n      </motion.div>\n    );\n  },\n);\n\nLogoutIcon.displayName = \"LogoutIcon\";\nexport default LogoutIcon;\n"],"mappings":";;;;AAIA,IAAM,IAAa,GAEf,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,EAAY,YAAY;EAWpC,AAVA,MAAM,EACJ,uCACA,EACE,GAAG;GAAC;GAAG;GAAG;EAAC,EACb,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF,GACA,EACE,gBACA,EACE,GAAG;GAAC;GAAG;GAAI;EAAC,EACd,GACA;GACE,UAAU;GACV,MAAM;EACR,CACF;CACF,GAAG,CAAC,CAAO,CAAC,GAEN,IAAO,QAAkB;EAC7B,EACE,qDACA,EAAE,GAAG,EAAE,GACP;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;GACK;GACb,eAAc;GACd,gBAAe;GATjB,UAAA;IAWE,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,OAAO,EAAE,iBAAiB,UAAU;KACpC,GAAE;IACH,CAAA;IAED,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAe,GAAE;IAAY,CAAA;IAEpD,kBAAC,EAAO,MAAR;KAAa,WAAU;KAAsB,GAAE;IAAqB,CAAA;GACjE;;CACK,CAAA;AAEhB,CACF;AAEA,EAAW,cAAc"}

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

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

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

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

package/dist/animations/magnifier-icon.js

@@ -0,0 +1,84 @@
+import { scaledStrokeWidth as e } from "./types.js";
+import { forwardRef 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/magnifier-icon.tsx
+var s = t(({ size: t = 24, color: s = "currentColor", strokeWidth: c = 2, className: l = "" }, u) => {
+	let [d, f] = i(), p = async () => {
+		await f(".magnifier-group", {
+			x: [
+				0,
+				1,
+				0,
+				-1,
+				0
+			],
+			y: [
+				0,
+				-1,
+				-2,
+				-1,
+				0
+			],
+			rotate: [
+				0,
+				-5,
+				5,
+				-5,
+				0
+			]
+		}, {
+			duration: 1,
+			ease: "easeInOut"
+		});
+	}, m = () => {
+		f(".magnifier-group", {
+			x: 0,
+			y: 0,
+			rotate: 0
+		}, {
+			duration: .2,
+			ease: "easeOut"
+		});
+	};
+	return n(u, () => ({
+		startAnimation: p,
+		stopAnimation: m
+	})), /* @__PURE__ */ a(r.svg, {
+		ref: d,
+		onHoverStart: () => {
+			p();
+		},
+		onHoverEnd: () => {
+			m();
+		},
+		xmlns: "http://www.w3.org/2000/svg",
+		width: t,
+		height: t,
+		viewBox: "0 0 32 32",
+		fill: "none",
+		stroke: s,
+		strokeWidth: e(c, 32),
+		strokeMiterlimit: "10",
+		className: `cursor-pointer ${l}`,
+		style: { overflow: "visible" },
+		children: /* @__PURE__ */ o(r.g, {
+			className: "magnifier-group",
+			style: {
+				transformOrigin: "13px 13px",
+				transformBox: "fill-box"
+			},
+			children: [/* @__PURE__ */ a(r.path, { d: "m21.393,18.565l7.021,7.021c.781.781.781,2.047,0,2.828h0c-.781.781-2.047.781-2.828,0l-7.021-7.021" }), /* @__PURE__ */ a(r.circle, {
+				cx: "13",
+				cy: "13",
+				r: "10",
+				strokeLinecap: "square"
+			})]
+		})
+	});
+});
+s.displayName = "MagnifierIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=magnifier-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"magnifier-icon.js","names":[],"sources":["../../src/animations/magnifier-icon.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from \"react\";\nimport type { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { scaledStrokeWidth } from \"./types\";\nimport { motion, useAnimate } from \"motion/react\";\n\nconst MagnifierIcon = 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        \".magnifier-group\",\n        {\n          x: [0, 1, 0, -1, 0],\n          y: [0, -1, -2, -1, 0],\n          rotate: [0, -5, 5, -5, 0],\n        },\n        { duration: 1, ease: \"easeInOut\" },\n      );\n    };\n\n    const stop = () => {\n      animate(\n        \".magnifier-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    const handleHoverStart = () => {\n      start();\n    };\n\n    const handleHoverEnd = () => {\n      stop();\n    };\n\n    return (\n      <motion.svg\n        ref={scope}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        xmlns=\"http://www.w3.org/2000/svg\"\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        className={`cursor-pointer ${className}`}\n        style={{ overflow: \"visible\" }}\n      >\n        {/* 🔁 Animate THIS group */}\n        <motion.g\n          className=\"magnifier-group\"\n          style={{\n            transformOrigin: \"13px 13px\",\n            transformBox: \"fill-box\",\n          }}\n        >\n          <motion.path d=\"m21.393,18.565l7.021,7.021c.781.781.781,2.047,0,2.828h0c-.781.781-2.047.781-2.828,0l-7.021-7.021\" />\n          <motion.circle cx=\"13\" cy=\"13\" r=\"10\" strokeLinecap=\"square\" />\n        </motion.g>\n      </motion.svg>\n    );\n  },\n);\n\nMagnifierIcon.displayName = \"MagnifierIcon\";\nexport default MagnifierIcon;\n"],"mappings":";;;;;AAKA,IAAM,IAAgB,GAElB,EAAE,UAAO,IAAI,WAAQ,gBAAgB,iBAAc,GAAG,eAAY,MAClE,MACG;CACH,IAAM,CAAC,GAAO,KAAW,EAAW,GAE9B,IAAQ,YAAY;EACxB,MAAM,EACJ,oBACA;GACE,GAAG;IAAC;IAAG;IAAG;IAAG;IAAI;GAAC;GAClB,GAAG;IAAC;IAAG;IAAI;IAAI;IAAI;GAAC;GACpB,QAAQ;IAAC;IAAG;IAAI;IAAG;IAAI;GAAC;EAC1B,GACA;GAAE,UAAU;GAAG,MAAM;EAAY,CACnC;CACF,GAEM,UAAa;EACjB,EACE,oBACA;GAAE,GAAG;GAAG,GAAG;GAAG,QAAQ;EAAE,GACxB;GAAE,UAAU;GAAK,MAAM;EAAU,CACnC;CACF;CAeA,OAbA,EAAoB,UAAY;EAC9B,gBAAgB;EAChB,eAAe;CACjB,EAAE,GAWA,kBAAC,EAAO,KAAR;EACE,KAAK;EACL,oBAX2B;GAC7B,EAAM;EACR;EAUI,kBARyB;GAC3B,EAAK;EACP;EAOI,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAQ;EACR,aAAa,EAAkB,GAAa,EAAE;EAC9C,kBAAiB;EACjB,WAAW,kBAAkB;EAC7B,OAAO,EAAE,UAAU,UAAU;EAG7B,UAAA,kBAAC,EAAO,GAAR;GACE,WAAU;GACV,OAAO;IACL,iBAAiB;IACjB,cAAc;GAChB;GALF,UAAA,CAOE,kBAAC,EAAO,MAAR,EAAa,GAAE,mGAAoG,CAAA,GACnH,kBAAC,EAAO,QAAR;IAAe,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,eAAc;GAAU,CAAA,CACtD;;CACA,CAAA;AAEhB,CACF;AAEA,EAAc,cAAc"}

package/dist/animations/mail-filled-icon.d.ts

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

package/dist/animations/mail-filled-icon.d.ts.map

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

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

@@ -0,0 +1,58 @@
+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/mail-filled-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(".mail-open", {
+			rotateX: -60,
+			transformOrigin: "50% 0%"
+		}, {
+			duration: .5,
+			ease: "easeInOut"
+		});
+	}, [f]), m = t(() => {
+		f(".mail-open", {
+			rotateX: 0,
+			transformOrigin: "50% 0%"
+		}, {
+			duration: .5,
+			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: `${l} cursor-pointer perspective-distant`,
+		onHoverStart: p,
+		onHoverEnd: m,
+		children: [
+			/* @__PURE__ */ a(r.path, {
+				stroke: "none",
+				d: "M0 0h24v24H0z",
+				fill: "none"
+			}),
+			/* @__PURE__ */ a(r.path, { d: "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" }),
+			/* @__PURE__ */ a(r.path, {
+				d: "M3 7l9 6l9 -6",
+				className: "mail-open"
+			})
+		]
+	});
+});
+s.displayName = "MailFilledIcon";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=mail-filled-icon.js.map