@retinalabsllc/zairusjs 16.3.5 → 17.1.0

package/dist/index.js

@@ -2883,33 +2883,63 @@ var HeroSection = ({
 var import_react46 = __toESM(require("react"));
 var import_react47 = require("@hugeicons/react");
 var AppBento2 = ({ tagline, headline, features }) => {
+  const [isAnimating, setIsAnimating] = (0, import_react46.useState)(false);
+  const titleRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          if (entry.boundingClientRect.top > 0) {
+            setIsAnimating(true);
+          }
+        } else {
+          setIsAnimating(false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (titleRef.current) {
+      observer.observe(titleRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full py-16" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative overflow-hidden mb-12 text-left" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4 " }, tagline), /* @__PURE__ */ import_react46.default.createElement(
     "h2",
     {
-      className: "text-3xl tracking-tight text-black leading-[1.1]"
+      ref: titleRef,
+      className: ` text-3xl  tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
+      style: isAnimating ? { animationIterationCount: 1 } : {}
     },
     headline
   ))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
     const isWhite = i === 0;
-    const isBrand = i === 1;
+    const isBlack = i === 1;
     const isNeutral = i === 2;
     const getBgStyle = () => {
-      if (isWhite) return "bg-white ";
-      if (isBrand) return "bg-[#068afe] ";
-      if (isNeutral) return "bg-neutral-200 ";
-      return "bg-white ";
+      if (isWhite) return "bg-white";
+      if (isBlack) return "bg-[#068afe]";
+      if (isNeutral) return "bg-neutral-200";
+      return "bg-neutral-200";
     };
-    const textColor = isBrand ? "text-white" : "text-black";
-    const subTextColor = isBrand ? "text-white/80" : "text-neutral-600";
-    const labelColor = isBrand ? "text-white/70" : "text-neutral-500";
+    const textColor = isBlack ? "text-white" : "text-black";
+    const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
+    const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
     return /* @__PURE__ */ import_react46.default.createElement(
       "div",
       {
         key: i,
-        className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-300 group text-left ${getBgStyle()}`
+        className: `relative rounded-4xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`
       },
-      /* @__PURE__ */ import_react46.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBrand ? "text-white/10" : "text-black/5"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 180 }))),
-      /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ import_react46.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isBrand ? "bg-white/20" : "bg-neutral-100"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ import_react46.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
+      /* @__PURE__ */ import_react46.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
+          style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
+        }
+      ),
+      isBlack && /* @__PURE__ */ import_react46.default.createElement("span", { className: "absolute inset-0 rounded-4xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" }),
+      /* @__PURE__ */ import_react46.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBlack ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 180 }))),
+      /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: `text-[9px]  tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ import_react46.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: `text-xl  mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ import_react46.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
     );
   })))));
 };

package/dist/index.mjs

