themelia-react-ui 2.0.6 → 3.0.0

package/dist/blocks/admin.js

@@ -1,84 +1,85 @@
 "use client";
-import { v as e } from "../ui-provider-C-74NVLc.js";
+import { y as e } from "../ui-provider-Bu1S-o96.js";
 import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-DhuoqFy4.js";
-import { n as r } from "../buttons-DeW0bQeK.js";
-import { c as i, o as a } from "../typography-C7-YMW1S.js";
-import { o, s } from "../text.styles-B64My8RZ.js";
-import { r as c, t as l } from "../structure-DZJ2wbAU.js";
+import { t as n } from "../utils-BVbAG2J6.js";
+import { c as r, o as i } from "../typography-C0dELqYV.js";
+import { o as a, s as o } from "../text.styles-B64My8RZ.js";
+import { n as s } from "../buttons-pZVgPTZn.js";
+import { r as c, t as l } from "../structure-DElaQwwN.js";
 import { i as u } from "../tone-recipes-BPsRAvhu.js";
-import { h as d, m as f, p, v as m } from "../smart-card-B6vLxqa_.js";
-import { n as h } from "../action-menu-C0gjzLyE.js";
-import { m as g } from "../primitives-BkkQjYl7.js";
-import { t as _ } from "../icon-badge-npxF1SLX.js";
-import { t as v } from "../badge-wWauMgAt.js";
-import { t as y } from "../input-7KAc7XQL.js";
-import { t as b } from "../copyable-3fdHfMR3.js";
-import { t as ee } from "../form-field-CAPdwdnZ.js";
-import { s as te } from "../choice-inputs-DHGtx0QV.js";
-import { t as ne } from "../checkbox-MoyHIAPs.js";
-import { n as re } from "../display-CT_N2a3w.js";
-import { n as x, r as S, t as C } from "../collapsible-BzJ91LUG.js";
-import { c as w, n as T, o as E, r as D, t as O } from "../item-FfWnaYST.js";
-import { forwardRef as k, useCallback as A, useMemo as ie, useState as j } from "react";
-import { jsx as M, jsxs as N } from "react/jsx-runtime";
-import { Check as P, ChevronRight as F, Copy as I, KeyRound as L, Minus as R, Plus as z, Trash2 as B } from "lucide-react";
-import { toast as V } from "sonner";
+import { _ as d, f, m as p, p as m, t as h } from "../smart-card-C59z6KFO.js";
+import { n as g } from "../action-menu-D5343RwT.js";
+import { m as _ } from "../primitives-BlC1lXBr.js";
+import { t as v } from "../icon-badge-B0Kq7wom.js";
+import { t as y } from "../badge-oGiXblW7.js";
+import { t as b } from "../input-DfJyrjoR.js";
+import { t as x } from "../copyable-Bmr14W0d.js";
+import { t as S } from "../form-field-BdfCwSoQ.js";
+import { s as ee } from "../choice-inputs-oJEsrb5Y.js";
+import { t as te } from "../checkbox-Dy5_XBMZ.js";
+import { n as C, r as w, t as T } from "../collapsible-CRCCg_bO.js";
+import { c as E, n as D, o as O, r as k, t as A } from "../item-GJ9mvCcg.js";
+import { t as ne } from "../use-copy-feedback-CzcaqlLf.js";
+import { t as re } from "../content-block-hooks-Z3iKjqd1.js";
+import { forwardRef as ie, useCallback as j, useMemo as ae, useState as M } from "react";
+import { jsx as N, jsxs as P } from "react/jsx-runtime";
+import { Check as F, ChevronRight as I, Copy as L, KeyRound as R, Minus as z, Plus as oe, Trash2 as se } from "lucide-react";
+import { toast as B } from "sonner";
 //#region src/components/blocks/admin/admin.strings.ts
