@gitbook/react-openapi 1.5.4 → 1.5.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gitbook/react-openapi
 
+## 1.5.6
+
+### Patch Changes
+
+- bf63045: Compile JSX
+
+## 1.5.5
+
+### Patch Changes
+
+- Updated dependencies [985c1b4]
+  - @gitbook/openapi-parser@3.0.7
+
 ## 1.5.4
 
 ### Patch Changes

package/dist/InteractiveSection.js

@@ -5,6 +5,7 @@ import { Section, SectionBody, SectionHeader, SectionHeaderContent } from "./Sta
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
 import clsx from "classnames";
 import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useButton, useDisclosure, useFocusRing } from "react-aria";
 import { useDisclosureState } from "react-stately";
 
@@ -23,36 +24,57 @@ function InteractiveSection(props) {
 	const { isFocusVisible, focusProps } = useFocusRing();
 	const store = useSelectState(stateKey, defaultTab);
 	const selectedTab = tabs.find((tab) => tab.key === store.key) ?? tabs[0];
-	return <Section id={id} className={clsx("openapi-section", toggeable ? "openapi-section-toggeable" : null, className, toggeable ? `${className}-${state.isExpanded ? "opened" : "closed"}` : null)}>
-            {header ? <SectionHeader onClick={() => {
-		if (toggeable) state.toggle();
-	}} className={className}>
-                    <SectionHeaderContent className={className}>
-                        {selectedTab?.body && toggeable ? <button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx("openapi-section-toggle", `${className}-toggle`)} style={{ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" }}>
-                                {toggleIcon}
-                            </button> : null}
-                        {header}
-                    </SectionHeaderContent>
-                    {}
-                    <div className={clsx("openapi-section-header-controls", `${className}-header-controls`)} onClick={(event) => {
-		event.stopPropagation();
-	}}>
-                        {tabs.length > 0 ? <OpenAPISelect stateKey={stateKey} items={tabs} onChange={() => {
-		state.expand();
-	}} icon={selectIcon} placement="bottom end">
-                                {tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
-                                        {tab.label}
-                                    </OpenAPISelectItem>)}
-                            </OpenAPISelect> : null}
-                    </div>
-                </SectionHeader> : null}
-            {(!toggeable || state.isExpanded) && selectedTab?.body ? <SectionBody ref={panelRef} {...panelProps} className={className}>
-                    {selectedTab?.body}
-                </SectionBody> : null}
-            {overlay ? <div className={clsx("openapi-section-overlay", `${className}-overlay`)}>
-                    {overlay}
-                </div> : null}
-        </Section>;
+	return /* @__PURE__ */ jsxs(Section, {
+		id,
+		className: clsx("openapi-section", toggeable ? "openapi-section-toggeable" : null, className, toggeable ? `${className}-${state.isExpanded ? "opened" : "closed"}` : null),
+		children: [
+			header ? /* @__PURE__ */ jsxs(SectionHeader, {
+				onClick: () => {
+					if (toggeable) state.toggle();
+				},
+				className,
+				children: [/* @__PURE__ */ jsxs(SectionHeaderContent, {
+					className,
+					children: [selectedTab?.body && toggeable ? /* @__PURE__ */ jsx("button", {
+						...mergeProps(buttonProps, focusProps),
+						ref: triggerRef,
+						className: clsx("openapi-section-toggle", `${className}-toggle`),
+						style: { outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" },
+						children: toggleIcon
+					}) : null, header]
+				}), /* @__PURE__ */ jsx("div", {
+					className: clsx("openapi-section-header-controls", `${className}-header-controls`),
+					onClick: (event) => {
+						event.stopPropagation();
+					},
+					children: tabs.length > 0 ? /* @__PURE__ */ jsx(OpenAPISelect, {
+						stateKey,
+						items: tabs,
+						onChange: () => {
+							state.expand();
+						},
+						icon: selectIcon,
+						placement: "bottom end",
+						children: tabs.map((tab) => /* @__PURE__ */ jsx(OpenAPISelectItem, {
+							id: tab.key,
+							value: tab,
+							children: tab.label
+						}, tab.key))
+					}) : null
+				})]
+			}) : null,
+			(!toggeable || state.isExpanded) && selectedTab?.body ? /* @__PURE__ */ jsx(SectionBody, {
+				ref: panelRef,
+				...panelProps,
+				className,
+				children: selectedTab?.body
+			}) : null,
+			overlay ? /* @__PURE__ */ jsx("div", {
+				className: clsx("openapi-section-overlay", `${className}-overlay`),
+				children: overlay
+			}) : null
+		]
+	});
 }
 
 //#endregion

package/dist/Markdown.js

@@ -1,9 +1,13 @@
 import clsx from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/Markdown.tsx
 function Markdown(props) {
 	const { source, className } = props;
-	return <div className={clsx("openapi-markdown", className)} dangerouslySetInnerHTML={{ __html: source }} />;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("openapi-markdown", className),
+		dangerouslySetInnerHTML: { __html: source }
+	});
 }
 
 //#endregion

