themelia-react-ui 1.0.1 → 2.0.0

package/dist/blocks/admin.js

@@ -1,28 +1,28 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-C2EKeIw3.js";
-import { n } from "../buttons-Co6GavvM.js";
-import { a as r, r as i } from "../typography-Cv8MT-82.js";
-import { r as a, t as o } from "../structure-MvKVq-oL.js";
-import { _ as s, f as c, m as l, p as u } from "../smart-card-CYLn46e6.js";
-import { n as d } from "../action-menu-Cx3SdfbN.js";
-import { m as f } from "../primitives-DKPOGVpj.js";
-import { t as p } from "../icon-badge-Dv0RYQwj.js";
-import { t as m } from "../badge-BZXZT9wd.js";
-import { t as h } from "../input-WwYQZJzG.js";
-import { t as g } from "../copyable-B7SBXJMr.js";
-import { n as _ } from "../display-CFM5myut.js";
-import { n as v, r as y, t as b } from "../collapsible-DsnktFNv.js";
-import { t as x } from "../form-field-Bn7ZH1rA.js";
-import { t as S } from "../checkbox-BavDRjF7.js";
-import { c as C, n as w, r as T, t as E } from "../item-pJ0GsOiJ.js";
-import { forwardRef as D, useCallback as O, useMemo as ee, useState as k } from "react";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
-import { Check as M, ChevronRight as te, 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 { t } from "../utils-Cospvlj1.js";
+import { a as n, s as r } from "../typography-CAr3dQhX.js";
+import { t as i } from "../button-BS3KDg00.js";
+import { r as a, t as o } from "../structure-hzCW-XsV.js";
+import { h as s, m as c, p as l, v as u } from "../smart-card-Bek-TwUp.js";
+import { n as d } from "../action-menu-BTpyPWJ2.js";
+import { m as f } from "../primitives-BHrwQXFC.js";
+import { t as p } from "../icon-badge-DKlaKXoo.js";
+import { t as m } from "../badge-0tATj-tW.js";
+import { t as h } from "../input-DhQdBnV3.js";
+import { t as g } from "../copyable-DDjTeW_j.js";
+import { t as _ } from "../form-field-VZRULhUK.js";
+import { t as v } from "../checkbox-B7ygNTYp.js";
+import { n as y } from "../display-DrdvPwF0.js";
+import { n as b, r as x, t as S } from "../collapsible-oMUGM4tr.js";
+import { c as C, n as w, o as T, r as E, t as D } from "../item-xzh8Df65.js";
+import { forwardRef as O, useCallback as k, useMemo as A, 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`
@@ -31,65 +31,66 @@ var H = {
 //#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__ */ j("div", {
+	return /* @__PURE__ */ N(o, {
+		gap: "2xl",
 		"data-component": "role-permission",
 		"data-slot": "role-permission",
 		className: t("role-permission--component", d),
 		children: [
-			/* @__PURE__ */ j(o, {
-				direction: "horizontal",
-				gap: "md",
-				align: "start",
-				justify: "between",
+			/* @__PURE__ */ N(o, {
+				gap: "normal",
 				className: "role-permission--header",
-				children: [/* @__PURE__ */ j(o, {
-					gap: "normal",
-					className: "flex-1",
-					children: [/* @__PURE__ */ A(r, {
+				children: [/* @__PURE__ */ N(o, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "sm",
+					children: [/* @__PURE__ */ M(r, {
 						weight: "semibold",
 						children: a
-					}), !!s && /* @__PURE__ */ A(r, {
-						size: "xs",
-						type: "secondary",
-						children: s
-					})]
-				}), c !== void 0 && /* @__PURE__ */ A(m, {
-					tone: "info",
-					children: p.formatMemberCount(c)
+					}), c !== void 0 && /* @__PURE__ */ M(m, { children: p.formatMemberCount(c) })]
+				}), !!s && /* @__PURE__ */ M(r, {
+					size: "xs",
+					type: "secondary",
+					children: s
 				})]
 			}),
-			/* @__PURE__ */ A(o, {
+			/* @__PURE__ */ M(o, {
 				gap: "xl",
-				className: "mt-space-2xl",
-				children: l.map((e) => /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A(i, { children: e.name }), /* @__PURE__ */ A("div", {
-					className: "mt-space-md flex flex-wrap gap-space-md",
-					children: e.permissions.map((e) => /* @__PURE__ */ j("div", {
-						className: "flex items-center gap-space-sm",
-						children: [/* @__PURE__ */ A("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__ */ A(M, {
-								className: "size-full",
-								"aria-hidden": !0
-							}) : /* @__PURE__ */ A(I, {
-								className: "size-full",
-								"aria-hidden": !0
-							})
-						}), /* @__PURE__ */ A(r, {
-							className: e.active ? "text-foreground" : "text-muted-foreground",
-							children: e.label
-						})]
-					}, e.label))
-				})] }, e.name))
+				children: l.map((e) => /* @__PURE__ */ N(o, {
+					gap: "md",
+					children: [/* @__PURE__ */ M(n, { 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: t("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(r, {
+								className: e.active ? "text-foreground" : "text-muted-foreground",
+								children: e.label
+							})]
+						}, e.label))
+					})]
+				}, e.name))
 			}),
-			!!u && /* @__PURE__ */ A(n, {
-				tone: "secondary",
-				buttonStyle: "ghost",
-				icon: L,
-				className: "mt-5",
-				onClick: u,
-				children: p.editRole
+			!!u && /* @__PURE__ */ M("div", {
+				className: "role-permission--actions",
+				children: /* @__PURE__ */ M(i, {
+					tone: "neutral",
+					buttonStyle: "outline",
+					size: "sm",
+					onClick: u,
+					children: p.editRole
+				})
 			})
 		]
 	});
@@ -107,63 +108,64 @@ var W = {
 	copyToastSuccess: "Copied to clipboard",
 	copyToastError: "Failed to copy",
 	emptyMessage: "No keys yet."
-}, G = D(function({ items: i, 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, [x, S] = k(a), C = _ ? s : x, w = O((e) => {
-		_ || S(e), c?.(e);
-	}, [_, c]);
-	return /* @__PURE__ */ A("div", {
-		ref: h,
+}, G = O(function({ items: n, defaultOpen: a = !0, open: o, onOpenChange: s, onAdd: c, onDelete: l, onCopy: u, title: d, className: f, strings: p }, m) {
+	let h = e(W, p), g = o !== void 0, [_, v] = j(a), y = g ? o : _, C = k((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__ */ j(b, {
-			open: C,
-			onOpenChange: w,
-			children: [/* @__PURE__ */ j("div", {
+		className: t("api-key-list--component @container/api-key-list min-w-0", f),
+		children: /* @__PURE__ */ N(S, {
+			open: y,
+			onOpenChange: C,
+			children: [/* @__PURE__ */ N("div", {
 				className: "flex items-center gap-space-md",
-				children: [/* @__PURE__ */ A(y, {
+				children: [/* @__PURE__ */ M(x, {
 					asChild: !0,
-					children: /* @__PURE__ */ j(n, {
+					children: /* @__PURE__ */ N(i, {
 						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__ */ A(te, {
+						className: "h-action flex-1 justify-start gap-space-md rounded-inner px-0 py-0 text-left",
+						children: [/* @__PURE__ */ M(F, {
 							"aria-hidden": "true",
-							className: t("size-icon text-muted-foreground transition-transform", C && "rotate-90")
-						}), /* @__PURE__ */ A(r, {
+							className: t("size-icon text-muted-foreground transition-transform", y && "rotate-90")
+						}), /* @__PURE__ */ M(r, {
 							tag: "span",
 							weight: "semibold",
-							children: f ?? g.title
+							children: d ?? h.title
 						})]
 					})
-				}), !!l && /* @__PURE__ */ A(n, {
+				}), !!c && /* @__PURE__ */ M(i, {
 					tone: "secondary",
 					buttonStyle: "ghost",
 					size: "sm",
 					iconOnly: !0,
-					onClick: l,
-					"aria-label": g.addAria,
-					children: /* @__PURE__ */ A(R, { className: "size-icon" })
+					onClick: c,
+					"aria-label": h.addAria,
+					children: /* @__PURE__ */ M(z, { className: "size-icon" })
 				})]
-			}), /* @__PURE__ */ A(v, {
-				className: "pt-3",
-				children: i.length === 0 ? /* @__PURE__ */ A(r, {
+			}), /* @__PURE__ */ M(b, {
+				className: "pt-space-lg",
+				children: n.length === 0 ? /* @__PURE__ */ M(r, {
 					type: "secondary",
-					children: g.emptyMessage
-				}) : /* @__PURE__ */ A(o, {
-					gap: "lg",
-					children: i.map((e) => /* @__PURE__ */ A(K, {
+					children: h.emptyMessage
+				}) : /* @__PURE__ */ M(T, {
+					role: "list",
+					className: "gap-0",
+					children: n.map((e) => /* @__PURE__ */ M(K, {
 						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))
 				})
 			})]
@@ -172,7 +174,7 @@ var W = {
 });
 G.displayName = "ApiKeyList";
 function K({ item: e, onDelete: t, onCopy: n, copyMenuLabel: i, copiedMenuLabel: a, deleteMenuLabel: o, rowMenuAria: s, copyToastSuccess: c, copyToastError: l }) {
-	let [u, m] = k(!1), h = O(async () => {
+	let [u, m] = j(!1), h = k(async () => {
 		try {
 			await navigator.clipboard.writeText(e.value), m(!0), setTimeout(() => m(!1), 1500), V.success(c), n?.(e.id, e);
 		} catch {
@@ -186,7 +188,7 @@ function K({ item: e, onDelete: t, onCopy: n, copyMenuLabel: i, copiedMenuLabel:
 	]), g = e.displayValue ?? e.value, _ = [...e.copyable === !1 ? [] : [{
 		id: "copy",
 		label: u ? a : i,
-		icon: N,
+		icon: I,
 		onClick: () => {
 			h();
 		},
@@ -199,44 +201,46 @@ function K({ item: e, onDelete: t, onCopy: n, copyMenuLabel: i, copiedMenuLabel:
 		disabled: e.disabled,
 		onClick: () => t(e.id, e)
 	}] : []];
-	return /* @__PURE__ */ j(E, {
+	return /* @__PURE__ */ N(D, {
 		size: "sm",
+		role: "listitem",
 		"data-slot": "api-key-row",
 		className: "flex-nowrap",
 		children: [
-			/* @__PURE__ */ A(C, {
+			!!e.icon && /* @__PURE__ */ M(C, {
 				variant: "icon",
-				children: /* @__PURE__ */ A(p, {
+				children: /* @__PURE__ */ M(p, {
 					size: "sm",
 					shape: "square",
 					tone: "neutral",
 					bordered: !0,
-					className: "text-success",
-					children: e.icon ?? /* @__PURE__ */ A(F, { className: "size-icon-md" })
+					children: e.icon
 				})
 			}),
-			/* @__PURE__ */ j(T, {
-				className: "min-w-0 flex-row items-center gap-2.5",
-				children: [/* @__PURE__ */ A(r, {
+			/* @__PURE__ */ N(E, {
+				className: "min-w-0 flex-row items-center gap-space-md",
+				children: [/* @__PURE__ */ M(r, {
 					tag: "span",
 					weight: "medium",
 					className: "w-20 shrink-0 truncate @md/api-key-list:w-24",
 					children: e.name
-				}), /* @__PURE__ */ A(f, {
-					className: "min-w-0 flex-1 truncate rounded-radius-sm bg-muted px-2 py-1",
+				}), /* @__PURE__ */ M(f, {
+					className: "min-w-0 flex-1 truncate rounded-inner bg-muted px-space-md py-space-xs",
 					children: g
 				})]
 			}),
-			/* @__PURE__ */ A(w, {
+			/* @__PURE__ */ M(w, {
 				className: "shrink-0",
-				children: /* @__PURE__ */ A(d, {
+				children: /* @__PURE__ */ M(d, {
 					actions: _,
 					srText: s,
 					align: "end",
 					closeOnSelect: !0,
 					buttonProps: {
 						buttonStyle: "ghost",
-						tone: "secondary"
+						tone: "secondary",
+						size: "sm",
+						className: "size-action-sm"
 					}
 				})
 			})
@@ -246,48 +250,53 @@ function K({ item: e, onDelete: t, onCopy: n, copyMenuLabel: i, copiedMenuLabel:
 K.displayName = "ApiKeyRow";
 //#endregion
 //#region src/components/blocks/admin/action-surfaces/index.tsx
-function q({ title: e, description: n, confirmation: i, action: a, icon: s = z, padding: u = "md", surface: d = "card", className: f }) {
-	return /* @__PURE__ */ j(_, {
+function q({ title: e, description: n, confirmation: i, action: a, icon: s, padding: c = "md", surface: l = "card", className: u }) {
+	return /* @__PURE__ */ M(y, {
 		"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: c,
+		surface: l,
+		className: t("sensitive-action-card--component border-destructive/30", u),
 		contentClassName: "sensitive-action-card--content grid gap-space-lg",
-		children: [/* @__PURE__ */ j(o, {
+		children: /* @__PURE__ */ N(o, {
 			direction: "horizontal",
 			align: "start",
 			gap: "lg",
 			className: "min-w-0",
 			children: [
-				/* @__PURE__ */ A(p, {
+				!!s && /* @__PURE__ */ M(p, {
 					icon: s,
 					tone: "destructive",
 					shape: "square",
 					size: "md"
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ N(o, {
+					gap: "normal",
 					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ A(r, {
-						weight: "semibold",
-						children: e
-					}), !!n && /* @__PURE__ */ A(r, {
-						type: "secondary",
-						className: "mt-0.5",
-						children: n
-					})]
+					children: [
+						/* @__PURE__ */ M(r, {
+							weight: "semibold",
+							children: e
+						}),
+						!!n && /* @__PURE__ */ M(r, {
+							type: "secondary",
+							children: n
+						}),
+						!!i && /* @__PURE__ */ M(r, {
+							tag: "div",
+							type: "secondary",
+							role: "note",
+							className: "sensitive-action-card--confirmation",
+							children: i
+						})
+					]
 				}),
-				!!a && /* @__PURE__ */ A("div", {
+				!!a && /* @__PURE__ */ M("div", {
 					className: "shrink-0",
 					children: a
 				})
 			]
-		}), !!i && /* @__PURE__ */ A(c, {
-			tone: "destructive",
-			role: "note",
-			className: "sensitive-action-card--confirmation",
-			children: /* @__PURE__ */ A(l, { children: i })
-		})]
+		})
 	});
 }
 var J = {
@@ -297,31 +306,31 @@ var J = {
 };
 function Y({ value: n, displayValue: i, title: a, description: d, action: f, className: p, strings: m }) {
 	let h = e(J, m);
-	return /* @__PURE__ */ j(c, {
+	return /* @__PURE__ */ N(l, {
 		"data-component": "copyable-secret-alert",
 		"data-slot": "copyable-secret-alert",
 		tone: "success",
 		className: t("copyable-secret-alert--component", p),
 		children: [
-			/* @__PURE__ */ A(P, { className: "size-icon" }),
-			/* @__PURE__ */ A(s, { children: a ?? h.title }),
-			/* @__PURE__ */ A(l, { children: /* @__PURE__ */ j(o, {
-				render: /* @__PURE__ */ A("span", {}),
+			/* @__PURE__ */ M(L, { className: "size-icon" }),
+			/* @__PURE__ */ M(u, { children: a ?? h.title }),
+			/* @__PURE__ */ M(s, { children: /* @__PURE__ */ N(o, {
+				render: /* @__PURE__ */ M("span", {}),
 				gap: "md",
-				children: [/* @__PURE__ */ A(r, {
+				children: [/* @__PURE__ */ M(r, {
 					tag: "span",
 					type: "secondary",
 					children: d ?? h.description
-				}), /* @__PURE__ */ A(g, {
+				}), /* @__PURE__ */ M(g, {
 					value: n,
 					displayValue: i ?? n,
 					mono: !0,
 					truncate: !0,
-					className: "copyable-secret-alert--value max-w-full rounded-radius-md bg-background px-2 py-1",
+					className: "copyable-secret-alert--value max-w-full rounded-inner bg-background px-space-md py-space-xs",
 					strings: { success: h.copySuccess }
 				})]
 			}) }),
-			!!f && /* @__PURE__ */ A(u, { children: f })
+			!!f && /* @__PURE__ */ M(c, { children: f })
 		]
 	});
 }
@@ -336,20 +345,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: v, onRevokeToken: y, onRevokeAllTokens: b, onAfterMutate: C, onError: w, creating: T = !1, revokingAll: E = !1, disabled: D = !1, className: M, strings: te }) {
-	let N = e(X, te), P = u !== void 0, F = p !== void 0, [I, L] = k(d), [z, V] = k([...m]), [H, U] = k(null), W = P ? u : I, K = ee(() => F ? [...p] : z, [
-		z,
-		F,
+function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName: d = "", onNameChange: f, selectedAbilities: p, defaultSelectedAbilities: m = [], onSelectedAbilitiesChange: g, onCreateToken: b, onRevokeToken: x, onRevokeAllTokens: S, onAfterMutate: C, onError: w, creating: T = !1, revokingAll: E = !1, disabled: D = !1, className: O, strings: P }) {
+	let F = e(X, P), I = u !== void 0, L = p !== void 0, [R, B] = j(d), [V, H] = j([...m]), [U, W] = j(null), K = I ? u : R, q = A(() => L ? [...p] : V, [
+		V,
+		L,
 		p
-	]), q = T || H === "create", J = E || H === "revoke-all", Z = O((e) => {
-		P || L(e), f?.(e);
-	}, [P, f]), Q = O((e) => {
-		F || V(e), g?.(e);
-	}, [F, g]), ne = O((e, t) => {
-		let n = t === !0 ? Array.from(/* @__PURE__ */ new Set([...K, e])) : K.filter((t) => t !== e);
+	]), J = T || U === "create", Z = E || U === "revoke-all", ee = k((e) => {
+		I || B(e), f?.(e);
+	}, [I, f]), Q = k((e) => {
+		L || H(e), g?.(e);
+	}, [L, g]), te = k((e, t) => {
+		let n = t === !0 ? Array.from(/* @__PURE__ */ new Set([...q, e])) : q.filter((t) => t !== e);
 		Q(n);
-	}, [K, Q]), $ = O(async (e, t, n) => {
-		U(e);
+	}, [q, Q]), $ = k(async (e, t, n) => {
+		W(e);
 		try {
 			await t(), C?.({
 				type: e,
@@ -358,87 +367,87 @@ function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName
 		} catch (t) {
 			w?.(t, { phase: e });
 		} finally {
-			U(null);
+			W(null);
 		}
-	}, [C, w]), re = O(() => {
-		if (!v) return;
+	}, [C, w]), ne = k(() => {
+		if (!b) return;
 		let e = {
-			name: W,
-			abilities: K
+			name: K,
+			abilities: q
 		};
-		$("create", () => v(e), e);
+		$("create", () => b(e), e);
 	}, [
-		v,
+		b,
+		q,
 		K,
-		W,
 		$
-	]), ie = O((e, t) => {
-		y && $("revoke", () => y(e, t), t);
-	}, [y, $]), ae = O(() => {
-		b && $("revoke-all", b);
-	}, [b, $]);
-	return /* @__PURE__ */ j(_, {
+	]), re = k((e, t) => {
+		x && $("revoke", () => x(e, t), t);
+	}, [x, $]), ie = k(() => {
+		S && $("revoke-all", S);
+	}, [S, $]);
+	return /* @__PURE__ */ N(y, {
 		"data-component": "api-token-manager",
 		"data-slot": "api-token-manager",
-		title: N.title,
-		description: N.description,
-		headerAction: b ? /* @__PURE__ */ j(n, {
+		title: F.title,
+		description: F.description,
+		headerAction: S ? /* @__PURE__ */ M(i, {
 			type: "button",
 			tone: "destructive",
 			buttonStyle: "outline",
-			loading: J,
+			loading: Z,
 			disabled: D || s.length === 0,
-			onClick: ae,
-			children: [/* @__PURE__ */ A(B, { className: "size-icon" }), N.revokeAll]
+			onClick: ie,
+			children: F.revokeAll
 		}) : void 0,
-		className: t("api-token-manager--component", M),
-		children: [/* @__PURE__ */ j(o, {
+		className: t("api-token-manager--component", O),
+		children: [/* @__PURE__ */ N(o, {
 			gap: "xl",
 			className: "api-token-manager--content",
-			children: [!!l && /* @__PURE__ */ A(Y, {
+			children: [!!l && /* @__PURE__ */ M(Y, {
 				value: l.value,
 				displayValue: l.displayValue,
-				title: l.name ?? N.createdTitle,
-				description: N.createdDescription
-			}), /* @__PURE__ */ A("div", {
-				className: "api-token-manager--form rounded-radius border border-border/70 bg-muted/20 p-surface",
-				children: /* @__PURE__ */ j(o, {
+				title: l.name ?? F.createdTitle,
+				description: F.createdDescription
+			}), /* @__PURE__ */ M("div", {
+				className: "api-token-manager--form",
+				children: /* @__PURE__ */ N(o, {
 					gap: "lg",
 					children: [
-						/* @__PURE__ */ A(x, {
-							label: N.nameLabel,
-							children: /* @__PURE__ */ A(h, {
-								value: W,
-								placeholder: N.namePlaceholder,
-								onChange: (e) => Z(e.currentTarget.value),
-								disabled: D || q
+						/* @__PURE__ */ M(_, {
+							label: F.nameLabel,
+							children: /* @__PURE__ */ M(h, {
+								value: K,
+								placeholder: F.namePlaceholder,
+								onChange: (e) => ee(e.currentTarget.value),
+								disabled: D || J
 							})
 						}),
-						c.length > 0 && /* @__PURE__ */ j(o, {
+						c.length > 0 && /* @__PURE__ */ N(o, {
 							gap: "md",
 							className: "api-token-manager--abilities",
-							children: [/* @__PURE__ */ A(i, { children: N.abilitiesLabel }), /* @__PURE__ */ A(a, {
+							children: [/* @__PURE__ */ M(n, { children: F.abilitiesLabel }), /* @__PURE__ */ M(a, {
 								columns: {
 									base: 1,
 									sm: 2
 								},
 								gap: "md",
 								children: c.map((e) => {
-									let t = K.includes(e.id);
-									return /* @__PURE__ */ j("label", {
-										className: "flex min-w-0 items-start gap-space-md rounded-radius-md border border-border/70 bg-background px-3 py-2",
-										children: [/* @__PURE__ */ A(S, {
+									let t = q.includes(e.id);
+									return /* @__PURE__ */ N("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__ */ M(v, {
 											checked: t,
-											disabled: D || q || e.disabled,
-											onCheckedChange: (t) => ne(e.id, t)
-										}), /* @__PURE__ */ j(o, {
-											render: /* @__PURE__ */ A("span", {}),
+											disabled: D || J || e.disabled,
+											onCheckedChange: (t) => te(e.id, t)
+										}), /* @__PURE__ */ N(o, {
+											render: /* @__PURE__ */ M("span", {}),
 											gap: "dense",
-											children: [/* @__PURE__ */ A(r, {
+											children: [/* @__PURE__ */ M(r, {
 												tag: "span",
 												weight: "medium",
 												children: e.label
-											}), !!e.description && /* @__PURE__ */ A(r, {
+											}), !!e.description && /* @__PURE__ */ M(r, {
 												tag: "span",
 												size: "xs",
 												type: "secondary",
@@ -449,25 +458,25 @@ function Z({ tokens: s, abilities: c = [], createdToken: l, name: u, defaultName
 								})
 							})]
 						}),
-						/* @__PURE__ */ A(o, {
+						/* @__PURE__ */ M(o, {
 							direction: "horizontal",
 							gap: "none",
 							justify: "end",
-							children: /* @__PURE__ */ j(n, {
+							children: /* @__PURE__ */ N(i, {
 								type: "button",
 								tone: "primary",
-								loading: q,
-								disabled: D || !v || W.trim().length === 0,
-								onClick: re,
-								children: [/* @__PURE__ */ A(R, { className: "size-icon" }), N.create]
+								loading: J,
+								disabled: D || !b || K.trim().length === 0,
+								onClick: ne,
+								children: [/* @__PURE__ */ M(z, { className: "size-icon" }), F.create]
 							})
 						})
 					]
 				})
 			})]
-		}), /* @__PURE__ */ A(G, {
+		}), /* @__PURE__ */ M(G, {
 			items: s,
-			onDelete: y ? ie : void 0
+			onDelete: x ? re : void 0
 		})]
 	});
 }