@retinalabsllc/zairusjs 16.1.95 → 16.2.1

package/dist/index.mjs

@@ -4537,7 +4537,7 @@ import {
 var HuddleAvatar = ({ src, status, sizeClass = "w-10 h-10" }) => {
   const [loaded, setLoaded] = useState32(false);
   const [error, setError] = useState32(false);
-  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default.avif";
+  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default_a.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   const getStatusColor = () => {
     switch (status?.toUpperCase()) {
@@ -4896,7 +4896,7 @@ import {
 var OrgAvatar = ({ src, sizeClass = "w-10 h-10" }) => {
   const [loaded, setLoaded] = useState34(false);
   const [error, setError] = useState34(false);
-  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office.avif";
+  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office_a.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   return /* @__PURE__ */ React48.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React48.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: Loading03Icon22, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React48.createElement(
     "img",
@@ -5107,22 +5107,69 @@ var UniversalHome2 = ({
 };
 
 // src/components/UniversalSettings.tsx
-import React49, { useState as useState35, useEffect as useEffect19, useRef as useRef13 } from "react";
+import React50, { useState as useState36, useEffect as useEffect19, useRef as useRef13 } from "react";
 import toast14 from "react-hot-toast";
-import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
+import { HugeiconsIcon as HugeiconsIcon36 } from "@hugeicons/react";
 import {
   ArrowLeft01Icon as ArrowLeft01Icon16,
   ArrowRight01Icon as ArrowRight01Icon12,
   Loading03Icon as Loading03Icon23,
-  Search01Icon as Search01Icon4,
+  Search01Icon as Search01Icon5,
   SearchList02Icon as SearchList02Icon3,
   ListSettingIcon as ListSettingIcon3,
   CircleLock02Icon as CircleLock02Icon3,
+  PlusSignIcon as PlusSignIcon3,
   Coins01Icon
 } from "@hugeicons/core-free-icons";
+
+// src/components/ReusableOptions.tsx
+import React49, { useState as useState35 } from "react";
+import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
+import { CancelCircleIcon as CancelCircleIcon10, Search01Icon as Search01Icon4 } from "@hugeicons/core-free-icons";
+var ReusableOptions = ({
+  isOpen,
+  onClose,
+  title,
+  options,
+  selectedOption,
+  onSelect,
+  showSearch = false
+}) => {
+  const [searchQuery, setSearchQuery] = useState35("");
+  if (!isOpen) return null;
+  const filteredOptions = options.filter(
+    (opt) => opt.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  return /* @__PURE__ */ React49.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React49.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: onClose }), /* @__PURE__ */ React49.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[80vh]" }, /* @__PURE__ */ React49.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React49.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, title), /* @__PURE__ */ React49.createElement("button", { onClick: onClose, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: CancelCircleIcon10, size: 18 }))), showSearch && /* @__PURE__ */ React49.createElement("div", { className: "p-4 shrink-0 " }, /* @__PURE__ */ React49.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React49.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: Search01Icon4, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React49.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search...",
+      value: searchQuery,
+      onChange: (e) => setSearchQuery(e.target.value),
+      className: "w-full pl-10 pr-4 py-2.5 bg-neutral-100 rounded-full text-[13px] text-black placeholder-neutral-400 outline-none focus:bg-neutral-200 transition-colors"
+    }
+  ))), /* @__PURE__ */ React49.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, filteredOptions.length === 0 ? /* @__PURE__ */ React49.createElement("div", { className: "p-6 text-center text-[12px] text-neutral-400" }, "No options found.") : filteredOptions.map((opt) => {
+    const isSelected = selectedOption === opt;
+    return /* @__PURE__ */ React49.createElement(
+      "button",
+      {
+        key: opt,
+        onClick: () => {
+          onSelect(opt);
+          onClose();
+        },
+        className: `w-full text-left p-4 text-[13px] tracking-tight rounded-full transition-colors outline-none ${isSelected ? "text-[#068afe] bg-[#068afe]/10" : "text-neutral-600 hover:bg-neutral-50/50"}`
+      },
+      opt
+    );
+  }))));
+};
+
+// src/components/UniversalSettings.tsx
 var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
-  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 = () => {
@@ -5139,7 +5186,7 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
         return "bg-neutral-200";
     }
   };
-  return /* @__PURE__ */ React49.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React49.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: Loading03Icon23, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React50.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: Loading03Icon23, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React50.createElement(
     "img",
     {
       src: finalSrc,
@@ -5148,10 +5195,10 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
       onLoad: () => setLoaded(true),
       onError: () => setError(true)
     }
-  )), /* @__PURE__ */ React49.createElement("div", { className: `absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white z-10 ${getStatusColor()}` }));
+  )), /* @__PURE__ */ React50.createElement("div", { className: `absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white z-10 ${getStatusColor()}` }));
 };
