@retinalabsllc/zairusjs 16.1.3 → 16.1.30

package/dist/index.mjs

@@ -4508,7 +4508,8 @@ var UniversalBuyCryptoPage = ({
 };
 
 // src/components/UniversalDepartmentsPage.tsx
-import React46 from "react";
+import React46, { useState as useState32 } from "react";
+import toast12 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon32 } from "@hugeicons/react";
 import { ArrowLeft01Icon as ArrowLeft01Icon13, ArrowRight01Icon as ArrowRight01Icon9, Loading03Icon as Loading03Icon20 } from "@hugeicons/core-free-icons";
 var formatMembersCount = (num) => {
@@ -4525,16 +4526,74 @@ var UniversalDepartmentsPage = ({
   currentPage,
   totalPages,
   onPageChange,
-  onDepartmentClick
+  onDepartmentClick,
+  onCreateDepartment
 }) => {
-  return /* @__PURE__ */ React46.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ React46.createElement("div", null, /* @__PURE__ */ React46.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription))), /* @__PURE__ */ React46.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React46.createElement(PageSpinner6, null) : /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React46.createElement("div", null, departments.length === 0 ? /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No departments available") : departments.map((dept) => /* @__PURE__ */ React46.createElement(
+  const [isCreateMode, setIsCreateMode] = useState32(false);
+  const [deptName, setDeptName] = useState32("");
+  const [isCreating, setIsCreating] = useState32(false);
+  const handleCreateSubmit = async (e) => {
+    e.preventDefault();
+    if (deptName.length < 2 || isCreating || !onCreateDepartment) return;
+    setIsCreating(true);
+    try {
+      await onCreateDepartment(deptName);
+      setDeptName("");
+      setIsCreateMode(false);
+    } catch (error) {
+      toast12.error(error.message || "Failed to create department.");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  return /* @__PURE__ */ React46.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ React46.createElement("h2", { className: "text-black text-xl tracking-tight" }, isCreateMode ? "Create Department" : headerTitle), !isCreateMode && onCreateDepartment && /* @__PURE__ */ React46.createElement(
+    "button",
+    {
+      onClick: () => setIsCreateMode(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"
+    },
+    "Create new"
+  )), !isCreateMode && headerDescription && /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription)), /* @__PURE__ */ React46.createElement("div", { className: "w-full overflow-hidden" }, isCreateMode ? /* @__PURE__ */ React46.createElement("form", { onSubmit: handleCreateSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300 mt-2" }, /* @__PURE__ */ React46.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React46.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Department Name"), /* @__PURE__ */ React46.createElement(
+    "input",
+    {
+      type: "text",
+      value: deptName,
+      onChange: (e) => setDeptName(e.target.value),
+      required: true,
+      autoFocus: true,
+      maxLength: 50,
+      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: "e.g. Engineering, Marketing..."
+    }
+  )), /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React46.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: deptName.length < 2 || isCreating,
+      isLoading: isCreating,
+      className: "w-full"
+    },
+    "Create Department"
+  ), /* @__PURE__ */ React46.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setIsCreateMode(false);
+        setDeptName("");
+      },
+      disabled: isCreating,
+      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"
+  ))) : isLoading ? /* @__PURE__ */ React46.createElement(PageSpinner6, null) : /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React46.createElement("div", null, departments.length === 0 ? /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No departments available") : departments.map((dept) => /* @__PURE__ */ React46.createElement(
     "div",
     {
       key: dept.id,
       onClick: () => onDepartmentClick(dept.id),
       className: "flex flex-col py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl gap-2"
     },
-    /* @__PURE__ */ React46.createElement("p", { className: "text-[14px] text-black tracking-tight truncate" }, dept.name),
+    /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-black tracking-tight truncate" }, dept.name),
     /* @__PURE__ */ React46.createElement("div", { className: "flex items-center gap-3 min-w-0" }, dept.avatars && dept.avatars.length > 0 && /* @__PURE__ */ React46.createElement("div", { className: "flex items-center -space-x-2 shrink-0" }, dept.avatars.slice(0, 4).map((src, idx) => /* @__PURE__ */ React46.createElement("div", { key: idx, className: "w-7 h-7 rounded-lg border-2 border-white bg-neutral-100 overflow-hidden shrink-0" }, /* @__PURE__ */ React46.createElement(
       "img",
       {
@@ -4543,7 +4602,7 @@ var UniversalDepartmentsPage = ({
         className: "w-full h-full object-cover"
       }
     )))), dept.totalMembers > 0 ? /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-500 truncate block" }, formatMembersCount(dept.totalMembers), " ", dept.totalMembers > 4 ? "+" : "") : /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-400 truncate block" }, "Empty"))
-  ))), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React46.createElement(
+  ))), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React46.createElement(
     "button",
     {
       onClick: () => onPageChange(currentPage - 1),
@@ -4563,9 +4622,9 @@ var UniversalDepartmentsPage = ({
 };
 
 // src/components/UniversalMembersPage.tsx
-import React47, { useState as useState32, useEffect as useEffect18, useRef as useRef12 } from "react";
+import React47, { useState as useState33, useEffect as useEffect18, useRef as useRef12 } from "react";
 import { HugeiconsIcon as HugeiconsIcon33 } from "@hugeicons/react";
-import toast12 from "react-hot-toast";
+import toast13 from "react-hot-toast";
 import {
   ArrowLeft01Icon as ArrowLeft01Icon14,
   ArrowRight01Icon as ArrowRight01Icon10,
@@ -4575,8 +4634,8 @@ import {
   ListSettingIcon as ListSettingIcon2
 } from "@hugeicons/core-free-icons";
 var MemberAvatar = ({ src, status }) => {
-  const [loaded, setLoaded] = useState32(false);
-  const [error, setError] = useState32(false);
+  const [loaded, setLoaded] = useState33(false);
+  const [error, setError] = useState33(false);
   const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   const finalSrc = error || !src ? defaultAvatar : src;
   const getStatusColor = () => {
@@ -4624,16 +4683,16 @@ var UniversalMembersPage = ({
   onRemoveMember,
   onInviteMember
 }) => {
-  const [expandedId, setExpandedId] = useState32(null);
-  const [memberToRemove, setMemberToRemove] = useState32(null);
-  const [isRemoving, setIsRemoving] = useState32(false);
-  const [isInviteMode, setIsInviteMode] = useState32(false);
-  const [inviteEmail, setInviteEmail] = useState32("");
-  const [isInviting, setIsInviting] = useState32(false);
-  const [localSearchQuery, setLocalSearchQuery] = useState32(searchQuery);
-  const [isTyping, setIsTyping] = useState32(false);
-  const [isStatusModalOpen, setIsStatusModalOpen] = useState32(false);
-  const [isRoleModalOpen, setIsRoleModalOpen] = useState32(false);
+  const [expandedId, setExpandedId] = useState33(null);
+  const [memberToRemove, setMemberToRemove] = useState33(null);
+  const [isRemoving, setIsRemoving] = useState33(false);
+  const [isInviteMode, setIsInviteMode] = useState33(false);
+  const [inviteEmail, setInviteEmail] = useState33("");
+  const [isInviting, setIsInviting] = useState33(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState33(searchQuery);
+  const [isTyping, setIsTyping] = useState33(false);
+  const [isStatusModalOpen, setIsStatusModalOpen] = useState33(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = useState33(false);
   const statusDropdownRef = useRef12(null);
   const roleDropdownRef = useRef12(null);
   const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
@@ -4667,11 +4726,11 @@ var UniversalMembersPage = ({
     setIsRemoving(true);
     try {
       await onRemoveMember(memberToRemove.id);
-      toast12.success("Member removed successfully.");
+      toast13.success("Member removed successfully.");
       setExpandedId(null);
       setMemberToRemove(null);
     } catch (error) {
-      toast12.error("Failed to remove member.");
+      toast13.error("Failed to remove member.");
     } finally {
       setIsRemoving(false);
     }
@@ -4685,7 +4744,7 @@ var UniversalMembersPage = ({
       setInviteEmail("");
       setIsInviteMode(false);
     } catch (error) {
-      toast12.error(error.message || "Failed to send invitation.");
+      toast13.error(error.message || "Failed to send invitation.");
     } finally {
       setIsInviting(false);
     }
@@ -4829,10 +4888,10 @@ var UniversalMembersPage = ({
 };
 
 // src/components/UniversalHome2.tsx
-import React48, { useState as useState33 } from "react";
+import React48, { useState as useState34 } from "react";
 import { useRouter as useRouter3 } from "next/navigation";
 import { HugeiconsIcon as HugeiconsIcon34 } from "@hugeicons/react";
-import toast13 from "react-hot-toast";
+import toast14 from "react-hot-toast";
 import {
   Loading03Icon as Loading03Icon22,
   Notification01Icon as Notification01Icon2,
@@ -4862,11 +4921,11 @@ var UniversalHome2 = ({
   customContent,
   departmentsProps
 }) => {
-  const [isAvatarLoaded, setIsAvatarLoaded] = useState33(false);
-  const [showNotifDialog, setShowNotifDialog] = useState33(false);
-  const [showOrgSwitcher, setShowOrgSwitcher] = useState33(false);
-  const [selectedNotif, setSelectedNotif] = useState33(null);
-  const [isResolving, setIsResolving] = useState33(false);
+  const [isAvatarLoaded, setIsAvatarLoaded] = useState34(false);
+  const [showNotifDialog, setShowNotifDialog] = useState34(false);
+  const [showOrgSwitcher, setShowOrgSwitcher] = useState34(false);
+  const [selectedNotif, setSelectedNotif] = useState34(null);
+  const [isResolving, setIsResolving] = useState34(false);
   const router = useRouter3();
   const fallbackAvatarUrl = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
@@ -4893,7 +4952,7 @@ var UniversalHome2 = ({
       setShowNotifDialog(false);
       setSelectedNotif(null);
     } catch (error) {
-      toast13.error("Failed to process invitation");
+      toast14.error("Failed to process invitation");
     } finally {
       setIsResolving(false);
     }
@@ -4967,9 +5026,9 @@ var UniversalHome2 = ({
         onOrganizationSelect?.(org.id);
         setShowOrgSwitcher(false);
       },
-      className: `p-4 flex items-center justify-between gap-3 cursor-pointer outline-none transition-colors border-b border-neutral-50 last:border-0 ${activeOrgId === org.id ? "bg-neutral-50" : "hover:bg-neutral-50/50"}`
+      className: `p-4 flex items-center justify-between gap-3 cursor-pointer outline-none transition-colors last:border-0 ${activeOrgId === org.id ? "bg-neutral-50" : "hover:bg-neutral-50/50"}`
     },
-    /* @__PURE__ */ React48.createElement("span", { className: `text-[13px] tracking-tight ${activeOrgId === org.id ? "text-black font-medium" : "text-neutral-600"}` }, org.name),
+    /* @__PURE__ */ React48.createElement("span", { className: `text-[13px] tracking-tight ${activeOrgId === org.id ? "text-black " : "text-neutral-600"}` }, org.name),
     activeOrgId === org.id && /* @__PURE__ */ React48.createElement("div", { className: "w-2 h-2 rounded-full bg-emerald-500" })
   )))))), showNotifDialog && /* @__PURE__ */ React48.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React48.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React48.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 h-[80vh]" }, /* @__PURE__ */ React48.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ React48.createElement("button", { onClick: () => setSelectedNotif(null), disabled: isResolving, className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest disabled:opacity-50" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowLeft01Icon15, size: 14 }), " Back") : /* @__PURE__ */ React48.createElement("h3", { className: "text-[15px] text-black tracking-tight flex items-center gap-2" }, "Notifications", isNotifsLoading && /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: Loading03Icon22, size: 14, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ React48.createElement("button", { onClick: () => setShowNotifDialog(false), disabled: isResolving, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: CancelCircleIcon9, size: 18 }))), /* @__PURE__ */ React48.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React48.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React48.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ React48.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React48.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message), selectedNotif.type === "HUDDLE_INVITE" && selectedNotif.meta_json?.action === "RESOLVE_INVITE" && /* @__PURE__ */ React48.createElement("div", { className: "mt-8 flex gap-3 pt-6 border-t border-neutral-100" }, /* @__PURE__ */ React48.createElement(
     "button",
@@ -5017,6 +5076,438 @@ var UniversalHome2 = ({
     /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowRight01Icon11, size: 12 })
   ))))));
 };
