aliveicon 1.4.0 → 1.6.0

package/dist/esm/icons/b/Blocks.js

@@ -1,60 +1,25 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const Blocks = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = useAnimation();
-    const pathControls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const triggerAnimation = useCallback(async () => {
-        await controls.start({
-            x: 8,
-            y: -8,
-            transition: { duration: 0.4, ease: 'easeInOut' },
-        });
-        await controls.start({
-            x: 0,
-            y: 0,
-            transition: { type: 'spring', stiffness: 200, damping: 10 },
-        });
-        if (loopRef.current)
-            triggerAnimation();
-    }, [controls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => controls.stop(),
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable)
-            controls.start({ x: 0, y: 0 });
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.rect, { width: "7", height: "7", x: "14", y: "3", rx: "1", animate: controls }), jsx(motion.path, { d: "M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3", initial: { pathLength: 1, opacity: 1 }, animate: pathControls })] }) }));
+const blockVariants = {
+    normal: {
+        x: 0,
+        y: 0,
+        transition: { type: 'spring', stiffness: 200, damping: 10 },
+    },
+    animate: {
+        x: 2,
+        y: -2,
+        transition: { duration: 0.4, ease: 'easeInOut' },
+    },
+};
+const Blocks = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.rect, { width: "7", height: "7", x: "14", y: "3", rx: "1", variants: blockVariants, initial: "normal", animate: controls }), jsx("path", { d: "M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3" })] }) }));
 });
 Blocks.displayName = 'Blocks';
 

package/dist/esm/icons/b/Blocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blocks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Blocks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/BookAudio.js

@@ -23,20 +23,21 @@ const pathVariants = {
     },
 };
 const audioPulseVariants = {
-    normal: { opacity: 0.6, scaleY: 1 },
-    animate: {
-        opacity: [0.6, 1, 0.6],
+    normal: { opacity: 1, scaleY: 1, transition: { duration: 0.3 } },
+    animate: (delay) => ({
+        opacity: [1, 0.6, 1],
         scaleY: [1, 1.5, 1],
         transition: {
             duration: 1.2,
+            delay,
             repeat: Infinity,
             ease: 'easeInOut',
         },
-    },
+    }),
 };
 const BookAudio = forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon(ref, props, { cycleMs: 1200 });
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20", variants: pathVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M12 6v7", variants: audioPulseVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M16 8v3", variants: audioPulseVariants, initial: "normal", animate: controls, transition: { delay: 0.2, repeat: Infinity, duration: 1.2 } }), jsx(motion.path, { d: "M8 8v3", variants: audioPulseVariants, initial: "normal", animate: controls, transition: { delay: 0.4, repeat: Infinity, duration: 1.2 } })] }) }));
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20", variants: pathVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M12 6v7", custom: 0, variants: audioPulseVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M16 8v3", custom: 0.2, variants: audioPulseVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M8 8v3", custom: 0.4, variants: audioPulseVariants, initial: "normal", animate: controls })] }) }));
 });
 BookAudio.displayName = 'BookAudio';
 

package/dist/esm/icons/b/BookAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BookAudio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BookAudio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/BoomBox.js

