@clarify-labs/renderer 0.11.20 → 0.11.23

package/output/{OpenApiOperation-Cv4N92VL.cjs → OpenApiOperation-CyR9Y-2y.cjs}

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-BMNCgF9o.cjs");
-const require_PageActions = require("./PageActions-CwJLUFUH.cjs");
+const require_i18n = require("./i18n-tOmAUK0W.cjs");
+const require_PageActions = require("./PageActions-IpmtuInV.cjs");
 const require_remark = require("./remark-DTLbG8PK.cjs");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
@@ -64,15 +64,15 @@ function LocalizedLink(arg0) {
 //#endregion
 //#region source/components/Button.tsx
 var buttonVariantStyles = {
-	primary: "bg-(--clarify-theme-tokens-colors-foreground) px-4 text-(--clarify-theme-tokens-colors-background) shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 active:shadow-sm dark:bg-(--clarify-theme-tokens-colors-primary) dark:text-zinc-950",
-	secondary: "bg-(--clarify-theme-tokens-colors-code-background) px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
-	filled: "bg-(--clarify-theme-tokens-colors-primary) px-4 text-white shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 dark:text-zinc-950",
-	outline: "px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
-	text: "text-(--clarify-theme-tokens-colors-primary) hover:opacity-80 dark:text-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80"
+	primary: "bg-(--clarify-theme-tokens-colors-foreground) px-4 text-(--clarify-theme-tokens-colors-background) shadow-(--clarify-ui-shadow-raised) transition hover:-translate-y-px hover:shadow-(--clarify-ui-shadow-lifted) active:translate-y-0 active:shadow-(--clarify-ui-shadow-raised) dark:bg-(--clarify-theme-tokens-colors-primary) dark:text-(--clarify-ui-on-accent)",
+	secondary: "bg-(--clarify-ui-subtle-background) px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-ui-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	filled: "bg-(--clarify-theme-tokens-colors-primary) px-4 text-(--clarify-ui-on-accent) shadow-(--clarify-ui-shadow-raised) transition hover:-translate-y-px hover:shadow-(--clarify-ui-shadow-lifted) active:translate-y-0",
+	outline: "px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-ui-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	text: "text-(--clarify-ui-accent-text) hover:opacity-80"
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = (0, clsx.default)("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1.5 overflow-hidden align-middle text-sm font-semibold whitespace-nowrap no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)", variant === "text" ? "h-auto rounded-sm" : "h-9 rounded-(--clarify-theme-tokens-radius-lg)", buttonVariantStyles[variant], className);
+	const classes = (0, clsx.default)("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1.5 overflow-hidden align-middle text-sm font-semibold whitespace-nowrap no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)", variant === "text" ? "h-auto rounded-(--clarify-theme-tokens-radius-sm)" : "h-9 rounded-(--clarify-theme-tokens-radius-lg)", buttonVariantStyles[variant], className);
 	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {
 		"aria-hidden": "true",
 		className: (0, clsx.default)("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
@@ -100,48 +100,67 @@ function Button(arg0) {
 //#region source/components/Callout.tsx
 var calloutStyles = {
 	info: {
-		container: "border-sky-500/20 bg-sky-50/30 dark:border-sky-400/20 dark:bg-sky-400/5",
-		iconContainer: "bg-sky-100 ring-sky-500/15 dark:bg-sky-400/10 dark:ring-sky-400/20",
-		icon: "text-sky-600 dark:text-sky-400",
-		title: "text-sky-900 dark:text-sky-100",
+		tone: "info",
 		Icon: lucide_react.Info
 	},
 	note: {
-		container: "border-zinc-500/20 bg-zinc-50/50 dark:border-white/10 dark:bg-white/5",
-		iconContainer: "bg-zinc-200/70 ring-zinc-500/15 dark:bg-white/10 dark:ring-white/10",
-		icon: "text-zinc-500 dark:text-zinc-400",
-		title: "text-zinc-900 dark:text-white",
+		tone: "neutral",
 		Icon: lucide_react.Info
 	},
 	tip: {
-		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
-		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
-		icon: "text-emerald-600 dark:text-emerald-400",
-		title: "text-emerald-900 dark:text-emerald-100",
+		tone: "success",
 		Icon: lucide_react.Lightbulb
 	},
 	warning: {
-		container: "border-amber-500/20 bg-amber-50/40 dark:border-amber-400/20 dark:bg-amber-400/5",
-		iconContainer: "bg-amber-100 ring-amber-500/15 dark:bg-amber-400/10 dark:ring-amber-400/20",
-		icon: "text-amber-600 dark:text-amber-400",
-		title: "text-amber-900 dark:text-amber-100",
+		tone: "warning",
 		Icon: lucide_react.AlertTriangle
 	},
 	danger: {
-		container: "border-rose-500/20 bg-rose-50/40 dark:border-rose-400/20 dark:bg-rose-400/5",
-		iconContainer: "bg-rose-100 ring-rose-500/15 dark:bg-rose-400/10 dark:ring-rose-400/20",
-		icon: "text-rose-600 dark:text-rose-400",
-		title: "text-rose-900 dark:text-rose-100",
+		tone: "danger",
 		Icon: lucide_react.XCircle
 	},
 	success: {
-		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
-		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
-		icon: "text-emerald-600 dark:text-emerald-400",
-		title: "text-emerald-900 dark:text-emerald-100",
+		tone: "success",
 		Icon: lucide_react.CheckCircle2
 	}
 };
+/**
+* Tone classes are written out (instead of interpolated) so Tailwind can see
+* them at build time. Colours come from --clarify-tone-* so every callout
+* follows the active theme preset.
+*/
+var calloutToneStyles = {
+	neutral: {
+		container: "border-(--clarify-tone-neutral-border) bg-(--clarify-tone-neutral-background)",
+		iconContainer: "bg-(--clarify-tone-neutral-icon-background) ring-(--clarify-tone-neutral-border)",
+		icon: "text-(--clarify-tone-neutral-icon)",
+		title: "text-(--clarify-tone-neutral-text)"
+	},
+	info: {
+		container: "border-(--clarify-tone-info-border) bg-(--clarify-tone-info-background)",
+		iconContainer: "bg-(--clarify-tone-info-icon-background) ring-(--clarify-tone-info-border)",
+		icon: "text-(--clarify-tone-info-icon)",
+		title: "text-(--clarify-tone-info-text)"
+	},
+	success: {
+		container: "border-(--clarify-tone-success-border) bg-(--clarify-tone-success-background)",
+		iconContainer: "bg-(--clarify-tone-success-icon-background) ring-(--clarify-tone-success-border)",
+		icon: "text-(--clarify-tone-success-icon)",
+		title: "text-(--clarify-tone-success-text)"
+	},
+	warning: {
+		container: "border-(--clarify-tone-warning-border) bg-(--clarify-tone-warning-background)",
+		iconContainer: "bg-(--clarify-tone-warning-icon-background) ring-(--clarify-tone-warning-border)",
+		icon: "text-(--clarify-tone-warning-icon)",
+		title: "text-(--clarify-tone-warning-text)"
+	},
+	danger: {
+		container: "border-(--clarify-tone-danger-border) bg-(--clarify-tone-danger-background)",
+		iconContainer: "bg-(--clarify-tone-danger-icon-background) ring-(--clarify-tone-danger-border)",
+		icon: "text-(--clarify-tone-danger-icon)",
+		title: "text-(--clarify-tone-danger-text)"
+	}
+};
 var defaultTitleKeys = {
 	info: "callout.info",
 	note: "callout.note",
@@ -154,21 +173,22 @@ function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const style = calloutStyles[type];
+	const toneStyle = calloutToneStyles[style.tone];
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-callout my-6 flex gap-3.5 rounded-(--clarify-theme-tokens-radius-lg) border p-4 text-sm/6 text-(--clarify-ui-text-soft)", style.container, className),
+		className: (0, clsx.default)("clarify-callout my-6 flex gap-3.5 rounded-(--clarify-theme-tokens-radius-lg) border p-4 text-sm/6 text-(--clarify-ui-text-soft)", toneStyle.container, className),
 		...props,
 		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: (0, clsx.default)("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", style.iconContainer),
+			className: (0, clsx.default)("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", toneStyle.iconContainer),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				className: (0, clsx.default)("size-4", style.icon),
+				className: (0, clsx.default)("size-4", toneStyle.icon),
 				"aria-hidden": "true"
 			})
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
 			children: [resolvedTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: (0, clsx.default)("mb-1.5 font-semibold", style.title),
+				className: (0, clsx.default)("mb-1.5 font-semibold", toneStyle.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -187,7 +207,7 @@ function CardIcon(arg0) {
 	const Icon = require_PageActions.lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "flex size-8 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-inset ring-(--clarify-ui-accent-border) transition-colors group-hover:bg-(--clarify-theme-tokens-colors-primary) group-hover:text-white dark:group-hover:text-zinc-950",
+		className: "flex size-8 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-ui-border) transition-colors group-hover:bg-(--clarify-ui-active-background) group-hover:text-(--clarify-ui-text-strong)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -219,7 +239,7 @@ function Card(arg0) {
 					className: "m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 					children: title
 				}), href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, {
-					className: "mt-1 size-3.5 shrink-0 text-(--clarify-ui-text-faint) transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-(--clarify-ui-accent-text)",
+					className: "mt-1 size-3.5 shrink-0 text-(--clarify-ui-text-faint) transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-(--clarify-ui-text-strong)",
 					"aria-hidden": "true"
 				}) : null]
 			}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -231,7 +251,7 @@ function Card(arg0) {
 		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = (0, clsx.default)("group relative block rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4 transition duration-200", href && "hover:-translate-y-0.5 hover:border-(--clarify-ui-accent-border) hover:shadow-md hover:shadow-zinc-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 dark:hover:shadow-none", className);
+	const classes = (0, clsx.default)("group relative block rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4 transition duration-200", href && "hover:-translate-y-0.5 hover:border-(--clarify-ui-border-strong) hover:shadow-(--clarify-ui-shadow-lifted) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2", className);
 	if (!href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: classes,
 		children: content
@@ -245,7 +265,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-CPEutQ9L.cjs")));
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-BeDNlsUO.cjs")));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -297,10 +317,10 @@ function Mermaid(arg0) {
 		resolvedTheme
 	]);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-error my-6 overflow-x-auto rounded-2xl border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4", className),
+		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-error my-6 overflow-x-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-tone-danger-border) bg-(--clarify-tone-danger-background) p-4", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm font-semibold text-(--clarify-error-accent-text)",
+				className: "text-sm font-semibold text-(--clarify-tone-danger-text)",
 				children: t("mermaid.renderError")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
@@ -314,7 +334,7 @@ function Mermaid(arg0) {
 		]
 	});
 	if (!svg) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-loading not-prose my-6 overflow-x-auto rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
