@clarify-labs/renderer 0.11.21 → 0.11.24

package/output/{OpenApiOperation-B68CqUJW.js → OpenApiOperation-p1OjfdKR.js}

@@ -1,5 +1,5 @@
-import { a as useConfig, l as useLocale, o as useConfigOptional, t as useBuiltInText } from "./i18n-Zmmhz7FF.js";
-import { c as remToPx, h as localizeHref, l as lucideIconRegistry, m as isExternalHref, p as useTheme, s as useSectionStore, t as PageActions, u as resolveLucideIconName, v as copyTextToClipboard } from "./PageActions-BszP_J4e.js";
+import { a as useConfig, l as useLocale, o as useConfigOptional, t as useBuiltInText } from "./i18n-Bt-OaKRP.js";
+import { c as useSectionStore, d as resolveLucideIconName, g as localizeHref, h as isExternalHref, l as remToPx, m as useTheme, o as DeprecatedBadge, t as PageActions, u as lucideIconRegistry, y as copyTextToClipboard } from "./PageActions-DAdtjf4H.js";
 import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
@@ -72,15 +72,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 = clsx("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 = clsx("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__ */ jsx(ArrowRight, {
 		"aria-hidden": "true",
 		className: clsx("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
@@ -108,48 +108,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: 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: 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: 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: 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: 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: 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",
@@ -162,21 +181,22 @@ function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
 	const t = 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__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ jsx("span", {
-			className: clsx("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", style.iconContainer),
+			className: clsx("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", toneStyle.iconContainer),
 			children: /* @__PURE__ */ jsx(Icon, {
-				className: clsx("size-4", style.icon),
+				className: clsx("size-4", toneStyle.icon),
 				"aria-hidden": "true"
 			})
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
 			children: [resolvedTitle ? /* @__PURE__ */ jsx("p", {
-				className: clsx("mb-1.5 font-semibold", style.title),
+				className: clsx("mb-1.5 font-semibold", toneStyle.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ jsx("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -195,7 +215,7 @@ function CardIcon(arg0) {
 	const Icon = lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ 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__ */ jsx(Icon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -227,7 +247,7 @@ function Card(arg0) {
 					className: "m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 					children: title
 				}), href ? /* @__PURE__ */ jsx(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__ */ jsx("div", {
@@ -239,7 +259,7 @@ function Card(arg0) {
 		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = clsx("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 = clsx("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__ */ jsx("div", {
 		className: classes,
 		children: content
@@ -253,7 +273,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-DtswU1MF.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-DHxjl1zP.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -305,10 +325,10 @@ function Mermaid(arg0) {
 		resolvedTheme
 	]);
 	if (error) return /* @__PURE__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ 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__ */ jsx("pre", {
@@ -322,7 +342,7 @@ function Mermaid(arg0) {
 		]
 	});
 	if (!svg) return /* @__PURE__ */ jsx("div", {
-		className: clsx("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: clsx("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__ */ jsx("pre", {
 			className: "text-xs text-(--clarify-ui-text-soft)",
 			children: chart.trim()
@@ -342,7 +362,7 @@ function Mermaid(arg0) {
 function MermaidStaticSvg(arg0) {
 	const { svg, className } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("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: clsx("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__ */ jsx("div", {
 			className: "flex w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full",
 			dangerouslySetInnerHTML: { __html: svg }
@@ -413,13 +433,13 @@ function CopyButton$1(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: clsx("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: clsx("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: () => {
 			copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: copied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 stroke-(--clarify-code-success)" }), t("actions.copied")] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(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) {
@@ -429,7 +449,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__ */ 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__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
@@ -560,7 +580,7 @@ function CodeGroup(arg0) {
 	const t = useBuiltInText();
 	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getCodePanelTitle(child, t("actions.code"))) ?? []);
 	const hasTabs = 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__ */ jsx(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -626,7 +646,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ jsxs("button", {
 			type: "button",
@@ -701,8 +721,8 @@ var FeedbackThanks = forwardRef(function FeedbackThanks(arg0, ref) {
 		ref,
 		className: clsx(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
 		children: /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(CircleCheck, { className: "h-5 w-5 flex-none stroke-(--clarify-tone-success-icon)" }), t("feedback.thanks")]
 		})
 	});
 });
@@ -753,7 +773,7 @@ function FileTreeItem(arg0) {
 			className: "flex min-h-6 items-center gap-2 whitespace-nowrap",
 			children: [
 				isFolder ? /* @__PURE__ */ 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__ */ jsx(File, {
 					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
@@ -779,28 +799,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 = {
@@ -828,9 +848,9 @@ function Eyebrow(arg0) {
 		className: "flex items-center gap-x-3",
 		children: [
 			tag ? /* @__PURE__ */ jsx(Tag, { children: tag }) : null,
-			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" }) : null,
+			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-ui-border-strong)" }) : null,
 			label ? /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-zinc-400",
+				className: "text-xs text-(--clarify-ui-text-faint)",
 				children: label
 			}) : null
 		]
@@ -843,7 +863,7 @@ function Anchor(arg0) {
 		className: "clarify-anchor group text-inherit no-underline hover:text-inherit",
 		children: [inView ? /* @__PURE__ */ 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__ */ jsx(LinkIcon, { className: "h-5 w-5 text-(--clarify-theme-tokens-colors-primary) opacity-80 transition group-hover:opacity-100" })
+			children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-5 w-5 text-(--clarify-ui-text-soft) opacity-0 transition group-hover:opacity-100" })
 		}) : null, children]
 	});
 }
@@ -896,7 +916,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__ */ 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"
 		})]
 	});
@@ -961,12 +981,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__ */ 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__ */ jsx("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
 			})]
 		})
@@ -998,7 +1018,7 @@ function Step(arg0) {
 		...props,
 		children: [
 			/* @__PURE__ */ 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__ */ jsx("h3", {
@@ -1106,7 +1126,7 @@ function Tooltip(arg0) {
 			ref: triggerRef,
 			"aria-describedby": contentId,
 			"aria-expanded": open,
-			className: clsx("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: clsx("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),
@@ -1120,7 +1140,7 @@ function Tooltip(arg0) {
 			role: "tooltip",
 			popover: "manual",
 			style: position,
-			className: clsx("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: clsx("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
 		})]
 	});
@@ -1148,13 +1168,13 @@ function WebFrame(arg0) {
 		children
 	});
 	if (!showWindow) return /* @__PURE__ */ jsx("div", {
-		className: clsx("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: clsx("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__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ 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__ */ jsxs("div", {
 					className: "flex items-center gap-1.5",
@@ -1196,7 +1216,7 @@ function Image(arg0) {
 					"aria-label": `Enlarge image: ${alt}`,
 					onClick: () => setOpen(true),
 					children: [image, /* @__PURE__ */ 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__ */ jsx(Maximize2, {
 							className: "size-4",
 							"aria-hidden": "true"
@@ -1212,17 +1232,17 @@ function Image(arg0) {
 				open,
 				onClose: setOpen,
 				className: "relative z-50",
-				children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75 backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
+				children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
 					className: "fixed inset-0 flex items-center justify-center p-4 sm:p-8",
 					children: /* @__PURE__ */ jsxs(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__ */ jsx("img", {
 							src,
 							alt,
 							className: "max-h-[calc(100dvh-5rem)] max-w-[calc(100vw-5rem)] object-contain"
 						}), /* @__PURE__ */ 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__ */ jsx(X, {
@@ -1278,7 +1298,7 @@ function Release(arg0) {
 		children: [/* @__PURE__ */ jsxs("header", {
 			className: "self-start sm:sticky sm:top-24",
 			children: [/* @__PURE__ */ 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__ */ jsxs("time", {
 				dateTime: date,
@@ -1363,8 +1383,8 @@ function h3(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ 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__ */ jsx(Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ 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__ */ jsx(Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-text-soft)" }), /* @__PURE__ */ jsx("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -1831,13 +1851,14 @@ function listOpenApiOperations(spec, operationOrder) {
 	const paths = spec.paths ?? {};
 	const webhooks = spec.webhooks;
 	const operations = [...listOperationsFromPathItems(paths, "path", spec), ...isRecord(webhooks) ? listOperationsFromPathItems(webhooks, "webhook", spec) : []];
-	if (!operationOrder?.length) return operations;
-	const orderByOperationId = new Map(operationOrder.map((operationId, index) => [operationId, index]));
+	const orderByOperationId = new Map((operationOrder ?? []).map((operationId, index) => [operationId, index]));
+	const fallbackOrder = operationOrder?.length ?? 0;
 	return operations.map((entry, index) => ({
 		entry,
 		index,
-		order: entry.operation.operationId ? orderByOperationId.get(entry.operation.operationId) : void 0
-	})).sort((left, right) => (left.order ?? operationOrder.length) - (right.order ?? operationOrder.length) || left.index - right.index).map(({ entry }) => entry);
+		deprecated: entry.operation.deprecated === true ? 1 : 0,
+		order: entry.operation.operationId ? orderByOperationId.get(entry.operation.operationId) ?? fallbackOrder : fallbackOrder
+	})).sort((left, right) => left.deprecated - right.deprecated || left.order - right.order || left.index - right.index).map(({ entry }) => entry);
 }
 //#endregion
 //#region source/openapi/components/EndpointMethodBadge.tsx
@@ -2380,7 +2401,7 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ jsx(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__ */ jsxs(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)",
@@ -2410,7 +2431,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__ */ jsx(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__ */ jsx(ClipboardIcon, {
 			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
@@ -2548,7 +2569,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__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 		label ? /* @__PURE__ */ jsx(ExampleMetaValue, {
@@ -2560,7 +2581,7 @@ function ApiExampleCodeGroup(arg0) {
 		}) : null
 	] });
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
@@ -2881,7 +2902,7 @@ function OpenApiAuthDocumentation(props) {
 							className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 							children: schemeOption.name
 						}), /* @__PURE__ */ 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"))
 						})]
 					}),
@@ -3432,7 +3453,7 @@ function SchemaSearchButton(arg0) {
 		"aria-label": label,
 		"aria-pressed": open,
 		onClick,
-		className: clsx("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: clsx("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__ */ jsx(SearchIcon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -3601,7 +3622,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;
@@ -4192,8 +4213,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__ */ jsx(InfoIcon, {
 			className: "size-4",
 			"aria-hidden": "true"
@@ -4749,7 +4770,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__ */ jsx(LoaderCircleIcon, {
 			className: "size-4 animate-spin",
 			"aria-hidden": "true"
@@ -5390,7 +5411,7 @@ function OpenApiRequestDialog(arg0) {
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
 			className: "fixed inset-0 grid place-items-center overflow-y-auto p-3 sm:p-6",
 			children: /* @__PURE__ */ jsxs(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__ */ jsx(DialogTitle, {
 					className: "sr-only",
 					children: t("openapi.tryRequest")
@@ -5421,7 +5442,7 @@ function EndpointPath(arg0) {
 			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
 			title: copied ? t("actions.copied") : t("actions.copy"),
 			onClick: onCopy,
-			className: clsx("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: clsx("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__ */ jsx(CheckIcon, {
 				className: "h-3.5 w-3.5",
 				"aria-hidden": "true"
@@ -5460,7 +5481,7 @@ function ServerUrlValue(arg0) {
 	const protocolLabel = getServerProtocolLabel(server, variables);
 	if (!interactive) return /* @__PURE__ */ 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__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -5470,7 +5491,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "hidden min-w-0 items-center gap-1.5 overflow-hidden sm:flex",
 			children: [protocolLabel ? /* @__PURE__ */ 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__ */ jsx("span", {
 				className: "truncate font-semibold text-xs",
@@ -5488,7 +5509,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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -5499,7 +5520,7 @@ function ServerUrlValue(arg0) {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [
 				protocolLabel ? /* @__PURE__ */ 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__ */ jsx("span", {
@@ -5507,7 +5528,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ jsx(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"
 				})
 			]
@@ -5518,7 +5539,7 @@ function ServerUrlValue(arg0) {
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: clsx("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: clsx("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__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -5529,7 +5550,7 @@ function ServerUrlValue(arg0) {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [
 				protocolLabel ? /* @__PURE__ */ 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__ */ jsx("span", {
@@ -5537,7 +5558,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: clsx("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
+					className: clsx("h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint) transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -5555,14 +5576,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__ */ jsx("input", {
 		"aria-label": name,
 		value,
 		placeholder: variable?.default ?? name,
 		onChange: (event) => onChange(event.target.value),
-		className: clsx("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: clsx("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) {
@@ -5586,7 +5607,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__ */ jsx("div", {
 				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
@@ -5622,7 +5643,7 @@ function EndpointIdentity(arg0) {
 		if (await copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
 			children: [
@@ -5675,9 +5696,9 @@ function OpenApiOperation(arg0) {
 		className: "clarify-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
-			/* @__PURE__ */ jsx(Heading, {
+			/* @__PURE__ */ jsxs(Heading, {
 				id,
-				children: summary
+				children: [summary, operation.deprecated === true ? /* @__PURE__ */ jsx(DeprecatedBadge, { className: "ml-2" }) : null]
 			}),
 			/* @__PURE__ */ jsx(EndpointIdentity, {
 				method,
@@ -5737,4 +5758,4 @@ function OpenApiOperation(arg0) {
 //#endregion
 export { Heading as A, Callout as B, Tabs as C, GridPattern as D, Prose as E, CodeGroup as F, LocalizedLink as H, Pre as I, Mermaid as L, Feedback as M, Collapse as N, HeroPattern as O, Code as P, Card as R, TabItem as S, Steps as T, Button as V, Markdown as _, ResponseExamplesPanel as a, primitives_exports as b, getAuthOptions as c, EndpointMethodBadge as d, getOpenApiOperationEntryById as f, getRequestBody$1 as g, getMediaTypeEntries as h, RequestExamplesPanel as i, Tag as j, Logo as k, getServerKey as l, listOpenApiOperations as m, OpenApiOperation as n, authPlaceholder as o, getOpenApiOperationSectionId as p, OpenApiRequestWorkbench as r, defaultServerVariables as s, EndpointIdentity as t, getServers as u, Release as v, Step as w, WebFrame as x, ReleaseItem as y, CardGroup as z };
 
-//# sourceMappingURL=OpenApiOperation-B68CqUJW.js.map
+//# sourceMappingURL=OpenApiOperation-p1OjfdKR.js.map