admin-ui-starter-kit 0.4.5 → 0.6.1

package/dist/components/composed/ai/index.js

@@ -1,15 +1,15 @@
 import { mergeStrings as e, useStrings as t } from "../../../lib/strings.js";
 import { cn as n } from "../../../lib/utils.js";
-import { t as r } from "../../../_shared/button-BGKY8UY0.js";
-import { n as i } from "../../../_shared/heading-HeP06nXG.js";
-import { t as a } from "../../../_shared/icon-badge-zTBVtgt9.js";
-import { t as o } from "../../../_shared/badge-6WYAMJwA.js";
-import { t as s } from "../../../_shared/smart-card-thLb85Ih.js";
-import { t as c } from "../../../_shared/textarea-CsMkelmp.js";
+import { t as r } from "../../../_shared/button-DHksjMvc.js";
+import { s as i } from "../../../_shared/typography-DE0NGEIE.js";
+import { t as a } from "../../../_shared/icon-badge-dZQPvuas.js";
+import { t as o } from "../../../_shared/badge-a2Z3K5aQ.js";
+import { t as s } from "../../../_shared/cards-CtBoSZG9.js";
+import { t as c } from "../../../_shared/textarea-ChLRmmVU.js";
 import { t as l } from "../../../_shared/separator-B8FBp-7E.js";
