aliveicon 1.0.23 → 1.0.25

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useAnimation, motion } from 'framer-motion';
+import * as React from 'react';
 import { useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -2959,10 +2960,10 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
-function cn$5(...inputs) {
+function cn$F(...inputs) {
     return twMerge(clsx(inputs));
 }
-const squareVariants = {
+const squareVariants$1 = {
     normal: {
         scale: 1,
         opacity: 1,
@@ -2974,7 +2975,7 @@ const squareVariants = {
         transition: { duration: 0.6, ease: 'easeInOut' },
     },
 };
-const pathVariants$2 = {
+const pathVariants$u = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3027,15 +3028,15 @@ function SquareActivity({ size = 28, className, style, autoAnimateOnLoad = false
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsx("div", { className: cn$5('rounded-md', className), style: {
+    return (jsx("div", { className: cn$F('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$2, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants$1, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$u, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
 }
 
-function cn$4(...inputs) {
+function cn$E(...inputs) {
     return twMerge(clsx(inputs));
 }
 const bounceVariant$1 = {
@@ -3056,7 +3057,7 @@ const bounceVariant$1 = {
         },
     },
 };
-const lineVariants$1 = {
+const lineVariants$4 = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3128,14 +3129,14 @@ function ArrowDown({ size = 28, className, style, autoAnimateOnLoad = false, hov
         "M18 7v9",
         "m14 12 4 4 4-4",
     ];
-    return (jsx("div", { className: cn$4('inline-block', className), style: {
+    return (jsx("div", { className: cn$E('inline-block', className), style: {
             width: size,
             height: size,
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { 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: isBounce ? bounceVariant$1 : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants$1 : lineVariants$1, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { 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: isBounce ? bounceVariant$1 : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants$1 : lineVariants$4, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
 }
 
-function cn$3(...inputs) {
+function cn$D(...inputs) {
     return twMerge(clsx(inputs));
 }
 const bounceVariant = {
@@ -3156,7 +3157,7 @@ const bounceVariant = {
         },
     },
 };
-const lineVariants = {
+const lineVariants$3 = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3228,14 +3229,14 @@ function ArrowUp({ size = 28, className, style, autoAnimateOnLoad = false, hover
         "M18 16V7", // arrow line, now reversed (was 7→16, now 16→7)
         "m22 12-4-4-4 4", // arrow head pointing upward
     ];
-    return (jsx("div", { className: cn$3('inline-block', className), style: {
+    return (jsx("div", { className: cn$D('inline-block', className), style: {
             width: size,
             height: size,
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { 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: isBounce ? bounceVariant : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx(motion.svg, { 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: isBounce ? bounceVariant : undefined, animate: isBounce ? controls : undefined, initial: isBounce ? 'normal' : undefined, children: paths.map((d, i) => (jsx(motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants$3, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
 }
 
-function cn$2(...inputs) {
+function cn$C(...inputs) {
     return twMerge(clsx(inputs));
 }
 const circleVariants = {
@@ -3254,7 +3255,7 @@ const circleVariants = {
         },
     },
 };
-const pathVariants$1 = {
+const pathVariants$t = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3306,18 +3307,18 @@ function AccessibilityActivity({ size = 28, className, style, autoAnimateOnLoad
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsx("div", { className: cn$2('rounded-md', className), style: {
+    return (jsx("div", { className: cn$C('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M13.76 17.5a5 5 0 0 0-6.88-6", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants$t, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants$t, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants$t, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsx(motion.path, { d: "M13.76 17.5a5 5 0 0 0-6.88-6", variants: pathVariants$t, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
 }
 
-function cn$1(...inputs) {
+function cn$B(...inputs) {
     return twMerge(clsx(inputs));
 }
-const pathVariants = {
+const pathVariants$s = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3370,15 +3371,15 @@ function Activity({ size = 28, className, style, autoAnimateOnLoad = false, hove
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsx("div", { className: cn$1('rounded-md', className), style: {
+    return (jsx("div", { className: cn$B('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx("svg", { 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 12h-2l-2 5-2-10-2 5H7", variants: pathVariants, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }) }) }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsx("svg", { 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 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$s, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }) }) }));
 }
 
-function cn(...inputs) {
+function cn$A(...inputs) {
     return twMerge(clsx(inputs));
 }
 const windVariants = {
@@ -3429,9 +3430,2638 @@ const AirVent = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28,
             onMouseLeave?.(e);
         }
     }, [controls, onMouseLeave]);
-    return (jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }), jsx(motion.path, { d: "M6 8h12", variants: windVariants, initial: "normal", animate: controls, custom: 0.1 }), jsx(motion.path, { d: "M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12", variants: windVariants, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M6.6 15.6A2 2 0 1 0 10 17v-5", variants: windVariants, initial: "normal", animate: controls, custom: 0.2 })] }) }));
+    return (jsx("div", { className: cn$A(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }), jsx(motion.path, { d: "M6 8h12", variants: windVariants, initial: "normal", animate: controls, custom: 0.1 }), jsx(motion.path, { d: "M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12", variants: windVariants, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M6.6 15.6A2 2 0 1 0 10 17v-5", variants: windVariants, initial: "normal", animate: controls, custom: 0.2 })] }) }));
 });
 AirVent.displayName = 'AirVent';
 
-export { AccessibilityActivity, Activity, AirVent, ArrowDown, ArrowUp, SquareActivity };
+function cn$z(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const screenVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.3,
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const triangleVariants = {
+    normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        scale: [0.6, 1.1, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeOut',
+        },
+    },
+};
+function Airplay({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$z(className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1", variants: screenVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 15l5 6H7z", variants: triangleVariants, initial: "normal", animate: controls })] }) }));
+}
+
+function cn$y(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const squareVariants = {
+    normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        scale: 1.10,
+        opacity: 0.9,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+    },
+};
+const pathVariants$r = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const Album = ({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) => {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = (e) => {
+        if (hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$y('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsx(motion.polyline, { points: "11 3 11 11 14 8 17 11 17 3", variants: pathVariants$r, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+};
+
+function cn$x(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$q = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -1.5,
+        x: [-1, 1, -1, 1, -1, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const secondaryPathVariants$3 = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -2.5,
+        x: [-2, 2, -2, 2, -2, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const AlarmClock = forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const startOnce = useCallback(() => {
+        controls.start('animate');
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            controls.start('normal');
+        }, 700); // single cycle duration
+    }, [controls]);
+    const startLoop = useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = useCallback(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        controls.start('normal');
+    }, [controls]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startOnce(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startLoop();
+            }
+            else {
+                startOnce();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startOnce, startLoop]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startOnce();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startOnce]);
+    useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startOnce();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startOnce]);
+    return (jsx("div", { className: cn$x(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { overflow: 'visible' }, children: [jsx(motion.path, { variants: pathVariants$q, initial: "normal", animate: controls, d: "M18 20.5L19.5 22" }), jsx(motion.path, { variants: pathVariants$q, initial: "normal", animate: controls, d: "M6 20.5L4.5 22" }), jsx(motion.path, { variants: pathVariants$q, initial: "normal", animate: controls, d: "M21 13C21 17.968 16.968 22 12 22C7.032 22 3 17.968 3 13C3 8.032 7.032 4 12 4C16.968 4 21 8.032 21 13Z" }), jsx(motion.path, { variants: pathVariants$q, initial: "normal", animate: controls, d: "M15.339 15.862L12.549 14.197C12.063 13.909 11.667 13.216 11.667 12.649V8.95898" }), jsx(motion.path, { variants: secondaryPathVariants$3, initial: "normal", animate: controls, d: "M18 2L21.747 5.31064" }), jsx(motion.path, { variants: secondaryPathVariants$3, initial: "normal", animate: controls, d: "M6 2L2.25304 5.31064" })] }) }));
+});
+AlarmClock.displayName = 'AlarmClock';
+
+function cn$w(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$p = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -1.5,
+        x: [-1, 1, -1, 1, -1, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const secondaryPathVariants$2 = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -2.5,
+        x: [-2, 2, -2, 2, -2, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const AlarmClockCheck = forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const startAnimation = useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsx("div", { className: cn$w(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { overflow: 'visible' }, children: [jsx(motion.circle, { variants: pathVariants$p, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsx(motion.path, { variants: secondaryPathVariants$2, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsx(motion.path, { variants: secondaryPathVariants$2, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsx(motion.path, { variants: pathVariants$p, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsx(motion.path, { variants: pathVariants$p, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsx(motion.path, { variants: pathVariants$p, initial: "normal", animate: controls, d: "m9 13 2 2 4-4" })] }) }));
+});
+AlarmClockCheck.displayName = 'AlarmClockCheck';
+
+function cn$v(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$o = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -1.5,
+        x: [-1, 1, -1, 1, -1, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const secondaryPathVariants$1 = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -2.5,
+        x: [-2, 2, -2, 2, -2, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const AlarmClockMinus = forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const startAnimation = useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsx("div", { className: cn$v(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { overflow: 'visible' }, children: [jsx(motion.circle, { variants: pathVariants$o, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsx(motion.path, { variants: secondaryPathVariants$1, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsx(motion.path, { variants: secondaryPathVariants$1, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsx(motion.path, { variants: pathVariants$o, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsx(motion.path, { variants: pathVariants$o, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsx(motion.line, { variants: pathVariants$o, initial: "normal", animate: controls, x1: "9", y1: "13", x2: "15", y2: "13" })] }) }));
+});
+AlarmClockMinus.displayName = 'AlarmClockMinus';
+
+function cn$u(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$n = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -1.5,
+        x: [-1, 1, -1, 1, -1, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const secondaryPathVariants = {
+    normal: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+    },
+    animate: {
+        y: -2.5,
+        x: [-2, 2, -2, 2, -2, 0],
+        transition: {
+            x: { duration: 0.3, repeat: Infinity, ease: 'linear' },
+            y: { duration: 0.2, type: 'spring', stiffness: 200, damping: 25 },
+        },
+    },
+};
+const AlarmClockPlus = forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const startAnimation = useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsx("div", { className: cn$u(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { overflow: 'visible' }, children: [jsx(motion.circle, { variants: pathVariants$n, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsx(motion.path, { variants: secondaryPathVariants, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsx(motion.path, { variants: secondaryPathVariants, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsx(motion.path, { variants: pathVariants$n, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsx(motion.path, { variants: pathVariants$n, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsx(motion.line, { variants: pathVariants$n, initial: "normal", animate: controls, x1: "9", y1: "13", x2: "15", y2: "13" }), jsx(motion.line, { variants: pathVariants$n, initial: "normal", animate: controls, y1: "10", x1: "12", y2: "16", x2: "12" })] }) }));
+});
+AlarmClockPlus.displayName = 'AlarmClockPlus';
+
+function cn$t(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathMotion = {
+    normal: {
+        translateX: 0,
+    },
+    animate: {
+        translateX: [0, 3, -3, 2, -2, 0],
+        transition: {
+            ease: "linear",
+            duration: 1,
+        },
+    },
+};
+const AlignCenter = React.forwardRef(({ size = 28, className, style, onMouseEnter, onMouseLeave, onClick, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, ...props }, ref) => {
+    const controls = useAnimation();
+    const loopRef = useRef(loopOnHover);
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const triggerAnimation = useCallback(async () => {
+        await controls.start("animate");
+        await controls.start("normal");
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    React.useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    React.useEffect(() => {
+        if (autoAnimateOnLoad && !isControlledRef.current) {
+            triggerAnimation();
+        }
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            triggerAnimation();
+        }
+        onMouseEnter?.(e);
+    }, [triggerAnimation, onMouseEnter, hoverable]);
+    const handleMouseLeave = useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            controls.start("normal");
+        }
+        onMouseLeave?.(e);
+    }, [controls, onMouseLeave, hoverable]);
+    const handleClick = useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            triggerAnimation();
+        }
+        onClick?.(e);
+    }, [triggerAnimation, onClick, animateOnClick]);
+    return (jsx("div", { className: cn$t("inline-block", className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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 12H7", variants: pathMotion, initial: "normal", animate: controls }), jsx(motion.path, { d: "M19 18H5", animate: controls, initial: "normal" }), jsx(motion.path, { d: "M21 6H3", animate: controls, initial: "normal" })] }) }));
+});
+AlignCenter.displayName = "AlignCenter";
+
+function cn$s(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$m = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+        },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignCenterHorizontal = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$s('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M2 12h20", variants: pathVariants$m, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4", variants: pathVariants$m, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4", variants: pathVariants$m, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1", variants: pathVariants$m, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1", variants: pathVariants$m, animate: controls, initial: "normal" })] }) }));
+});
+AlignCenterHorizontal.displayName = 'AlignCenterHorizontal';
+
+function cn$r(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$l = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignCenterVertical = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$r('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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 2v20", variants: pathVariants$l, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4", variants: pathVariants$l, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4", variants: pathVariants$l, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1", variants: pathVariants$l, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1", variants: pathVariants$l, animate: controls, initial: "normal" })] }) }));
+});
+AlignCenterVertical.displayName = 'AlignCenterVertical';
+
+function cn$q(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$k = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignEndHorizontal = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$q('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "6", height: "16", x: "4", y: "2", rx: "2", variants: pathVariants$k, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "6", height: "9", x: "14", y: "9", rx: "2", variants: pathVariants$k, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M22 22H2", variants: pathVariants$k, animate: controls, initial: "normal" })] }) }));
+});
+AlignEndHorizontal.displayName = 'AlignEndHorizontal';
+
+function cn$p(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$j = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignEndVertical = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$p('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "16", height: "6", x: "2", y: "4", rx: "2", variants: pathVariants$j, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "9", height: "6", x: "9", y: "14", rx: "2", variants: pathVariants$j, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M22 22V2", variants: pathVariants$j, animate: controls, initial: "normal" })] }) }));
+});
+AlignEndVertical.displayName = 'AlignEndVertical';
+
+function cn$o(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$i = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignHorizontalDistributeCenter = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$o('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$i, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$i, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 22v-5", variants: pathVariants$i, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 7V2", variants: pathVariants$i, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M7 22v-3", variants: pathVariants$i, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M7 5V2", variants: pathVariants$i, animate: controls, initial: "normal" })] }) }));
+});
+AlignHorizontalDistributeCenter.displayName = 'AlignHorizontalDistributeCenter';
+
+function cn$n(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$h = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalDistributeEnd = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$n('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$h, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$h, initial: "normal", animate: controls }), jsx(motion.path, { d: "M10 2v20", variants: pathVariants$h, initial: "normal", animate: controls }), jsx(motion.path, { d: "M20 2v20", variants: pathVariants$h, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalDistributeEnd.displayName = 'AlignHorizontalDistributeEnd';
+
+function cn$m(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$g = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalDistributeStart = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$m('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$g, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$g, initial: "normal", animate: controls }), jsx(motion.path, { d: "M4 2v20", variants: pathVariants$g, initial: "normal", animate: controls }), jsx(motion.path, { d: "M14 2v20", variants: pathVariants$g, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalDistributeStart.displayName = 'AlignHorizontalDistributeStart';
+
+function cn$l(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$f = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalJustifyCenter = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$l('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "2", y: "5", rx: "2", variants: pathVariants$f, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "16", y: "7", rx: "2", variants: pathVariants$f, initial: "normal", animate: controls }), jsx(motion.path, { d: "M12 2v20", variants: pathVariants$f, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyCenter.displayName = 'AlignHorizontalJustifyCenter';
+
+function cn$k(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$e = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalJustifyEnd = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$k('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "2", y: "5", rx: "2", variants: pathVariants$e, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "12", y: "7", rx: "2", variants: pathVariants$e, initial: "normal", animate: controls }), jsx(motion.path, { d: "M22 2v20", variants: pathVariants$e, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyEnd.displayName = 'AlignHorizontalJustifyEnd';
+
+function cn$j(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$d = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalJustifyStart = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$j('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "6", y: "5", rx: "2", variants: pathVariants$d, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "16", y: "7", rx: "2", variants: pathVariants$d, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 2v20", variants: pathVariants$d, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyStart.displayName = 'AlignHorizontalJustifyStart';
+
+function cn$i(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$c = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalSpaceAround = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$i('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "10", x: "9", y: "7", rx: "2", variants: pathVariants$c, initial: "normal", animate: controls }), jsx(motion.path, { d: "M4 22V2", variants: pathVariants$c, initial: "normal", animate: controls }), jsx(motion.path, { d: "M20 22V2", variants: pathVariants$c, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalSpaceAround.displayName = 'AlignHorizontalSpaceAround';
+
+function cn$h(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$b = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalSpaceBetween = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$h('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "6", height: "14", x: "3", y: "5", rx: "2", variants: pathVariants$b, initial: "normal", animate: controls }), jsx(motion.rect, { width: "6", height: "10", x: "15", y: "7", rx: "2", variants: pathVariants$b, initial: "normal", animate: controls }), jsx(motion.path, { d: "M3 2v20", variants: pathVariants$b, initial: "normal", animate: controls }), jsx(motion.path, { d: "M21 2v20", variants: pathVariants$b, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalSpaceBetween.displayName = 'AlignHorizontalSpaceBetween';
+
+function cn$g(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$a = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignJustify = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$g('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M3 12h18", variants: pathVariants$a, initial: "normal", animate: controls }), jsx(motion.path, { d: "M3 18h18", variants: pathVariants$a, initial: "normal", animate: controls }), jsx(motion.path, { d: "M3 6h18", variants: pathVariants$a, initial: "normal", animate: controls })] }) }));
+});
+AlignJustify.displayName = 'AlignJustify';
+
+function cn$f(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$9 = {
+    normal: (i) => ({
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            delay: i * 0.2,
+        },
+    }),
+    animate: (i) => ({
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+            delay: i * 0.2,
+        },
+    }),
+};
+const AlignLeft = 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((i) => pathVariants$9.animate(i));
+        await controls.start((i) => pathVariants$9.normal(i));
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start((i) => pathVariants$9.animate(i)),
+            stopAnimation: () => controls.start((i) => pathVariants$9.normal(i)),
+        };
+    }, [controls]);
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start((i) => pathVariants$9.normal(i));
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$f('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M21 6H3", variants: pathVariants$9, custom: 0, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M15 12H3", variants: pathVariants$9, custom: 1, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M17 18H3", variants: pathVariants$9, custom: 2, animate: controls, initial: "normal" })] }) }));
+});
+AlignLeft.displayName = 'AlignLeft';
+
+function cn$e(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$8 = {
+    normal: (i) => ({
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            delay: i * 0.16,
+        },
+    }),
+    animate: (i) => ({
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            delay: i * 0.16
+        },
+    }),
+};
+const AlignRight = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    }, [controls]);
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$e('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M3 6H21", variants: pathVariants$8, custom: 0, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M9 12H21", variants: pathVariants$8, custom: 1, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M7 18H21", variants: pathVariants$8, custom: 2, animate: controls, initial: "normal" })] }) }));
+});
+AlignRight.displayName = 'AlignRight';
+
+function cn$d(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$7 = {
+    normal: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            delay: i * 0.3,
+        },
+    }),
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: i * 0.3,
+        },
+    }),
+};
+const rectVariants$5 = {
+    normal: (i) => ({
+        scaleY: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            delay: i * 0.3 + 0.3,
+        },
+    }),
+    animate: (i) => ({
+        scaleY: [0, 1],
+        opacity: [0, 1],
+        originY: 0,
+        transition: {
+            duration: 0.6,
+            ease: 'easeOut',
+            delay: i * 0.4 + 0.1,
+        },
+    }),
+};
+const AlignStartHorizontal = 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((i) => i < 1 ? pathVariants$7.animate(i) : rectVariants$5.animate(i - 1));
+        await controls.start((i) => i < 1 ? pathVariants$7.normal(i) : rectVariants$5.normal(i - 1));
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start((i) => i < 1 ? pathVariants$7.animate(i) : rectVariants$5.animate(i - 1)),
+            stopAnimation: () => controls.start((i) => i < 1 ? pathVariants$7.normal(i) : rectVariants$5.normal(i - 1)),
+        };
+    }, [controls]);
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start((i) => i < 1 ? pathVariants$7.normal(i) : rectVariants$5.normal(i - 1));
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$d('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M22 2H2", variants: pathVariants$7, custom: 0, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "6", height: "16", x: "4", y: "6", rx: "2", variants: rectVariants$5, custom: 0, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "6", height: "9", x: "14", y: "6", rx: "2", variants: rectVariants$5, custom: 1, animate: controls, initial: "normal" })] }) }));
+});
+AlignStartHorizontal.displayName = 'AlignStartHorizontal';
+
+function cn$c(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$6 = {
+    normal: (i) => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            delay: i * 0.3,
+        },
+    }),
+    animate: (i) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: i * 0.3,
+        },
+    }),
+};
+const rectVariants$4 = {
+    normal: (i) => ({
+        scaleX: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            delay: i * 0.3 + 0.3,
+        },
+    }),
+    animate: (i) => ({
+        scaleX: [0, 1],
+        opacity: [0, 1],
+        originX: 0,
+        transition: {
+            duration: 0.6,
+            ease: 'easeOut',
+            delay: i * 0.4 + 0.1,
+        },
+    }),
+};
+const AlignStartVertical = 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((i) => i < 1 ? pathVariants$6.animate(i) : rectVariants$4.animate(i - 1));
+        await controls.start((i) => i < 1 ? pathVariants$6.normal(i) : rectVariants$4.normal(i - 1));
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start((i) => i < 1 ? pathVariants$6.animate(i) : rectVariants$4.animate(i - 1)),
+            stopAnimation: () => controls.start((i) => i < 1 ? pathVariants$6.normal(i) : rectVariants$4.normal(i - 1)),
+        };
+    }, [controls]);
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start((i) => i < 1 ? pathVariants$6.normal(i) : rectVariants$4.normal(i - 1));
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$c('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M2 2v20", variants: pathVariants$6, custom: 0, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "16", height: "6", x: "6", y: "4", rx: "2", variants: rectVariants$4, custom: 0, animate: controls, initial: "normal" }), jsx(motion.rect, { width: "9", height: "6", x: "6", y: "14", rx: "2", variants: rectVariants$4, custom: 1, animate: controls, initial: "normal" })] }) }));
+});
+AlignStartVertical.displayName = 'AlignStartVertical';
+
+function cn$b(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$5 = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+        },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const rectVariants$3 = {
+    normal: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            duration: 0.4,
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        scale: [0.8, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const AlignVerticalDistributeCenter = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$b('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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: "M22 17h-3", variants: pathVariants$5, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M22 7h-5", variants: pathVariants$5, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M5 17H2", variants: pathVariants$5, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M7 7H2", variants: pathVariants$5, animate: controls, initial: "normal" }), jsx(motion.rect, { x: "5", y: "14", width: "14", height: "6", rx: "2", variants: rectVariants$3, animate: controls, initial: "normal" }), jsx(motion.rect, { x: "7", y: "4", width: "10", height: "6", rx: "2", variants: rectVariants$3, animate: controls, initial: "normal" })] }) }));
+});
+AlignVerticalDistributeCenter.displayName = 'AlignVerticalDistributeCenter';
+
+function cn$a(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$4 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignVerticalDistributeEnd = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$a('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "14", height: "6", x: "5", y: "14", rx: "2", variants: pathVariants$4, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "4", rx: "2", variants: pathVariants$4, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 20h20", variants: pathVariants$4, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 10h20", variants: pathVariants$4, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalDistributeEnd.displayName = 'AlignVerticalDistributeEnd';
+
+function cn$9(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$3 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignVerticalDistributeStart = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$9('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.rect, { width: "14", height: "6", x: "5", y: "14", rx: "2", variants: pathVariants$3, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "4", rx: "2", variants: pathVariants$3, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 14h20", variants: pathVariants$3, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 4h20", variants: pathVariants$3, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalDistributeStart.displayName = 'AlignVerticalDistributeStart';
+
+function cn$8(...inputs) {
+    return twMerge(clsx(inputs));
+}
+// The line will animate first
+const lineVariants$2 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+        },
+    },
+};
+// Rectangles will animate after the line
+const rectVariants$2 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.4,
+            ease: 'easeInOut',
+            delay: 0.3,
+        },
+    },
+};
+const AlignVerticalJustifyCenter = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$8('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M2 12h20", variants: lineVariants$2, initial: "normal", animate: controls }), jsx(motion.rect, { width: "14", height: "6", x: "5", y: "16", rx: "2", variants: rectVariants$2, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "2", rx: "2", variants: rectVariants$2, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalJustifyCenter.displayName = 'AlignVerticalJustifyCenter';
+
+function cn$7(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const lineVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.18,
+            ease: 'easeInOut',
+        },
+    },
+};
+const middleRectVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+            delay: 0.2,
+        },
+    },
+};
+const topRectVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            delay: 0.4,
+        },
+    },
+};
+const AlignVerticalJustifyEnd = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$7('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M2 22h20", variants: lineVariants$1, initial: "normal", animate: controls }), jsx(motion.rect, { width: "14", height: "6", x: "5", y: "12", rx: "2", variants: middleRectVariants, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "2", rx: "2", variants: topRectVariants$1, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalJustifyEnd.displayName = 'AlignVerticalJustifyEnd';
+
+function cn$6(...inputs) {
+    return twMerge(clsx(inputs));
+}
+// Top line will animate first - 0.25 seconds
+const lineVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.25,
+            ease: 'easeOut',
+        },
+    },
+};
+// Middle rectangle animates second - 0.25 seconds (starting at 0.2s)
+const topRectVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.25,
+            ease: 'easeOut',
+            delay: 0.2, // Slight overlap with first animation
+        },
+    },
+};
+// Bottom rectangle animates last - 0.25 seconds (starting at 0.45s)
+const bottomRectVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.3 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.25,
+            ease: 'easeOut',
+            delay: 0.45, // Starts when middle rectangle is mostly done
+        },
+    },
+};
+const AlignVerticalJustifyStart = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$6('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M2 2h20", variants: lineVariants, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "6", rx: "2", variants: topRectVariants, initial: "normal", animate: controls }), jsx(motion.rect, { width: "14", height: "6", x: "5", y: "16", rx: "2", variants: bottomRectVariants, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalJustifyStart.displayName = 'AlignVerticalJustifyStart';
+
+function cn$5(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const linesVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.37,
+            ease: 'easeInOut',
+        },
+    },
+};
+const rectVariants$1 = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            delay: 0.33,
+        },
+    },
+};
+const AlignVerticalSpaceAround = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$5('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M22 4H2", variants: linesVariants$1, initial: "normal", animate: controls }), jsx(motion.path, { d: "M22 20H2", variants: linesVariants$1, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "9", rx: "2", variants: rectVariants$1, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalSpaceAround.displayName = 'AlignVerticalSpaceAround';
+
+function cn$4(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const linesVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.37,
+            ease: 'easeInOut',
+        },
+    },
+};
+const rectVariants = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            delay: 0.33,
+        },
+    },
+};
+const AlignVerticalSpaceBetween = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$4('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M2 21h20", variants: linesVariants, initial: "normal", animate: controls }), jsx(motion.path, { d: "M2 3h20", variants: linesVariants, initial: "normal", animate: controls }), jsx(motion.rect, { width: "14", height: "6", x: "5", y: "15", rx: "2", variants: rectVariants, initial: "normal", animate: controls }), jsx(motion.rect, { width: "10", height: "6", x: "7", y: "3", rx: "2", variants: rectVariants, initial: "normal", animate: controls })] }) }));
+});
+AlignVerticalSpaceBetween.displayName = 'AlignVerticalSpaceBetween';
+
+function cn$3(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$2 = {
+    normal: (custom) => ({
+        pathLength: 1,
+        opacity: 1,
+        pathOffset: 0,
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+            delay: custom,
+        },
+    }),
+    animate: (custom) => ({
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: custom,
+        },
+    }),
+};
+const Ampersand = 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);
+    // Imperative handle for external control
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    // Loop animation if loopOnHover is true
+    const triggerAnimation = useCallback(async () => {
+        await controls.start('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad) {
+            triggerAnimation();
+        }
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = useCallback((e) => {
+        if (hoverable && !isControlledRef.current) {
+            triggerAnimation();
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, onMouseEnter, triggerAnimation]);
+    const handleMouseLeave = useCallback((e) => {
+        if (hoverable && !isControlledRef.current) {
+            controls.start('normal');
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, onMouseLeave, controls]);
+    const handleClick = useCallback((e) => {
+        if (animateOnClick && !isControlledRef.current) {
+            triggerAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, triggerAnimation]);
+    return (jsx("div", { className: cn$3(className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M17.5 12c0 4.4-3.6 8-8 8A4.5 4.5 0 0 1 5 15.5c0-6 8-4 8-8.5a3 3 0 1 0-6 0c0 3 2.5 8.5 12 13", variants: pathVariants$2, initial: "normal", animate: controls, custom: 0 }), jsx(motion.path, { d: "M16 12h3", variants: pathVariants$2, initial: "normal", animate: controls, custom: 0.2 })] }) }));
+});
+Ampersand.displayName = 'Ampersand';
+
+function cn$2(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$1 = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const Ampersands = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$2('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx(motion.path, { d: "M10 17c-5-3-7-7-7-9a2 2 0 0 1 4 0c0 2.5-5 2.5-5 6 0 1.7 1.3 3 3 3 2.8 0 5-2.2 5-5", variants: pathVariants$1, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M22 17c-5-3-7-7-7-9a2 2 0 0 1 4 0c0 2.5-5 2.5-5 6 0 1.7 1.3 3 3 3 2.8 0 5-2.2 5-5", variants: pathVariants$1, animate: controls, initial: "normal" })] }) }));
+});
+Ampersands.displayName = 'Ampersands';
+
+function cn$1(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants = {
+    normal: {
+        pathLength: 1,
+        pathOffset: 0,
+        opacity: 1,
+        transition: { duration: 0.4 },
+    },
+    animate: {
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.7,
+            ease: 'easeInOut',
+        },
+    },
+};
+const Apple = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        if (!isControlledRef.current && hoverable)
+            controls.start('normal');
+        onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+        if (animateOnClick)
+            triggerAnimation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cn$1('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxs("svg", { 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 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z", variants: pathVariants, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M10 2c1 .5 2 2 2 5", variants: pathVariants, animate: controls, initial: "normal" })] }) }));
+});
+Apple.displayName = 'Apple';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const draw = {
+    normal: { pathLength: 1, opacity: 1, transition: { duration: 0.4 } },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+    },
+};
+const Ambulance = 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('animate');
+        await controls.start('normal');
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    useEffect(() => {
+        if (autoAnimateOnLoad)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
+    });
+    const handleMouseEnter = (e) => {
+        if (!isControlledRef.current && hoverable)
+            triggerAnimation();
+        onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        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", { 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: "M10 10H6", variants: draw, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2", variants: draw, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14", variants: draw, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M8 8v4", variants: draw, animate: controls, initial: "normal" }), jsx(motion.path, { d: "M9 18h6", variants: draw, animate: controls, initial: "normal" }), jsx(motion.circle, { cx: "17", cy: "18", r: "2", animate: { scale: [1, 1.2, 1], fill: ['#000', '#000', '#000'] }, transition: { repeat: Infinity, duration: 1 } }), jsx(motion.circle, { cx: "7", cy: "18", r: "2", animate: { scale: [1, 1.2, 1], fill: ['#000', '#000', '#000'] }, transition: { repeat: Infinity, duration: 1, delay: 0.3 } })] }) }));
+});
+Ambulance.displayName = 'Ambulance';
+
+export { AccessibilityActivity, Activity, AirVent, Airplay, AlarmClock, AlarmClockCheck, AlarmClockMinus, AlarmClockPlus, Album, AlignCenter, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignHorizontalDistributeCenter, AlignHorizontalDistributeEnd, AlignHorizontalDistributeStart, AlignHorizontalJustifyCenter, AlignHorizontalJustifyEnd, AlignHorizontalJustifyStart, AlignHorizontalSpaceAround, AlignHorizontalSpaceBetween, AlignJustify, AlignLeft, AlignRight, AlignStartHorizontal, AlignStartVertical, AlignVerticalDistributeCenter, AlignVerticalDistributeEnd, AlignVerticalDistributeStart, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, AlignVerticalJustifyStart, AlignVerticalSpaceAround, AlignVerticalSpaceBetween, Ambulance, Ampersand, Ampersands, Apple, ArrowDown, ArrowUp, SquareActivity };
 //# sourceMappingURL=index.js.map