+		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-loading not-prose my-6 overflow-x-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 			className: "text-xs text-(--clarify-ui-text-soft)",
 			children: chart.trim()
@@ -334,7 +354,7 @@ function Mermaid(arg0) {
 function MermaidStaticSvg(arg0) {
 	const { svg, className } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("clarify-mermaid not-prose my-6 overflow-x-auto rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
+		className: (0, clsx.default)("clarify-mermaid not-prose my-6 overflow-x-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full",
 			dangerouslySetInnerHTML: { __html: svg }
@@ -405,13 +425,13 @@ function CopyButton$1(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 inline-flex items-center gap-1 overflow-hidden rounded-full border border-(--clarify-code-border) py-1 pr-3 pl-2 text-2xs font-medium whitespace-nowrap opacity-100 shadow-sm backdrop-blur-sm transition sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied text-(--clarify-code-text)" : "bg-(--clarify-code-control-background) text-(--clarify-code-text) hover:bg-(--clarify-code-control-background-hover)"),
+		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 inline-flex items-center gap-1 overflow-hidden rounded-full border border-(--clarify-code-border) py-1 pr-3 pl-2 text-2xs font-medium whitespace-nowrap opacity-100 shadow-(--clarify-ui-shadow-raised) backdrop-blur-sm transition sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied text-(--clarify-code-text)" : "bg-(--clarify-code-control-background) text-(--clarify-code-text) hover:bg-(--clarify-code-control-background-hover)"),
 		onClick: () => {
 			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-3.5 w-3.5 stroke-(--clarify-code-muted) transition-colors group-hover/button:stroke-(--clarify-code-text)" }), t("actions.copy")] })
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 stroke-(--clarify-code-success)" }), t("actions.copied")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-3.5 w-3.5 stroke-(--clarify-code-muted) transition-colors group-hover/button:stroke-(--clarify-code-text)" }), t("actions.copy")] })
 	});
 }
 function CodePanelHeader(arg0) {
@@ -421,7 +441,7 @@ function CodePanelHeader(arg0) {
 		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4",
 		children: [
 			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
+				className: "clarify-code-panel-tag font-semibold text-(--clarify-code-accent-text)",
 				children: tag
 			}) : null,
 			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
@@ -552,7 +572,7 @@ function CodeGroup(arg0) {
 	const t = require_i18n.useBuiltInText();
 	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getCodePanelTitle(child, t("actions.code"))) ?? []);
 	const hasTabs = react.Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-code-background) shadow-(--clarify-ui-shadow-raised) ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -618,7 +638,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) transition-colors", open && "border-(--clarify-ui-accent-border)", className),
