themelia-react-ui 1.0.2 → 2.0.1

package/dist/blocks/admin.js

@@ -1,95 +1,100 @@
 "use client";
-import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-BvH9PSmq.js";
-import { a as n, r } from "../typography-BxQgiZyw.js";
-import { t as i } from "../button-BZDasD04.js";
-import { r as a, t as o } from "../structure-CRdqVawd.js";
-import { h as s, m as c, p as l, v as u } from "../smart-card-DjGVV2xr.js";
-import { n as d } from "../action-menu-Drxw_vJk.js";
-import { m as f } from "../primitives-C7ff0QaI.js";
-import { t as p } from "../icon-badge-Btc6pQrp.js";
-import { t as m } from "../badge-CzId1Wlm.js";
-import { t as h } from "../input-SX9V0AL3.js";
-import { t as g } from "../copyable-BTSByfmq.js";
-import { t as _ } from "../checkbox-BQNDjUCh.js";
-import { n as v } from "../display-CS6Hbk18.js";
-import { n as y, r as b, t as x } from "../collapsible-ClvC7Bj3.js";
-import { t as S } from "../form-field-CZwrkP7m.js";
-import { c as C, n as w, r as T, t as ee } from "../item-DE4YnuJx.js";
-import { forwardRef as E, useCallback as D, useMemo as te, useState as O } from "react";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { Check as j, ChevronRight as M, Copy as N, KeyRound as P, Lock as F, Minus as I, Pencil as L, Plus as R, ShieldAlert as z, Trash2 as B } from "lucide-react";
+import { m as e } from "../ui-provider-1D_NSYzO.js";
+import { useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-l5LpDw2z.js";
+import { n as r } from "../buttons-SbIcm1HJ.js";
+import { a as i, s as a } from "../typography-DTRkE9zL.js";
+import { a as o, i as s } from "../text.styles-g4He6UIW.js";
+import { r as c, t as l } from "../structure-DC2dygdA.js";
+import { r as u } from "../tone-recipes-CPoExcTE.js";
+import { h as d, m as f, p, v as m } from "../smart-card-lFKxn5Hu.js";
+import { n as h } from "../action-menu-TzCoSlwL.js";
+import { m as g } from "../primitives-B-CkiEMU.js";
+import { t as _ } from "../icon-badge-CAuKupo9.js";
+import { t as v } from "../badge-MrKVNzW9.js";
+import { t as y } from "../input-DWhBBBww.js";
+import { t as b } from "../copyable-B3Gwgdqc.js";
+import { t as ee } from "../form-field-DUt4UxSV.js";
+import { s as te } from "../choice-inputs-t6w3ATNz.js";
+import { t as ne } from "../checkbox-DhB6K0bK.js";
+import { n as re } from "../display-DsQTVzMz.js";
+import { n as x, r as S, t as C } from "../collapsible-D8AEGU1-.js";
+import { c as w, n as T, o as E, r as D, t as O } from "../item-DEmDiTlD.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";
 //#region src/components/blocks/admin/admin.strings.ts
 var H = {
-	editRole: "Edit Role",
+	editRole: "Edit role",
 	permissionAllowed: "Allowed",
 	permissionDenied: "Not allowed",
 	formatMemberCount: (e) => `${e} members`
 };
 //#endregion
 //#region src/components/blocks/admin/role-permission/role-permission.tsx
-function U({ roleName: a, description: s, memberCount: c, sections: l, onEdit: u, className: d, strings: f }) {
-	let p = e(H, f);
-	return /* @__PURE__ */ A("div", {
+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, {
+		gap: "2xl",
 		"data-component": "role-permission",
 		"data-slot": "role-permission",
-		className: t("role-permission--component", d),
+		className: n("role-permission--component", d),
 		children: [
-			/* @__PURE__ */ A(o, {
-				direction: "horizontal",
-				gap: "md",
-				align: "start",
-				justify: "between",
+			/* @__PURE__ */ N(l, {
+				gap: "normal",
 				className: "role-permission--header",
-				children: [/* @__PURE__ */ A(o, {
-					gap: "normal",
-					className: "flex-1",
-					children: [/* @__PURE__ */ k(n, {
+				children: [/* @__PURE__ */ N(l, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "sm",
+					children: [/* @__PURE__ */ M(a, {
 						weight: "semibold",
-						children: a
-					}), !!s && /* @__PURE__ */ k(n, {
-						size: "xs",
-						type: "secondary",
-						children: s
-					})]
-				}), c !== void 0 && /* @__PURE__ */ k(m, {
-					tone: "info",
-					children: p.formatMemberCount(c)
+						children: e
+					}), s !== void 0 && /* @__PURE__ */ M(v, { children: p.formatMemberCount(s) })]
+				}), !!o && /* @__PURE__ */ M(a, {
+					size: "xs",
+					type: "secondary",
+					children: o
 				})]
 			}),
-			/* @__PURE__ */ k(o, {
+			/* @__PURE__ */ M(l, {
 				gap: "xl",
-				className: "mt-space-2xl",
-				children: l.map((e) => /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(r, { children: e.name }), /* @__PURE__ */ k("div", {
-					className: "mt-space-md flex flex-wrap gap-space-md",
-					children: e.permissions.map((e) => /* @__PURE__ */ A("div", {
-						className: "flex items-center gap-space-sm",
-						children: [/* @__PURE__ */ k("span", {
-							role: "img",
-							"aria-label": `${e.label}: ${e.active ? p.permissionAllowed : p.permissionDenied}`,
-							className: t("inline-flex size-icon-sm shrink-0", e.active ? "text-success" : "text-muted-foreground"),
-							children: e.active ? /* @__PURE__ */ k(j, {
-								className: "size-full",
-								"aria-hidden": !0
-							}) : /* @__PURE__ */ k(I, {
-								className: "size-full",
-								"aria-hidden": !0
-							})
-						}), /* @__PURE__ */ k(n, {
-							className: e.active ? "text-foreground" : "text-muted-foreground",
-							children: e.label
-						})]
-					}, e.label))
-				})] }, e.name))
+				children: c.map((e) => /* @__PURE__ */ N(l, {
+					gap: "md",
+					children: [/* @__PURE__ */ M(i, { children: e.name }), /* @__PURE__ */ M("div", {
+						className: "flex flex-wrap gap-space-md",
+						children: e.permissions.map((e) => /* @__PURE__ */ N("div", {
+							className: "flex items-center gap-space-sm",
+							children: [/* @__PURE__ */ M("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, {
+									className: "size-full",
+									"aria-hidden": !0
+								}) : /* @__PURE__ */ M(R, {
+									className: "size-full",
+									"aria-hidden": !0
+								})
+							}), /* @__PURE__ */ M(a, {
+								className: e.active ? "text-foreground" : "text-muted-foreground",
+								children: e.label
+							})]
+						}, e.label))
+					})]
+				}, e.name))
 			}),
-			!!u && /* @__PURE__ */ k(i, {
-				tone: "secondary",
-				buttonStyle: "ghost",
-				icon: L,
-				className: "mt-space-xl",
-				onClick: u,
-				children: p.editRole
+			!!u && /* @__PURE__ */ M("div", {
+				className: "role-permission--actions",
+				children: /* @__PURE__ */ M(r, {
+					tone: "neutral",
+					buttonStyle: "outline",
+					size: "sm",
+					onClick: u,
+					children: p.editRole
+				})
 			})
 		]
 	});
@@ -107,88 +112,89 @@ var W = {
 	copyToastSuccess: "Copied to clipboard",
 	copyToastError: "Failed to copy",
 	emptyMessage: "No keys yet."
-}, G = E(function({ items: r, defaultOpen: a = !0, open: s, onOpenChange: c, onAdd: l, onDelete: u, onCopy: d, title: f, className: p, strings: m }, h) {
-	let g = e(W, m), _ = s !== void 0, [v, S] = O(a), C = _ ? s : v, w = D((e) => {
-		_ || S(e), c?.(e);
-	}, [_, c]);
-	return /* @__PURE__ */ k("div", {
-		ref: h,
+}, G = "sm", K = k(function({ items: e, defaultOpen: i = !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(i), y = g ? o : _, b = A((e) => {
+		g || v(e), s?.(e);
+	}, [g, s]);
+	return /* @__PURE__ */ M("div", {
+		ref: m,
 		"data-component": "api-key-list",
 		"data-slot": "api-key-list",
-		className: t("api-key-list--component @container/api-key-list min-w-0", p),
-		children: /* @__PURE__ */ A(x, {
-			open: C,
-			onOpenChange: w,
-			children: [/* @__PURE__ */ A("div", {
+		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: "flex items-center gap-space-md",
-				children: [/* @__PURE__ */ k(b, {
+				children: [/* @__PURE__ */ M(S, {
 					asChild: !0,
-					children: /* @__PURE__ */ A(i, {
+					children: /* @__PURE__ */ N(r, {
 						type: "button",
 						tone: "secondary",
 						buttonStyle: "ghost",
 						size: "md",
 						className: "h-action flex-1 justify-start gap-space-md rounded-inner px-0 py-0 text-left",
-						children: [/* @__PURE__ */ k(M, {
+						children: [/* @__PURE__ */ M(F, {
 							"aria-hidden": "true",
-							className: t("size-icon text-muted-foreground transition-transform", C && "rotate-90")
-						}), /* @__PURE__ */ k(n, {
+							className: n("size-icon text-muted-foreground transition-transform", y && "rotate-90")
+						}), /* @__PURE__ */ M(a, {
 							tag: "span",
 							weight: "semibold",
-							children: f ?? g.title
+							children: d ?? h.title
 						})]
 					})
-				}), !!l && /* @__PURE__ */ k(i, {
+				}), !!c && /* @__PURE__ */ M(r, {
 					tone: "secondary",
 					buttonStyle: "ghost",
-					size: "sm",
+					size: G,
 					iconOnly: !0,
-					onClick: l,
-					"aria-label": g.addAria,
-					children: /* @__PURE__ */ k(R, { className: "size-icon" })
+					onClick: c,
+					"aria-label": h.addAria,
+					children: /* @__PURE__ */ M(z, { className: "size-icon" })
 				})]
-			}), /* @__PURE__ */ k(y, {
+			}), /* @__PURE__ */ M(x, {
 				className: "pt-space-lg",
-				children: r.length === 0 ? /* @__PURE__ */ k(n, {
+				children: e.length === 0 ? /* @__PURE__ */ M(a, {
 					type: "secondary",
-					children: g.emptyMessage
-				}) : /* @__PURE__ */ k(o, {
-					gap: "lg",
-					children: r.map((e) => /* @__PURE__ */ k(K, {
+					children: h.emptyMessage
+				}) : /* @__PURE__ */ M(E, {
+					role: "list",
+					className: "gap-0",
+					children: e.map((e) => /* @__PURE__ */ M(q, {
 						item: e,
-						onDelete: u,
-						onCopy: d,
-						copyMenuLabel: g.copyMenuItem,
-						copiedMenuLabel: g.copiedMenuItem,
-						deleteMenuLabel: g.deleteMenuItem,
-						rowMenuAria: g.rowMenuAria,
-						copyToastSuccess: g.copyToastSuccess,
-						copyToastError: g.copyToastError
+						onDelete: l,
+						onCopy: u,
+						copyMenuLabel: h.copyMenuItem,
+						copiedMenuLabel: h.copiedMenuItem,
+						deleteMenuLabel: h.deleteMenuItem,
+						rowMenuAria: h.rowMenuAria,
+						copyToastSuccess: h.copyToastSuccess,
+						copyToastError: h.copyToastError
 					}, e.id))
 				})
 			})]
 		})
 	});
 });
-G.displayName = "ApiKeyList";
-function K({ item: e, onDelete: t, onCopy: r, copyMenuLabel: i, copiedMenuLabel: a, deleteMenuLabel: o, rowMenuAria: s, copyToastSuccess: c, copyToastError: l }) {
-	let [u, m] = O(!1), h = D(async () => {
+K.displayName = "ApiKeyList";
+function q({ item: e, onDelete: t, onCopy: n, copyMenuLabel: r, copiedMenuLabel: i, deleteMenuLabel: o, rowMenuAria: s, copyToastSuccess: c, copyToastError: l }) {
+	let [u, d] = j(!1), f = A(async () => {
 		try {
-			await navigator.clipboard.writeText(e.value), m(!0), setTimeout(() => m(!1), 1500), V.success(c), r?.(e.id, e);
+			await navigator.clipboard.writeText(e.value), d(!0), setTimeout(() => d(!1), 1500), V.success(c), n?.(e.id, e);
 		} catch {
 			V.error(l);
 		}
 	}, [
 		e,
-		r,
+		n,
 		c,
 		l
-	]), g = e.displayValue ?? e.value, _ = [...e.copyable === !1 ? [] : [{
+	]), p = e.displayValue ?? e.value, m = [...e.copyable === !1 ? [] : [{
 		id: "copy",
-		label: u ? a : i,
-		icon: N,
+		label: u ? i : r,
+		icon: I,
 		onClick: () => {
-			h();
+			f();
 		},
 		disabled: e.disabled
 	}], ...t ? [{
@@ -199,133 +205,135 @@ function K({ item: e, onDelete: t, onCopy: r, copyMenuLabel: i, copiedMenuLabel:
 		disabled: e.disabled,
 		onClick: () => t(e.id, e)
 	}] : []];
-	return /* @__PURE__ */ A(ee, {
+	return /* @__PURE__ */ N(O, {
 		size: "sm",
+		role: "listitem",
 		"data-slot": "api-key-row",
 		className: "flex-nowrap",
 		children: [
-			/* @__PURE__ */ k(C, {
+			!!e.icon && /* @__PURE__ */ M(w, {
 				variant: "icon",
-				children: /* @__PURE__ */ k(p, {
+				children: /* @__PURE__ */ M(_, {
 					size: "sm",
 					shape: "square",
 					tone: "neutral",
 					bordered: !0,
-					className: "text-success",
-					children: e.icon ?? /* @__PURE__ */ k(F, { className: "size-icon-md" })
+					children: e.icon
 				})
 			}),
-			/* @__PURE__ */ A(T, {
+			/* @__PURE__ */ N(D, {
 				className: "min-w-0 flex-row items-center gap-space-md",
-				children: [/* @__PURE__ */ k(n, {
+				children: [/* @__PURE__ */ M(a, {
 					tag: "span",
 					weight: "medium",
 					className: "w-20 shrink-0 truncate @md/api-key-list:w-24",
 					children: e.name
-				}), /* @__PURE__ */ k(f, {
+				}), /* @__PURE__ */ M(g, {
 					className: "min-w-0 flex-1 truncate rounded-inner bg-muted px-space-md py-space-xs",
-					children: g
+					children: p
 				})]
 			}),
-			/* @__PURE__ */ k(w, {
+			/* @__PURE__ */ M(T, {
 				className: "shrink-0",
-				children: /* @__PURE__ */ k(d, {
-					actions: _,
+				children: /* @__PURE__ */ M(h, {
+					actions: m,
 					srText: s,
 					align: "end",
 					closeOnSelect: !0,
-					buttonProps: {
-						buttonStyle: "ghost",
-						tone: "secondary"
-					}
+					buttonProps: { size: G }
 				})
 			})
 		]
 	});
 }
-K.displayName = "ApiKeyRow";
+q.displayName = "ApiKeyRow";
 //#endregion
 //#region src/components/blocks/admin/action-surfaces/index.tsx
-function q({ title: e, description: r, confirmation: i, action: a, icon: c = z, padding: u = "md", surface: d = "card", className: f }) {
-	return /* @__PURE__ */ A(v, {
+function J({ title: e, description: t, confirmation: r, action: i, icon: o, padding: s = "md", surface: c = "card", className: d }) {
+	return /* @__PURE__ */ M(re, {
 		"data-component": "sensitive-action-card",
 		"data-slot": "sensitive-action-card",
-		padding: u,
-		surface: d,
-		className: t("sensitive-action-card--component border-destructive/30", f),
+		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__ */ A(o, {
+		children: /* @__PURE__ */ N(l, {
 			direction: "horizontal",
 			align: "start",
 			gap: "lg",
 			className: "min-w-0",
 			children: [
-				/* @__PURE__ */ k(p, {
-					icon: c,
+				!!o && /* @__PURE__ */ M(_, {
+					icon: o,
 					tone: "destructive",
 					shape: "square",
 					size: "md"
 				}),
-				/* @__PURE__ */ A(o, {
+				/* @__PURE__ */ N(l, {
 					gap: "normal",
 					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ k(n, {
-						weight: "semibold",
-						children: e
-					}), !!r && /* @__PURE__ */ k(n, {
-						type: "secondary",
-						children: r
-					})]
+					children: [
+						/* @__PURE__ */ M(a, {
+							weight: "semibold",
+							children: e
+						}),
+						!!t && /* @__PURE__ */ M(a, {
+							type: "secondary",
+							children: t
+						}),
+						!!r && /* @__PURE__ */ M(a, {
+							tag: "div",
+							type: "secondary",
+							role: "note",
+							className: "sensitive-action-card--confirmation",
+							children: r
+						})
+					]
 				}),
-				!!a && /* @__PURE__ */ k("div", {
+				!!i && /* @__PURE__ */ M("div", {
 					className: "shrink-0",
-					children: a
+					children: i
 				})
 			]
-		}), !!i && /* @__PURE__ */ k(l, {
-			tone: "destructive",
-			role: "note",
-			className: "sensitive-action-card--confirmation",
-			children: /* @__PURE__ */ k(s, { children: i })
-		})]
+		})
 	});
 }
-var J = {
+var Y = {
 	title: "Secret created",
 	description: "Copy this value now. It may not be shown again.",
 	copySuccess: "Secret copied"
 };
-function Y({ value: r, displayValue: i, title: a, description: d, action: f, className: p, strings: m }) {
-	let h = e(J, m);
-	return /* @__PURE__ */ A(l, {
+function X({ value: e, displayValue: r, title: i, description: o, action: s, className: c, strings: u }) {
+	let h = t(Y, u);
+	return /* @__PURE__ */ N(p, {
 		"data-component": "copyable-secret-alert",
 		"data-slot": "copyable-secret-alert",
 		tone: "success",
-		className: t("copyable-secret-alert--component", p),
+		className: n("copyable-secret-alert--component", c),
 		children: [
-			/* @__PURE__ */ k(P, { className: "size-icon" }),
-			/* @__PURE__ */ k(u, { children: a ?? h.title }),
-			/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(o, {
-				render: /* @__PURE__ */ k("span", {}),
+			/* @__PURE__ */ M(L, { className: "size-icon" }),
+			/* @__PURE__ */ M(m, { children: i ?? h.title }),
+			/* @__PURE__ */ M(d, { children: /* @__PURE__ */ N(l, {
+				render: /* @__PURE__ */ M("span", {}),
 				gap: "md",
-				children: [/* @__PURE__ */ k(n, {
+				children: [/* @__PURE__ */ M(a, {
 					tag: "span",
 					type: "secondary",
-					children: d ?? h.description
-				}), /* @__PURE__ */ k(g, {
-					value: r,
-					displayValue: i ?? r,
+					children: o ?? h.description
+				}), /* @__PURE__ */ M(b, {
+					value: e,
+					displayValue: r ?? e,
 					mono: !0,
 					truncate: !0,
 					className: "copyable-secret-alert--value max-w-full rounded-inner bg-background px-space-md py-space-xs",
 					strings: { success: h.copySuccess }
 				})]
 			}) }),
-			!!f && /* @__PURE__ */ k(c, { children: f })
+			!!s && /* @__PURE__ */ M(f, { children: s })
 		]
 	});
 }
-var X = {
+var Z = {
 	title: "API tokens",
 	description: "Create and revoke access tokens.",
 	nameLabel: "Token name",
@@ -336,20 +344,20 @@ var X = {
 	createdTitle: "Token created",
 	createdDescription: "Copy this token now. It will not be shown again."
 };
-function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName: d = "", onNameChange: f, selectedAbilities: p, defaultSelectedAbilities: m = [], onSelectedAbilitiesChange: g, onCreateToken: y, onRevokeToken: b, onRevokeAllTokens: x, onAfterMutate: C, onError: w, creating: T = !1, revokingAll: ee = !1, disabled: E = !1, className: j, strings: M }) {
-	let N = e(X, M), P = u !== void 0, F = p !== void 0, [I, L] = O(d), [z, V] = O([...m]), [H, U] = O(null), W = P ? u : I, K = te(() => F ? [...p] : z, [
-		z,
-		F,
-		p
-	]), q = T || H === "create", J = ee || H === "revoke-all", Z = D((e) => {
-		P || L(e), f?.(e);
-	}, [P, f]), Q = D((e) => {
-		F || V(e), g?.(e);
-	}, [F, g]), ne = D((e, t) => {
-		let n = t === !0 ? Array.from(/* @__PURE__ */ new Set([...K, e])) : K.filter((t) => t !== e);
-		Q(n);
-	}, [K, Q]), $ = D(async (e, t, n) => {
-		U(e);
+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, o[F ?? "sm"], s.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);
 		try {
 			await t(), C?.({
 				type: e,
@@ -358,87 +366,90 @@ function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName
 		} catch (t) {
 			w?.(t, { phase: e });
 		} finally {
-			U(null);
+			G(null);
 		}
-	}, [C, w]), re = D(() => {
-		if (!y) return;
+	}, [C, w]), ce = A(() => {
+		if (!b) return;
 		let e = {
-			name: W,
-			abilities: K
+			name: q,
+			abilities: J
 		};
-		$("create", () => y(e), e);
+		$("create", () => b(e), e);
 	}, [
-		y,
-		K,
-		W,
+		b,
+		J,
+		q,
 		$
-	]), ie = D((e, t) => {
-		b && $("revoke", () => b(e, t), t);
-	}, [b, $]), ae = D(() => {
-		x && $("revoke-all", x);
-	}, [x, $]);
-	return /* @__PURE__ */ A(v, {
+	]), 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: N.title,
-		description: N.description,
-		headerAction: x ? /* @__PURE__ */ A(i, {
+		title: P.title,
+		description: P.description,
+		headerAction: S ? /* @__PURE__ */ M(r, {
 			type: "button",
 			tone: "destructive",
 			buttonStyle: "outline",
-			loading: J,
-			disabled: E || s.length === 0,
-			onClick: ae,
-			children: [/* @__PURE__ */ k(B, { className: "size-icon" }), N.revokeAll]
+			loading: Q,
+			disabled: D || u.length === 0,
+			onClick: ue,
+			children: P.revokeAll
 		}) : void 0,
-		className: t("api-token-manager--component", j),
-		children: [/* @__PURE__ */ A(o, {
+		className: n("api-token-manager--component", O),
+		children: [/* @__PURE__ */ N(l, {
 			gap: "xl",
 			className: "api-token-manager--content",
-			children: [!!l && /* @__PURE__ */ k(Y, {
-				value: l.value,
-				displayValue: l.displayValue,
-				title: l.name ?? N.createdTitle,
-				description: N.createdDescription
-			}), /* @__PURE__ */ k("div", {
-				className: "api-token-manager--form rounded-radius border border-border/70 bg-muted/20 p-surface",
-				children: /* @__PURE__ */ A(o, {
+			children: [!!f && /* @__PURE__ */ M(X, {
+				value: f.value,
+				displayValue: f.displayValue,
+				title: f.name ?? P.createdTitle,
+				description: P.createdDescription
+			}), /* @__PURE__ */ M("div", {
+				className: "api-token-manager--form",
+				children: /* @__PURE__ */ N(l, {
 					gap: "lg",
 					children: [
-						/* @__PURE__ */ k(S, {
-							label: N.nameLabel,
-							children: /* @__PURE__ */ k(h, {
-								value: W,
-								placeholder: N.namePlaceholder,
-								onChange: (e) => Z(e.currentTarget.value),
-								disabled: E || q
+						/* @__PURE__ */ M(ee, {
+							label: P.nameLabel,
+							children: /* @__PURE__ */ M(y, {
+								value: q,
+								placeholder: P.namePlaceholder,
+								onChange: (e) => ae(e.currentTarget.value),
+								disabled: D || Y
 							})
 						}),
-						c.length > 0 && /* @__PURE__ */ A(o, {
+						d.length > 0 && /* @__PURE__ */ N(l, {
 							gap: "md",
 							className: "api-token-manager--abilities",
-							children: [/* @__PURE__ */ k(r, { children: N.abilitiesLabel }), /* @__PURE__ */ k(a, {
+							children: [/* @__PURE__ */ M(i, { children: P.abilitiesLabel }), /* @__PURE__ */ M(c, {
 								columns: {
 									base: 1,
 									sm: 2
 								},
 								gap: "md",
-								children: c.map((e) => {
-									let t = K.includes(e.id);
-									return /* @__PURE__ */ A("label", {
-										className: "flex min-w-0 items-start gap-space-md rounded-radius border border-border/70 bg-background px-row-x py-row-y",
-										children: [/* @__PURE__ */ k(_, {
-											checked: t,
-											disabled: E || q || e.disabled,
-											onCheckedChange: (t) => ne(e.id, t)
-										}), /* @__PURE__ */ A(o, {
-											render: /* @__PURE__ */ k("span", {}),
+								children: d.map((e) => {
+									let t = J.includes(e.id);
+									return /* @__PURE__ */ N("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, {
+												checked: t,
+												disabled: D || Y || e.disabled,
+												onCheckedChange: (t) => se(e.id, t)
+											})
+										}), /* @__PURE__ */ N(l, {
+											render: /* @__PURE__ */ M("span", {}),
 											gap: "dense",
-											children: [/* @__PURE__ */ k(n, {
+											children: [/* @__PURE__ */ M(a, {
 												tag: "span",
 												weight: "medium",
 												children: e.label
-											}), !!e.description && /* @__PURE__ */ k(n, {
+											}), !!e.description && /* @__PURE__ */ M(a, {
 												tag: "span",
 												size: "xs",
 												type: "secondary",
@@ -449,30 +460,30 @@ function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName
 								})
 							})]
 						}),
-						/* @__PURE__ */ k(o, {
+						/* @__PURE__ */ M(l, {
 							direction: "horizontal",
 							gap: "none",
 							justify: "end",
-							children: /* @__PURE__ */ A(i, {
+							children: /* @__PURE__ */ N(r, {
 								type: "button",
 								tone: "primary",
-								loading: q,
-								disabled: E || !y || W.trim().length === 0,
-								onClick: re,
-								children: [/* @__PURE__ */ k(R, { className: "size-icon" }), N.create]
+								loading: Y,
+								disabled: D || !b || q.trim().length === 0,
+								onClick: ce,
+								children: [/* @__PURE__ */ M(z, { className: "size-icon" }), P.create]
 							})
 						})
 					]
 				})
 			})]
-		}), /* @__PURE__ */ k(G, {
-			items: s,
-			onDelete: b ? ie : void 0
+		}), /* @__PURE__ */ M(K, {
+			items: u,
+			onDelete: x ? le : void 0
 		})]
 	});
 }
-Z.displayName = "ApiTokenManager";
+Q.displayName = "ApiTokenManager";
 //#endregion
-export { G as ApiKeyList, Z as ApiTokenManager, Y as CopyableSecretAlert, U as RolePermission, q as SensitiveActionCard, W as defaultApiKeyListStrings, X as defaultApiTokenManagerStrings, J as defaultCopyableSecretAlertStrings };
+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 };
 
 //# sourceMappingURL=admin.js.map