aliveicon 1.0.23 → 1.0.24

package/dist/cjs/index.js

@@ -4,7 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var react = require('react');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(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}
 
@@ -2963,10 +2983,10 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
-function cn$5(...inputs) {
+function cn$p(...inputs) {
     return twMerge(clsx(inputs));
 }
-const squareVariants = {
+const squareVariants$1 = {
     normal: {
         scale: 1,
         opacity: 1,
@@ -2978,7 +2998,7 @@ const squareVariants = {
         transition: { duration: 0.6, ease: 'easeInOut' },
     },
 };
-const pathVariants$2 = {
+const pathVariants$k = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3001,18 +3021,18 @@ const pathVariants$2 = {
 };
 function SquareActivity({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
     const controls = framerMotion.useAnimation();
-    const loopRef = react.useRef(loopOnHover);
-    const triggerAnimation = react.useCallback(async () => {
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.useCallback(async () => {
         console.log("started animation");
         await controls.start('animate');
         await controls.start('normal');
         if (loopRef.current)
             triggerAnimation();
     }, [controls]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         loopRef.current = loopOnHover;
     }, [loopOnHover]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (autoAnimateOnLoad)
             triggerAnimation();
     }, [autoAnimateOnLoad, triggerAnimation]);
@@ -3031,15 +3051,15 @@ function SquareActivity({ size = 28, className, style, autoAnimateOnLoad = false
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsxRuntime.jsx("div", { className: cn$5('rounded-md', className), style: {
+    return (jsxRuntime.jsx("div", { className: cn$p('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.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: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "18", height: "18", x: "3", y: "3", rx: "2", variants: squareVariants$1, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$k, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
 }
 
-function cn$4(...inputs) {
+function cn$o(...inputs) {
     return twMerge(clsx(inputs));
 }
 const bounceVariant$1 = {
@@ -3097,17 +3117,17 @@ const bouncePathVariants$1 = {
 };
 function ArrowDown({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, isBounce = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
     const controls = framerMotion.useAnimation();
-    const loopRef = react.useRef(loopOnHover);
-    const triggerAnimation = react.useCallback(async () => {
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.useCallback(async () => {
         await controls.start('animate');
         await controls.start('normal');
         if (loopRef.current)
             triggerAnimation();
     }, [controls]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         loopRef.current = loopOnHover;
     }, [loopOnHover]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (autoAnimateOnLoad)
             triggerAnimation();
     }, [autoAnimateOnLoad, triggerAnimation]);
@@ -3132,14 +3152,14 @@ function ArrowDown({ size = 28, className, style, autoAnimateOnLoad = false, hov
         "M18 7v9",
         "m14 12 4 4 4-4",
     ];
-    return (jsxRuntime.jsx("div", { className: cn$4('inline-block', className), style: {
+    return (jsxRuntime.jsx("div", { className: cn$o('inline-block', className), style: {
             width: size,
             height: size,
             ...style,
         }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.jsx(framerMotion.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) => (jsxRuntime.jsx(framerMotion.motion.path, { d: d, variants: isBounce ? bouncePathVariants$1 : lineVariants$1, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
 }
 
-function cn$3(...inputs) {
+function cn$n(...inputs) {
     return twMerge(clsx(inputs));
 }
 const bounceVariant = {
@@ -3197,17 +3217,17 @@ const bouncePathVariants = {
 };
 function ArrowUp({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, isBounce = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
     const controls = framerMotion.useAnimation();
-    const loopRef = react.useRef(loopOnHover);
-    const triggerAnimation = react.useCallback(async () => {
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.useCallback(async () => {
         await controls.start('animate');
         await controls.start('normal');
         if (loopRef.current)
             triggerAnimation();
     }, [controls]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         loopRef.current = loopOnHover;
     }, [loopOnHover]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (autoAnimateOnLoad)
             triggerAnimation();
     }, [autoAnimateOnLoad, triggerAnimation]);
@@ -3232,14 +3252,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 (jsxRuntime.jsx("div", { className: cn$3('inline-block', className), style: {
+    return (jsxRuntime.jsx("div", { className: cn$n('inline-block', className), style: {
             width: size,
             height: size,
             ...style,
         }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.jsx(framerMotion.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) => (jsxRuntime.jsx(framerMotion.motion.path, { d: d, variants: isBounce ? bouncePathVariants : lineVariants, initial: isBounce ? 'hidden' : 'normal', animate: isBounce ? 'visible' : controls, custom: i }, i))) }) }));
 }
 
-function cn$2(...inputs) {
+function cn$m(...inputs) {
     return twMerge(clsx(inputs));
 }
 const circleVariants = {
@@ -3258,7 +3278,7 @@ const circleVariants = {
         },
     },
 };
-const pathVariants$1 = {
+const pathVariants$j = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3281,17 +3301,17 @@ const pathVariants$1 = {
 };
 function AccessibilityActivity({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
     const controls = framerMotion.useAnimation();
-    const loopRef = react.useRef(loopOnHover);
-    const triggerAnimation = react.useCallback(async () => {
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.useCallback(async () => {
         await controls.start('animate');
         await controls.start('normal');
         if (loopRef.current)
             triggerAnimation();
     }, [controls]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         loopRef.current = loopOnHover;
     }, [loopOnHover]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (autoAnimateOnLoad)
             triggerAnimation();
     }, [autoAnimateOnLoad, triggerAnimation]);
@@ -3310,18 +3330,18 @@ function AccessibilityActivity({ size = 28, className, style, autoAnimateOnLoad
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsxRuntime.jsx("div", { className: cn$2('rounded-md', className), style: {
+    return (jsxRuntime.jsx("div", { className: cn$m('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants$1, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.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: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.circle, { cx: "16", cy: "4", r: "1", variants: circleVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m18 19 1-7-6 1", variants: pathVariants$j, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "m5 8 3-3 5.5 3-2.36 3.5", variants: pathVariants$j, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M4.24 14.5a5 5 0 0 0 6.88 6", variants: pathVariants$j, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M13.76 17.5a5 5 0 0 0-6.88-6", variants: pathVariants$j, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
 }
 
-function cn$1(...inputs) {
+function cn$l(...inputs) {
     return twMerge(clsx(inputs));
 }
-const pathVariants = {
+const pathVariants$i = {
     normal: {
         opacity: 1,
         pathLength: 1,
@@ -3344,18 +3364,18 @@ const pathVariants = {
 };
 function Activity({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }) {
     const controls = framerMotion.useAnimation();
-    const loopRef = react.useRef(loopOnHover);
-    const triggerAnimation = react.useCallback(async () => {
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.useCallback(async () => {
         console.log("started animation");
         await controls.start('animate');
         await controls.start('normal');
         if (loopRef.current)
             triggerAnimation();
     }, [controls]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         loopRef.current = loopOnHover;
     }, [loopOnHover]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (autoAnimateOnLoad)
             triggerAnimation();
     }, [autoAnimateOnLoad, triggerAnimation]);
@@ -3374,15 +3394,15 @@ function Activity({ size = 28, className, style, autoAnimateOnLoad = false, hove
             triggerAnimation();
         onClick?.(e);
     };
-    return (jsxRuntime.jsx("div", { className: cn$1('rounded-md', className), style: {
+    return (jsxRuntime.jsx("div", { className: cn$l('rounded-md', className), style: {
             width: size,
             height: size,
             display: 'inline-block',
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: jsxRuntime.jsx(framerMotion.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: jsxRuntime.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: jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 12h-2l-2 5-2-10-2 5H7", variants: pathVariants$i, animate: controls, initial: "normal", style: { strokeDasharray: 1 } }) }) }));
 }
 
-function cn(...inputs) {
+function cn$k(...inputs) {
     return twMerge(clsx(inputs));
 }
 const windVariants = {
@@ -3407,17 +3427,17 @@ const windVariants = {
         },
     }),
 };
-const AirVent = react.forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const AirVent = React.forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = framerMotion.useAnimation();
-    const isControlledRef = react.useRef(false);
-    react.useImperativeHandle(ref, () => {
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => {
         isControlledRef.current = true;
         return {
             startAnimation: () => controls.start('animate'),
             stopAnimation: () => controls.start('normal'),
         };
     });
-    const handleMouseEnter = react.useCallback((e) => {
+    const handleMouseEnter = React.useCallback((e) => {
         if (!isControlledRef.current) {
             controls.start('animate');
         }
@@ -3425,7 +3445,7 @@ const AirVent = react.forwardRef(({ onMouseEnter, onMouseLeave, className, size
             onMouseEnter?.(e);
         }
     }, [controls, onMouseEnter]);
-    const handleMouseLeave = react.useCallback((e) => {
+    const handleMouseLeave = React.useCallback((e) => {
         if (!isControlledRef.current) {
             controls.start('normal');
         }
@@ -3433,13 +3453,1445 @@ const AirVent = react.forwardRef(({ onMouseEnter, onMouseLeave, className, size
             onMouseLeave?.(e);
         }
     }, [controls, onMouseLeave]);
-    return (jsxRuntime.jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: jsxRuntime.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: [jsxRuntime.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" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6 8h12", variants: windVariants, initial: "normal", animate: controls, custom: 0.1 }), jsxRuntime.jsx(framerMotion.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 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6.6 15.6A2 2 0 1 0 10 17v-5", variants: windVariants, initial: "normal", animate: controls, custom: 0.2 })] }) }));
+    return (jsxRuntime.jsx("div", { className: cn$k(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: jsxRuntime.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: [jsxRuntime.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" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M6 8h12", variants: windVariants, initial: "normal", animate: controls, custom: 0.1 }), jsxRuntime.jsx(framerMotion.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 }), jsxRuntime.jsx(framerMotion.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';
 
+function cn$j(...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 = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.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)
+            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 (jsxRuntime.jsx("div", { className: cn$j(className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.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 }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M12 15l5 6H7z", variants: triangleVariants, initial: "normal", animate: controls })] }) }));
+}
+
+function cn$i(...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$h = {
+    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 = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const triggerAnimation = React.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)
+            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 (jsxRuntime.jsx("div", { className: cn$i('rounded-md', className), style: {
+            width: size,
+            height: size,
+            display: 'inline-block',
+            ...style,
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", variants: squareVariants, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.polyline, { points: "11 3 11 11 14 8 17 11 17 3", variants: pathVariants$h, animate: controls, initial: "normal", style: { strokeDasharray: 1 } })] }) }));
+};
+
+function cn$h(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$g = {
+    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 = React.forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const isControlledRef = React.useRef(false);
+    const timeoutRef = React.useRef(null);
+    const startOnce = React.useCallback(() => {
+        controls.start('animate');
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            controls.start('normal');
+        }, 700); // single cycle duration
+    }, [controls]);
+    const startLoop = React.useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = React.useCallback(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        controls.start('normal');
+    }, [controls]);
+    React.useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startOnce(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startLoop();
+            }
+            else {
+                startOnce();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startOnce, startLoop]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = React.useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startOnce();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startOnce]);
+    React.useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startOnce();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startOnce]);
+    return (jsxRuntime.jsx("div", { className: cn$h(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$g, initial: "normal", animate: controls, d: "M18 20.5L19.5 22" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$g, initial: "normal", animate: controls, d: "M6 20.5L4.5 22" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$g, 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" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$g, initial: "normal", animate: controls, d: "M15.339 15.862L12.549 14.197C12.063 13.909 11.667 13.216 11.667 12.649V8.95898" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$3, initial: "normal", animate: controls, d: "M18 2L21.747 5.31064" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$3, initial: "normal", animate: controls, d: "M6 2L2.25304 5.31064" })] }) }));
+});
+AlarmClock.displayName = 'AlarmClock';
+
+function cn$g(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$f = {
+    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 = React.forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const isControlledRef = React.useRef(false);
+    const timeoutRef = React.useRef(null);
+    const startAnimation = React.useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = React.useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = React.useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    React.useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = React.useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    React.useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsxRuntime.jsx("div", { className: cn$g(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.circle, { variants: pathVariants$f, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$2, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$2, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$f, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$f, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$f, initial: "normal", animate: controls, d: "m9 13 2 2 4-4" })] }) }));
+});
+AlarmClockCheck.displayName = 'AlarmClockCheck';
+
+function cn$f(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$e = {
+    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 = React.forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const isControlledRef = React.useRef(false);
+    const timeoutRef = React.useRef(null);
+    const startAnimation = React.useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = React.useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = React.useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    React.useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = React.useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    React.useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsxRuntime.jsx("div", { className: cn$f(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.circle, { variants: pathVariants$e, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$1, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants$1, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$e, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$e, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsxRuntime.jsx(framerMotion.motion.line, { variants: pathVariants$e, initial: "normal", animate: controls, x1: "9", y1: "13", x2: "15", y2: "13" })] }) }));
+});
+AlarmClockMinus.displayName = 'AlarmClockMinus';
+
+function cn$e(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$d = {
+    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 = React.forwardRef(({ className, size = 28, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const isControlledRef = React.useRef(false);
+    const timeoutRef = React.useRef(null);
+    const startAnimation = React.useCallback(() => {
+        controls.start('animate');
+    }, [controls]);
+    const stopAnimation = React.useCallback(() => {
+        controls.start('normal');
+    }, [controls]);
+    const startTimedAnimation = React.useCallback(() => {
+        startAnimation();
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            stopAnimation();
+        }, 700);
+    }, [startAnimation, stopAnimation]);
+    React.useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => startTimedAnimation(),
+            stopAnimation: () => stopAnimation(),
+        };
+    });
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            if (loopOnHover) {
+                startAnimation();
+            }
+            else {
+                startTimedAnimation();
+            }
+        }
+        onMouseEnter?.(e);
+    }, [hoverable, loopOnHover, onMouseEnter, startAnimation, startTimedAnimation]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable && loopOnHover) {
+            stopAnimation();
+        }
+        onMouseLeave?.(e);
+    }, [hoverable, loopOnHover, onMouseLeave, stopAnimation]);
+    const handleClick = React.useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            startTimedAnimation();
+        }
+        onClick?.(e);
+    }, [animateOnClick, onClick, startTimedAnimation]);
+    React.useEffect(() => {
+        if (autoAnimateOnLoad) {
+            startTimedAnimation();
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [autoAnimateOnLoad, startTimedAnimation]);
+    return (jsxRuntime.jsx("div", { className: cn$e(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.circle, { variants: pathVariants$d, initial: "normal", animate: controls, cx: "12", cy: "13", r: "8" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants, initial: "normal", animate: controls, d: "M5 3 2 6" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: secondaryPathVariants, initial: "normal", animate: controls, d: "m22 6-3-3" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$d, initial: "normal", animate: controls, d: "M6.38 18.7 4 21" }), jsxRuntime.jsx(framerMotion.motion.path, { variants: pathVariants$d, initial: "normal", animate: controls, d: "M17.64 18.67 20 21" }), jsxRuntime.jsx(framerMotion.motion.line, { variants: pathVariants$d, initial: "normal", animate: controls, x1: "9", y1: "13", x2: "15", y2: "13" }), jsxRuntime.jsx(framerMotion.motion.line, { variants: pathVariants$d, initial: "normal", animate: controls, y1: "10", x1: "12", y2: "16", x2: "12" })] }) }));
+});
+AlarmClockPlus.displayName = 'AlarmClockPlus';
+
+function cn$d(...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__namespace.forwardRef(({ size = 28, className, style, onMouseEnter, onMouseLeave, onClick, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    React.useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const triggerAnimation = React.useCallback(async () => {
+        await controls.start("animate");
+        await controls.start("normal");
+        if (loopRef.current)
+            triggerAnimation();
+    }, [controls]);
+    React__namespace.useEffect(() => {
+        loopRef.current = loopOnHover;
+    }, [loopOnHover]);
+    React__namespace.useEffect(() => {
+        if (autoAnimateOnLoad && !isControlledRef.current) {
+            triggerAnimation();
+        }
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    const handleMouseEnter = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            triggerAnimation();
+        }
+        onMouseEnter?.(e);
+    }, [triggerAnimation, onMouseEnter, hoverable]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (!isControlledRef.current && hoverable) {
+            controls.start("normal");
+        }
+        onMouseLeave?.(e);
+    }, [controls, onMouseLeave, hoverable]);
+    const handleClick = React.useCallback((e) => {
+        if (!isControlledRef.current && animateOnClick) {
+            triggerAnimation();
+        }
+        onClick?.(e);
+    }, [triggerAnimation, onClick, animateOnClick]);
+    return (jsxRuntime.jsx("div", { className: cn$d("inline-block", className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 12H7", variants: pathMotion, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M19 18H5", animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M21 6H3", animate: controls, initial: "normal" })] }) }));
+});
+AlignCenter.displayName = "AlignCenter";
+
+function cn$c(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$c = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$c('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M2 12h20", variants: pathVariants$c, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4", variants: pathVariants$c, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4", variants: pathVariants$c, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1", variants: pathVariants$c, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1", variants: pathVariants$c, animate: controls, initial: "normal" })] }) }));
+});
+AlignCenterHorizontal.displayName = 'AlignCenterHorizontal';
+
+function cn$b(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$b = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$b('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M12 2v20", variants: pathVariants$b, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4", variants: pathVariants$b, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4", variants: pathVariants$b, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1", variants: pathVariants$b, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1", variants: pathVariants$b, animate: controls, initial: "normal" })] }) }));
+});
+AlignCenterVertical.displayName = 'AlignCenterVertical';
+
+function cn$a(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$a = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$a('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "16", x: "4", y: "2", rx: "2", variants: pathVariants$a, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "9", x: "14", y: "9", rx: "2", variants: pathVariants$a, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M22 22H2", variants: pathVariants$a, animate: controls, initial: "normal" })] }) }));
+});
+AlignEndHorizontal.displayName = 'AlignEndHorizontal';
+
+function cn$9(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$9 = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$9('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "16", height: "6", x: "2", y: "4", rx: "2", variants: pathVariants$9, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "9", height: "6", x: "9", y: "14", rx: "2", variants: pathVariants$9, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M22 22V2", variants: pathVariants$9, animate: controls, initial: "normal" })] }) }));
+});
+AlignEndVertical.displayName = 'AlignEndVertical';
+
+function cn$8(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$8 = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$8('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$8, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$8, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 22v-5", variants: pathVariants$8, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M17 7V2", variants: pathVariants$8, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M7 22v-3", variants: pathVariants$8, animate: controls, initial: "normal" }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M7 5V2", variants: pathVariants$8, animate: controls, initial: "normal" })] }) }));
+});
+AlignHorizontalDistributeCenter.displayName = 'AlignHorizontalDistributeCenter';
+
+function cn$7(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$7 = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$7('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$7, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$7, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M10 2v20", variants: pathVariants$7, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M20 2v20", variants: pathVariants$7, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalDistributeEnd.displayName = 'AlignHorizontalDistributeEnd';
+
+function cn$6(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$6 = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$6('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "4", y: "5", rx: "2", variants: pathVariants$6, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "14", y: "7", rx: "2", variants: pathVariants$6, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M4 2v20", variants: pathVariants$6, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M14 2v20", variants: pathVariants$6, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalDistributeStart.displayName = 'AlignHorizontalDistributeStart';
+
+function cn$5(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$5 = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$5('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "2", y: "5", rx: "2", variants: pathVariants$5, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "16", y: "7", rx: "2", variants: pathVariants$5, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M12 2v20", variants: pathVariants$5, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyCenter.displayName = 'AlignHorizontalJustifyCenter';
+
+function cn$4(...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 AlignHorizontalJustifyEnd = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$4('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "2", y: "5", rx: "2", variants: pathVariants$4, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "12", y: "7", rx: "2", variants: pathVariants$4, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M22 2v20", variants: pathVariants$4, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyEnd.displayName = 'AlignHorizontalJustifyEnd';
+
+function cn$3(...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 AlignHorizontalJustifyStart = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$3('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "6", y: "5", rx: "2", variants: pathVariants$3, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "16", y: "7", rx: "2", variants: pathVariants$3, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M2 2v20", variants: pathVariants$3, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalJustifyStart.displayName = 'AlignHorizontalJustifyStart';
+
+function cn$2(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$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.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalSpaceAround = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$2('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "9", y: "7", rx: "2", variants: pathVariants$2, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M4 22V2", variants: pathVariants$2, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M20 22V2", variants: pathVariants$2, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalSpaceAround.displayName = 'AlignHorizontalSpaceAround';
+
+function cn$1(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants$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.6,
+            ease: 'linear',
+        },
+    },
+};
+const AlignHorizontalSpaceBetween = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn$1('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "14", x: "3", y: "5", rx: "2", variants: pathVariants$1, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.rect, { width: "6", height: "10", x: "15", y: "7", rx: "2", variants: pathVariants$1, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M3 2v20", variants: pathVariants$1, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M21 2v20", variants: pathVariants$1, initial: "normal", animate: controls })] }) }));
+});
+AlignHorizontalSpaceBetween.displayName = 'AlignHorizontalSpaceBetween';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const pathVariants = {
+    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 = React.forwardRef(({ size = 28, className, style, autoAnimateOnLoad = false, hoverable = true, loopOnHover = false, animateOnClick = false, onMouseEnter, onMouseLeave, onClick, ...props }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const loopRef = React.useRef(loopOnHover);
+    const isControlledRef = React.useRef(false);
+    const triggerAnimation = React.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)
+            triggerAnimation();
+    }, [autoAnimateOnLoad, triggerAnimation]);
+    React.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 (jsxRuntime.jsx("div", { className: cn('inline-block', className), style: { width: size, height: size, ...style }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, ...props, children: jsxRuntime.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: [jsxRuntime.jsx(framerMotion.motion.path, { d: "M3 12h18", variants: pathVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M3 18h18", variants: pathVariants, initial: "normal", animate: controls }), jsxRuntime.jsx(framerMotion.motion.path, { d: "M3 6h18", variants: pathVariants, initial: "normal", animate: controls })] }) }));
+});
+AlignJustify.displayName = 'AlignJustify';
+
 exports.AccessibilityActivity = AccessibilityActivity;
 exports.Activity = Activity;
 exports.AirVent = AirVent;
+exports.Airplay = Airplay;
+exports.AlarmClock = AlarmClock;
+exports.AlarmClockCheck = AlarmClockCheck;
+exports.AlarmClockMinus = AlarmClockMinus;
+exports.AlarmClockPlus = AlarmClockPlus;
+exports.Album = Album;
+exports.AlignCenter = AlignCenter;
+exports.AlignCenterHorizontal = AlignCenterHorizontal;
+exports.AlignCenterVertical = AlignCenterVertical;
+exports.AlignEndHorizontal = AlignEndHorizontal;
+exports.AlignEndVertical = AlignEndVertical;
+exports.AlignHorizontalDistributeCenter = AlignHorizontalDistributeCenter;
+exports.AlignHorizontalDistributeEnd = AlignHorizontalDistributeEnd;
+exports.AlignHorizontalDistributeStart = AlignHorizontalDistributeStart;
+exports.AlignHorizontalJustifyCenter = AlignHorizontalJustifyCenter;
+exports.AlignHorizontalJustifyEnd = AlignHorizontalJustifyEnd;
+exports.AlignHorizontalJustifyStart = AlignHorizontalJustifyStart;
+exports.AlignHorizontalSpaceAround = AlignHorizontalSpaceAround;
+exports.AlignHorizontalSpaceBetween = AlignHorizontalSpaceBetween;
+exports.AlignJustify = AlignJustify;
 exports.ArrowDown = ArrowDown;
 exports.ArrowUp = ArrowUp;
 exports.SquareActivity = SquareActivity;