package/dist/OpenAPICodeSample.js

@@ -8,6 +8,7 @@ import { OpenAPICodeSampleBody } from "./OpenAPICodeSampleSelector.js";
 import { resolvePrefillCodePlaceholderFromSecurityScheme, resolveURLWithPrefillCodePlaceholdersFromServer } from "./util/tryit-prefill.js";
 import { ScalarApiButton } from "./ScalarApiButton.js";
 import { codeSampleGenerators, parseHostAndPath } from "./code-samples.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/OpenAPICodeSample.tsx
 const CUSTOM_CODE_SAMPLES_KEYS = [
@@ -26,7 +27,12 @@ function OpenAPICodeSample(props) {
 	if (data["x-codeSamples"] === false && !customCodeSamples) return null;
 	const samples = customCodeSamples ?? generateCodeSamples(props);
 	if (samples.length === 0) return null;
-	return <OpenAPICodeSampleBody context={getOpenAPIClientContext(context)} data={data} items={samples} selectIcon={context.icons.chevronDown} />;
+	return /* @__PURE__ */ jsx(OpenAPICodeSampleBody, {
+		context: getOpenAPIClientContext(context),
+		data,
+		items: samples,
+		selectIcon: context.icons.chevronDown
+	});
 }
 /**
 * Generate code samples for the operation.
@@ -102,8 +108,17 @@ function generateCodeSamples(props) {
 			return {
 				key: `default-${generator.id}`,
 				label: generator.label,
-				body: <OpenAPIMediaTypeExamplesBody method={data.method} path={data.path} renderers={renderers} blockKey={context.blockKey} />,
-				footer: <OpenAPICodeSampleFooter renderers={renderers} data={data} context={context} />
+				body: /* @__PURE__ */ jsx(OpenAPIMediaTypeExamplesBody, {
+					method: data.method,
+					path: data.path,
+					renderers,
+					blockKey: context.blockKey
+				}),
+				footer: /* @__PURE__ */ jsx(OpenAPICodeSampleFooter, {
+					renderers,
+					data,
+					context
+				})
 			};
 		}
 		return {
@@ -121,7 +136,11 @@ function generateCodeSamples(props) {
 				}),
 				syntax: generator.syntax
 			}),
-			footer: <OpenAPICodeSampleFooter data={data} renderers={[]} context={context} />
+			footer: /* @__PURE__ */ jsx(OpenAPICodeSampleFooter, {
+				data,
+				renderers: [],
+				context
+			})
 		};
 	});
 }
@@ -133,10 +152,23 @@ function OpenAPICodeSampleFooter(props) {
 	const hasMultipleMediaTypes = renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
 	if (hideTryItPanel && !hasMultipleMediaTypes) return null;
 	if (!validateHttpMethod(method) || !hasMultipleMediaTypes && servers.length === 0) return null;
-	return <div className="openapi-codesample-footer">
-            {hasMultipleMediaTypes ? <OpenAPIMediaTypeExamplesSelector method={data.method} path={data.path} renderers={renderers} selectIcon={context.icons.chevronDown} blockKey={context.blockKey} /> : <span />}
-            {!hideTryItPanel && servers.length > 0 && <ScalarApiButton context={getOpenAPIClientContext(context)} method={method} path={path} securities={securities} servers={servers} specUrl={specUrl} />}
-        </div>;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "openapi-codesample-footer",
+		children: [hasMultipleMediaTypes ? /* @__PURE__ */ jsx(OpenAPIMediaTypeExamplesSelector, {
+			method: data.method,
+			path: data.path,
+			renderers,
+			selectIcon: context.icons.chevronDown,
+			blockKey: context.blockKey
+		}) : /* @__PURE__ */ jsx("span", {}), !hideTryItPanel && servers.length > 0 && /* @__PURE__ */ jsx(ScalarApiButton, {
+			context: getOpenAPIClientContext(context),
+			method,
+			path,
+			securities,
+			servers,
+			specUrl
+		})]
+	});
 }
 /**
 * Get custom code samples for the operation.
@@ -155,7 +187,11 @@ function getCustomCodeSamples(props) {
 				code: sample.source,
 				syntax: sample.lang
 			}),
-			footer: <OpenAPICodeSampleFooter renderers={[]} data={data} context={context} />
+			footer: /* @__PURE__ */ jsx(OpenAPICodeSampleFooter, {
+				renderers: [],
+				data,
+				context
+			})
 		}));
 	});
 	return customCodeSamples;

