@clarify-labs/renderer 0.11.2 → 0.11.3

package/output/{OpenApiOperation-bdALspAY.cjs → OpenApiOperation-HhSjad7q.cjs}

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-L1XX-y6M.cjs");
-const require_PageActions = require("./PageActions-Bw9SAHLl.cjs");
+const require_i18n = require("./i18n-R08i532P.cjs");
+const require_PageActions = require("./PageActions-GVAsO16x.cjs");
 const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
@@ -245,7 +245,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-EZjolX08.cjs")));
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-kbSVqJ_z.cjs")));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -1006,7 +1006,7 @@ function TabItem(_props) {
 	return null;
 }
 function Tabs(arg0) {
-	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const { items, children, defaultValue, selectedIndex, onChange, className, spacingClassName = "my-6", listClassName, panelsClassName, actions, variant = "content" } = arg0;
 	const childItems = react.Children.toArray(children).filter((child) => (0, react.isValidElement)(child) && child.type === TabItem).map((child, index) => ({
 		id: child.props.value ?? `tab-${index}`,
 		label: child.props.title,
@@ -1023,23 +1023,26 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className: (0, clsx.default)("clarify-tabs my-6", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
-			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: ({ selected }) => (0, clsx.default)("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"),
+		className: (0, clsx.default)("clarify-tabs", spacingClassName, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabList, {
+			className: (0, clsx.default)("flex max-w-full items-stretch overflow-x-auto border-b", variant === "content" ? "gap-1 border-(--clarify-theme-tokens-colors-border)" : "h-10 gap-0 border-(--clarify-code-border) px-3", listClassName),
+			children: [resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
+				className: ({ selected }) => (0, clsx.default)("relative inline-flex shrink-0 items-center px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", variant === "content" ? "clarify-content-tab clarify-ui-tab my-1 h-9 rounded-(--clarify-theme-tokens-radius-md)" : "text-2xs font-semibold", selected && (variant === "content" ? "clarify-ui-tab-active" : "text-(--clarify-code-text)"), variant === "code" && !selected && "text-(--clarify-code-muted)"),
 				children: ({ selected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
+					className: (0, clsx.default)("absolute inset-x-2.5 h-0.5 bg-(--clarify-ui-tab-indicator)", variant === "content" ? "-bottom-1 rounded-full" : "-bottom-px"),
 					transition: {
 						type: "tween",
 						duration: .16,
 						ease: "easeOut"
 					}
 				}) : null] })
-			}, item.id))
+			}, item.id)), actions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "sticky right-0 ml-auto flex shrink-0 items-center bg-(--clarify-code-background)",
+				children: actions
+			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, {
-			className: (0, clsx.default)("mt-5", panelsClassName),
+			className: panelsClassName ?? "mt-5",
 			children: resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, {
 				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
@@ -1330,9 +1333,9 @@ function Col(arg0) {
 	});
 }
 function Properties(arg0) {
-	const { children } = arg0;
+	const { children, className, spacingClassName = "my-6" } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-properties my-6",
+		className: (0, clsx.default)("clarify-properties", spacingClassName, className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			role: "list",
 			className: "m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0",
@@ -2708,6 +2711,25 @@ function ResponseExamplesPanel(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiDocumentSection.tsx
+function OpenApiDocumentSection(props) {
+	const { title, children, className, bodyClassName, level = 3 } = props;
+	const heading = level === 3 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		className: "!m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+		children: title
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+		className: "!m-0 text-xs/5 font-semibold text-(--clarify-ui-text-soft)",
+		children: title
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: (0, clsx.default)("clarify-openapi-document-section", className),
+		children: [heading, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("mt-2", bodyClassName),
+			children
+		})]
+	});
+}
+//#endregion
 //#region source/openapi/components/OpenApiAuthDocumentation.tsx
 function authSchemeType(option, apiKeyLabel) {
 	const { scheme } = option;
@@ -2717,73 +2739,73 @@ function authSchemeType(option, apiKeyLabel) {
 	if (scheme.type === "openIdConnect") return "OPENID CONNECT";
 	return scheme.type?.toUpperCase() || "AUTH";
 }
-function OpenApiAuthDocumentation({ options }) {
+function OpenApiAuthDocumentation(props) {
+	const { options } = props;
 	const t = require_i18n.useBuiltInText();
 	if (options.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.authentication") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "not-prose my-6 border-y border-(--clarify-theme-tokens-colors-border)",
-		children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3 py-1",
-			"aria-label": t("openapi.authOr"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-faint)",
-					children: t("openapi.authOr")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" })
-			]
-		}) : null, option.schemes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "py-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
-			children: t("openapi.authNoAuth")
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "divide-y divide-(--clarify-theme-tokens-colors-border)",
-			children: option.schemes.map((schemeOption, schemeIndex) => {
-				const { scheme } = schemeOption;
-				const details = [
-					scheme.type === "apiKey" && scheme.in && scheme.name ? t("openapi.authLocation", {
-						in: scheme.in,
-						name: scheme.name
-					}) : void 0,
-					scheme.type === "http" && scheme.bearerFormat ? t("openapi.authBearerFormat", { format: scheme.bearerFormat }) : void 0,
-					scheme.type === "openIdConnect" ? scheme.openIdConnectUrl : void 0,
-					schemeOption.scopes.length > 0 ? t("openapi.authScopes", { scopes: schemeOption.scopes.join(", ") }) : void 0
-				].filter((value) => Boolean(value));
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "relative h-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "absolute top-0 left-4 -translate-y-1/2 bg-(--clarify-theme-tokens-colors-background) px-1.5 text-2xs font-semibold text-(--clarify-ui-text-faint)",
-						children: t("openapi.authAnd")
-					})
-				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "py-4",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-wrap items-center gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-								children: schemeOption.name
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
-								children: authSchemeType(schemeOption, t("openapi.authApiKey"))
-							})]
-						}),
-						scheme.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-							className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
-							children: scheme.description
-						}) : null,
-						details.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-2 flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs/5 text-(--clarify-ui-text-faint)",
-							children: details.map((detail) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "min-w-0 break-all font-mono",
-								children: detail
-							}, detail))
-						}) : null
-					]
-				})] }, schemeOption.name);
-			})
-		})] }, option.key))
-	})] });
+	const renderOption = (option) => option.schemes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "border-b border-(--clarify-theme-tokens-colors-border) pt-2 pb-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
+		children: t("openapi.authNoAuth")
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "divide-y divide-(--clarify-theme-tokens-colors-border) border-b border-(--clarify-theme-tokens-colors-border)",
+		children: option.schemes.map((schemeOption, schemeIndex) => {
+			const { scheme } = schemeOption;
+			const details = [
+				scheme.type === "apiKey" && scheme.in && scheme.name ? t("openapi.authLocation", {
+					in: scheme.in,
+					name: scheme.name
+				}) : void 0,
+				scheme.type === "http" && scheme.bearerFormat ? t("openapi.authBearerFormat", { format: scheme.bearerFormat }) : void 0,
+				scheme.type === "openIdConnect" ? scheme.openIdConnectUrl : void 0,
+				schemeOption.scopes.length > 0 ? t("openapi.authScopes", { scopes: schemeOption.scopes.join(", ") }) : void 0
+			].filter((value) => Boolean(value));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative h-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "absolute top-0 left-4 -translate-y-1/2 bg-(--clarify-theme-tokens-colors-background) px-1.5 text-2xs font-semibold text-(--clarify-ui-text-faint)",
+					children: t("openapi.authAnd")
+				})
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "py-4 first:pt-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+							children: schemeOption.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
+							children: authSchemeType(schemeOption, t("openapi.authApiKey"))
+						})]
+					}),
+					scheme.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+						className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
+						children: scheme.description
+					}) : null,
+					details.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mt-2 flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs/5 text-(--clarify-ui-text-faint)",
+						children: details.map((detail) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 break-all font-mono",
+							children: detail
+						}, detail))
+					}) : null
+				]
+			})] }, schemeOption.name);
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title: t("openapi.authentication"),
+		bodyClassName: "not-prose",
+		children: options.length === 1 ? renderOption(options[0]) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+			items: options.map((option) => ({
+				id: option.key,
+				label: option.label || t("openapi.none"),
+				panel: renderOption(option)
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})
+	});
 }
 //#endregion
 //#region source/openapi/components/SchemaProperties.tsx