@@ -107,10 +107,7 @@ const bodyVariants = {
     },
 };
 const BoomBox = forwardRef(({ className, size = 28, style, ...props }, ref) => {
-    const { controls, iconProps } = useAnimatedIcon(ref, props, {
-        animate: 'playing',
-        cycleMs: 1000,
-    });
+    const { controls, iconProps } = useAnimatedIcon(ref, props, { animate: 'playing' });
     return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs(motion.svg, { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: boomBoxVariants, initial: "normal", animate: controls, children: [jsx(motion.path, { d: "M4 9V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4", variants: {
                         normal: { opacity: 1 },
                         playing: { opacity: 1 },

package/dist/esm/icons/b/BoomBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoomBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BoomBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/Bot.js

@@ -1,80 +1,28 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
-const Bot = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = useAnimation();
-    const blinkControls = useAnimation();
-    const isControlledRef = useRef(false);
-    const loopRef = useRef(loopOnHover);
-    const triggerAnimation = useCallback(async () => {
-        await controls.start('animate');
-        await controls.start('normal');
-        blinkControls.start('blink');
-        if (loopRef.current)
-            triggerAnimation();
-    }, [controls, blinkControls]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: () => {
-                controls.start('animate');
-                blinkControls.start('blink');
-            },
-            stopAnimation: () => {
-                controls.start('normal');
-                blinkControls.stop();
-            },
-        };
-    });
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable) {
-            controls.start('normal');
-            blinkControls.stop();
-        }
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    const pathVariants = {
-        normal: { pathLength: 1, opacity: 1 },
-        animate: {
-            pathLength: [0, 1],
-            opacity: [0, 1],
-            transition: { duration: 0.5 },
-        },
-    };
-    const blinkVariants = {
-        blink: {
-            scaleY: [1, 0.1, 1],
-            transition: {
-                duration: 0.5,
-                repeat: Infinity,
-                repeatDelay: 2,
-                ease: 'easeInOut',
-            },
-        },
-    };
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M12 8V4H8", initial: "normal", animate: controls }), jsx(motion.rect, { width: "16", height: "12", x: "4", y: "8", rx: "2", initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 14h2", initial: "normal", animate: controls }), jsx(motion.path, { d: "M20 14h2", initial: "normal", animate: controls }), jsx(motion.path, { d: "M9 13v2", variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M15 13v2", variants: blinkVariants, initial: false, animate: blinkControls, style: { transformOrigin: 'center' } })] }) }));
+const pathVariants = {
+    normal: { pathLength: 1, opacity: 1 },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.5 },
+    },
+};
+const blinkVariants = {
+    normal: { scaleY: 1 },
+    animate: {
+        scaleY: [1, 0.1, 1],
+        transition: { duration: 0.5, delay: 0.5, ease: 'easeInOut' },
+    },
+};
+const Bot = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx("path", { d: "M12 8V4H8" }), jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), jsx("path", { d: "M2 14h2" }), jsx("path", { d: "M20 14h2" }), jsx(motion.path, { d: "M9 13v2", variants: pathVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M15 13v2", style: { originX: '50%', originY: '50%' }, variants: blinkVariants, initial: "normal", animate: controls })] }) }));
 });
 Bot.displayName = 'Bot';
 

package/dist/esm/icons/b/Bot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bot.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Bot.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/BowArrow.js

@@ -1,17 +1,25 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
+const timing = { duration: 0.9, times: [0, 0.33, 0.5, 0.67, 1] };
 const bowStringVariants = {
     normal: {
         d: 'M18.575 11.082a13 13 0 0 1 1.048 9.027 1.17 1.17 0 0 1-1.914.597L14 17',
         transition: { duration: 0.2 },
     },
-    pullBack: {
-        d: 'M17.575 12.582a11 11 0 0 1 0.548 7.527 1.17 1.17 0 0 1-1.914.597L13 15.5',
-        transition: { duration: 0.3, ease: 'easeOut' },
+    animate: {
+        d: [
+            'M18.575 11.082a13 13 0 0 1 1.048 9.027 1.17 1.17 0 0 1-1.914.597L14 17',
+            'M17.575 12.582a11 11 0 0 1 0.548 7.527 1.17 1.17 0 0 1-1.914.597L13 15.5',
+            'M17.575 12.582a11 11 0 0 1 0.548 7.527 1.17 1.17 0 0 1-1.914.597L13 15.5',
+            'M18.575 11.082a13 13 0 0 1 1.048 9.027 1.17 1.17 0 0 1-1.914.597L14 17',
+            'M18.575 11.082a13 13 0 0 1 1.048 9.027 1.17 1.17 0 0 1-1.914.597L14 17',
+        ],
+        transition: { ...timing, ease: 'easeOut' },
     },
 };
 const bowBottomVariants = {
@@ -19,109 +27,69 @@ const bowBottomVariants = {
         d: 'M7 10 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
         transition: { duration: 0.2 },
     },
-    pullBack: {
-        d: 'M8 11.5 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
-        transition: { duration: 0.3, ease: 'easeOut' },
+    animate: {
+        d: [
+            'M7 10 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
+            'M8 11.5 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
+            'M8 11.5 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
+            'M7 10 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
+            'M7 10 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05',
+        ],
+        transition: { ...timing, ease: 'easeOut' },
     },
 };
+const flight = {
+    x: [0, -1.5, -1.5, 20, 20],
+    y: [0, 1.5, 1.5, -20, -20],
+    opacity: [1, 1, 1, 0, 0],
+    transition: { ...timing, ease: 'easeIn' },
+};
+const restAfterFlight = {
+    x: 0,
+    y: 0,
+    opacity: 1,
+    transition: { x: { duration: 0 }, y: { duration: 0 }, opacity: { duration: 0.3 } },
+};
+const arrowTipVariants = {
+    normal: restAfterFlight,
+    animate: flight,
+};
 const arrowShaftVariants = {
-    normal: {
-        d: 'M9.707 14.293 21 3',
-        x: 0,
-        y: 0,
-        transition: { duration: 0.2 },
-    },
-    pullBack: {
-        d: 'M7.707 15.793 19 4.5',
-        x: 0,
-        y: 0,
-        transition: { duration: 0.3, ease: 'easeOut' },
-    },
-    shoot: {
-        d: 'M9.707 14.293 21 3',
-        x: 20,
-        y: -20,
-        transition: { duration: 0.15, ease: 'easeIn' },
+    normal: { d: 'M9.707 14.293 21 3', ...restAfterFlight },
+    animate: {
+        ...flight,
+        d: [
+            'M9.707 14.293 21 3',
+            'M7.707 15.793 19 4.5',
+            'M7.707 15.793 19 4.5',
+            'M9.707 14.293 21 3',
+            'M9.707 14.293 21 3',
+        ],
+        x: [0, 0, 0, 20, 20],
+        y: [0, 0, 0, -20, -20],
     },
 };
 const arrowHeadVariants = {
     normal: {
         d: 'M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z',
-        x: 0,
-        y: 0,
-        opacity: 1,
-        transition: { duration: 0.2 },
+        ...restAfterFlight,
     },
-    pullBack: {
-        d: 'M5 15.5a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 1.5 19.5H3a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L7.5 19.707A1.7 1.7 0 0 0 8 18.5v-2a1 1 0 0 0-1-1z',
-        x: 0,
-        y: 0,
-        opacity: 1,
-        transition: { duration: 0.3, ease: 'easeOut' },
-    },
-    shoot: {
-        d: 'M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z',
-        x: 20,
-        y: -20,
-        opacity: 0,
-        transition: { duration: 0.15, ease: 'easeIn' },
+    animate: {
+        ...flight,
+        d: [
+            'M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z',
+            'M5 15.5a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 1.5 19.5H3a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L7.5 19.707A1.7 1.7 0 0 0 8 18.5v-2a1 1 0 0 0-1-1z',
+            'M5 15.5a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 1.5 19.5H3a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L7.5 19.707A1.7 1.7 0 0 0 8 18.5v-2a1 1 0 0 0-1-1z',
+            'M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z',
+            'M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z',
+        ],
+        x: [0, 0, 0, 20, 20],
+        y: [0, 0, 0, -20, -20],
     },
 };
-const BowArrow = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const triggerAnimation = useCallback(async () => {
-        await controls.start('pullBack');
-        await new Promise((resolve) => setTimeout(resolve, 150));
-        await controls.start('shoot');
-        await new Promise((resolve) => setTimeout(resolve, 300));
-        await controls.start('normal');
-        if (loopRef.current) {
-            setTimeout(() => triggerAnimation(), 800);
-        }
-    }, [controls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => controls.start('normal'),
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable)
-            controls.start('normal');
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M17 3h4v4", variants: {
-                        normal: { opacity: 1, x: 0, y: 0 },
-                        pullBack: {
-                            opacity: 1,
-                            x: -1.5,
-                            y: 1.5,
-                            transition: { duration: 0.3, ease: 'easeOut' },
-                        },
-                        shoot: { opacity: 1, x: 20, y: -20, transition: { duration: 0.15, ease: 'easeIn' } },
-                    }, initial: "normal", animate: controls }), jsx(motion.path, { variants: bowStringVariants, initial: "normal", animate: controls }), jsx(motion.path, { variants: bowBottomVariants, initial: "normal", animate: controls }), jsx(motion.path, { variants: arrowHeadVariants, initial: "normal", animate: controls }), jsx(motion.path, { variants: arrowShaftVariants, initial: "normal", animate: controls })] }) }));
+const BowArrow = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M17 3h4v4", variants: arrowTipVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M18.575 11.082a13 13 0 0 1 1.048 9.027 1.17 1.17 0 0 1-1.914.597L14 17", variants: bowStringVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M7 10 3.29 6.29a1.17 1.17 0 0 1 .6-1.91 13 13 0 0 1 9.03 1.05", variants: bowBottomVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M7 14a1.7 1.7 0 0 0-1.207.5l-2.646 2.646A.5.5 0 0 0 3.5 18H5a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 .854.354L9.5 18.207A1.7 1.7 0 0 0 10 17v-2a1 1 0 0 0-1-1z", variants: arrowHeadVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M9.707 14.293 21 3", variants: arrowShaftVariants, initial: "normal", animate: controls })] }) }));
 });
 BowArrow.displayName = 'BowArrow';
 