@@ -2873,42 +2873,72 @@ var HeroSection = ({
 };
 
 // src/components/AppBento2.tsx
-import React27 from "react";
+import React27, { useState as useState20, useEffect as useEffect11, useRef as useRef6 } from "react";
 import { HugeiconsIcon as HugeiconsIcon20 } from "@hugeicons/react";
 var AppBento2 = ({ tagline, headline, features }) => {
+  const [isAnimating, setIsAnimating] = useState20(false);
+  const titleRef = useRef6(null);
+  useEffect11(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          if (entry.boundingClientRect.top > 0) {
+            setIsAnimating(true);
+          }
+        } else {
+          setIsAnimating(false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (titleRef.current) {
+      observer.observe(titleRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ React27.createElement("div", { className: "w-full py-16" }, /* @__PURE__ */ React27.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ React27.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ React27.createElement("div", { className: "relative overflow-hidden mb-12 text-left" }, /* @__PURE__ */ React27.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4 " }, tagline), /* @__PURE__ */ React27.createElement(
     "h2",
     {
-      className: "text-3xl tracking-tight text-black leading-[1.1]"
+      ref: titleRef,
+      className: ` text-3xl  tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
+      style: isAnimating ? { animationIterationCount: 1 } : {}
     },
     headline
   ))), /* @__PURE__ */ React27.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
     const isWhite = i === 0;
-    const isBrand = i === 1;
+    const isBlack = i === 1;
     const isNeutral = i === 2;
     const getBgStyle = () => {
-      if (isWhite) return "bg-white ";
-      if (isBrand) return "bg-[#068afe] ";
-      if (isNeutral) return "bg-neutral-200 ";
-      return "bg-white ";
+      if (isWhite) return "bg-white";
+      if (isBlack) return "bg-[#068afe]";
+      if (isNeutral) return "bg-neutral-200";
+      return "bg-neutral-200";
     };
-    const textColor = isBrand ? "text-white" : "text-black";
-    const subTextColor = isBrand ? "text-white/80" : "text-neutral-600";
-    const labelColor = isBrand ? "text-white/70" : "text-neutral-500";
+    const textColor = isBlack ? "text-white" : "text-black";
+    const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
+    const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
     return /* @__PURE__ */ React27.createElement(
       "div",
       {
         key: i,
-        className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-300 group text-left ${getBgStyle()}`
+        className: `relative rounded-4xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`
       },
-      /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React27.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBrand ? "text-white/10" : "text-black/5"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 180 }))),
-      /* @__PURE__ */ React27.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React27.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React27.createElement("div", { className: `p-2 rounded-full transition-colors ${isBrand ? "bg-white/20" : "bg-neutral-100"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React27.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React27.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React27.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
+      /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
+          style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
+        }
+      ),
+      isBlack && /* @__PURE__ */ React27.createElement("span", { className: "absolute inset-0 rounded-4xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" }),
+      /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React27.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBlack ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 180 }))),
+      /* @__PURE__ */ React27.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React27.createElement("span", { className: `text-[9px]  tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React27.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React27.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React27.createElement("h3", { className: `text-xl  mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React27.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
     );
   })))));
 };
 
 // src/components/UniversalSecurityPage.tsx
-import React28, { useState as useState20 } from "react";
+import React28, { useState as useState21 } from "react";
 import toast8 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon21 } from "@hugeicons/react";
 import {
@@ -2931,13 +2961,13 @@ var UniversalSecurityPage = ({
   onVerifyAndEnablePasskey,
   onDisablePasskey
 }) => {
-  const [showPasskeyModal, setShowPasskeyModal] = useState20(false);
-  const [isSubmitting, setIsSubmitting] = useState20(false);
-  const [isPasscodeModalOpen, setIsPasscodeModalOpen] = useState20(false);
-  const [oldPasscode, setOldPasscode] = useState20("");
-  const [newPasscode, setNewPasscode] = useState20("");
-  const [confirmPasscode, setConfirmPasscode] = useState20("");
-  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = useState20(false);
+  const [showPasskeyModal, setShowPasskeyModal] = useState21(false);
+  const [isSubmitting, setIsSubmitting] = useState21(false);
+  const [isPasscodeModalOpen, setIsPasscodeModalOpen] = useState21(false);
+  const [oldPasscode, setOldPasscode] = useState21("");
+  const [newPasscode, setNewPasscode] = useState21("");
+  const [confirmPasscode, setConfirmPasscode] = useState21("");
+  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = useState21(false);
   const handleTogglePasskey = () => {
     if (isPasskeyLoading) return;
     if (hasPasskey) {
@@ -3114,13 +3144,13 @@ var MenuRow3 = ({
 );
 
 // src/components/FeatureScroll.tsx
-import React29, { useRef as useRef6, useState as useState21, useEffect as useEffect11 } from "react";
+import React29, { useRef as useRef7, useState as useState22, useEffect as useEffect12 } from "react";
 import Image4 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon22 } from "@hugeicons/react";
 import { ArrowLeft01Icon as ArrowLeft01Icon9, ArrowRight01Icon as ArrowRight01Icon8, Loading03Icon as Loading03Icon13 } from "@hugeicons/core-free-icons";
 var FeatureCard = ({ feature, bgImage }) => {
-  const [isBgLoading, setIsBgLoading] = useState21(true);
-  const [isFgLoading, setIsFgLoading] = useState21(!!feature.image);
+  const [isBgLoading, setIsBgLoading] = useState22(true);
+  const [isFgLoading, setIsFgLoading] = useState22(!!feature.image);
   return /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React29.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(
     Image4,
     {
@@ -3158,9 +3188,9 @@ var FeatureCard = ({ feature, bgImage }) => {
   ))), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React29.createElement("h3", { className: "  text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React29.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));
 };
 var FeatureScroll = ({ tagline, headline, features }) => {
-  const scrollRef = useRef6(null);
-  const [canScrollLeft, setCanScrollLeft] = useState21(false);
-  const [canScrollRight, setCanScrollRight] = useState21(true);
+  const scrollRef = useRef7(null);
+  const [canScrollLeft, setCanScrollLeft] = useState22(false);
+  const [canScrollRight, setCanScrollRight] = useState22(true);
   const checkScroll = () => {
     if (scrollRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
@@ -3168,7 +3198,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
       setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 2);
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     checkScroll();
     window.addEventListener("resize", checkScroll);
     return () => window.removeEventListener("resize", checkScroll);
@@ -3249,7 +3279,7 @@ var PlatformFeatures = ({
 };
 
 // src/components/ManagedDocument.tsx
-import React31, { useState as useState22, useEffect as useEffect12, useRef as useRef7 } from "react";
+import React31, { useState as useState23, useEffect as useEffect13, useRef as useRef8 } from "react";
 var ManagedDocument = ({
   tagline,
   title,
@@ -3257,9 +3287,9 @@ var ManagedDocument = ({
   contactText,
   contactEmail
 }) => {
-  const [isAnimating, setIsAnimating] = useState22(false);
-  const titleRef = useRef7(null);
-  useEffect12(() => {
+  const [isAnimating, setIsAnimating] = useState23(false);
+  const titleRef = useRef8(null);
+  useEffect13(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3299,11 +3329,11 @@ var ManagedDocument = ({
 };
 
 // src/components/ManagedContactBlock.tsx
-import React32, { useState as useState23, useEffect as useEffect13 } from "react";
+import React32, { useState as useState24, useEffect as useEffect14 } from "react";
 import { HugeiconsIcon as HugeiconsIcon24 } from "@hugeicons/react";
 var SecureEmail = ({ user, domain, className }) => {
-  const [isMounted, setIsMounted] = useState23(false);
-  useEffect13(() => {
+  const [isMounted, setIsMounted] = useState24(false);
+  useEffect14(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) {
@@ -3364,7 +3394,7 @@ var ManagedContactBlock = ({
 };
 
 // src/components/ManagedPricingBlock.tsx
-import React33, { useState as useState24, useEffect as useEffect14, useRef as useRef8 } from "react";
+import React33, { useState as useState25, useEffect as useEffect15, useRef as useRef9 } from "react";
 import Link7 from "next/link";
 import Image5 from "next/image";
 var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React33.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__ */ React33.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React33.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -3375,10 +3405,10 @@ var ManagedPricingBlock = ({
   plans = [],
   tabs
 }) => {
-  const [isAnimating, setIsAnimating] = useState24(false);
-  const [activeTabIndex, setActiveTabIndex] = useState24(0);
-  const titleRef = useRef8(null);
-  useEffect14(() => {
+  const [isAnimating, setIsAnimating] = useState25(false);
+  const [activeTabIndex, setActiveTabIndex] = useState25(0);
+  const titleRef = useRef9(null);
+  useEffect15(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3593,14 +3623,14 @@ var ManagedNewsletterSplitBlock = ({
 };
 
 // src/components/PortfolioHero.tsx
-import React37, { useEffect as useEffect15, useRef as useRef9 } from "react";
+import React37, { useEffect as useEffect16, useRef as useRef10 } from "react";
 import Link8 from "next/link";
 import Image8 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon26 } from "@hugeicons/react";
 import { ArrowRight01Icon as ArrowRight01Icon9 } from "@hugeicons/core-free-icons";
 var useScrollAnimation = () => {
-  const elementRef = useRef9(null);
-  useEffect15(() => {
+  const elementRef = useRef10(null);
+  useEffect16(() => {
     const el = elementRef.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -3684,7 +3714,7 @@ var PortfolioHero = ({
 };
 
 // src/components/GifFeatureCard.tsx
-import React38, { useState as useState25 } from "react";
+import React38, { useState as useState26 } from "react";
 import Image9 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon27 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon14 } from "@hugeicons/core-free-icons";
@@ -3695,7 +3725,7 @@ var GifFeatureCard = ({
   alt = "Feature animation",
   className = "aspect-video"
 }) => {
-  const [isLoading, setIsLoading] = useState25(true);
+  const [isLoading, setIsLoading] = useState26(true);
   return /* @__PURE__ */ React38.createElement("div", { className: `relative w-full bg-black  overflow-hidden shadow-2xl ${className}` }, isLoading && /* @__PURE__ */ React38.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-black" }, /* @__PURE__ */ React38.createElement(
     HugeiconsIcon27,
     {
@@ -3728,7 +3758,7 @@ var GifFeatureCard = ({
 };
 
 // src/components/MedicalFeatureStatsBlock.tsx
-import React39, { useState as useState26, useEffect as useEffect16, useRef as useRef10 } from "react";
+import React39, { useState as useState27, useEffect as useEffect17, useRef as useRef11 } from "react";
 import Image10 from "next/image";
 var MedicalFeatureStatsBlock = ({
   bottomHeadline,
@@ -3737,9 +3767,9 @@ var MedicalFeatureStatsBlock = ({
   trustText,
   stats
 }) => {
-  const [isAnimating, setIsAnimating] = useState26(false);
-  const titleRef = useRef10(null);
-  useEffect16(() => {
+  const [isAnimating, setIsAnimating] = useState27(false);
+  const titleRef = useRef11(null);
+  useEffect17(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3778,12 +3808,12 @@ var MedicalFeatureStatsBlock = ({
 };
 
 // src/components/ConsultantShowcase.tsx
-import React40, { useState as useState27 } from "react";
+import React40, { useState as useState28 } from "react";
 import Image11 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon28 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon15 } from "@hugeicons/core-free-icons";
 var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
-  const [isLoading, setIsLoading] = useState27(true);
+  const [isLoading, setIsLoading] = useState28(true);
   return /* @__PURE__ */ React40.createElement("div", { className: `absolute inset-0 bg-neutral-800 ${className}` }, isLoading && /* @__PURE__ */ React40.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-800/50 backdrop-blur-md transition-opacity duration-300" }, /* @__PURE__ */ React40.createElement(HugeiconsIcon28, { icon: Loading03Icon15, size: 24, className: "animate-spin text-white/50" })), /* @__PURE__ */ React40.createElement(
     Image11,
     {
@@ -3803,9 +3833,9 @@ var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
 var ConsultantShowcase = ({
   profiles
 }) => {
-  const [currentIndex, setCurrentIndex] = useState27(0);
-  const [touchStart, setTouchStart] = useState27(null);
-  const [touchEnd, setTouchEnd] = useState27(null);
+  const [currentIndex, setCurrentIndex] = useState28(0);
+  const [touchStart, setTouchStart] = useState28(null);
+  const [touchEnd, setTouchEnd] = useState28(null);
   const nextSlide = () => {
     setCurrentIndex((prev) => prev === profiles.length - 1 ? 0 : prev + 1);
   };
@@ -3873,7 +3903,7 @@ var ConsultantShowcase = ({
 };
 
 // src/components/ContentGridBlock.tsx
-import React41, { useState as useState28 } from "react";
+import React41, { useState as useState29 } from "react";
 import Image12 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon29 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon16 } from "@hugeicons/core-free-icons";
@@ -4065,7 +4095,7 @@ var UniversalVerificationPage = ({
 };
 
 // src/components/UniversalRewardPage.tsx
-import React44, { useState as useState29 } from "react";
+import React44, { useState as useState30 } from "react";
 import axios from "axios";
 import toast9 from "react-hot-toast";
 import Confetti from "react-confetti";
@@ -4082,7 +4112,7 @@ var formatWeb3Name = (name) => {
 };
 var PageSpinner4 = () => /* @__PURE__ */ React44.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon31, { icon: Loading03Icon18, size: 32, className: "animate-spin mb-4 text-black" }));
 var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
-  const [isLoaded, setIsLoaded] = useState29(false);
+  const [isLoaded, setIsLoaded] = useState30(false);
   const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=100&font-size=0.33`;
   const finalSrc = src || fallbackUrl;
   return /* @__PURE__ */ React44.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white  ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React44.createElement(HugeiconsIcon31, { icon: Loading03Icon18, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React44.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
@@ -4100,11 +4130,11 @@ var UniversalRewardPage = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [activeTabIndex, setActiveTabIndex] = useState29(1);
+  const [activeTabIndex, setActiveTabIndex] = useState30(1);
   const tabs = [{ label: "Today" }, { label: "Week" }, { label: "Month" }];
-  const [selectedReward, setSelectedReward] = useState29(null);
-  const [isClaiming, setIsClaiming] = useState29(false);
-  const [showConfetti, setShowConfetti] = useState29(false);
+  const [selectedReward, setSelectedReward] = useState30(null);
+  const [isClaiming, setIsClaiming] = useState30(false);
+  const [showConfetti, setShowConfetti] = useState30(false);
   const getActiveLeaderboard = () => {
     if (activeTabIndex === 0) return leaderboardToday || [];
     if (activeTabIndex === 1) return leaderboardWeek || [];
@@ -4179,7 +4209,7 @@ var UniversalRewardPage = ({
 };
 
 // src/components/UniversalReferralPage.tsx
-import React45, { useState as useState30 } from "react";
+import React45, { useState as useState31 } from "react";
 import toast10 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon32 } from "@hugeicons/react";
 import {
@@ -4220,7 +4250,7 @@ var UniversalReferralPage = ({
     }
   };
   const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
-    const [isLoaded, setIsLoaded] = useState30(false);
+    const [isLoaded, setIsLoaded] = useState31(false);
     const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=e0e0e0&color=000000&size=100&font-size=0.33`;
     const finalSrc = src || fallbackUrl;
     return /* @__PURE__ */ React45.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React45.createElement(HugeiconsIcon32, { icon: Loading03Icon19, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React45.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
@@ -4268,7 +4298,7 @@ var UniversalReferralPage = ({
 };
 
 // src/components/UniversalCardActionPage.tsx
-import React46, { useState as useState31 } from "react";
+import React46, { useState as useState32 } from "react";
 import Confetti2 from "react-confetti";
 import { useWindowSize as useWindowSize2 } from "react-use";
 import { HugeiconsIcon as HugeiconsIcon33 } from "@hugeicons/react";
@@ -4319,10 +4349,10 @@ var UniversalCardActionPage = ({
     if (typeof window !== "undefined") window.history.back();
   });
   const { width, height } = useWindowSize2();
-  const [selectedTier, setSelectedTier] = useState31(null);
-  const [intendedAction, setIntendedAction] = useState31(null);
-  const [isProcessing, setIsProcessing] = useState31(false);
-  const [showConfetti, setShowConfetti] = useState31(false);
+  const [selectedTier, setSelectedTier] = useState32(null);
+  const [intendedAction, setIntendedAction] = useState32(null);
+  const [isProcessing, setIsProcessing] = useState32(false);
+  const [showConfetti, setShowConfetti] = useState32(false);
   const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
   const handleTierClick = (tier, explicitAction) => {
     setSelectedTier(tier);
@@ -4462,7 +4492,7 @@ var UniversalCardActionPage = ({
 };
 
 // src/components/PinDialerBottomSheet.tsx
-import React47, { useState as useState32, useEffect as useEffect17 } from "react";
+import React47, { useState as useState33, useEffect as useEffect18 } from "react";
 import { HugeiconsIcon as HugeiconsIcon34 } from "@hugeicons/react";
 import { CancelCircleIcon as CancelCircleIcon10 } from "@hugeicons/core-free-icons";
 var PinDialerBottomSheet = ({
@@ -4472,8 +4502,8 @@ var PinDialerBottomSheet = ({
   onClose,
   onComplete
 }) => {
-  const [pin, setPin] = useState32("");
-  useEffect17(() => {
+  const [pin, setPin] = useState33("");
+  useEffect18(() => {
     setPin("");
   }, [isOpen]);
   const handleSubmit = (e) => {
@@ -4524,7 +4554,7 @@ var PinDialerBottomSheet = ({
 };
 
 // src/components/UniversalBuyCryptoPage.tsx
-import React48, { useState as useState33, useEffect as useEffect18, useRef as useRef11, useCallback } from "react";
+import React48, { useState as useState34, useEffect as useEffect19, useRef as useRef12, useCallback } from "react";
 import toast11 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
 import {
@@ -4532,8 +4562,8 @@ import {
   CheckmarkCircle02Icon
 } from "@hugeicons/core-free-icons";
 var CircularLogo = ({ src, alt, fallbackText }) => {
-  const [isLoaded, setIsLoaded] = useState33(false);
-  const [hasError, setHasError] = useState33(false);
+  const [isLoaded, setIsLoaded] = useState34(false);
+  const [hasError, setHasError] = useState34(false);
   return /* @__PURE__ */ React48.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden bg-neutral-100 flex items-center justify-center shrink-0" }, !hasError && src ? /* @__PURE__ */ React48.createElement(React48.Fragment, null, !isLoaded && /* @__PURE__ */ React48.createElement("div", { className: "absolute inset-0 bg-neutral-200 animate-pulse" }), /* @__PURE__ */ React48.createElement(
     "img",
     {
@@ -4583,33 +4613,33 @@ var UniversalBuyCryptoPage = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [selectedCrypto, setSelectedCrypto] = useState33(() => {
+  const [selectedCrypto, setSelectedCrypto] = useState34(() => {
     if (defaultCryptoCode) {
       const found = cryptoOptions.find((c) => c.code === defaultCryptoCode);
       if (found) return found;
     }
     return cryptoOptions[0];
   });
-  const [selectedNetwork, setSelectedNetwork] = useState33(() => {
+  const [selectedNetwork, setSelectedNetwork] = useState34(() => {
     if (defaultNetworkId && selectedCrypto?.networks) {
       const foundNet = selectedCrypto.networks.find((n) => n.id === defaultNetworkId);
       if (foundNet) return foundNet;
     }
     return selectedCrypto?.networks?.[0] || { id: "polygon", name: "Polygon", symbol: "POLYGON" };
   });
-  const [fiatAmount, setFiatAmount] = useState33("");
-  const [cryptoAmount, setCryptoAmount] = useState33("");
-  const [activeSource, setActiveSource] = useState33("FIAT");
-  const [isCalculating, setIsCalculating] = useState33(false);
-  const [rateDisplay, setRateDisplay] = useState33(null);
-  const [currentRateKey, setCurrentRateKey] = useState33(null);
-  const [recipientAddress, setRecipientAddress] = useState33(defaultRecipientAddress);
-  const [isAddressValid, setIsAddressValid] = useState33(false);
-  const [isCryptoDialogOpen, setIsCryptoDialogOpen] = useState33(false);
-  const [isNetworkDialogOpen, setIsNetworkDialogOpen] = useState33(false);
-  const [isSubmitting, setIsSubmitting] = useState33(false);
-  const debounceTimerRef = useRef11(null);
-  useEffect18(() => {
+  const [fiatAmount, setFiatAmount] = useState34("");
+  const [cryptoAmount, setCryptoAmount] = useState34("");
+  const [activeSource, setActiveSource] = useState34("FIAT");
+  const [isCalculating, setIsCalculating] = useState34(false);
+  const [rateDisplay, setRateDisplay] = useState34(null);
+  const [currentRateKey, setCurrentRateKey] = useState34(null);
+  const [recipientAddress, setRecipientAddress] = useState34(defaultRecipientAddress);
+  const [isAddressValid, setIsAddressValid] = useState34(false);
+  const [isCryptoDialogOpen, setIsCryptoDialogOpen] = useState34(false);
+  const [isNetworkDialogOpen, setIsNetworkDialogOpen] = useState34(false);
+  const [isSubmitting, setIsSubmitting] = useState34(false);
+  const debounceTimerRef = useRef12(null);
+  useEffect19(() => {
     if (selectedCrypto?.networks?.length > 0) {
       const exists = selectedCrypto.networks.find((n) => n.id === selectedNetwork.id);
       if (!exists) {
@@ -4617,7 +4647,7 @@ var UniversalBuyCryptoPage = ({
       }
     }
   }, [selectedCrypto]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!recipientAddress.trim()) {
       setIsAddressValid(false);
       return;
@@ -4805,7 +4835,7 @@ var UniversalBuyCryptoPage = ({
 };
 
 // src/components/UniversalHuddlesPage.tsx
-import React49, { useState as useState34 } from "react";
+import React49, { useState as useState35 } from "react";
 import { HugeiconsIcon as HugeiconsIcon36 } from "@hugeicons/react";
 import {
   ArrowLeft01Icon as ArrowLeft01Icon15,
@@ -4813,8 +4843,8 @@ import {
   Loading03Icon as Loading03Icon22
 } from "@hugeicons/core-free-icons";
 var HuddleAvatar = ({ src, status, sizeClass = "w-10 h-10" }) => {
-  const [loaded, setLoaded] = useState34(false);
-  const [error, setError] = useState34(false);
+  const [loaded, setLoaded] = useState35(false);
+  const [error, setError] = useState35(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default_a.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   const getStatusColor = () => {
@@ -4891,7 +4921,7 @@ var UniversalHuddlesPage = ({
 };
 
 // src/components/UniversalMembersPage.tsx
-import React50, { useState as useState35, useEffect as useEffect19, useRef as useRef12 } from "react";
+import React50, { useState as useState36, useEffect as useEffect20, useRef as useRef13 } from "react";
 import { HugeiconsIcon as HugeiconsIcon37 } from "@hugeicons/react";
 import toast12 from "react-hot-toast";
 import {
@@ -4903,8 +4933,8 @@ import {
   ListSettingIcon as ListSettingIcon2
 } from "@hugeicons/core-free-icons";
 var MemberAvatar2 = ({ src, status }) => {
-  const [loaded, setLoaded] = useState35(false);
-  const [error, setError] = useState35(false);
+  const [loaded, setLoaded] = useState36(false);
+  const [error, setError] = useState36(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   const getStatusColor = () => {
@@ -4952,20 +4982,20 @@ var UniversalMembersPage = ({
   onRemoveMember,
   onInviteMember
 }) => {
-  const [expandedId, setExpandedId] = useState35(null);
-  const [memberToRemove, setMemberToRemove] = useState35(null);
-  const [isRemoving, setIsRemoving] = useState35(false);
-  const [isInviteMode, setIsInviteMode] = useState35(false);
-  const [inviteEmail, setInviteEmail] = useState35("");
-  const [isInviting, setIsInviting] = useState35(false);
-  const [localSearchQuery, setLocalSearchQuery] = useState35(searchQuery);
-  const [isTyping, setIsTyping] = useState35(false);
-  const [isStatusModalOpen, setIsStatusModalOpen] = useState35(false);
-  const [isRoleModalOpen, setIsRoleModalOpen] = useState35(false);
-  const statusDropdownRef = useRef12(null);
-  const roleDropdownRef = useRef12(null);
+  const [expandedId, setExpandedId] = useState36(null);
+  const [memberToRemove, setMemberToRemove] = useState36(null);
+  const [isRemoving, setIsRemoving] = useState36(false);
+  const [isInviteMode, setIsInviteMode] = useState36(false);
+  const [inviteEmail, setInviteEmail] = useState36("");
+  const [isInviting, setIsInviting] = useState36(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState36(searchQuery);
+  const [isTyping, setIsTyping] = useState36(false);
+  const [isStatusModalOpen, setIsStatusModalOpen] = useState36(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = useState36(false);
+  const statusDropdownRef = useRef13(null);
+  const roleDropdownRef = useRef13(null);
   const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
-  useEffect19(() => {
+  useEffect20(() => {
     function handleClickOutside(event) {
       if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) {
         setIsStatusModalOpen(false);
@@ -4977,7 +5007,7 @@ var UniversalMembersPage = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     setIsTyping(true);
     const handler = setTimeout(() => {
       onSearchChange(localSearchQuery);
@@ -4985,7 +5015,7 @@ var UniversalMembersPage = ({
     }, 600);
     return () => clearTimeout(handler);
   }, [localSearchQuery, onSearchChange]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (searchQuery === "" && localSearchQuery !== "") {
       setLocalSearchQuery("");
     }
@@ -5157,7 +5187,7 @@ var UniversalMembersPage = ({
 };
 
 // src/components/UniversalHome2.tsx
-import React51, { useState as useState36 } from "react";
+import React51, { useState as useState37 } from "react";
 import { useRouter as useRouter3 } from "next/navigation";
 import { HugeiconsIcon as HugeiconsIcon38 } from "@hugeicons/react";
 import toast13 from "react-hot-toast";
@@ -5173,8 +5203,8 @@ import {
   Tick02Icon as Tick02Icon2
 } from "@hugeicons/core-free-icons";
 var OrgAvatar = ({ src, sizeClass = "w-10 h-10" }) => {
-  const [loaded, setLoaded] = useState36(false);
-  const [error, setError] = useState36(false);
+  const [loaded, setLoaded] = useState37(false);
+  const [error, setError] = useState37(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office_a.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   return /* @__PURE__ */ React51.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React51.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React51.createElement(HugeiconsIcon38, { icon: Loading03Icon24, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React51.createElement(
@@ -5207,13 +5237,13 @@ var UniversalHome2 = ({
   huddlesProps,
   onLogout
 }) => {
-  const [isAvatarLoaded, setIsAvatarLoaded] = useState36(false);
-  const [showNotifDialog, setShowNotifDialog] = useState36(false);
-  const [showOrgSwitcher, setShowOrgSwitcher] = useState36(false);
-  const [selectedNotif, setSelectedNotif] = useState36(null);
-  const [isResolving, setIsResolving] = useState36(false);
-  const [showLogoutConfirm, setShowLogoutConfirm] = useState36(false);
-  const [isLoggingOut, setIsLoggingOut] = useState36(false);
+  const [isAvatarLoaded, setIsAvatarLoaded] = useState37(false);
+  const [showNotifDialog, setShowNotifDialog] = useState37(false);
+  const [showOrgSwitcher, setShowOrgSwitcher] = useState37(false);
+  const [selectedNotif, setSelectedNotif] = useState37(null);
+  const [isResolving, setIsResolving] = useState37(false);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState37(false);
+  const [isLoggingOut, setIsLoggingOut] = useState37(false);
   const router = useRouter3();
   const fallbackAvatarUrl = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
@@ -5386,7 +5416,7 @@ var UniversalHome2 = ({
 };
 
 // src/components/UniversalSettings.tsx
-import React52, { useState as useState37, useEffect as useEffect20, useRef as useRef13 } from "react";
+import React52, { useState as useState38, useEffect as useEffect21, useRef as useRef14 } from "react";
 import toast14 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon39 } from "@hugeicons/react";
 import {
@@ -5401,8 +5431,8 @@ import {
   PlusSignIcon as PlusSignIcon3
 } from "@hugeicons/core-free-icons";
 var MemberAvatar3 = ({ src, status, sizeClass = "w-10 h-10" }) => {
-  const [loaded, setLoaded] = useState37(false);
-  const [error, setError] = useState37(false);
+  const [loaded, setLoaded] = useState38(false);
+  const [error, setError] = useState38(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   const getStatusColor = () => {
@@ -5461,36 +5491,36 @@ var UniversalSettings = ({
   });
   const isOrg = accountType === "ORGANIZATION";
   const canManage = userRole === "ADMIN" || userRole === "MANAGER";
-  const [activeTab, setActiveTab] = useState37(isOrg ? "MEMBERS" : "ACCOUNT");
-  const [expandedId, setExpandedId] = useState37(null);
-  const [memberToRemove, setMemberToRemove] = useState37(null);
-  const [isRemoving, setIsRemoving] = useState37(false);
-  const [isInviteMode, setIsInviteMode] = useState37(false);
-  const [inviteEmail, setInviteEmail] = useState37("");
-  const [isInviting, setIsInviting] = useState37(false);
-  const [localSearchQuery, setLocalSearchQuery] = useState37(membersSearchQuery);
-  const [isTyping, setIsTyping] = useState37(false);
-  const isFirstSearchMount = useRef13(true);
-  const [isStatusModalOpen, setIsStatusModalOpen] = useState37(false);
-  const [isRoleModalOpen, setIsRoleModalOpen] = useState37(false);
-  const [roleEditTarget, setRoleEditTarget] = useState37(null);
-  const [isUpdatingRole, setIsUpdatingRole] = useState37(false);
-  const [orgName, setOrgName] = useState37(initialOrgName);
-  const [orgSlug, setOrgSlug] = useState37(initialOrgSlug);
-  const [firstName, setFirstName] = useState37("");
-  const [lastName, setLastName] = useState37("");
-  const [isCheckingSlug, setIsCheckingSlug] = useState37(false);
-  const [slugAvailable, setSlugAvailable] = useState37(null);
-  const [isSavingOrg, setIsSavingOrg] = useState37(false);
-  const [isSavingProfile, setIsSavingProfile] = useState37(false);
-  useEffect20(() => {
+  const [activeTab, setActiveTab] = useState38(isOrg ? "MEMBERS" : "ACCOUNT");
+  const [expandedId, setExpandedId] = useState38(null);
+  const [memberToRemove, setMemberToRemove] = useState38(null);
+  const [isRemoving, setIsRemoving] = useState38(false);
+  const [isInviteMode, setIsInviteMode] = useState38(false);
+  const [inviteEmail, setInviteEmail] = useState38("");
+  const [isInviting, setIsInviting] = useState38(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState38(membersSearchQuery);
+  const [isTyping, setIsTyping] = useState38(false);
+  const isFirstSearchMount = useRef14(true);
+  const [isStatusModalOpen, setIsStatusModalOpen] = useState38(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = useState38(false);
+  const [roleEditTarget, setRoleEditTarget] = useState38(null);
+  const [isUpdatingRole, setIsUpdatingRole] = useState38(false);
+  const [orgName, setOrgName] = useState38(initialOrgName);
+  const [orgSlug, setOrgSlug] = useState38(initialOrgSlug);
+  const [firstName, setFirstName] = useState38("");
+  const [lastName, setLastName] = useState38("");
+  const [isCheckingSlug, setIsCheckingSlug] = useState38(false);
+  const [slugAvailable, setSlugAvailable] = useState38(null);
+  const [isSavingOrg, setIsSavingOrg] = useState38(false);
+  const [isSavingProfile, setIsSavingProfile] = useState38(false);
+  useEffect21(() => {
     setOrgName(initialOrgName || "");
     setOrgSlug(initialOrgSlug || "");
     const parts = (initialFullName || "").split(" ");
     setFirstName(parts[0] || "");
     setLastName(parts.slice(1).join(" ") || "");
   }, [initialOrgName, initialOrgSlug, initialFullName]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (activeTab !== "MEMBERS") return;
     if (isFirstSearchMount.current) {
       isFirstSearchMount.current = false;
@@ -5547,7 +5577,7 @@ var UniversalSettings = ({
     }
   };
   const activeExpandedMember = expandedId ? members.find((m) => m.id === expandedId) : null;
-  useEffect20(() => {
+  useEffect21(() => {
     if (!isOrg || !orgSlug || orgSlug === initialOrgSlug) {
       setSlugAvailable(null);
       setIsCheckingSlug(false);
@@ -5642,7 +5672,7 @@ var UniversalSettings = ({
 };
 
 // src/components/UniversalCreateHuddle.tsx
-import React53, { useState as useState38, useEffect as useEffect21, useRef as useRef14 } from "react";
+import React53, { useState as useState39, useEffect as useEffect22, useRef as useRef15 } from "react";
 import toast15 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon40 } from "@hugeicons/react";
 import {
@@ -5657,8 +5687,8 @@ import {
   CircleLock02Icon as CircleLock02Icon4
 } from "@hugeicons/core-free-icons";
 var MemberAvatar4 = ({ src, sizeClass = "w-10 h-10" }) => {
-  const [loaded, setLoaded] = useState38(false);
-  const [error, setError] = useState38(false);
+  const [loaded, setLoaded] = useState39(false);
+  const [error, setError] = useState39(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   return /* @__PURE__ */ React53.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React53.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React53.createElement(HugeiconsIcon40, { icon: Loading03Icon26, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React53.createElement(
     "img",
@@ -5701,28 +5731,28 @@ var UniversalCreateHuddle = ({
   onCreateSubmit
 }) => {
   const canManage = userRole === "ADMIN" || userRole === "MANAGER";
-  const [huddleDate, setHuddleDate] = useState38(() => {
+  const [huddleDate, setHuddleDate] = useState39(() => {
     const d = /* @__PURE__ */ new Date();
     d.setHours(d.getHours() + 1, 0, 0, 0);
     return d;
   });
-  const [title, setTitle] = useState38("");
-  const [isPrivate, setIsPrivate] = useState38(false);
-  const [timezone, setTimezone] = useState38("UTC");
-  useEffect21(() => {
+  const [title, setTitle] = useState39("");
+  const [isPrivate, setIsPrivate] = useState39(false);
+  const [timezone, setTimezone] = useState39("UTC");
+  useEffect22(() => {
     try {
       setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
     } catch (e) {
     }
   }, []);
-  const [calendarMode, setCalendarMode] = useState38(null);
-  const [showTimezoneModal, setShowTimezoneModal] = useState38(false);
-  const [showMembersModal, setShowMembersModal] = useState38(false);
-  const [selectedParticipants, setSelectedParticipants] = useState38(/* @__PURE__ */ new Set());
-  const [isSubmitting, setIsSubmitting] = useState38(false);
-  const [localSearchQuery, setLocalSearchQuery] = useState38(membersSearchQuery);
-  const [isTyping, setIsTyping] = useState38(false);
-  const typingTimer = useRef14(null);
+  const [calendarMode, setCalendarMode] = useState39(null);
+  const [showTimezoneModal, setShowTimezoneModal] = useState39(false);
+  const [showMembersModal, setShowMembersModal] = useState39(false);
+  const [selectedParticipants, setSelectedParticipants] = useState39(/* @__PURE__ */ new Set());
+  const [isSubmitting, setIsSubmitting] = useState39(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState39(membersSearchQuery);
+  const [isTyping, setIsTyping] = useState39(false);
+  const typingTimer = useRef15(null);
   const handleSearchInput = (e) => {
     const val = e.target.value;
     setLocalSearchQuery(val);

package/package.json

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