+		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) transition-colors", open && "border-(--clarify-ui-border-strong)", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
@@ -693,8 +713,8 @@ var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
 		ref,
 		className: (0, clsx.default)(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3 rounded-full bg-(--clarify-ui-accent-background) py-1 pr-3 pl-1.5 text-sm text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border) ring-inset",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleCheck, { className: "h-5 w-5 flex-none stroke-(--clarify-ui-accent-text)" }), t("feedback.thanks")]
+			className: "flex items-center gap-3 rounded-full bg-(--clarify-tone-success-background) py-1 pr-3 pl-1.5 text-sm text-(--clarify-tone-success-text) ring-1 ring-(--clarify-tone-success-border) ring-inset",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleCheck, { className: "h-5 w-5 flex-none stroke-(--clarify-tone-success-icon)" }), t("feedback.thanks")]
 		})
 	});
 });
@@ -745,7 +765,7 @@ function FileTreeItem(arg0) {
 			className: "flex min-h-6 items-center gap-2 whitespace-nowrap",
 			children: [
 				isFolder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FolderIcon, {
-					className: "size-4 flex-none text-(--clarify-ui-accent-text)",
+					className: "size-4 flex-none text-(--clarify-ui-text-soft)",
 					"aria-hidden": "true"
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.File, {
 					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
@@ -771,28 +791,28 @@ function FileTreeItem(arg0) {
 //#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
-	medium: "rounded-lg px-1.5 ring-1 ring-inset"
+	medium: "rounded-(--clarify-theme-tokens-radius-md) px-1.5 ring-1 ring-inset"
 };
 var tagColorStyles = {
 	emerald: {
-		small: "text-emerald-500 dark:text-emerald-400",
-		medium: "bg-emerald-400/10 text-emerald-500 ring-emerald-300 dark:text-emerald-400 dark:ring-emerald-400/30"
+		small: "text-(--clarify-tone-success-icon)",
+		medium: "bg-(--clarify-tone-success-background) text-(--clarify-tone-success-text) ring-(--clarify-tone-success-border)"
 	},
 	sky: {
-		small: "text-sky-500 dark:text-sky-400",
-		medium: "bg-sky-400/10 text-sky-500 ring-sky-300 dark:text-sky-400 dark:ring-sky-400/30"
+		small: "text-(--clarify-tone-info-icon)",
+		medium: "bg-(--clarify-tone-info-background) text-(--clarify-tone-info-text) ring-(--clarify-tone-info-border)"
 	},
 	amber: {
-		small: "text-amber-500 dark:text-amber-400",
-		medium: "bg-amber-400/10 text-amber-500 ring-amber-300 dark:text-amber-400 dark:ring-amber-400/30"
+		small: "text-(--clarify-tone-warning-icon)",
+		medium: "bg-(--clarify-tone-warning-background) text-(--clarify-tone-warning-text) ring-(--clarify-tone-warning-border)"
 	},
 	rose: {
-		small: "text-red-500 dark:text-rose-500",
-		medium: "bg-rose-50 text-red-500 ring-rose-200 dark:bg-rose-400/10 dark:text-rose-400 dark:ring-rose-500/20"
+		small: "text-(--clarify-tone-danger-icon)",
+		medium: "bg-(--clarify-tone-danger-background) text-(--clarify-tone-danger-text) ring-(--clarify-tone-danger-border)"
 	},
 	zinc: {
 		small: "text-(--clarify-theme-tokens-colors-muted)",
-		medium: "bg-(--clarify-theme-tokens-colors-code-background) text-(--clarify-theme-tokens-colors-muted) ring-(--clarify-theme-tokens-colors-border)"
+		medium: "bg-(--clarify-tone-neutral-background) text-(--clarify-theme-tokens-colors-muted) ring-(--clarify-tone-neutral-border)"
 	}
 };
 var tagValueColorMap = {
@@ -820,9 +840,9 @@ function Eyebrow(arg0) {
 		className: "flex items-center gap-x-3",
 		children: [
 			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, { children: tag }) : null,
-			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" }) : null,
+			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-ui-border-strong)" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-zinc-400",
+				className: "text-xs text-(--clarify-ui-text-faint)",
 				children: label
 			}) : null
 		]
@@ -835,7 +855,7 @@ function Anchor(arg0) {
 		className: "clarify-anchor group text-inherit no-underline hover:text-inherit",
 		children: [inView ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "absolute mt-1 -ml-(--width) hidden w-(--width) opacity-0 transition [--width:var(--clarify-heading-anchor-width)] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:var(--clarify-heading-anchor-width-wide)]",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LinkIcon, { className: "h-5 w-5 text-(--clarify-theme-tokens-colors-primary) opacity-80 transition group-hover:opacity-100" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LinkIcon, { className: "h-5 w-5 text-(--clarify-ui-text-soft) opacity-0 transition group-hover:opacity-100" })
 		}) : null, children]
 	});
 }
