@retinalabsllc/zairusjs 5.1.85 → 5.1.90

package/dist/index.js

@@ -290,13 +290,12 @@ var import_navigation = require("next/navigation");
 var NavLink = ({
   href,
   children,
-  className = "",
-  isDarkTheme
+  className = ""
 }) => {
   const pathname = (0, import_navigation.usePathname)();
   const isActive = pathname === href;
-  const activeClass = isDarkTheme ? "text-white" : "text-neutral-900 font-medium";
-  const inactiveClass = isDarkTheme ? "text-neutral-400 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
+  const activeClass = "text-neutral-900 font-medium";
+  const inactiveClass = "text-neutral-500 hover:text-neutral-900";
   return /* @__PURE__ */ import_react5.default.createElement(
     import_link2.default,
     {
@@ -316,71 +315,38 @@ var Header = ({
   hideHeaderText = false,
   compact = false
 }) => {
-  const headerRef = (0, import_react5.useRef)(null);
-  const [isDarkTheme, setIsDarkTheme] = (0, import_react5.useState)(true);
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
-    const checkBackgroundLuminance = () => {
-      if (!headerRef.current) return;
-      const rect = headerRef.current.getBoundingClientRect();
-      const x = rect.left + rect.width / 2;
-      const y = rect.top + rect.height / 2;
-      const elementsAtPoint = document.elementsFromPoint(x, y);
-      let foundDarkBackground = true;
-      for (const el of elementsAtPoint) {
-        if (headerRef.current.contains(el)) continue;
-        const style = window.getComputedStyle(el);
-        const bg = style.backgroundColor;
-        if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-          const rgbMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-          if (rgbMatch) {
-            const r = parseInt(rgbMatch[1], 10);
-            const g = parseInt(rgbMatch[2], 10);
-            const b = parseInt(rgbMatch[3], 10);
-            const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1e3);
-            foundDarkBackground = brightness < 128;
-            break;
-          }
-        }
-      }
-      setIsDarkTheme(foundDarkBackground);
-    };
-    checkBackgroundLuminance();
-    window.addEventListener("scroll", checkBackgroundLuminance, { passive: true });
-    window.addEventListener("resize", checkBackgroundLuminance, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", checkBackgroundLuminance);
-      window.removeEventListener("resize", checkBackgroundLuminance);
-    };
+    setMounted(true);
   }, []);
   const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
   const hasBrandSection = showLogo || !hideHeaderText;
-  const headerBgClass = isDarkTheme ? "bg-black/40" : "bg-white/40";
-  const brandTitleClass = isDarkTheme ? "text-white" : "text-neutral-900";
-  const brandSubtitleClass = isDarkTheme ? "text-neutral-400" : "text-neutral-600";
-  const shouldInvertLogo = isDarkTheme ? invert : !invert;
-  return (
-    // Upgraded to 'fixed' so the smart scroll detection actually follows the user down the page
-    /* @__PURE__ */ import_react5.default.createElement("div", { className: "fixed inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center", ref: headerRef }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
-      import_image.default,
-      {
-        src: logoSrc,
-        alt: `${companyName} Logo`,
-        width: 40,
-        height: 40,
-        className: `object-contain w-8 h-auto transition-all duration-300 ${shouldInvertLogo ? "invert" : ""}`,
-        priority: true
-      }
-    ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center transition-colors duration-300" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
-      NavLink,
-      {
-        key: index,
-        href: link.href,
-        isDarkTheme,
-        className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
-      },
-      link.label
-    ))))))
-  );
+  const headerBgClass = "bg-white/80";
+  const brandTitleClass = "text-neutral-900";
+  const brandSubtitleClass = "text-neutral-500";
+  const shouldInvertLogo = !invert;
+  if (!mounted) {
+    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full h-20 z-50 pointer-events-none px-4 pt-4 sm:pt-6" });
+  }
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
+    import_image.default,
+    {
+      src: logoSrc,
+      alt: `${companyName} Logo`,
+      width: 40,
+      height: 40,
+      className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
+      priority: true
+    }
+  ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
+    NavLink,
+    {
+      key: index,
+      href: link.href,
+      className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
+    },
+    link.label
+  ))))));
 };
 
 // src/components/Footer.tsx