package/dist/esm/icons/b/BowArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BowArrow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BowArrow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/BoxesLinked.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
+
+const cubeVariants = {
+    normal: { scale: 1, transition: { duration: 0.2 } },
+    animate: (i) => ({
+        scale: [1, 0.9, 1],
+        transition: { duration: 0.45, delay: i * 0.15, ease: 'easeInOut' },
+    }),
+};
+const linkVariants = {
+    normal: { pathLength: 1, opacity: 1, transition: { duration: 0.2 } },
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, delay: 0.1 + i * 0.15, ease: 'easeOut' },
+    }),
+};
+const BoxesLinked = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props);
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx(motion.path, { d: "M14 6h2a2 2 0 0 1 2 2v5", custom: 1, variants: linkVariants, initial: "normal", animate: controls }), jsxs(motion.g, { custom: 1, variants: cubeVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M14.21 15.202 18 17.4V22" }), jsx("path", { d: "M14.796 14.611A1.6 1.6 0 0 0 14 15.995v3.013a1.6 1.6 0 0 0 .797 1.384l2.4 1.392a1.6 1.6 0 0 0 1.606 0l2.4-1.392A1.6 1.6 0 0 0 22 19.008v-3.013a1.6 1.6 0 0 0-.796-1.384l-2.4-1.394a1.6 1.6 0 0 0-1.514-.051z" }), jsx("path", { d: "m18 17.4 3.79-2.198" })] }), jsx(motion.path, { d: "M2.21 4.202 6 6.4V16a2 2 0 0 0 2 2h2", custom: 0, variants: linkVariants, initial: "normal", animate: controls }), jsxs(motion.g, { custom: 0, variants: cubeVariants, initial: "normal", animate: controls, style: { originX: '50%', originY: '50%' }, children: [jsx("path", { d: "M2.796 3.611A1.6 1.6 0 0 0 2 4.995v3.013a1.6 1.6 0 0 0 .797 1.384l2.4 1.392a1.6 1.6 0 0 0 1.606 0l2.4-1.392A1.6 1.6 0 0 0 10 8.008V4.995a1.6 1.6 0 0 0-.796-1.384l-2.4-1.394a1.6 1.6 0 0 0-1.514-.052z" }), jsx("path", { d: "m6 6.4 3.79-2.198" })] })] }) }));
+});
+BoxesLinked.displayName = 'BoxesLinked';
+
+export { BoxesLinked };
+//# sourceMappingURL=BoxesLinked.js.map