-var PageSpinner8 = () => /* @__PURE__ */ React49.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: Loading03Icon23, size: 32, className: "animate-spin mb-4 text-black" }));
-var InputSpinner3 = () => /* @__PURE__ */ React49.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React49.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React49.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var PageSpinner8 = () => /* @__PURE__ */ React50.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: Loading03Icon23, size: 32, className: "animate-spin mb-4 text-black" }));
+var InputSpinner3 = () => /* @__PURE__ */ React50.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React50.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React50.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
 var UniversalSettings = ({
   accountType,
   userRole,
@@ -5185,40 +5232,30 @@ var UniversalSettings = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [activeTab, setActiveTab] = useState35(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
+  const [activeTab, setActiveTab] = useState36(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
   useEffect19(() => {
     if (accountType === "INDIVIDUAL" && activeTab === "MEMBERS") {
       setActiveTab("ACCOUNT");
     }
   }, [accountType, activeTab]);
-  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(membersSearchQuery);
-  const [isTyping, setIsTyping] = useState35(false);
+  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(membersSearchQuery);
+  const [isTyping, setIsTyping] = useState36(false);
   const isFirstSearchMount = useRef13(true);
-  const [isStatusModalOpen, setIsStatusModalOpen] = useState35(false);
-  const [isRoleModalOpen, setIsRoleModalOpen] = useState35(false);
-  const statusDropdownRef = useRef13(null);
-  const roleDropdownRef = useRef13(null);
-  const [displayName, setDisplayName] = useState35(initialDisplayName);
-  const [slug, setSlug] = useState35(initialSlug);
-  const [isCheckingSlug, setIsCheckingSlug] = useState35(false);
-  const [slugAvailable, setSlugAvailable] = useState35(null);
-  const [isSavingAccount, setIsSavingAccount] = useState35(false);
+  const [isStatusModalOpen, setIsStatusModalOpen] = useState36(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = useState36(false);
+  const [displayName, setDisplayName] = useState36(initialDisplayName);
+  const [slug, setSlug] = useState36(initialSlug);
+  const [isCheckingSlug, setIsCheckingSlug] = useState36(false);
+  const [slugAvailable, setSlugAvailable] = useState36(null);
+  const [isSavingAccount, setIsSavingAccount] = useState36(false);
   const isAccountReadOnly = accountType === "ORGANIZATION" && userRole !== "ADMIN" && userRole !== "MANAGER";
   const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
-  useEffect19(() => {
-    function handleClickOutside(event) {
-      if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) setIsStatusModalOpen(false);
-      if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) setIsRoleModalOpen(false);
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
   useEffect19(() => {
     if (activeTab !== "MEMBERS") return;
     if (isFirstSearchMount.current) {
@@ -5321,7 +5358,7 @@ var UniversalSettings = ({
   };
   const hasAccountChanges = displayName !== initialDisplayName || slug !== initialSlug;
   const isAccountSaveDisabled = isSavingAccount || isAccountReadOnly || isCheckingSlug || !hasAccountChanges || displayName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
-  return /* @__PURE__ */ React49.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement(ManagedToaster, null), /* @__PURE__ */ React49.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React49.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-[#068afe] hover:text-[#068afe] transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ArrowLeft01Icon16, size: 16 }), " Back")), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-1 mb-8 px-1" }, /* @__PURE__ */ React49.createElement("h1", { className: "text-black text-xl tracking-tight" }, "System Settings"), /* @__PURE__ */ React49.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identity, team configurations, and AI billing parameters.")), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-6 border-b border-neutral-200 mb-6 overflow-x-auto custom-scrollbar px-1" }, accountType === "ORGANIZATION" && /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement(ManagedToaster, null), /* @__PURE__ */ React50.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React50.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-[#068afe] hover:text-[#068afe] transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ArrowLeft01Icon16, size: 16 }), " Back")), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-1 mb-8 px-1" }, /* @__PURE__ */ React50.createElement("h1", { className: "text-black text-xl tracking-tight" }, "System Settings"), /* @__PURE__ */ React50.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identity, team configurations, and AI billing parameters.")), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-6  mb-6 overflow-x-auto custom-scrollbar px-1" }, accountType === "ORGANIZATION" && /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => {
@@ -5332,21 +5369,21 @@ var UniversalSettings = ({
       className: `pb-3 text-[13px] tracking-wide outline-none transition-colors border-b-2 whitespace-nowrap ${activeTab === "MEMBERS" ? "border-black text-black" : "border-transparent text-neutral-500 hover:text-black"}`
     },
     "Members"
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setActiveTab("ACCOUNT"),
       className: `pb-3 text-[13px] tracking-wide outline-none transition-colors border-b-2 whitespace-nowrap ${activeTab === "ACCOUNT" ? "border-black text-black" : "border-transparent text-neutral-500 hover:text-black"}`
     },
     "Account Profile"
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setActiveTab("BILLING"),
       className: `pb-3 text-[13px] tracking-wide outline-none transition-colors border-b-2 whitespace-nowrap ${activeTab === "BILLING" ? "border-black text-black" : "border-transparent text-neutral-500 hover:text-black"}`
     },
     "Billing"
-  )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement(
+  )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement(
     ConfirmationDialog,
     {
       isOpen: !!memberToRemove,
@@ -5359,7 +5396,7 @@ var UniversalSettings = ({
       onClose: () => setMemberToRemove(null),
       onConfirm: handleConfirmRemove
     }
-  ), !isInviteMode && !activeExpandedMember && /* @__PURE__ */ React49.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full px-1" }, /* @__PURE__ */ React49.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ React49.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: Search01Icon4, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React49.createElement(
+  ), !isInviteMode && !activeExpandedMember && /* @__PURE__ */ React50.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full px-1" }, /* @__PURE__ */ React50.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ React50.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: Search01Icon5, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React50.createElement(
     "input",
     {
       type: "text",
@@ -5368,28 +5405,28 @@ var UniversalSettings = ({
       onChange: (e) => setLocalSearchQuery(e.target.value),
       className: "w-full pl-10 pr-4 py-2 bg-white rounded-full text-[13px] text-black placeholder-neutral-400 outline-none transition-colors focus:border-black"
     }
-  )), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ React49.createElement(
+  )), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setIsStatusModalOpen(true),
       className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
     },
-    /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: SearchList02Icon3, size: 16 })
-  ), /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: SearchList02Icon3, size: 16 })
+  ), /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setIsRoleModalOpen(true),
       className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
     },
-    /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ListSettingIcon3, size: 16 })
-  ))), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, activeExpandedMember ? /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col animate-in fade-in zoom-in-95 duration-300 w-full" }, /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-1 mb-8" }, /* @__PURE__ */ React49.createElement("h2", { className: "text-black text-xl tracking-tight" }, "Member Profile"), /* @__PURE__ */ React49.createElement("p", { className: "text-[12px] text-neutral-500" }, "View and manage this member's access privileges.")), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-4 mb-8" }, /* @__PURE__ */ React49.createElement(MemberAvatar2, { src: activeExpandedMember.avatarUrl, status: activeExpandedMember.status, sizeClass: "w-14 h-14" }), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React49.createElement("span", { className: "text-sm text-black tracking-tight truncate" }, activeExpandedMember.fullName), /* @__PURE__ */ React49.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, activeExpandedMember.role.toLowerCase()))), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col sm:flex-row gap-3 pt-6 " }, !isAccountReadOnly && /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ListSettingIcon3, size: 16 })
+  ))), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, activeExpandedMember ? /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col animate-in fade-in zoom-in-95 duration-300 w-full" }, /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-1 mb-8" }, /* @__PURE__ */ React50.createElement("h2", { className: "text-black text-xl tracking-tight" }, "Member Profile"), /* @__PURE__ */ React50.createElement("p", { className: "text-[12px] text-neutral-500" }, "View and manage this member's access privileges.")), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-4 mb-8" }, /* @__PURE__ */ React50.createElement(MemberAvatar2, { src: activeExpandedMember.avatarUrl, status: activeExpandedMember.status, sizeClass: "w-14 h-14" }), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React50.createElement("span", { className: "text-sm text-black tracking-tight truncate" }, activeExpandedMember.fullName), /* @__PURE__ */ React50.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, activeExpandedMember.role.toLowerCase()))), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col sm:flex-row gap-3 pt-6 " }, !isAccountReadOnly && /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setMemberToRemove(activeExpandedMember),
       className: "w-full sm:flex-1 py-2.5 bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 rounded-full text-[12px] tracking-wide transition-colors outline-none"
     },
     "Remove Access"