@@ -888,7 +908,7 @@ function Logo(props) {
 			className: "fill-(--clarify-theme-tokens-colors-primary)",
 			d: "M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			className: "fill-(--clarify-theme-tokens-colors-foreground) dark:fill-white",
+			className: "fill-(--clarify-theme-tokens-colors-foreground)",
 			d: "M26.538 18h2.654v-3.999h2.576c2.672 0 4.456-1.723 4.456-4.333V9.65c0-2.61-1.784-4.333-4.456-4.333h-5.23V18Zm4.58-10.582c1.52 0 2.416.8 2.416 2.241v.018c0 1.441-.896 2.25-2.417 2.25h-1.925V7.418h1.925ZM38.051 18h2.566v-5.414c0-1.371.923-2.206 2.382-2.206.396 0 .791.061 1.178.15V8.287a3.843 3.843 0 0 0-.958-.123c-1.257 0-2.136.615-2.443 1.661h-.159V8.323h-2.566V18Zm11.55.202c2.979 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.773-5.036-2.953 0-4.772 1.916-4.772 5.036v.018c0 3.146 1.793 5.036 4.772 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.144-3.023 1.354 0 2.145 1.134 2.145 3.023v.018c0 1.907-.782 3.023-2.145 3.023Zm10.52 1.846c.492 0 .967-.053 1.283-.114v-1.907a6.057 6.057 0 0 1-.755.044c-.87 0-1.24-.387-1.24-1.257v-4.544h1.995V8.323H59.41V6.012h-2.592v2.311h-1.495v1.934h1.495v5.133c0 1.88.949 2.645 3.304 2.645Zm7.287.167c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.954 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023Zm10.767 2.013c2.522 0 4.034-1.353 4.297-3.463l.01-.053h-2.374l-.017.036c-.229.966-.853 1.467-1.908 1.467-1.37 0-2.135-1.08-2.135-3.04v-.018c0-1.934.755-3.006 2.135-3.006 1.099 0 1.74.615 1.908 1.556l.008.017h2.391v-.026c-.228-2.162-1.749-3.56-4.315-3.56-3.033 0-4.738 1.837-4.738 5.019v.017c0 3.217 1.714 5.054 4.738 5.054Zm10.257 0c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.953 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.371 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023ZM95.025 18h2.566V4.623h-2.566V18Z"
 		})]
 	});
