@clarify-labs/renderer 0.10.2 → 0.10.3

package/output/{OpenApiOperation-DgrqzeiS.js → OpenApiOperation-BZWeCbvy.js}

@@ -1,11 +1,11 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-DnqZHFT7.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-D7K9LDGf.js";
+import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-Bqth9d6Q.js";
+import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-BQeEmXbT.js";
 import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import clsx from "clsx";
-import { Children, Suspense, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, 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, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { Dialog, DialogBackdrop, DialogPanel, Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
+import { AlertTriangle, ArrowRight, ArrowUpRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, File, Folder, FolderOpen, Info, Lightbulb, LinkIcon, LockKeyholeIcon, Maximize2, PackageIcon, ServerIcon, UnlockKeyholeIcon, X, XCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion, useInView } from "framer-motion";
 import { create } from "zustand";
@@ -26,6 +26,32 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
+//#region source/components/AccordionGroup.tsx
+function AccordionGroup(arg0) {
+	const { children, multiple = false, className, ...props } = arg0;
+	const childArray = Children.toArray(children);
+	const [openIndex, setOpenIndex] = useState(() => {
+		const defaultIndex = childArray.findIndex((child) => isValidElement(child) && child.props.defaultOpen);
+		return defaultIndex === -1 ? null : defaultIndex;
+	});
+	const items = childArray.map((child, index) => {
+		if (!isValidElement(child)) return child;
+		if (multiple) return child;
+		return cloneElement(child, {
+			open: openIndex === index,
+			onOpenChange: (open) => {
+				child.props.onOpenChange?.(open);
+				setOpenIndex(open ? index : null);
+			}
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-accordion-group my-6 divide-y divide-(--clarify-theme-tokens-colors-border) overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) [&_.clarify-collapse]:my-0 [&_.clarify-collapse]:rounded-none [&_.clarify-collapse]:border-0", className),
+		...props,
+		children: items
+	});
+}
+//#endregion
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
 	return localizeHref(href, useConfig(), useLocale());
@@ -45,15 +71,15 @@ function LocalizedLink(arg0) {
 //#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)",
+	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"
 };
 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 overflow-hidden align-middle text-sm leading-6 font-medium whitespace-nowrap no-underline transition", 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-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")
@@ -81,37 +107,43 @@ function Button(arg0) {
 //#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",
+		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",
 		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",
+		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",
 		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",
+		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",
 		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",
+		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",
 		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",
+		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",
 		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",
+		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",
 		Icon: CheckCircle2
@@ -132,15 +164,18 @@ function Callout(arg0) {
 	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),
+		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),
 		...props,
-		children: [icon ? /* @__PURE__ */ jsx(Icon, {
-			className: clsx("mt-1 size-4 flex-none", style.icon),
-			"aria-hidden": "true"
+		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),
+			children: /* @__PURE__ */ jsx(Icon, {
+				className: clsx("size-4", 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),
+				className: clsx("mb-1.5 font-semibold", style.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ jsx("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -159,9 +194,9 @@ function CardIcon(arg0) {
 	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)",
+		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",
 		children: /* @__PURE__ */ jsx(Icon, {
-			className: "size-5",
+			className: "size-4",
 			"aria-hidden": "true"
 		})
 	});
@@ -175,7 +210,7 @@ var cardGroupColumnStyles = {
 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),
+		className: clsx("not-prose my-8 grid gap-3", cardGroupColumnStyles[cols], className),
 		children
 	});
 }
@@ -185,11 +220,17 @@ function Card(arg0) {
 		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__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h3", {
+					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)",
+					"aria-hidden": "true"
+				}) : null]
 			}), children ? /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
+				className: "mt-1.5 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
 				children
 			}) : null]
 		})]