-  ), /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: () => setExpandedId(null),
@@ -5398,14 +5435,14 @@ var UniversalSettings = ({
     "Close Profile"
   ))) : (
     // Standard List & Invite Header
-    /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React49.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ React49.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && !isAccountReadOnly && /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React50.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ React50.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && !isAccountReadOnly && /* @__PURE__ */ React50.createElement(
       "button",
       {
         onClick: () => setIsInviteMode(true),
         className: "shrink-0 px-4 py-1.5 border border-neutral-200 text-black text-[12px] tracking-wide rounded-full hover:bg-neutral-50 transition-colors outline-none"
       },
       "Invite Team"
-    )), !isInviteMode && /* @__PURE__ */ React49.createElement("p", { className: "text-[12px] text-neutral-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ React49.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ React49.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ React49.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React49.createElement(
+    )), !isInviteMode && /* @__PURE__ */ React50.createElement("p", { className: "text-[12px] text-neutral-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ React50.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ React50.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ React50.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React50.createElement(
       "input",
       {
         type: "email",
@@ -5416,7 +5453,7 @@ var UniversalSettings = ({
         className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300",
         placeholder: "name@company.com"
       }
-    )), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React49.createElement(
+    )), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React50.createElement(
       ThreeDActionButton,
       {
         type: "submit",
@@ -5425,7 +5462,7 @@ var UniversalSettings = ({
         className: "w-full"
       },
       "Send Invitation"
-    ), /* @__PURE__ */ React49.createElement(
+    ), /* @__PURE__ */ React50.createElement(
       "button",
       {
         type: "button",
@@ -5437,54 +5474,52 @@ var UniversalSettings = ({
         className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide"
       },
       "Cancel"
-    ))) : isMembersLoading || isTyping ? /* @__PURE__ */ React49.createElement(PageSpinner8, null) : /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React49.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React49.createElement(
+    ))) : isMembersLoading || isTyping ? /* @__PURE__ */ React50.createElement(PageSpinner8, null) : /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React50.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React50.createElement(
       "div",
       {
         key: member.id,
         onClick: () => setExpandedId(member.id),
         className: "flex items-center justify-between py-3 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
       },
-      /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React49.createElement(MemberAvatar2, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React49.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React49.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ React49.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
-    ))), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React49.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React50.createElement(MemberAvatar2, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React50.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React50.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ React50.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
+    ))), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React50.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React50.createElement(
       "button",
       {
         onClick: () => onMembersPageChange(membersCurrentPage - 1),
         disabled: membersCurrentPage <= 1 || isMembersLoading,
         className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
       },
-      /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ArrowLeft01Icon16, size: 14 })
-    ), /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ArrowLeft01Icon16, size: 14 })
+    ), /* @__PURE__ */ React50.createElement(
       "button",
       {
         onClick: () => onMembersPageChange(membersCurrentPage + 1),
         disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0,
         className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
       },
-      /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ArrowRight01Icon12, size: 14 })
+      /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ArrowRight01Icon12, size: 14 })
     ))))))
