@clarify-labs/renderer 0.6.7 → 0.7.1

package/output/{OpenApiOperation-CI_PeMSy.js → OpenApiOperation-LIL7bqxW.js}

@@ -1,10 +1,10 @@
-import { a as useSectionStore, c as resolveLucideIconName, o as remToPx, s as lucideIconRegistry, v as copyTextToClipboard, y as useBuiltInText } from "./shell-DvTfFx6M.js";
+import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useLocale, c as remToPx, j as useConfig, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as localizeHref } from "./PageActions-yoDRjkq8.js";
 import { t as markdownRemarkPlugins } from "./remark-Dd2WU50s.js";
 import clsx from "clsx";
 import { Children, createContext, createElement, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useInView } from "framer-motion";
 import { create } from "zustand";
@@ -23,6 +23,23 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
+//#region source/components/LocalizedLink.tsx
+function useLocalizedHref(href) {
+	return localizeHref(href, useConfig(), useLocale());
+}
+function LocalizedLink(arg0) {
+	const { href, ...props } = arg0;
+	const localizedHref = useLocalizedHref(href);
+	if (!isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ jsx(Link, {
+		to: localizedHref,
+		...props
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href: localizedHref,
+		...props
+	});
+}
+//#endregion
 //#region source/components/Button.tsx
 var buttonVariantStyles = {
 	primary: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary)/10 dark:text-(--clarify-theme-tokens-colors-primary) dark:ring-1 dark:ring-inset dark:ring-(--clarify-theme-tokens-colors-primary)/20 dark:hover:opacity-80",
@@ -33,11 +50,17 @@ var buttonVariantStyles = {
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = clsx("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
-	const arrowIcon = /* @__PURE__ */ jsx(ArrowRight, { className: clsx("mt-0.5 h-5 w-5", variant === "text" && "relative top-px", arrow === "left" && "-ml-1 rotate-180", arrow === "right" && "-mr-1") });
+	const classes = clsx("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1 overflow-hidden align-middle text-sm leading-6 font-medium whitespace-nowrap no-underline transition", 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")
+	});
 	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		arrow === "left" ? arrowIcon : null,
-		children,
+		/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		}),
 		arrow === "right" ? arrowIcon : null
 	] });
 	if (typeof props.href === "undefined") return /* @__PURE__ */ jsx("button", {
@@ -45,7 +68,7 @@ function Button(arg0) {
 		...props,
 		children: inner
 	});
-	return /* @__PURE__ */ jsx("a", {
+	return /* @__PURE__ */ jsx(LocalizedLink, {
 		className: classes,
 		...props,
 		children: inner
@@ -176,13 +199,7 @@ function Card(arg0) {
 		className: classes,
 		children: content
 	});
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ jsx(Link, {
-		to: href,
-		className: classes,
-		...props,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("a", {
+	return /* @__PURE__ */ jsx(LocalizedLink, {
 		href,
 		className: classes,
 		...props,
@@ -230,38 +247,30 @@ function CopyButton(arg0) {
 		return () => window.clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		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)"),
 		onClick: () => {
 			copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: [/* @__PURE__ */ jsxs("span", {
-			"aria-hidden": copied,
-			className: clsx("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ jsx(Clipboard, { className: "h-5 w-5 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": !copied,
-			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: t("actions.copied")
-		})]
+		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")] })
 	});
 }
 function CodePanelHeader(arg0) {
 	const { tag, label } = arg0;
 	if (!tag && !label) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
+		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)",
 				children: tag
 			}) : null,
-			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
+			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
 			label ? /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-zinc-400",
+				className: "truncate text-xs text-(--clarify-code-muted)",
 				children: label
 			}) : null
 		]
@@ -279,14 +288,14 @@ function CodePanel(arg0) {
 	}
 	const copyText = code ?? getNodeText(children);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
+		className: "clarify-code-panel group bg-(--clarify-code-background)",
 		children: [/* @__PURE__ */ jsx(CodePanelHeader, {
 			tag,
 			label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ jsx("pre", {
-				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
 			}), /* @__PURE__ */ jsx(CopyButton, { code: copyText })]
 		})]
@@ -298,14 +307,14 @@ function CodeGroupHeader(arg0) {
 	const hasTabs = Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
 		children: [title ? /* @__PURE__ */ jsx("h3", {
-			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			className: "mr-auto pt-3 text-xs font-semibold text-(--clarify-code-text)",
 			children: title
 		}) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
-				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
 				children: getPanelTitle({
 					...isValidElement(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
@@ -379,7 +388,7 @@ function CodeGroup(arg0) {
 		fallbackTitle: t("actions.code")
 	})) ?? []);
 	const hasTabs = Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -440,7 +449,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-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm", className),
+		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -743,6 +752,57 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/WebFrame.tsx
+function WebFrame(arg0) {
+	const { src, title = "Embedded content", children, showWindow = true, className, iframeClassName, height = 420, style, ...props } = arg0;
+	const frame = src ? /* @__PURE__ */ jsx("iframe", {
+		src,
+		title,
+		loading: "lazy",
+		className: clsx("block w-full flex-1 border-0 bg-white", iframeClassName),
+		style: {
+			height,
+			...style
+		},
+		...props
+	}) : /* @__PURE__ */ jsx("div", {
+		className: clsx("min-h-0 flex-1 overflow-auto bg-white text-zinc-950", iframeClassName),
+		style: {
+			height,
+			...style
+		},
+		children
+	});
+	if (!showWindow) return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		children: frame
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-10 items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-4",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "size-3 rounded-full bg-red-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "size-3 rounded-full bg-yellow-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "size-3 rounded-full bg-green-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: title
+				})
+			]
+		}), frame]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ __exportAll({
 	Button: () => Button,
@@ -755,8 +815,10 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 	Properties: () => Properties,
 	Property: () => Property,
 	Row: () => Row,
+	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
+	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
@@ -765,7 +827,7 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
+		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ jsx(Prose, {
 			className: "flex-auto",
 			children
@@ -774,15 +836,22 @@ function wrapper(arg0) {
 }
 function a(arg0) {
 	const { href = "", ...props } = arg0;
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ jsx(Link, {
-		to: href,
-		...props
-	});
-	return /* @__PURE__ */ jsx("a", {
+	return /* @__PURE__ */ jsx(LocalizedLink, {
 		href,
 		...props
 	});
 }
+function h1(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-page-title-row flex flex-col gap-4  pb-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: clsx("clarify-page-title min-w-0 flex-1", className),
+			...props,
+			children
+		}), /* @__PURE__ */ jsx(PageTitleActions, {})]
+	});
+}
 var code = Code;
 var pre = Pre;
 function h2(props) {
@@ -1487,26 +1556,26 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-black/30 px-2 py-1 text-xs font-medium whitespace-nowrap text-zinc-100 outline-hidden transition hover:bg-black/50 focus:ring-2 focus:ring-emerald-400/25 data-open:bg-white/10 data-open:ring-2 data-open:ring-emerald-400/25`,
+				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-(--clarify-code-control-background) px-2 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:bg-(--clarify-code-control-background-hover) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-zinc-500",
+						className: "shrink-0 text-(--clarify-code-faint)",
 						children: icon
 					}) : null, /* @__PURE__ */ jsx("span", {
 						className: "truncate",
 						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-500",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-code-faint)",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-zinc-900 p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-white/10 [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl 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",
 				children: normalizedOptions.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
 					value: option.value,
-					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
+					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-muted) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:text-(--clarify-theme-tokens-colors-primary)",
 					children: [/* @__PURE__ */ jsx("span", { children: option.label }), /* @__PURE__ */ jsx(CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1592,12 +1661,12 @@ function CopyCodeButton(arg0) {
 				window.setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		className: "flex items-center gap-1.5 rounded-full bg-black/ px-2.5 py-1.5 text-2xs font-medium text-zinc-400 transition hover:bg-black/50 hover:text-zinc-200 focus:bg-black/50 focus:text-zinc-200",
+		className: "flex items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium 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-emerald-300",
+			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ jsx(ClipboardIcon, {
-			className: "h-3.5 w-3.5 text-zinc-500",
+			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsx("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
 	});
@@ -1647,16 +1716,16 @@ function CodeToolbar(arg0) {
 function ApiExampleCodeGroup(arg0) {
 	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = useBuiltInText();
-	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 py-2 dark:border-b-white/5 dark:bg-white/1" : "flex h-9 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1";
+	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4 py-2" : "flex h-9 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4";
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",
+		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
+					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
+						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -1688,18 +1757,18 @@ function ApiExampleCodeGroup(arg0) {
 							onChange: onSelectTag,
 							className: "clarify-api-example-status font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : 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, {
 							label: t("openapi.mediaType"),
 							value: label,
 							options: labelOptions,
 							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-zinc-400"
+							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
 						}) : null
 					]
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-code group relative",
+					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ jsx(CodeToolbar, {
 						code,
 						languageOptions,
@@ -1709,7 +1778,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ jsx("pre", {
-						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
+						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ jsx("code", {
 							className: `language-${language}`,
 							children: code
@@ -2153,7 +2222,7 @@ function ServerUrlValue(arg0) {
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: clsx("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) 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 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) 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, {
@@ -2163,7 +2232,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs",
+				className: "truncate font-semibold text-xs",
 				children: url
 			}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
@@ -2468,6 +2537,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { CodeGroup as C, Callout as D, CardGroup as E, Button as O, Code as S, Card as T, Logo as _, authPlaceholder as a, Feedback as b, getServerKey as c, getRequestBody$1 as d, Markdown as f, HeroPattern as g, GridPattern as h, ResponseExamplesPanel as i, getServers as l, Prose as m, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u, Heading as v, Pre as w, Collapse as x, Tag as y };
+export { Code as C, CardGroup as D, Card as E, Callout as O, Collapse as S, Pre as T, HeroPattern as _, authPlaceholder as a, Tag as b, getServerKey as c, getRequestBody$1 as d, Markdown as f, GridPattern as g, Prose as h, ResponseExamplesPanel as i, Button as k, getServers as l, WebFrame as m, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u, Logo as v, CodeGroup as w, Feedback as x, Heading as y };
 
-//# sourceMappingURL=OpenApiOperation-CI_PeMSy.js.map
+//# sourceMappingURL=OpenApiOperation-LIL7bqxW.js.map