@@ -953,12 +973,12 @@ function HeroPattern() {
 						[7, 3],
 						[10, 6]
 					],
-					className: "clarify-hero-pattern-grid absolute inset-x-0 w-full -skew-y-18 fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+					className: "clarify-hero-pattern-grid absolute inset-x-0 w-full -skew-y-18 fill-(--clarify-hero-pattern-fill) stroke-(--clarify-hero-pattern-stroke) mix-blend-overlay"
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				viewBox: "0 0 1113 440",
 				"aria-hidden": "true",
-				className: "absolute top-0 left-1/2 -ml-76 w-278.25 fill-white blur-xl dark:hidden",
+				className: "absolute top-0 left-1/2 -ml-76 w-278.25 fill-(--clarify-theme-tokens-colors-background) blur-xl dark:hidden",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
 			})]
 		})
@@ -990,7 +1010,7 @@ function Step(arg0) {
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "absolute top-0 -left-3.5 flex size-7 items-center justify-center rounded-full bg-(--clarify-theme-tokens-colors-primary) text-xs font-semibold text-white shadow-[0_0_0_4px_var(--clarify-theme-tokens-colors-background)] before:content-[counter(list-item)] dark:text-zinc-950",
+				className: "absolute top-0 -left-3.5 flex size-7 items-center justify-center rounded-full bg-(--clarify-ui-text-strong) text-xs font-semibold text-(--clarify-theme-tokens-colors-background) shadow-[0_0_0_4px_var(--clarify-theme-tokens-colors-background)] before:content-[counter(list-item)]",
 				"aria-hidden": "true"
 			}),
 			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -1098,7 +1118,7 @@ function Tooltip(arg0) {
 			ref: triggerRef,
 			"aria-describedby": contentId,
 			"aria-expanded": open,
-			className: (0, clsx.default)("cursor-help appearance-none rounded-sm border-0 border-b border-dotted border-current bg-transparent p-0 font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", triggerClassName),
+			className: (0, clsx.default)("cursor-help appearance-none rounded-(--clarify-theme-tokens-radius-sm) border-0 border-b border-dotted border-current bg-transparent p-0 font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", triggerClassName),
 			onFocus: () => setOpen(true),
 			onBlur: () => setOpen(false),
 			onClick: () => setOpen(true),
@@ -1112,7 +1132,7 @@ function Tooltip(arg0) {
 			role: "tooltip",
 			popover: "manual",
 			style: position,
-			className: (0, clsx.default)("pointer-events-none fixed right-auto bottom-auto z-60 m-0 w-max max-w-64 -translate-x-1/2 rounded-md border-0 bg-(--clarify-theme-tokens-colors-foreground) px-2.5 py-1.5 text-center text-xs/5 font-normal text-(--clarify-theme-tokens-colors-background) shadow-lg transition duration-150", side === "top" && "-translate-y-full", open && position ? "visible opacity-100" : "invisible opacity-0"),
+			className: (0, clsx.default)("pointer-events-none fixed right-auto bottom-auto z-60 m-0 w-max max-w-64 -translate-x-1/2 rounded-(--clarify-theme-tokens-radius-md) border-0 bg-(--clarify-theme-tokens-colors-foreground) px-2.5 py-1.5 text-center text-xs/5 font-normal text-(--clarify-theme-tokens-colors-background) shadow-(--clarify-ui-shadow-popover) transition duration-150", side === "top" && "-translate-y-full", open && position ? "visible opacity-100" : "invisible opacity-0"),
 			children: content
 		})]
 	});