package/dist/esm/icons/b/BoxesLinked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxesLinked.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/icons/b/BriefcasePlus.js

@@ -14,7 +14,7 @@ const popVariants = {
 };
 const BriefcasePlus = forwardRef(({ className, size = 28, style, ...props }, ref) => {
     const { controls, iconProps } = useAnimatedIcon(ref, props);
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", children: [jsx("path", { d: "M13.354 20H4a2 2 0 01-2-2V8a2 2 0 012-2h16a2 2 0 012 2v3.354" }), jsx("path", { d: "M16 11.354V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v16" }), jsx(motion.path, { d: "M16 17h6", variants: popVariants, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M19 14v6", variants: popVariants, initial: "normal", animate: controls, custom: 0 })] }) }));
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", style: { overflow: 'visible' }, children: [jsx("path", { d: "M13.354 20H4a2 2 0 01-2-2V8a2 2 0 012-2h16a2 2 0 012 2v3.354" }), jsx("path", { d: "M16 11.354V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v16" }), jsx(motion.path, { d: "M16 17h6", variants: popVariants, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M19 14v6", variants: popVariants, initial: "normal", animate: controls, custom: 0 })] }) }));
 });
 BriefcasePlus.displayName = 'BriefcasePlus';
 

package/dist/esm/icons/b/Brush.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useAnimation, motion } from 'framer-motion';
-import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
 import { cn } from '../../lib/cn.js';
