@clarify-labs/renderer 0.7.0 → 0.7.1

package/output/{OpenApiOperation-ZXToVSFC.cjs → OpenApiOperation-C4xZu4i0.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_shell = require("./shell-xxhV0p7k.cjs");
+const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
 const require_remark = require("./remark-Dv3owbSH.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
@@ -16,12 +16,12 @@ let github_slugger = require("github-slugger");
 let _scalar_snippetz = require("@scalar/snippetz");
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
-	return require_shell.localizeHref(href, require_shell.useClarifyConfig(), require_shell.useClarifyLocale());
+	return require_PageActions.localizeHref(href, require_PageActions.useConfig(), require_PageActions.useLocale());
 }
 function LocalizedLink(arg0) {
 	const { href, ...props } = arg0;
 	const localizedHref = useLocalizedHref(href);
-	if (!require_shell.isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+	if (!require_PageActions.isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: localizedHref,
 		...props
 	});
@@ -115,7 +115,7 @@ var defaultTitleKeys = {
 };
 function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const style = calloutStyles[type];
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
@@ -142,9 +142,9 @@ function Callout(arg0) {
 function CardIcon(arg0) {
 	const { name } = arg0;
 	if (!name) return null;
-	const iconName = require_shell.resolveLucideIconName(name);
+	const iconName = require_PageActions.resolveLucideIconName(name);
 	if (!iconName) return null;
-	const Icon = require_shell.lucideIconRegistry[iconName];
+	const Icon = require_PageActions.lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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)",
@@ -229,7 +229,7 @@ function getNodeText(node) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
@@ -238,38 +238,30 @@ function CopyButton(arg0) {
 		return () => window.clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 inline-flex items-center gap-1 overflow-hidden rounded-full border border-(--clarify-code-border) py-1 pr-3 pl-2 text-2xs font-medium whitespace-nowrap opacity-100 shadow-sm backdrop-blur-sm transition sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied text-(--clarify-code-text)" : "bg-(--clarify-code-control-background) text-(--clarify-code-text) hover:bg-(--clarify-code-control-background-hover)"),
 		onClick: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			"aria-hidden": copied,
-			className: (0, clsx.default)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-5 w-5 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"aria-hidden": !copied,
-			className: (0, clsx.default)("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: t("actions.copied")
-		})]
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-3.5 w-3.5 stroke-(--clarify-code-muted) transition-colors group-hover/button:stroke-(--clarify-code-text)" }), t("actions.copy")] })
 	});
 }
 function CodePanelHeader(arg0) {
 	const { tag, label } = arg0;
 	if (!tag && !label) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
+		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4",
 		children: [
 			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
 				children: tag
 			}) : null,
-			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
+			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-zinc-400",
+				className: "truncate text-xs text-(--clarify-code-muted)",
 				children: label
 			}) : null
 		]
@@ -287,14 +279,14 @@ function CodePanel(arg0) {
 	}
 	const copyText = code ?? getNodeText(children);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
+		className: "clarify-code-panel group bg-(--clarify-code-background)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanelHeader, {
 			tag,
 			label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
 		})]
@@ -302,18 +294,18 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
 		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			className: "mr-auto pt-3 text-xs font-semibold text-(--clarify-code-text)",
 			children: title
 		}) : null, hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
 				children: getPanelTitle({
 					...(0, react.isValidElement)(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
@@ -381,13 +373,13 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
 		...(0, react.isValidElement)(child) ? child.props : {},
 		fallbackTitle: t("actions.code")
 	})) ?? []);
 	const hasTabs = react.Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -448,7 +440,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm", className),
+		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
@@ -486,7 +478,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
 		ref,
@@ -513,7 +505,7 @@ var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
 		ref,