@@ -535,7 +501,7 @@ var HeroSection = ({
     import_link4.default,
     {
       href: secondaryCtaHref,
-      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-black/60 backdrop-blur-md text-center text-white text-xs hover:bg-black/80  outline-none transition-all"
+      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-2.5 border border-neutral-100 text-center text-white  hover:bg-black/80  outline-none transition-all"
     },
     secondaryCtaText
   )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5 " }, appsText), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ import_react8.default.createElement(
@@ -952,7 +918,7 @@ var ManagedPricingBlock = ({
       import_link5.default,
       {
         href: plan.ctaHref,
-        className: "w-full py-2 px-5 rounded-full border border-neutral-100 text-center text-black text-xs hover:bg-neutral-50 transition-colors mb-6 outline-none block"
+        className: "w-full py-2.5 px-5 rounded-full border border-neutral-100 text-center text-black text-xs hover:bg-neutral-50 transition-colors mb-6 outline-none block"
       },
       plan.ctaText
     ),

package/dist/index.mjs

@@ -224,20 +224,19 @@ var ThreeDActionButton = ({
 };
 
 // src/components/Header.tsx
-import React4, { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import React4, { useState as useState2, useEffect as useEffect2 } from "react";
 import Link2 from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 var NavLink = ({
   href,
   children,
-  className = "",
-  isDarkTheme
+  className = ""
 }) => {
   const pathname = usePathname();
   const isActive = pathname === href;
-  const activeClass = isDarkTheme ? "text-white" : "text-neutral-900 font-medium";
-  const inactiveClass = isDarkTheme ? "text-neutral-400 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
+  const activeClass = "text-neutral-900 font-medium";
+  const inactiveClass = "text-neutral-500 hover:text-neutral-900";
   return /* @__PURE__ */ React4.createElement(
     Link2,
     {
@@ -257,71 +256,38 @@ var Header = ({
   hideHeaderText = false,
   compact = false
 }) => {
-  const headerRef = useRef2(null);
-  const [isDarkTheme, setIsDarkTheme] = useState2(true);
+  const [mounted, setMounted] = useState2(false);
   useEffect2(() => {
-    const checkBackgroundLuminance = () => {
-      if (!headerRef.current) return;
-      const rect = headerRef.current.getBoundingClientRect();
-      const x = rect.left + rect.width / 2;
-      const y = rect.top + rect.height / 2;
-      const elementsAtPoint = document.elementsFromPoint(x, y);
-      let foundDarkBackground = true;
-      for (const el of elementsAtPoint) {
-        if (headerRef.current.contains(el)) continue;
-        const style = window.getComputedStyle(el);
-        const bg = style.backgroundColor;
-        if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-          const rgbMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-          if (rgbMatch) {
-            const r = parseInt(rgbMatch[1], 10);
-            const g = parseInt(rgbMatch[2], 10);
-            const b = parseInt(rgbMatch[3], 10);
-            const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1e3);
-            foundDarkBackground = brightness < 128;
-            break;
-          }
-        }
-      }
-      setIsDarkTheme(foundDarkBackground);
-    };
-    checkBackgroundLuminance();
-    window.addEventListener("scroll", checkBackgroundLuminance, { passive: true });
-    window.addEventListener("resize", checkBackgroundLuminance, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", checkBackgroundLuminance);
-      window.removeEventListener("resize", checkBackgroundLuminance);
-    };
+    setMounted(true);
   }, []);
   const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
   const hasBrandSection = showLogo || !hideHeaderText;
-  const headerBgClass = isDarkTheme ? "bg-black/40" : "bg-white/40";
-  const brandTitleClass = isDarkTheme ? "text-white" : "text-neutral-900";
-  const brandSubtitleClass = isDarkTheme ? "text-neutral-400" : "text-neutral-600";
-  const shouldInvertLogo = isDarkTheme ? invert : !invert;
-  return (
-    // Upgraded to 'fixed' so the smart scroll detection actually follows the user down the page
-    /* @__PURE__ */ React4.createElement("div", { className: "fixed inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center", ref: headerRef }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
-      Image,
-      {
-        src: logoSrc,
-        alt: `${companyName} Logo`,
-        width: 40,
-        height: 40,
-        className: `object-contain w-8 h-auto transition-all duration-300 ${shouldInvertLogo ? "invert" : ""}`,
-        priority: true
-      }
-    ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center transition-colors duration-300" }, /* @__PURE__ */ React4.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
-      NavLink,
-      {
-        key: index,
-        href: link.href,
-        isDarkTheme,
-        className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
-      },
-      link.label
-    ))))))
-  );
+  const headerBgClass = "bg-white/80";
+  const brandTitleClass = "text-neutral-900";
+  const brandSubtitleClass = "text-neutral-500";
+  const shouldInvertLogo = !invert;
+  if (!mounted) {
+    return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full h-20 z-50 pointer-events-none px-4 pt-4 sm:pt-6" });
+  }
+  return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
+    Image,
+    {
+      src: logoSrc,
+      alt: `${companyName} Logo`,
+      width: 40,
+      height: 40,
+      className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
+      priority: true
+    }
+  ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React4.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
+    NavLink,
+    {
+      key: index,
+      href: link.href,
+      className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
+    },
+    link.label
+  ))))));
 };
 
 // src/components/Footer.tsx
