@retinalabsllc/zairusjs 16.1.95 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +126 -91
  2. package/dist/index.mjs +124 -88
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4521,7 +4521,7 @@ var import_core_free_icons27 = require("@hugeicons/core-free-icons");
4521
4521
  var HuddleAvatar = ({ src, status, sizeClass = "w-10 h-10" }) => {
4522
4522
  const [loaded, setLoaded] = (0, import_react77.useState)(false);
4523
4523
  const [error, setError] = (0, import_react77.useState)(false);
4524
- const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default.avif";
4524
+ const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default_a.avif";
4525
4525
  const finalSrc = error || !src ? defaultAvatar : src;
4526
4526
  const getStatusColor = () => {
4527
4527
  switch (status?.toUpperCase()) {
@@ -4864,7 +4864,7 @@ var import_core_free_icons29 = require("@hugeicons/core-free-icons");
4864
4864
  var OrgAvatar = ({ src, sizeClass = "w-10 h-10" }) => {
4865
4865
  const [loaded, setLoaded] = (0, import_react81.useState)(false);
4866
4866
  const [error, setError] = (0, import_react81.useState)(false);
4867
- const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office.avif";
4867
+ const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office_a.avif";
4868
4868
  const finalSrc = error || !src ? defaultAvatar : src;
4869
4869
  return /* @__PURE__ */ import_react81.default.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Loading03Icon, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ import_react81.default.createElement(
4870
4870
  "img",
@@ -5075,13 +5075,59 @@ var UniversalHome2 = ({
5075
5075
  };
5076
5076
 
5077
5077
  // src/components/UniversalSettings.tsx
5078
- var import_react83 = __toESM(require("react"));
5078
+ var import_react85 = __toESM(require("react"));
5079
5079
  var import_react_hot_toast15 = __toESM(require("react-hot-toast"));
5080
+ var import_react86 = require("@hugeicons/react");
5081
+ var import_core_free_icons31 = require("@hugeicons/core-free-icons");
5082
+
5083
+ // src/components/ReusableOptions.tsx
5084
+ var import_react83 = __toESM(require("react"));
5080
5085
  var import_react84 = require("@hugeicons/react");
5081
5086
  var import_core_free_icons30 = require("@hugeicons/core-free-icons");
5087
+ var ReusableOptions = ({
5088
+ isOpen,
5089
+ onClose,
5090
+ title,
5091
+ options,
5092
+ selectedOption,
5093
+ onSelect,
5094
+ showSearch = false
5095
+ }) => {
5096
+ const [searchQuery, setSearchQuery] = (0, import_react83.useState)("");
5097
+ if (!isOpen) return null;
5098
+ const filteredOptions = options.filter(
5099
+ (opt) => opt.toLowerCase().includes(searchQuery.toLowerCase())
5100
+ );
5101
+ return /* @__PURE__ */ import_react83.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: onClose }), /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react83.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, title), /* @__PURE__ */ import_react83.default.createElement("button", { onClick: onClose, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.CancelCircleIcon, size: 18 }))), showSearch && /* @__PURE__ */ import_react83.default.createElement("div", { className: "p-4 shrink-0 " }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react83.default.createElement(
5102
+ "input",
5103
+ {
5104
+ type: "text",
5105
+ placeholder: "Search...",
5106
+ value: searchQuery,
5107
+ onChange: (e) => setSearchQuery(e.target.value),
5108
+ 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"
5109
+ }
5110
+ ))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, filteredOptions.length === 0 ? /* @__PURE__ */ import_react83.default.createElement("div", { className: "p-6 text-center text-[12px] text-neutral-400" }, "No options found.") : filteredOptions.map((opt) => {
5111
+ const isSelected = selectedOption === opt;
5112
+ return /* @__PURE__ */ import_react83.default.createElement(
5113
+ "button",
5114
+ {
5115
+ key: opt,
5116
+ onClick: () => {
5117
+ onSelect(opt);
5118
+ onClose();
5119
+ },
5120
+ 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"}`
5121
+ },
5122
+ opt
5123
+ );
5124
+ }))));
5125
+ };
5126
+
5127
+ // src/components/UniversalSettings.tsx
5082
5128
  var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5083
- const [loaded, setLoaded] = (0, import_react83.useState)(false);
5084
- const [error, setError] = (0, import_react83.useState)(false);
5129
+ const [loaded, setLoaded] = (0, import_react85.useState)(false);
5130
+ const [error, setError] = (0, import_react85.useState)(false);
5085
5131
  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
5086
5132
  const finalSrc = error || !src ? defaultAvatar : src;
5087
5133
  const getStatusColor = () => {
@@ -5098,7 +5144,7 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5098
5144
  return "bg-neutral-200";
5099
5145
  }
5100
5146
  };
5101
- return /* @__PURE__ */ import_react83.default.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.Loading03Icon, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ import_react83.default.createElement(
5147
+ return /* @__PURE__ */ import_react85.default.createElement("div", { className: `relative shrink-0 ${sizeClass}` }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden" }, !loaded && !error && /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.Loading03Icon, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ import_react85.default.createElement(
5102
5148
  "img",
5103
5149
  {
5104
5150
  src: finalSrc,
@@ -5107,10 +5153,10 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5107
5153
  onLoad: () => setLoaded(true),
5108
5154
  onError: () => setError(true)
5109
5155
  }
5110
- )), /* @__PURE__ */ import_react83.default.createElement("div", { className: `absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white z-10 ${getStatusColor()}` }));
5156
+ )), /* @__PURE__ */ import_react85.default.createElement("div", { className: `absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white z-10 ${getStatusColor()}` }));
5111
5157
  };