package/dist/OpenAPICodeSampleInteractive.js

@@ -3,6 +3,7 @@
 
 import { createStateKey } from "./utils.js";
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/OpenAPICodeSampleInteractive.tsx
 function OpenAPIMediaTypeExamplesSelector(props) {
@@ -11,10 +12,19 @@ function OpenAPIMediaTypeExamplesSelector(props) {
 	const stateKey = createStateKey("request-body-media-type", blockKey);
 	const state = useSelectState(stateKey, renderers[0].mediaType);
 	const selected = renderers.find((r) => r.mediaType === state.key) || renderers[0];
-	return <div className="openapi-codesample-selectors">
-            <MediaTypeSelector selectIcon={selectIcon} stateKey={stateKey} renderers={renderers} />
-            <ExamplesSelector selectIcon={selectIcon} method={method} path={path} renderer={selected} />
-        </div>;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "openapi-codesample-selectors",
+		children: [/* @__PURE__ */ jsx(MediaTypeSelector, {
+			selectIcon,
+			stateKey,
+			renderers
+		}), /* @__PURE__ */ jsx(ExamplesSelector, {
+			selectIcon,
+			method,
+			path,
+			renderer: selected
+		})]
+	});
 }
 function MediaTypeSelector(props) {
 	const { renderers, stateKey, selectIcon } = props;
@@ -23,11 +33,17 @@ function MediaTypeSelector(props) {
 		key: renderer.mediaType,
 		label: renderer.mediaType
 	}));
-	return <OpenAPISelect items={items} icon={selectIcon} stateKey={stateKey} placement="bottom start">
-            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                    {item.label}
-                </OpenAPISelectItem>)}
-        </OpenAPISelect>;
+	return /* @__PURE__ */ jsx(OpenAPISelect, {
+		items,
+		icon: selectIcon,
+		stateKey,
+		placement: "bottom start",
+		children: items.map((item) => /* @__PURE__ */ jsx(OpenAPISelectItem, {
+			id: item.key,
+			value: item,
+			children: item.label
+		}, item.key))
+	});
 }
 function ExamplesSelector(props) {
 	const { method, path, renderer, selectIcon } = props;
@@ -36,11 +52,17 @@ function ExamplesSelector(props) {
 		key: index,
 		label: example.example.summary || `Example ${index + 1}`
 	}));