@@ -1140,13 +1160,13 @@ function WebFrame(arg0) {
 		children
 	});
 	if (!showWindow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-shadow-popover) shadow-zinc-900/5 dark:shadow-none", className),
 		children: frame
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-shadow-popover) shadow-zinc-900/5 dark:shadow-none", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid h-10 grid-cols-[1fr_minmax(0,2fr)_1fr] items-center gap-3 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-3",
+			className: "grid h-10 grid-cols-[1fr_minmax(0,2fr)_1fr] items-center gap-3 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) px-3",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-1.5",
@@ -1188,7 +1208,7 @@ function Image(arg0) {
 					"aria-label": `Enlarge image: ${alt}`,
 					onClick: () => setOpen(true),
 					children: [image, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "absolute right-3 bottom-3 grid size-8 place-items-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/90 text-(--clarify-ui-text-soft) opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100",
+						className: "absolute right-3 bottom-3 grid size-8 place-items-center rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/90 text-(--clarify-ui-text-soft) opacity-0 shadow-(--clarify-ui-shadow-raised) transition group-hover:opacity-100 group-focus-within:opacity-100",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize2, {
 							className: "size-4",
 							"aria-hidden": "true"
@@ -1204,17 +1224,17 @@ function Image(arg0) {
 				open,
 				onClose: setOpen,
 				className: "relative z-50",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, { className: "fixed inset-0 bg-black/75 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "fixed inset-0 flex items-center justify-center p-4 sm:p-8",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, {
-						className: "relative max-h-full max-w-full overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-background) p-2 shadow-2xl",
+						className: "relative max-h-full max-w-full overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-background) p-2 shadow-(--clarify-ui-shadow-popover)",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 							src,
 							alt,
 							className: "max-h-[calc(100dvh-5rem)] max-w-[calc(100vw-5rem)] object-contain"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							className: "absolute top-4 right-4 grid size-9 place-items-center rounded-md border border-white/20 bg-black/65 text-white transition hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+							className: "absolute top-4 right-4 grid size-9 place-items-center rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-ui-border-strong) bg-(--clarify-ui-surface-elevated) text-(--clarify-ui-text-strong) transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-ui-focus-ring)",
 							"aria-label": "Close image preview",
 							onClick: () => setOpen(false),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
@@ -1270,7 +1290,7 @@ function Release(arg0) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 			className: "self-start sm:sticky sm:top-24",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-				className: "m-0! inline-flex rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-accent-background) px-2.5 py-1 text-sm font-semibold text-(--clarify-ui-accent-text)",
+				className: "m-0! inline-flex rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) px-2.5 py-1 text-sm font-semibold text-(--clarify-ui-text-strong) ring-1 ring-(--clarify-ui-border) ring-inset",
 				children: version
 			}), date ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("time", {
 				dateTime: date,
@@ -1355,8 +1375,8 @@ function h3(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-note my-6 flex gap-3 rounded-r-(--clarify-theme-tokens-radius-lg) border-l-2 border-(--clarify-theme-tokens-colors-primary) bg-(--clarify-ui-subtle-background) px-4 py-3 text-sm/6 text-(--clarify-ui-text-soft) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "clarify-note my-6 flex gap-3 rounded-r-(--clarify-theme-tokens-radius-lg) border-l-2 border-(--clarify-ui-border-strong) bg-(--clarify-ui-subtle-background) px-4 py-3 text-sm/6 text-(--clarify-ui-text-soft) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-text-soft)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -2372,7 +2392,7 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-openai-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-openai-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-code-surface) p-1 text-xs shadow-(--clarify-ui-shadow-popover) shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: normalizedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
 					value: option.value,
 					className: "clarify-openai-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-control-text) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:bg-(--clarify-code-accent-background) data-selected:text-(--clarify-code-accent-text)",
@@ -2402,7 +2422,7 @@ function CopyCodeButton(arg0) {
 		},
 		className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium whitespace-nowrap text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
 		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
-			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
+			className: "h-3.5 w-3.5 text-(--clarify-code-success)",
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ClipboardIcon, {
 			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
@@ -2540,7 +2560,7 @@ function ApiExampleCodeGroup(arg0) {
 			value: tag,
 			options: tagOptions,
 			onChange: onSelectTag,
-			className: "clarify-openai-example-status font-semibold text-emerald-400"
+			className: "clarify-openai-example-status font-semibold text-(--clarify-code-success)"
 		}) : null,
 		tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 		label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
@@ -2552,7 +2572,7 @@ function ApiExampleCodeGroup(arg0) {
 		}) : null
 	] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-openai-example my-6 overflow-hidden rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-background) shadow-sm",
+		className: "clarify-openai-example my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-code-border) bg-(--clarify-code-background) shadow-(--clarify-ui-shadow-raised)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "not-prose",
 			children: [
@@ -2873,7 +2893,7 @@ function OpenApiAuthDocumentation(props) {
 							className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 							children: schemeOption.name
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
+							className: "rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
 							children: authSchemeType(schemeOption, t("openapi.authApiKey"))
 						})]
 					}),