+import { useAnimatedIcon } from '../../lib/use-animated-icon.js';
 
 const brushBodyVariants = {
     normal: {
@@ -15,17 +16,11 @@ const brushBodyVariants = {
         x: [0, -1, 0.5, -0.8, 0.3, 0],
         y: [0, 0.5, -0.3, 0.4, -0.2, 0],
         rotate: [0, -2, 1, -1.5, 0.8, 0],
-        transition: {
-            duration: 1.2,
-            ease: 'easeInOut',
-        },
+        transition: { duration: 1.2, ease: 'easeInOut' },
     },
 };
 const bristlesVariants = {
-    normal: {
-        d: 'm11 10 3 3',
-        transition: { duration: 0.3 },
-    },
+    normal: { d: 'm11 10 3 3', transition: { duration: 0.3 } },
     painting: {
         d: [
             'm11 10 3 3',
@@ -34,25 +29,15 @@ const bristlesVariants = {
             'm10.8 10.2 3.2 2.8',
             'm11 10 3 3',
         ],
-        transition: {
-            duration: 1.2,
-            ease: 'easeInOut',
-        },
+        transition: { duration: 1.2, ease: 'easeInOut' },
     },
 };
 const paintBlobVariants = {
-    normal: {
-        opacity: 0,
-        scale: 0,
-        transition: { duration: 0.2 },
-    },
+    normal: { opacity: 0, scale: 0, transition: { duration: 0.2 } },
     painting: {
         opacity: [0, 0.8, 0.6, 0.4, 0.2, 0],
         scale: [0, 0.8, 1.2, 1.5, 1.8, 2],
-        transition: {
-            duration: 1.2,
-            ease: 'easeOut',
-        },
+        transition: { duration: 1.2, ease: 'easeOut' },
     },
 };
 const brushTipVariants = {
@@ -68,10 +53,7 @@ const brushTipVariants = {
             'M6.3 20.9A3.3 3.3 0 1 0 2.9 17.3a2.52 2.52 0 0 1-.608 1.692A1 1 0 0 0 2.9 20.9z',
             'M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z',
         ],
-        transition: {
-            duration: 1.2,
-            ease: 'easeInOut',
-        },
+        transition: { duration: 1.2, ease: 'easeInOut' },
     },
 };
 const handleVariants = {
@@ -87,56 +69,12 @@ const handleVariants = {
             'M9.869 17.131 21.278 5.724a1 1 0 0 0-2.902-3.102L6.867 14.131',
             'M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031',
         ],
-        transition: {
-            duration: 1.2,
-            ease: 'easeInOut',
-        },
+        transition: { duration: 1.2, ease: 'easeInOut' },
     },
 };
