@clarify-labs/renderer 0.6.3 → 0.6.5

package/output/{OpenApiOperation-DYXG-6Rw.js → OpenApiOperation-WntXLbai.js}

@@ -1,11 +1,13 @@
-import { M as useBuiltInText, _ as Callout, c as Heading, f as Code, g as CardGroup, h as Card, i as Prose, j as copyTextToClipboard, m as Pre, p as CodeGroup, v as Button } from "./shell-BlMMdTpZ.js";
+import { a as useSectionStore, c as resolveLucideIconName, o as remToPx, s as lucideIconRegistry, v as copyTextToClipboard, y as useBuiltInText } from "./shell-DvTfFx6M.js";
 import { t as markdownRemarkPlugins } from "./remark-o5sg9Ilv.js";
 import clsx from "clsx";
-import { createElement, useState } from "react";
+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 } from "@headlessui/react";
-import { CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, ClipboardIcon, CodeIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon } from "lucide-react";
+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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "framer-motion";
+import { create } from "zustand";
 import ReactMarkdown from "react-markdown";
 import { slug } from "github-slugger";
 import { snippetz } from "@scalar/snippetz";
@@ -21,6 +23,729 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#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",
+	secondary: "rounded-full bg-(--clarify-theme-tokens-colors-code-background) px-3 py-1 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: "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) dark:hover:opacity-80",
+	outline: "rounded-full px-3 py-1 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"
+};
+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 inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		arrow === "left" ? arrowIcon : null,
+		children,
+		arrow === "right" ? arrowIcon : null
+	] });
+	if (typeof props.href === "undefined") return /* @__PURE__ */ jsx("button", {
+		className: classes,
+		...props,
+		children: inner
+	});
+	return /* @__PURE__ */ jsx("a", {
+		className: classes,
+		...props,
+		children: inner
+	});
+}
+//#endregion
+//#region source/components/Callout.tsx
+var calloutStyles = {
+	info: {
+		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
+		icon: "text-sky-600 dark:text-sky-400",
+		title: "text-sky-900 dark:text-sky-100",
+		Icon: Info
+	},
+	note: {
+		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
+		icon: "text-zinc-500 dark:text-zinc-400",
+		title: "text-zinc-900 dark:text-white",
+		Icon: Info
+	},
+	tip: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: Lightbulb
+	},
+	warning: {
+		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-900 dark:text-amber-100",
+		Icon: AlertTriangle
+	},
+	danger: {
+		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
+		icon: "text-rose-600 dark:text-rose-400",
+		title: "text-rose-900 dark:text-rose-100",
+		Icon: XCircle
+	},
+	success: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: CheckCircle2
+	}
+};
+var defaultTitleKeys = {
+	info: "callout.info",
+	note: "callout.note",
+	tip: "callout.tip",
+	warning: "callout.warning",
+	danger: "callout.danger",
+	success: "callout.success"
+};
+function Callout(arg0) {
+	const { children, type = "info", title, icon = true, className, ...props } = arg0;
+	const t = useBuiltInText();
+	const style = calloutStyles[type];
+	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 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			className: clsx("mt-1 size-4 flex-none", style.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 font-semibold", style.title),
+				children: resolvedTitle
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: "*:first:mt-0 *:last:mb-0",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+//#region source/components/Card.tsx
+function CardIcon(arg0) {
+	const { name } = arg0;
+	if (!name) return null;
+	const iconName = resolveLucideIconName(name);
+	if (!iconName) return null;
+	const Icon = lucideIconRegistry[iconName];
+	if (!Icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "size-5",
+			"aria-hidden": "true"
+		})
+	});
+}
+var cardGroupColumnStyles = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function CardGroup(arg0) {
+	const { children, cols = 2, className } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
+		children
+	});
+}
+function Card(arg0) {
+	const { title, icon, href, children, className, ...props } = arg0;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-4",
+		children: [/* @__PURE__ */ jsx(CardIcon, { name: icon }), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "m-0 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: title
+			}), children ? /* @__PURE__ */ jsx("div", {
+				className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
+				children
+			}) : null]
+		})]
+	}), href ? /* @__PURE__ */ jsx("span", {
+		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-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-(--clarify-ui-accent-glow) transition hover:shadow-xs", className);
+	if (!href) return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children: content
+	});
+	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ jsx(Link, {
+		to: href,
+		className: classes,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		className: classes,
+		...props,
+		children: content
+	});
+}
+//#endregion
+//#region source/components/Code.tsx
+var languageNames = {
+	js: "JavaScript",
+	ts: "TypeScript",
+	jsx: "React JSX",
+	tsx: "React TSX",
+	javascript: "JavaScript",
+	typescript: "TypeScript",
+	php: "PHP",
+	python: "Python",
+	ruby: "Ruby",
+	go: "Go",
+	bash: "Shell",
+	sh: "Shell",
+	shell: "Shell",
+	json: "JSON"
+};
+function getPanelTitle(arg0) {
+	const { title, language, fallbackTitle = "Code" } = arg0;
+	if (title) return title;
+	if (language && language in languageNames) return languageNames[language];
+	return fallbackTitle;
+}
+function getNodeText(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(getNodeText).join("");
+	if (isValidElement(node)) return getNodeText(node.props.children);
+	return "";
+}
+function CopyButton(arg0) {
+	const { code } = arg0;
+	const t = useBuiltInText();
+	const [copyCount, setCopyCount] = useState(0);
+	const copied = copyCount > 0;
+	useEffect(() => {
+		if (copyCount === 0) return void 0;
+		const timeout = window.setTimeout(() => setCopyCount(0), 1e3);
+		return () => window.clearTimeout(timeout);
+	}, [copyCount]);
+	if (!code) return null;
+	return /* @__PURE__ */ jsxs("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"),
+		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")
+		})]
+	});
+}
+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",
+		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,
+			label ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-zinc-400",
+				children: label
+			}) : null
+		]
+	});
+}
+function CodePanel(arg0) {
+	const { children } = arg0;
+	let { tag, label, code } = arg0;
+	const child = Children.only(children);
+	if (isValidElement(child)) {
+		const props = child.props;
+		tag = props.tag ?? tag;
+		label = props.label ?? label;
+		code = props.code ?? code ?? getNodeText(props.children);
+	}
+	const copyText = code ?? getNodeText(children);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-code-panel group dark:bg-white/2.5",
+		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",
+				children
+			}), /* @__PURE__ */ jsx(CopyButton, { code: copyText })]
+		})]
+	});
+}
+function CodeGroupHeader(arg0) {
+	const { title, children, selectedIndex } = arg0;
+	const t = useBuiltInText();
+	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",
+		children: [title ? /* @__PURE__ */ jsx("h3", {
+			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			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"),
+				children: getPanelTitle({
+					...isValidElement(child) ? child.props : {},
+					fallbackTitle: t("actions.code")
+				})
+			}))
+		}) : null]
+	});
+}
+function CodeGroupPanels(arg0) {
+	const { children, ...props } = arg0;
+	if (Children.count(children) > 1) return /* @__PURE__ */ jsx(TabPanels, { children: Children.map(children, (child) => /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(CodePanel, {
+		...props,
+		children: child
+	}) })) });
+	return /* @__PURE__ */ jsx(CodePanel, {
+		...props,
+		children
+	});
+}
+function usePreventLayoutShift() {
+	const positionRef = useRef(null);
+	const rafRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			if (typeof rafRef.current !== "undefined") window.cancelAnimationFrame(rafRef.current);
+		};
+	}, []);
+	return {
+		positionRef,
+		preventLayoutShift(callback) {
+			if (!positionRef.current) return;
+			const initialTop = positionRef.current.getBoundingClientRect().top;
+			callback();
+			rafRef.current = window.requestAnimationFrame(() => {
+				const newTop = positionRef.current?.getBoundingClientRect().top ?? initialTop;
+				window.scrollBy(0, newTop - initialTop);
+			});
+		}
+	};
+}
+var usePreferredLanguageStore = create()((set) => ({
+	preferredLanguages: [],
+	addPreferredLanguage: (language) => set((state) => ({ preferredLanguages: [...state.preferredLanguages.filter((preferredLanguage) => preferredLanguage !== language), language] }))
+}));
+function useTabGroupProps(availableLanguages) {
+	const { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	if (new Set(availableLanguages).size === availableLanguages.length) {
+		const activeLanguage = [...availableLanguages].sort((a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a))[0];
+		const languageIndex = availableLanguages.indexOf(activeLanguage);
+		const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex;
+		if (newSelectedIndex !== selectedIndex) setSelectedIndex(newSelectedIndex);
+	}
+	const { positionRef, preventLayoutShift } = usePreventLayoutShift();
+	return {
+		as: "div",
+		ref: positionRef,
+		selectedIndex,
+		onChange: (nextSelectedIndex) => {
+			setSelectedIndex(nextSelectedIndex);
+			preventLayoutShift(() => addPreferredLanguage(availableLanguages[nextSelectedIndex]));
+		}
+	};
+}
+var CodeGroupContext = createContext(false);
+function CodeGroup(arg0) {
+	const { children, title, ...props } = arg0;
+	const t = useBuiltInText();
+	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle({
+		...isValidElement(child) ? child.props : {},
+		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 header = /* @__PURE__ */ jsx(CodeGroupHeader, {
+		title,
+		selectedIndex: tabGroupProps.selectedIndex,
+		children
+	});
+	const panels = /* @__PURE__ */ jsx(CodeGroupPanels, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(CodeGroupContext.Provider, {
+		value: true,
+		children: hasTabs ? /* @__PURE__ */ jsx(TabGroup, {
+			...tabGroupProps,
+			className: containerClassName,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "not-prose",
+				children: [header, panels]
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: containerClassName,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "not-prose",
+				children: [header, panels]
+			})
+		})
+	});
+}
+function Code(arg0) {
+	const { children, ...props } = arg0;
+	if (useContext(CodeGroupContext) && typeof children === "string") return /* @__PURE__ */ jsx("code", {
+		...props,
+		dangerouslySetInnerHTML: { __html: children }
+	});
+	return /* @__PURE__ */ jsx("code", {
+		...props,
+		children
+	});
+}
+function Pre(arg0) {
+	const { children, ...props } = arg0;
+	if (useContext(CodeGroupContext)) return children;
+	return /* @__PURE__ */ jsx(CodeGroup, {
+		...props,
+		children
+	});
+}
+//#endregion
+//#region source/components/Collapse.tsx
+function Collapse(arg0) {
+	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
+	const [open, setOpen] = useState(defaultOpen);
+	const contentRef = useRef(null);
+	const [maxHeight, setMaxHeight] = useState("0px");
+	const summaryLabel = title ?? summary ?? "Details";
+	const contentId = useId();
+	useLayoutEffect(() => {
+		if (!contentRef.current) return;
+		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),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) 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)",
+			"aria-expanded": open,
+			"aria-controls": contentId,
+			onClick: () => setOpen((value) => !value),
+			children: [/* @__PURE__ */ jsx("span", { children: summaryLabel }), /* @__PURE__ */ jsx(ChevronDown, {
+				className: clsx("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			className: "clarify-collapse-content overflow-hidden border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) duration-200 ease-out",
+			style: {
+				maxHeight,
+				willChange: "max-height, opacity, transform"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				className: clsx("px-4 py-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) transition-opacity duration-200 ease-out", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
+				children
+			})
+		})]
+	});
+}
+//#endregion
+//#region source/components/Feedback.tsx
+function FeedbackButton(props) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "submit",
+		className: "clarify-feedback-button px-3 text-sm font-medium text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+		...props
+	});
+}
+var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
+	const { onSubmit, className, ...props } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsxs("form", {
+		...props,
+		ref,
+		onSubmit,
+		className: clsx(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm text-(--clarify-ui-text-soft)",
+			children: t("feedback.prompt")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "clarify-feedback-actions group grid h-8 grid-cols-(--clarify-feedback-actions-grid) overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border)",
+			children: [
+				/* @__PURE__ */ jsx(FeedbackButton, {
+					"data-response": "yes",
+					children: t("feedback.yes")
+				}),
+				/* @__PURE__ */ jsx("div", { className: "bg-(--clarify-theme-tokens-colors-border)" }),
+				/* @__PURE__ */ jsx(FeedbackButton, {
+					"data-response": "no",
+					children: t("feedback.no")
+				})
+			]
+		})]
+	});
+});
+var FeedbackThanks = forwardRef(function FeedbackThanks(arg0, ref) {
+	const { className, ...props } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		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")]
+		})
+	});
+});
+function Feedback() {
+	const [submitted, setSubmitted] = useState(false);
+	function onSubmit(event) {
+		event.preventDefault();
+		setSubmitted(true);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-feedback relative h-8",
+		children: [/* @__PURE__ */ jsx(Transition, {
+			show: !submitted,
+			children: /* @__PURE__ */ jsx(FeedbackForm, {
+				className: "duration-300 data-closed:opacity-0 data-leave:pointer-events-none",
+				onSubmit
+			})
+		}), /* @__PURE__ */ jsx(Transition, {
+			show: submitted,
+			children: /* @__PURE__ */ jsx(FeedbackThanks, { className: "delay-150 duration-300 data-closed:opacity-0" })
+		})]
+	});
+}
+//#endregion
+//#region source/components/Tag.tsx
+var tagVariantStyles = {
+	small: "",
+	medium: "rounded-lg 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"
+	},
+	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"
+	},
+	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"
+	},
+	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"
+	},
+	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)"
+	}
+};
+var tagValueColorMap = {
+	GET: "emerald",
+	POST: "sky",
+	PUT: "amber",
+	PATCH: "amber",
+	DELETE: "rose"
+};
+function Tag(arg0) {
+	const { children, variant = "medium", color } = arg0;
+	const value = typeof children === "string" ? children.toUpperCase() : "";
+	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("clarify-tag font-bold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
+		children
+	});
+}
+//#endregion
+//#region source/components/Heading.tsx
+function Eyebrow(arg0) {
+	const { tag, label } = arg0;
+	if (!tag && !label) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		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,
+			label ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-zinc-400",
+				children: label
+			}) : null
+		]
+	});
+}
+function Anchor(arg0) {
+	const { id, inView, children } = arg0;
+	return /* @__PURE__ */ jsxs("a", {
+		href: `#${id}`,
+		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("div", {
+				className: "group/anchor block h-5 w-5 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600",
+				children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" })
+			})
+		}) : null, children]
+	});
+}
+function Heading(arg0) {
+	const { children, className, tag, label, level, anchor = true, ...props } = arg0;
+	const resolvedLevel = level ?? 2;
+	const Component = `h${resolvedLevel}`;
+	const ref = useRef(null);
+	const registerHeading = useSectionStore((state) => state.registerHeading);
+	const inView = useInView(ref, {
+		margin: `${remToPx(-3.5)}px 0px 0px 0px`,
+		amount: "all"
+	});
+	useEffect(() => {
+		if (resolvedLevel === 2) registerHeading({
+			id: props.id,
+			ref,
+			offsetRem: tag || label ? 8 : 6
+		});
+	}, [
+		label,
+		props.id,
+		registerHeading,
+		resolvedLevel,
+		tag
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Eyebrow, {
+		tag,
+		label
+	}), /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24", className),
+		...props,
+		children: anchor ? /* @__PURE__ */ jsx(Anchor, {
+			id: props.id,
+			inView,
+			children
+		}) : children
+	})] });
+}
+//#endregion
+//#region source/components/Logo.tsx
+function Logo(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 99 24",
+		"aria-hidden": "true",
+		...props,
+		className: clsx("clarify-logo", props.className),
+		children: [/* @__PURE__ */ jsx("path", {
+			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",
+			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"
+		})]
+	});
+}
+//#endregion
+//#region source/components/patterns.tsx
+function GridPattern(arg0) {
+	const { width, height, x, y, squares, ...props } = arg0;
+	const patternId = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
+				id: patternId,
+				width,
+				height,
+				patternUnits: "userSpaceOnUse",
+				x,
+				y,
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M.5 ${height}V.5H${width}`,
+					fill: "none"
+				})
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				strokeWidth: 0,
+				fill: `url(#${patternId})`
+			}),
+			squares ? /* @__PURE__ */ jsx("svg", {
+				x,
+				y,
+				className: "overflow-visible",
+				children: squares.map(([squareX, squareY]) => /* @__PURE__ */ jsx("rect", {
+					width: width + 1,
+					height: height + 1,
+					x: squareX * width,
+					y: squareY * height,
+					strokeWidth: "0"
+				}, `${squareX}-${squareY}`))
+			}) : null
+		]
+	});
+}
+function HeroPattern() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "clarify-hero-pattern-mask absolute top-0 left-1/2 -ml-152 h-100 w-325",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "clarify-hero-pattern-gradient absolute inset-0 opacity-35 dark:opacity-55",
+				children: /* @__PURE__ */ jsx(GridPattern, {
+					width: 72,
+					height: 56,
+					x: -12,
+					y: 4,
+					squares: [
+						[4, 3],
+						[2, 1],
+						[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"
+				})
+			}), /* @__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",
+				children: /* @__PURE__ */ jsx("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
+			})]
+		})
+	});
+}
+//#endregion
+//#region source/components/Prose.tsx
+function Prose(arg0) {
+	const { as, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		className: clsx(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
+		...props
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ __exportAll({
 	Button: () => Button,
@@ -75,39 +800,11 @@ function h3(props) {
 		...props
 	});
 }
-function InfoIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		"aria-hidden": "true",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("circle", {
-				cx: "8",
-				cy: "8",
-				r: "8",
-				strokeWidth: "0"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				fill: "none",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: "1.5",
-				d: "M6.75 7.75h1.5v3.5"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "8",
-				cy: "4",
-				r: ".5",
-				fill: "none"
-			})
-		]
-	});
-}
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-note my-6 flex gap-2.5 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) dark:text-zinc-100 dark:[--tw-prose-links-hover:var(--clarify-ui-accent-text)] dark:[--tw-prose-links:var(--color-white)]",
-		children: [/* @__PURE__ */ jsx(InfoIcon, { className: "mt-1 h-4 w-4 flex-none fill-(--clarify-ui-accent-text) stroke-(--clarify-theme-tokens-colors-surface) dark:fill-(--clarify-ui-accent-background) dark:stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
+		className: "clarify-note my-6 flex gap-2.5 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) [--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 h-4 w-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -133,7 +830,7 @@ function Properties(arg0) {
 		className: "clarify-properties my-6",
 		children: /* @__PURE__ */ jsx("ul", {
 			role: "list",
-			className: "m-0 list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5",
+			className: "m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0",
 			children
 		})
 	});
@@ -150,14 +847,14 @@ function Property(arg0) {
 					children: "Name"
 				}),
 				/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("span", {
-					className: "text-sm/5 font-semibold text-zinc-950 dark:text-white",
+					className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 					children: name
 				}) }),
 				type ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 					className: "sr-only",
 					children: "Type"
 				}), /* @__PURE__ */ jsx("dd", {
-					className: "text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
+					className: "text-xs text-(--clarify-theme-tokens-colors-muted)",
 					children: type
 				})] }) : null,
 				/* @__PURE__ */ jsx("dt", {
@@ -479,8 +1176,15 @@ function buildHarRequest(input) {
 		} : void 0
 	};
 }