-var H = {
+var V = {
 	editRole: "Edit role",
 	permissionAllowed: "Allowed",
 	permissionDenied: "Not allowed",
-	formatMemberCount: (e) => `${e} members`
+	formatMemberCount: (e) => `${e} ${e === 1 ? "member" : "members"}`
 };
 //#endregion
 //#region src/components/blocks/admin/role-permission/role-permission.tsx
-function U({ roleName: e, description: o, memberCount: s, sections: c, onEdit: u, className: d, strings: f }) {
-	let p = t(H, f);
-	return /* @__PURE__ */ N(l, {
+function H({ roleName: e, description: a, memberCount: o, sections: c, onEdit: u, className: d, strings: f }) {
+	let p = t(V, f);
+	return /* @__PURE__ */ P(l, {
 		gap: "2xl",
 		"data-component": "role-permission",
 		"data-slot": "role-permission",
 		className: n("role-permission--component", d),
 		children: [
-			/* @__PURE__ */ N(l, {
+			/* @__PURE__ */ P(l, {
 				gap: "normal",
 				className: "role-permission--header",
-				children: [/* @__PURE__ */ N(l, {
+				children: [/* @__PURE__ */ P(l, {
 					direction: "horizontal",
 					wrap: !0,
 					align: "center",
 					gap: "sm",
-					children: [/* @__PURE__ */ M(i, {
+					children: [/* @__PURE__ */ N(r, {
 						weight: "semibold",
 						children: e
-					}), s !== void 0 && /* @__PURE__ */ M(v, { children: p.formatMemberCount(s) })]
-				}), !!o && /* @__PURE__ */ M(i, {
+					}), o !== void 0 && /* @__PURE__ */ N(y, { children: p.formatMemberCount(o) })]
+				}), !!a && /* @__PURE__ */ N(r, {
 					size: "xs",
 					type: "secondary",
-					children: o
+					children: a
 				})]
 			}),
-			/* @__PURE__ */ M(l, {
+			/* @__PURE__ */ N(l, {
 				gap: "xl",
-				children: c.map((e) => /* @__PURE__ */ N(l, {
+				children: c.map((e) => /* @__PURE__ */ P(l, {
 					gap: "md",
-					children: [/* @__PURE__ */ M(a, { children: e.name }), /* @__PURE__ */ M("div", {
+					children: [/* @__PURE__ */ N(i, { children: e.name }), /* @__PURE__ */ N("div", {
 						className: "flex flex-wrap gap-space-md",
-						children: e.permissions.map((e) => /* @__PURE__ */ N("div", {
+						children: e.permissions.map((e) => /* @__PURE__ */ P("div", {
 							className: "flex items-center gap-space-sm",
-							children: [/* @__PURE__ */ M("span", {
+							children: [/* @__PURE__ */ N("span", {
 								role: "img",
 								"aria-label": `${e.label}: ${e.active ? p.permissionAllowed : p.permissionDenied}`,
 								className: n("inline-flex size-icon-sm shrink-0", e.active ? "text-success" : "text-muted-foreground"),
-								children: e.active ? /* @__PURE__ */ M(P, {
+								children: e.active ? /* @__PURE__ */ N(F, {
 									className: "size-full",
 									"aria-hidden": !0
-								}) : /* @__PURE__ */ M(R, {
+								}) : /* @__PURE__ */ N(z, {
 									className: "size-full",
 									"aria-hidden": !0
 								})
-							}), /* @__PURE__ */ M(i, {
+							}), /* @__PURE__ */ N(r, {
 								className: e.active ? "text-foreground" : "text-muted-foreground",
 								children: e.label
 							})]
@@ -86,9 +87,9 @@ function U({ roleName: e, description: o, memberCount: s, sections: c, onEdit: u
 					})]
 				}, e.name))
 			}),
-			!!u && /* @__PURE__ */ M("div", {
+			!!u && /* @__PURE__ */ N("div", {
 				className: "role-permission--actions",
-				children: /* @__PURE__ */ M(r, {
+				children: /* @__PURE__ */ N(s, {
 					tone: "neutral",
 					buttonStyle: "outline",
 					size: "sm",
@@ -99,10 +100,10 @@ function U({ roleName: e, description: o, memberCount: s, sections: c, onEdit: u
 		]
 	});
 }
-U.displayName = "RolePermission";
+H.displayName = "RolePermission";
 //#endregion
 //#region src/components/blocks/admin/api-key-list/api-key-list.strings.ts
-var W = {
+var U = {
 	title: "API keys",
 	addAria: "Add API key",
 	rowMenuAria: "Key actions",
@@ -112,108 +113,102 @@ var W = {
 	copyToastSuccess: "Copied to clipboard",
 	copyToastError: "Failed to copy",
 	emptyMessage: "No keys yet."
-}, G = "sm", K = k(function({ items: e, defaultOpen: a = !0, open: o, onOpenChange: s, onAdd: c, onDelete: l, onCopy: u, title: d, className: f, strings: p }, m) {
-	let h = t(W, p), g = o !== void 0, [_, v] = j(a), y = g ? o : _, b = A((e) => {
-		g || v(e), s?.(e);
-	}, [g, s]);
-	return /* @__PURE__ */ M("div", {
-		ref: m,
+}, W = "sm", G = ie(function({ items: e, defaultOpen: i = !0, open: a, onOpenChange: o, onAdd: c, onDelete: l, onCopy: u, disabled: d = !1, pendingIds: f, title: p, className: m, strings: h }, g) {
+	let _ = t(U, h), v = a !== void 0, [y, b] = M(i), x = v ? a : y, S = j((e) => {
+		v || b(e), o?.(e);
+	}, [v, o]);
+	return /* @__PURE__ */ N("div", {
+		ref: g,
 		"data-component": "api-key-list",
 		"data-slot": "api-key-list",
-		className: n("api-key-list--component @container/api-key-list min-w-0", f),
-		children: /* @__PURE__ */ N(C, {
-			open: y,
-			onOpenChange: b,
-			children: [/* @__PURE__ */ N("div", {
+		className: n("api-key-list--component @container/api-key-list min-w-0", m),
+		children: /* @__PURE__ */ P(T, {
+			open: x,
+			onOpenChange: S,
+			children: [/* @__PURE__ */ P("div", {
 				className: "flex items-center gap-space-md",
-				children: [/* @__PURE__ */ M(S, {
-					asChild: !0,
-					children: /* @__PURE__ */ N(r, {
-						type: "button",
-						tone: "secondary",
-						buttonStyle: "ghost",
-						size: "md",
-						className: "h-action flex-1 justify-start gap-space-md rounded-radius px-0 py-0 text-left",
-						children: [/* @__PURE__ */ M(F, {
-							"aria-hidden": "true",
-							className: n("size-icon text-muted-foreground transition-transform", y && "rotate-90")
-						}), /* @__PURE__ */ M(i, {
-							tag: "span",
-							weight: "semibold",
-							children: d ?? h.title
-						})]
-					})
-				}), !!c && /* @__PURE__ */ M(r, {
+				children: [/* @__PURE__ */ N(w, { render: /* @__PURE__ */ P(s, {
+					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
-					size: G,
+					size: "md",
+					className: "h-action flex-1 justify-start gap-space-md rounded-radius px-0 py-0 text-left",
+					children: [/* @__PURE__ */ N(I, {
+						"aria-hidden": "true",
+						className: n("size-icon text-muted-foreground transition-transform", x && "rotate-90")
+					}), /* @__PURE__ */ N(r, {
+						tag: "span",
+						weight: "semibold",
+						children: p ?? _.title
+					})]
+				}) }), !!c && /* @__PURE__ */ N(s, {
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: W,
 					iconOnly: !0,
 					onClick: c,
-					"aria-label": h.addAria,
-					children: /* @__PURE__ */ M(z, { className: "size-icon" })
+					disabled: d,
+					"aria-label": _.addAria,
+					children: /* @__PURE__ */ N(oe, { className: "size-icon" })
 				})]
-			}), /* @__PURE__ */ M(x, {
+			}), /* @__PURE__ */ N(C, {
 				className: "pt-space-lg",
-				children: e.length === 0 ? /* @__PURE__ */ M(i, {
+				children: e.length === 0 ? /* @__PURE__ */ N(r, {
 					type: "secondary",
-					children: h.emptyMessage
-				}) : /* @__PURE__ */ M(E, {
+					children: _.emptyMessage
+				}) : /* @__PURE__ */ N(O, {
 					role: "list",
 					className: "gap-0",
-					children: e.map((e) => /* @__PURE__ */ M(q, {
+					children: e.map((e) => /* @__PURE__ */ N(K, {
 						item: e,
 						onDelete: l,
 						onCopy: u,
-						copyMenuLabel: h.copyMenuItem,
-						copiedMenuLabel: h.copiedMenuItem,
-						deleteMenuLabel: h.deleteMenuItem,
-						rowMenuAria: h.rowMenuAria,
-						copyToastSuccess: h.copyToastSuccess,
-						copyToastError: h.copyToastError
+						disabled: d,
+						pending: f?.includes(e.id) ?? !1,
+						copyMenuLabel: _.copyMenuItem,
+						copiedMenuLabel: _.copiedMenuItem,
+						deleteMenuLabel: _.deleteMenuItem,
+						rowMenuAria: _.rowMenuAria,
+						copyToastSuccess: _.copyToastSuccess,
+						copyToastError: _.copyToastError
 					}, e.id))
 				})
 			})]
 		})
 	});
 });
-K.displayName = "ApiKeyList";
-function q({ item: e, onDelete: t, onCopy: n, copyMenuLabel: r, copiedMenuLabel: a, deleteMenuLabel: o, rowMenuAria: s, copyToastSuccess: c, copyToastError: l }) {
-	let [u, d] = j(!1), f = A(async () => {
-		try {
-			await navigator.clipboard.writeText(e.value), d(!0), setTimeout(() => d(!1), 1500), V.success(c), n?.(e.id, e);
-		} catch {
-			V.error(l);
-		}
-	}, [
-		e,
-		n,
-		c,
-		l
-	]), p = e.displayValue ?? e.value, m = [...e.copyable === !1 ? [] : [{
+G.displayName = "ApiKeyList";
+function K({ item: e, onDelete: t, onCopy: n, disabled: i, pending: a, copyMenuLabel: o, copiedMenuLabel: s, deleteMenuLabel: c, rowMenuAria: l, copyToastSuccess: u, copyToastError: d }) {
+	let { copied: f, copy: p } = ne((e) => {
+		B.error(d);
+	}, e.value), m = i || a || !!e.disabled, h = async () => {
+		await p(e.value) && (B.success(u), n?.(e.id, e));
+	}, y = e.displayValue ?? e.value, b = [...e.copyable === !1 ? [] : [{
 		id: "copy",
-		label: u ? a : r,
-		icon: I,
+		label: f ? s : o,
+		icon: L,
 		onClick: () => {
-			f();
+			h();
 		},
-		disabled: e.disabled
+		disabled: m
 	}], ...t ? [{
 		id: "delete",
-		label: o,
-		icon: B,
+		label: c,
+		icon: se,
 		tone: "destructive",
-		disabled: e.disabled,
+		disabled: m,
 		onClick: () => t(e.id, e)
 	}] : []];
-	return /* @__PURE__ */ N(O, {
+	return /* @__PURE__ */ P(A, {
 		size: "sm",
 		role: "listitem",
 		"data-slot": "api-key-row",
+		"aria-busy": a || void 0,
 		className: "flex-nowrap",
 		children: [
-			!!e.icon && /* @__PURE__ */ M(w, {
+			!!e.icon && /* @__PURE__ */ N(E, {
 				variant: "icon",
-				children: /* @__PURE__ */ M(_, {
+				children: /* @__PURE__ */ N(v, {
 					size: "sm",
 					shape: "square",
 					tone: "neutral",
@@ -221,76 +216,78 @@ function q({ item: e, onDelete: t, onCopy: n, copyMenuLabel: r, copiedMenuLabel:
 					children: e.icon
 				})
 			}),
-			/* @__PURE__ */ N(D, {
+			/* @__PURE__ */ P(k, {
 				className: "min-w-0 flex-row items-center gap-space-md",
-				children: [/* @__PURE__ */ M(i, {
+				children: [/* @__PURE__ */ N(r, {
 					tag: "span",
 					weight: "medium",
 					className: "w-20 shrink-0 truncate @md/api-key-list:w-24",
 					children: e.name
-				}), /* @__PURE__ */ M(g, {
+				}), /* @__PURE__ */ N(_, {
 					className: "min-w-0 flex-1 truncate rounded-radius bg-muted px-space-md py-space-xs",
-					children: p
+					children: y
 				})]
 			}),
-			/* @__PURE__ */ M(T, {
+			/* @__PURE__ */ P(D, {
 				className: "shrink-0",
-				children: /* @__PURE__ */ M(h, {
-					actions: m,
-					srText: s,
+				children: [/* @__PURE__ */ N(g, {
+					actions: b,
+					srText: `${l}: ${e.name}`,
 					align: "end",
 					closeOnSelect: !0,
-					buttonProps: { size: G }
-				})
+					disabled: m,
+					buttonProps: { size: W }
+				}), /* @__PURE__ */ N("span", {
+					role: "status",
+					className: "sr-only",
+					children: f ? u : ""
+				})]
 			})
 		]
 	});
 }
-q.displayName = "ApiKeyRow";
+K.displayName = "ApiKeyRow";
 //#endregion
 //#region src/components/blocks/admin/action-surfaces/index.tsx
-function J({ title: e, description: t, confirmation: r, action: a, icon: o, padding: s = "md", surface: c = "card", className: d }) {
-	return /* @__PURE__ */ M(re, {
-		"data-component": "sensitive-action-card",
-		"data-slot": "sensitive-action-card",
+function q({ title: e, description: t, confirmation: i, action: a, icon: o, padding: s = "md", surface: c = "card", className: d }) {
+	return /* @__PURE__ */ N(h, {
 		padding: s,
 		surface: c,
-		className: n("sensitive-action-card--component", u.destructive.edge, d),
-		contentClassName: "sensitive-action-card--content grid gap-space-lg",
-		children: /* @__PURE__ */ N(l, {
+		...re(n("sensitive-action-card--component", u.destructive.edge, d), { content: "sensitive-action-card--content grid gap-space-lg" }, s),
+		children: /* @__PURE__ */ P(l, {
 			direction: "horizontal",
 			align: "start",
 			gap: "lg",
 			className: "min-w-0",
 			children: [
-				!!o && /* @__PURE__ */ M(_, {
+				!!o && /* @__PURE__ */ N(v, {
 					icon: o,
 					tone: "destructive",
 					shape: "square",
 					size: "md"
 				}),
-				/* @__PURE__ */ N(l, {
+				/* @__PURE__ */ P(l, {
 					gap: "normal",
 					className: "min-w-0 flex-1",
 					children: [
-						/* @__PURE__ */ M(i, {
+						/* @__PURE__ */ N(r, {
 							weight: "semibold",
 							children: e
 						}),
-						!!t && /* @__PURE__ */ M(i, {
+						!!t && /* @__PURE__ */ N(r, {
 							type: "secondary",
 							children: t
 						}),
-						!!r && /* @__PURE__ */ M(i, {
+						!!i && /* @__PURE__ */ N(r, {
 							tag: "div",
 							type: "secondary",
 							role: "note",
 							className: "sensitive-action-card--confirmation",
-							children: r
+							children: i
 						})
 					]
 				}),
-				!!a && /* @__PURE__ */ M("div", {
+				!!a && /* @__PURE__ */ N("div", {
 					className: "shrink-0",
 					children: a
 				})
@@ -298,42 +295,52 @@ function J({ title: e, description: t, confirmation: r, action: a, icon: o, padd
 		})
 	});
 }
-var Y = {
+var J = {
 	title: "Secret created",
 	description: "Copy this value now. It may not be shown again.",
 	copySuccess: "Secret copied"
 };
-function X({ value: e, displayValue: r, title: a, description: o, action: s, className: c, strings: u }) {
-	let h = t(Y, u);
-	return /* @__PURE__ */ N(p, {
+function ce({ value: e, displayValue: i, title: a, description: o, action: s, className: c, strings: u }) {
+	let h = t(J, u);
+	return /* @__PURE__ */ P(f, {
 		"data-component": "copyable-secret-alert",
 		"data-slot": "copyable-secret-alert",
 		tone: "success",
 		className: n("copyable-secret-alert--component", c),
 		children: [
-			/* @__PURE__ */ M(L, { className: "size-icon" }),
-			/* @__PURE__ */ M(m, { children: a ?? h.title }),
-			/* @__PURE__ */ M(d, { children: /* @__PURE__ */ N(l, {
-				render: /* @__PURE__ */ M("span", {}),
+			/* @__PURE__ */ N(R, { className: "size-icon" }),
+			/* @__PURE__ */ N(d, { children: a ?? h.title }),
+			/* @__PURE__ */ N(p, { children: /* @__PURE__ */ P(l, {
+				render: /* @__PURE__ */ N("span", {}),
 				gap: "md",
-				children: [/* @__PURE__ */ M(i, {
+				children: [/* @__PURE__ */ N(r, {
 					tag: "span",
 					type: "secondary",
 					children: o ?? h.description
-				}), /* @__PURE__ */ M(b, {
+				}), /* @__PURE__ */ N(x, {
 					value: e,
-					displayValue: r ?? e,
+					displayValue: i ?? e,
 					mono: !0,
 					truncate: !0,
 					className: "copyable-secret-alert--value max-w-full rounded-radius bg-background px-space-md py-space-xs",
 					strings: { success: h.copySuccess }
 				})]
 			}) }),
-			!!s && /* @__PURE__ */ M(f, { children: s })
+			!!s && /* @__PURE__ */ N(m, { children: s })
 		]
 	});
 }
-var Z = {
+var le = {
+	title: "Active tokens",
+	addAria: "Add token",
+	rowMenuAria: "Token actions",
+	copyMenuItem: "Copy token",
+	copiedMenuItem: "Copied",
+	deleteMenuItem: "Revoke",
+	copyToastSuccess: "Copied to clipboard",
+	copyToastError: "Failed to copy",
+	emptyMessage: "No tokens yet."
+}, ue = {
 	title: "API tokens",
 	description: "Create and revoke access tokens.",
 	nameLabel: "Token name",
@@ -344,112 +351,116 @@ var Z = {
 	createdTitle: "Token created",
 	createdDescription: "Copy this token now. It will not be shown again."
 };
-function Q({ tokens: u, abilities: d = [], createdToken: f, name: p, defaultName: m = "", onNameChange: h, selectedAbilities: g, defaultSelectedAbilities: _ = [], onSelectedAbilitiesChange: v, onCreateToken: b, onRevokeToken: x, onRevokeAllTokens: S, onAfterMutate: C, onError: w, creating: T = !1, revokingAll: E = !1, disabled: D = !1, className: O, strings: k }) {
-	let P = t(Z, k), { defaultTextSize: F } = e(), I = n(te, s[F ?? "sm"], o.normal), L = p !== void 0, R = g !== void 0, [B, V] = j(m), [H, U] = j([..._]), [W, G] = j(null), q = L ? p : B, J = ie(() => R ? [...g] : H, [
-		H,
-		R,
-		g
-	]), Y = T || W === "create", Q = E || W === "revoke-all", ae = A((e) => {
-		L || V(e), h?.(e);
-	}, [L, h]), oe = A((e) => {
-		R || U(e), v?.(e);
-	}, [R, v]), se = A((e, t) => {
-		let n = t === !0 ? Array.from(/* @__PURE__ */ new Set([...J, e])) : J.filter((t) => t !== e);
-		oe(n);
-	}, [J, oe]), $ = A(async (e, t, n) => {
-		G(e);
+function Y({ tokens: u, abilities: d = [], createdToken: f, name: p, defaultName: m = "", onNameChange: g, selectedAbilities: _, defaultSelectedAbilities: v = [], onSelectedAbilitiesChange: y, onCreateToken: x, onRevokeToken: C, onRevokeAllTokens: w, onAfterMutate: T, onError: E, creating: D = !1, revokingAll: O = !1, disabled: k = !1, className: A, strings: ne, listStrings: ie, surface: F = "flat", padding: I = F === "flat" ? "none" : "md" }) {
+	let L = t(ue, ne), R = t(le, ie), { defaultTextSize: z } = e(), se = n(ee, o[z ?? "sm"], a.normal), B = p !== void 0, V = _ !== void 0, [H, U] = M(m), [W, K] = M([...v]), [q, J] = M(null), [Y, de] = M([]), X = B ? p : H, Z = ae(() => V ? [..._] : W, [
+		W,
+		V,
+		_
+	]), Q = D || q === "create", fe = O || q === "revoke-all", pe = j((e) => {
+		B || U(e), g?.(e);
+	}, [B, g]), me = j((e) => {
+		V || K(e), y?.(e);
+	}, [V, y]), he = j((e, t) => {
+		let n = t === !0 ? Array.from(/* @__PURE__ */ new Set([...Z, e])) : Z.filter((t) => t !== e);
+		me(n);
+	}, [Z, me]), $ = j(async (e, t, n) => {
+		J(e);
 		try {
-			await t(), C?.({
+			await t(), T?.({
 				type: e,
 				payload: n
 			});
 		} catch (t) {
-			w?.(t, { phase: e });
+			E?.(t, { phase: e });
 		} finally {
-			G(null);
+			J(null);
 		}
-	}, [C, w]), ce = A(() => {
-		if (!b) return;
+	}, [T, E]), ge = j(() => {
+		if (!x) return;
 		let e = {
-			name: q,
-			abilities: J
+			name: X,
+			abilities: Z
 		};
-		$("create", () => b(e), e);
+		$("create", () => x(e), e);
+	}, [
+		x,
+		Z,
+		X,
+		$
+	]), _e = j((e, t) => {
+		C && !Y.includes(e) && (de((t) => [...t, e]), $("revoke", () => C(e, t), t).finally(() => de((t) => t.filter((t) => t !== e))));
 	}, [
-		b,
-		J,
-		q,
+		C,
+		Y,
 		$
-	]), le = A((e, t) => {
-		x && $("revoke", () => x(e, t), t);
-	}, [x, $]), ue = A(() => {
-		S && $("revoke-all", S);
-	}, [S, $]);
-	return /* @__PURE__ */ N(re, {
-		"data-component": "api-token-manager",
-		"data-slot": "api-token-manager",
-		title: P.title,
-		description: P.description,
-		headerAction: S ? /* @__PURE__ */ M(r, {
+	]), ve = j(() => {
+		w && $("revoke-all", w);
+	}, [w, $]);
+	return /* @__PURE__ */ P(h, {
+		surface: F,
+		padding: I,
+		title: L.title,
+		description: L.description,
+		headerAction: w ? /* @__PURE__ */ N(s, {
 			type: "button",
 			tone: "destructive",
 			buttonStyle: "outline",
-			loading: Q,
-			disabled: D || u.length === 0,
-			onClick: ue,
-			children: P.revokeAll
+			loading: fe,
+			disabled: k || u.length === 0,
+			onClick: ve,
+			children: L.revokeAll
 		}) : void 0,
-		className: n("api-token-manager--component", O),
-		children: [/* @__PURE__ */ N(l, {
+		...re(n("api-token-manager--component", A)),
+		children: [/* @__PURE__ */ P(l, {
 			gap: "xl",
 			className: "api-token-manager--content",
-			children: [!!f && /* @__PURE__ */ M(X, {
+			children: [!!f && /* @__PURE__ */ N(ce, {
 				value: f.value,
 				displayValue: f.displayValue,
-				title: f.name ?? P.createdTitle,
-				description: P.createdDescription
-			}), /* @__PURE__ */ M("div", {
+				title: f.name ?? L.createdTitle,
+				description: L.createdDescription
+			}), /* @__PURE__ */ N("div", {
 				className: "api-token-manager--form",
-				children: /* @__PURE__ */ N(l, {
+				children: /* @__PURE__ */ P(l, {
 					gap: "lg",
 					children: [
-						/* @__PURE__ */ M(ee, {
-							label: P.nameLabel,
-							children: /* @__PURE__ */ M(y, {
-								value: q,
-								placeholder: P.namePlaceholder,
-								onChange: (e) => ae(e.currentTarget.value),
-								disabled: D || Y
+						/* @__PURE__ */ N(S, {
+							label: L.nameLabel,
+							children: /* @__PURE__ */ N(b, {
+								value: X,
+								placeholder: L.namePlaceholder,
+								onChange: (e) => pe(e.currentTarget.value),
+								disabled: k || Q
 							})
 						}),
-						d.length > 0 && /* @__PURE__ */ N(l, {
+						d.length > 0 && /* @__PURE__ */ P(l, {
 							gap: "md",
 							className: "api-token-manager--abilities",
-							children: [/* @__PURE__ */ M(a, { children: P.abilitiesLabel }), /* @__PURE__ */ M(c, {
+							children: [/* @__PURE__ */ N(i, { children: L.abilitiesLabel }), /* @__PURE__ */ N(c, {
 								columns: {
 									base: 1,
 									sm: 2
 								},
 								gap: "md",
 								children: d.map((e) => {
-									let t = J.includes(e.id);
-									return /* @__PURE__ */ N("label", {
+									let t = Z.includes(e.id);
+									return /* @__PURE__ */ P("label", {
 										className: "flex min-w-0 items-start gap-space-md rounded-radius border border-border bg-background px-row-x py-row-y",
-										children: [/* @__PURE__ */ M("span", {
-											className: I,
-											children: /* @__PURE__ */ M(ne, {
+										children: [/* @__PURE__ */ N("span", {
+											className: se,
+											children: /* @__PURE__ */ N(te, {
 												checked: t,
-												disabled: D || Y || e.disabled,
-												onCheckedChange: (t) => se(e.id, t)
+												disabled: k || Q || e.disabled,
+												onCheckedChange: (t) => he(e.id, t)
 											})
-										}), /* @__PURE__ */ N(l, {
-											render: /* @__PURE__ */ M("span", {}),
+										}), /* @__PURE__ */ P(l, {
+											render: /* @__PURE__ */ N("span", {}),
 											gap: "dense",
-											children: [/* @__PURE__ */ M(i, {
+											children: [/* @__PURE__ */ N(r, {
 												tag: "span",
 												weight: "medium",
 												children: e.label
-											}), !!e.description && /* @__PURE__ */ M(i, {
+											}), !!e.description && /* @__PURE__ */ N(r, {
 												tag: "span",
 												size: "xs",
 												type: "secondary",
@@ -460,30 +471,33 @@ function Q({ tokens: u, abilities: d = [], createdToken: f, name: p, defaultName
 								})
 							})]
 						}),
-						/* @__PURE__ */ M(l, {
+						/* @__PURE__ */ N(l, {
 							direction: "horizontal",
 							gap: "none",
 							justify: "end",
-							children: /* @__PURE__ */ N(r, {
+							children: /* @__PURE__ */ P(s, {
 								type: "button",
 								tone: "primary",
-								loading: Y,
-								disabled: D || !b || q.trim().length === 0,
-								onClick: ce,
-								children: [/* @__PURE__ */ M(z, { className: "size-icon" }), P.create]
+								loading: Q,
+								disabled: k || !x || X.trim().length === 0,
+								onClick: ge,
+								children: [/* @__PURE__ */ N(oe, { className: "size-icon" }), L.create]
 							})
 						})
 					]
 				})
 			})]
-		}), /* @__PURE__ */ M(K, {
+		}), /* @__PURE__ */ N(G, {
 			items: u,
-			onDelete: x ? le : void 0
+			onDelete: C ? _e : void 0,
+			disabled: k || fe,
+			pendingIds: Y,
+			strings: R
 		})]
 	});
 }
-Q.displayName = "ApiTokenManager";
+Y.displayName = "ApiTokenManager";
 //#endregion
-export { K as ApiKeyList, Q as ApiTokenManager, X as CopyableSecretAlert, U as RolePermission, J as SensitiveActionCard, W as defaultApiKeyListStrings, Z as defaultApiTokenManagerStrings, Y as defaultCopyableSecretAlertStrings };
+export { G as ApiKeyList, Y as ApiTokenManager, ce as CopyableSecretAlert, H as RolePermission, q as SensitiveActionCard, U as defaultApiKeyListStrings, le as defaultApiTokenListStrings, ue as defaultApiTokenManagerStrings, J as defaultCopyableSecretAlertStrings };
 
 //# sourceMappingURL=admin.js.map