@@ -197,7 +238,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-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);
+	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);
 	if (!href) return /* @__PURE__ */ jsx("div", {
 		className: classes,
 		children: content
@@ -211,7 +252,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-dXsomvM7.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-Bc9H25yK.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -337,6 +378,12 @@ function getNodeText(node) {
 	if (isValidElement(node)) return getNodeText(node.props.children);
 	return "";
 }
+function getCodeTitle(node) {
+	if (!isValidElement(node)) return void 0;
+	const { title, children } = node.props;
+	if (title) return title;
+	return Children.toArray(children).map(getCodeTitle).find(Boolean);
+}
 function getCodeLanguage(node) {
 	if (!isValidElement(node)) return void 0;
 	const { className, language, children } = node.props;
@@ -345,6 +392,13 @@ function getCodeLanguage(node) {
 	if (languageClass) return languageClass.slice(9);
 	return Children.toArray(children).map(getCodeLanguage).find(Boolean);
 }
+function getCodePanelTitle(node, fallbackTitle) {
+	return getPanelTitle({
+		title: getCodeTitle(node),
+		language: getCodeLanguage(node),
+		fallbackTitle
+	});
+}
 function CopyButton(arg0) {
 	const { code } = arg0;
 	const t = useBuiltInText();
@@ -425,10 +479,7 @@ function CodeGroupHeader(arg0) {
 			className: "clarify-code-tabs -mr-2 -mb-px flex gap-0 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsxs(Tab, {
 				className: clsx("clarify-code-tab relative border-b border-transparent px-2 py-3 transition-colors hover:bg-(--clarify-code-control-background-hover) data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "text-(--clarify-code-accent-text)" : "text-(--clarify-code-control-text) hover:text-(--clarify-code-text)"),
-				children: [getPanelTitle({
-					...isValidElement(child) ? child.props : {},
-					fallbackTitle: t("actions.code")
-				}), childIndex === selectedIndex ? /* @__PURE__ */ jsx(motion.span, {
+				children: [getCodePanelTitle(child, t("actions.code")), childIndex === selectedIndex ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
 					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-code-accent-text)",
 					transition: {
@@ -502,10 +553,7 @@ 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 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 header = /* @__PURE__ */ jsx(CodeGroupHeader, {
@@ -561,8 +609,9 @@ function Pre(arg0) {
 //#endregion
 //#region source/components/Collapse.tsx
 function Collapse(arg0) {
-	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
-	const [open, setOpen] = useState(defaultOpen);
+	const { children, title, summary, defaultOpen = false, open: controlledOpen, onOpenChange, className, ...props } = arg0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = controlledOpen ?? uncontrolledOpen;
 	const contentRef = useRef(null);
 	const [maxHeight, setMaxHeight] = useState("0px");
 	const summaryLabel = title ?? summary ?? "Details";
@@ -572,16 +621,20 @@ 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)", 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-accent-border)", 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)",
+			className: "flex min-h-11 w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 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-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 			"aria-expanded": open,
 			"aria-controls": contentId,
-			onClick: () => setOpen((value) => !value),
+			onClick: () => {
+				const nextOpen = !open;
+				if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
+				onOpenChange?.(nextOpen);
+			},
 			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"),
+				className: clsx("size-4 rounded-full text-(--clarify-ui-text-faint) transition duration-200", open && "rotate-180"),
 				"aria-hidden": "true"
 			})]
 		}), /* @__PURE__ */ jsx("div", {
@@ -593,7 +646,7 @@ function Collapse(arg0) {
 			},
 			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"),
+				className: clsx("px-4 py-4 text-sm/6 text-(--clarify-ui-text-soft) transition-opacity duration-200 ease-out *:first:mt-0 *:last:mb-0", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
 				children
 			})
 		})]
@@ -669,6 +722,55 @@ function Feedback() {
 	});
 }
 //#endregion
+//#region source/components/FileTree.tsx
+function FileTree(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-file-tree 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) px-4 py-3 font-mono text-[13px]/6 text-(--clarify-ui-text-soft)", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "tree",
+			className: "m-0 min-w-max list-none p-0",
+			children
+		})
+	});
+}
+function FileTreeItem(arg0) {
+	const { name, description, type, children, className, ...props } = arg0;
+	const isFolder = type === "folder" || children != null;
+	const FolderIcon = children ? FolderOpen : Folder;
+	return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-expanded": isFolder ? children != null : void 0,
+		className: clsx("clarify-file-tree-item m-0 p-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			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)",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(File, {
+					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-(--clarify-theme-tokens-colors-foreground)",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					className: "font-sans text-xs text-(--clarify-ui-text-faint)",
+					children: description
+				}) : null
+			]
+		}), children ? /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			className: "m-0 ml-2.5 list-none border-l border-(--clarify-theme-tokens-colors-border) pl-4",
+			children
+		}) : null]
+	});
+}
+//#endregion
 //#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