@@ -374,7 +340,7 @@ var Footer = ({
 };
 
 // src/components/HeroSection.tsx
-import React6, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import React6, { useState as useState4, useEffect as useEffect3, useRef as useRef2 } from "react";
 import Link4 from "next/link";
 import Image2 from "next/image";
 var HeroSection = ({
@@ -396,7 +362,7 @@ var HeroSection = ({
   bgImageSrc
 }) => {
   const [isAnimating, setIsAnimating] = useState4(false);
-  const titleRef = useRef3(null);
+  const titleRef = useRef2(null);
   useEffect3(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -476,7 +442,7 @@ var HeroSection = ({
     Link4,
     {
       href: secondaryCtaHref,
-      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-black/60 backdrop-blur-md text-center text-white text-xs hover:bg-black/80  outline-none transition-all"
+      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-2.5 border border-neutral-100 text-center text-white  hover:bg-black/80  outline-none transition-all"
     },
     secondaryCtaText
   )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ React6.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5 " }, appsText), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ React6.createElement(
@@ -492,11 +458,11 @@ var HeroSection = ({
 };
 
 // src/components/AppBento2.tsx
-import React7, { useState as useState5, useEffect as useEffect4, useRef as useRef4 } from "react";
+import React7, { useState as useState5, useEffect as useEffect4, useRef as useRef3 } from "react";
 import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
 var AppBento2 = ({ tagline, headline, features }) => {
   const [isAnimating, setIsAnimating] = useState5(false);
-  const titleRef = useRef4(null);
+  const titleRef = useRef3(null);
   useEffect4(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -567,7 +533,7 @@ var AppBento2 = ({ tagline, headline, features }) => {
 };
 
 // src/components/FeatureScroll.tsx
-import React8, { useRef as useRef5, useState as useState6, useEffect as useEffect5 } from "react";
+import React8, { useRef as useRef4, useState as useState6, useEffect as useEffect5 } from "react";
 import Image3 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
 import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
@@ -611,7 +577,7 @@ var FeatureCard = ({ feature, bgImage }) => {
   ))), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React8.createElement("h3", { className: "  text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React8.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));
 };
 var FeatureScroll = ({ tagline, headline, features }) => {
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef4(null);
   const [canScrollLeft, setCanScrollLeft] = useState6(false);
   const [canScrollRight, setCanScrollRight] = useState6(true);
   const checkScroll = () => {
@@ -704,7 +670,7 @@ var PlatformFeatures = ({
 };
 
 // src/components/ManagedDocument.tsx
-import React10, { useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
+import React10, { useState as useState7, useEffect as useEffect6, useRef as useRef5 } from "react";
 var ManagedDocument = ({
   tagline,
   title,
@@ -713,7 +679,7 @@ var ManagedDocument = ({
   contactEmail
 }) => {
   const [isAnimating, setIsAnimating] = useState7(false);
-  const titleRef = useRef6(null);
+  const titleRef = useRef5(null);
   useEffect6(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -813,7 +779,7 @@ var ManagedContactBlock = ({
 };
 
 // src/components/ManagedPricingBlock.tsx
-import React12, { useState as useState9, useEffect as useEffect8, useRef as useRef7 } from "react";
+import React12, { useState as useState9, useEffect as useEffect8, useRef as useRef6 } from "react";
 import Link5 from "next/link";
 import Image4 from "next/image";
 var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React12.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -826,7 +792,7 @@ var ManagedPricingBlock = ({
 }) => {
   const [isAnimating, setIsAnimating] = useState9(false);
   const [activeTabIndex, setActiveTabIndex] = useState9(0);
-  const titleRef = useRef7(null);
+  const titleRef = useRef6(null);
   useEffect8(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -893,7 +859,7 @@ var ManagedPricingBlock = ({
       Link5,
       {
         href: plan.ctaHref,
-        className: "w-full py-2 px-5 rounded-full border border-neutral-100 text-center text-black text-xs hover:bg-neutral-50 transition-colors mb-6 outline-none block"
+        className: "w-full py-2.5 px-5 rounded-full border border-neutral-100 text-center text-black text-xs hover:bg-neutral-50 transition-colors mb-6 outline-none block"
       },
       plan.ctaText
     ),
@@ -1150,13 +1116,13 @@ var NumberInput = ({
 ));
 
 // src/components/PortfolioHero.tsx
-import React19, { useEffect as useEffect9, useRef as useRef8 } from "react";
+import React19, { useEffect as useEffect9, useRef as useRef7 } from "react";
 import Link6 from "next/link";
 import Image7 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react";
 import { ArrowRight01Icon as ArrowRight01Icon2 } from "@hugeicons/core-free-icons";
 var useScrollAnimation = () => {
-  const elementRef = useRef8(null);
+  const elementRef = useRef7(null);
   useEffect9(() => {
     const el = elementRef.current;
     if (!el) return;
@@ -1285,7 +1251,7 @@ var GifFeatureCard = ({
 };
 
 // src/components/MedicalFeatureStatsBlock.tsx
-import React21, { useState as useState11, useEffect as useEffect10, useRef as useRef9 } from "react";
+import React21, { useState as useState11, useEffect as useEffect10, useRef as useRef8 } from "react";
 import Image9 from "next/image";
 var MedicalFeatureStatsBlock = ({
   bottomHeadline,
@@ -1295,7 +1261,7 @@ var MedicalFeatureStatsBlock = ({
   stats
 }) => {
   const [isAnimating, setIsAnimating] = useState11(false);
-  const titleRef = useRef9(null);
+  const titleRef = useRef8(null);
   useEffect10(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "5.1.85",
+  "version": "5.1.90",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",