5112
- var PageSpinner8 = () => /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
5113
- var InputSpinner3 = () => /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react83.default.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" }));
5158
+ var PageSpinner8 = () => /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
5159
+ var InputSpinner3 = () => /* @__PURE__ */ import_react85.default.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__ */ import_react85.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react85.default.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" }));
5114
5160
  var UniversalSettings = ({
5115
5161
  accountType,
5116
5162
  userRole,
@@ -5144,41 +5190,31 @@ var UniversalSettings = ({
5144
5190
  const onBackHandler = onBack ?? (() => {
5145
5191
  if (typeof window !== "undefined") window.history.back();
5146
5192
  });
5147
- const [activeTab, setActiveTab] = (0, import_react83.useState)(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
5148
- (0, import_react83.useEffect)(() => {
5193
+ const [activeTab, setActiveTab] = (0, import_react85.useState)(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
5194
+ (0, import_react85.useEffect)(() => {
5149
5195
  if (accountType === "INDIVIDUAL" && activeTab === "MEMBERS") {
5150
5196
  setActiveTab("ACCOUNT");
5151
5197
  }
5152
5198
  }, [accountType, activeTab]);
5153
- const [expandedId, setExpandedId] = (0, import_react83.useState)(null);
5154
- const [memberToRemove, setMemberToRemove] = (0, import_react83.useState)(null);
5155
- const [isRemoving, setIsRemoving] = (0, import_react83.useState)(false);
5156
- const [isInviteMode, setIsInviteMode] = (0, import_react83.useState)(false);
5157
- const [inviteEmail, setInviteEmail] = (0, import_react83.useState)("");
5158
- const [isInviting, setIsInviting] = (0, import_react83.useState)(false);
5159
- const [localSearchQuery, setLocalSearchQuery] = (0, import_react83.useState)(membersSearchQuery);
5160
- const [isTyping, setIsTyping] = (0, import_react83.useState)(false);
5161
- const isFirstSearchMount = (0, import_react83.useRef)(true);
5162
- const [isStatusModalOpen, setIsStatusModalOpen] = (0, import_react83.useState)(false);
5163
- const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react83.useState)(false);
5164
- const statusDropdownRef = (0, import_react83.useRef)(null);
5165
- const roleDropdownRef = (0, import_react83.useRef)(null);
5166
- const [displayName, setDisplayName] = (0, import_react83.useState)(initialDisplayName);
5167
- const [slug, setSlug] = (0, import_react83.useState)(initialSlug);
5168
- const [isCheckingSlug, setIsCheckingSlug] = (0, import_react83.useState)(false);
5169
- const [slugAvailable, setSlugAvailable] = (0, import_react83.useState)(null);
5170
- const [isSavingAccount, setIsSavingAccount] = (0, import_react83.useState)(false);
5199
+ const [expandedId, setExpandedId] = (0, import_react85.useState)(null);
5200
+ const [memberToRemove, setMemberToRemove] = (0, import_react85.useState)(null);
5201
+ const [isRemoving, setIsRemoving] = (0, import_react85.useState)(false);
5202
+ const [isInviteMode, setIsInviteMode] = (0, import_react85.useState)(false);
5203
+ const [inviteEmail, setInviteEmail] = (0, import_react85.useState)("");
5204
+ const [isInviting, setIsInviting] = (0, import_react85.useState)(false);
5205
+ const [localSearchQuery, setLocalSearchQuery] = (0, import_react85.useState)(membersSearchQuery);
5206
+ const [isTyping, setIsTyping] = (0, import_react85.useState)(false);
5207
+ const isFirstSearchMount = (0, import_react85.useRef)(true);
5208
+ const [isStatusModalOpen, setIsStatusModalOpen] = (0, import_react85.useState)(false);
5209
+ const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react85.useState)(false);
5210
+ const [displayName, setDisplayName] = (0, import_react85.useState)(initialDisplayName);
5211
+ const [slug, setSlug] = (0, import_react85.useState)(initialSlug);
5212
+ const [isCheckingSlug, setIsCheckingSlug] = (0, import_react85.useState)(false);
5213
+ const [slugAvailable, setSlugAvailable] = (0, import_react85.useState)(null);
5214
+ const [isSavingAccount, setIsSavingAccount] = (0, import_react85.useState)(false);
5171
5215
  const isAccountReadOnly = accountType === "ORGANIZATION" && userRole !== "ADMIN" && userRole !== "MANAGER";
5172
5216
  const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
5173
- (0, import_react83.useEffect)(() => {
5174
- function handleClickOutside(event) {
5175
- if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) setIsStatusModalOpen(false);
5176
- if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) setIsRoleModalOpen(false);
5177
- }
5178
- document.addEventListener("mousedown", handleClickOutside);
5179
- return () => document.removeEventListener("mousedown", handleClickOutside);
5180
- }, []);
5181
- (0, import_react83.useEffect)(() => {
5217
+ (0, import_react85.useEffect)(() => {
5182
5218
  if (activeTab !== "MEMBERS") return;
5183
5219
  if (isFirstSearchMount.current) {
5184
5220
  isFirstSearchMount.current = false;
@@ -5220,13 +5256,13 @@ var UniversalSettings = ({
5220
5256
  }
5221
5257
  };
5222
5258
  const activeExpandedMember = expandedId ? members.find((m) => m.id === expandedId) : null;
5223
- (0, import_react83.useEffect)(() => {
5259
+ (0, import_react85.useEffect)(() => {
5224
5260
  setDisplayName(initialDisplayName || "");
5225
5261
  setSlug(initialSlug || "");
5226
5262
  }, [initialDisplayName, initialSlug]);
5227
5263
  const handleDisplayNameChange = (val) => setDisplayName(val.replace(/[^a-zA-Z0-9\s-]/g, "").substring(0, 50));
5228
5264
  const handleSlugChange = (val) => setSlug(val.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").substring(0, 50));
5229
- (0, import_react83.useEffect)(() => {
5265
+ (0, import_react85.useEffect)(() => {
5230
5266
  if (!slug || slug === initialSlug) {
5231
5267
  setSlugAvailable(null);
5232
5268
  setIsCheckingSlug(false);
@@ -5280,7 +5316,7 @@ var UniversalSettings = ({
5280
5316
  };
5281
5317
  const hasAccountChanges = displayName !== initialDisplayName || slug !== initialSlug;
5282
5318
  const isAccountSaveDisabled = isSavingAccount || isAccountReadOnly || isCheckingSlug || !hasAccountChanges || displayName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
5283
- return /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react83.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react83.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-[#068afe] hover:text-[#068afe] transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-1 mb-8 px-1" }, /* @__PURE__ */ import_react83.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "System Settings"), /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identity, team configurations, and AI billing parameters.")), /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement(
5319
+ return /* @__PURE__ */ import_react85.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react85.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react85.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-[#068afe] hover:text-[#068afe] transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-1 mb-8 px-1" }, /* @__PURE__ */ import_react85.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "System Settings"), /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identity, team configurations, and AI billing parameters.")), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-6 mb-6 overflow-x-auto custom-scrollbar px-1" }, accountType === "ORGANIZATION" && /* @__PURE__ */ import_react85.default.createElement(
5284
5320
  "button",
5285
5321
  {
5286
5322
  onClick: () => {
@@ -5291,21 +5327,21 @@ var UniversalSettings = ({
5291
5327
  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"}`
5292
5328
  },
5293
5329
  "Members"
5294
- ), /* @__PURE__ */ import_react83.default.createElement(
5330
+ ), /* @__PURE__ */ import_react85.default.createElement(
5295
5331
  "button",
5296
5332
  {
5297
5333
  onClick: () => setActiveTab("ACCOUNT"),
5298
5334
  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"}`
5299
5335
  },
5300
5336
  "Account Profile"
5301
- ), /* @__PURE__ */ import_react83.default.createElement(
5337
+ ), /* @__PURE__ */ import_react85.default.createElement(
5302
5338
  "button",
5303
5339
  {
5304
5340
  onClick: () => setActiveTab("BILLING"),
5305
5341
  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"}`
5306
5342
  },
5307
5343
  "Billing"
5308
- )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement(
5344
+ )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement(
5309
5345
  ConfirmationDialog,
5310
5346
  {
5311
5347
  isOpen: !!memberToRemove,
@@ -5318,7 +5354,7 @@ var UniversalSettings = ({
5318
5354
  onClose: () => setMemberToRemove(null),
5319
5355
  onConfirm: handleConfirmRemove
5320
5356
  }
5321
- ), !isInviteMode && !activeExpandedMember && /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full px-1" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react83.default.createElement(
5357
+ ), !isInviteMode && !activeExpandedMember && /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full px-1" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react85.default.createElement(
5322
5358
  "input",
5323
5359
  {
5324
5360
  type: "text",
@@ -5327,28 +5363,28 @@ var UniversalSettings = ({
5327
5363
  onChange: (e) => setLocalSearchQuery(e.target.value),
5328
5364
  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"
5329
5365
  }
5330
- )), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ import_react83.default.createElement(
5366
+ )), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ import_react85.default.createElement(
5331
5367
  "button",
5332
5368
  {
5333
5369
  onClick: () => setIsStatusModalOpen(true),
5334
5370
  className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
5335
5371
  },
5336
- /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.SearchList02Icon, size: 16 })
5337
- ), /* @__PURE__ */ import_react83.default.createElement(
5372
+ /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.SearchList02Icon, size: 16 })
5373
+ ), /* @__PURE__ */ import_react85.default.createElement(
5338
5374
  "button",
5339
5375
  {
5340
5376
  onClick: () => setIsRoleModalOpen(true),
5341
5377
  className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
5342
5378
  },
5343
- /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.ListSettingIcon, size: 16 })
5344
- ))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, activeExpandedMember ? /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col animate-in fade-in zoom-in-95 duration-300 w-full" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-1 mb-8" }, /* @__PURE__ */ import_react83.default.createElement("h2", { className: "text-black text-xl tracking-tight" }, "Member Profile"), /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[12px] text-neutral-500" }, "View and manage this member's access privileges.")), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center gap-4 mb-8" }, /* @__PURE__ */ import_react83.default.createElement(MemberAvatar2, { src: activeExpandedMember.avatarUrl, status: activeExpandedMember.status, sizeClass: "w-14 h-14" }), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react83.default.createElement("span", { className: "text-sm text-black tracking-tight truncate" }, activeExpandedMember.fullName), /* @__PURE__ */ import_react83.default.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, activeExpandedMember.role.toLowerCase()))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col sm:flex-row gap-3 pt-6 " }, !isAccountReadOnly && /* @__PURE__ */ import_react83.default.createElement(
5379
+ /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.ListSettingIcon, size: 16 })
5380
+ ))), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, activeExpandedMember ? /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col animate-in fade-in zoom-in-95 duration-300 w-full" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-1 mb-8" }, /* @__PURE__ */ import_react85.default.createElement("h2", { className: "text-black text-xl tracking-tight" }, "Member Profile"), /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[12px] text-neutral-500" }, "View and manage this member's access privileges.")), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-4 mb-8" }, /* @__PURE__ */ import_react85.default.createElement(MemberAvatar2, { src: activeExpandedMember.avatarUrl, status: activeExpandedMember.status, sizeClass: "w-14 h-14" }), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react85.default.createElement("span", { className: "text-sm text-black tracking-tight truncate" }, activeExpandedMember.fullName), /* @__PURE__ */ import_react85.default.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, activeExpandedMember.role.toLowerCase()))), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col sm:flex-row gap-3 pt-6 " }, !isAccountReadOnly && /* @__PURE__ */ import_react85.default.createElement(
5345
5381
  "button",
5346
5382
  {
5347
5383
  onClick: () => setMemberToRemove(activeExpandedMember),
5348
5384
  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"
5349
5385
  },
5350
5386
  "Remove Access"
5351
- ), /* @__PURE__ */ import_react83.default.createElement(
5387
+ ), /* @__PURE__ */ import_react85.default.createElement(
5352
5388
  "button",
5353
5389
  {
5354
5390
  onClick: () => setExpandedId(null),
@@ -5357,14 +5393,14 @@ var UniversalSettings = ({
5357
5393
  "Close Profile"
5358
5394
  ))) : (
5359
5395
  // Standard List & Invite Header
5360
- /* @__PURE__ */ import_react83.default.createElement(import_react83.default.Fragment, null, /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ import_react83.default.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && !isAccountReadOnly && /* @__PURE__ */ import_react83.default.createElement(
5396
+ /* @__PURE__ */ import_react85.default.createElement(import_react85.default.Fragment, null, /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ import_react85.default.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && !isAccountReadOnly && /* @__PURE__ */ import_react85.default.createElement(
5361
5397
  "button",
5362
5398
  {
5363
5399
  onClick: () => setIsInviteMode(true),
5364
5400
  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"
5365
5401
  },
5366
5402
  "Invite Team"
5367
- )), !isInviteMode && /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[12px] text-neutral-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ import_react83.default.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ import_react83.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react83.default.createElement(
5403
+ )), !isInviteMode && /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[12px] text-neutral-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ import_react85.default.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ import_react85.default.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ import_react85.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react85.default.createElement(
5368
5404
  "input",
5369
5405
  {
5370
5406
  type: "email",
@@ -5375,7 +5411,7 @@ var UniversalSettings = ({
5375
5411
  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",
5376
5412
  placeholder: "name@company.com"
5377
5413
  }
5378
- )), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react83.default.createElement(
5414
+ )), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react85.default.createElement(
5379
5415
  ThreeDActionButton,
5380
5416
  {
5381
5417
  type: "submit",
@@ -5384,7 +5420,7 @@ var UniversalSettings = ({
5384
5420
  className: "w-full"
5385
5421
  },
5386
5422
  "Send Invitation"
5387
- ), /* @__PURE__ */ import_react83.default.createElement(
5423
+ ), /* @__PURE__ */ import_react85.default.createElement(
5388
5424
  "button",
5389
5425
  {
5390
5426
  type: "button",
@@ -5396,54 +5432,52 @@ var UniversalSettings = ({
5396
5432
  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"
5397
5433
  },
5398
5434
  "Cancel"
5399
- ))) : isMembersLoading || isTyping ? /* @__PURE__ */ import_react83.default.createElement(PageSpinner8, null) : /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react83.default.createElement(
5435
+ ))) : isMembersLoading || isTyping ? /* @__PURE__ */ import_react85.default.createElement(PageSpinner8, null) : /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react85.default.createElement(
5400
5436
  "div",
5401
5437
  {
5402
5438
  key: member.id,
5403
5439
  onClick: () => setExpandedId(member.id),
5404
5440
  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"
5405
5441
  },
5406
- /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react83.default.createElement(MemberAvatar2, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react83.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
5407
- ))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react83.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react83.default.createElement(
5442
+ /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react85.default.createElement(MemberAvatar2, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react85.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
5443
+ ))), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react85.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react85.default.createElement(
5408
5444
  "button",
5409
5445
  {
5410
5446
  onClick: () => onMembersPageChange(membersCurrentPage - 1),
5411
5447
  disabled: membersCurrentPage <= 1 || isMembersLoading,
5412
5448
  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"
5413
5449
  },
5414
- /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.ArrowLeft01Icon, size: 14 })
5415
- ), /* @__PURE__ */ import_react83.default.createElement(
5450
+ /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.ArrowLeft01Icon, size: 14 })
5451
+ ), /* @__PURE__ */ import_react85.default.createElement(
5416
5452
  "button",
5417
5453
  {
5418
5454
  onClick: () => onMembersPageChange(membersCurrentPage + 1),
5419
5455
  disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0,
5420
5456
  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"
5421
5457
  },
5422
- /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.ArrowRight01Icon, size: 14 })
5458
+ /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.ArrowRight01Icon, size: 14 })
5423
5459
  ))))))