-	return <OpenAPISelect items={items} icon={selectIcon} stateKey={`media-type-sample-${renderer.mediaType}-${method}-${path}`} placement="bottom start">
-            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                    {item.label}
-                </OpenAPISelectItem>)}
-        </OpenAPISelect>;
+	return /* @__PURE__ */ jsx(OpenAPISelect, {
+		items,
+		icon: selectIcon,
+		stateKey: `media-type-sample-${renderer.mediaType}-${method}-${path}`,
+		placement: "bottom start",
+		children: items.map((item) => /* @__PURE__ */ jsx(OpenAPISelectItem, {
+			id: item.key,
+			value: item,
+			children: item.label
+		}, item.key))
+	});
 }
 function OpenAPIMediaTypeExamplesBody(props) {
 	const { renderers, method, path, blockKey } = props;
@@ -48,7 +70,11 @@ function OpenAPIMediaTypeExamplesBody(props) {
 	const mediaTypeState = useSelectState(createStateKey("request-body-media-type", blockKey), renderers[0].mediaType);
 	const selected = renderers.find((r) => r.mediaType === mediaTypeState.key) ?? renderers[0];
 	if (selected.examples.length === 0) return selected.element;
-	return <ExamplesBody method={method} path={path} renderer={selected} />;
+	return /* @__PURE__ */ jsx(ExamplesBody, {
+		method,
+		path,
+		renderer: selected
+	});
 }
 function ExamplesBody(props) {
 	const { method, path, renderer } = props;

package/dist/OpenAPICodeSampleSelector.js

@@ -6,6 +6,7 @@ import { getOrCreateStoreByKey } from "./getOrCreateStoreByKey.js";
 import { OpenAPISelect, OpenAPISelectItem } from "./OpenAPISelect.js";
 import { OpenAPIPath } from "./OpenAPIPath.js";
 import { useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 
 //#region src/OpenAPICodeSampleSelector.tsx
@@ -18,14 +19,25 @@ function useCodeSampleState(initialKey = "default") {
 }
 function OpenAPICodeSampleHeader(props) {
 	const { data, items, selectIcon, context } = props;
-	return <>
-            <OpenAPIPath context={context} canCopy={false} withServer={false} data={data} />
-            {items.length > 1 ? <OpenAPISelect icon={selectIcon} items={items} stateKey="codesample" placement="bottom end">
-                    {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
-                            {item.label}
-                        </OpenAPISelectItem>)}
-                </OpenAPISelect> : items[0] ? <span className="openapi-codesample-label">{items[0].label}</span> : null}
-        </>;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OpenAPIPath, {
+		context,
+		canCopy: false,
+		withServer: false,
+		data
+	}), items.length > 1 ? /* @__PURE__ */ jsx(OpenAPISelect, {
+		icon: selectIcon,
+		items,
+		stateKey: "codesample",
+		placement: "bottom end",
+		children: items.map((item) => /* @__PURE__ */ jsx(OpenAPISelectItem, {
+			id: item.key,
+			value: item,
+			children: item.label
+		}, item.key))
+	}) : items[0] ? /* @__PURE__ */ jsx("span", {
+		className: "openapi-codesample-label",
+		children: items[0].label
+	}) : null] });
 }
 function OpenAPICodeSampleBody(props) {
 	const { items, data, selectIcon, context } = props;
@@ -33,12 +45,20 @@ function OpenAPICodeSampleBody(props) {
 	const state = useCodeSampleState(items[0]?.key);
 	const selected = items.find((item) => item.key === state.key) || items[0];
 	if (!selected) return null;
-	return <StaticSection header={<OpenAPICodeSampleHeader context={context} selectIcon={selectIcon} data={data} items={items} />} className="openapi-codesample">
-            <div id={selected.key} className="openapi-codesample-panel">
-                {selected.body ? selected.body : null}
-                {selected.footer ? selected.footer : null}
-            </div>
-        </StaticSection>;
+	return /* @__PURE__ */ jsx(StaticSection, {
+		header: /* @__PURE__ */ jsx(OpenAPICodeSampleHeader, {
+			context,
+			selectIcon,
+			data,
+			items
+		}),
+		className: "openapi-codesample",
+		children: /* @__PURE__ */ jsxs("div", {
+			id: selected.key,
+			className: "openapi-codesample-panel",
+			children: [selected.body ? selected.body : null, selected.footer ? selected.footer : null]
+		})
+	});
 }
 
 //#endregion

package/dist/OpenAPICopyButton.js

@@ -5,6 +5,7 @@ import { t } from "./translate.js";
 import { OpenAPITooltip } from "./OpenAPITooltip.js";
 import clsx from "classnames";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "react-aria-components";
 
 //#region src/OpenAPICopyButton.tsx
@@ -23,21 +24,26 @@ function OpenAPICopyButton(props) {
 			}, 2e3);
 		});
 	};