@@ -3424,7 +3444,7 @@ function SchemaSearchButton(arg0) {
 		"aria-label": label,
 		"aria-pressed": open,
 		onClick,
-		className: (0, clsx.default)("flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", open ? "bg-(--clarify-ui-hover-background) text-(--clarify-theme-tokens-colors-primary)" : "text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)"),
+		className: (0, clsx.default)("flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", open ? "bg-(--clarify-ui-active-background) text-(--clarify-ui-text-strong)" : "text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -3593,7 +3613,7 @@ function EndpointResponse(arg0) {
 //#endregion
 //#region source/openapi/components/InlineListbox.tsx
 var defaultButtonClassName = "inline-flex min-w-0 items-center justify-between gap-1 border-0 bg-transparent font-medium text-(--clarify-ui-text-strong) outline-hidden transition hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-disabled:cursor-not-allowed data-open:bg-(--clarify-ui-active-background)";
-var optionsClassName = "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 [--anchor-gap:--spacing(1)] focus:outline-none";
+var optionsClassName = "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-(--clarify-ui-shadow-popover) shadow-black/10 [--anchor-gap:--spacing(1)] focus:outline-none";
 var optionClassName = "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)";
 function OptionContent(arg0) {
 	const { option } = arg0;
@@ -4184,8 +4204,8 @@ function RequestField(arg0) {
 			children: description
 		}),
 		side: "bottom",
-		className: "mr-1 shrink-0 *:[[role=tooltip]]:w-80 *:[[role=tooltip]]:max-w-[min(20rem,calc(100vw-2rem))] *:[[role=tooltip]]:border *:[[role=tooltip]]:border-(--clarify-theme-tokens-colors-border) *:[[role=tooltip]]:bg-(--clarify-theme-tokens-colors-surface) *:[[role=tooltip]]:p-3 *:[[role=tooltip]]:text-(--clarify-ui-text) *:[[role=tooltip]]:shadow-xl",
-		triggerClassName: "clarify-field-description-trigger clarify-ui-control inline-flex size-7 items-center justify-center rounded-md !border-b-0 text-(--clarify-ui-text-faint) transition-colors",
+		className: "mr-1 shrink-0 *:[[role=tooltip]]:w-80 *:[[role=tooltip]]:max-w-[min(20rem,calc(100vw-2rem))] *:[[role=tooltip]]:border *:[[role=tooltip]]:border-(--clarify-theme-tokens-colors-border) *:[[role=tooltip]]:bg-(--clarify-theme-tokens-colors-surface) *:[[role=tooltip]]:p-3 *:[[role=tooltip]]:text-(--clarify-ui-text) *:[[role=tooltip]]:shadow-(--clarify-ui-shadow-popover)",
+		triggerClassName: "clarify-field-description-trigger clarify-ui-control inline-flex size-7 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) !border-b-0 text-(--clarify-ui-text-faint) transition-colors",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.InfoIcon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -4741,7 +4761,7 @@ function SendRequestButton(arg0) {
 		"aria-label": label,
 		title: label,
 		onClick,
-		className: Boolean(text) ? "flex h-8 shrink-0 items-center gap-1.5 rounded bg-(--clarify-theme-tokens-colors-foreground) px-3 text-xs font-semibold text-(--clarify-theme-tokens-colors-background) transition hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60" : "grid size-7 shrink-0 place-items-center rounded bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-inset ring-(--clarify-ui-accent-border) transition-colors hover:bg-(--clarify-theme-tokens-colors-foreground) hover:text-(--clarify-theme-tokens-colors-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60",
+		className: Boolean(text) ? "flex h-8 shrink-0 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-theme-tokens-colors-foreground) px-3 text-xs font-semibold text-(--clarify-theme-tokens-colors-background) transition hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60" : "grid size-7 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-strong) ring-1 ring-inset ring-(--clarify-ui-border) transition-colors hover:bg-(--clarify-theme-tokens-colors-foreground) hover:text-(--clarify-theme-tokens-colors-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60",
 		children: [busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderCircleIcon, {
 			className: "size-4 animate-spin",
 			"aria-hidden": "true"
@@ -5382,7 +5402,7 @@ function OpenApiRequestDialog(arg0) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "fixed inset-0 grid place-items-center overflow-y-auto p-3 sm:p-6",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, {
-				className: "relative flex h-[min(46rem,calc(100dvh-1.5rem))] w-full max-w-7xl flex-col overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) shadow-2xl sm:h-[min(46rem,calc(100dvh-3rem))]",
+				className: "relative flex h-[min(46rem,calc(100dvh-1.5rem))] w-full max-w-7xl flex-col overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) shadow-(--clarify-ui-shadow-popover) sm:h-[min(46rem,calc(100dvh-3rem))]",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogTitle, {
 					className: "sr-only",
 					children: t("openapi.tryRequest")
@@ -5413,7 +5433,7 @@ function EndpointPath(arg0) {
 			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
 			title: copied ? t("actions.copied") : t("actions.copy"),
 			onClick: onCopy,
-			className: (0, clsx.default)("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
+			className: (0, clsx.default)("flex h-7 w-7 shrink-0 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-border-strong) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-ui-focus-ring)", copied && "border-(--clarify-tone-success-border) bg-(--clarify-tone-success-background) text-(--clarify-tone-success-text)"),
 			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 				className: "h-3.5 w-3.5",
 				"aria-hidden": "true"
@@ -5452,7 +5472,7 @@ function ServerUrlValue(arg0) {
 	const protocolLabel = getServerProtocolLabel(server, variables);
 	if (!interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		"aria-label": "Server",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -5462,7 +5482,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "hidden min-w-0 items-center gap-1.5 overflow-hidden sm:flex",
 			children: [protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+				className: "shrink-0 rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-tone-info-background) px-1.5 py-0.5 text-2xs font-black text-(--clarify-tone-info-text)",
 				children: protocolLabel
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "truncate font-semibold text-xs",
@@ -5480,7 +5500,7 @@ function ServerUrlValue(arg0) {
 		})),
 		onChange: onSelect,
 		className: "w-8 shrink-0 sm:w-fit sm:min-w-16 sm:max-w-(--clarify-server-url-max-width)",
-		buttonClassName: "group flex h-8 w-full min-w-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) px-0 text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background) data-open:text-(--clarify-theme-tokens-colors-foreground) sm:px-1.5",
+		buttonClassName: "group flex h-8 w-full min-w-0 cursor-pointer items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) px-0 text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background) data-open:text-(--clarify-theme-tokens-colors-foreground) sm:px-1.5",
 		buttonContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -5491,7 +5511,7 @@ function ServerUrlValue(arg0) {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [
 				protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+					className: "shrink-0 rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-tone-info-background) px-1.5 py-0.5 text-2xs font-black text-(--clarify-tone-info-text)",
 					children: protocolLabel
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5499,7 +5519,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform group-data-open:rotate-180",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint) transition-transform group-data-open:rotate-180",
 					"aria-hidden": "true"
 				})
 			]
@@ -5510,7 +5530,7 @@ function ServerUrlValue(arg0) {
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: (0, clsx.default)("flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
+		className: (0, clsx.default)("flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -5521,7 +5541,7 @@ function ServerUrlValue(arg0) {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [
 				protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+					className: "shrink-0 rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-tone-info-background) px-1.5 py-0.5 text-2xs font-black text-(--clarify-tone-info-text)",
 					children: protocolLabel
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5529,7 +5549,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-					className: (0, clsx.default)("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
+					className: (0, clsx.default)("h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint) transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -5547,14 +5567,14 @@ function ServerVariableControl(arg0) {
 		})),
 		onChange,
 		compact,
-		buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
+		buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		"aria-label": name,
 		value,
 		placeholder: variable?.default ?? name,
 		onChange: (event) => onChange(event.target.value),
-		className: (0, clsx.default)("pointer-events-auto rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition placeholder:text-(--clarify-ui-text-faint) hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:border-(--clarify-theme-tokens-colors-primary) focus:bg-(--clarify-theme-tokens-colors-surface)", compact ? "mx-0.5 w-24 px-1.5 py-0.5" : "w-full px-2.5 py-1.5")
+		className: (0, clsx.default)("pointer-events-auto rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-hidden transition placeholder:text-(--clarify-ui-text-faint) hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:border-(--clarify-theme-tokens-colors-primary) focus:bg-(--clarify-theme-tokens-colors-surface)", compact ? "mx-0.5 w-24 px-1.5 py-0.5" : "w-full px-2.5 py-1.5")
 	});
 }
 function ServerPanel(arg0) {
@@ -5578,7 +5598,7 @@ function ServerPanel(arg0) {
 						description: server.description
 					})),
 					onChange: onSelectServer,
-					buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
+					buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-(--clarify-ui-shadow-raised) outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 				})]
 			}) : null, variableEntries.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
@@ -5614,7 +5634,7 @@ function EndpointIdentity(arg0) {
 		if (await require_PageActions.copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-openai-endpoint-identity not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
+		className: "clarify-openai-endpoint-identity not-prose flex w-full flex-col overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-shadow-raised)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
 			children: [
@@ -5667,9 +5687,9 @@ function OpenApiOperation(arg0) {
 		className: "clarify-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Heading, {
 				id,
-				children: summary
+				children: [summary, operation.deprecated === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.DeprecatedBadge, { className: "ml-2" }) : null]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointIdentity, {
 				method,
@@ -5980,4 +6000,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-Cv4N92VL.cjs.map
+//# sourceMappingURL=OpenApiOperation-CyR9Y-2y.cjs.map