-const Brush = forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
-    const controls = useAnimation();
-    const loopRef = useRef(loopOnHover);
-    const isControlledRef = useRef(false);
-    const triggerAnimation = useCallback(async () => {
-        await controls.start('painting');
-        await new Promise((resolve) => setTimeout(resolve, 200));
-        await controls.start('normal');
-        if (loopRef.current) {
-            setTimeout(() => triggerAnimation(), 1000);
-        }
-    }, [controls]);
-    useEffect(() => {
-        loopRef.current = loopOnHover;
-    }, [loopOnHover]);
-    useEffect(() => {
-        if (autoAnimateOnLoad)
-            triggerAnimation();
-    }, [autoAnimateOnLoad, triggerAnimation]);
-    useImperativeHandle(ref, () => {
-        isControlledRef.current = true;
-        return {
-            startAnimation: () => triggerAnimation(),
-            stopAnimation: () => controls.start('normal'),
-        };
-    });
-    const handleMouseEnter = (e) => {
-        loopRef.current = loopOnHover;
-        if (!isControlledRef.current && hoverable)
-            triggerAnimation();
-        onMouseEnter?.(e);
-    };
-    const handleMouseLeave = (e) => {
-        loopRef.current = false;
-        if (!isControlledRef.current && hoverable)
-            controls.start('normal');
-        onMouseLeave?.(e);
-    };
-    const handleClick = (e) => {
-        if (animateOnClick)
-            triggerAnimation();
-        onClick?.(e);
-    };
-    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs(motion.svg, { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: brushBodyVariants, initial: "normal", animate: controls, style: { transformOrigin: '12px 12px' }, children: [jsx(motion.ellipse, { cx: "14", cy: "13", rx: "1", ry: "0.5", variants: paintBlobVariants, initial: "normal", animate: controls, fill: "currentColor", stroke: "none", opacity: "0.6" }), jsx(motion.circle, { cx: "15.5", cy: "11.5", r: "0.3", variants: paintBlobVariants, initial: "normal", animate: controls, fill: "currentColor", stroke: "none", opacity: "0.4" }), jsx(motion.path, { variants: bristlesVariants, initial: "normal", animate: controls }), jsx(motion.path, { variants: brushTipVariants, initial: "normal", animate: controls }), jsx(motion.path, { variants: handleVariants, initial: "normal", animate: controls })] }) }));
+const Brush = forwardRef(({ className, size = 28, style, ...props }, ref) => {
+    const { controls, iconProps } = useAnimatedIcon(ref, props, { animate: 'painting' });
+    return (jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, ...iconProps, children: jsxs(motion.svg, { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "100%", height: "100%", variants: brushBodyVariants, initial: "normal", animate: controls, style: { transformOrigin: '12px 12px' }, children: [jsx(motion.ellipse, { cx: "14", cy: "13", rx: "1", ry: "0.5", fill: "currentColor", stroke: "none", opacity: "0.6", variants: paintBlobVariants, initial: "normal", animate: controls }), jsx(motion.circle, { cx: "15.5", cy: "11.5", r: "0.3", fill: "currentColor", stroke: "none", opacity: "0.4", variants: paintBlobVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "m11 10 3 3", variants: bristlesVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z", variants: brushTipVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031", variants: handleVariants, initial: "normal", animate: controls })] }) }));
 });
 Brush.displayName = 'Brush';
 

package/dist/esm/icons/b/Brush.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brush.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Brush.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}