@@ -875,10 +977,50 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Steps.tsx
+function Steps(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("ol", {
+		className: clsx("clarify-steps my-8 ml-3 list-none border-l-2 border-(--clarify-theme-tokens-colors-border) p-0", className),
+		...props,
+		children
+	});
+}
+function Step(arg0) {
+	const { children, title, className, ...props } = arg0;
+	return /* @__PURE__ */ jsxs("li", {
+		className: clsx("clarify-step relative m-0 pb-10 pl-9 last:pb-0", className),
+		...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",
+				"aria-hidden": "true"
+			}),
+			title ? /* @__PURE__ */ jsx("h3", {
+				className: "m-0 pt-0.5 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: clsx("text-sm/6 text-(--clarify-ui-text-soft) *:last:mb-0", title && "mt-2.5", !title && "*:first:mt-0"),
+				children
+			})
+		]
+	});
+}
+//#endregion
 //#region source/components/Tabs.tsx
+function TabItem(_props) {
+	return null;
+}
 function Tabs(arg0) {
-	const { items, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
-	const [internalIndex, setInternalIndex] = useState(0);
+	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const childItems = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabItem).map((child, index) => ({
+		id: child.props.value ?? `tab-${index}`,
+		label: child.props.title,
+		panel: child.props.children
+	}));
+	const resolvedItems = items ?? childItems;
+	const [internalIndex, setInternalIndex] = useState(defaultValue ? Math.max(0, resolvedItems.findIndex((item) => item.id === defaultValue)) : 0);
 	const resolvedIndex = typeof selectedIndex === "number" ? selectedIndex : internalIndex;
 	const indicatorLayoutId = useId();
 	const handleChange = (index) => {
@@ -888,32 +1030,60 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ jsxs(TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className,
+		className: clsx("clarify-tabs my-6", className),
 		children: [/* @__PURE__ */ jsx(TabList, {
-			className: clsx("-mx-2 flex flex-wrap items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) px-2 pb-0", listClassName),
-			children: items.map((item) => /* @__PURE__ */ jsx(Tab, {
-				className: ({ selected }) => clsx("clarify-content-tab clarify-ui-tab relative inline-flex h-10 shrink-0 items-center rounded-t-md px-2 py-0 text-sm font-medium transition-colors focus:outline-none", selected && "clarify-ui-tab-active"),
+			className: clsx("flex max-w-full items-stretch gap-1 overflow-x-auto border-b border-(--clarify-theme-tokens-colors-border)", listClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(Tab, {
+				className: ({ selected }) => clsx("clarify-content-tab clarify-ui-tab relative my-1 inline-flex h-9 shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", selected && "clarify-ui-tab-active"),
 				children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: item.label }), selected ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator) shadow-[0_0_0.5rem_var(--clarify-ui-accent-glow)]",
+					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
 					transition: {
-						type: "spring",
-						stiffness: 460,
-						damping: 34,
-						mass: .7
+						type: "tween",
+						duration: .16,
+						ease: "easeOut"
 					}
 				}) : null] })
 			}, item.id))
 		}), /* @__PURE__ */ jsx(TabPanels, {
-			className: clsx("mt-4", panelsClassName),
-			children: items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
-				className: "focus:outline-none",
+			className: clsx("mt-5", panelsClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(TabPanel, {
+				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
 			}, item.id))
 		})]
 	});
 }
 //#endregion