@@ -621,9 +613,9 @@ function Heading(arg0) {
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = (0, react.useRef)(null);
-	const registerHeading = require_shell.useSectionStore((state) => state.registerHeading);
+	const registerHeading = require_PageActions.useSectionStore((state) => state.registerHeading);
 	const inView = (0, framer_motion.useInView)(ref, {
-		margin: `${require_shell.remToPx(-3.5)}px 0px 0px 0px`,
+		margin: `${require_PageActions.remToPx(-3.5)}px 0px 0px 0px`,
 		amount: "all"
 	});
 	(0, react.useEffect)(() => {
@@ -817,6 +809,7 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
+	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
@@ -825,7 +818,7 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
+		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, {
 			className: "flex-auto",
 			children
@@ -839,6 +832,17 @@ function a(arg0) {
 		...props
 	});
 }
+function h1(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-page-title-row flex flex-col gap-4  pb-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+			className: (0, clsx.default)("clarify-page-title min-w-0 flex-1", className),
+			...props,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.PageTitleActions, {})]
+	});
+}
 var code = Code;
 var pre = Pre;
 function h2(props) {
@@ -1543,26 +1547,26 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-black/30 px-2 py-1 text-xs font-medium whitespace-nowrap text-zinc-100 outline-hidden transition hover:bg-black/50 focus:ring-2 focus:ring-emerald-400/25 data-open:bg-white/10 data-open:ring-2 data-open:ring-emerald-400/25`,
+				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-(--clarify-code-control-background) px-2 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:bg-(--clarify-code-control-background-hover) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "shrink-0 text-zinc-500",
+						className: "shrink-0 text-(--clarify-code-faint)",
 						children: icon
 					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "truncate",
 						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-500",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-code-faint)",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-zinc-900 p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-white/10 [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: normalizedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
 					value: option.value,
-					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
+					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-muted) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:text-(--clarify-theme-tokens-colors-primary)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1637,23 +1641,23 @@ function authLabel(name, scheme) {
 }
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (!ok) return;
 				setCopied(true);
 				window.setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		className: "flex items-center gap-1.5 rounded-full bg-black/ px-2.5 py-1.5 text-2xs font-medium text-zinc-400 transition hover:bg-black/50 hover:text-zinc-200 focus:bg-black/50 focus:text-zinc-200",
+		className: "flex items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
 		children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
-			className: "h-3.5 w-3.5 text-emerald-300",
+			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ClipboardIcon, {
-			className: "h-3.5 w-3.5 text-zinc-500",
+			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
 	});
@@ -1673,7 +1677,7 @@ function ExampleMetaValue(arg0) {
 }
 function CodeToolbar(arg0) {
 	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "absolute top-3.5 right-4 left-4 z-10 flex items-center justify-between gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1702,17 +1706,17 @@ function CodeToolbar(arg0) {
 }
 function ApiExampleCodeGroup(arg0) {
 	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_shell.useBuiltInText();
-	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 py-2 dark:border-b-white/5 dark:bg-white/1" : "flex h-9 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1";
+	const t = require_PageActions.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";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",
+		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
+					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
+						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -1744,18 +1748,18 @@ function ApiExampleCodeGroup(arg0) {
 							onChange: onSelectTag,
 							className: "clarify-api-example-status font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : null,
+						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 						label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
 							label: t("openapi.mediaType"),
 							value: label,
 							options: labelOptions,
 							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-zinc-400"
+							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
 						}) : null
 					]
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-code group relative",
+					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeToolbar, {
 						code,
 						languageOptions,
@@ -1765,7 +1769,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
+						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 							className: `language-${language}`,
 							children: code
@@ -1778,7 +1782,7 @@ function ApiExampleCodeGroup(arg0) {
 }
 function RequestExamplesPanel(arg0) {
 	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
 	const examples = getExampleEntries(selectedContent?.value);
 	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
@@ -1835,7 +1839,7 @@ function RequestExamplesPanel(arg0) {
 }
 function ResponseExamplesPanel(arg0) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0);
 	const [selectedStatus, setSelectedStatus] = (0, react.useState)(responses.find(({ status }) => status.startsWith("2"))?.status ?? responses[0]?.status ?? "");
 	const selectedResponse = responses.find(({ status }) => status === selectedStatus) ?? responses[0];
@@ -2028,7 +2032,7 @@ function getRootSchemaNode(spec, schema) {
 }
 function SchemaNode(arg0) {
 	const { node, depth = 0 } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [expanded, setExpanded] = (0, react.useState)(depth < 1);
 	const hasChildren = node.children.length > 0;
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
@@ -2098,7 +2102,7 @@ function SchemaProperties(arg0) {
 }
 function ParameterList(arg0) {
 	const { title, parameters } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	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"),
@@ -2108,7 +2112,7 @@ function ParameterList(arg0) {
 }
 function ResponseList(arg0) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec);
 	if (responses.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: responses.map(({ status, response }) => {
@@ -2209,7 +2213,7 @@ function ServerUrlValue(arg0) {
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: (0, clsx.default)("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
+		className: (0, clsx.default)("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -2219,7 +2223,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "truncate text-xs",
+				className: "truncate font-semibold text-xs",
 				children: url
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
 				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
@@ -2399,7 +2403,7 @@ function EndpointIdentity(arg0) {
 }
 function OpenApiOperation(arg0) {
 	const { spec, path, method, operation } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const id = (0, github_slugger.slug)(`${method.toLowerCase()} ${path}`);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
@@ -2699,4 +2703,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-ZXToVSFC.cjs.map
+//# sourceMappingURL=OpenApiOperation-C4xZu4i0.cjs.map