@moontra/moonui-pro 3.3.28 → 3.4.1

package/dist/index.mjs

@@ -212,7 +212,7 @@ var require_core = __commonJS({
         const pieces = name.split(".");
         return [
           `${prefix}${pieces.shift()}`,
-          ...pieces.map((x, i) => `${x}${"_".repeat(i + 1)}`)
+          ...pieces.map((x2, i) => `${x2}${"_".repeat(i + 1)}`)
         ].join(" ");
       }
       return `${prefix}${name}`;
@@ -410,7 +410,7 @@ var require_core = __commonJS({
       return concat2("(?:", re, ")?");
     }
     function concat2(...args) {
-      const joined = args.map((x) => source2(x)).join("");
+      const joined = args.map((x2) => source2(x2)).join("");
       return joined;
     }
     function stripOptionsFromArgs2(args) {
@@ -424,7 +424,7 @@ var require_core = __commonJS({
     }
     function either2(...args) {
       const opts = stripOptionsFromArgs2(args);
-      const joined = "(" + (opts.capture ? "" : "?:") + args.map((x) => source2(x)).join("|") + ")";
+      const joined = "(" + (opts.capture ? "" : "?:") + args.map((x2) => source2(x2)).join("|") + ")";
       return joined;
     }
     function countMatchGroups(re) {
@@ -765,7 +765,7 @@ var require_core = __commonJS({
       return compiledKeywords;
       function compileList(scopeName2, keywordList) {
         if (caseInsensitive) {
-          keywordList = keywordList.map((x) => x.toLowerCase());
+          keywordList = keywordList.map((x2) => x2.toLowerCase());
         }
         keywordList.forEach(function(keyword) {
           const pair = keyword.split("|");
@@ -4626,7 +4626,7 @@ function Calendar({
     )) }),
     /* @__PURE__ */ jsx("div", { className: cn(
       numberOfMonths > 1 && "flex flex-col sm:flex-row gap-2 sm:gap-4"
-    ), children: Array.from({ length: numberOfMonths }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderCalendar(i) }, i)) })
+    ), children: Array.from({ length: numberOfMonths }).map((_2, i) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderCalendar(i) }, i)) })
   ] });
 }
 Calendar.displayName = "Calendar";