+//#region source/components/Tooltip.tsx
+function Tooltip(arg0) {
+	const { content, children, side = "top", className, ...props } = arg0;
+	const contentId = useId();
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx("clarify-tooltip group relative inline-flex align-baseline", className),
+		onMouseEnter: () => setOpen(true),
+		onMouseLeave: () => setOpen(false),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			tabIndex: 0,
+			"aria-describedby": contentId,
+			className: "cursor-help rounded-sm border-b border-dotted border-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+			onFocus: () => setOpen(true),
+			onBlur: () => setOpen(false),
+			onKeyDown: (event) => {
+				if (event.key === "Escape") setOpen(false);
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			id: contentId,
+			role: "tooltip",
+			className: clsx("pointer-events-none absolute left-1/2 z-30 w-max max-w-64 -translate-x-1/2 rounded-md 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", open ? "opacity-100" : "opacity-0", side === "top" ? "bottom-[calc(100%+0.5rem)]" : "top-[calc(100%+0.5rem)]"),
+			children: content
+		})]
+	});
+}
+//#endregion
 //#region source/components/WebFrame.tsx
 function WebFrame(arg0) {
 	const { src, title = "Embedded content", children, showWindow = true, className, iframeClassName, height = 420, style, ...props } = arg0;
@@ -936,53 +1106,122 @@ 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-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", 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-lg 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-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", 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-lg shadow-zinc-900/5 dark:shadow-none", 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",
+			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",
 			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__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+					]
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+				/* @__PURE__ */ jsx("div", {
+					className: "truncate rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 py-1 text-center text-xs text-(--clarify-ui-text-faint)",
 					children: title
-				})
+				}),
+				/* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
 			]
 		}), frame]
 	});
 }
 //#endregion
+//#region source/components/Image.tsx
+function Image(arg0) {
+	const { src, alt = "", caption, zoom = false, className, ...props } = arg0;
+	const [open, setOpen] = useState(false);
+	const image = /* @__PURE__ */ jsx("img", {
+		...props,
+		src,
+		alt,
+		className: clsx("block h-auto max-w-full object-contain", className)
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "clarify-figure not-prose mx-auto my-8 w-fit max-w-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "group relative w-fit max-w-full overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background)",
+				children: zoom ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "block max-w-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+					"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",
+						children: /* @__PURE__ */ jsx(Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})]
+				}) : image
+			}),
+			caption ? /* @__PURE__ */ jsx("figcaption", {
+				className: "mt-2 text-center text-xs/5 text-(--clarify-ui-text-faint)",
+				children: caption
+			}) : null,
+			zoom ? /* @__PURE__ */ jsxs(Dialog, {
+				open,
+				onClose: setOpen,
+				className: "relative z-50",
+				children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75 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",
+						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",
+							"aria-label": "Close image preview",
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ __exportAll({
+	AccordionGroup: () => AccordionGroup,
 	Button: () => Button,
 	Callout: () => Callout,
 	Card: () => Card,
 	CardGroup: () => CardGroup,
 	CodeGroup: () => CodeGroup,
 	Col: () => Col,
+	FileTree: () => FileTree,
+	FileTreeItem: () => FileTreeItem,
 	Note: () => Note,
 	Properties: () => Properties,
 	Property: () => Property,
 	Row: () => Row,
+	Step: () => Step,
+	Steps: () => Steps,
+	Tab: () => TabItem,
+	Tabs: () => Tabs,
+	Tooltip: () => Tooltip,
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
 	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
+	img: () => img,
 	pre: () => pre,
 	table: () => table,
 	wrapper: () => wrapper
@@ -1027,6 +1266,7 @@ function h1(arg0) {
 }
 var code = Code;
 var pre = Pre;
+var img = Image;
 function h2(props) {
 	return createElement(Heading, {
 		level: 2,
@@ -1042,8 +1282,8 @@ function h3(props) {
 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) [--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: "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: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -1902,7 +2142,7 @@ function SelectControl(arg0) {
 		label: option
 	} : option);
 	const selectedOption = normalizedOptions.find((option) => option.value === value) ?? normalizedOptions[0];
-	const wrapperClassName = compact ? "clarify-api-select relative min-w-0 text-xs" : "clarify-api-select relative shrink-0 text-xs";
+	const wrapperClassName = compact ? "clarify-openai-select relative min-w-0 text-xs" : "clarify-openai-select relative shrink-0 text-xs";
 	const buttonSizeClassName = compact ? "w-full min-w-0 max-w-32" : "min-w-28 max-w-48";
 	if (normalizedOptions.length <= 1) return null;
 	return /* @__PURE__ */ jsx(Listbox, {
@@ -1912,7 +2152,7 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
+				className: `clarify-openai-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) 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", {
@@ -1928,10 +2168,10 @@ 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-(--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",
+				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-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 min-h-9 cursor-default items-center justify-between gap-3 rounded-lg 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)",
+					className: "clarify-openai-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg 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)",
 					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"
@@ -1980,31 +2220,36 @@ function ExampleMetaValue(arg0) {
 	});
 }
 function CodeToolbar(arg0) {
-	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const { code, leadingControls, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = useBuiltInText();
+	const inlineControls = Boolean(leadingControls);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-api-code-toolbar flex items-center gap-2 px-4 pt-3",
+		className: `clarify-openai-code-toolbar flex items-center gap-2 px-4 pt-3${inlineControls ? " clarify-openai-code-toolbar-inline" : ""}`,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "clarify-api-code-toolbar-controls flex min-w-0 flex-1 flex-wrap items-center gap-2",
-			children: [languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ jsx(SelectControl, {
-				label: t("openapi.language"),
-				value: selectedLanguageKey,
-				options: languageOptions,
-				onChange: onSelectLanguage,
-				icon: /* @__PURE__ */ jsx(CodeIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null, clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
-				label: t("openapi.client"),
-				value: selectedClientKey,
-				options: clientOptions,
-				onChange: onSelectClient,
-				icon: /* @__PURE__ */ jsx(PackageIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null]
+			className: `clarify-openai-code-toolbar-controls flex min-w-0 flex-1 items-center gap-2${inlineControls ? " flex-nowrap overflow-x-auto" : " flex-wrap"}`,
+			children: [
+				leadingControls,
+				languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ jsx(SelectControl, {
+					label: t("openapi.language"),
+					value: selectedLanguageKey,
+					options: languageOptions,
+					onChange: onSelectLanguage,
+					icon: /* @__PURE__ */ jsx(CodeIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null,
+				clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
+					label: t("openapi.client"),
+					value: selectedClientKey,
+					options: clientOptions,
+					onChange: onSelectClient,
+					icon: /* @__PURE__ */ jsx(PackageIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null
+			]
 		}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
 	});
 }
@@ -2076,21 +2321,38 @@ function getClientOptions(codeOptions, languageKey) {
 //#endregion
 //#region source/openapi/components/ExamplePanels.tsx
 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 { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, metaInToolbar = 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-(--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";
+	const meta = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		tag ? /* @__PURE__ */ jsx(ExampleMetaValue, {
+			label: t("openapi.status"),
+			value: tag,
+			options: tagOptions,
+			onChange: onSelectTag,
+			className: "clarify-openai-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-(--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-(--clarify-code-muted)"
+		}) : null
+	] });
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
+		className: "clarify-openai-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-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
+					className: "clarify-openai-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-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ jsxs("div", {
-						className: "clarify-api-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
+						className: "clarify-openai-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
 						children: [mediaTypes && mediaTypes.length > 1 && selectedMediaType && onSelectMediaType ? /* @__PURE__ */ jsx(SelectControl, {
 							label: t("openapi.mediaType"),
 							value: selectedMediaType,
@@ -2109,30 +2371,15 @@ function ApiExampleCodeGroup(arg0) {
 						}) : null]
 					})]
 				}),
-				tag || label ? /* @__PURE__ */ jsxs("div", {
+				(tag || label) && !metaInToolbar ? /* @__PURE__ */ jsx("div", {
 					className: metaClassName,
-					children: [
-						tag ? /* @__PURE__ */ jsx(ExampleMetaValue, {
-							label: t("openapi.status"),
-							value: tag,
-							options: tagOptions,
-							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-(--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-(--clarify-code-muted)"
-						}) : null
-					]
+					children: meta
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-code group bg-(--clarify-code-background)",
+					className: "clarify-openai-example-code group bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ jsx(CodeToolbar, {
 						code,
+						leadingControls: metaInToolbar ? meta : void 0,
 						languageOptions,
 						selectedLanguageKey,
 						onSelectLanguage,
@@ -2328,6 +2575,9 @@ function ResponseExamplesPanel(arg0) {
 	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
 		title: title ?? t("openapi.response"),
+		tag: state.selectedResponse?.status,
+		tagOptions: state.responses.map((response) => response.status),
+		onSelectTag: state.responses.length > 0 ? state.onSelectStatus : void 0,
 		label: state.selectedContent?.mediaType,
 		labelOptions: state.responseContents.map((content) => content.mediaType),
 		onSelectLabel: state.responseContents.length > 0 ? state.onSelectMediaType : void 0,
@@ -2335,7 +2585,8 @@ function ResponseExamplesPanel(arg0) {
 		language: codeLanguageForMediaType(state.selectedContent.mediaType),
 		examples: state.examples,
 		selectedExampleKey: state.selectedExample?.key,
-		onSelectExample: state.onSelectExample
+		onSelectExample: state.onSelectExample,
+		metaInToolbar: true
 	});
 }
 //#endregion
@@ -2824,6 +3075,50 @@ function EndpointResponse(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/InlineListbox.tsx
+function InlineListbox(arg0) {
+	const { label, value, options, onChange, compact = false, buttonContent, buttonClassName, className } = arg0;
+	const selected = options.find((option) => option.value === value) ?? options[0];
+	return /* @__PURE__ */ jsx(Listbox, {
+		value: selected?.value ?? value,
+		onChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("pointer-events-auto relative inline-flex min-w-0", className),
+			children: [/* @__PURE__ */ jsx(ListboxButton, {
+				"aria-label": label,
+				className: clsx(buttonClassName ?? "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-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2.5 py-1.5 text-xs"),
+				children: buttonContent ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.label ?? value
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					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-(--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 min-h-9 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-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
+					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-(--clarify-ui-text-faint)",
+							children: option.description
+						}) : null]
+					}), /* @__PURE__ */ jsx(CheckIcon, {
+						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
+						"aria-hidden": "true"
+					})]
+				}, option.value))
+			})]
+		})
+	});
+}
+//#endregion
 //#region source/openapi/components/OpenApiOperation.state.ts
 function useOperationRequestState(spec, path, operation, source = "path") {
 	const parameters = getOperationParameters(spec, path, operation, source);
@@ -2942,48 +3237,6 @@ function EndpointPath(arg0) {
 		}) : null]
 	});
 }
-function InlineListbox(arg0) {
-	const { label, value, options, onChange, compact = false } = arg0;
-	const selected = options.find((option) => option.value === value) ?? options[0];
-	return /* @__PURE__ */ jsx(Listbox, {
-		value: selected?.value ?? value,
-		onChange,
-		children: /* @__PURE__ */ jsxs("div", {
-			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-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 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-(--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-(--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 min-h-9 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-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
-					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-(--clarify-ui-text-faint)",
-							children: option.description
-						}) : null]
-					}), /* @__PURE__ */ jsx(CheckIcon, {
-						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
-						"aria-hidden": "true"
-					})]
-				}, option.value))
-			})]
-		})
-	});
-}
 function getServerPreviewUrl(server, variables) {
 	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
 }
@@ -3007,7 +3260,7 @@ function getDefaultResponseStatus(operation, spec) {
 	return orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
 }
 function ServerUrlValue(arg0) {
-	const { server, variables, open, interactive, onToggle } = arg0;
+	const { servers, selectedKey, server, variables, open, interactive, directSelect, onSelect, onToggle } = arg0;
 	const url = getServerPreviewUrl(server, variables);
 	const protocolLabel = getServerProtocolLabel(server, variables);
 	if (!interactive) return /* @__PURE__ */ jsxs("span", {
@@ -3030,12 +3283,47 @@ function ServerUrlValue(arg0) {
 			})]
 		})]
 	});
+	if (directSelect) return /* @__PURE__ */ jsx(InlineListbox, {
+		label: "Server",
+		value: selectedKey,
+		options: servers.map((option, index) => ({
+			value: getServerKey(option, index),
+			label: getServerLabel(option, index),
+			description: option.description
+		})),
+		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",
+		buttonContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ jsx(ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			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",
+					children: protocolLabel
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-semibold text-xs",
+					children: url
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform group-data-open:rotate-180",
+					"aria-hidden": "true"
+				})
+			]
+		})] })
+	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"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) transition 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-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),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -3054,7 +3342,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
+					className: clsx("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -3166,6 +3454,7 @@ function AuthPanel(arg0) {
 }
 function EndpointIdentity(arg0) {
 	const { method, operationSource, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
+	const directServerSelect = servers.length > 1 && servers.every((server) => Object.keys(server.variables ?? {}).length === 0);
 	const serverInteractive = servers.length > 1 || Object.keys(selectedServer.variables ?? {}).length > 0;
 	const [copiedUrl, setCopiedUrl] = useState(false);
 	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
@@ -3178,7 +3467,7 @@ function EndpointIdentity(arg0) {
 		if (await copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		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",
+		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",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
@@ -3186,10 +3475,14 @@ function EndpointIdentity(arg0) {
 					/* @__PURE__ */ jsx(EndpointMethodBadge, { method }),
 					operationSource === "webhook" ? /* @__PURE__ */ jsx(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
 					/* @__PURE__ */ jsx(ServerUrlValue, {
+						servers,
+						selectedKey: selectedServerKey,
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
 						interactive: serverInteractive,
+						directSelect: directServerSelect,
+						onSelect: onSelectServer,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ jsx(EndpointPath, {
@@ -3213,7 +3506,7 @@ function EndpointIdentity(arg0) {
 					}) : null
 				]
 			}),
-			serverInteractive && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
+			serverInteractive && !directServerSelect && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
 				servers,
 				selectedKey: selectedServerKey,
 				selectedServer,
@@ -3243,7 +3536,7 @@ function OpenApiOperation(arg0) {
 	const [linkedExampleKey, setLinkedExampleKey] = useState("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = useState(() => getDefaultResponseStatus(operation, spec));
 	return /* @__PURE__ */ jsxs("section", {
-		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
+		className: "clarify-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
 			/* @__PURE__ */ jsx(Heading, {
@@ -3309,6 +3602,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { CardGroup as A, Feedback as C, Pre as D, CodeGroup as E, Button as M, Mermaid as O, Tag as S, Code as T, Prose as _, authPlaceholder as a, Logo as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Callout as j, Card as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, GridPattern as v, Collapse as w, Heading as x, HeroPattern as y };
+export { CodeGroup as A, HeroPattern as C, Feedback as D, Tag as E, Callout as F, Button as I, Mermaid as M, Card as N, Collapse as O, CardGroup as P, GridPattern as S, Heading as T, TabItem as _, authPlaceholder as a, Steps as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Pre as j, Code as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, Tabs as v, Logo as w, Prose as x, Step as y };
 
-//# sourceMappingURL=OpenApiOperation-DgrqzeiS.js.map
+//# sourceMappingURL=OpenApiOperation-BZWeCbvy.js.map