5424
- )), isStatusModalOpen && /* @__PURE__ */ import_react83.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsStatusModalOpen(false) }), /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react83.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Status Filter")), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"].map((option) => /* @__PURE__ */ import_react83.default.createElement(
5425
- "button",
5426
- {
5427
- key: option,
5428
- onClick: () => {
5429
- onStatusFilterChange(option);
5430
- setIsStatusModalOpen(false);
5431
- },
5432
- 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"}`
5433
- },
5434
- /* @__PURE__ */ import_react83.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
5435
- ))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ import_react83.default.createElement("button", { onClick: () => setIsStatusModalOpen(false), className: "w-full py-4 text-[13px] text-[#068afe] hover:text-[#068afe] transition-colors outline-none" }, "Cancel")))), isRoleModalOpen && /* @__PURE__ */ import_react83.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsRoleModalOpen(false) }), /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react83.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Role Filter")), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"].map((option) => /* @__PURE__ */ import_react83.default.createElement(
5436
- "button",
5437
- {
5438
- key: option,
5439
- onClick: () => {
5440
- onRoleFilterChange(option);
5441
- setIsRoleModalOpen(false);
5442
- },
5443
- 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"}`
5444
- },
5445
- /* @__PURE__ */ import_react83.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
5446
- ))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react83.default.createElement("div", null, /* @__PURE__ */ import_react83.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Public Profile"), /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identifiers and structural configuration details.")), isAccountReadOnly && /* @__PURE__ */ import_react83.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.CircleLock02Icon, size: 18, className: "text-current" }))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react83.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSaveAccount, autoComplete: "off" }, /* @__PURE__ */ import_react83.default.createElement(
5460
+ )), /* @__PURE__ */ import_react85.default.createElement(
5461
+ ReusableOptions,
5462
+ {
5463
+ isOpen: isStatusModalOpen,
5464
+ onClose: () => setIsStatusModalOpen(false),
5465
+ title: "Status Filter",
5466
+ options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"],
5467
+ selectedOption: activeStatusFilter,
5468
+ onSelect: (status) => onStatusFilterChange(status)
5469
+ }
5470
+ ), /* @__PURE__ */ import_react85.default.createElement(
5471
+ ReusableOptions,
5472
+ {
5473
+ isOpen: isRoleModalOpen,
5474
+ onClose: () => setIsRoleModalOpen(false),
5475
+ title: "Role Filter",
5476
+ options: ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"],
5477
+ selectedOption: activeRoleFilter,
5478
+ onSelect: (role) => onRoleFilterChange(role)
5479
+ }
5480
+ )), activeTab === "ACCOUNT" && /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react85.default.createElement("div", null, /* @__PURE__ */ import_react85.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Public Profile"), /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your workspace identifiers and structural configuration details.")), isAccountReadOnly && /* @__PURE__ */ import_react85.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.CircleLock02Icon, size: 18, className: "text-current" }))), /* @__PURE__ */ import_react85.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react85.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSaveAccount, autoComplete: "off" }, /* @__PURE__ */ import_react85.default.createElement(
5447
5481
  TextInput,
5448
5482
  {
5449
5483
  label: "Display Name",
@@ -5453,7 +5487,7 @@ var UniversalSettings = ({
5453
5487
  placeholder: "Sovereign User",
5454
5488
  maxLength: 50
5455
5489
  }
5456
- ), accountType === "ORGANIZATION" && /* @__PURE__ */ import_react83.default.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ import_react83.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement(
5490
+ ), accountType === "ORGANIZATION" && /* @__PURE__ */ import_react85.default.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ import_react85.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ import_react85.default.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__ */ import_react85.default.createElement(
5457
5491
  "input",
5458
5492
  {
5459
5493
  type: "text",
@@ -5465,7 +5499,7 @@ var UniversalSettings = ({
5465
5499
  className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed",
5466
5500
  placeholder: "workspace-handle"
5467
5501
  }
5468
- ), /* @__PURE__ */ import_react83.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react83.default.createElement(InputSpinner3, null), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react83.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react83.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react83.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react83.default.createElement(
5502
+ ), /* @__PURE__ */ import_react85.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react85.default.createElement(InputSpinner3, null), !isCheckingSlug && !isAccountReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react85.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react85.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react85.default.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__ */ import_react85.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react85.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react85.default.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__ */ import_react85.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react85.default.createElement(
5469
5503
  ThreeDActionButton,
5470
5504
  {
5471
5505
  type: "submit",
@@ -5474,7 +5508,7 @@ var UniversalSettings = ({
5474
5508
  className: "min-w-32"
5475
5509
  },
5476
5510
  "Save Changes"
5477
- ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ import_react83.default.createElement(
5511
+ ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ import_react85.default.createElement(
5478
5512
  "button",
5479
5513
  {
5480
5514
  type: "button",
@@ -5485,14 +5519,15 @@ var UniversalSettings = ({
5485
5519
  className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none"
5486
5520
  },
5487
5521
  "Cancel"
5488
- ))))), activeTab === "BILLING" && /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "bg-[#ffffff] rounded-3xl p-6 relative overflow-hidden flex flex-col w-full mt-2" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "relative z-10 flex flex-col items-start w-full" }, /* @__PURE__ */ import_react83.default.createElement("p", { className: "text-[11px] text-black leading-tight mb-1" }, /* @__PURE__ */ import_react83.default.createElement("span", { className: "text-black/60" }, "AI Credits Balance")), isBillingLoading ? /* @__PURE__ */ import_react83.default.createElement("div", { className: "h-8 w-32 bg-black/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ import_react83.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react83.default.createElement(import_react84.HugeiconsIcon, { icon: import_core_free_icons30.Coins01Icon, size: 24, className: "text-black" }), /* @__PURE__ */ import_react83.default.createElement("span", { className: "text-2xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ import_react83.default.createElement("div", { className: "mt-2 w-full " }, /* @__PURE__ */ import_react83.default.createElement(
5522
+ ))))), activeTab === "BILLING" && /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "bg-[#ffffff] rounded-3xl p-6 relative overflow-hidden flex flex-row items-center justify-between w-full mt-2" }, /* @__PURE__ */ import_react85.default.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ import_react85.default.createElement("p", { className: "text-[11px] text-black leading-tight mb-1" }, /* @__PURE__ */ import_react85.default.createElement("span", { className: "text-black/60" }, "AI Credits Balance")), isBillingLoading ? /* @__PURE__ */ import_react85.default.createElement("div", { className: "h-8 w-32 bg-black/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ import_react85.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.Coins01Icon, size: 24, className: "text-black" }), /* @__PURE__ */ import_react85.default.createElement("span", { className: "text-2xl text-black tracking-tight" }, aiCredits))), /* @__PURE__ */ import_react85.default.createElement(
5489
5523
  "button",
5490
5524
  {
5491
5525
  onClick: onTopUp,
5492
- 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"
5526
+ 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",
5527
+ "aria-label": "Top Up Credits"
5493
5528
  },
5494
- "Top Up Credits"
5495
- )))), /* @__PURE__ */ import_react83.default.createElement("div", { className: "mt-4 px-1" }, /* @__PURE__ */ import_react83.default.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."))));
5529
+ /* @__PURE__ */ import_react85.default.createElement(import_react86.HugeiconsIcon, { icon: import_core_free_icons31.PlusSignIcon, size: 16 })
5530
+ )), /* @__PURE__ */ import_react85.default.createElement("div", { className: "mt-4 px-1" }, /* @__PURE__ */ import_react85.default.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."))));
5496
5531
  };