+function buildSnippetErrorMessage(error) {
+	return `Request example unavailable.\n\nThe selected OpenAPI example could not be converted into a code snippet. Please check that the example value matches its media type, for example valid JSON for application/json.${error instanceof Error && error.message ? `\n\nDetails: ${error.message}` : ""}`;
+}
 function buildSnippet(input, target) {
-	return decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || "");
+	try {
+		return decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || "");
+	} catch (error) {
+		return buildSnippetErrorMessage(error);
+	}
 }
 var requestSnippetOptions = [
 	{
@@ -802,7 +1506,7 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__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-[min(32rem,calc(100vw-2rem))] 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-zinc-900 p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-white/10 [--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",
@@ -953,7 +1657,7 @@ function ApiExampleCodeGroup(arg0) {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-header flex min-h-[calc(--spacing(12)+1px)] 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-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
 					children: [/* @__PURE__ */ jsx("h3", {
 						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
 						children: title
@@ -1008,7 +1712,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ jsx("pre", {
-						className: `overflow-x-auto 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-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ jsx("code", {
 							className: `language-${language}`,
 							children: code
@@ -1276,27 +1980,27 @@ function SchemaNode(arg0) {
 	const hasChildren = node.children.length > 0;
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
 	const fallbackDescription = node.required ? t("openapi.required") : t("openapi.optional");
-	const rowClassName = clsx("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-[calc(100%+1rem)] px-2" : "w-full px-1");
+	const rowClassName = clsx("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-(--clarify-schema-row-nested-width) px-2" : "w-full px-1");
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "min-w-0 flex-1",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm/5 font-semibold text-zinc-950 dark:text-white",
+				className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 				children: node.name
 			}), type ? /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
+				className: "text-xs text-(--clarify-theme-tokens-colors-muted)",
 				children: type
 			}) : null]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-0.5 text-sm/5 text-zinc-600 *:first:mt-0 *:last:mb-0 dark:text-zinc-400",
+			className: "mt-0.5 text-sm/5 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
 			children: [node.description ? /* @__PURE__ */ jsx(Markdown, { children: node.description }) : fallbackDescription, node.details ? /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-zinc-500 dark:text-zinc-500",
+				className: "text-xs text-(--clarify-ui-text-faint)",
 				children: node.details
 			}) : null]
 		})]
 	}), hasChildren ? /* @__PURE__ */ jsx("span", {
-		className: "ml-2 flex h-5 w-5 flex-none items-center justify-center text-zinc-500 dark:text-zinc-400",
+		className: "ml-2 flex h-5 w-5 flex-none items-center justify-center text-(--clarify-ui-text-faint)",
 		"aria-hidden": "true",
 		children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
 	}) : null] });
@@ -1323,7 +2027,7 @@ function SchemaTree(arg0) {
 	if (nodes.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
 		role: "list",
-		className: clsx("m-0 list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5", depth > 0 && "mt-2 rounded-lg bg-zinc-950/2.5 px-2 py-1 dark:bg-white/4"),
+		className: clsx("m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0", depth > 0 && "mt-2 rounded-lg bg-(--clarify-ui-subtle-background) px-2 py-1"),
 		children: nodes.map((node) => /* @__PURE__ */ jsx(SchemaNode, {
 			node,
 			depth
@@ -1409,27 +2113,27 @@ function InlineListbox(arg0) {
 			className: "pointer-events-auto relative inline-flex min-w-0",
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"aria-label": label,
-				className: clsx("inline-flex min-w-0 items-center gap-1 rounded-md border border-zinc-200 bg-white font-semibold text-zinc-900 shadow-xs outline-hidden transition hover:border-zinc-300 hover:bg-zinc-50 data-open:border-zinc-300 data-open:bg-zinc-50 dark:border-white/10 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:border-white/15 dark:hover:bg-zinc-900 dark:data-open:border-white/15 dark:data-open:bg-zinc-900", compact ? "max-w-32 px-1.5 py-0.5 text-xs" : "w-full px-2.5 py-1.5 text-xs"),
+				className: clsx("inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) 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) data-open:border-(--clarify-ui-text-faint) data-open:bg-(--clarify-ui-hover-background)", compact ? "max-w-32 px-1.5 py-0.5 text-xs" : "w-full px-2.5 py-1.5 text-xs"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: selected?.label ?? value
 				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
 				anchor: "bottom start",
-				className: "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-[min(32rem,calc(100vw-2rem))] overflow-auto rounded-xl bg-white p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-zinc-950/10 [--anchor-gap:--spacing(1)] focus:outline-none dark:bg-zinc-950 dark:ring-white/10",
+				className: "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-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-(--clarify-theme-tokens-colors-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: options.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
 					value: option.value,
-					className: "group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-zinc-700 select-none data-focus:bg-zinc-100 data-selected:text-emerald-700 dark:text-zinc-200 dark:data-focus:bg-white/10 dark:data-selected:text-emerald-300",
+					className: "group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-selected:text-(--clarify-theme-tokens-colors-primary)",
 					children: [/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "block truncate",
 							children: option.label
 						}), option.description ? /* @__PURE__ */ jsx("span", {
-							className: "mt-0.5 block truncate text-2xs text-zinc-500 dark:text-zinc-400",
+							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
 							children: option.description
 						}) : null]
 					}), /* @__PURE__ */ jsx(CheckIcon, {
@@ -1452,7 +2156,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-zinc-100/50 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white sm:w-auto sm:min-w-16 sm:max-w-[min(36%,16rem)] sm:px-1.5", open ? "bg-zinc-200 text-zinc-950 dark:bg-white/12 dark:text-white" : 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-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),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -1488,20 +2192,20 @@ function ServerVariableControl(arg0) {
 		value,
 		placeholder: variable?.default ?? name,
 		onChange: (event) => onChange(event.target.value),
-		className: clsx("pointer-events-auto rounded-md border border-zinc-200 bg-white text-xs font-semibold text-zinc-900 shadow-xs outline-hidden transition placeholder:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-50 focus:border-zinc-400 focus:bg-white dark:border-white/10 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:hover:border-white/15 dark:hover:bg-zinc-900 dark:focus:border-white/20 dark:focus:bg-zinc-950", 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-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")
 	});
 }
 function ServerPanel(arg0) {
 	const { servers, selectedKey, selectedServer, variables, onSelectServer, onChangeVariable } = arg0;
 	const variableEntries = Object.entries(selectedServer.variables ?? {});
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-zinc-200 bg-zinc-100/70 p-3 dark:border-white/10 dark:bg-zinc-900/60",
+		className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) p-3",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]",
+			className: "grid gap-3 sm:grid-cols-(--clarify-openapi-control-grid)",
 			children: [servers.length > 1 ? /* @__PURE__ */ jsxs("label", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
 					children: "Server"
 				}), /* @__PURE__ */ jsx(InlineListbox, {
 					label: "Server",
@@ -1516,7 +2220,7 @@ function ServerPanel(arg0) {
 			}) : null, variableEntries.map(([name, variable]) => /* @__PURE__ */ jsxs("label", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
 					children: name
 				}), /* @__PURE__ */ jsx(ServerVariableControl, {
 					name,
@@ -1532,13 +2236,13 @@ function AuthPanel(arg0) {
 	const { authOptions, selectedAuthName, selectedAuth, authValues, onSelectAuth, onChangeAuthValue } = arg0;
 	if (authOptions.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-zinc-200 bg-zinc-100/70 p-3 dark:border-white/10 dark:bg-zinc-900/60",
+		className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) p-3",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]",
+			className: "grid gap-3 sm:grid-cols-(--clarify-openapi-control-grid)",
 			children: [/* @__PURE__ */ jsxs("label", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
 					children: "Auth"
 				}), /* @__PURE__ */ jsx(InlineListbox, {
 					label: "Auth",
@@ -1553,17 +2257,17 @@ function AuthPanel(arg0) {
 			}), selectedAuth ? /* @__PURE__ */ jsxs("label", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
 					children: "Credential"
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 items-center rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 shadow-xs dark:border-white/10 dark:bg-zinc-950",
+					className: "flex min-w-0 items-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 shadow-xs",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "mr-2 shrink-0 text-2xs font-semibold text-zinc-600 dark:text-zinc-400",
+						className: "mr-2 shrink-0 text-2xs font-semibold text-(--clarify-ui-text-soft)",
 						children: selectedAuth.scheme.type === "apiKey" ? selectedAuth.scheme.in ?? "apiKey" : selectedAuth.scheme.scheme ?? selectedAuth.scheme.type ?? "token"
 					}), /* @__PURE__ */ jsx("input", {
 						value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth),
 						onChange: (event) => onChangeAuthValue(selectedAuth.name, event.target.value),
-						className: "min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-xs font-semibold text-zinc-900 outline-hidden placeholder:text-zinc-500 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+						className: "min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) outline-hidden placeholder:text-(--clarify-ui-text-faint)"
 					})]
 				})]
 			}) : null]
@@ -1574,7 +2278,7 @@ function EndpointIdentity(arg0) {
 	const { method, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
 	const segments = path.split("/").filter(Boolean);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs dark:border-white/10 dark:bg-zinc-950",
+		className: "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",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
@@ -1589,19 +2293,19 @@ function EndpointIdentity(arg0) {
 					/* @__PURE__ */ jsx("div", {
 						className: "flex min-w-0 flex-1 items-center overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
 						children: segments.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-							className: "text-zinc-400",
+							className: "text-(--clarify-ui-text-faint)",
 							children: "/"
 						}), segments.map((segment, index) => /* @__PURE__ */ jsxs("span", {
 							className: "flex items-center",
 							children: [index > 0 ? /* @__PURE__ */ jsx("span", {
-								className: "text-zinc-400",
+								className: "text-(--clarify-ui-text-faint)",
 								children: "/"
 							}) : null, /* @__PURE__ */ jsx("span", {
-								className: "font-bold text-zinc-800 dark:text-white",
+								className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
 								children: segment
 							})]
 						}, `${segment}-${index}`))] }) : /* @__PURE__ */ jsx("span", {
-							className: "font-bold text-zinc-800 dark:text-white",
+							className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
 							children: "/"
 						})
 					}),
@@ -1610,7 +2314,7 @@ function EndpointIdentity(arg0) {
 						"aria-expanded": authOpen,
 						"aria-label": "Auth",
 						onClick: onToggleAuth,
-						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-600 transition hover:bg-zinc-100 hover:text-emerald-700 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-zinc-50 dark:bg-white/5"),
+						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
 						children: authOpen ? /* @__PURE__ */ jsx(UnlockKeyholeIcon, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
@@ -1767,6 +2471,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { authPlaceholder as a, getServerKey as c, getRequestBody$1 as d, Markdown as f, ResponseExamplesPanel as i, getServers as l, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u };
+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 };
 
-//# sourceMappingURL=OpenApiOperation-DYXG-6Rw.js.map
+//# sourceMappingURL=OpenApiOperation-WntXLbai.js.map