-	return <OpenAPITooltip isDisabled={!withTooltip} isOpen={isOpen} onOpenChange={setIsOpen}>
-            <Button type="button" preventFocusOnPress onPress={(e) => {
-		handleCopy();
-		onPress?.(e);
-	}} className={clsx("openapi-copy-button", className)} {...props}>
-                {children}
-            </Button>
-
-            <OpenAPITooltip.Content isOpen={isOpen} onOpenChange={setIsOpen}>
-                {copied ? <>
-                        {context.icons.check}
-                        {t(context.translation, "copied")}
-                    </> : label || t(context.translation, "copy_to_clipboard")}
-            </OpenAPITooltip.Content>
-        </OpenAPITooltip>;
+	return /* @__PURE__ */ jsxs(OpenAPITooltip, {
+		isDisabled: !withTooltip,
+		isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			preventFocusOnPress: true,
+			onPress: (e) => {
+				handleCopy();
+				onPress?.(e);
+			},
+			className: clsx("openapi-copy-button", className),
+			...props,
+			children
+		}), /* @__PURE__ */ jsx(OpenAPITooltip.Content, {
+			isOpen,
+			onOpenChange: setIsOpen,
+			children: copied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [context.icons.check, t(context.translation, "copied")] }) : label || t(context.translation, "copy_to_clipboard")
+		})]
+	});
 }
 
 //#endregion

package/dist/OpenAPIDisclosure.js

@@ -3,6 +3,7 @@
 
 import clsx from "classnames";
 import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
 
 //#region src/OpenAPIDisclosure.tsx