+
+// src/components/UniversalSettings.tsx
+import React49, { useState as useState35, useEffect as useEffect19, useRef as useRef13 } from "react";
+import toast15 from "react-hot-toast";
+import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
+import {
+  ArrowLeft01Icon as ArrowLeft01Icon16,
+  ArrowRight01Icon as ArrowRight01Icon12,
+  Loading03Icon as Loading03Icon23,
+  Search01Icon as Search01Icon4,
+  SearchList02Icon as SearchList02Icon3,
+  ListSettingIcon as ListSettingIcon3,
+  CircleLock02Icon as CircleLock02Icon3,
+  Coins01Icon
+} from "@hugeicons/core-free-icons";
+var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
+  const [loaded, setLoaded] = useState35(false);
+  const [error, setError] = useState35(false);
+  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
+  const finalSrc = error || !src ? defaultAvatar : src;
+  const getStatusColor = () => {
+    switch (status?.toUpperCase()) {
+      case "ACTIVE":
+        return "bg-emerald-500";
+      case "BUSY":
+        return "bg-amber-500";
+      case "OFFLINE":
+        return "bg-rose-500";
+      case "AWAY":
+        return "bg-neutral-400";
+      default:
+        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(
+    "img",
+    {
+      src: finalSrc,
+      alt: "Member Avatar",
+      className: `w-full h-full object-cover transition-opacity duration-300 ${loaded || error ? "opacity-100" : "opacity-0"}`,
+      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()}` }));
+};
+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 UniversalSettings = ({
+  accountType,
+  userRole,
+  members = [],
+  isMembersLoading = false,
+  membersCurrentPage = 1,
+  membersTotalPages = 1,
+  onMembersPageChange = () => {
+  },
+  membersSearchQuery = "",
+  onMembersSearchChange = () => {
+  },
+  activeStatusFilter = "ALL",
+  onStatusFilterChange = () => {
+  },
+  activeRoleFilter = "ALL",
+  onRoleFilterChange = () => {
+  },
+  onRemoveMember,
+  onInviteMember,
+  initialDisplayName,
+  initialSlug,
+  slugPrefixUrl = "https://truhuddle.com/company/",
+  onSaveAccount,
+  onCheckSlugAvailability,
+  aiCredits,
+  isBillingLoading = false,
+  onTopUp,
+  onBack
+}) => {
+  const onBackHandler = onBack ?? (() => {
+    if (typeof window !== "undefined") window.history.back();
+  });
+  const [activeTab, setActiveTab] = useState35(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 [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 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;
+    setIsTyping(true);
+    const handler = setTimeout(() => {
+      onMembersSearchChange(localSearchQuery);
+      setIsTyping(false);
+    }, 600);
+    return () => clearTimeout(handler);
+  }, [localSearchQuery, onMembersSearchChange, activeTab]);
+  const handleConfirmRemove = async () => {
+    if (!memberToRemove || !onRemoveMember) return;
+    setIsRemoving(true);
+    try {
+      await onRemoveMember(memberToRemove.id);
+      toast15.success("Member removed successfully.");
+      setExpandedId(null);
+      setMemberToRemove(null);
+    } catch (error) {
+      toast15.error("Failed to remove member.");
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+  const handleInviteSubmit = async (e) => {
+    e.preventDefault();
+    if (inviteEmail.length < 5 || isInviting || !onInviteMember) return;
+    setIsInviting(true);
+    try {
+      await onInviteMember(inviteEmail);
+      setInviteEmail("");
+      setIsInviteMode(false);
+    } catch (error) {
+      toast15.error(error.message || "Failed to send invitation.");
+    } finally {
+      setIsInviting(false);
+    }
+  };
+  const activeExpandedMember = expandedId ? members.find((m) => m.id === expandedId) : null;
+  useEffect19(() => {
+    setDisplayName(initialDisplayName || "");
+    setSlug(initialSlug || "");
+  }, [initialDisplayName, initialSlug]);
+  const handleDisplayNameChange = (val) => setDisplayName(val.replace(/[^a-zA-Z0-9\s-]/g, "").substring(0, 50));
+  const handleSlugChange = (val) => setSlug(val.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").substring(0, 50));
+  useEffect19(() => {
+    if (!slug || slug === initialSlug) {
+      setSlugAvailable(null);
+      setIsCheckingSlug(false);
+      return;
+    }
+    if (slug.length < 3) {
+      setSlugAvailable(false);
+      setIsCheckingSlug(false);
+      return;
+    }
+    setIsCheckingSlug(true);
+    setSlugAvailable(null);
+    const checkTimer = setTimeout(async () => {
+      try {
+        if (onCheckSlugAvailability) {
+          const res = await onCheckSlugAvailability(slug);
+          setSlugAvailable(res.available);
+        }
+      } catch (error) {
+        setSlugAvailable(null);
+      } finally {
+        setIsCheckingSlug(false);
+      }
+    }, 1500);
+    return () => clearTimeout(checkTimer);
+  }, [slug, initialSlug, onCheckSlugAvailability]);
+  const handleSaveAccount = async (e) => {
+    e.preventDefault();
+    if (isSavingAccount || isCheckingSlug || isAccountReadOnly || !onSaveAccount) return;
+    if (slug !== initialSlug && slugAvailable === false) {
+      toast15.error("Please select an available address handle.");
+      return;
+    }
+    setIsSavingAccount(true);
+    try {
+      const payload = {
+        displayName: displayName !== initialDisplayName ? displayName : void 0,
+        slug: slug !== initialSlug ? slug : void 0
+      };
+      const res = await onSaveAccount(payload);
+      if (res.success) {
+        toast15.success("Profile updated successfully.");
+      } else {
+        toast15.error(res.error || "Failed to update profile.");
+      }
+    } catch (error) {
+      toast15.error("Service unavailable. Try again later.");
+    } finally {
+      setIsSavingAccount(false);
+    }
+  };
+  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-neutral-500 hover:text-black 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(
+    "button",
+    {
+      onClick: () => {
+        setActiveTab("MEMBERS");
+        setExpandedId(null);
+        setIsInviteMode(false);
+      },
+      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(
+    "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(
+    "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(
+    ConfirmationDialog,
+    {
+      isOpen: !!memberToRemove,
+      title: "Remove Member",
+      message: `Are you sure you want to remove ${memberToRemove?.name}? This action cannot be undone.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      isProcessing: isRemoving,
+      isDestructive: true,
+      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(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search members...",
+      value: localSearchQuery,
+      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(
+    "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(
+    "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.name), /* @__PURE__ */ React49.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, activeExpandedMember.role.toLowerCase()))), activeExpandedMember.departmentName && /* @__PURE__ */ React49.createElement("div", { className: "mb-8" }, /* @__PURE__ */ React49.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Assigned Department"), /* @__PURE__ */ React49.createElement("span", { className: "text-[12px] text-black truncate block" }, activeExpandedMember.departmentName)), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col sm:flex-row gap-3 pt-6 border-t border-neutral-100" }, !isAccountReadOnly && /* @__PURE__ */ React49.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(
+    "button",
+    {
+      onClick: () => setExpandedId(null),
+      className: "w-full sm:flex-1 py-2.5 bg-white border border-neutral-200 text-black hover:bg-neutral-100 rounded-full text-[12px] tracking-wide transition-colors outline-none"
+    },
+    "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(
+      "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(
+      "input",
+      {
+        type: "email",
+        value: inviteEmail,
+        onChange: (e) => setInviteEmail(cleanEmailId(e.target.value)),
+        required: true,
+        autoFocus: true,
+        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(
+      ThreeDActionButton,
+      {
+        type: "submit",
+        disabled: inviteEmail.length < 5 || isInviting,
+        isLoading: isInviting,
+        className: "w-full"
+      },
+      "Send Invitation"
+    ), /* @__PURE__ */ React49.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setIsInviteMode(false);
+          setInviteEmail("");
+        },
+        disabled: isInviting,
+        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(
+      "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.name), /* @__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(
+      "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(
+      "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 })
+    ))))))
+  )), 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-neutral-500 hover:text-black 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-neutral-500 hover:text-black 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(
+    TextInput,
+    {
+      label: "Display Name",
+      value: displayName,
+      onChange: handleDisplayNameChange,
+      disabled: isAccountReadOnly || isSavingAccount,
+      placeholder: "Sovereign User",
+      maxLength: 50
+    }
+  ), /* @__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(
+    "input",
+    {
+      type: "text",
+      value: slug,
+      disabled: isAccountReadOnly || isSavingAccount,
+      onChange: (e) => handleSlugChange(e.target.value),
+      spellCheck: "false",
+      autoComplete: "off",
+      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(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isAccountSaveDisabled,
+      isLoading: isSavingAccount,
+      className: "min-w-32"
+    },
+    "Save Changes"
+  ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ React49.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setDisplayName(initialDisplayName);
+        setSlug(initialSlug);
+      },
+      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-[#143731] 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-white leading-tight mb-1" }, /* @__PURE__ */ React49.createElement("span", { className: "text-white/60" }, "AI Credits Balance")), isBillingLoading ? /* @__PURE__ */ React49.createElement("div", { className: "h-8 w-32 bg-white/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-white" }), /* @__PURE__ */ React49.createElement("span", { className: "text-2xl text-white tracking-tight" }, aiCredits)), /* @__PURE__ */ React49.createElement("div", { className: "mt-8 w-full " }, /* @__PURE__ */ React49.createElement(
+    "button",
+    {
+      onClick: onTopUp,
+      className: "px-6 py-2.5 rounded-full border border-white/50 bg-transparent text-white/50 text-[12px] tracking-wide transition-colors outline-none hover:bg-white/10 hover:text-white hover:border-white"
+    },
+    "Top Up Credits"
+  ))), /* @__PURE__ */ React49.createElement(
+    "img",
+    {
+      src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/save_box.avif",
+      alt: "Credits",
+      className: "absolute bottom-2 right-2 translate-x-1/4 translate-y-1/2 w-32 h-auto object-contain z-0 pointer-events-none drop-shadow-md opacity-50"
+    }
+  )), /* @__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."))));
+};
 export {
   AppBento2,
   CardInfoDialog,
@@ -5062,6 +5553,7 @@ export {
   UniversalReferralPage,
   UniversalRewardPage,
   UniversalSecurityPage,
+  UniversalSettings,
   UniversalSidebar,
   UniversalTransactionPage,
   UniversalVerificationPage,