@@ -3082,23 +3104,32 @@ function SchemaProperties(arg0) {
 	const { title, schema, spec, defaultExpanded } = arg0;
 	const root = getRootSchemaNode(spec, schema, defaultExpanded);
 	if (!root || root.children.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-schema-properties not-prose my-6",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title,
+		level: 4,
+		bodyClassName: "clarify-schema-properties not-prose",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaTree, { nodes: root.children })
-	})] });
+	});
 }
 function ParameterList(arg0) {
 	const t = require_i18n.useBuiltInText();
 	const { title, parameters } = arg0;
 	if (parameters.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
-		name: parameter.name ?? t("openapi.parameter"),
-		type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
-		children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-			className: "*:first:mt-0 *:last:mb-0",
-			children: parameter.description
-		}) : t("openapi.operationParameter")
-	}, `${parameter.in}-${parameter.name}`)) })] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title,
+		bodyClassName: "not-prose",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, {
+			spacingClassName: "m-0",
+			children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
+				name: parameter.name ?? t("openapi.parameter"),
+				type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
+				children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+					className: "*:first:mt-0 *:last:mb-0",
+					children: parameter.description
+				}) : t("openapi.operationParameter")
+			}, `${parameter.in}-${parameter.name}`))
+		})
+	});
 }
 function ResponseList(arg0) {
 	const { title, operation, spec, selectedStatus, onSelectStatus } = arg0;
@@ -3138,7 +3169,7 @@ function ResponseList(arg0) {
 					}) : `${t("openapi.response")}.`
 				}),
 				responseSchema && spec ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mt-4",
+					className: "mt-6",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
 						title: t("openapi.responseBodyProperties"),
 						schema: responseSchema,