-import { i as u } from "../../../_shared/display-NBtWdAMl.js";
-import { a as d, c as f, i as p, n as m, o as h, r as g, t as _, u as v } from "../../../_shared/item-DAjqQhhj.js";
-import { C as ee, S as te, _ as ne, a as y, b as re, c as ie, d as ae, f as oe, g as b, h as se, i as ce, l as le, m as ue, n as de, o as fe, p as pe, r as me, s as he, t as ge, u as _e, v as ve, x as ye, y as be } from "../../../_shared/ai-artifact-nlOrSeqT.js";
+import { a as u, c as d, i as f, n as p, o as m, r as h, t as g, u as _ } from "../../../_shared/item-Xs-fgzaT.js";
+import { i as v } from "../../../_shared/data-display-CRFaMkxT.js";
+import { C as ee, S as te, _ as ne, a as y, b as re, c as ie, d as ae, f as oe, g as b, h as se, i as ce, l as le, m as ue, n as de, o as fe, p as pe, r as me, s as he, t as ge, u as _e, v as ve, x as ye, y as be } from "../../../_shared/ai-artifact-B3qhuiKC.js";
 import { useState as x } from "react";
 import { Fragment as xe, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { BrainCircuit as w, ChevronDown as T, ChevronRight as E, Code2 as D, Cpu as O, ExternalLink as k, File as A, FileCode as j, FileText as M, Folder as Se, FolderOpen as Ce, Globe as we, Package as Te, Quote as N, RefreshCw as Ee, Sparkles as P, ThumbsDown as De, ThumbsUp as F } from "lucide-react";
@@ -42,7 +42,7 @@ var Oe = {
 function je({ level: e, label: t }) {
 	let r = Ae[e];
 	return /* @__PURE__ */ C("div", {
-		className: n("ai-summary--component", "flex items-center gap-1.5"),
+		className: n("ai-summary--confidence", "flex items-center gap-1.5"),
 		children: [/* @__PURE__ */ S("div", {
 			className: "flex items-center gap-0.5",
 			children: Array.from({ length: 3 }, (e, t) => /* @__PURE__ */ S("div", { className: n("h-2.5 w-1 rounded-sm", t < r ? "bg-foreground/60" : "bg-muted-foreground/20") }, `bar-${String(t)}`))
@@ -58,13 +58,9 @@ function je({ level: e, label: t }) {
 function Me({ data: e, strings: n }) {
 	let a = t(Oe, n);
 	return /* @__PURE__ */ S(s, {
-		title: /* @__PURE__ */ C("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ S(w, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ S(i, {
-				tag: "span",
-				children: a.title
-			})]
-		}),
+		icon: /* @__PURE__ */ S(w, { className: "size-4" }),
+		title: a.title,
+		className: "ai-summary--component",
 		titleSuffix: /* @__PURE__ */ S(o, {
 			variant: "secondary",
 			children: a.badgeLabel
@@ -95,6 +91,7 @@ function Me({ data: e, strings: n }) {
 			className: "space-y-3",
 			children: [
 				/* @__PURE__ */ S(i, {
+					size: "sm",
 					lineHeight: "relaxed",
 					children: e.summary
 				}),
@@ -118,13 +115,9 @@ function Me({ data: e, strings: n }) {
 function Ne({ data: e, strings: r }) {
 	let a = t(ke, r), c = e.confidence >= .9 ? a.confidenceBands.high : e.confidence >= .7 ? a.confidenceBands.medium : a.confidenceBands.low;
 	return /* @__PURE__ */ S(s, {
-		title: /* @__PURE__ */ C("div", {
-			className: n("ai-classification--component", "flex items-center gap-2"),
-			children: [/* @__PURE__ */ S(w, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ S(i, {
-				tag: "span",
-				children: a.title
-			})]
-		}),
+		icon: /* @__PURE__ */ S(w, { className: "size-4" }),
+		title: a.title,
+		className: "ai-classification--component",
 		children: /* @__PURE__ */ C("div", {
 			className: "space-y-3",
 			children: [
@@ -146,9 +139,9 @@ function Ne({ data: e, strings: r }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ S(u, {
+				/* @__PURE__ */ S(v, {
 					label: a.complexityLabel,
-					labelClassName: "text-xs",
+					labelClassName: "text-sm font-medium text-foreground",
 					value: /* @__PURE__ */ C("span", {
 						className: "flex items-center gap-1",
 						children: [Array.from({ length: 5 }, (t, r) => /* @__PURE__ */ S("span", { className: n("h-1.5 w-3 rounded-sm", r < e.complexityScore ? "bg-foreground/60" : "bg-muted") }, `cx-${String(r)}`)), /* @__PURE__ */ C(i, {
@@ -160,9 +153,9 @@ function Ne({ data: e, strings: r }) {
 						})]
 					})
 				}),
-				e.flags.length > 0 && /* @__PURE__ */ S(u, {
+				e.flags.length > 0 && /* @__PURE__ */ S(v, {
 					label: a.flagsLabel,
-					labelClassName: "text-xs",
+					labelClassName: "text-sm font-medium text-foreground",
 					value: /* @__PURE__ */ S("span", {
 						className: "flex gap-1",
 						children: e.flags.map((e) => /* @__PURE__ */ S(o, {
@@ -171,15 +164,16 @@ function Ne({ data: e, strings: r }) {
 						}, e))
 					})
 				}),
-				/* @__PURE__ */ S(u, {
+				/* @__PURE__ */ S(v, {
 					label: a.nextStepLabel,
-					labelClassName: "text-xs",
+					labelClassName: "text-sm font-medium text-foreground",
 					value: /* @__PURE__ */ S(o, {
 						variant: "info",
 						children: e.suggestedAction
 					})
 				}),
 				/* @__PURE__ */ S(i, {
+					size: "sm",
 					lineHeight: "relaxed",
 					type: "secondary",
 					children: e.summary
@@ -227,23 +221,25 @@ function Pe(e) {
 	};
 }
 function L({ score: e, model: r, factors: a, className: c, strings: l }) {
-	let d = t(I, l), f = Math.round(e * 100), { label: p, variant: m } = Pe(e), h = 2 * Math.PI * 24, g = h - f / 100 * h;
+	let u = t(I, l), d = Math.round(e * 100), { label: f, variant: p } = Pe(e), m = 2 * Math.PI * 24, h = m - d / 100 * m;
 	return /* @__PURE__ */ C(s, {
 		icon: /* @__PURE__ */ S(P, { className: "size-4" }),
-		title: d.title,
+		title: u.title,
 		titleSuffix: !!r && /* @__PURE__ */ S(o, {
 			variant: "secondary",
+			size: "small",
 			children: r
 		}),
 		className: n("ai-confidence--component", c),
 		children: [/* @__PURE__ */ C("div", {
-			className: "flex items-center gap-3",
+			className: "grid gap-space-xl md:grid-cols-[auto_minmax(0,1fr)] md:items-center",
 			children: [/* @__PURE__ */ C("div", {
 				className: "relative shrink-0",
 				children: [/* @__PURE__ */ C("svg", {
-					width: "64",
-					height: "64",
+					width: "56",
+					height: "56",
 					viewBox: "0 0 64 64",
+					"aria-hidden": "true",
 					children: [/* @__PURE__ */ S("circle", {
 						cx: "32",
 						cy: "32",
@@ -251,7 +247,7 @@ function L({ score: e, model: r, factors: a, className: c, strings: l }) {
 						fill: "none",
 						stroke: "currentColor",
 						strokeWidth: "5",
-						className: "text-muted/40"
+						className: "text-muted/60"
 					}), /* @__PURE__ */ S("circle", {
 						cx: "32",
 						cy: "32",
@@ -260,54 +256,64 @@ function L({ score: e, model: r, factors: a, className: c, strings: l }) {
 						stroke: "currentColor",
 						strokeWidth: "5",
 						strokeLinecap: "round",
-						strokeDasharray: h,
-						strokeDashoffset: g,
+						strokeDasharray: m,
+						strokeDashoffset: h,
 						transform: "rotate(-90 32 32)",
-						className: n(m === "success" && "text-success", m === "warning" && "text-warning", m === "error" && "text-destructive")
+						className: n(p === "success" && "text-success", p === "warning" && "text-warning", p === "error" && "text-destructive")
 					})]
 				}), /* @__PURE__ */ S("div", {
 					className: "absolute inset-0 flex flex-col items-center justify-center",
 					children: /* @__PURE__ */ C(i, {
 						weight: "semibold",
 						className: "tabular-nums leading-none",
-						children: [f, "%"]
+						children: [d, "%"]
 					})
 				})]
 			}), /* @__PURE__ */ C("div", {
-				className: "flex-1 min-w-0",
+				className: "grid min-w-0 gap-space-sm",
 				children: [/* @__PURE__ */ S(i, {
 					size: "xs",
 					type: "secondary",
 					weight: "medium",
-					className: "uppercase tracking-wider",
-					children: d.confidenceLabel
-				}), /* @__PURE__ */ S(o, {
-					variant: m,
-					className: "mt-1",
-					children: p
+					className: "uppercase tracking-wide",
+					children: u.confidenceLabel
+				}), /* @__PURE__ */ C("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-space-sm",
+					children: [/* @__PURE__ */ S(o, {
+						variant: p,
+						children: f
+					}), !!r && /* @__PURE__ */ S(i, {
+						size: "xs",
+						type: "secondary",
+						className: "truncate",
+						children: r
+					})]
 				})]
 			})]
 		}), !!a && a.length > 0 && /* @__PURE__ */ C("div", {
-			className: "mt-3 space-y-2",
+			className: "mt-space-xl grid gap-space-md",
 			children: [/* @__PURE__ */ S(i, {
 				size: "xs",
 				type: "secondary",
 				weight: "medium",
-				className: "uppercase tracking-wider",
-				children: d.factorsLabel
-			}), a.map((e) => /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(u, {
-				label: e.label,
-				value: `${Math.round(e.score * 100)}%`,
-				mono: !0,
-				labelClassName: "text-xs",
-				valueClassName: "text-xs font-semibold"
-			}), /* @__PURE__ */ S("div", {
-				className: "mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted",
-				children: /* @__PURE__ */ S("div", {
-					className: "h-full rounded-full bg-primary",
-					style: { width: `${Math.round(e.score * 100)}%` }
-				})
-			})] }, e.label))]
+				className: "uppercase tracking-wide",
+				children: u.factorsLabel
+			}), a.map((e) => /* @__PURE__ */ C("div", {
+				className: "grid gap-space-sm",
+				children: [/* @__PURE__ */ S(v, {
+					label: e.label,
+					value: `${Math.round(e.score * 100)}%`,
+					mono: !0,
+					labelClassName: "text-xs font-medium text-foreground",
+					valueClassName: "text-xs font-semibold"
+				}), /* @__PURE__ */ S("div", {
+					className: "h-1.5 w-full overflow-hidden rounded-full bg-muted/70",
+					children: /* @__PURE__ */ S("div", {
+						className: "h-full rounded-full bg-primary",
+						style: { width: `${Math.round(e.score * 100)}%` }
+					})
+				})]
+			}, e.label))]
 		})]
 	});
 }
@@ -328,24 +334,24 @@ function z({ suggestions: e, onPick: r, className: i, strings: o }) {
 		description: c.hint,
 		className: n("ai-prompt-suggestions--component", i),
 		children: /* @__PURE__ */ S("div", {
-			className: "grid grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-2",
+			className: "grid grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-space-xl",
 			children: e.map((e) => {
 				let t = e.icon;
-				return /* @__PURE__ */ C(_, {
+				return /* @__PURE__ */ C(g, {
 					variant: "outline",
 					render: /* @__PURE__ */ S("button", {
 						type: "button",
 						onClick: () => r?.(e)
 					}),
-					className: n("ai-prompt-suggestions--item h-full items-start transition-[border-color,background] duration-150", "hover:border-foreground/20 hover:bg-muted/40"),
-					children: [!!t && /* @__PURE__ */ S(f, { children: /* @__PURE__ */ S(a, {
+					className: n("ai-prompt-suggestions--item h-full items-start gap-space-lg px-surface py-surface-sm transition-[border-color,background] duration-150", "hover:border-foreground/20 hover:bg-muted/40"),
+					children: [!!t && /* @__PURE__ */ S(d, { children: /* @__PURE__ */ S(a, {
 						icon: t,
 						tone: "primary",
-						size: "sm",
+						size: "default",
 						shape: "square"
-					}) }), /* @__PURE__ */ C(g, {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ S(v, { children: e.label }), !!e.description && /* @__PURE__ */ S(p, { children: e.description })]
+					}) }), /* @__PURE__ */ C(h, {
+						className: "min-w-0 gap-space-sm",
+						children: [/* @__PURE__ */ S(_, { children: e.label }), !!e.description && /* @__PURE__ */ S(f, { children: e.description })]
 					})]
 				}, e.id);
 			})
@@ -364,31 +370,31 @@ var B = {
 };
 //#endregion
 //#region src/components/composed/ai/ai-token-usage/ai-token-usage.tsx
-function V({ model: e, inputTokens: r, outputTokens: a, cost: c, maxTokens: l, className: d, strings: f }) {
-	let p = t(B, f), m = r + a, h = l ? Math.min(100, Math.round(m / l * 100)) : 0;
+function V({ model: e, inputTokens: r, outputTokens: a, cost: c, maxTokens: l, className: u, strings: d }) {
+	let f = t(B, d), p = r + a, m = l ? Math.min(100, Math.round(p / l * 100)) : 0;
 	return /* @__PURE__ */ C(s, {
 		icon: /* @__PURE__ */ S(O, { className: "size-4" }),
-		title: p.title,
+		title: f.title,
 		titleSuffix: !!e && /* @__PURE__ */ S(o, {
 			variant: "secondary",
 			children: e
 		}),
-		className: n("ai-token-usage--component", d),
+		className: n("ai-token-usage--component", u),
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "grid grid-cols-3 gap-2",
 				children: [
 					{
-						label: p.input,
+						label: f.input,
 						value: r
 					},
 					{
-						label: p.output,
+						label: f.output,
 						value: a
 					},
 					{
-						label: p.total,
-						value: m
+						label: f.total,
+						value: p
 					}
 				].map((e) => /* @__PURE__ */ C("div", {
 					className: "rounded-md bg-muted/40 px-3 py-2",
@@ -408,9 +414,9 @@ function V({ model: e, inputTokens: r, outputTokens: a, cost: c, maxTokens: l, c
 			}),
 			!!l && /* @__PURE__ */ C("div", {
 				className: "mt-3",
-				children: [/* @__PURE__ */ S(u, {
-					label: `${m.toLocaleString()} / ${l.toLocaleString()}`,
-					value: `${h}%`,
+				children: [/* @__PURE__ */ S(v, {
+					label: `${p.toLocaleString()} / ${l.toLocaleString()}`,
+					value: `${m}%`,
 					mono: !0,
 					labelClassName: "text-xs",
 					valueClassName: "text-xs font-semibold"
@@ -418,13 +424,13 @@ function V({ model: e, inputTokens: r, outputTokens: a, cost: c, maxTokens: l, c
 					className: "mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted",
 					children: /* @__PURE__ */ S("div", {
 						className: "h-full rounded-full bg-primary",
-						style: { width: `${h}%` }
+						style: { width: `${m}%` }
 					})
 				})]
 			}),
-			!!c && /* @__PURE__ */ S(u, {
+			!!c && /* @__PURE__ */ S(v, {
 				className: "mt-3 rounded-md bg-primary/5 px-3 py-2",
-				label: p.cost,
+				label: f.cost,
 				value: c,
 				mono: !0,
 				labelClassName: "text-xs",
@@ -460,7 +466,7 @@ function U({ value: e, onVote: a, onSubmitComment: o, allowComment: s = !0, subm
 			children: f.thanks
 		})]
 	}) : /* @__PURE__ */ C("div", {
-		className: n("inline-flex flex-col gap-2", u),
+		className: n("ai-feedback--component inline-flex flex-col gap-2", u),
 		children: [/* @__PURE__ */ C("div", {
 			className: "flex items-center gap-2",
 			children: [
@@ -473,7 +479,7 @@ function U({ value: e, onVote: a, onSubmitComment: o, allowComment: s = !0, subm
 					type: "button",
 					variant: "secondary",
 					buttonStyle: _ === "up" ? "solid" : "ghost",
-					size: "icon-xs",
+					size: "icon-small",
 					"aria-label": f.thumbsUpAria,
 					"aria-pressed": _ === "up",
 					onClick: () => v("up"),
@@ -484,7 +490,7 @@ function U({ value: e, onVote: a, onSubmitComment: o, allowComment: s = !0, subm
 					type: "button",
 					variant: "secondary",
 					buttonStyle: _ === "down" ? "solid" : "ghost",
-					size: "icon-xs",
+					size: "icon-small",
 					"aria-label": f.thumbsDownAria,
 					"aria-pressed": _ === "down",
 					onClick: () => v("down"),
@@ -529,14 +535,14 @@ var W = {
 function G({ sources: t, defaultExpanded: a = !1, maxCollapsedRows: o = 0, className: s, strings: c }) {
 	let l = e(W, c), [u, d] = x(a), f = u ? t : t.slice(0, Math.max(0, o)), p = t.length - f.length;
 	return /* @__PURE__ */ C("div", {
-		className: n("ai-citation--component", "space-y-2", s),
+		className: n("ai-citation--component", "rounded-lg border border-border bg-card px-surface-sm py-surface-sm shadow-xs", "space-y-space-lg", s),
 		children: [/* @__PURE__ */ C(r, {
 			type: "button",
 			variant: "secondary",
 			buttonStyle: "ghost",
-			size: "xs",
+			size: "small",
 			onClick: () => d((e) => !e),
-			className: n("ai-citation--trigger h-auto -mx-2 justify-start gap-1.5 rounded-md px-2 py-1", "text-muted-foreground hover:text-foreground hover:bg-muted/40"),
+			className: n("ai-citation--trigger h-auto justify-start gap-space-sm rounded-md px-control py-row-y", "text-muted-foreground hover:text-foreground hover:bg-muted/40"),
 			"aria-expanded": u,
 			"aria-label": u ? l.collapse : l.expand,
 			children: [
@@ -552,7 +558,7 @@ function G({ sources: t, defaultExpanded: a = !1, maxCollapsedRows: o = 0, class
 				}),
 				S(u ? T : E, { className: "size-3.5" })
 			]
-		}), (u || o > 0) && /* @__PURE__ */ C(h, { children: [f.map((e, t) => /* @__PURE__ */ S(Fe, {
+		}), (u || o > 0) && /* @__PURE__ */ C(m, { children: [f.map((e, t) => /* @__PURE__ */ S(Fe, {
 			source: e,
 			index: t + 1,
 			strings: l
@@ -574,17 +580,17 @@ function Fe({ source: e, index: t, strings: r }) {
 		target: "_blank",
 		rel: "noopener noreferrer"
 	} : {};
-	return /* @__PURE__ */ C(_, {
+	return /* @__PURE__ */ C(g, {
 		variant: "outline",
-		size: "xs",
-		className: "items-start",
+		size: "small",
+		className: "items-start px-surface-sm py-surface-sm",
 		children: [
-			/* @__PURE__ */ S(f, { children: /* @__PURE__ */ S("span", {
+			/* @__PURE__ */ S(d, { children: /* @__PURE__ */ S("span", {
 				className: "inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-semibold text-muted-foreground tabular-nums",
 				children: t
 			}) }),
-			/* @__PURE__ */ C(g, { children: [
-				/* @__PURE__ */ S(v, {
+			/* @__PURE__ */ C(h, { children: [
+				/* @__PURE__ */ S(_, {
 					className: "truncate",
 					children: /* @__PURE__ */ C(o, {
 						...s,
@@ -592,11 +598,11 @@ function Fe({ source: e, index: t, strings: r }) {
 						children: [e.title, !!e.url && /* @__PURE__ */ S(k, { className: "ml-1 inline size-3 align-baseline" })]
 					})
 				}),
-				!!e.snippet && /* @__PURE__ */ S(p, {
+				!!e.snippet && /* @__PURE__ */ S(f, {
 					clamp: 2,
 					children: e.snippet
 				}),
-				(e.publisher || e.publishedAt) && /* @__PURE__ */ C(d, {
+				(e.publisher || e.publishedAt) && /* @__PURE__ */ C(u, {
 					className: "mt-1 justify-start gap-1.5",
 					children: [
 						!!e.publisher && /* @__PURE__ */ S(i, {
@@ -618,7 +624,7 @@ function Fe({ source: e, index: t, strings: r }) {
 					]
 				})
 			] }),
-			a !== null && /* @__PURE__ */ C(m, {
+			a !== null && /* @__PURE__ */ C(p, {
 				className: "w-16 flex-col items-end gap-0.5",
 				children: [/* @__PURE__ */ C(i, {
 					size: "xxs",
@@ -656,7 +662,7 @@ function q({ index: t, title: a, url: o, onSelect: s, className: c, strings: l }
 	let u = e(K, l), d = Ie(u.openAria, {
 		n: t,
 		title: a ?? ""
-	}), f = a ? `${u.sourcePrefix} ${t}: ${a}` : `${u.sourcePrefix} ${t}`, p = n("inline-flex h-[1.25em] min-w-[1.25em] -translate-y-px items-center justify-center rounded px-1", "align-middle text-[0.75em] font-medium tabular-nums", "bg-muted text-muted-foreground", "hover:bg-primary/10 hover:text-primary", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", c);
+	}), f = a ? `${u.sourcePrefix} ${t}: ${a}` : `${u.sourcePrefix} ${t}`, p = n("inline-flex h-5 min-w-5 -translate-y-px items-center justify-center rounded px-1", "align-middle text-xxs font-medium tabular-nums", "bg-muted text-muted-foreground", "hover:bg-primary/10 hover:text-primary", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", c);
 	return o ? /* @__PURE__ */ S("a", {
 		href: o,
 		target: "_blank",
@@ -675,7 +681,7 @@ function q({ index: t, title: a, url: o, onSelect: s, className: c, strings: l }
 		type: "button",
 		variant: "secondary",
 		buttonStyle: "ghost",
-		size: "xs",
+		size: "small",
 		onClick: s,
 		title: f,
 		"aria-label": d,
@@ -911,7 +917,7 @@ function $({ node: e, depth: t, selectedId: a, onSelect: o, hideStatusLabels: s,
 	let [u, d] = x(e.defaultExpanded ?? t < 1), f = e.kind === "directory", p = a === e.id, m = e.status, h = m ? Le[m] : void 0, g = e.icon ?? (f ? u ? Ce : Se : Re(e.name)), _ = () => {
 		f ? d((e) => !e) : o?.(e);
 	}, v = /* @__PURE__ */ C(xe, { children: [!!m && !s && /* @__PURE__ */ S("span", {
-		className: n("inline-flex size-4 shrink-0 items-center justify-center rounded", "text-[length:var(--text-xxs)] font-bold leading-none uppercase", h?.pill),
+		className: n("inline-flex size-4 shrink-0 items-center justify-center rounded", "text-xxs font-bold leading-none uppercase", h?.pill),
 		children: l.statusLabels[m]
 	}), !!e.trailing && /* @__PURE__ */ S(i, {
 		tag: "span",
@@ -924,7 +930,7 @@ function $({ node: e, depth: t, selectedId: a, onSelect: o, hideStatusLabels: s,
 		type: "button",
 		variant: "secondary",
 		buttonStyle: "ghost",
-		size: "xs",
+		size: "small",
 		onClick: _,
 		"aria-expanded": f ? u : void 0,
 		"aria-label": f ? u ? l.collapseAria : l.expandAria : void 0,