5497
5532
  // Annotate the CommonJS export names for ESM import in node:
5498
5533
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -4537,7 +4537,7 @@ import {
4537
4537
  var HuddleAvatar = ({ src, status, sizeClass = "w-10 h-10" }) => {
4538
4538
  const [loaded, setLoaded] = useState32(false);
4539
4539
  const [error, setError] = useState32(false);
4540
- const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default.avif";
4540
+ const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/default_a.avif";
4541
4541
  const finalSrc = error || !src ? defaultAvatar : src;
4542
4542
  const getStatusColor = () => {
4543
4543
  switch (status?.toUpperCase()) {
@@ -4896,7 +4896,7 @@ import {
4896
4896
  var OrgAvatar = ({ src, sizeClass = "w-10 h-10" }) => {
4897
4897
  const [loaded, setLoaded] = useState34(false);
4898
4898
  const [error, setError] = useState34(false);
4899
- const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office.avif";
4899
+ const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/office_a.avif";
4900
4900
  const finalSrc = error || !src ? defaultAvatar : src;
4901
4901
  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(
4902
4902
  "img",
@@ -5107,22 +5107,69 @@ var UniversalHome2 = ({
5107
5107
  };
5108
5108
 
5109
5109
  // src/components/UniversalSettings.tsx
5110
- import React49, { useState as useState35, useEffect as useEffect19, useRef as useRef13 } from "react";
5110
+ import React50, { useState as useState36, useEffect as useEffect19, useRef as useRef13 } from "react";
5111
5111
  import toast14 from "react-hot-toast";
5112
- import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
5112
+ import { HugeiconsIcon as HugeiconsIcon36 } from "@hugeicons/react";
5113
5113
  import {
5114
5114
  ArrowLeft01Icon as ArrowLeft01Icon16,
5115
5115
  ArrowRight01Icon as ArrowRight01Icon12,
5116
5116
  Loading03Icon as Loading03Icon23,
5117
- Search01Icon as Search01Icon4,
5117
+ Search01Icon as Search01Icon5,
5118
5118
  SearchList02Icon as SearchList02Icon3,
5119
5119
  ListSettingIcon as ListSettingIcon3,
5120
5120
  CircleLock02Icon as CircleLock02Icon3,
5121
+ PlusSignIcon as PlusSignIcon3,
5121
5122
  Coins01Icon
5122
5123
  } from "@hugeicons/core-free-icons";
5124
+
5125
+ // src/components/ReusableOptions.tsx
5126
+ import React49, { useState as useState35 } from "react";
5127
+ import { HugeiconsIcon as HugeiconsIcon35 } from "@hugeicons/react";
5128
+ import { CancelCircleIcon as CancelCircleIcon10, Search01Icon as Search01Icon4 } from "@hugeicons/core-free-icons";
5129
+ var ReusableOptions = ({
5130
+ isOpen,
5131
+ onClose,
5132
+ title,
5133
+ options,
5134
+ selectedOption,
5135
+ onSelect,
5136
+ showSearch = false
5137
+ }) => {
5138
+ const [searchQuery, setSearchQuery] = useState35("");
5139
+ if (!isOpen) return null;
5140
+ const filteredOptions = options.filter(
5141
+ (opt) => opt.toLowerCase().includes(searchQuery.toLowerCase())
5142
+ );
5143
+ 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(
5144
+ "input",
5145
+ {
5146
+ type: "text",
5147
+ placeholder: "Search...",
5148
+ value: searchQuery,
5149
+ onChange: (e) => setSearchQuery(e.target.value),
5150
+ 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"
5151
+ }
5152
+ ))), /* @__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) => {
5153
+ const isSelected = selectedOption === opt;
5154
+ return /* @__PURE__ */ React49.createElement(
5155
+ "button",
5156
+ {
5157
+ key: opt,
5158
+ onClick: () => {
5159
+ onSelect(opt);
5160
+ onClose();
5161
+ },
5162
+ 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"}`
5163
+ },
5164
+ opt
5165
+ );
5166
+ }))));
5167
+ };
5168
+
5169
+ // src/components/UniversalSettings.tsx
5123
5170
  var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5124
- const [loaded, setLoaded] = useState35(false);
5125
- const [error, setError] = useState35(false);
5171
+ const [loaded, setLoaded] = useState36(false);
5172
+ const [error, setError] = useState36(false);
5126
5173
  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
5127
5174
  const finalSrc = error || !src ? defaultAvatar : src;
5128
5175
  const getStatusColor = () => {
@@ -5139,7 +5186,7 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5139
5186
  return "bg-neutral-200";
5140
5187
  }
5141
5188
  };