@@ -4825,9 +4825,9 @@ var MoonUICardPro = React71.forwardRef(
       const rect = e.currentTarget.getBoundingClientRect();
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
-      const x = (e.clientX - centerX) / (rect.width / 2);
+      const x2 = (e.clientX - centerX) / (rect.width / 2);
       const y = (e.clientY - centerY) / (rect.height / 2);
-      setMousePos({ x, y });
+      setMousePos({ x: x2, y });
     };
     const handleMouseEnter = () => setIsHovered(true);
     const handleMouseLeave2 = () => {
@@ -9950,7 +9950,7 @@ var reducer = (state, action) => {
       return {
         ...state,
         toasts: state.toasts.map(
-          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+          (t2) => t2.id === action.toast.id ? { ...t2, ...action.toast } : t2
         )
       };
     case "DISMISS_TOAST": {
@@ -9965,10 +9965,10 @@ var reducer = (state, action) => {
       return {
         ...state,
         toasts: state.toasts.map(
-          (t) => t.id === toastId || toastId === void 0 ? {
-            ...t,
+          (t2) => t2.id === toastId || toastId === void 0 ? {
+            ...t2,
             open: false
-          } : t
+          } : t2
         )
       };
     }
@@ -9981,7 +9981,7 @@ var reducer = (state, action) => {
       }
       return {
         ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+        toasts: state.toasts.filter((t2) => t2.id !== action.toastId)
       };
     default:
       return state;
@@ -10455,7 +10455,7 @@ function getPaddingObject(padding) {
 }
 function rectToClientRect(rect) {
   const {
-    x,
+    x: x2,
     y,
     width,
     height
@@ -10464,10 +10464,10 @@ function rectToClientRect(rect) {
     width,
     height,
     top: y,
-    left: x,
-    right: x + width,
+    left: x2,
+    right: x2 + width,
     bottom: y + height,
-    x,
+    x: x2,
     y
   };
 }
@@ -10543,7 +10543,7 @@ var computePosition = async (reference, floating, config) => {
     strategy
   });
   let {
-    x,
+    x: x2,
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
@@ -10560,7 +10560,7 @@ var computePosition = async (reference, floating, config) => {
       data,
       reset: reset2
     } = await fn({
-      x,
+      x: x2,
       y,
       initialPlacement: placement,
       placement: statefulPlacement,
@@ -10573,7 +10573,7 @@ var computePosition = async (reference, floating, config) => {
         floating
       }
     });
-    x = nextX != null ? nextX : x;
+    x2 = nextX != null ? nextX : x2;
     y = nextY != null ? nextY : y;
     middlewareData = {
       ...middlewareData,
@@ -10596,7 +10596,7 @@ var computePosition = async (reference, floating, config) => {
           }) : reset2.rects;
         }
         ({
-          x,
+          x: x2,
           y
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
@@ -10604,7 +10604,7 @@ var computePosition = async (reference, floating, config) => {
     }
   }
   return {
-    x,
+    x: x2,
     y,
     placement: statefulPlacement,
     strategy,
@@ -10617,7 +10617,7 @@ async function detectOverflow(state, options) {
     options = {};
   }
   const {
-    x,
+    x: x2,
     y,
     platform: platform2,
     rects,
@@ -10641,7 +10641,7 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === "floating" ? {
-    x,
+    x: x2,
     y,
     width: rects.floating.width,
     height: rects.floating.height
@@ -10672,7 +10672,7 @@ var arrow = (options) => ({
   options,
   async fn(state) {
     const {
-      x,
+      x: x2,
       y,
       placement,
       rects,
@@ -10689,7 +10689,7 @@ var arrow = (options) => ({
     }
     const paddingObject = getPaddingObject(padding);
     const coords = {
-      x,
+      x: x2,
       y
     };
     const axis = getAlignmentAxis(placement);
@@ -10946,7 +10946,7 @@ var offset = function(options) {
     async fn(state) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
-        x,
+        x: x2,
         y,
         placement,
         middlewareData
@@ -10956,7 +10956,7 @@ var offset = function(options) {
         return {};
       }
       return {
-        x: x + diffCoords.x,
+        x: x2 + diffCoords.x,
         y: y + diffCoords.y,
         data: {
           ...diffCoords,
@@ -10975,7 +10975,7 @@ var shift = function(options) {
     options,
     async fn(state) {
       const {
-        x,
+        x: x2,
         y,
         placement
       } = state;
@@ -10985,11 +10985,11 @@ var shift = function(options) {
         limiter = {
           fn: (_ref) => {
             let {
-              x: x2,
+              x: x3,
               y: y2
             } = _ref;
             return {
-              x: x2,
+              x: x3,
               y: y2
             };
           }
@@ -10997,7 +10997,7 @@ var shift = function(options) {
         ...detectOverflowOptions
       } = evaluate(options, state);
       const coords = {
-        x,
+        x: x2,
         y
       };
       const overflow = await detectOverflow(state, detectOverflowOptions);
@@ -11027,7 +11027,7 @@ var shift = function(options) {
       return {
         ...limitedCoords,
         data: {
-          x: limitedCoords.x - x,
+          x: limitedCoords.x - x2,
           y: limitedCoords.y - y,
           enabled: {
             [mainAxis]: checkMainAxis,
@@ -11046,7 +11046,7 @@ var limitShift = function(options) {
     options,
     fn(state) {
       const {
-        x,
+        x: x2,
         y,
         placement,
         rects,
@@ -11058,7 +11058,7 @@ var limitShift = function(options) {
         crossAxis: checkCrossAxis = true
       } = evaluate(options, state);
       const coords = {
-        x,
+        x: x2,
         y
       };
       const crossAxis = getSideAxis(placement);
@@ -11369,16 +11369,16 @@ function getScale(element) {
     height,
     $
   } = getCssDimensions(domElement);
-  let x = ($ ? round(rect.width) : rect.width) / width;
+  let x2 = ($ ? round(rect.width) : rect.width) / width;
   let y = ($ ? round(rect.height) : rect.height) / height;
-  if (!x || !Number.isFinite(x)) {
-    x = 1;
+  if (!x2 || !Number.isFinite(x2)) {
+    x2 = 1;
   }
   if (!y || !Number.isFinite(y)) {
     y = 1;
   }
   return {
-    x,
+    x: x2,
     y
   };
 }
@@ -11422,7 +11422,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     }
   }
   const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
-  let x = (clientRect2.left + visualOffsets.x) / scale.x;
+  let x2 = (clientRect2.left + visualOffsets.x) / scale.x;
   let y = (clientRect2.top + visualOffsets.y) / scale.y;
   let width = clientRect2.width / scale.x;
   let height = clientRect2.height / scale.y;
@@ -11437,11 +11437,11 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const css2 = getComputedStyle2(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css2.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css2.paddingTop)) * iframeScale.y;
-      x *= iframeScale.x;
+      x2 *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
-      x += left;
+      x2 += left;
       y += top;
       currentWin = getWindow(currentIFrame);
       currentIFrame = getFrameElement(currentWin);
@@ -11450,7 +11450,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   return rectToClientRect({
     width,
     height,
-    x,
+    x: x2,
     y
   });
 }
@@ -11463,10 +11463,10 @@ function getWindowScrollBarX(element, rect) {
 }
 function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const x2 = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
-    x,
+    x: x2,
     y
   };
 }
@@ -11518,15 +11518,15 @@ function getDocumentRect(element) {
   const body = element.ownerDocument.body;
   const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
-  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  let x2 = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html.clientWidth, body.clientWidth) - width;
+    x2 += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
     height,
-    x,
+    x: x2,
     y
   };
 }
@@ -11537,14 +11537,14 @@ function getViewportRect(element, strategy) {
   const visualViewport = win.visualViewport;
   let width = html.clientWidth;
   let height = html.clientHeight;
-  let x = 0;
+  let x2 = 0;
   let y = 0;
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
     const visualViewportBased = isWebKit();
     if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
-      x = visualViewport.offsetLeft;
+      x2 = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
   }
@@ -11564,7 +11564,7 @@ function getViewportRect(element, strategy) {
   return {
     width,
     height,
-    x,
+    x: x2,
     y
   };
 }
@@ -11576,12 +11576,12 @@ function getInnerBoundingClientRect(element, strategy) {
   const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
-  const x = left * scale.x;
+  const x2 = left * scale.x;
   const y = top * scale.y;
   return {
     width,
     height,
-    x,
+    x: x2,
     y
   };
 }
@@ -11701,10 +11701,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     setLeftRTLScrollbarOffset();
   }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
-  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const x2 = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
   return {
-    x,
+    x: x2,
     y,
     width: rect.width,
     height: rect.height
@@ -12144,12 +12144,12 @@ function useFloating(options) {
     if (!elements.floating) {
       return initialStyles;
     }
-    const x = roundByDPR(elements.floating, data.x);
+    const x2 = roundByDPR(elements.floating, data.x);
     const y = roundByDPR(elements.floating, data.y);
     if (transform) {
       return {
         ...initialStyles,
-        transform: "translate(" + x + "px, " + y + "px)",
+        transform: "translate(" + x2 + "px, " + y + "px)",
         ...getDPR(elements.floating) >= 1.5 && {
           willChange: "transform"
         }
@@ -12157,7 +12157,7 @@ function useFloating(options) {
     }
     return {
       position: strategy,
-      left: x,
+      left: x2,
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
@@ -12531,22 +12531,22 @@ var transformOrigin = (options) => ({
     const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
     const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
     const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
-    let x = "";
+    let x2 = "";
     let y = "";
     if (placedSide === "bottom") {
-      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      x2 = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
       y = `${-arrowHeight}px`;
     } else if (placedSide === "top") {
-      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+      x2 = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
       y = `${rects.floating.height + arrowHeight}px`;
     } else if (placedSide === "right") {
-      x = `${-arrowHeight}px`;
+      x2 = `${-arrowHeight}px`;
       y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
     } else if (placedSide === "left") {
-      x = `${rects.floating.width + arrowHeight}px`;
+      x2 = `${rects.floating.width + arrowHeight}px`;
       y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
     }
-    return { data: { x, y } };
+    return { data: { x: x2, y } };
   }
 });
 function getSideAndAlignFromPlacement(placement) {
@@ -14288,9 +14288,9 @@ var MoonUIGestureDrawerProComponent = React71__default.forwardRef(({
   const isVertical = position === "bottom" || position === "top";
   useAnimation();
   useAnimation();
-  const x = useMotionValue(0);
+  const x2 = useMotionValue(0);
   const y = useMotionValue(0);
-  const motionValue = isVertical ? y : x;
+  const motionValue = isVertical ? y : x2;
   const [currentSnapPoint, setCurrentSnapPoint] = useState(
     defaultSnapPoint || (snapPoints.length > 0 ? snapPoints[0] : 50)
   );
@@ -15137,9 +15137,9 @@ var MagneticButtonInternal = React71.forwardRef(
       (e) => {
         if (enableRipple && buttonRef.current) {
           const rect = buttonRef.current.getBoundingClientRect();
-          const x = e.clientX - rect.left;
+          const x2 = e.clientX - rect.left;
           const y = e.clientY - rect.top;
-          const newRipple = { id: Date.now(), x, y };
+          const newRipple = { id: Date.now(), x: x2, y };
           setRipples((prevRipples) => [...prevRipples, newRipple]);
           setTimeout(() => {
             setRipples((prevRipples) => prevRipples.filter((r2) => r2.id !== newRipple.id));
@@ -15659,7 +15659,7 @@ var MoonUIMediaGalleryPro = React71.forwardRef(({
           className
         ),
         style: layout === "masonry" ? { columnGap: "1rem" } : void 0,
-        children: loadingState ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(React71.Fragment, { children: renderSkeleton() }, i)) }) : sortedItems.length > 0 ? sortedItems.map((item, index2) => renderGalleryItem(item, index2)) : emptyState || /* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-col items-center justify-center py-12 text-center", children: [
+        children: loadingState ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: skeletonCount }).map((_2, i) => /* @__PURE__ */ jsx(React71.Fragment, { children: renderSkeleton() }, i)) }) : sortedItems.length > 0 ? sortedItems.map((item, index2) => renderGalleryItem(item, index2)) : emptyState || /* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-col items-center justify-center py-12 text-center", children: [
           /* @__PURE__ */ jsx(Image$1, { className: "h-12 w-12 text-muted-foreground mb-4" }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No media items found" })
         ] })
@@ -16265,16 +16265,16 @@ var GlowCardInternal = forwardRef(
       if (!cardRef.current)
         return;
       const rect = cardRef.current.getBoundingClientRect();
-      const x = e.clientX - rect.left;
+      const x2 = e.clientX - rect.left;
       const y = e.clientY - rect.top;
       if (mouseTrack) {
-        setMousePosition({ x, y });
+        setMousePosition({ x: x2, y });
       }
       if (tilt && !disableAnimations) {
         const centerX = rect.width / 2;
         const centerY = rect.height / 2;
         const rotateX = (y - centerY) / centerY * tiltAngle;
-        const rotateY = (x - centerX) / centerX * -tiltAngle;
+        const rotateY = (x2 - centerX) / centerX * -tiltAngle;
         setTiltStyle({
           transform: `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`,
           transformStyle: "preserve-3d"
@@ -16477,10 +16477,10 @@ var MoonUIAnimatedButtonProInternal = React71__default.forwardRef(
         return;
       if (ripple) {
         const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
+        const x2 = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         const id = Date.now();
-        setRipples([...ripples, { x, y, id }]);
+        setRipples([...ripples, { x: x2, y, id }]);
         setTimeout(() => {
           setRipples((prev) => prev.filter((r2) => r2.id !== id));
         }, 600);
@@ -17437,7 +17437,7 @@ var SplashCursorComponent = ({
   const cleanupSplash = useCallback((splashId) => {
     setSplashes((prev) => prev.filter((splash) => splash.id !== splashId));
   }, []);
-  const createSplash = useCallback((x, y) => {
+  const createSplash = useCallback((x2, y) => {
     const now = Date.now();
     if (now - lastSplashTimeRef.current < 16) {
       return;
@@ -17445,7 +17445,7 @@ var SplashCursorComponent = ({
     lastSplashTimeRef.current = now;
     const newSplash = {
       id: now + Math.random(),
-      x,
+      x: x2,
       y,
       timestamp: now
     };
@@ -17474,13 +17474,13 @@ var SplashCursorComponent = ({
       return;
     rafIdRef.current = requestAnimationFrame(() => {
       const container = containerRef?.current;
-      let x = e.clientX;
+      let x2 = e.clientX;
       let y = e.clientY;
       if (container) {
         const rect = container.getBoundingClientRect();
-        x = e.clientX - rect.left;
+        x2 = e.clientX - rect.left;
         y = e.clientY - rect.top;
-        if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        if (x2 < 0 || y < 0 || x2 > rect.width || y > rect.height) {
           rafIdRef.current = null;
           return;
         }
@@ -17491,7 +17491,7 @@ var SplashCursorComponent = ({
         const distance = calculateDistance(
           lastPosRef.current.x,
           lastPosRef.current.y,
-          x,
+          x2,
           y
         );
         const speed = distance / timeDiff;
@@ -17499,37 +17499,37 @@ var SplashCursorComponent = ({
           if (targetSelector) {
             const target = e.target;
             if (target?.closest(targetSelector)) {
-              createSplash(x, y);
+              createSplash(x2, y);
             }
           } else {
-            createSplash(x, y);
+            createSplash(x2, y);
           }
         }
       }
-      lastPosRef.current = { x, y };
+      lastPosRef.current = { x: x2, y };
       lastMoveTimeRef.current = now;
       rafIdRef.current = null;
     });
   }, [threshold, targetSelector, createSplash, containerRef]);
   const handleClick2 = useCallback((e) => {
     const container = containerRef?.current;
-    let x = e.clientX;
+    let x2 = e.clientX;
     let y = e.clientY;
     if (container) {
       const rect = container.getBoundingClientRect();
-      x = e.clientX - rect.left;
+      x2 = e.clientX - rect.left;
       y = e.clientY - rect.top;
-      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+      if (x2 < 0 || y < 0 || x2 > rect.width || y > rect.height) {
         return;
       }
     }
     if (targetSelector) {
       const target = e.target;
       if (target?.closest(targetSelector)) {
-        createSplash(x, y);
+        createSplash(x2, y);
       }
     } else {
-      createSplash(x, y);
+      createSplash(x2, y);
     }
   }, [targetSelector, createSplash, containerRef]);
   useEffect(() => {
@@ -17588,7 +17588,7 @@ var SplashCursorComponent = ({
   const particleAngles = useMemo(() => {
     if (!showParticles)
       return [];
-    return Array.from({ length: particleCount }).map((_, i) => {
+    return Array.from({ length: particleCount }).map((_2, i) => {
       const angle = 360 / particleCount * i;
       const radian = angle * Math.PI / 180;
       return {
@@ -17815,7 +17815,7 @@ var MarqueeInternal = ({
               !isPlaying && "animation-paused",
               className
             ),
-            children: Array.from({ length: repeatCount }).map((_, i) => /* @__PURE__ */ jsx(
+            children: Array.from({ length: repeatCount }).map((_2, i) => /* @__PURE__ */ jsx(
               "div",
               {
                 ref: i === 0 ? marqueeRef : void 0,
@@ -18344,9 +18344,9 @@ var HoverCard3DInternal = React71__default.forwardRef(
     const [isFocused, setIsFocused] = useState(false);
     const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
     const rotation = mergedProps.maxRotation || rotationIntensity || 15;
-    const x = useMotionValue(0);
+    const x2 = useMotionValue(0);
     const y = useMotionValue(0);
-    const springX = useSpring(x, {
+    const springX = useSpring(x2, {
       ...mergedProps.springConfig,
       stiffness: mergedProps.springConfig.stiffness * animationSpeed,
       damping: mergedProps.springConfig.damping / animationSpeed
@@ -18384,7 +18384,7 @@ var HoverCard3DInternal = React71__default.forwardRef(
       }
       const rotateXValue = (clientY - centerY) / (rect.height / 2);
       const rotateYValue = (clientX - centerX) / (rect.width / 2);
-      x.set(rotateYValue);
+      x2.set(rotateYValue);
       y.set(rotateXValue);
       if (mergedProps.enableShine) {
         const normalizedX = (clientX - rect.left) / rect.width;
@@ -18394,22 +18394,22 @@ var HoverCard3DInternal = React71__default.forwardRef(
       if (onRotationChange) {
         onRotationChange(rotateX.get(), rotateY.get());
       }
-    }, [enableTouch, x, y, rotateX, rotateY, onRotationChange, mergedProps.enableShine]);
+    }, [enableTouch, x2, y, rotateX, rotateY, onRotationChange, mergedProps.enableShine]);
     const handleMouseEnter = useCallback(() => {
       setIsHovered(true);
       onHoverStart?.();
     }, [onHoverStart]);
     const handleMouseLeave2 = useCallback(() => {
       setIsHovered(false);
-      x.set(0);
+      x2.set(0);
       y.set(0);
       onHoverEnd?.();
-    }, [x, y, onHoverEnd]);
+    }, [x2, y, onHoverEnd]);
     const handleKeyDown3 = useCallback((e) => {
       if (!enableKeyboard || !isFocused)
         return;
       const step = 0.1;
-      let newX = x.get();
+      let newX = x2.get();
       let newY = y.get();
       switch (e.key) {
         case "ArrowUp":
@@ -18424,12 +18424,12 @@ var HoverCard3DInternal = React71__default.forwardRef(
           break;
         case "ArrowLeft":
           newX = Math.max(-0.5, newX - step);
-          x.set(newX);
+          x2.set(newX);
           e.preventDefault();
           break;
         case "ArrowRight":
           newX = Math.min(0.5, newX + step);
-          x.set(newX);
+          x2.set(newX);
           e.preventDefault();
           break;
         case "Enter":
@@ -18443,7 +18443,7 @@ var HoverCard3DInternal = React71__default.forwardRef(
           e.preventDefault();
           break;
         case "Escape":
-          x.set(0);
+          x2.set(0);
           y.set(0);
           setIsHovered(false);
           onHoverEnd?.();
@@ -18453,7 +18453,7 @@ var HoverCard3DInternal = React71__default.forwardRef(
       if (onRotationChange) {
         onRotationChange(rotateX.get(), rotateY.get());
       }
-    }, [enableKeyboard, isFocused, x, y, isHovered, onHoverStart, onHoverEnd, rotateX, rotateY, onRotationChange]);
+    }, [enableKeyboard, isFocused, x2, y, isHovered, onHoverStart, onHoverEnd, rotateX, rotateY, onRotationChange]);
     useEffect(() => {
       if (autoFocus && cardRef.current) {
         cardRef.current.focus();
@@ -18708,7 +18708,7 @@ var PinchZoomInternal = React71__default.forwardRef(
     const [isHovered, setIsHovered] = useState(false);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const scale = useMotionValue(initialZoom);
-    const x = useMotionValue(0);
+    const x2 = useMotionValue(0);
     const y = useMotionValue(0);
     const constrainedScale = useTransform(scale, (value) => {
       return Math.min(Math.max(value, minZoom), maxZoom);
@@ -18760,15 +18760,15 @@ var PinchZoomInternal = React71__default.forwardRef(
         const centerX = (event.clientX - rect.left) / rect.width - 0.5;
         const centerY = (event.clientY - rect.top) / rect.height - 0.5;
         const scaleDiff = newScale - currentScale;
-        const currentX = x.get();
+        const currentX = x2.get();
         const currentY = y.get();
         const newX = currentX - centerX * rect.width * scaleDiff;
         const newY = currentY - centerY * rect.height * scaleDiff;
         if (smoothZoom) {
-          animate(x, newX, { duration: 0.2 });
+          animate(x2, newX, { duration: 0.2 });
           animate(y, newY, { duration: 0.2 });
         } else {
-          x.set(newX);
+          x2.set(newX);
           y.set(newY);
         }
       }
@@ -18782,7 +18782,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         setShowZoomIndicator(true);
         setTimeout(() => setShowZoomIndicator(false), 1500);
       }
-    }, [scale, x, y, minZoom, maxZoom, onZoomChange, wheelScaling, smoothZoom, showIndicator]);
+    }, [scale, x2, y, minZoom, maxZoom, onZoomChange, wheelScaling, smoothZoom, showIndicator]);
     const handleDoubleClick2 = useCallback((event) => {
       event.preventDefault();
       const currentScale = scale.get();
@@ -18797,7 +18797,7 @@ var PinchZoomInternal = React71__default.forwardRef(
           const centerY = (event.clientY - rect.top) / rect.height - 0.5;
           const targetX = -centerX * rect.width * (newScale - 1);
           const targetY = -centerY * rect.height * (newScale - 1);
-          animate(x, targetX, {
+          animate(x2, targetX, {
             duration: 0.3,
             type: "spring",
             stiffness: 300
@@ -18815,7 +18815,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         stiffness: 300
       });
       if (newScale === 1 || doubleTapBehavior === "reset") {
-        animate(x, 0, { duration: 0.3 });
+        animate(x2, 0, { duration: 0.3 });
         animate(y, 0, { duration: 0.3 });
       }
       onZoomChange?.(newScale);
@@ -18823,7 +18823,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         setShowZoomIndicator(true);
         setTimeout(() => setShowZoomIndicator(false), 1500);
       }
-    }, [scale, x, y, minZoom, maxZoom, initialZoom, onZoomChange, doubleTapBehavior, showIndicator]);
+    }, [scale, x2, y, minZoom, maxZoom, initialZoom, onZoomChange, doubleTapBehavior, showIndicator]);
     const handleTouchEnd = useCallback((event) => {
       const now = Date.now();
       const timeSinceLastTap = now - lastTap;
@@ -18845,7 +18845,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         type: "spring",
         stiffness: 300
       });
-      animate(x, 0, {
+      animate(x2, 0, {
         duration: 0.3,
         type: "spring",
         stiffness: 300
@@ -18856,7 +18856,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         stiffness: 300
       });
       onZoomChange?.(initialZoom);
-    }, [scale, x, y, initialZoom, onZoomChange]);
+    }, [scale, x2, y, initialZoom, onZoomChange]);
     const zoomIn = useCallback(() => {
       const currentScale = scale.get();
       const newScale = Math.min(currentScale + zoomStep, maxZoom);
@@ -18881,10 +18881,10 @@ var PinchZoomInternal = React71__default.forwardRef(
       });
       if (newScale < scale.get()) {
         const constraints = calculateConstraints();
-        const currentX = x.get();
+        const currentX = x2.get();
         const currentY = y.get();
         if (currentX < constraints.left || currentX > constraints.right) {
-          animate(x, 0, { duration: 0.3 });
+          animate(x2, 0, { duration: 0.3 });
         }
         if (currentY < constraints.top || currentY > constraints.bottom) {
           animate(y, 0, { duration: 0.3 });
@@ -18895,7 +18895,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         setShowZoomIndicator(true);
         setTimeout(() => setShowZoomIndicator(false), 1500);
       }
-    }, [scale, minZoom, zoomStep, x, y, calculateConstraints, onZoomChange, showIndicator]);
+    }, [scale, minZoom, zoomStep, x2, y, calculateConstraints, onZoomChange, showIndicator]);
     useCallback(() => {
       resetZoom();
     }, [resetZoom]);
@@ -18957,11 +18957,11 @@ var PinchZoomInternal = React71__default.forwardRef(
     useEffect(() => {
       const unsubscribe = scale.onChange(() => {
         const constraints = calculateConstraints();
-        const currentX = x.get();
+        const currentX = x2.get();
         const currentY = y.get();
         if (boundaryConstraints) {
           if (currentX < constraints.left || currentX > constraints.right) {
-            animate(x, Math.max(constraints.left, Math.min(constraints.right, currentX)), { duration: 0.2 });
+            animate(x2, Math.max(constraints.left, Math.min(constraints.right, currentX)), { duration: 0.2 });
           }
           if (currentY < constraints.top || currentY > constraints.bottom) {
             animate(y, Math.max(constraints.top, Math.min(constraints.bottom, currentY)), { duration: 0.2 });
@@ -18969,7 +18969,7 @@ var PinchZoomInternal = React71__default.forwardRef(
         }
       });
       return unsubscribe;
-    }, [scale, x, y, calculateConstraints, boundaryConstraints]);
+    }, [scale, x2, y, calculateConstraints, boundaryConstraints]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -18999,7 +18999,7 @@ var PinchZoomInternal = React71__default.forwardRef(
               onDragEnd: () => setIsDragging(false),
               style: {
                 scale: constrainedScale,
-                x,
+                x: x2,
                 y
               },
               className: cn(
@@ -19240,7 +19240,7 @@ function EventDialog({
     }
   };
   const handleTypeChange = (type) => {
-    const selectedType = EVENT_TYPES.find((t) => t.value === type);
+    const selectedType = EVENT_TYPES.find((t2) => t2.value === type);
     setFormData((prev) => ({
       ...prev,
       type,
@@ -19754,7 +19754,7 @@ function CalendarInternal({
     return dayOfWeek !== 0 && dayOfWeek !== 6;
   });
   const orderedDaysOfWeek = [...DAYS_OF_WEEK.slice(firstDayOfWeek), ...DAYS_OF_WEEK.slice(0, firstDayOfWeek)];
-  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_, index2) => {
+  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_2, index2) => {
     const actualDay = (index2 + firstDayOfWeek) % 7;
     return actualDay !== 0 && actualDay !== 6;
   });
@@ -19796,7 +19796,7 @@ function CalendarInternal({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 text-xs", children: [
             ["S", "M", "T", "W", "T", "F", "S"].map((day, index2) => /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground", children: day }, `mini-day-${index2}`)),
-            Array.from({ length: 35 }, (_, i) => {
+            Array.from({ length: 35 }, (_2, i) => {
               const date = new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), i - new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), 1).getDay() + 1);
               const isCurrentMonth2 = date.getMonth() === miniCalendarDate.getMonth();
               const isToday3 = date.toDateString() === today.toDateString();
@@ -20041,7 +20041,7 @@ function CalendarInternal({
           view === "week" && /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col space-y-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8 gap-2", children: [
               /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Time" }),
-              Array.from({ length: 7 }, (_, i) => {
+              Array.from({ length: 7 }, (_2, i) => {
                 const date = new Date(currentDate);
                 date.setDate(date.getDate() - date.getDay() + i);
                 return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -20053,9 +20053,9 @@ function CalendarInternal({
                 ] }, i);
               })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden flex-1 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: Array.from({ length: 24 }, (_, hour) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8 border-b last:border-b-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden flex-1 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: Array.from({ length: 24 }, (_2, hour) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8 border-b last:border-b-0", children: [
               /* @__PURE__ */ jsx("div", { className: "p-2 text-xs text-muted-foreground border-r", children: formatTime2(`${hour.toString().padStart(2, "0")}:00`) }),
-              Array.from({ length: 7 }, (_2, dayIndex) => {
+              Array.from({ length: 7 }, (_3, dayIndex) => {
                 const date = new Date(currentDate);
                 date.setDate(date.getDate() - date.getDay() + dayIndex);
                 const hourEvents = getEventsForDate(date).filter((event) => {
@@ -20100,7 +20100,7 @@ function CalendarInternal({
               month: "long",
               day: "numeric"
             }) }) }),
-            /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden flex-1 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: Array.from({ length: 24 }, (_, hour) => {
+            /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden flex-1 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: Array.from({ length: 24 }, (_2, hour) => {
               const hourEvents = getEventsForDate(currentDate).filter((event) => {
                 if (!event.startTime)
                   return false;
@@ -20163,7 +20163,7 @@ function CalendarInternal({
               ] }, hour);
             }) }) })
           ] }),
-          view === "agenda" && /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col space-y-4", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto space-y-4", children: Array.from({ length: 30 }, (_, i) => {
+          view === "agenda" && /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col space-y-4", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto space-y-4", children: Array.from({ length: 30 }, (_2, i) => {
             const date = new Date(currentDate);
             date.setDate(date.getDate() + i);
             const dayEvents = getEventsForDate(date);
@@ -21045,7 +21045,7 @@ function AddCardModal({
       setTagInput("");
     }
   };
-  [...CARD_TEMPLATES.map((t) => ({ ...t.template, name: t.name, icon: t.icon })), ...templates];
+  [...CARD_TEMPLATES.map((t2) => ({ ...t2.template, name: t2.name, icon: t2.icon })), ...templates];
   return /* @__PURE__ */ jsx(MoonUIDialogPro, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "max-w-2xl", children: [
     /* @__PURE__ */ jsx(MoonUIDialogHeaderPro, { children: /* @__PURE__ */ jsxs(MoonUIDialogTitlePro, { children: [
       "Add Card to ",
@@ -21264,7 +21264,7 @@ function AddCardModal({
               {
                 variant: "secondary",
                 className: "cursor-pointer",
-                onClick: () => setTags(tags.filter((t) => t !== tag)),
+                onClick: () => setTags(tags.filter((t2) => t2 !== tag)),
                 children: [
                   tag,
                   /* @__PURE__ */ jsx("span", { className: "ml-1 hover:text-destructive", children: "\xD7" })
@@ -21522,7 +21522,7 @@ var KanbanCardComponent = ({
                   "dark:shadow-[2px_0_10px_rgba(139,92,246,0.3)]"
                 ),
                 onPointerDown: (e) => dragControls.start(e),
-                children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 flex flex-col justify-center gap-1 opacity-60", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-0.5 h-0.5 rounded-full bg-primary" }, i)) })
+                children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 flex flex-col justify-center gap-1 opacity-60", children: [...Array(3)].map((_2, i) => /* @__PURE__ */ jsx("div", { className: "w-0.5 h-0.5 rounded-full bg-primary" }, i)) })
               }
             ),
             cardShowCoverImage && card.coverImage && /* @__PURE__ */ jsxs("div", { className: "relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden", children: [
@@ -21857,10 +21857,10 @@ function KanbanInternal({
     if (!container)
       return;
     const rect = container.getBoundingClientRect();
-    const x = e.clientX;
-    if (x < rect.left + 100) {
+    const x2 = e.clientX;
+    if (x2 < rect.left + 100) {
       startAutoScroll("left");
-    } else if (x > rect.right - 100) {
+    } else if (x2 > rect.right - 100) {
       startAutoScroll("right");
     } else {
       stopAutoScroll();
@@ -23310,7 +23310,7 @@ var Mark = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _ in this.attrs) {
+    for (let _2 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -24258,7 +24258,7 @@ var Node2 = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _ in this.attrs) {
+    for (let _2 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -24987,7 +24987,7 @@ var NodeType = class {
       throw new RangeError("Schema is missing its top node type ('" + topType + "')");
     if (!result.text)
       throw new RangeError("Every schema needs a 'text' type");
-    for (let _ in result.text.attrs)
+    for (let _2 in result.text.attrs)
       throw new RangeError("The text node type should not have attributes");
     return result;
   }
@@ -28473,7 +28473,7 @@ var Transaction = class extends Transform {
   and can thus safely be extended.
   */
   get isGeneric() {
-    for (let _ in this.meta)
+    for (let _2 in this.meta)
       return false;
     return true;
   }
@@ -28914,17 +28914,17 @@ function deepActiveElement(doc3) {
     elt = elt.shadowRoot.activeElement;
   return elt;
 }
-function caretFromPoint(doc3, x, y) {
+function caretFromPoint(doc3, x2, y) {
   if (doc3.caretPositionFromPoint) {
     try {
-      let pos = doc3.caretPositionFromPoint(x, y);
+      let pos = doc3.caretPositionFromPoint(x2, y);
       if (pos)
         return { node: pos.offsetNode, offset: Math.min(nodeSize(pos.offsetNode), pos.offset) };
-    } catch (_) {
+    } catch (_2) {
     }
   }
   if (doc3.caretRangeFromPoint) {
-    let range = doc3.caretRangeFromPoint(x, y);
+    let range = doc3.caretRangeFromPoint(x2, y);
     if (range)
       return { node: range.startContainer, offset: Math.min(nodeSize(range.startContainer), range.startOffset) };
   }
@@ -29023,8 +29023,8 @@ function scrollRectIntoView(view, rect, startDOM) {
 function storeScrollPos(view) {
   let rect = view.dom.getBoundingClientRect(), startY = Math.max(0, rect.top);
   let refDOM, refTop;
-  for (let x = (rect.left + rect.right) / 2, y = startY + 1; y < Math.min(innerHeight, rect.bottom); y += 5) {
-    let dom = view.root.elementFromPoint(x, y);
+  for (let x2 = (rect.left + rect.right) / 2, y = startY + 1; y < Math.min(innerHeight, rect.bottom); y += 5) {
+    let dom = view.root.elementFromPoint(x2, y);
     if (!dom || dom == view.dom || !view.dom.contains(dom))
       continue;
     let localRect = dom.getBoundingClientRect();
@@ -29320,8 +29320,8 @@ function coordsAtPos(view, pos, side) {
 function flattenV(rect, left) {
   if (rect.width == 0)
     return rect;
-  let x = left ? rect.left : rect.right;
-  return { top: rect.top, bottom: rect.bottom, left: x, right: x };
+  let x2 = left ? rect.left : rect.right;
+  return { top: rect.top, bottom: rect.bottom, left: x2, right: x2 };
 }
 function flattenH(rect, top) {
   if (rect.height == 0)
@@ -29399,7 +29399,7 @@ function endOfTextblockHorizontal(view, state, dir) {
       sel.collapse(anchorNode, anchorOffset);
       if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend)
         sel.extend(oldNode, oldOff);
-    } catch (_) {
+    } catch (_2) {
     }
     if (oldBidiLevel != null)
       sel.caretBidiLevel = oldBidiLevel;
@@ -29740,7 +29740,7 @@ var ViewDesc = class {
         if (anchor != head)
           domSel.extend(headDOM.node, headDOM.offset);
         domSelExtended = true;
-      } catch (_) {
+      } catch (_2) {
       }
     }
     if (!domSelExtended) {
@@ -30942,7 +30942,7 @@ function hasSelection(view) {
     return false;
   try {
     return view.dom.contains(sel.anchorNode.nodeType == 3 ? sel.anchorNode.parentNode : sel.anchorNode) && (view.editable || view.dom.contains(sel.focusNode.nodeType == 3 ? sel.focusNode.parentNode : sel.focusNode));
-  } catch (_) {
+  } catch (_2) {
     return false;
   }
 }
@@ -32119,7 +32119,7 @@ handlers.dragend = (view) => {
       view.dragging = null;
   }, 50);
 };
-editHandlers.dragover = editHandlers.dragenter = (_, e) => e.preventDefault();
+editHandlers.dragover = editHandlers.dragenter = (_2, e) => e.preventDefault();
 editHandlers.drop = (view, _event) => {
   let event = _event;
   let dragging = view.dragging;
@@ -32263,7 +32263,7 @@ var InlineType = class {
     let to = mapping.map(span.to + oldOffset, this.spec.inclusiveEnd ? 1 : -1) - offset4;
     return from2 >= to ? null : new Decoration(from2, to, this);
   }
-  valid(_, span) {
+  valid(_2, span) {
     return span.from < span.to;
   }
   eq(other) {
@@ -33946,7 +33946,7 @@ function changedNodeViews(a, b) {
       return true;
     nA++;
   }
-  for (let _ in b)
+  for (let _2 in b)
     nB++;
   return nA != nB;
 }
@@ -35556,7 +35556,7 @@ function removeDuplicates(array, by = JSON.stringify) {
 function simplifyChangedRanges(changes) {
   const uniqueChanges = removeDuplicates(changes);
   return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index2) => {
-    const rest = uniqueChanges.filter((_, i) => i !== index2);
+    const rest = uniqueChanges.filter((_2, i) => i !== index2);
     return !rest.some((otherChange) => {
       return change.oldRange.from >= otherChange.oldRange.from && change.oldRange.to <= otherChange.oldRange.to && change.newRange.from >= otherChange.newRange.from && change.newRange.to <= otherChange.newRange.to;
     });
@@ -38001,7 +38001,7 @@ var Drop = Extension.create({
       new Plugin({
         key: new PluginKey("tiptapDrop"),
         props: {
-          handleDrop: (_, e, slice2, moved) => {
+          handleDrop: (_2, e, slice2, moved) => {
             this.editor.emit("drop", {
               editor: this.editor,
               event: e,
@@ -40543,7 +40543,7 @@ function registerGroup(name, groups) {
   }
   return groups[name];
 }
-function addToGroups(t, flags, groups) {
+function addToGroups(t2, flags, groups) {
   if (flags[numeric]) {
     flags[asciinumeric] = true;
     flags[alphanumeric] = true;
@@ -40566,15 +40566,15 @@ function addToGroups(t, flags, groups) {
   }
   for (const k in flags) {
     const group = registerGroup(k, groups);
-    if (group.indexOf(t) < 0) {
-      group.push(t);
+    if (group.indexOf(t2) < 0) {
+      group.push(t2);
     }
   }
 }
-function flagsForToken(t, groups) {
+function flagsForToken(t2, groups) {
   const result = {};
   for (const c2 in groups) {
-    if (groups[c2].indexOf(t) >= 0) {
+    if (groups[c2].indexOf(t2) >= 0) {
       result[c2] = true;
     }
   }
@@ -40712,7 +40712,7 @@ State.prototype = {
       state.j[input] = next;
       return next;
     }
-    const t = next;
+    const t2 = next;
     let nextState, templateState = state.go(input);
     if (templateState) {
       nextState = new State();
@@ -40723,16 +40723,16 @@ State.prototype = {
     } else {
       nextState = new State();
     }
-    if (t) {
+    if (t2) {
       if (groups) {
         if (nextState.t && typeof nextState.t === "string") {
           const allFlags = Object.assign(flagsForToken(nextState.t, groups), flags);
-          addToGroups(t, allFlags, groups);
+          addToGroups(t2, allFlags, groups);
         } else if (flags) {
-          addToGroups(t, flags, groups);
+          addToGroups(t2, flags, groups);
         }
       }
-      nextState.t = t;
+      nextState.t = t2;
     }
     state.j[input] = nextState;
     return nextState;
@@ -41087,7 +41087,7 @@ function stringToArray(str) {
   }
   return result;
 }
-function fastts(state, input, t, defaultt, jr) {
+function fastts(state, input, t2, defaultt, jr) {
   let next;
   const len = input.length;
   for (let i = 0; i < len - 1; i++) {
@@ -41101,7 +41101,7 @@ function fastts(state, input, t, defaultt, jr) {
     }
     state = next;
   }
-  next = new State(t);
+  next = new State(t2);
   next.jr = jr.slice();
   state.j[input[len - 1]] = next;
   return next;
@@ -41729,7 +41729,7 @@ function autolink(options) {
           if (!lastWordBeforeSpace) {
             return false;
           }
-          const linksBeforeSpace = tokenize(lastWordBeforeSpace).map((t) => t.toObject(options.defaultProtocol));
+          const linksBeforeSpace = tokenize(lastWordBeforeSpace).map((t2) => t2.toObject(options.defaultProtocol));
           if (!isValidLinkStructure(linksBeforeSpace)) {
             return false;
           }
@@ -43989,7 +43989,7 @@ var TrailingNode = Extension.create({
     return [
       new Plugin({
         key: plugin,
-        appendTransaction: (_, __, state) => {
+        appendTransaction: (_2, __, state) => {
           const { doc: doc3, tr: tr2, schema } = state;
           const shouldInsertNodeAtEnd = plugin.getState(state);
           const endPosition = doc3.content.size;
@@ -44000,7 +44000,7 @@ var TrailingNode = Extension.create({
           return tr2.insert(endPosition, type.create());
         },
         state: {
-          init: (_, state) => {
+          init: (_2, state) => {
             const lastNode = state.tr.doc.lastChild;
             return !nodeEqualsType({ node: lastNode, types: disabledNodes });
           },
@@ -46074,7 +46074,7 @@ function handleTripleClick2(view, pos) {
   view.dispatch(view.state.tr.setSelection(new CellSelection($cell)));
   return true;
 }
-function handlePaste(view, _, slice2) {
+function handlePaste(view, _2, slice2) {
   if (!isInTable(view.state))
     return false;
   let cells = pastedCells(slice2);
@@ -46289,7 +46289,7 @@ function columnResizing({
   const plugin = new Plugin({
     key: columnResizingPluginKey,
     state: {
-      init(_, state) {
+      init(_2, state) {
         var _a2, _b;
         const nodeViews = (_b = (_a2 = plugin.spec) == null ? void 0 : _a2.props) == null ? void 0 : _b.nodeViews;
         const tableName = tableNodeTypes(state.schema).table.name;
@@ -46607,7 +46607,7 @@ function tableEditing({
       handleKeyDown: handleKeyDown2,
       handlePaste
     },
-    appendTransaction(_, oldState, state) {
+    appendTransaction(_2, oldState, state) {
       return normalizeSelection(
         state,
         fixTables(state, oldState),
@@ -47642,7 +47642,7 @@ function LowlightPlugin({
   const lowlightPlugin = new Plugin({
     key: new PluginKey("lowlight"),
     state: {
-      init: (_, { doc: doc3 }) => getDecorations({
+      init: (_2, { doc: doc3 }) => getDecorations({
         doc: doc3,
         name,
         lowlight: lowlight2,
@@ -51643,7 +51643,7 @@ var NUMERIC = {
 function recurRegex(re, substitution, depth) {
   if (depth === -1)
     return "";
-  return re.replace(substitution, (_) => {
+  return re.replace(substitution, (_2) => {
     return recurRegex(re, substitution, depth - 1);
   });
 }
@@ -52357,7 +52357,7 @@ function javascript(hljs) {
         ...BUILT_IN_GLOBALS,
         "super",
         "import"
-      ].map((x) => `${x}\\s*\\(`)),
+      ].map((x2) => `${x2}\\s*\\(`)),
       IDENT_RE$1,
       regex.lookahead(/\s*\(/)
     ),
@@ -58576,7 +58576,7 @@ function sql(hljs) {
     illegal: /[{}]|<\//,
     keywords: {
       $pattern: /\b[\w\.]+/,
-      keyword: reduceRelevancy(KEYWORDS3, { when: (x) => x.length < 3 }),
+      keyword: reduceRelevancy(KEYWORDS3, { when: (x2) => x2.length < 3 }),
       literal: LITERALS3,
       type: TYPES3,
       built_in: POSSIBLE_WITHOUT_PARENS
@@ -58611,7 +58611,7 @@ function lookahead(re) {
   return concat("(?=", re, ")");
 }
 function concat(...args) {
-  const joined = args.map((x) => source(x)).join("");
+  const joined = args.map((x2) => source(x2)).join("");
   return joined;
 }
 function stripOptionsFromArgs(args) {
@@ -58625,7 +58625,7 @@ function stripOptionsFromArgs(args) {
 }
 function either(...args) {
   const opts = stripOptionsFromArgs(args);
-  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x) => source(x)).join("|") + ")";
+  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x2) => source(x2)).join("|") + ")";
   return joined;
 }
 var keywordWrapper = (keyword) => concat(
@@ -59965,7 +59965,7 @@ function javascript2(hljs) {
         ...BUILT_IN_GLOBALS2,
         "super",
         "import"
-      ].map((x) => `${x}\\s*\\(`)),
+      ].map((x2) => `${x2}\\s*\\(`)),
       IDENT_RE$1,
       regex.lookahead(/\s*\(/)
     ),
@@ -64478,7 +64478,7 @@ function useVirtualList(items, initialConfig = {}) {
     });
   }, []);
   const selectAll3 = useCallback(() => {
-    setSelectedItems(new Set(Array.from({ length: items.length }, (_, i) => i)));
+    setSelectedItems(new Set(Array.from({ length: items.length }, (_2, i) => i)));
   }, [items.length]);
   const clearSelection = useCallback(() => {
     setSelectedItems(/* @__PURE__ */ new Set());
@@ -64654,10 +64654,10 @@ var SwipeableCardInternal = React71__default.forwardRef(
     style: style2,
     ...props
   }, ref) => {
-    const x = useMotionValue(0);
-    const rotate = useTransform(x, [-200, 200], [-30, 30]);
-    const likeOpacity = useTransform(x, [0, threshold], [0, 1]);
-    const nopeOpacity = useTransform(x, [-threshold, 0], [1, 0]);
+    const x2 = useMotionValue(0);
+    const rotate = useTransform(x2, [-200, 200], [-30, 30]);
+    const likeOpacity = useTransform(x2, [0, threshold], [0, 1]);
+    const nopeOpacity = useTransform(x2, [-threshold, 0], [1, 0]);
     const handleDragStart = () => {
       if (disabled)
         return;
@@ -64670,14 +64670,14 @@ var SwipeableCardInternal = React71__default.forwardRef(
       if (Math.abs(info.offset.x) > threshold) {
         const direction = info.offset.x > 0 ? "right" : "left";
         const exitX = info.offset.x > 0 ? 400 : -400;
-        animate(x, exitX, { duration: 0.3 });
+        animate(x2, exitX, { duration: 0.3 });
         if (direction === "right" && onSwipeRight) {
           onSwipeRight();
         } else if (direction === "left" && onSwipeLeft) {
           onSwipeLeft();
         }
       } else {
-        animate(x, 0, { type: "spring", stiffness: 300, damping: 20 });
+        animate(x2, 0, { type: "spring", stiffness: 300, damping: 20 });
       }
     };
     return /* @__PURE__ */ jsxs(
@@ -64686,7 +64686,7 @@ var SwipeableCardInternal = React71__default.forwardRef(
         ref,
         drag: disabled ? false : "x",
         dragConstraints: { left: -300, right: 300 },
-        style: { x, rotate, ...style2 },
+        style: { x: x2, rotate, ...style2 },
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
         className: cn(
@@ -66053,7 +66053,7 @@ var SparklinePreview = ({ data, dataKey, color }) => {
     }
   ) });
 };
-var ChartSkeleton = ({ height }) => /* @__PURE__ */ jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center h-full gap-2 px-8", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx(
+var ChartSkeleton = ({ height }) => /* @__PURE__ */ jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center h-full gap-2 px-8", children: [...Array(8)].map((_2, i) => /* @__PURE__ */ jsx(
   motion.div,
   {
     initial: { height: 0 },
@@ -67056,9 +67056,9 @@ function MetricCard({
     const min2 = Math.min(...data.sparkline);
     const range = max2 - min2 || 1;
     const points = data.sparkline.map((value, index2) => {
-      const x = index2 / (data.sparkline.length - 1) * 100;
+      const x2 = index2 / (data.sparkline.length - 1) * 100;
       const y = 100 - (value - min2) / range * 100;
-      return `${x},${y}`;
+      return `${x2},${y}`;
     }).join(" ");
     const gradientId = `gradient-${data.id}`;
     return /* @__PURE__ */ jsx(
@@ -67883,7 +67883,7 @@ function ActivityFeed({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         className: "space-y-3",
-        children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        children: [...Array(5)].map((_2, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted animate-pulse" }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
             /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded animate-pulse" }),
@@ -68895,13 +68895,13 @@ function MapWidget({
                 className: "relative w-full h-full",
                 style: { transform: `scale(${zoom})` },
                 children: locations.map((location, index2) => {
-                  const x = (location.lng + 180) / 360 * 100;
+                  const x2 = (location.lng + 180) / 360 * 100;
                   const y = (90 - location.lat) / 180 * 100;
                   return /* @__PURE__ */ jsxs(
                     motion.div,
                     {
                       className: "absolute",
-                      style: { left: `${x}%`, top: `${y}%` },
+                      style: { left: `${x2}%`, top: `${y}%` },
                       initial: { scale: 0 },
                       animate: { scale: 1 },
                       transition: { delay: index2 * 0.05 },
@@ -70990,7 +70990,7 @@ var AdvancedFormsInternal = ({
         [fieldName]: newFiles
       };
     });
-    setValue(fieldName, uploadedFiles[fieldName]?.filter((_, i) => i !== index2) || []);
+    setValue(fieldName, uploadedFiles[fieldName]?.filter((_2, i) => i !== index2) || []);
   };
   const renderField = (field, index2) => {
     const error = errors[field.name];
@@ -72608,7 +72608,7 @@ var GitHubStarsInternal = ({
       ] }),
       /* @__PURE__ */ jsx("div", { className: cn(
         layout === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : "space-y-4"
-      ), children: Array.from({ length: maxItems || 6 }).map((_, index2) => /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      ), children: Array.from({ length: maxItems || 6 }).map((_2, index2) => /* @__PURE__ */ jsx(MoonUICardPro, { children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-5 w-3/4" }),
         /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-4 w-full" }),
         /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-4 w-2/3" }),
@@ -75339,7 +75339,7 @@ var MoonUIFileUploadPro = React71__default.forwardRef(
         return `File type ${file.type} is not supported`;
       }
       if (accept !== "*") {
-        const acceptTypes = accept.split(",").map((t) => t.trim());
+        const acceptTypes = accept.split(",").map((t2) => t2.trim());
         const isAccepted = acceptTypes.some((acceptType) => {
           if (acceptType.includes("*")) {
             return file.type.startsWith(acceptType.replace("*", ""));
@@ -76641,7 +76641,7 @@ function DataTableFilterDrawer({
     setFilters(newFilters);
   };
   const removeFilter = (index2) => {
-    setFilters(filters.filter((_, i) => i !== index2));
+    setFilters(filters.filter((_2, i) => i !== index2));
   };
   const clearAllFilters = () => {
     setFilters([]);
@@ -80384,7 +80384,7 @@ var FormWizardProgress = ({
           "flex items-center justify-center space-x-2",
           className
         ),
-        children: steps.map((_, index2) => {
+        children: steps.map((_2, index2) => {
           const isActive2 = index2 === currentStep;
           const isCompleted = isStepCompleted(index2);
           return /* @__PURE__ */ jsx(
@@ -81708,7 +81708,7 @@ var MoonUIQuizFormProInternal = React71__default.forwardRef(({
             animate: { opacity: 1, y: 0 },
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((rating) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2", children: Array.from({ length: maxRating }, (_2, i) => i + 1).map((rating) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: () => saveAnswer(rating),
@@ -83649,9 +83649,9 @@ function ChartWidget2({
     const chartWidth = 100 - padding * 2;
     const chartHeight = 100 - padding * 2;
     const points = values.map((value, index2) => {
-      const x = padding + index2 / (values.length - 1) * chartWidth;
+      const x2 = padding + index2 / (values.length - 1) * chartWidth;
       const y = padding + (chartHeight - value / maxValue * chartHeight);
-      return { x, y, value, label: labels[index2] };
+      return { x: x2, y, value, label: labels[index2] };
     });
     const pathData = points.map((point, index2) => `${index2 === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
     return /* @__PURE__ */ jsxs("div", { className: "relative h-full overflow-hidden", children: [
@@ -85437,20 +85437,29 @@ var roundedClasses = {
 };
 var BentoGridInternal = ({
   children,
-  columns = 4,
+  columns = 3,
+  // Changed from 4 to 3 (more common use case)
   gap = "md",
   className,
   responsive = true,
   autoFit = false
 }) => {
+  const hasCustomGridCols = className?.includes("grid-cols");
   const gridClass = cn(
     "grid w-full",
-    !autoFit && columnClasses[columns],
+    !autoFit && !hasCustomGridCols && columnClasses[columns],
     gapSizes[gap],
-    responsive && !autoFit && [
-      "lg:grid-cols-4",
-      "md:grid-cols-3",
-      "sm:grid-cols-2"
+    // Only add responsive classes if:
+    // 1. responsive is true
+    // 2. autoFit is false
+    // 3. user hasn't provided custom grid-cols
+    responsive && !autoFit && !hasCustomGridCols && [
+      "grid-cols-1",
+      // Mobile first
+      "sm:grid-cols-2",
+      // Small screens
+      columns === 3 ? "md:grid-cols-3" : `lg:grid-cols-${columns}`
+      // Medium+ screens
     ],
     autoFit && "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]",
     className
@@ -85697,12 +85706,12 @@ var ConfettiButtonInternal = ({
 }) => {
   const handleClick2 = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = (rect.left + rect.width / 2) / window.innerWidth;
+    const x2 = (rect.left + rect.width / 2) / window.innerWidth;
     const y = (rect.top + rect.height / 2) / window.innerHeight;
     confetti2({
       particleCount: 100,
       spread: 70,
-      origin: { x, y },
+      origin: { x: x2, y },
       ...confettiOptions
     });
     onClick?.(e);
@@ -85927,11 +85936,11 @@ var CursorTrailInternal = ({
   const [trails, setTrails] = useState([]);
   const [isVisible, setIsVisible] = useState(false);
   const idRef = useRef(0);
-  const addTrailPoint = useCallback((x, y) => {
+  const addTrailPoint = useCallback((x2, y) => {
     if (!enabled)
       return;
     const newPoint = {
-      x,
+      x: x2,
       y,
       id: idRef.current++,
       timestamp: Date.now()
@@ -86061,7 +86070,7 @@ CursorTrail.displayName = "CursorTrail";
 var GridPatternInternal = ({
   width = 40,
   height = 40,
-  x = -1,
+  x: x2 = -1,
   y = -1,
   squares = [],
   strokeDasharray = "0",
@@ -86216,7 +86225,7 @@ var GridPatternInternal = ({
           [hexCenterX - hexRadius, hexCenterY],
           [hexCenterX - hexRadius / 2, hexCenterY - hexRadius * Math.sqrt(3) / 2],
           [hexCenterX + hexRadius / 2, hexCenterY - hexRadius * Math.sqrt(3) / 2]
-        ].map(([x2, y2]) => `${x2},${y2}`).join(" L ");
+        ].map(([x3, y2]) => `${x3},${y2}`).join(" L ");
         return /* @__PURE__ */ jsx("path", { d: `M ${hexPath} Z`, ...baseProps });
       case "triangle":
         const triSize = Math.min(width, height) / 2;
@@ -86284,7 +86293,7 @@ var GridPatternInternal = ({
                   "pattern",
                   {
                     id: patternId,
-                    x,
+                    x: x2,
                     y,
                     width,
                     height,
@@ -86308,7 +86317,7 @@ var GridPatternInternal = ({
               squares.map(([squareX, squareY], index2) => /* @__PURE__ */ jsx(
                 "rect",
                 {
-                  x: squareX * width + x,
+                  x: squareX * width + x2,
                   y: squareY * height + y,
                   width,
                   height,
@@ -86611,7 +86620,7 @@ var MeteorsInternal = ({
       ),
       children: [
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children }),
-        autoPlay && meteors.map((_, idx) => {
+        autoPlay && meteors.map((_2, idx) => {
           const animationDelay = random(0, 5);
           const animationDuration = random(duration.min, duration.max) * speedMultiplier;
           const meteorOpacity = random(opacity.min, opacity.max);
@@ -86683,7 +86692,7 @@ var Meteors = (props) => {
 Meteors.displayName = "Meteors";
 
 // src/components/backgrounds/aurora-background.css
-styleInject("@keyframes aurora-wave-1 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);\n  }\n  33% {\n    transform: translateX(-45%) translateY(-55%) rotate(60deg) scale(1.1);\n  }\n  66% {\n    transform: translateX(-55%) translateY(-45%) rotate(-60deg) scale(0.9);\n  }\n}\n@keyframes aurora-wave-2 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.2);\n  }\n  33% {\n    transform: translateX(-55%) translateY(-45%) rotate(105deg) scale(1);\n  }\n  66% {\n    transform: translateX(-45%) translateY(-55%) rotate(-15deg) scale(1.3);\n  }\n}\n@keyframes aurora-wave-3 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(0.8);\n  }\n  33% {\n    transform: translateX(-40%) translateY(-50%) rotate(15deg) scale(1.2);\n  }\n  66% {\n    transform: translateX(-60%) translateY(-50%) rotate(-105deg) scale(1);\n  }\n}\n@keyframes aurora-shimmer {\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.8;\n  }\n}\n.aurora-layer {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 200%;\n  height: 200%;\n  filter: blur(80px);\n  mix-blend-mode: screen;\n  pointer-events: none;\n}\n.aurora-layer-1 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-1) 0%, transparent 60%);\n  animation: aurora-wave-1 15s ease-in-out infinite;\n}\n.aurora-layer-2 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-2) 0%, transparent 50%);\n  animation: aurora-wave-2 20s ease-in-out infinite;\n}\n.aurora-layer-3 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-3) 0%, transparent 70%);\n  animation: aurora-wave-3 25s ease-in-out infinite;\n}\n.aurora-layer-shimmer {\n  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);\n  animation: aurora-shimmer 3s ease-in-out infinite;\n}\n.aurora-interactive .aurora-layer {\n  transition: transform 0.3s ease-out;\n}\n.aurora-paused .aurora-layer {\n  animation-play-state: paused !important;\n}\n");
+styleInject("@keyframes aurora-wave-1 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);\n  }\n  33% {\n    transform: translateX(-45%) translateY(-55%) rotate(60deg) scale(1.1);\n  }\n  66% {\n    transform: translateX(-55%) translateY(-45%) rotate(-60deg) scale(0.9);\n  }\n}\n@keyframes aurora-wave-2 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.2);\n  }\n  33% {\n    transform: translateX(-55%) translateY(-45%) rotate(105deg) scale(1);\n  }\n  66% {\n    transform: translateX(-45%) translateY(-55%) rotate(-15deg) scale(1.3);\n  }\n}\n@keyframes aurora-wave-3 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(0.8);\n  }\n  33% {\n    transform: translateX(-40%) translateY(-50%) rotate(15deg) scale(1.2);\n  }\n  66% {\n    transform: translateX(-60%) translateY(-50%) rotate(-105deg) scale(1);\n  }\n}\n@keyframes aurora-shimmer {\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.8;\n  }\n}\n.aurora-layer {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 200%;\n  height: 200%;\n  filter: blur(80px);\n  mix-blend-mode: screen;\n  pointer-events: none;\n  will-change: transform, opacity;\n  transform: translate3d(0, 0, 0);\n  backface-visibility: hidden;\n}\n.aurora-layer-1 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-1) 0%, transparent 60%);\n  animation: aurora-wave-1 15s ease-in-out infinite;\n}\n.aurora-layer-2 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-2) 0%, transparent 50%);\n  animation: aurora-wave-2 20s ease-in-out infinite;\n}\n.aurora-layer-3 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-3) 0%, transparent 70%);\n  animation: aurora-wave-3 25s ease-in-out infinite;\n}\n.aurora-layer-shimmer {\n  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);\n  animation: aurora-shimmer 3s ease-in-out infinite;\n}\n.aurora-interactive .aurora-layer {\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n}\n.aurora-paused .aurora-layer {\n  opacity: 0;\n  transition: opacity 0.3s ease-out;\n}\n");
 var AuroraBackgroundInternal = ({
   children,
   className,
@@ -86701,12 +86710,13 @@ var AuroraBackgroundInternal = ({
   blendMode = "screen",
   variant = "default",
   fixed = false,
-  pauseWhenHidden = true
+  pauseWhenHidden = false
 }) => {
   const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
   const [isVisible, setIsVisible] = useState(true);
-  const containerRef = React71__default.useRef(null);
-  const getAnimationDuration = () => {
+  const containerRef = useRef(null);
+  const observerTimeoutRef = useRef(null);
+  const duration = useMemo(() => {
     switch (speed) {
       case "slow":
         return { layer1: "30s", layer2: "40s", layer3: "50s" };
@@ -86715,8 +86725,8 @@ var AuroraBackgroundInternal = ({
       default:
         return { layer1: "15s", layer2: "20s", layer3: "25s" };
     }
-  };
-  const getVariantColors = () => {
+  }, [speed]);
+  const variantColors = useMemo(() => {
     switch (variant) {
       case "subtle":
         return {
@@ -86739,17 +86749,15 @@ var AuroraBackgroundInternal = ({
       default:
         return colors;
     }
-  };
-  const handleMouseMove2 = (e) => {
+  }, [variant, colors]);
+  const handleMouseMove2 = useCallback((e) => {
     if (!interactive)
       return;
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width * 100;
+    const x2 = (e.clientX - rect.left) / rect.width * 100;
     const y = (e.clientY - rect.top) / rect.height * 100;
-    setMousePosition({ x, y });
-  };
-  const duration = getAnimationDuration();
-  const variantColors = getVariantColors();
+    setMousePosition({ x: x2, y });
+  }, [interactive]);
   useEffect(() => {
     if (!pauseWhenHidden)
       return;
@@ -86759,19 +86767,60 @@ var AuroraBackgroundInternal = ({
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          setIsVisible(entry.isIntersecting);
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
         });
       },
       {
-        threshold: 0.1,
-        rootMargin: "50px"
+        threshold: 0.5
+        // Component must be 50% visible (was 0.1)
+        // Removed rootMargin to prevent premature triggering
       }
     );
     observer.observe(container);
     return () => {
       observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
     };
   }, [pauseWhenHidden]);
+  const containerStyle = useMemo(() => ({
+    "--aurora-color-1": variantColors.primary,
+    "--aurora-color-2": variantColors.secondary,
+    "--aurora-color-3": variantColors.tertiary,
+    "--aurora-opacity": opacity.toString(),
+    "--aurora-blur": `${blur2}px`
+  }), [variantColors, opacity, blur2]);
+  const backgroundStyle = useMemo(() => ({
+    background: variant === "dark" ? "linear-gradient(to bottom, #0f172a, #020617)" : "linear-gradient(to bottom, #ffffff, #f8fafc)"
+  }), [variant]);
+  const layer1Style = useMemo(() => ({
+    animationDuration: duration.layer1,
+    filter: `blur(${blur2}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.1}%) translateY(${-50 + (mousePosition.y - 50) * 0.1}%) rotate(0deg) scale(1)` : void 0
+  }), [duration.layer1, blur2, blendMode, interactive, mousePosition]);
+  const layer2Style = useMemo(() => ({
+    animationDuration: duration.layer2,
+    filter: `blur(${blur2 * 1.2}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.2}%) translateY(${-50 + (mousePosition.y - 50) * 0.2}%) rotate(45deg) scale(1.2)` : void 0
+  }), [duration.layer2, blur2, blendMode, interactive, mousePosition]);
+  const layer3Style = useMemo(() => ({
+    animationDuration: duration.layer3,
+    filter: `blur(${blur2 * 0.8}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.15}%) translateY(${-50 + (mousePosition.y - 50) * 0.15}%) rotate(-45deg) scale(0.8)` : void 0
+  }), [duration.layer3, blur2, blendMode, interactive, mousePosition]);
+  const shimmerStyle = useMemo(() => ({
+    filter: `blur(${blur2 * 0.5}px)`,
+    mixBlendMode: "overlay"
+  }), [blur2]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -86784,70 +86833,14 @@ var AuroraBackgroundInternal = ({
         containerClassName
       ),
       onMouseMove: handleMouseMove2,
-      style: {
-        "--aurora-color-1": variantColors.primary,
-        "--aurora-color-2": variantColors.secondary,
-        "--aurora-color-3": variantColors.tertiary,
-        "--aurora-opacity": opacity.toString(),
-        "--aurora-blur": `${blur2}px`
-      },
+      style: containerStyle,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: {
-              background: variant === "dark" ? "linear-gradient(to bottom, #0f172a, #020617)" : "linear-gradient(to bottom, #ffffff, #f8fafc)"
-            }
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: backgroundStyle }),
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", style: { opacity }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-1",
-              style: {
-                animationDuration: duration.layer1,
-                filter: `blur(${blur2}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.1}%) translateY(${-50 + (mousePosition.y - 50) * 0.1}%) rotate(0deg) scale(1)` : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-2",
-              style: {
-                animationDuration: duration.layer2,
-                filter: `blur(${blur2 * 1.2}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.2}%) translateY(${-50 + (mousePosition.y - 50) * 0.2}%) rotate(45deg) scale(1.2)` : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-3",
-              style: {
-                animationDuration: duration.layer3,
-                filter: `blur(${blur2 * 0.8}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.15}%) translateY(${-50 + (mousePosition.y - 50) * 0.15}%) rotate(-45deg) scale(0.8)` : void 0
-              }
-            }
-          ),
-          shimmer && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-shimmer",
-              style: {
-                filter: `blur(${blur2 * 0.5}px)`,
-                mixBlendMode: "overlay"
-              }
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-1", style: layer1Style }),
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-2", style: layer2Style }),
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-3", style: layer3Style }),
+          shimmer && /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-shimmer", style: shimmerStyle })
         ] }),
         children && /* @__PURE__ */ jsx("div", { className: cn("relative z-10", className), children })
       ]
@@ -86895,15 +86888,19 @@ var ParticlesInternal = ({
   movement = "random",
   gravity = 0.1,
   bounce = true,
-  opacity = { min: 0.3, max: 1 }
+  opacity = { min: 0.3, max: 1 },
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const particlesRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
-  const drawParticle = (ctx, particle) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
+  const drawParticle = useCallback((ctx, particle) => {
     ctx.save();
     ctx.translate(particle.x, particle.y);
     if (particle.angle && shape !== "circle") {
@@ -86937,19 +86934,19 @@ var ParticlesInternal = ({
         const outerRadius = particle.size;
         const innerRadius = particle.size / 2;
         let rot = Math.PI / 2 * 3;
-        let x = 0;
+        let x2 = 0;
         let y = 0;
         const step = Math.PI / spikes;
         ctx.beginPath();
         ctx.moveTo(0, -outerRadius);
         for (let i = 0; i < spikes; i++) {
-          x = Math.cos(rot) * outerRadius;
+          x2 = Math.cos(rot) * outerRadius;
           y = Math.sin(rot) * outerRadius;
-          ctx.lineTo(x, y);
+          ctx.lineTo(x2, y);
           rot += step;
-          x = Math.cos(rot) * innerRadius;
+          x2 = Math.cos(rot) * innerRadius;
           y = Math.sin(rot) * innerRadius;
-          ctx.lineTo(x, y);
+          ctx.lineTo(x2, y);
           rot += step;
         }
         ctx.lineTo(0, -outerRadius);
@@ -86958,8 +86955,8 @@ var ParticlesInternal = ({
         break;
     }
     ctx.restore();
-  };
-  const updateParticle = (particle, canvas) => {
+  }, [shape, glow, performanceMode, glowIntensity]);
+  const updateParticle = useCallback((particle, canvas) => {
     switch (movement) {
       case "linear":
         particle.x += particle.vx;
@@ -87022,8 +87019,8 @@ var ParticlesInternal = ({
         particle.life = 0;
       }
     }
-  };
-  const drawConnections = (ctx) => {
+  }, [movement, speed, gravity, shape, interactive, mouseRadius, bounce]);
+  const drawConnections = useCallback((ctx) => {
     const particles = particlesRef.current;
     for (let i = 0; i < particles.length; i++) {
       for (let j = i + 1; j < particles.length; j++) {
@@ -87041,7 +87038,7 @@ var ParticlesInternal = ({
         }
       }
     }
-  };
+  }, [connectDistance, lineOpacity, lineWidth]);
   const animate4 = useCallback((currentTime) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d", {
@@ -87057,20 +87054,22 @@ var ParticlesInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (blur2 > 0) {
-      ctx.filter = `blur(${blur2}px)`;
-    }
-    if (showConnections && !performanceMode) {
-      drawConnections(ctx);
+    if (!pauseWhenHidden || isVisible) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (blur2 > 0) {
+        ctx.filter = `blur(${blur2}px)`;
+      }
+      if (showConnections && !performanceMode) {
+        drawConnections(ctx);
+      }
+      const particles = particlesRef.current;
+      particles.forEach((particle) => {
+        updateParticle(particle, canvas);
+        drawParticle(ctx, particle);
+      });
     }
-    const particles = particlesRef.current;
-    particles.forEach((particle) => {
-      updateParticle(particle, canvas);
-      drawParticle(ctx, particle);
-    });
     animationRef.current = requestAnimationFrame(animate4);
-  }, [showConnections, connectDistance, lineWidth, lineOpacity, performanceMode, blur2, frameInterval]);
+  }, [showConnections, performanceMode, blur2, frameInterval, drawConnections, updateParticle, drawParticle, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -87107,6 +87106,37 @@ var ParticlesInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      {
+        threshold: 0.5
+        // Component must be 50% visible
+        // No rootMargin to prevent premature triggering
+      }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
@@ -87145,9 +87175,17 @@ var ParticlesInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, interactive, count3, size4, colors, speed, opacity]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -87164,9 +87202,7 @@ var ParticlesInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              opacity: 1
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -87229,7 +87265,8 @@ var StarfieldInternal = ({
   const needsSortRef = useRef(true);
   const sortTimeRef = useRef(0);
   const resizeTimeoutRef = useRef(void 0);
-  const isVisibleRef = useRef(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const containerRef = useRef(null);
   const starColors = Array.isArray(starColor) ? starColor : [starColor];
   const initializeShootingStars = useCallback(() => {
@@ -87293,9 +87330,9 @@ var StarfieldInternal = ({
         rotationRef.current += spiralSpeed;
         const cos = Math.cos(rotationRef.current);
         const sin = Math.sin(rotationRef.current);
-        const x = star.x * cos - star.y * sin;
+        const x2 = star.x * cos - star.y * sin;
         const y = star.x * sin + star.y * cos;
-        star.x = x;
+        star.x = x2;
         star.y = y;
         star.z -= speed * (star.velocity || 1);
         break;
@@ -87413,7 +87450,7 @@ var StarfieldInternal = ({
     });
   };
   const animate4 = useCallback((currentTime) => {
-    if (!isVisibleRef.current) {
+    if (!isVisible) {
       animationRef.current = requestAnimationFrame(animate4);
       return;
     }
@@ -87530,17 +87567,26 @@ var StarfieldInternal = ({
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          isVisibleRef.current = entry.isIntersecting;
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
         });
       },
       {
-        threshold: 0.1,
-        rootMargin: "50px"
+        threshold: 0.5
+        // Component must be 50% visible (was 0.1)
+        // Removed rootMargin to prevent premature triggering
       }
     );
     observer.observe(container);
     return () => {
       observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
     };
   }, []);
   useEffect(() => {
@@ -87585,6 +87631,11 @@ var StarfieldInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, mouseParallax, initializeShootingStars, starCount, starSize, starColors, twinkleSpeed]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden"
+  }), []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -87602,7 +87653,8 @@ var StarfieldInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -87676,18 +87728,18 @@ var DotPatternInternal = ({
       case "hex":
         for (let row = 0; row < rows; row++) {
           for (let col = 0; col < cols; col++) {
-            const x = col * spacing + (row % 2 === 1 ? spacing / 2 : 0);
+            const x2 = col * spacing + (row % 2 === 1 ? spacing / 2 : 0);
             const y = row * spacing * 0.866;
-            dots.push({ x, y });
+            dots.push({ x: x2, y });
           }
         }
         break;
       case "diagonal":
         for (let row = 0; row < rows; row++) {
           for (let col = 0; col < cols; col++) {
-            const x = col * spacing + row * spacing * 0.5;
+            const x2 = col * spacing + row * spacing * 0.5;
             const y = row * spacing;
-            dots.push({ x, y });
+            dots.push({ x: x2, y });
           }
         }
         break;
@@ -87702,9 +87754,9 @@ var DotPatternInternal = ({
           const dotsInRing = Math.max(1, Math.floor(circumference / spacing));
           for (let i = 0; i < dotsInRing; i++) {
             const angle = i / dotsInRing * 2 * Math.PI;
-            const x = centerX + radius * Math.cos(angle);
+            const x2 = centerX + radius * Math.cos(angle);
             const y = centerY + radius * Math.sin(angle);
-            dots.push({ x, y });
+            dots.push({ x: x2, y });
           }
         }
         break;
@@ -87732,9 +87784,9 @@ var DotPatternInternal = ({
       if (patternRef.current) {
         const dots = patternRef.current.querySelectorAll("circle");
         dots.forEach((dot) => {
-          const x = parseFloat(dot.getAttribute("cx") || "0");
+          const x2 = parseFloat(dot.getAttribute("cx") || "0");
           const y = parseFloat(dot.getAttribute("cy") || "0");
-          const dx = x - mouseRef.current.x;
+          const dx = x2 - mouseRef.current.x;
           const dy = y - mouseRef.current.y;
           const distance = Math.sqrt(dx * dx + dy * dy);
           if (distance < hoverRadius) {
@@ -88042,19 +88094,20 @@ var GridDistortionInternal = ({
   const mouseRef = useRef({ x: -1e3, y: -1e3 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
-  const isVisibleRef = useRef(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const frameInterval = 1e3 / fps;
   const initializeGrid = useCallback(() => {
     const points = [];
     for (let row = 0; row <= rows; row++) {
       const rowPoints = [];
       for (let col = 0; col <= columns; col++) {
-        const x = col / columns;
+        const x2 = col / columns;
         const y = row / rows;
         rowPoints.push({
-          x,
+          x: x2,
           y,
-          originalX: x,
+          originalX: x2,
           originalY: y,
           offsetX: 0,
           offsetY: 0
@@ -88133,16 +88186,16 @@ var GridDistortionInternal = ({
       }
     }
   }, [distortion, distortionType, amplitude, frequency, rows, columns, interactive, mouseRadius, mouseStrength]);
-  const applyPerspective = useCallback((x, y, width, height) => {
+  const applyPerspective = useCallback((x2, y, width, height) => {
     if (!perspective)
-      return { x, y };
+      return { x: x2, y };
     const centerX = width / 2;
     const centerY = height / 2;
     const cosX = Math.cos(rotateX * Math.PI / 180);
     const sinX = Math.sin(rotateX * Math.PI / 180);
     const cosY = Math.cos(rotateY * Math.PI / 180);
     const sinY = Math.sin(rotateY * Math.PI / 180);
-    let px = x - centerX;
+    let px = x2 - centerX;
     let py = y - centerY;
     const pz = -px * sinY;
     px = px * cosY;
@@ -88180,9 +88233,9 @@ var GridDistortionInternal = ({
     for (let row = 0; row <= rows; row++) {
       for (let col = 0; col <= columns; col++) {
         const point = points[row][col];
-        const x = point.x * width;
+        const x2 = point.x * width;
         const y = point.y * height;
-        const transformed = applyPerspective(x, y, width, height);
+        const transformed = applyPerspective(x2, y, width, height);
         if (col === 0) {
           ctx.moveTo(transformed.x, transformed.y);
         } else {
@@ -88193,9 +88246,9 @@ var GridDistortionInternal = ({
     for (let col = 0; col <= columns; col++) {
       for (let row = 0; row <= rows; row++) {
         const point = points[row][col];
-        const x = point.x * width;
+        const x2 = point.x * width;
         const y = point.y * height;
-        const transformed = applyPerspective(x, y, width, height);
+        const transformed = applyPerspective(x2, y, width, height);
         if (row === 0) {
           ctx.moveTo(transformed.x, transformed.y);
         } else {
@@ -88221,7 +88274,7 @@ var GridDistortionInternal = ({
   const animate4 = useCallback((timestamp) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx || !isVisibleRef.current) {
+    if (!canvas || !ctx) {
       animationRef.current = requestAnimationFrame(animate4);
       return;
     }
@@ -88231,11 +88284,13 @@ var GridDistortionInternal = ({
       return;
     }
     lastFrameTimeRef.current = timestamp - elapsed % frameInterval;
-    timeRef.current += speed * 0.016;
-    applyDistortion(canvas);
-    drawGrid(ctx, canvas);
+    if (isVisible) {
+      timeRef.current += speed * 0.016;
+      applyDistortion(canvas);
+      drawGrid(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [applyDistortion, drawGrid, speed, frameInterval]);
+  }, [applyDistortion, drawGrid, speed, frameInterval, isVisible]);
   const setupCanvas = useCallback(() => {
     const canvas = canvasRef.current;
     const container = containerRef.current;
@@ -88284,13 +88339,25 @@ var GridDistortionInternal = ({
     if (!container)
       return;
     const intersectionObserver = new IntersectionObserver(
-      ([entry]) => {
-        isVisibleRef.current = entry.isIntersecting;
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
       },
-      { threshold: 0.1 }
+      { threshold: 0.5 }
     );
     intersectionObserver.observe(container);
-    return () => intersectionObserver.disconnect();
+    return () => {
+      intersectionObserver.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
   }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -88313,6 +88380,14 @@ var GridDistortionInternal = ({
       }
     };
   }, [setupCanvas, handleMouseMove2, handleMouseLeave2, animate4, interactive]);
+  const canvasStyle = useMemo(() => ({
+    imageRendering: "crisp-edges",
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s ease-out"
+  }), [isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -88333,9 +88408,7 @@ var GridDistortionInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              imageRendering: "crisp-edges"
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88379,15 +88452,19 @@ var WavesInternal = ({
   animationType = "continuous",
   interactive = false,
   mouseRadius = 150,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const waveLayersRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeWaves = useCallback(() => {
     const waveLayers = [];
     for (let i = 0; i < layers; i++) {
@@ -88402,24 +88479,24 @@ var WavesInternal = ({
     }
     waveLayersRef.current = waveLayers;
   }, [layers, amplitude, frequency, speed, parallax, parallaxIntensity, colors]);
-  const calculateWavePoint = (x, layer, time, mouseEffect = 0) => {
+  const calculateWavePoint = (x2, layer, time, mouseEffect = 0) => {
     let y = 0;
     switch (waveStyle) {
       case "smooth":
-        y = Math.sin((x * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
+        y = Math.sin((x2 * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
         break;
       case "sharp":
-        const wave = (x * layer.frequency + time * layer.speed + layer.phase) * 0.01;
+        const wave = (x2 * layer.frequency + time * layer.speed + layer.phase) * 0.01;
         y = (Math.sin(wave) > 0 ? 1 : -1) * layer.amplitude;
         break;
       case "turbulent":
-        y = Math.sin((x * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
-        y += Math.sin((x * layer.frequency * 2.3 + time * layer.speed * 1.5) * 0.01) * layer.amplitude * 0.3;
-        y += Math.sin((x * layer.frequency * 3.7 + time * layer.speed * 0.7) * 0.01) * layer.amplitude * 0.2;
+        y = Math.sin((x2 * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
+        y += Math.sin((x2 * layer.frequency * 2.3 + time * layer.speed * 1.5) * 0.01) * layer.amplitude * 0.3;
+        y += Math.sin((x2 * layer.frequency * 3.7 + time * layer.speed * 0.7) * 0.01) * layer.amplitude * 0.2;
         break;
       case "organic":
-        y = Math.sin((x * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
-        y *= 1 + Math.sin(x * 3e-3 + time * 1e-3) * 0.2;
+        y = Math.sin((x2 * layer.frequency + time * layer.speed + layer.phase) * 0.01) * layer.amplitude;
+        y *= 1 + Math.sin(x2 * 3e-3 + time * 1e-3) * 0.2;
         break;
     }
     if (interactive && mouseEffect > 0) {
@@ -88482,8 +88559,8 @@ var WavesInternal = ({
       ctx.moveTo(0, 0);
       for (let y = 0; y <= canvas.height; y += 5) {
         const mouseEffect = interactive ? getMouseEffect(canvas.width / 2, y) : 0;
-        const x = canvas.width / 2 + calculateWavePoint(y, layer, time, mouseEffect);
-        ctx.lineTo(x, y);
+        const x2 = canvas.width / 2 + calculateWavePoint(y, layer, time, mouseEffect);
+        ctx.lineTo(x2, y);
       }
       ctx.lineTo(canvas.width, canvas.height);
       ctx.lineTo(canvas.width, 0);
@@ -88491,20 +88568,20 @@ var WavesInternal = ({
       const diagonal = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height);
       ctx.moveTo(0, canvas.height);
       for (let d = 0; d <= diagonal; d += 5) {
-        const x = d / diagonal * canvas.width;
+        const x2 = d / diagonal * canvas.width;
         const baseY = d / diagonal * canvas.height;
-        const mouseEffect = interactive ? getMouseEffect(x, baseY) : 0;
+        const mouseEffect = interactive ? getMouseEffect(x2, baseY) : 0;
         const waveY = calculateWavePoint(d, layer, time, mouseEffect);
-        ctx.lineTo(x, canvas.height - baseY + waveY);
+        ctx.lineTo(x2, canvas.height - baseY + waveY);
       }
       ctx.lineTo(canvas.width, 0);
       ctx.lineTo(canvas.width, canvas.height);
     } else {
       ctx.moveTo(0, canvas.height);
-      for (let x = 0; x <= canvas.width; x += 5) {
-        const mouseEffect = interactive ? getMouseEffect(x, canvas.height / 2) : 0;
-        const y = canvas.height / 2 + calculateWavePoint(x, layer, time, mouseEffect);
-        ctx.lineTo(x, y);
+      for (let x2 = 0; x2 <= canvas.width; x2 += 5) {
+        const mouseEffect = interactive ? getMouseEffect(x2, canvas.height / 2) : 0;
+        const y = canvas.height / 2 + calculateWavePoint(x2, layer, time, mouseEffect);
+        ctx.lineTo(x2, y);
       }
       ctx.lineTo(canvas.width, canvas.height);
     }
@@ -88512,8 +88589,8 @@ var WavesInternal = ({
     ctx.fill();
     ctx.restore();
   };
-  const getMouseEffect = (x, y) => {
-    const dx = x - mouseRef.current.x;
+  const getMouseEffect = (x2, y) => {
+    const dx = x2 - mouseRef.current.x;
     const dy = y - mouseRef.current.y;
     const distance = Math.sqrt(dx * dx + dy * dy);
     if (distance < mouseRadius) {
@@ -88537,20 +88614,22 @@ var WavesInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    if (animationType === "continuous") {
-      timeRef.current += 1;
-    } else if (animationType === "pulse") {
-      timeRef.current += 1 + Math.sin(currentTime * 1e-3) * 0.5;
-    } else if (animationType === "breathe") {
-      timeRef.current += 0.5 + Math.sin(currentTime * 5e-4) * 0.5;
-    }
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    const waveLayers = waveLayersRef.current;
-    for (let i = waveLayers.length - 1; i >= 0; i--) {
-      drawWaveLayer(ctx, waveLayers[i], i, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      if (animationType === "continuous") {
+        timeRef.current += 1;
+      } else if (animationType === "pulse") {
+        timeRef.current += 1 + Math.sin(currentTime * 1e-3) * 0.5;
+      } else if (animationType === "breathe") {
+        timeRef.current += 0.5 + Math.sin(currentTime * 5e-4) * 0.5;
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const waveLayers = waveLayersRef.current;
+      for (let i = waveLayers.length - 1; i >= 0; i--) {
+        drawWaveLayer(ctx, waveLayers[i], i, canvas);
+      }
     }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, animationType]);
+  }, [frameInterval, animationType, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88591,9 +88670,44 @@ var WavesInternal = ({
       }
     };
   }, [initializeWaves, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -88609,7 +88723,8 @@ var WavesInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88653,15 +88768,19 @@ var GradientFlowInternal = ({
   scale = 1,
   blendMode = "normal",
   smooth = true,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const gradientPointsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeGradientPoints = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88835,17 +88954,19 @@ var GradientFlowInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (blur2 > 0) {
-      ctx.filter = `blur(${blur2}px)`;
-    }
-    if (type === "mesh") {
-      updateGradientPoints(canvas);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += 1;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (blur2 > 0) {
+        ctx.filter = `blur(${blur2}px)`;
+      }
+      if (type === "mesh") {
+        updateGradientPoints(canvas);
+      }
+      drawGradient(ctx, canvas);
     }
-    drawGradient(ctx, canvas);
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, smooth, blur2, type, updateGradientPoints, drawGradient]);
+  }, [frameInterval, smooth, blur2, type, updateGradientPoints, drawGradient, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88904,9 +89025,44 @@ var GradientFlowInternal = ({
       }
     };
   }, [type, initializeGradientPoints, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -88919,7 +89075,8 @@ var GradientFlowInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88942,17 +89099,52 @@ var GradientFlow = (props) => {
   return /* @__PURE__ */ jsx(GradientFlowInternal, { ...props });
 };
 GradientFlow.displayName = "GradientFlow";
+var M = (e, i, s, u, m, a, l, h2) => {
+  let d = document.documentElement, w = ["light", "dark"];
+  function p(n) {
+    (Array.isArray(e) ? e : [e]).forEach((y) => {
+      let k = y === "class", S = k && a ? m.map((f) => a[f] || f) : m;
+      k ? (d.classList.remove(...S), d.classList.add(a && a[n] ? a[n] : n)) : d.setAttribute(y, n);
+    }), R(n);
+  }
+  function R(n) {
+    h2 && w.includes(n) && (d.style.colorScheme = n);
+  }
+  function c2() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  if (u)
+    p(u);
+  else
+    try {
+      let n = localStorage.getItem(i) || s, y = l && n === "system" ? c2() : n;
+      p(y);
+    } catch (n) {
+    }
+};
+var x = React71.createContext(void 0);
+var U = { setTheme: (e) => {
+}, themes: [] };
+var z = () => {
+  var e;
+  return (e = React71.useContext(x)) != null ? e : U;
+};
+React71.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h2, nonce: d, scriptProps: w }) => {
+  let p = JSON.stringify([s, i, a, e, h2, l, u, m]).slice(1, -1);
+  return React71.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
+});
 var MeshGradientInternal = ({
   children,
   className,
   containerClassName,
-  colors = ["#FF006E", "#FB5607", "#FFBE0B", "#8338EC", "#3A86FF"],
+  colors,
+  themeAware = true,
   speed = 0.5,
   gridSize = 4,
   animate: animate4 = true,
   animationType = "wave",
-  opacity = 1,
-  blur: blur2 = 40,
+  opacity,
+  blur: blur2,
   interactive = false,
   mouseRadius = 200,
   blendMode = "normal",
@@ -88962,9 +89154,45 @@ var MeshGradientInternal = ({
   grainOpacity = 0.03,
   saturation = 1,
   brightness = 1,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
+  const { theme, resolvedTheme } = z();
+  const currentTheme = theme === "system" ? resolvedTheme : theme;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
+  const defaultLightColors = [
+    "#fce7f3",
+    // Light pink
+    "#e9d5ff",
+    // Light purple
+    "#ddd6fe",
+    // Light violet
+    "#e0e7ff",
+    // Light indigo
+    "#fbcfe8"
+    // Light pink-2
+  ];
+  const defaultDarkColors = [
+    "#5b21b6",
+    // Deep purple
+    "#7c3aed",
+    // Purple
+    "#6366f1",
+    // Indigo
+    "#8b5cf6",
+    // Violet
+    "#4c1d95"
+    // Deep purple-dark
+  ];
+  const fallbackColors = ["#FF006E", "#FB5607", "#FFBE0B", "#8338EC", "#3A86FF"];
+  const finalColors = colors ? colors : themeAware && currentTheme === "light" ? defaultLightColors : themeAware && currentTheme === "dark" ? defaultDarkColors : fallbackColors;
+  const defaultBlur = themeAware && currentTheme === "light" ? 80 : 60;
+  const defaultOpacity = themeAware && currentTheme === "light" ? 0.25 : 0.35;
+  const finalBlur = blur2 ?? defaultBlur;
+  const finalOpacity = opacity ?? defaultOpacity;
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const meshPointsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -88987,13 +89215,13 @@ var MeshGradientInternal = ({
         y: height / 2 + Math.sin(angle) * distance * height,
         vx: (Math.random() - 0.5) * speed,
         vy: (Math.random() - 0.5) * speed,
-        color: colors[i % colors.length],
+        color: finalColors[i % finalColors.length],
         radius: Math.max(100, (width + height) / 4),
         phase: i / totalPoints * Math.PI * 2
       });
     }
     meshPointsRef.current = points;
-  }, [colors, complexity, speed]);
+  }, [finalColors, complexity, speed]);
   const adjustColor = useCallback((color, alpha2 = 1) => {
     const hex = color.replace("#", "");
     const r2 = parseInt(hex.substring(0, 2), 16);
@@ -89076,19 +89304,19 @@ var MeshGradientInternal = ({
     const points = meshPointsRef.current;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.globalCompositeOperation = blendMode;
-    ctx.globalAlpha = opacity;
-    if (blur2 > 0) {
-      ctx.filter = `blur(${blur2}px)`;
+    ctx.globalAlpha = finalOpacity;
+    if (finalBlur > 0) {
+      ctx.filter = `blur(${finalBlur}px)`;
     }
     points.forEach((point, i) => {
-      const x = isFinite(point.x) ? point.x : canvas.width / 2;
+      const x2 = isFinite(point.x) ? point.x : canvas.width / 2;
       const y = isFinite(point.y) ? point.y : canvas.height / 2;
       const radius = isFinite(point.radius) && point.radius > 0 ? point.radius : 100;
       const gradient = ctx.createRadialGradient(
-        x,
+        x2,
         y,
         0,
-        x,
+        x2,
         y,
         radius
       );
@@ -89123,7 +89351,7 @@ var MeshGradientInternal = ({
       ctx.globalCompositeOperation = "overlay";
       ctx.putImageData(imageData, 0, 0);
     }
-  }, [opacity, blur2, blendMode, interpolation, grain, grainOpacity, adjustColor]);
+  }, [finalOpacity, finalBlur, blendMode, interpolation, grain, grainOpacity, adjustColor]);
   const animateLoop = useCallback((currentTime) => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89140,7 +89368,7 @@ var MeshGradientInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    if (animate4) {
+    if (animate4 && (!pauseWhenHidden || isVisible)) {
       timeRef.current += speed * 2.5;
     }
     updateMeshPoints(canvas);
@@ -89166,6 +89394,37 @@ var MeshGradientInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      {
+        threshold: 0.5
+        // Component must be 50% visible
+        // No rootMargin to prevent premature triggering
+      }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89194,9 +89453,17 @@ var MeshGradientInternal = ({
       }
     };
   }, [initializeMeshPoints, handleResize, handleMouseMove2, animateLoop, drawMeshGradient, interactive, animate4]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -89209,7 +89476,8 @@ var MeshGradientInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
@@ -89252,15 +89520,19 @@ var LiquidBackgroundInternal = ({
   backgroundColor = "transparent",
   animationStyle = "float",
   gradientOverlay = false,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const blobsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0, vx: 0, vy: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeBlobs = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89430,11 +89702,13 @@ var LiquidBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    updateBlobs(canvas);
-    drawLiquid(ctx, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += 1;
+      updateBlobs(canvas);
+      drawLiquid(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, updateBlobs, drawLiquid]);
+  }, [frameInterval, updateBlobs, drawLiquid, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89477,9 +89751,44 @@ var LiquidBackgroundInternal = ({
       }
     };
   }, [initializeBlobs, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -89495,7 +89804,8 @@ var LiquidBackgroundInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -89536,14 +89846,18 @@ var MatrixRainInternal = ({
   fadeLength = 20,
   interactive = false,
   mouseRadius = 200,
-  fps = 30
+  fps = 30,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const columnsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const getCharacterSet = useCallback(() => {
     switch (charSet) {
       case "matrix":
@@ -89673,10 +89987,12 @@ var MatrixRainInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    updateColumns2(canvas);
-    drawMatrix(ctx, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      updateColumns2(canvas);
+      drawMatrix(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, updateColumns2, drawMatrix]);
+  }, [frameInterval, updateColumns2, drawMatrix, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89717,9 +90033,44 @@ var MatrixRainInternal = ({
       }
     };
   }, [initializeColumns, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? backgroundOpacity : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible, backgroundOpacity]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden bg-black",
         containerClassName
@@ -89733,9 +90084,7 @@ var MatrixRainInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              opacity: backgroundOpacity
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -89779,9 +90128,11 @@ var GlitchBackgroundInternal = ({
   speed = 1,
   interactive = false,
   mouseRadius = 200,
-  fps = 30
+  fps = 30,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const glitchSlicesRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -89789,6 +90140,8 @@ var GlitchBackgroundInternal = ({
   const frameInterval = 1e3 / fps;
   const timeRef = useRef(0);
   const isGlitchingRef = useRef(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const generateGlitchSlices = useCallback((canvas) => {
     const slices = [];
     const sliceCount = Math.floor(Math.random() * 10 * intensity) + 2;
@@ -89916,31 +90269,33 @@ var GlitchBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += speed;
-    const glitchChance = frequency * 0.1;
-    if (!isGlitchingRef.current && Math.random() < glitchChance) {
-      isGlitchingRef.current = true;
-      generateGlitchSlices(canvas);
-      setTimeout(() => {
-        isGlitchingRef.current = false;
-      }, Math.random() * 200 * intensity + 50);
-    }
-    if (interactive) {
-      const dx = canvas.width / 2 - mouseRef.current.x;
-      const dy = canvas.height / 2 - mouseRef.current.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance < mouseRadius && !isGlitchingRef.current) {
-        const triggerChance = (1 - distance / mouseRadius) * frequency;
-        if (Math.random() < triggerChance * 0.05) {
-          isGlitchingRef.current = true;
-          generateGlitchSlices(canvas);
-          setTimeout(() => {
-            isGlitchingRef.current = false;
-          }, Math.random() * 100 + 50);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += speed;
+      const glitchChance = frequency * 0.1;
+      if (!isGlitchingRef.current && Math.random() < glitchChance) {
+        isGlitchingRef.current = true;
+        generateGlitchSlices(canvas);
+        setTimeout(() => {
+          isGlitchingRef.current = false;
+        }, Math.random() * 200 * intensity + 50);
+      }
+      if (interactive) {
+        const dx = canvas.width / 2 - mouseRef.current.x;
+        const dy = canvas.height / 2 - mouseRef.current.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouseRadius && !isGlitchingRef.current) {
+          const triggerChance = (1 - distance / mouseRadius) * frequency;
+          if (Math.random() < triggerChance * 0.05) {
+            isGlitchingRef.current = true;
+            generateGlitchSlices(canvas);
+            setTimeout(() => {
+              isGlitchingRef.current = false;
+            }, Math.random() * 100 + 50);
+          }
         }
       }
+      drawGlitch(ctx, canvas);
     }
-    drawGlitch(ctx, canvas);
     animationRef.current = requestAnimationFrame(animate4);
   }, [
     frameInterval,
@@ -89950,7 +90305,9 @@ var GlitchBackgroundInternal = ({
     interactive,
     mouseRadius,
     generateGlitchSlices,
-    drawGlitch
+    drawGlitch,
+    pauseWhenHidden,
+    isVisible
   ]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
@@ -90003,9 +90360,45 @@ var GlitchBackgroundInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    zIndex: 1,
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -90022,7 +90415,7 @@ var GlitchBackgroundInternal = ({
               "absolute inset-0 w-full h-full pointer-events-none",
               className
             ),
-            style: { zIndex: 1 }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -90134,12 +90527,12 @@ var FloatingElementsInternal = ({
         ctx.beginPath();
         for (let i = 0; i < 6; i++) {
           const angle = Math.PI * 2 / 6 * i;
-          const x = Math.cos(angle) * actualSize / 2;
+          const x2 = Math.cos(angle) * actualSize / 2;
           const y = Math.sin(angle) * actualSize / 2;
           if (i === 0)
-            ctx.moveTo(x, y);
+            ctx.moveTo(x2, y);
           else
-            ctx.lineTo(x, y);
+            ctx.lineTo(x2, y);
         }
         ctx.closePath();
         ctx.fill();
@@ -90149,12 +90542,12 @@ var FloatingElementsInternal = ({
         for (let i = 0; i < 10; i++) {
           const radius = i % 2 === 0 ? actualSize / 2 : actualSize / 4;
           const angle = Math.PI * 2 / 10 * i - Math.PI / 2;
-          const x = Math.cos(angle) * radius;
+          const x2 = Math.cos(angle) * radius;
           const y = Math.sin(angle) * radius;
           if (i === 0)
-            ctx.moveTo(x, y);
+            ctx.moveTo(x2, y);
           else
-            ctx.lineTo(x, y);
+            ctx.lineTo(x2, y);
         }
         ctx.closePath();
         ctx.fill();
@@ -90337,7 +90730,12 @@ var FloatingElementsInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: {
+              willChange: "transform",
+              transform: "translate3d(0, 0, 0)",
+              backfaceVisibility: "hidden"
+            }
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -90413,6 +90811,7 @@ var BubbleBackgroundInternal = ({
   mergeDistance = 30
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const offscreenCanvasRef = useRef(null);
   const animationRef = useRef(void 0);
   const bubblesRef = useRef([]);
@@ -90422,6 +90821,8 @@ var BubbleBackgroundInternal = ({
   const timeRef = useRef(0);
   const gradientCacheRef = useRef(/* @__PURE__ */ new Map());
   const performanceConfigRef = useRef(PERFORMANCE_PRESETS.medium);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const detectPerformance = useCallback(() => {
     const devicePixelRatio = window.devicePixelRatio || 1;
     const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -90692,37 +91093,39 @@ var BubbleBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (backgroundColor !== "transparent") {
-      ctx.fillStyle = backgroundColor;
-      ctx.globalAlpha = backgroundOpacity;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.globalAlpha = 1;
-    }
-    updateBubbles(canvas, deltaTime);
-    if (glow && performanceConfigRef.current.glow) {
-      ctx.shadowBlur = 20 * glowIntensity;
-      ctx.shadowColor = colors[0];
-    }
-    if (blur2 && performanceConfigRef.current.blur && offscreenCanvasRef.current) {
-      const offCtx = offscreenCanvasRef.current.getContext("2d");
-      if (offCtx) {
-        offCtx.filter = `blur(${blurAmount}px)`;
-        offCtx.clearRect(0, 0, canvas.width, canvas.height);
-        bubblesRef.current.forEach((bubble) => {
-          drawBubble(offCtx, bubble);
+    if (isVisible) {
+      timeRef.current += 1;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (backgroundColor !== "transparent") {
+        ctx.fillStyle = backgroundColor;
+        ctx.globalAlpha = backgroundOpacity;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.globalAlpha = 1;
+      }
+      updateBubbles(canvas, deltaTime);
+      if (glow && performanceConfigRef.current.glow) {
+        ctx.shadowBlur = 20 * glowIntensity;
+        ctx.shadowColor = colors[0];
+      }
+      if (blur2 && performanceConfigRef.current.blur && offscreenCanvasRef.current) {
+        const offCtx = offscreenCanvasRef.current.getContext("2d");
+        if (offCtx) {
+          offCtx.filter = `blur(${blurAmount}px)`;
+          offCtx.clearRect(0, 0, canvas.width, canvas.height);
+          bubblesRef.current.forEach((bubble) => {
+            drawBubble(offCtx, bubble);
+          });
+          ctx.drawImage(offscreenCanvasRef.current, 0, 0);
+        }
+      } else {
+        const bubbles = bubblesRef.current;
+        bubbles.forEach((bubble) => {
+          drawBubble(ctx, bubble);
         });
-        ctx.drawImage(offscreenCanvasRef.current, 0, 0);
       }
-    } else {
-      const bubbles = bubblesRef.current;
-      bubbles.forEach((bubble) => {
-        drawBubble(ctx, bubble);
-      });
-    }
-    if (glow && performanceConfigRef.current.glow) {
-      ctx.shadowBlur = 0;
+      if (glow && performanceConfigRef.current.glow) {
+        ctx.shadowBlur = 0;
+      }
     }
     animationRef.current = requestAnimationFrame(animate4);
   }, [
@@ -90735,7 +91138,8 @@ var BubbleBackgroundInternal = ({
     glowIntensity,
     blur2,
     blurAmount,
-    colors
+    colors,
+    isVisible
   ]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
@@ -90769,6 +91173,31 @@ var BubbleBackgroundInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    intersectionObserver.observe(container);
+    return () => {
+      intersectionObserver.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -90809,9 +91238,20 @@ var BubbleBackgroundInternal = ({
       gradientCacheRef.current.clear();
     };
   }, []);
+  const canvasStyle = useMemo(() => ({
+    width: "100%",
+    height: "100%",
+    touchAction: "none",
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s ease-out"
+  }), [isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -90825,11 +91265,7 @@ var BubbleBackgroundInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              width: "100%",
-              height: "100%",
-              touchAction: "none"
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -91000,12 +91436,12 @@ var GeometricPatternsInternal = ({
       case "hexagons":
         for (let i = 0; i < 6; i++) {
           const angle = Math.PI * 2 / 6 * i - Math.PI / 2;
-          const x = Math.cos(angle) * size4 / 2;
+          const x2 = Math.cos(angle) * size4 / 2;
           const y = Math.sin(angle) * size4 / 2;
           if (i === 0)
-            path.moveTo(x, y);
+            path.moveTo(x2, y);
           else
-            path.lineTo(x, y);
+            path.lineTo(x2, y);
         }
         path.closePath();
         break;
@@ -91055,12 +91491,12 @@ var GeometricPatternsInternal = ({
         if (density < 1 && (row % skipFactor !== 0 || col % skipFactor !== 0)) {
           continue;
         }
-        let x = col * totalSpacing;
+        let x2 = col * totalSpacing;
         let y = row * totalSpacing;
         if (pattern === "hexagons" && row % 2 === 1) {
-          x += totalSpacing / 2;
+          x2 += totalSpacing / 2;
         }
-        allPositions.push({ x, y });
+        allPositions.push({ x: x2, y });
       }
     }
     for (let i = allPositions.length - 1; i > 0; i--) {
@@ -91484,7 +91920,12 @@ var GeometricPatternsInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: {
+              willChange: "transform",
+              transform: "translate3d(0, 0, 0)",
+              backfaceVisibility: "hidden"
+            }
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -91715,7 +92156,7 @@ function CodeSnippets({
   const allSnippets = useMemo(
     () => Array.from(
       { length: multiplier },
-      (_, i) => snippets.map((snippet, j) => ({
+      (_2, i) => snippets.map((snippet, j) => ({
         ...snippet,
         id: `${i}-${j}-${snippet.language}`
       }))
@@ -91881,7 +92322,7 @@ var BlurFadeInternal = ({
         return { x: 0, y: 0 };
     }
   };
-  const { x, y } = getTransformValues();
+  const { x: x2, y } = getTransformValues();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -91895,7 +92336,7 @@ var BlurFadeInternal = ({
         ["--blur-fade-delay"]: `${delay}ms`,
         ["--blur-fade-duration"]: `${duration}ms`,
         ["--blur-fade-blur"]: blur2,
-        ["--blur-fade-x"]: `${x}px`,
+        ["--blur-fade-x"]: `${x2}px`,
         ["--blur-fade-y"]: `${y}px`
       },
       children: [
@@ -92227,17 +92668,17 @@ var RippleInternal = (props) => {
     if (disabled || !containerRef.current)
       return;
     const rect = containerRef.current.getBoundingClientRect();
-    let x, y, force = 1, velocity = 0;
+    let x2, y, force = 1, velocity = 0;
     if (customCenter) {
-      x = customCenter.x;
+      x2 = customCenter.x;
       y = customCenter.y;
     } else if (center) {
-      x = center.x;
+      x2 = center.x;
       y = center.y;
     } else if (event) {
       if ("touches" in event) {
         const touch = event.touches[0];
-        x = touch.clientX - rect.left;
+        x2 = touch.clientX - rect.left;
         y = touch.clientY - rect.top;
         if (pressureSensitive && "force" in touch) {
           force = touch.force || 1;
@@ -92246,18 +92687,18 @@ var RippleInternal = (props) => {
           const now = Date.now();
           const timeDiff = now - lastTouchTime.current;
           const distance = Math.sqrt(
-            Math.pow(x - lastTouchPos.current.x, 2) + Math.pow(y - lastTouchPos.current.y, 2)
+            Math.pow(x2 - lastTouchPos.current.x, 2) + Math.pow(y - lastTouchPos.current.y, 2)
           );
           velocity = timeDiff > 0 ? distance / timeDiff : 0;
           lastTouchTime.current = now;
-          lastTouchPos.current = { x, y };
+          lastTouchPos.current = { x: x2, y };
         }
       } else {
-        x = event.clientX - rect.left;
+        x2 = event.clientX - rect.left;
         y = event.clientY - rect.top;
       }
     } else {
-      x = rect.width / 2;
+      x2 = rect.width / 2;
       y = rect.height / 2;
     }
     let rippleSize = getRippleSize();
@@ -92270,7 +92711,7 @@ var RippleInternal = (props) => {
     }
     const baseRipple = {
       id: rippleIdRef.current++,
-      x: x - rippleSize / 2,
+      x: x2 - rippleSize / 2,
       y: y - rippleSize / 2,
       size: rippleSize,
       startTime: Date.now(),
@@ -92479,7 +92920,7 @@ var SparklesInternal = ({
         return "0%";
     }
   };
-  const createSparkle = (x, y) => {
+  const createSparkle = (x2, y) => {
     if (!containerRef.current) {
       return {
         id: sparkleIdRef.current++,
@@ -92496,7 +92937,7 @@ var SparklesInternal = ({
     const rect = containerRef.current.getBoundingClientRect();
     return {
       id: sparkleIdRef.current++,
-      x: x ?? randomInt(0, rect.width),
+      x: x2 ?? randomInt(0, rect.width),
       y: y ?? randomInt(0, rect.height),
       size: random(size4.min, size4.max),
       color,
@@ -92506,10 +92947,10 @@ var SparklesInternal = ({
       shape: getSparkleShape(shape)
     };
   };
-  const addSparkle = (x, y) => {
+  const addSparkle = (x2, y) => {
     if (!active)
       return;
-    const newSparkle = createSparkle(x, y);
+    const newSparkle = createSparkle(x2, y);
     setSparkles((prev) => {
       const updated = [...prev, newSparkle];
       if (updated.length > count3) {
@@ -92549,9 +92990,9 @@ var SparklesInternal = ({
     if (trigger === "click") {
       const rect = containerRef.current?.getBoundingClientRect();
       if (rect) {
-        const x = event.clientX - rect.left;
+        const x2 = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        addSparkle(x, y);
+        addSparkle(x2, y);
       }
     }
   };
@@ -92559,9 +93000,9 @@ var SparklesInternal = ({
     if (interactive && trigger === "hover" && isHovered) {
       const rect = containerRef.current?.getBoundingClientRect();
       if (rect && Math.random() > 0.8) {
-        const x = event.clientX - rect.left;
+        const x2 = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        addSparkle(x, y);
+        addSparkle(x2, y);
       }
     }
   };
@@ -92730,9 +93171,9 @@ var SpotlightInternal = ({
         if (!rect)
           return;
         const time = Date.now() / autoSpeed;
-        const x = (Math.sin(time) + 1) * 0.5 * rect.width;
+        const x2 = (Math.sin(time) + 1) * 0.5 * rect.width;
         const y = (Math.cos(time * 0.7) + 1) * 0.5 * rect.height;
-        setAutoPosition({ x, y });
+        setAutoPosition({ x: x2, y });
         autoAnimationRef.current = requestAnimationFrame(animate4);
       };
       autoAnimationRef.current = requestAnimationFrame(animate4);
@@ -92832,7 +93273,7 @@ var SpotlightInternal = ({
       clientX = event.clientX;
       clientY = event.clientY;
     }
-    let x = clientX - rect.left;
+    let x2 = clientX - rect.left;
     let y = clientY - rect.top;
     if (magnetic && magneticElements.length > 0) {
       magneticElements.forEach((element) => {
@@ -92840,28 +93281,28 @@ var SpotlightInternal = ({
         const elementCenterX = elementRect.left + elementRect.width / 2 - rect.left;
         const elementCenterY = elementRect.top + elementRect.height / 2 - rect.top;
         const distance = Math.sqrt(
-          Math.pow(x - elementCenterX, 2) + Math.pow(y - elementCenterY, 2)
+          Math.pow(x2 - elementCenterX, 2) + Math.pow(y - elementCenterY, 2)
         );
         if (distance < 100) {
           const force = (100 - distance) / 100 * magneticStrength;
-          x += (elementCenterX - x) * force;
+          x2 += (elementCenterX - x2) * force;
           y += (elementCenterY - y) * force;
         }
       });
     }
-    setMousePosition({ x, y });
-    updatePosition({ x, y });
+    setMousePosition({ x: x2, y });
+    updatePosition({ x: x2, y });
     if (spotlights?.some((s) => s.trail) || spotlights?.length === 0 && trailPositions.length > 0) {
       const timestamp = Date.now();
       setTrailPositions((prev) => {
-        const newTrail = [{ x, y, timestamp }, ...prev];
+        const newTrail = [{ x: x2, y, timestamp }, ...prev];
         const maxLength = spotlights?.find((s) => s.trail)?.trail?.length || 10;
         return newTrail.slice(0, maxLength);
       });
     }
     if (interactiveZones) {
       interactiveZones.forEach((zone, index2) => {
-        const isInZone = x >= zone.bounds.x && x <= zone.bounds.x + zone.bounds.width && y >= zone.bounds.y && y <= zone.bounds.y + zone.bounds.height;
+        const isInZone = x2 >= zone.bounds.x && x2 <= zone.bounds.x + zone.bounds.width && y >= zone.bounds.y && y <= zone.bounds.y + zone.bounds.height;
         if (zone.trigger === "proximity" || zone.trigger === "hover") {
           setInteractiveState((prev) => ({ ...prev, [index2]: isInZone }));
         }
@@ -92910,13 +93351,13 @@ var SpotlightInternal = ({
       return autoPosition;
     return displayPosition;
   };
-  const interpolateHeatMap = (data, x, y) => {
+  const interpolateHeatMap = (data, x2, y) => {
     if (!heatMap)
       return 0;
     let totalWeight = 0;
     let weightedIntensity = 0;
     data.forEach((point) => {
-      const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
+      const distance = Math.sqrt(Math.pow(x2 - point.x, 2) + Math.pow(y - point.y, 2));
       const weight = 1 / (distance + 1);
       totalWeight += weight;
       weightedIntensity += point.intensity * weight;
@@ -92935,20 +93376,20 @@ var SpotlightInternal = ({
         return shape2;
     }
   };
-  const createWavePattern = (x, y) => {
+  const createWavePattern = (x2, y) => {
     if (!waveAnimation)
       return 1;
     const { type, frequency, amplitude } = waveAnimation;
     const offset4 = waveOffset * 0.01;
     switch (type) {
       case "ripple":
-        const distance = Math.sqrt(Math.pow(x - 400, 2) + Math.pow(y - 300, 2));
+        const distance = Math.sqrt(Math.pow(x2 - 400, 2) + Math.pow(y - 300, 2));
         return 1 + amplitude * Math.sin(distance * frequency + offset4);
       case "sine":
-        return 1 + amplitude * Math.sin(x * frequency + offset4);
+        return 1 + amplitude * Math.sin(x2 * frequency + offset4);
       case "spiral":
-        const angle = Math.atan2(y - 300, x - 400);
-        const radius = Math.sqrt(Math.pow(x - 400, 2) + Math.pow(y - 300, 2));
+        const angle = Math.atan2(y - 300, x2 - 400);
+        const radius = Math.sqrt(Math.pow(x2 - 400, 2) + Math.pow(y - 300, 2));
         return 1 + amplitude * Math.sin(radius * frequency + angle * 3 + offset4);
       default:
         return 1;
@@ -92956,19 +93397,19 @@ var SpotlightInternal = ({
   };
   const createGradient = (spotlightData, position) => {
     const pos = position || getSpotlightPosition();
-    const { x, y } = pos;
+    const { x: x2, y } = pos;
     const currentColor = spotlightData?.color || color;
     let currentSize = (spotlightData?.size || size4) * pulseScale;
     const currentBlur = spotlightData?.blur || blur2;
     const currentShape = spotlightData?.shape || shape;
     if (waveAnimation) {
-      currentSize *= createWavePattern(x, y);
+      currentSize *= createWavePattern(x2, y);
     }
     if (heatMap) {
-      const heatIntensity = interpolateHeatMap(heatMap.data, x, y);
+      const heatIntensity = interpolateHeatMap(heatMap.data, x2, y);
       const colorIndex = Math.floor(heatIntensity * (heatMap.colors.length - 1));
       const heatColor = heatMap.colors[colorIndex] || currentColor;
-      return `radial-gradient(circle ${currentSize * heatIntensity + currentBlur}px at ${x}px ${y}px, ${heatColor} 0%, transparent 70%)`;
+      return `radial-gradient(circle ${currentSize * heatIntensity + currentBlur}px at ${x2}px ${y}px, ${heatColor} 0%, transparent 70%)`;
     }
     const gradientSize = currentSize / 2;
     const blurSize = currentBlur;
@@ -92984,19 +93425,19 @@ var SpotlightInternal = ({
         (col, idx) => `${col} ${idx / (gradientColors.length - 1) * 70}%`
       ).join(", ");
       if (currentShape === "ellipse") {
-        return `radial-gradient(ellipse ${gradientSize * 1.5}px ${gradientSize}px at ${x}px ${y}px, ${colorStops}, transparent 70%)`;
+        return `radial-gradient(ellipse ${gradientSize * 1.5}px ${gradientSize}px at ${x2}px ${y}px, ${colorStops}, transparent 70%)`;
       }
-      return `radial-gradient(circle ${gradientSize + blurSize}px at ${x}px ${y}px, ${colorStops}, transparent 70%)`;
+      return `radial-gradient(circle ${gradientSize + blurSize}px at ${x2}px ${y}px, ${colorStops}, transparent 70%)`;
     }
     if (direction !== void 0) {
-      return `conic-gradient(from ${direction + rotation}deg at ${x}px ${y}px, transparent 0deg, ${currentColor} 30deg, transparent 60deg)`;
+      return `conic-gradient(from ${direction + rotation}deg at ${x2}px ${y}px, transparent 0deg, ${currentColor} 30deg, transparent 60deg)`;
     }
     if (currentShape === "ellipse") {
-      return `radial-gradient(ellipse ${gradientSize * 1.5}px ${gradientSize}px at ${x}px ${y}px, ${currentColor} 0%, transparent 50%)`;
+      return `radial-gradient(ellipse ${gradientSize * 1.5}px ${gradientSize}px at ${x2}px ${y}px, ${currentColor} 0%, transparent 50%)`;
     } else if (["polygon", "star", "heart"].includes(currentShape)) {
-      return `radial-gradient(circle ${gradientSize + blurSize}px at ${x}px ${y}px, ${currentColor} 0%, transparent 70%)`;
+      return `radial-gradient(circle ${gradientSize + blurSize}px at ${x2}px ${y}px, ${currentColor} 0%, transparent 70%)`;
     }
-    return `radial-gradient(circle ${gradientSize + blurSize}px at ${x}px ${y}px, ${currentColor} 0%, transparent 70%)`;
+    return `radial-gradient(circle ${gradientSize + blurSize}px at ${x2}px ${y}px, ${currentColor} 0%, transparent 70%)`;
   };
   const createGridOverlay = () => {
     if (!gridOverlay)
@@ -93451,9 +93892,9 @@ var GlowEffectInternal = ({
     if (!mouseTracking || !containerRef.current)
       return;
     const rect = containerRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
+    const x2 = e.clientX - rect.left;
     const y = e.clientY - rect.top;
-    setMousePosition({ x, y });
+    setMousePosition({ x: x2, y });
   }, [mouseTracking]);
   const getMouseGlow = () => {
     if (!mouseTracking || !shouldApplyEffect())
@@ -94288,30 +94729,30 @@ var NumberTickerInternal = ({
   const [hasAnimated, setHasAnimated] = useState(false);
   const elementRef = useRef(null);
   const animationRef = useRef(null);
-  const getEasingFunction = (t) => {
+  const getEasingFunction = (t2) => {
     switch (easing) {
       case "linear":
-        return t;
+        return t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return 1 - Math.pow(1 - t, 2);
+        return 1 - Math.pow(1 - t2, 2);
       case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        return t2 < 0.5 ? 2 * t2 * t2 : 1 - Math.pow(-2 * t2 + 2, 2) / 2;
       case "bounce":
         const n1 = 7.5625;
         const d1 = 2.75;
-        if (t < 1 / d1) {
-          return n1 * t * t;
-        } else if (t < 2 / d1) {
-          return n1 * (t -= 1.5 / d1) * t + 0.75;
-        } else if (t < 2.5 / d1) {
-          return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        if (t2 < 1 / d1) {
+          return n1 * t2 * t2;
+        } else if (t2 < 2 / d1) {
+          return n1 * (t2 -= 1.5 / d1) * t2 + 0.75;
+        } else if (t2 < 2.5 / d1) {
+          return n1 * (t2 -= 2.25 / d1) * t2 + 0.9375;
         } else {
-          return n1 * (t -= 2.625 / d1) * t + 0.984375;
+          return n1 * (t2 -= 2.625 / d1) * t2 + 0.984375;
         }
       default:
-        return t;
+        return t2;
     }
   };
   const formatNumber2 = (num) => {
@@ -95420,9 +95861,9 @@ var MouseTrailInternal = ({
     }
     particlesRef.current = particles;
   }, [length, size4, colors, lifetime]);
-  const drawShape = useCallback((ctx, particle, x, y) => {
+  const drawShape = useCallback((ctx, particle, x2, y) => {
     ctx.save();
-    ctx.translate(x, y);
+    ctx.translate(x2, y);
     if (rotate) {
       ctx.rotate(particle.rotation);
     }
@@ -95660,10 +96101,10 @@ var MouseTrailInternal = ({
     if (!canvas)
       return;
     const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
+    const x2 = e.clientX - rect.left;
     const y = e.clientY - rect.top;
-    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
-      mouseRef.current = { x, y, active: true };
+    if (x2 >= 0 && x2 <= rect.width && y >= 0 && y <= rect.height) {
+      mouseRef.current = { x: x2, y, active: true };
       if (!isActive2) {
         setIsActive(true);
       }
@@ -95679,10 +96120,10 @@ var MouseTrailInternal = ({
       return;
     const rect = canvas.getBoundingClientRect();
     const touch = e.touches[0];
-    const x = touch.clientX - rect.left;
+    const x2 = touch.clientX - rect.left;
     const y = touch.clientY - rect.top;
-    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
-      mouseRef.current = { x, y, active: true };
+    if (x2 >= 0 && x2 <= rect.width && y >= 0 && y <= rect.height) {
+      mouseRef.current = { x: x2, y, active: true };
       if (!isActive2) {
         setIsActive(true);
       }
@@ -96465,40 +96906,40 @@ var BounceEffectInternal = ({
   const [squash, setSquash] = useState({ x: 1, y: 1 });
   useRef({ x: 0, y: 0 });
   const startTimeRef = useRef(0);
-  const getEasing = (t) => {
+  const getEasing = (t2) => {
     switch (easing) {
       case "linear":
-        return t;
+        return t2;
       case "ease":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return t * (2 - t);
+        return t2 * (2 - t2);
       case "bounce":
-        if (t < 0.363636) {
-          return 7.5625 * t * t;
-        } else if (t < 0.727272) {
-          t -= 0.545454;
-          return 7.5625 * t * t + 0.75;
-        } else if (t < 0.90909) {
-          t -= 0.818181;
-          return 7.5625 * t * t + 0.9375;
+        if (t2 < 0.363636) {
+          return 7.5625 * t2 * t2;
+        } else if (t2 < 0.727272) {
+          t2 -= 0.545454;
+          return 7.5625 * t2 * t2 + 0.75;
+        } else if (t2 < 0.90909) {
+          t2 -= 0.818181;
+          return 7.5625 * t2 * t2 + 0.9375;
         } else {
-          t -= 0.954545;
-          return 7.5625 * t * t + 0.984375;
+          t2 -= 0.954545;
+          return 7.5625 * t2 * t2 + 0.984375;
         }
       case "elastic":
-        return t === 0 || t === 1 ? t : -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI);
+        return t2 === 0 || t2 === 1 ? t2 : -Math.pow(2, 10 * (t2 - 1)) * Math.sin((t2 - 1.1) * 5 * Math.PI);
       default:
-        return t;
+        return t2;
     }
   };
   const calculateBounce = useCallback((time) => {
     const elapsed = time - startTimeRef.current;
     const progress = Math.min(elapsed / duration, 1);
     const easedProgress = getEasing(progress);
-    let x = 0, y = 0;
+    let x2 = 0, y = 0;
     switch (direction) {
       case "up":
         y = -distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
@@ -96509,22 +96950,22 @@ var BounceEffectInternal = ({
         y -= gravity * elapsed * elapsed / 1e4;
         break;
       case "left":
-        x = -distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
+        x2 = -distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
         break;
       case "right":
-        x = distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
+        x2 = distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
         break;
       case "all":
         const angle = elapsed * 0.01;
-        x = distance * Math.cos(angle) * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
+        x2 = distance * Math.cos(angle) * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce);
         y = -Math.abs(distance * Math.sin(easedProgress * Math.PI * bounces) * Math.pow(elasticity, currentBounce));
         y += gravity * elapsed * elapsed / 1e4;
         break;
     }
-    x *= friction;
+    x2 *= friction;
     y *= friction;
     if (shake) {
-      x += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
+      x2 += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
       y += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
     }
     if (rotate) {
@@ -96542,9 +96983,9 @@ var BounceEffectInternal = ({
     }
     if (jelly) {
       const jellyOffset = Math.sin(elapsed * 0.02) * jellyIntensity * distance;
-      x += jellyOffset;
+      x2 += jellyOffset;
     }
-    setPosition({ x, y });
+    setPosition({ x: x2, y });
     if (progress >= 1) {
       setCurrentBounce((prev) => prev + 1);
       if (currentBounce >= bounces - 1) {
@@ -96671,7 +97112,7 @@ var BounceEffectInternal = ({
       onMouseEnter: handleMouseEnter,
       onClick: handleClick2,
       children: [
-        trail && isAnimating && Array.from({ length: trailCount }).map((_, i) => /* @__PURE__ */ jsx(
+        trail && isAnimating && Array.from({ length: trailCount }).map((_2, i) => /* @__PURE__ */ jsx(
           "div",
           {
             className: "absolute inset-0 pointer-events-none",
@@ -97210,46 +97651,46 @@ var ElasticAnimationInternal = ({
   const [morphIndex, setMorphIndex] = useState(0);
   const startTimeRef = useRef(0);
   const animationPhaseRef = useRef("main");
-  const getEasingValue = (t) => {
+  const getEasingValue = (t2) => {
     switch (easing) {
       case "linear":
-        return t;
+        return t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return t * (2 - t);
+        return t2 * (2 - t2);
       case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "elastic":
-        if (t === 0 || t === 1)
-          return t;
+        if (t2 === 0 || t2 === 1)
+          return t2;
         const p = 0.3;
         const s = p / 4;
-        return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
+        return Math.pow(2, -10 * t2) * Math.sin((t2 - s) * (2 * Math.PI) / p) + 1;
       case "bounce":
-        if (t < 0.363636) {
-          return 7.5625 * t * t;
-        } else if (t < 0.727272) {
-          t -= 0.545454;
-          return 7.5625 * t * t + 0.75;
-        } else if (t < 0.90909) {
-          t -= 0.818181;
-          return 7.5625 * t * t + 0.9375;
+        if (t2 < 0.363636) {
+          return 7.5625 * t2 * t2;
+        } else if (t2 < 0.727272) {
+          t2 -= 0.545454;
+          return 7.5625 * t2 * t2 + 0.75;
+        } else if (t2 < 0.90909) {
+          t2 -= 0.818181;
+          return 7.5625 * t2 * t2 + 0.9375;
         } else {
-          t -= 0.954545;
-          return 7.5625 * t * t + 0.984375;
+          t2 -= 0.954545;
+          return 7.5625 * t2 * t2 + 0.984375;
         }
       default:
-        return t;
+        return t2;
     }
   };
   const calculateElasticMotion = useCallback((progress) => {
     const elasticProgress = getEasingValue(progress);
-    let x = 0, y = 0, scale = 1, rotate = 0, skewX = 0, skewY = 0;
+    let x2 = 0, y = 0, scale = 1, rotate = 0, skewX = 0, skewY = 0;
     if (direction === "horizontal" || direction === "both") {
-      x = distance * elasticProgress * Math.cos(progress * Math.PI * 2 * oscillationCount);
+      x2 = distance * elasticProgress * Math.cos(progress * Math.PI * 2 * oscillationCount);
       if (oscillate) {
-        x *= Math.pow(1 - progress, damping);
+        x2 *= Math.pow(1 - progress, damping);
       }
     }
     if (direction === "vertical" || direction === "both") {
@@ -97260,17 +97701,17 @@ var ElasticAnimationInternal = ({
     }
     if (direction === "diagonal") {
       const angle = progress * Math.PI * 2 * oscillationCount;
-      x = distance * elasticProgress * Math.cos(angle);
+      x2 = distance * elasticProgress * Math.cos(angle);
       y = distance * elasticProgress * Math.sin(angle);
       if (oscillate) {
         const dampingFactor = Math.pow(1 - progress, damping);
-        x *= dampingFactor;
+        x2 *= dampingFactor;
         y *= dampingFactor;
       }
     }
     if (rubberBand) {
       const rubberProgress = Math.sin(progress * Math.PI);
-      x *= 1 + rubberProgress * rubberBandIntensity;
+      x2 *= 1 + rubberProgress * rubberBandIntensity;
       scale = 1 + rubberProgress * 0.1 * rubberBandIntensity;
     }
     if (jello) {
@@ -97280,7 +97721,7 @@ var ElasticAnimationInternal = ({
     }
     if (morph && morphTargets.length > 0) {
       const target = morphTargets[morphIndex % morphTargets.length];
-      x += target.x * elasticProgress;
+      x2 += target.x * elasticProgress;
       y += target.y * elasticProgress;
       if (target.scale)
         scale *= target.scale;
@@ -97295,12 +97736,12 @@ var ElasticAnimationInternal = ({
       skewX += (stretchX - 1) * 10;
     }
     if (anticipation && animationPhaseRef.current === "anticipation") {
-      x -= anticipationDistance * (1 - progress * 4);
+      x2 -= anticipationDistance * (1 - progress * 4);
       scale *= 0.95 + progress * 0.05;
     }
     if (followThrough && animationPhaseRef.current === "follow-through") {
       const overshoot = Math.sin(progress * Math.PI) * followThroughOvershoot;
-      x *= overshoot;
+      x2 *= overshoot;
       y *= overshoot;
     }
     if (arcMotion) {
@@ -97315,10 +97756,10 @@ var ElasticAnimationInternal = ({
       scale *= 1 + (pulseScale - 1) * pulseProgress * (1 - progress);
     }
     if (shake) {
-      x += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
+      x2 += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
       y += (Math.random() - 0.5) * shakeIntensity * (1 - progress);
     }
-    return { x, y, scale, rotate, skewX, skewY };
+    return { x: x2, y, scale, rotate, skewX, skewY };
   }, [
     direction,
     distance,
@@ -97612,21 +98053,21 @@ var PathAnimationsInternal = ({
       svgRef.current.removeChild(tempPath);
     }
   }, [getPathString]);
-  const getEasingValue = (t) => {
+  const getEasingValue = (t2) => {
     switch (easing) {
       case "linear":
-        return t;
+        return t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return t * (2 - t);
+        return t2 * (2 - t2);
       case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "cubic-bezier":
         const [x1, y1, x2, y2] = cubicBezier;
-        return t * (3 * (1 - t) * (1 - t) * y1 + 3 * (1 - t) * t * y2 + t * t);
+        return t2 * (3 * (1 - t2) * (1 - t2) * y1 + 3 * (1 - t2) * t2 * y2 + t2 * t2);
       default:
-        return t;
+        return t2;
     }
   };
   const calculatePathPosition = useCallback((progress) => {
@@ -98047,21 +98488,21 @@ var SVGAnimationsInternal = ({
       });
     }
   }, [type, drawOptions.fadeIn]);
-  const getEasingValue = (t) => {
+  const getEasingValue = (t2) => {
     switch (easing) {
       case "linear":
-        return t;
+        return t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return t * (2 - t);
+        return t2 * (2 - t2);
       case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "cubic-bezier":
         const [x1, y1, x2, y2] = cubicBezier;
-        return t * (3 * (1 - t) * (1 - t) * y1 + 3 * (1 - t) * t * y2 + t * t);
+        return t2 * (3 * (1 - t2) * (1 - t2) * y1 + 3 * (1 - t2) * t2 * y2 + t2 * t2);
       default:
-        return t;
+        return t2;
     }
   };
   const animateDraw = useCallback((progress) => {
@@ -98797,10 +99238,10 @@ var TouchGesturesInternal = ({
   const getAngle = (p1, p2) => {
     return Math.atan2(p2.currentY - p1.currentY, p2.currentX - p1.currentX) * 180 / Math.PI;
   };
-  const applyBoundaries = useCallback((x, y) => {
+  const applyBoundaries = useCallback((x2, y) => {
     if (!panBoundaries)
-      return { x, y };
-    const bounded = { x, y };
+      return { x: x2, y };
+    const bounded = { x: x2, y };
     if (panBoundaries.left !== void 0) {
       bounded.x = Math.max(panBoundaries.left, bounded.x);
     }
@@ -98881,7 +99322,7 @@ var TouchGesturesInternal = ({
       cancelAnimationFrame(momentumAnimationRef.current);
     }
     if (indicators) {
-      setIndicatorPositions(touchArray.map((t) => ({ x: t.clientX, y: t.clientY })));
+      setIndicatorPositions(touchArray.map((t2) => ({ x: t2.clientX, y: t2.clientY })));
     }
   };
   const handleTouchMove = (e) => {
@@ -98939,7 +99380,7 @@ var TouchGesturesInternal = ({
       clearTimeout(longPressTimerRef.current);
     }
     if (indicators) {
-      setIndicatorPositions(touchArray.map((t) => ({ x: t.clientX, y: t.clientY })));
+      setIndicatorPositions(touchArray.map((t2) => ({ x: t2.clientX, y: t2.clientY })));
     }
   };
   const handleTouchEnd = (e) => {
@@ -99681,22 +100122,22 @@ var ClickAnimationsInternal = ({
       setLongPressTimeout(null);
     }
   }, [longPressTimeout]);
-  const getEasingFunction = useCallback((type, t) => {
+  const getEasingFunction = useCallback((type, t2) => {
     switch (type) {
       case "ease":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "ease-in":
-        return t * t;
+        return t2 * t2;
       case "ease-out":
-        return t * (2 - t);
+        return t2 * (2 - t2);
       case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        return t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2;
       case "bounce":
-        return 1 - Math.pow(1 - t, 3) * Math.cos(t * Math.PI * 4);
+        return 1 - Math.pow(1 - t2, 3) * Math.cos(t2 * Math.PI * 4);
       case "elastic":
-        return t === 0 ? 0 : t === 1 ? 1 : -Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1.1) * 5 * Math.PI);
+        return t2 === 0 ? 0 : t2 === 1 ? 1 : -Math.pow(2, 10 * (t2 - 1)) * Math.sin((t2 - 1.1) * 5 * Math.PI);
       default:
-        return t;
+        return t2;
     }
   }, []);
   const getAnimationStyles = useCallback((animation) => {