@@ -3150,27 +3181,34 @@ function ResponseList(arg0) {
 	};
 	if (orderedResponses.length === 1) {
 		const [{ status, response }] = orderedResponses;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), renderResponsePanel({
-			status,
-			response
-		})] });
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
-		selectedIndex,
-		onChange: (index) => {
-			onSelectStatus?.(orderedResponses[index]?.status ?? "");
-		},
-		items: orderedResponses.map(({ status, response }) => ({
-			id: status,
-			label: status,
-			panel: renderResponsePanel({
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+			title: title ?? t("openapi.responses"),
+			children: renderResponsePanel({
 				status,
 				response
 			})
-		})),
-		className: "mt-4 mb-6",
-		panelsClassName: "mt-5"
-	})] });
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title: title ?? t("openapi.responses"),
+		bodyClassName: "not-prose",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+			selectedIndex,
+			onChange: (index) => {
+				onSelectStatus?.(orderedResponses[index]?.status ?? "");
+			},
+			items: orderedResponses.map(({ status, response }) => ({
+				id: status,
+				label: status,
+				panel: renderResponsePanel({
+					status,
+					response
+				})
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})
+	});
 }
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
@@ -3196,7 +3234,7 @@ function EndpointRequest(arg0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderDescription(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
 		className: "clarify-openapi-request-workspace relative mt-8 pt-6",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "w-full",
+			className: "flex w-full flex-col gap-6",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiAuthDocumentation, { options: authOptions }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
@@ -3211,7 +3249,10 @@ function EndpointRequest(arg0) {
 					title: t("openapi.headers"),
 					parameters: groupedParameters.header
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }), renderRequestBody()] })
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+					title: t("openapi.requestBody"),
+					children: renderRequestBody()
+				})
 			]
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
 			sticky: true,
@@ -4291,6 +4332,7 @@ function OpenApiResponseViewer(arg0) {
 	const previewAvailable = exchange ? canPreviewResponse(exchange.contentType) : false;
 	const selectedBodyMode = bodyModeSelection && bodyModeSelection.exchange === exchange ? bodyModeSelection.mode : "preview";
 	const activeBodyMode = previewAvailable ? selectedBodyMode : "raw";
+	const bodyModes = ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable);
 	function downloadBody() {
 		if (!exchange) return;
 		const url = URL.createObjectURL(exchange.blob);
@@ -4365,48 +4407,37 @@ function OpenApiResponseViewer(arg0) {
 							className: "font-mono text-2xs font-normal text-(--clarify-code-faint)",
 							children: exchange.contentType || t("openapi.unknownContentType")
 						}),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "min-h-72",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex h-10 items-center justify-between border-b border-(--clarify-code-border) px-3",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									role: "tablist",
-									className: "flex",
-									children: ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable).map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										role: "tab",
-										"aria-selected": activeBodyMode === mode,
-										onClick: () => setBodyModeSelection({
-											exchange,
-											mode
-										}),
-										className: (0, clsx.default)("border-b-2 px-2.5 py-1 text-2xs font-semibold", activeBodyMode === mode ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-code-text)" : "border-transparent text-(--clarify-code-muted)"),
-										children: mode === "preview" ? t("openapi.preview") : t("openapi.raw")
-									}, mode))
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { value: exchange.body }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										onClick: downloadBody,
-										"aria-label": t("openapi.downloadBody"),
-										title: t("openapi.downloadBody"),
-										className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.DownloadIcon, {
-											className: "size-4",
-											"aria-hidden": "true"
-										})
-									})]
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "p-4",
-								children: activeBodyMode === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+							items: bodyModes.map((mode) => ({
+								id: mode,
+								label: mode === "preview" ? t("openapi.preview") : t("openapi.raw"),
+								panel: mode === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 									className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
 									children: exchange.body
 								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "py-8 text-center text-xs text-(--clarify-code-faint)",
 									children: t("openapi.responseBodyEmpty")
 								})
-							})]
+							})),
+							selectedIndex: bodyModes.indexOf(activeBodyMode),
+							onChange: (index) => setBodyModeSelection({
+								exchange,
+								mode: bodyModes[index] ?? "raw"
+							}),
+							spacingClassName: "m-0 min-h-72",
+							panelsClassName: "p-4",
+							variant: "code",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { value: exchange.body }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								onClick: downloadBody,
+								"aria-label": t("openapi.downloadBody"),
+								title: t("openapi.downloadBody"),
+								className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.DownloadIcon, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})] })
 						})
 					})
 				]
@@ -5169,7 +5200,8 @@ function ServerVariableControl(arg0) {
 			label: option
 		})),
 		onChange,
-		compact
+		compact,
+		buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		"aria-label": name,
@@ -5199,7 +5231,8 @@ function ServerPanel(arg0) {
 						label: getServerLabel(server, index),
 						description: server.description
 					})),
-					onChange: onSelectServer
+					onChange: onSelectServer,
+					buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 				})]
 			}) : null, variableEntries.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
@@ -5570,4 +5603,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-bdALspAY.cjs.map
+//# sourceMappingURL=OpenApiOperation-HhSjad7q.cjs.map