5142
- 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(
5189
+ 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(
5143
5190
  "img",
5144
5191
  {
5145
5192
  src: finalSrc,
@@ -5148,10 +5195,10 @@ var MemberAvatar2 = ({ src, status, sizeClass = "w-10 h-10" }) => {
5148
5195
  onLoad: () => setLoaded(true),
5149
5196
  onError: () => setError(true)
5150
5197
  }
5151
- )), /* @__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()}` }));
5198
+ )), /* @__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()}` }));
5152
5199
  };
5153
- 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" }));
5154
- 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" }));
5200
+ 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" }));
5201
+ 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" }));
5155
5202
  var UniversalSettings = ({
5156
5203
  accountType,
5157
5204
  userRole,
@@ -5185,40 +5232,30 @@ var UniversalSettings = ({
5185
5232
  const onBackHandler = onBack ?? (() => {
5186
5233
  if (typeof window !== "undefined") window.history.back();
5187
5234
  });
5188
- const [activeTab, setActiveTab] = useState35(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
5235
+ const [activeTab, setActiveTab] = useState36(accountType === "ORGANIZATION" ? "MEMBERS" : "ACCOUNT");
5189
5236
  useEffect19(() => {
5190
5237
  if (accountType === "INDIVIDUAL" && activeTab === "MEMBERS") {
5191
5238
  setActiveTab("ACCOUNT");
5192
5239
  }
5193
5240
  }, [accountType, activeTab]);
5194
- const [expandedId, setExpandedId] = useState35(null);
5195
- const [memberToRemove, setMemberToRemove] = useState35(null);
5196
- const [isRemoving, setIsRemoving] = useState35(false);
5197
- const [isInviteMode, setIsInviteMode] = useState35(false);
5198
- const [inviteEmail, setInviteEmail] = useState35("");
5199
- const [isInviting, setIsInviting] = useState35(false);
5200
- const [localSearchQuery, setLocalSearchQuery] = useState35(membersSearchQuery);
5201
- const [isTyping, setIsTyping] = useState35(false);
5241
+ const [expandedId, setExpandedId] = useState36(null);
5242
+ const [memberToRemove, setMemberToRemove] = useState36(null);
5243
+ const [isRemoving, setIsRemoving] = useState36(false);
5244
+ const [isInviteMode, setIsInviteMode] = useState36(false);
5245
+ const [inviteEmail, setInviteEmail] = useState36("");
5246
+ const [isInviting, setIsInviting] = useState36(false);
5247
+ const [localSearchQuery, setLocalSearchQuery] = useState36(membersSearchQuery);
5248
+ const [isTyping, setIsTyping] = useState36(false);
5202
5249
  const isFirstSearchMount = useRef13(true);
5203
- const [isStatusModalOpen, setIsStatusModalOpen] = useState35(false);
5204
- const [isRoleModalOpen, setIsRoleModalOpen] = useState35(false);
5205
- const statusDropdownRef = useRef13(null);
5206
- const roleDropdownRef = useRef13(null);
5207
- const [displayName, setDisplayName] = useState35(initialDisplayName);
5208
- const [slug, setSlug] = useState35(initialSlug);
5209
- const [isCheckingSlug, setIsCheckingSlug] = useState35(false);
5210
- const [slugAvailable, setSlugAvailable] = useState35(null);
5211
- const [isSavingAccount, setIsSavingAccount] = useState35(false);
5250
+ const [isStatusModalOpen, setIsStatusModalOpen] = useState36(false);
5251
+ const [isRoleModalOpen, setIsRoleModalOpen] = useState36(false);
5252
+ const [displayName, setDisplayName] = useState36(initialDisplayName);
5253
+ const [slug, setSlug] = useState36(initialSlug);
5254
+ const [isCheckingSlug, setIsCheckingSlug] = useState36(false);
5255
+ const [slugAvailable, setSlugAvailable] = useState36(null);
5256
+ const [isSavingAccount, setIsSavingAccount] = useState36(false);
5212
5257
  const isAccountReadOnly = accountType === "ORGANIZATION" && userRole !== "ADMIN" && userRole !== "MANAGER";
5213
5258
  const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
5214
- useEffect19(() => {
5215
- function handleClickOutside(event) {
5216
- if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) setIsStatusModalOpen(false);
5217
- if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) setIsRoleModalOpen(false);
5218
- }
5219
- document.addEventListener("mousedown", handleClickOutside);
5220
- return () => document.removeEventListener("mousedown", handleClickOutside);
5221
- }, []);
5222
5259
  useEffect19(() => {
5223
5260
  if (activeTab !== "MEMBERS") return;
5224
5261
  if (isFirstSearchMount.current) {
@@ -5321,7 +5358,7 @@ var UniversalSettings = ({
5321
5358
  };
5322
5359
  const hasAccountChanges = displayName !== initialDisplayName || slug !== initialSlug;
5323
5360
  const isAccountSaveDisabled = isSavingAccount || isAccountReadOnly || isCheckingSlug || !hasAccountChanges || displayName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
5324
- 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(
5361
+ 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(
5325
5362
  "button",
5326
5363
  {
5327
5364
  onClick: () => {
@@ -5332,21 +5369,21 @@ var UniversalSettings = ({
5332
5369
  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"}`
5333
5370
  },
5334
5371
  "Members"
5335
- ), /* @__PURE__ */ React49.createElement(
5372
+ ), /* @__PURE__ */ React50.createElement(
5336
5373
  "button",
5337
5374
  {
5338
5375
  onClick: () => setActiveTab("ACCOUNT"),
5339
5376
  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"}`
5340
5377
  },
5341
5378
  "Account Profile"
5342
- ), /* @__PURE__ */ React49.createElement(
5379
+ ), /* @__PURE__ */ React50.createElement(
5343
5380
  "button",
5344
5381
  {
5345
5382
  onClick: () => setActiveTab("BILLING"),
5346
5383
  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"}`
5347
5384
  },
5348
5385
  "Billing"
5349
- )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React49.createElement(
5386
+ )), activeTab === "MEMBERS" && accountType === "ORGANIZATION" && /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React50.createElement(
5350
5387
  ConfirmationDialog,
5351
5388
  {
5352
5389
  isOpen: !!memberToRemove,
@@ -5359,7 +5396,7 @@ var UniversalSettings = ({
5359
5396
  onClose: () => setMemberToRemove(null),
5360
5397
  onConfirm: handleConfirmRemove
5361
5398
  }
5362
- ), !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(
5399
+ ), !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(
5363
5400
  "input",
5364
5401
  {
5365
5402
  type: "text",
@@ -5368,28 +5405,28 @@ var UniversalSettings = ({
5368
5405
  onChange: (e) => setLocalSearchQuery(e.target.value),
5369
5406
  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"
5370
5407
  }
5371
- )), /* @__PURE__ */ React49.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ React49.createElement(
5408
+ )), /* @__PURE__ */ React50.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ React50.createElement(
5372
5409
  "button",
5373
5410
  {
5374
5411
  onClick: () => setIsStatusModalOpen(true),
5375
5412
  className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
5376
5413
  },
5377
- /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: SearchList02Icon3, size: 16 })
5378
- ), /* @__PURE__ */ React49.createElement(
5414
+ /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: SearchList02Icon3, size: 16 })
5415
+ ), /* @__PURE__ */ React50.createElement(
5379
5416
  "button",
5380
5417
  {
5381
5418
  onClick: () => setIsRoleModalOpen(true),
5382
5419
  className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
5383
5420
  },
5384
- /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ListSettingIcon3, size: 16 })
5385
- ))), /* @__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(
5421
+ /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ListSettingIcon3, size: 16 })
5422
+ ))), /* @__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(
5386
5423
  "button",
5387
5424
  {
5388
5425
  onClick: () => setMemberToRemove(activeExpandedMember),
5389
5426
  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"
5390
5427
  },
5391
5428
  "Remove Access"
5392
- ), /* @__PURE__ */ React49.createElement(
5429
+ ), /* @__PURE__ */ React50.createElement(
5393
5430
  "button",
5394
5431
  {
5395
5432
  onClick: () => setExpandedId(null),
@@ -5398,14 +5435,14 @@ var UniversalSettings = ({
5398
5435
  "Close Profile"
5399
5436
  ))) : (
5400
5437
  // Standard List & Invite Header
5401
- /* @__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(
5438
+ /* @__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(
5402
5439
  "button",
5403
5440
  {
5404
5441
  onClick: () => setIsInviteMode(true),
5405
5442
  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"
5406
5443
  },
5407
5444
  "Invite Team"
5408
- )), !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(
5445
+ )), !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(
5409
5446
  "input",
5410
5447
  {
5411
5448
  type: "email",
@@ -5416,7 +5453,7 @@ var UniversalSettings = ({
5416
5453
  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",
5417
5454
  placeholder: "name@company.com"
5418
5455
  }
5419
- )), /* @__PURE__ */ React49.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React49.createElement(
5456
+ )), /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React50.createElement(
5420
5457
  ThreeDActionButton,
5421
5458
  {
5422
5459
  type: "submit",
@@ -5425,7 +5462,7 @@ var UniversalSettings = ({
5425
5462
  className: "w-full"
5426
5463
  },
5427
5464
  "Send Invitation"
5428
- ), /* @__PURE__ */ React49.createElement(
5465
+ ), /* @__PURE__ */ React50.createElement(
5429
5466
  "button",
5430
5467
  {
5431
5468
  type: "button",
@@ -5437,54 +5474,52 @@ var UniversalSettings = ({
5437
5474
  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"
5438
5475
  },
5439
5476
  "Cancel"
5440
- ))) : 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(
5477
+ ))) : 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(
5441
5478
  "div",
5442
5479
  {
5443
5480
  key: member.id,
5444
5481
  onClick: () => setExpandedId(member.id),
5445
5482
  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"
5446
5483
  },
5447
- /* @__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())))
5448
- ))), /* @__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(
5484
+ /* @__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())))
5485
+ ))), /* @__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(
5449
5486
  "button",
5450
5487
  {
5451
5488
  onClick: () => onMembersPageChange(membersCurrentPage - 1),
5452
5489
  disabled: membersCurrentPage <= 1 || isMembersLoading,
5453
5490
  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"
5454
5491
  },
5455
- /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ArrowLeft01Icon16, size: 14 })
5456
- ), /* @__PURE__ */ React49.createElement(
5492
+ /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ArrowLeft01Icon16, size: 14 })
5493
+ ), /* @__PURE__ */ React50.createElement(
5457
5494
  "button",
5458
5495
  {
5459
5496
  onClick: () => onMembersPageChange(membersCurrentPage + 1),
5460
5497
  disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0,
5461
5498
  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"
5462
5499
  },
5463
- /* @__PURE__ */ React49.createElement(HugeiconsIcon35, { icon: ArrowRight01Icon12, size: 14 })
5500
+ /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: ArrowRight01Icon12, size: 14 })
5464
5501
  ))))))