-  )), isStatusModalOpen && /* @__PURE__ */ React49.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React49.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsStatusModalOpen(false) }), /* @__PURE__ */ React49.createElement("div", { ref: statusDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React49.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React49.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Status Filter")), /* @__PURE__ */ React49.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"].map((option) => /* @__PURE__ */ React49.createElement(
-    "button",
-    {
-      key: option,
-      onClick: () => {
-        onStatusFilterChange(option);
-        setIsStatusModalOpen(false);
-      },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeStatusFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
-    },
-    /* @__PURE__ */ React49.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
-  ))), /* @__PURE__ */ React49.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React49.createElement("button", { onClick: () => setIsStatusModalOpen(false), className: "w-full py-4 text-[13px] text-[#068afe] hover:text-[#068afe] transition-colors outline-none" }, "Cancel")))), isRoleModalOpen && /* @__PURE__ */ React49.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React49.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsRoleModalOpen(false) }), /* @__PURE__ */ React49.createElement("div", { ref: roleDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React49.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React49.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Role Filter")), /* @__PURE__ */ React49.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"].map((option) => /* @__PURE__ */ React49.createElement(
-    "button",
-    {
-      key: option,
-      onClick: () => {
-        onRoleFilterChange(option);
-        setIsRoleModalOpen(false);
-      },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeRoleFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
-    },
-    /* @__PURE__ */ React49.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
-  ))), /* @__PURE__ */ React49.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React49.createElement("button", { onClick: () => setIsRoleModalOpen(false), className: "w-full py-4 text-[13px] text-[#068afe] hover:text-[#068afe] transition-colors outline-none" }, "Cancel"))))), activeTab === "ACCOUNT" && /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React49.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React49.createElement("div", null, /* @__PURE__ */ React49.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Public Profile"), /* @__PURE__ */ React49.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identifiers and structural configuration details.")), isAccountReadOnly && /* @__PURE__ */ React49.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: CircleLock02Icon3, size: 18, className: "text-current" }))), /* @__PURE__ */ React49.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React49.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSaveAccount, autoComplete: "off" }, /* @__PURE__ */ React49.createElement(
+  )), /* @__PURE__ */ React50.createElement(
+    ReusableOptions,
+    {
+      isOpen: isStatusModalOpen,
+      onClose: () => setIsStatusModalOpen(false),
+      title: "Status Filter",
+      options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"],
+      selectedOption: activeStatusFilter,
+      onSelect: (status) => onStatusFilterChange(status)
+    }
+  ), /* @__PURE__ */ React50.createElement(
+    ReusableOptions,
+    {
+      isOpen: isRoleModalOpen,
+      onClose: () => setIsRoleModalOpen(false),
+      title: "Role Filter",
+      options: ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"],
+      selectedOption: activeRoleFilter,
+      onSelect: (role) => onRoleFilterChange(role)
+    }
+  )), activeTab === "ACCOUNT" && /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React50.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React50.createElement("div", null, /* @__PURE__ */ React50.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Public Profile"), /* @__PURE__ */ React50.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identifiers and structural configuration details.")), isAccountReadOnly && /* @__PURE__ */ React50.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: CircleLock02Icon3, size: 18, className: "text-current" }))), /* @__PURE__ */ React50.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React50.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSaveAccount, autoComplete: "off" }, /* @__PURE__ */ React50.createElement(
     TextInput,
     {
       label: "Display Name",
@@ -5494,7 +5529,7 @@ var UniversalSettings = ({
       placeholder: "Sovereign User",
       maxLength: 50
     }
-  ), accountType === "ORGANIZATION" && /* @__PURE__ */ React49.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ React49.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center relative w-full border-b border-neutral-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ React49.createElement(
+  ), accountType === "ORGANIZATION" && /* @__PURE__ */ React50.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ React50.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center relative w-full border-b border-neutral-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ React50.createElement(
     "input",
     {
       type: "text",
@@ -5506,7 +5541,7 @@ var UniversalSettings = ({
       className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed",
       placeholder: "workspace-handle"
     }
-  ), /* @__PURE__ */ React49.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React49.createElement(InputSpinner3, null), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React49.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React49.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React49.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React49.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React49.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React49.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React49.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React49.createElement(
+  ), /* @__PURE__ */ React50.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React50.createElement(InputSpinner3, null), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React50.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React50.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React50.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React50.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React50.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React50.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React50.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React50.createElement(
     ThreeDActionButton,
     {
       type: "submit",
@@ -5515,7 +5550,7 @@ var UniversalSettings = ({
       className: "min-w-32"
     },
     "Save Changes"
-  ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ React49.createElement(
+  ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ React50.createElement(
     "button",
     {
       type: "button",
@@ -5526,14 +5561,403 @@ var UniversalSettings = ({
       className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none"
     },
     "Cancel"
-  ))))), activeTab === "BILLING" && /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement("div", { className: "bg-[#ffffff] rounded-3xl p-6 relative overflow-hidden flex flex-col w-full mt-2" }, /* @__PURE__ */ React49.createElement("div", { className: "relative z-10 flex flex-col items-start w-full" }, /* @__PURE__ */ React49.createElement("p", { className: "text-[11px] text-black leading-tight mb-1" }, /* @__PURE__ */ React49.createElement("span", { className: "text-black/60" }, "AI Credits Balance")), isBillingLoading ? /* @__PURE__ */ React49.createElement("div", { className: "h-8 w-32 bg-black/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: Coins01Icon, size: 24, className: "text-black" }), /* @__PURE__ */ React49.createElement("span", { className: "text-2xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ React49.createElement("div", { className: "mt-2 w-full " }, /* @__PURE__ */ React49.createElement(
+  ))))), activeTab === "BILLING" && /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement("div", { className: "bg-[#ffffff] rounded-3xl p-6 relative overflow-hidden flex flex-row items-center justify-between w-full mt-2" }, /* @__PURE__ */ React50.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ React50.createElement("p", { className: "text-[11px] text-black leading-tight mb-1" }, /* @__PURE__ */ React50.createElement("span", { className: "text-black/60" }, "AI Credits Balance")), isBillingLoading ? /* @__PURE__ */ React50.createElement("div", { className: "h-8 w-32 bg-black/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: Coins01Icon, size: 24, className: "text-black" }), /* @__PURE__ */ React50.createElement("span", { className: "text-2xl text-black tracking-tight" }, aiCredits))), /* @__PURE__ */ React50.createElement(
     "button",
     {
       onClick: onTopUp,
-      className: "px-6 py-2 rounded-full border border-neutral-200 bg-transparent text-neutral-200 text-[11px] tracking-wide transition-colors outline-none hover:bg-black/10 hover:text-black hover:border-black"
+      className: "w-10 h-10 rounded-full border border-neutral-200 flex items-center justify-center text-black hover:bg-neutral-50 transition-colors outline-none shrink-0",
+      "aria-label": "Top Up Credits"
     },
-    "Top Up Credits"
-  )))), /* @__PURE__ */ React49.createElement("div", { className: "mt-4 px-1" }, /* @__PURE__ */ React49.createElement("p", { className: "text-[11px] text-neutral-500 leading-relaxed max-w-lg" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights. Additional credits are billed dynamically to your primary payment method."))));
+    /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: PlusSignIcon3, size: 16 })
+  )), /* @__PURE__ */ React50.createElement("div", { className: "mt-4 px-1" }, /* @__PURE__ */ React50.createElement("p", { className: "text-[11px] text-neutral-500 leading-relaxed max-w-lg" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights. Additional credits are billed dynamically to your primary payment method."))));
+};
+
+// src/components/UniversalCreateHuddle.tsx
+import React52, { useState as useState38, useEffect as useEffect21, useRef as useRef14 } from "react";
+import toast15 from "react-hot-toast";
+import { HugeiconsIcon as HugeiconsIcon38 } from "@hugeicons/react";
+import {
+  ArrowLeft01Icon as ArrowLeft01Icon18,
+  ArrowRight01Icon as ArrowRight01Icon14,
+  Loading03Icon as Loading03Icon24,
+  Search01Icon as Search01Icon6,
+  Calendar01Icon,
+  Clock01Icon,
+  Globe02Icon,
+  Tick02Icon
+} from "@hugeicons/core-free-icons";
+
+// src/components/CalendarPicker.tsx
+import React51, { useState as useState37, useEffect as useEffect20 } from "react";
+import { HugeiconsIcon as HugeiconsIcon37 } from "@hugeicons/react";
+import {
+  CancelCircleIcon as CancelCircleIcon11,
+  ArrowLeft01Icon as ArrowLeft01Icon17,
+  ArrowRight01Icon as ArrowRight01Icon13,
+  ArrowUp01Icon,
+  ArrowDown01Icon
+} from "@hugeicons/core-free-icons";
+var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var DAYS_OF_WEEK = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var CalendarPicker = ({
+  isOpen,
+  onClose,
+  initialDate,
+  defaultMode,
+  onConfirm
+}) => {
+  const [mode, setMode] = useState37(defaultMode);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const maxDate = new Date(today.getFullYear() + 1, 11, 31);
+  maxDate.setHours(23, 59, 59, 999);
+  const [viewMonth, setViewMonth] = useState37(initialDate.getMonth());
+  const [viewYear, setViewYear] = useState37(initialDate.getFullYear());
+  const [selectedDate, setSelectedDate] = useState37(new Date(initialDate.getFullYear(), initialDate.getMonth(), initialDate.getDate()));
+  const [hour, setHour] = useState37(initialDate.getHours() % 12 || 12);
+  const [minute, setMinute] = useState37(initialDate.getMinutes());
+  const [ampm, setAmpm] = useState37(initialDate.getHours() >= 12 ? "PM" : "AM");
+  useEffect20(() => {
+    if (isOpen) {
+      setMode(defaultMode);
+      setViewMonth(initialDate.getMonth());
+      setViewYear(initialDate.getFullYear());
+      setSelectedDate(new Date(initialDate.getFullYear(), initialDate.getMonth(), initialDate.getDate()));
+      setHour(initialDate.getHours() % 12 || 12);
+      setMinute(initialDate.getMinutes());
+      setAmpm(initialDate.getHours() >= 12 ? "PM" : "AM");
+    }
+  }, [isOpen, initialDate, defaultMode]);
+  if (!isOpen) return null;
+  const handlePrevMonth = () => {
+    if (viewYear === today.getFullYear() && viewMonth === today.getMonth()) return;
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  };
+  const handleNextMonth = () => {
+    if (viewYear === maxDate.getFullYear() && viewMonth === 11) return;
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  };
+  const isDateDisabled = (year, month, day) => {
+    const d = new Date(year, month, day);
+    return d < today || d > maxDate;
+  };
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const firstDayOffset = new Date(viewYear, viewMonth, 1).getDay();
+  const adjustTime = (type, dir) => {
+    if (type === "H") {
+      setHour((h) => {
+        let next = h + dir;
+        if (next > 12) return 1;
+        if (next < 1) return 12;
+        return next;
+      });
+    }
+    if (type === "M") {
+      setMinute((m) => {
+        let next = m + dir;
+        if (next > 59) return 0;
+        if (next < 0) return 59;
+        return next;
+      });
+    }
+    if (type === "A") {
+      setAmpm((a) => a === "AM" ? "PM" : "AM");
+    }
+  };
+  const handleSave = () => {
+    const final = new Date(selectedDate);
+    let h24 = hour;
+    if (ampm === "PM" && hour < 12) h24 += 12;
+    if (ampm === "AM" && hour === 12) h24 = 0;
+    final.setHours(h24, minute, 0, 0);
+    onConfirm(final);
+    onClose();
+  };
+  return /* @__PURE__ */ React51.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React51.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: onClose }), /* @__PURE__ */ React51.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React51.createElement("div", { className: "p-4 pb-0  flex flex-col gap-4" }, /* @__PURE__ */ React51.createElement("div", { className: "flex items-center justify-between shrink-0" }, /* @__PURE__ */ React51.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Select Date & Time"), /* @__PURE__ */ React51.createElement("button", { onClick: onClose, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: CancelCircleIcon11, size: 18 }))), /* @__PURE__ */ React51.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React51.createElement(
+    "button",
+    {
+      onClick: () => setMode("DATE"),
+      className: `pb-2 text-[12px] tracking-wide outline-none border-b-2 transition-colors ${mode === "DATE" ? "border-[#068afe] text-[#068afe]" : "border-transparent text-neutral-500 hover:text-black"}`
+    },
+    "Date"
+  ), /* @__PURE__ */ React51.createElement(
+    "button",
+    {
+      onClick: () => setMode("TIME"),
+      className: `pb-2 text-[12px] tracking-wide outline-none border-b-2 transition-colors ${mode === "TIME" ? "border-[#068afe] text-[#068afe]" : "border-transparent text-neutral-500 hover:text-black"}`
+    },
+    "Time"
+  ))), /* @__PURE__ */ React51.createElement("div", { className: "p-5" }, mode === "DATE" && /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col gap-4 animate-in fade-in duration-200" }, /* @__PURE__ */ React51.createElement("div", { className: "flex items-center justify-between px-2" }, /* @__PURE__ */ React51.createElement("span", { className: "text-[13px]  text-black" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ React51.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React51.createElement(
+    "button",
+    {
+      onClick: handlePrevMonth,
+      disabled: viewYear === today.getFullYear() && viewMonth === today.getMonth(),
+      className: "w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 disabled:opacity-30 disabled:cursor-not-allowed outline-none transition-colors"
+    },
+    /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowLeft01Icon17, size: 16, className: "text-black" })
+  ), /* @__PURE__ */ React51.createElement(
+    "button",
+    {
+      onClick: handleNextMonth,
+      disabled: viewYear === maxDate.getFullYear() && viewMonth === 11,
+      className: "w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 disabled:opacity-30 disabled:cursor-not-allowed outline-none transition-colors"
+    },
+    /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowRight01Icon13, size: 16, className: "text-black" })
+  ))), /* @__PURE__ */ React51.createElement("div", { className: "grid grid-cols-7 gap-1" }, DAYS_OF_WEEK.map((d) => /* @__PURE__ */ React51.createElement("div", { key: d, className: "text-center text-[10px] text-neutral-400  py-2" }, d)), Array.from({ length: firstDayOffset }).map((_, i) => /* @__PURE__ */ React51.createElement("div", { key: `empty-${i}` })), Array.from({ length: daysInMonth }).map((_, i) => {
+    const day = i + 1;
+    const isDisabled = isDateDisabled(viewYear, viewMonth, day);
+    const isSelected = selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === viewMonth && selectedDate.getDate() === day;
+    return /* @__PURE__ */ React51.createElement(
+      "button",
+      {
+        key: day,
+        disabled: isDisabled,
+        onClick: () => setSelectedDate(new Date(viewYear, viewMonth, day)),
+        className: `h-9 w-9 rounded-full flex items-center justify-center text-[12px] transition-colors outline-none
+                                                ${isDisabled ? "text-neutral-300 cursor-not-allowed" : isSelected ? "bg-[#068afe] text-white" : "text-black hover:bg-neutral-100"}`
+      },
+      day
+    );
+  }))), mode === "TIME" && /* @__PURE__ */ React51.createElement("div", { className: "flex items-center justify-center gap-6 py-6 animate-in fade-in duration-200" }, /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("H", 1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowUp01Icon, size: 20, className: "text-neutral-500" })), /* @__PURE__ */ React51.createElement("span", { className: "text-3xl  text-black w-12 text-center" }, hour.toString().padStart(2, "0")), /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("H", -1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowDown01Icon, size: 20, className: "text-neutral-500" }))), /* @__PURE__ */ React51.createElement("span", { className: "text-3xl  text-neutral-300 pb-2" }, ":"), /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("M", 1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowUp01Icon, size: 20, className: "text-neutral-500" })), /* @__PURE__ */ React51.createElement("span", { className: "text-3xl  text-black w-12 text-center" }, minute.toString().padStart(2, "0")), /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("M", -1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowDown01Icon, size: 20, className: "text-neutral-500" }))), /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col items-center gap-4 ml-2" }, /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("A", 1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowUp01Icon, size: 20, className: "text-neutral-500" })), /* @__PURE__ */ React51.createElement("span", { className: "text-xl  text-[#068afe] w-12 text-center" }, ampm), /* @__PURE__ */ React51.createElement("button", { onClick: () => adjustTime("A", -1), className: "p-2 rounded-full hover:bg-neutral-100 outline-none" }, /* @__PURE__ */ React51.createElement(HugeiconsIcon37, { icon: ArrowDown01Icon, size: 20, className: "text-neutral-500" }))))), /* @__PURE__ */ React51.createElement("div", { className: "p-5 flex justify-end shrink-0" }, /* @__PURE__ */ React51.createElement(
+    "button",
+    {
+      onClick: handleSave,
+      className: "text-[#068afe] hover:text-[#0573d6] transition-colors outline-none text-[13px]  tracking-wide"
+    },
+    "Done"
+  ))));
+};
+
+// src/components/UniversalCreateHuddle.tsx
+var MemberAvatar3 = ({ src, sizeClass = "w-10 h-10" }) => {
+  const [loaded, setLoaded] = useState38(false);
+  const [error, setError] = useState38(false);
+  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
+  return /* @__PURE__ */ React52.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ React52.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon24, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React52.createElement(
+    "img",
+    {
+      src: error || !src ? defaultAvatar : src,
+      alt: "Avatar",
+      className: `w-full h-full object-cover transition-opacity duration-300 ${loaded || error ? "opacity-100" : "opacity-0"}`,
+      onLoad: () => setLoaded(true),
+      onError: () => setError(true)
+    }
+  )));
+};
+var STANDARD_TIMEZONES = [
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Berlin",
+  "Africa/Lagos",
+  "Africa/Johannesburg",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Asia/Singapore",
+  "Asia/Tokyo",
+  "Australia/Sydney"
+];
+var UniversalCreateHuddle = ({
+  onBackHref,
+  members,
+  isMembersLoading,
+  membersCurrentPage,
+  membersTotalPages,
+  onMembersPageChange,
+  membersSearchQuery,
+  onMembersSearchChange,
+  onCreateSubmit
+}) => {
+  const [huddleDate, setHuddleDate] = useState38(() => {
+    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(() => {
+    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 handleSearchInput = (e) => {
+    const val = e.target.value;
+    setLocalSearchQuery(val);
+    setIsTyping(true);
+    if (typingTimer.current) clearTimeout(typingTimer.current);
+    typingTimer.current = setTimeout(() => {
+      onMembersSearchChange(val);
+      setTimeout(() => setIsTyping(false), 150);
+    }, 600);
+  };
+  const toggleParticipant = (userId) => {
+    const newSet = new Set(selectedParticipants);
+    if (newSet.has(userId)) newSet.delete(userId);
+    else newSet.add(userId);
+    setSelectedParticipants(newSet);
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const cleanTitle = title.trim();
+    if (cleanTitle.length < 2) return toast15.error("Please enter a valid huddle name.");
+    if (isPrivate && selectedParticipants.size === 0) return toast15.error("Private huddles require at least one participant.");
+    setIsSubmitting(true);
+    try {
+      await onCreateSubmit({
+        title: cleanTitle,
+        huddleType: isPrivate ? "PRIVATE" : "PUBLIC",
+        startTime: huddleDate.toISOString(),
+        timezone,
+        participantIds: isPrivate ? Array.from(selectedParticipants) : []
+      });
+    } catch (error) {
+      toast15.error(error.message || "Failed to schedule huddle.");
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ React52.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React52.createElement(ManagedToaster, null), /* @__PURE__ */ React52.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React52.createElement("a", { href: onBackHref, className: "flex items-center gap-2 text-[#068afe] hover:text-[#068afe] transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowLeft01Icon18, size: 16 }), " Back")), /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-1 mb-8 px-1" }, /* @__PURE__ */ React52.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Create Huddle"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-neutral-500" }, "Schedule a new workspace huddle and manage participant access.")), /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSubmit, autoComplete: "off" }, /* @__PURE__ */ React52.createElement(
+    TextInput,
+    {
+      label: "Huddle Subject",
+      value: title,
+      onChange: (val) => setTitle(val.substring(0, 80)),
+      disabled: isSubmitting,
+      placeholder: "e.g. Q4 Engineering Sync",
+      maxLength: 80
+    }
+  ), /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6" }, /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Date"), /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      onClick: () => !isSubmitting && setCalendarMode("DATE"),
+      className: `flex items-center relative w-full border-b border-neutral-200 transition-all duration-300 pb-3 pt-3 cursor-pointer ${isSubmitting ? "opacity-50 pointer-events-none" : "hover:border-black"}`
+    },
+    /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Calendar01Icon, size: 16, className: "text-neutral-400 absolute left-0" }),
+    /* @__PURE__ */ React52.createElement("span", { className: "w-full pl-8 text-sm text-black truncate block" }, huddleDate.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }))
+  )), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Time"), /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      onClick: () => !isSubmitting && setCalendarMode("TIME"),
+      className: `flex items-center relative w-full border-b border-neutral-200 transition-all duration-300 pb-3 pt-3 cursor-pointer ${isSubmitting ? "opacity-50 pointer-events-none" : "hover:border-black"}`
+    },
+    /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Clock01Icon, size: 16, className: "text-neutral-400 absolute left-0" }),
+    /* @__PURE__ */ React52.createElement("span", { className: "w-full pl-8 text-sm text-black truncate block" }, huddleDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }))
+  )), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Timezone"), /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      onClick: () => !isSubmitting && setShowTimezoneModal(true),
+      className: `flex items-center relative w-full border-b border-neutral-200 transition-all duration-300 pb-3 pt-3 cursor-pointer ${isSubmitting ? "opacity-50 pointer-events-none" : "hover:border-black"}`
+    },
+    /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Globe02Icon, size: 16, className: "text-neutral-400 absolute left-0" }),
+    /* @__PURE__ */ React52.createElement("span", { className: "w-full pl-8 text-sm text-black truncate block" }, timezone)
+  ))), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between py-2 border-t border-b border-neutral-100 mt-2" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React52.createElement("span", { className: "text-[13px] text-black tracking-tight" }, "Private Huddle"), /* @__PURE__ */ React52.createElement("span", { className: "text-[11px] text-neutral-500" }, "Only invited members can join.")), /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsPrivate(!isPrivate),
+      disabled: isSubmitting,
+      className: `relative w-11 h-6 rounded-full transition-colors outline-none shrink-0 ${isPrivate ? "bg-[#068afe]" : "bg-neutral-200"}`
+    },
+    /* @__PURE__ */ React52.createElement("div", { className: `absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform ${isPrivate ? "translate-x-5" : "translate-x-0"}` })
+  )), isPrivate && /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between animate-in fade-in zoom-in-95 duration-200 bg-neutral-50 p-4 rounded-xl" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React52.createElement("span", { className: "text-[12px] text-black tracking-tight" }, "Participants"), /* @__PURE__ */ React52.createElement("span", { className: "text-[11px] text-[#068afe] " }, selectedParticipants.size === 0 ? "0 added" : selectedParticipants.size >= 1e3 ? `${(selectedParticipants.size / 1e3).toFixed(1)}k+ added` : `${selectedParticipants.size} added`)), /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowMembersModal(true),
+      disabled: isSubmitting,
+      className: "px-4 py-2 border border-neutral-200 text-black text-[11px] tracking-wide rounded-full hover:bg-white transition-colors outline-none bg-transparent"
+    },
+    "Manage Access"
+  )), /* @__PURE__ */ React52.createElement("div", { className: "pt-6" }, /* @__PURE__ */ React52.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSubmitting || title.trim().length < 2 || isPrivate && selectedParticipants.size === 0,
+      isLoading: isSubmitting,
+      className: "w-full sm:w-auto min-w-40"
+    },
+    "Schedule Huddle"
+  )))), /* @__PURE__ */ React52.createElement(
+    CalendarPicker,
+    {
+      isOpen: calendarMode !== null,
+      onClose: () => setCalendarMode(null),
+      initialDate: huddleDate,
+      defaultMode: calendarMode || "DATE",
+      onConfirm: (d) => setHuddleDate(d)
+    }
+  ), /* @__PURE__ */ React52.createElement(
+    ReusableOptions,
+    {
+      isOpen: showTimezoneModal,
+      onClose: () => setShowTimezoneModal(false),
+      title: "Select Timezone",
+      options: STANDARD_TIMEZONES,
+      selectedOption: timezone,
+      onSelect: (tz) => setTimezone(tz),
+      showSearch: true
+    }
+  ), showMembersModal && /* @__PURE__ */ React52.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React52.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowMembersModal(false) }), /* @__PURE__ */ React52.createElement("div", { className: "relative w-full max-w-md bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-[80vh]" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React52.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Select Participants"), /* @__PURE__ */ React52.createElement("button", { onClick: () => setShowMembersModal(false), className: "text-[#068afe] hover:text-[#068afe] transition-colors outline-none text-[13px] " }, "Done")), /* @__PURE__ */ React52.createElement("div", { className: "p-4 shrink-0 " }, /* @__PURE__ */ React52.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React52.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Search01Icon6, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React52.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search team...",
+      value: localSearchQuery,
+      onChange: handleSearchInput,
+      className: "w-full pl-10 pr-4 py-2.5 bg-neutral-100 rounded-full text-[13px] text-black placeholder-neutral-400 outline-none focus:bg-neutral-200 transition-colors"
+    }
+  ))), /* @__PURE__ */ React52.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2 relative" }, isMembersLoading || isTyping ? /* @__PURE__ */ React52.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon24, size: 28, className: "animate-spin text-black" })) : members.length === 0 ? /* @__PURE__ */ React52.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "No members found.") : members.map((member) => {
+    const isChecked = selectedParticipants.has(member.userId);
+    return /* @__PURE__ */ React52.createElement(
+      "div",
+      {
+        key: member.id,
+        onClick: () => toggleParticipant(member.userId),
+        className: "flex items-center justify-between p-3 rounded-xl cursor-pointer hover:bg-neutral-50 transition-colors select-none"
+      },
+      /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-3 min-w-0 flex-1" }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: member.avatarUrl, sizeClass: "w-9 h-9" }), /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col min-w-0 flex-1" }, /* @__PURE__ */ React52.createElement("span", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ React52.createElement("span", { className: "text-[11px] text-neutral-400 capitalize truncate" }, member.role.toLowerCase()))),
+      /* @__PURE__ */ React52.createElement("div", { className: "shrink-0 pl-3" }, /* @__PURE__ */ React52.createElement("div", { className: `w-5 h-5 rounded-full flex items-center justify-center transition-colors ${isChecked ? "bg-[#068afe]" : "border border-neutral-300 bg-white"}` }, isChecked && /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Tick02Icon, size: 14, className: "text-white" })))
+    );
+  })), /* @__PURE__ */ React52.createElement("div", { className: "p-4 flex items-center justify-between shrink-0  bg-white" }, /* @__PURE__ */ React52.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React52.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      disabled: membersCurrentPage <= 1 || isMembersLoading,
+      onClick: () => onMembersPageChange(membersCurrentPage - 1),
+      className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
+    },
+    /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowLeft01Icon18, size: 12 })
+  ), /* @__PURE__ */ React52.createElement(
+    "button",
+    {
+      disabled: membersCurrentPage >= membersTotalPages || membersTotalPages === 0 || isMembersLoading,
+      onClick: () => onMembersPageChange(membersCurrentPage + 1),
+      className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
+    },
+    /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowRight01Icon14, size: 12 })
+  ))))));
 };
 export {
   AppBento2,
@@ -5569,6 +5993,7 @@ export {
   UniversalBuyCryptoPage,
   UniversalCardActionPage,
   UniversalCardPage,
+  UniversalCreateHuddle,
   UniversalErrorView,
   UniversalHome2,
   UniversalHomeView,