@@ -12,16 +13,23 @@ import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
 function OpenAPIDisclosure(props) {
 	const { icon, header, label, children, className, defaultExpanded = false } = props;
 	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-	return <Disclosure className={clsx("openapi-disclosure", className)} isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
-            <Button slot="trigger" className="openapi-disclosure-trigger" style={({ isFocusVisible }) => ({ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" })}>
-                {header}
-                <div className="openapi-disclosure-trigger-label">
-                    {label ? <span>{typeof label === "function" ? label(isExpanded) : label}</span> : null}
-                    {icon}
-                </div>
-            </Button>
-            {isExpanded ? <DisclosurePanel className="openapi-disclosure-panel">{children}</DisclosurePanel> : null}
-        </Disclosure>;
+	return /* @__PURE__ */ jsxs(Disclosure, {
+		className: clsx("openapi-disclosure", className),
+		isExpanded,
+		onExpandedChange: setIsExpanded,
+		children: [/* @__PURE__ */ jsxs(Button, {
+			slot: "trigger",
+			className: "openapi-disclosure-trigger",
+			style: ({ isFocusVisible }) => ({ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" }),
+			children: [header, /* @__PURE__ */ jsxs("div", {
+				className: "openapi-disclosure-trigger-label",
+				children: [label ? /* @__PURE__ */ jsx("span", { children: typeof label === "function" ? label(isExpanded) : label }) : null, icon]
+			})]
+		}), isExpanded ? /* @__PURE__ */ jsx(DisclosurePanel, {
+			className: "openapi-disclosure-panel",
+			children
+		}) : null]
+	});
 }
 
 //#endregion

package/dist/OpenAPIDisclosureGroup.js

@@ -5,6 +5,7 @@ import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelec
 import { getOrCreateDisclosureStoreByKey } from "./getOrCreateDisclosureStoreByKey.js";
 import clsx from "classnames";
 import { createContext, useContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 import { mergeProps, useButton, useDisclosure, useFocusRing, useId as useId$1 } from "react-aria";
 import { useDisclosureGroupState, useDisclosureState } from "react-stately";
@@ -28,9 +29,16 @@ function OpenAPIDisclosureGroup(props) {
 			onExpandedChange?.(keys);
 		}
 	});
-	return <DisclosureGroupStateContext.Provider value={state}>
-            {groups.map((group) => <DisclosureItem className={className} selectStateKey={selectStateKey} selectIcon={selectIcon} icon={icon} key={group.key} group={group} />)}
-        </DisclosureGroupStateContext.Provider>;
+	return /* @__PURE__ */ jsx(DisclosureGroupStateContext.Provider, {
+		value: state,
+		children: groups.map((group) => /* @__PURE__ */ jsx(DisclosureItem, {
+			className,
+			selectStateKey,
+			selectIcon,
+			icon,
+			group
+		}, group.key))
+	});
 }
 function DisclosureItem(props) {
 	const { icon, group, selectStateKey, selectIcon, className } = props;
@@ -56,33 +64,51 @@ function DisclosureItem(props) {
 	const { isFocusVisible, focusProps } = useFocusRing();
 	const store = useSelectState(selectStateKey, group.tabs?.[0]?.key || "");
 	const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
-	return <div className={clsx("openapi-disclosure-group", className)} aria-expanded={state.isExpanded}>
-            <div slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} aria-disabled={isDisabled} style={{ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500)/0.4)" : "none" }} className="openapi-disclosure-group-trigger">
-                <div className="openapi-disclosure-group-icon">
-                    {icon || <svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
-                            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-                        </svg>}
-                </div>
-
-                <div className="openapi-disclosure-group-label">
-                    {group.label}
-
-                    {group.tabs ? <div className="openapi-disclosure-group-mediatype" onClick={(e) => e.stopPropagation()}>
-                            {group.tabs?.length > 1 ? <OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onChange={() => {
-		state.expand();
-	}} items={group.tabs} placement="bottom end">
-                                    {group.tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
-                                            {tab.label}
-                                        </OpenAPISelectItem>)}
-                                </OpenAPISelect> : group.tabs[0]?.label ? <span>{group.tabs[0].label}</span> : null}
-                        </div> : null}
-                </div>
-            </div>
-
-            {state.isExpanded && selectedTab && <div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>
-                    {selectedTab.body}
-                </div>}
-        </div>;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("openapi-disclosure-group", className),
+		"aria-expanded": state.isExpanded,
+		children: [/* @__PURE__ */ jsxs("div", {
+			slot: "trigger",
+			ref: triggerRef,
+			...mergeProps(buttonProps, focusProps),
+			"aria-disabled": isDisabled,
+			style: { outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500)/0.4)" : "none" },
+			className: "openapi-disclosure-group-trigger",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "openapi-disclosure-group-icon",
+				children: icon || /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					className: "openapi-disclosure-group-icon",
+					children: /* @__PURE__ */ jsx("path", { d: "m8.25 4.5 7.5 7.5-7.5 7.5" })
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "openapi-disclosure-group-label",
+				children: [group.label, group.tabs ? /* @__PURE__ */ jsx("div", {
+					className: "openapi-disclosure-group-mediatype",
+					onClick: (e) => e.stopPropagation(),
+					children: group.tabs?.length > 1 ? /* @__PURE__ */ jsx(OpenAPISelect, {
+						icon: selectIcon,
+						stateKey: selectStateKey,
+						onChange: () => {
+							state.expand();
+						},
+						items: group.tabs,
+						placement: "bottom end",
+						children: group.tabs.map((tab) => /* @__PURE__ */ jsx(OpenAPISelectItem, {
+							id: tab.key,
+							value: tab,
+							children: tab.label
+						}, tab.key))
+					}) : group.tabs[0]?.label ? /* @__PURE__ */ jsx("span", { children: group.tabs[0].label }) : null
+				}) : null]
+			})]
+		}), state.isExpanded && selectedTab && /* @__PURE__ */ jsx("div", {
+			className: "openapi-disclosure-group-panel",
+			ref: panelRef,
+			...panelProps,
+			children: selectedTab.body
+		})]
+	});
 }
 
 //#endregion

package/dist/OpenAPIExample.js

@@ -2,6 +2,7 @@ import { json2xml } from "./json2xml.js";
 import { stringifyOpenAPI } from "./stringifyOpenAPI.js";
 import { t } from "./translate.js";
 import yaml from "js-yaml";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/OpenAPIExample.tsx
 /**
@@ -13,7 +14,7 @@ function OpenAPIExample(props) {
 		example,
 		syntax
 	});
-	if (code === null) return <OpenAPIEmptyExample context={context} />;
+	if (code === null) return /* @__PURE__ */ jsx(OpenAPIEmptyExample, { context });
 	return context.renderCodeBlock({
 		code,
 		syntax
@@ -32,9 +33,10 @@ function stringifyExample(args) {
 */
 function OpenAPIEmptyExample(props) {
 	const { context } = props;
-	return <pre className="openapi-example-empty">
-            <p>{t(context.translation, "no_content")}</p>
-        </pre>;
+	return /* @__PURE__ */ jsx("pre", {
+		className: "openapi-example-empty",
+		children: /* @__PURE__ */ jsx("p", { children: t(context.translation, "no_content") })
+	});
 }
 
 //#endregion