5465
- )), 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(
5466
- "button",
5467
- {
5468
- key: option,
5469
- onClick: () => {
5470
- onStatusFilterChange(option);
5471
- setIsStatusModalOpen(false);
5472
- },
5473
- 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"}`
5474
- },
5475
- /* @__PURE__ */ React49.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
5476
- ))), /* @__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(
5477
- "button",
5478
- {
5479
- key: option,
5480
- onClick: () => {
5481
- onRoleFilterChange(option);
5482
- setIsRoleModalOpen(false);
5483
- },
5484
- 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"}`
5485
- },
5486
- /* @__PURE__ */ React49.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
5487
- ))), /* @__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(
5502
+ )), /* @__PURE__ */ React50.createElement(
5503
+ ReusableOptions,
5504
+ {
5505
+ isOpen: isStatusModalOpen,
5506
+ onClose: () => setIsStatusModalOpen(false),
5507
+ title: "Status Filter",
5508
+ options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"],
5509
+ selectedOption: activeStatusFilter,
5510
+ onSelect: (status) => onStatusFilterChange(status)
5511
+ }
5512
+ ), /* @__PURE__ */ React50.createElement(
5513
+ ReusableOptions,
5514
+ {
5515
+ isOpen: isRoleModalOpen,
5516
+ onClose: () => setIsRoleModalOpen(false),
5517
+ title: "Role Filter",
5518
+ options: ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"],
5519
+ selectedOption: activeRoleFilter,
5520
+ onSelect: (role) => onRoleFilterChange(role)
5521
+ }
5522
+ )), 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(
5488
5523
  TextInput,
5489
5524
  {
5490
5525
  label: "Display Name",
@@ -5494,7 +5529,7 @@ var UniversalSettings = ({
5494
5529
  placeholder: "Sovereign User",
5495
5530
  maxLength: 50
5496
5531
  }
5497
- ), 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(
5532
+ ), 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(
5498
5533
  "input",
5499
5534
  {
5500
5535
  type: "text",
@@ -5506,7 +5541,7 @@ var UniversalSettings = ({
5506
5541
  className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed",
5507
5542
  placeholder: "workspace-handle"
5508
5543
  }
5509
- ), /* @__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(
5544
+ ), /* @__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(
5510
5545
  ThreeDActionButton,
5511
5546
  {
5512
5547
  type: "submit",
@@ -5515,7 +5550,7 @@ var UniversalSettings = ({
5515
5550
  className: "min-w-32"
5516
5551
  },
5517
5552
  "Save Changes"
5518
- ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ React49.createElement(
5553
+ ), hasAccountChanges && !isSavingAccount && !isAccountReadOnly && /* @__PURE__ */ React50.createElement(
5519
5554
  "button",
5520
5555
  {
5521
5556
  type: "button",
@@ -5526,14 +5561,15 @@ var UniversalSettings = ({
5526
5561
  className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none"
5527
5562
  },
5528
5563
  "Cancel"
5529
- ))))), 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(
5564
+ ))))), 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(
5530
5565
  "button",
5531
5566
  {
5532
5567
  onClick: onTopUp,
5533
- 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"
5568
+ 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",
5569
+ "aria-label": "Top Up Credits"
5534
5570
  },
5535
- "Top Up Credits"
5536
- )))), /* @__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."))));
5571
+ /* @__PURE__ */ React50.createElement(HugeiconsIcon36, { icon: PlusSignIcon3, size: 16 })
5572
+ )), /* @__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."))));
5537
5573
  };
5538
5574
  export {
5539
5575
  AppBento2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "16.1.95",
3
+ "version": "16.2.0",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",