@mantine-vue/code-highlight 2.4.0 → 3.1.0

package/esm/index.mjs

@@ -1,300 +1,283 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, withCtx } from "vue";
 import { ActionIcon, Box, ScrollArea, Tooltip, UnstyledButton, createSafeContext, createVarsResolver, getRadius, getThemeColor, rem, useMantineContext, useProps, useStyles } from "@mantine-vue/core";
 import { useClipboard, useUncontrolled } from "@mantine-vue/hooks";
-import { computed, defineComponent, h, inject, onMounted, provide, ref, watch } from "vue";
-var CodeHighlight_module_default = {
-	root: "_root_1avu3_1",
-	codeHighlight: "_codeHighlight_1avu3_5",
-	inlineCodeHighlight: "_inlineCodeHighlight_1avu3_37",
-	pre: "_pre_1avu3_71",
-	code: "_code_1avu3_5",
-	controls: "_controls_1avu3_101",
-	control: "_control_1avu3_101",
-	controlTooltip: "_controlTooltip_1avu3_146",
-	codeWrapper: "_codeWrapper_1avu3_158",
-	lineNumbers: "_lineNumbers_1avu3_165",
-	scrollarea: "_scrollarea_1avu3_182",
-	showCodeButton: "_showCodeButton_1avu3_207",
-	file: "_file_1avu3_234",
-	fileIcon: "_fileIcon_1avu3_305",
-	filesScrollarea: "_filesScrollarea_1avu3_311",
-	files: "_files_1avu3_311"
-};
-//#endregion
 //#region src/CodeHighlightProvider/adapters/plain-text-adapter.ts
 var plainTextAdapter = { getHighlighter: () => ({ code }) => ({
 	highlightedCode: code,
 	isHighlighted: false
 }) };
 //#endregion
-//#region src/CodeHighlightProvider/CodeHighlightProvider.ts
-var CodeHighlightContext = Symbol("CodeHighlightContext");
-function provideCodeHighlightAdapterContext(value) {
-	provide(CodeHighlightContext, value);
-}
-function useHighlight() {
-	return inject(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
-}
-var CodeHighlightAdapterProvider = defineComponent({
+//#region src/CodeHighlightProvider/CodeHighlightAdapterProvider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { style: { "display": "contents" } };
+//#endregion
+//#region src/CodeHighlightProvider/CodeHighlightAdapterProvider.vue
+var CodeHighlightAdapterProvider_default = /* @__PURE__ */ defineComponent({
 	name: "CodeHighlightAdapterProvider",
-	props: { adapter: {
-		type: Object,
-		required: true
-	} },
-	setup(props, { slots }) {
+	__name: "CodeHighlightAdapterProvider",
+	props: { adapter: {} },
+	setup(__props) {
+		const props = __props;
 		const context = ref(null);
 		const highlight = computed(() => props.adapter.getHighlighter(context.value));
-		onMounted(() => {
-			props.adapter.loadContext?.().then((value) => {
-				context.value = value;
-			});
-		});
+		onMounted(() => props.adapter.loadContext?.().then((value) => {
+			context.value = value;
+		}));
 		provideCodeHighlightAdapterContext({
 			adapter: props.adapter,
 			get highlight() {
 				return highlight.value;
 			}
 		});
-		return () => h("div", { style: { display: "contents" } }, slots.default?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]);
+		};
 	}
 });
 //#endregion
+//#region src/CodeHighlightProvider/CodeHighlightProvider.ts
+var CodeHighlightContext = Symbol("CodeHighlightContext");
+function provideCodeHighlightAdapterContext(value) {
+	provide(CodeHighlightContext, value);
+}
+function useHighlight() {
+	return inject(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
+}
+var CodeHighlightAdapterProvider = CodeHighlightAdapterProvider_default;
+//#endregion
 //#region src/CodeHighlight/CodeHighlight.context.ts
 var [provideCodeHighlightContext, useCodeHighlightContext] = createSafeContext("CodeHighlightProvider was not found in the component tree");
 //#endregion
-//#region src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.ts
-var CodeHighlightControl = defineComponent({
+//#region src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.vue
+var CodeHighlightControl_default = /* @__PURE__ */ defineComponent({
 	name: "CodeHighlightControl",
 	inheritAttrs: false,
+	__name: "CodeHighlightControl",
 	props: {
-		tooltipLabel: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		component: {
-			type: String,
-			default: "button"
-		},
-		onClick: {
-			type: Function,
-			default: void 0
-		}
+		tooltipLabel: {},
+		component: { default: "button" },
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
 		const props = useProps("CodeHighlightControl", null, rawProps);
+		const attrs = useAttrs();
 		const ctx = useCodeHighlightContext();
-		return () => {
-			const tooltipStyles = ctx.getStyles("controlTooltip");
-			const control = h(ActionIcon, {
-				...ctx.getStyles("control"),
-				...attrs,
-				component: props.component,
-				variant: "none",
-				"data-code-color-scheme": ctx.codeColorScheme,
-				onClick: props.onClick
-			}, slots);
-			return props.tooltipLabel ? h(Tooltip, {
-				label: props.tooltipLabel,
+		const tooltipStyles = computed(() => ctx.getStyles("controlTooltip"));
+		return (_ctx, _cache) => {
+			return unref(props).tooltipLabel ? (openBlock(), createBlock(unref(Tooltip), {
+				key: 0,
+				label: unref(props).tooltipLabel,
 				fz: "sm",
 				position: "bottom",
-				classNames: { tooltip: tooltipStyles.class },
-				styles: { tooltip: tooltipStyles.style },
-				"data-code-color-scheme": ctx.codeColorScheme,
-				transitionProps: { duration: 0 }
-			}, () => control) : control;
+				"class-names": { tooltip: tooltipStyles.value.class },
+				styles: { tooltip: tooltipStyles.value.style },
+				"data-code-color-scheme": unref(ctx).codeColorScheme,
+				"transition-props": { duration: 0 }
+			}, {
+				default: withCtx(() => [createVNode(unref(ActionIcon), mergeProps({
+					...unref(ctx).getStyles("control"),
+					...unref(attrs)
+				}, {
+					component: unref(props).component,
+					variant: "none",
+					"data-code-color-scheme": unref(ctx).codeColorScheme,
+					onClick: _cache[0] || (_cache[0] = (event) => emit("click", event))
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["component", "data-code-color-scheme"])]),
+				_: 3
+			}, 8, [
+				"label",
+				"class-names",
+				"styles",
+				"data-code-color-scheme"
+			])) : (openBlock(), createBlock(unref(ActionIcon), mergeProps({ key: 1 }, {
+				...unref(ctx).getStyles("control"),
+				...unref(attrs)
+			}, {
+				component: unref(props).component,
+				variant: "none",
+				"data-code-color-scheme": unref(ctx).codeColorScheme,
+				onClick: _cache[1] || (_cache[1] = (event) => emit("click", event))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["component", "data-code-color-scheme"]));
 		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/CopyCodeButton/CopyIcon.ts
-var CopyIcon = defineComponent({
+//#region src/CodeHighlight/CopyCodeButton/CopyIcon.vue
+var CopyIcon_default = /* @__PURE__ */ defineComponent({
 	name: "CopyIcon",
 	inheritAttrs: false,
-	props: { copied: {
-		type: Boolean,
-		required: true
-	} },
-	setup(props, { attrs }) {
-		return () => h("svg", {
-			...attrs,
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: "0 0 24 24",
-			strokeWidth: "2",
-			stroke: "currentColor",
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}, props.copied ? [h("path", {
-			stroke: "none",
-			d: "M0 0h24v24H0z",
-			fill: "none"
-		}), h("path", { d: "M5 12l5 5l10 -10" })] : [
-			h("path", {
+	__name: "CopyIcon",
+	props: { copied: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				"stroke-width": "2",
+				stroke: "currentColor",
+				fill: "none",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}), [__props.copied ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}),
-			h("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }),
-			h("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })
-		]);
+			}, null, -1)), _cache[1] || (_cache[1] = createElementVNode("path", { d: "M5 12l5 5l10 -10" }, null, -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+				_cache[2] || (_cache[2] = createElementVNode("path", {
+					stroke: "none",
+					d: "M0 0h24v24H0z",
+					fill: "none"
+				}, null, -1)),
+				_cache[3] || (_cache[3] = createElementVNode("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }, null, -1)),
+				_cache[4] || (_cache[4] = createElementVNode("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" }, null, -1))
+			], 64))], 16);
+		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/CopyCodeButton/CopyCodeButton.ts
-var CopyCodeButton = defineComponent({
+//#region src/CodeHighlight/CopyCodeButton/CopyCodeButton.vue
+var CopyCodeButton_default = /* @__PURE__ */ defineComponent({
 	name: "CopyCodeButton",
+	__name: "CopyCodeButton",
 	props: {
-		code: {
-			type: String,
-			required: true
-		},
-		copiedLabel: {
-			type: String,
-			default: "Copied"
-		},
-		copyLabel: {
-			type: String,
-			default: "Copy"
-		}
+		code: {},
+		copiedLabel: { default: "Copied" },
+		copyLabel: { default: "Copy" }
 	},
-	setup(props) {
+	setup(__props) {
+		const props = __props;
 		const clipboard = useClipboard();
-		return () => h(CodeHighlightControl, {
-			onClick: () => clipboard.copy(props.code.trim()),
-			variant: "none",
-			tooltipLabel: clipboard.copied.value ? props.copiedLabel : props.copyLabel,
-			"aria-label": clipboard.copied.value ? props.copiedLabel : `${props.copyLabel} code`
-		}, () => h(CopyIcon, { copied: clipboard.copied.value }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CodeHighlightControl_default, {
+				variant: "none",
+				"tooltip-label": unref(clipboard).copied.value ? props.copiedLabel : props.copyLabel,
+				"aria-label": unref(clipboard).copied.value ? props.copiedLabel : `${props.copyLabel} code`,
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(clipboard).copy(props.code.trim()))
+			}, {
+				default: withCtx(() => [createVNode(CopyIcon_default, { copied: unref(clipboard).copied.value }, null, 8, ["copied"])]),
+				_: 1
+			}, 8, ["tooltip-label", "aria-label"]);
+		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/ExpandCodeButton/ExpandIcon.ts
-var ExpandIcon = defineComponent({
+//#region src/CodeHighlight/ExpandCodeButton/ExpandIcon.vue
+var ExpandIcon_default = /* @__PURE__ */ defineComponent({
 	name: "ExpandIcon",
 	inheritAttrs: false,
-	props: { expanded: {
-		type: Boolean,
-		required: true
-	} },
-	setup(props, { attrs }) {
-		return () => h("svg", {
-			...attrs,
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: "0 0 24 24",
-			strokeWidth: "2",
-			stroke: "currentColor",
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}, props.expanded ? [
-			h("path", {
-				stroke: "none",
-				d: "M0 0h24v24H0z",
-				fill: "none"
-			}),
-			h("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
-			h("path", { d: "M9 17l1 0" }),
-			h("path", { d: "M14 17l1 0" }),
-			h("path", { d: "M19 17l1 0" }),
-			h("path", { d: "M4 17l1 0" })
-		] : [
-			h("path", {
+	__name: "ExpandIcon",
+	props: { expanded: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				"stroke-width": "2",
+				stroke: "currentColor",
+				fill: "none",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}), [_cache[2] || (_cache[2] = createElementVNode("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}),
-			h("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
-			h("path", { d: "M9 7l1 0" }),
-			h("path", { d: "M14 7l1 0" }),
-			h("path", { d: "M19 7l1 0" }),
-			h("path", { d: "M4 7l1 0" })
-		]);
+			}, null, -1)), __props.expanded ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createStaticVNode("<path d=\"M12 13v-8l-3 3m6 0l-3 -3\"></path><path d=\"M9 17l1 0\"></path><path d=\"M14 17l1 0\"></path><path d=\"M19 17l1 0\"></path><path d=\"M4 17l1 0\"></path>", 5))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[1] || (_cache[1] = createStaticVNode("<path d=\"M12 11v8l3 -3m-6 0l3 3\"></path><path d=\"M9 7l1 0\"></path><path d=\"M14 7l1 0\"></path><path d=\"M19 7l1 0\"></path><path d=\"M4 7l1 0\"></path>", 5))], 64))], 16);
+		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.ts
-var ExpandCodeButton = defineComponent({
+//#region src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.vue
+var ExpandCodeButton_default = /* @__PURE__ */ defineComponent({
 	name: "ExpandCodeButton",
+	__name: "ExpandCodeButton",
 	props: {
-		expanded: {
-			type: Boolean,
-			required: true
-		},
-		onExpand: {
-			type: Function,
-			required: true
-		},
-		collapseCodeLabel: {
-			type: String,
-			default: "Collapse code"
-		},
-		expandCodeLabel: {
-			type: String,
-			default: "Expand code"
-		}
+		expanded: { type: Boolean },
+		collapseCodeLabel: { default: "Collapse code" },
+		expandCodeLabel: { default: "Expand code" }
 	},
-	setup(props) {
-		return () => h(CodeHighlightControl, {
-			onClick: () => props.onExpand(!props.expanded),
-			tooltipLabel: props.expanded ? props.collapseCodeLabel : props.expandCodeLabel,
-			"aria-label": props.expanded ? props.collapseCodeLabel : props.expandCodeLabel
-		}, () => h(ExpandIcon, { expanded: props.expanded }));
+	emits: ["expand"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CodeHighlightControl_default, {
+				"tooltip-label": props.expanded ? props.collapseCodeLabel : props.expandCodeLabel,
+				"aria-label": props.expanded ? props.collapseCodeLabel : props.expandCodeLabel,
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("expand", !props.expanded))
+			}, {
+				default: withCtx(() => [createVNode(ExpandIcon_default, { expanded: props.expanded }, null, 8, ["expanded"])]),
+				_: 1
+			}, 8, ["tooltip-label", "aria-label"]);
+		};
 	}
 });
-//#endregion
-//#region src/CodeHighlight/CodeHighlight.ts
-var defaultProps = {
-	withCopyButton: true,
-	expandCodeLabel: "Expand code",
-	collapseCodeLabel: "Collapse code"
+var CodeHighlight_module_default = {
+	root: "_root_1avu3_1",
+	codeHighlight: "_codeHighlight_1avu3_5",
+	inlineCodeHighlight: "_inlineCodeHighlight_1avu3_37",
+	pre: "_pre_1avu3_71",
+	code: "_code_1avu3_5",
+	controls: "_controls_1avu3_101",
+	control: "_control_1avu3_101",
+	controlTooltip: "_controlTooltip_1avu3_146",
+	codeWrapper: "_codeWrapper_1avu3_158",
+	lineNumbers: "_lineNumbers_1avu3_165",
+	scrollarea: "_scrollarea_1avu3_182",
+	showCodeButton: "_showCodeButton_1avu3_207",
+	file: "_file_1avu3_234",
+	fileIcon: "_fileIcon_1avu3_305",
+	filesScrollarea: "_filesScrollarea_1avu3_311",
+	files: "_files_1avu3_311"
 };
+//#endregion
+//#region src/CodeHighlight/CodeHighlight.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-with-border", "innerHTML"];
+var _hoisted_2 = ["data-with-border"];
+var _hoisted_3 = ["data-with-offset"];
+var _hoisted_4 = ["data-with-offset"];
+var _hoisted_5 = ["data-with-offset"];
+var _hoisted_6 = ["innerHTML"];
 var varsResolver$1 = createVarsResolver((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
 	"--ch-max-height": rem(maxCollapsedHeight),
 	"--ch-background": background ? getThemeColor(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
 } }));
-function renderHtmlOrText(isHighlighted, highlightedCode, code) {
-	return isHighlighted ? { innerHTML: highlightedCode } : { textContent: code.trim() };
-}
-function cx(...values) {
-	return values.filter(Boolean);
-}
-function resolveColorScheme(value) {
-	if (value !== "auto") return value;
-	return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-var CodeHighlightBase = defineComponent({
+//#endregion
+//#region src/CodeHighlight/CodeHighlight.vue
+var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 	name: "CodeHighlight",
 	inheritAttrs: false,
-	slots: Object,
+	__name: "CodeHighlight",
 	props: {
-		code: {
-			type: String,
-			required: true
-		},
-		language: {
-			type: String,
-			default: void 0
-		},
-		copyLabel: {
-			type: String,
-			default: void 0
+		__withOffset: {
+			type: Boolean,
+			default: false
 		},
-		copiedLabel: {
-			type: String,
-			default: void 0
+		__staticSelector: {},
+		__inline: {
+			type: Boolean,
+			default: false
 		},
+		code: {},
+		language: {},
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean },
+		class: {},
+		style: {},
+		copyLabel: {},
+		copiedLabel: {},
 		defaultExpanded: {
 			type: Boolean,
 			default: void 0
@@ -303,38 +286,19 @@ var CodeHighlightBase = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
-		onExpandedChange: {
-			type: Function,
-			default: void 0
-		},
-		maxCollapsedHeight: {
-			type: [String, Number],
-			default: void 0
-		},
+		maxCollapsedHeight: {},
 		withCopyButton: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		withExpandButton: {
 			type: Boolean,
 			default: false
 		},
-		expandCodeLabel: {
-			type: String,
-			default: void 0
-		},
-		collapseCodeLabel: {
-			type: String,
-			default: void 0
-		},
-		background: {
-			type: String,
-			default: void 0
-		},
-		radius: {
-			type: [String, Number],
-			default: void 0
-		},
+		expandCodeLabel: { default: "Expand code" },
+		collapseCodeLabel: { default: "Collapse code" },
+		background: {},
+		radius: {},
 		withBorder: {
 			type: Boolean,
 			default: false
@@ -343,45 +307,16 @@ var CodeHighlightBase = defineComponent({
 			type: Boolean,
 			default: false
 		},
-		controls: {
-			type: [Array, Function],
-			default: void 0
-		},
-		codeColorScheme: {
-			type: String,
-			default: void 0
-		},
-		__withOffset: {
-			type: Boolean,
-			default: false
-		},
-		__staticSelector: {
-			type: String,
-			default: void 0
-		},
-		__inline: {
-			type: Boolean,
-			default: false
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		controls: {},
+		codeColorScheme: {}
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("CodeHighlight", defaultProps, rawProps);
+	emits: ["update:expanded", "expanded-change"],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const props = useProps("CodeHighlight", null, rawProps);
+		const attrs = useAttrs();
+		const slots = useSlots();
 		const mantine = useMantineContext();
 		const getStyles = useStyles({
 			name: props.__staticSelector || "CodeHighlight",
@@ -400,147 +335,161 @@ var CodeHighlightBase = defineComponent({
 			value: () => props.expanded,
 			defaultValue: props.defaultExpanded,
 			finalValue: true,
-			onChange: (value) => props.onExpandedChange?.(value)
+			onChange: (value) => {
+				emit("update:expanded", value);
+				emit("expanded-change", value);
+			}
 		});
 		const highlight = useHighlight();
+		function resolveColorScheme(value) {
+			if (value !== "auto") return value;
+			return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+		const highlighted = computed(() => highlight({
+			code: props.code.trim(),
+			language: props.language,
+			colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
+		}));
+		const renderedControls = computed(() => {
+			const value = props.controls !== void 0 ? typeof props.controls === "function" ? props.controls() : props.controls : slots.controls?.();
+			return Array.isArray(value) ? value : value ? [value] : [];
+		});
+		const shouldDisplayControls = computed(() => renderedControls.value.length > 0 || props.withExpandButton || props.withCopyButton);
+		const lineNumbers = computed(() => props.code.trim().split("\n").map((_, index) => index + 1));
+		const renderControls = () => renderedControls.value;
 		provideCodeHighlightContext({
 			getStyles,
 			get codeColorScheme() {
 				return props.codeColorScheme;
 			}
 		});
-		return () => {
-			const colorScheme = resolveColorScheme(mantine.colorScheme.value);
-			const highlightedCode = highlight({
-				code: props.code.trim(),
-				language: props.language,
-				colorScheme: props.codeColorScheme ?? colorScheme
-			});
-			const codeContent = renderHtmlOrText(highlightedCode.isHighlighted, highlightedCode.highlightedCode, props.code);
-			if (props.__inline) return h(Box, {
-				component: "code",
-				...attrs,
-				...highlightedCode.codeElementProps,
-				...getStyles("codeHighlight", {
-					className: cx(highlightedCode.codeElementProps?.class, attrs.class),
-					style: [highlightedCode.codeElementProps?.style, attrs.style]
-				}),
-				"data-with-border": props.withBorder || void 0,
-				...codeContent
-			});
-			const renderedControls = props.controls !== void 0 ? typeof props.controls === "function" ? props.controls() : props.controls : slots.controls?.();
-			const controlsArray = Array.isArray(renderedControls) ? renderedControls : renderedControls ? [renderedControls] : [];
-			const shouldDisplayControls = controlsArray.length > 0 || props.withExpandButton || props.withCopyButton;
-			return h(Box, {
-				...attrs,
-				...getStyles("codeHighlight"),
+		return (_ctx, _cache) => {
+			return unref(props).__inline && highlighted.value.isHighlighted ? (openBlock(), createElementBlock("code", mergeProps({ key: 0 }, {
+				...unref(attrs),
+				...highlighted.value.codeElementProps,
+				...unref(getStyles)("codeHighlight", {
+					className: [highlighted.value.codeElementProps?.class, unref(attrs).class],
+					style: [highlighted.value.codeElementProps?.style, unref(attrs).style]
+				})
+			}, {
+				"data-with-border": unref(props).withBorder || void 0,
+				innerHTML: highlighted.value.highlightedCode
+			}), null, 16, _hoisted_1)) : unref(props).__inline ? (openBlock(), createElementBlock("code", mergeProps({ key: 1 }, {
+				...unref(attrs),
+				...highlighted.value.codeElementProps,
+				...unref(getStyles)("codeHighlight", {
+					className: [highlighted.value.codeElementProps?.class, unref(attrs).class],
+					style: [highlighted.value.codeElementProps?.style, unref(attrs).style]
+				})
+			}, { "data-with-border": unref(props).withBorder || void 0 }), toDisplayString(unref(props).code.trim()), 17, _hoisted_2)) : (openBlock(), createBlock(unref(Box), mergeProps({ key: 2 }, {
+				...unref(attrs),
+				...unref(getStyles)("codeHighlight")
+			}, {
 				dir: "ltr",
-				"data-code-color-scheme": props.codeColorScheme,
-				"data-with-border": props.withBorder || void 0
-			}, () => [
-				shouldDisplayControls ? h("div", {
-					...getStyles("controls"),
-					"data-with-offset": props.__withOffset || void 0
-				}, [
-					...controlsArray,
-					props.withExpandButton ? h(ExpandCodeButton, {
-						expanded: expanded.value,
-						onExpand: setExpanded,
-						expandCodeLabel: props.expandCodeLabel,
-						collapseCodeLabel: props.collapseCodeLabel
-					}) : null,
-					props.withCopyButton ? h(CopyCodeButton, {
-						code: props.code,
-						copiedLabel: props.copiedLabel,
-						copyLabel: props.copyLabel
-					}) : null
-				]) : null,
-				h(ScrollArea, {
-					type: "hover",
-					scrollbarSize: 4,
-					dir: "ltr",
-					offsetScrollbars: false,
-					"data-collapsed": !expanded.value || void 0,
-					styles: { viewport: { overscrollBehaviorInline: "none" } },
-					...getStyles("scrollarea")
-				}, () => h("div", getStyles("codeWrapper"), [props.withLineNumbers ? h("div", {
-					...getStyles("lineNumbers"),
-					"data-with-offset": props.__withOffset || void 0
-				}, props.code.trim().split("\n").map((_, index) => h("div", { key: index }, index + 1))) : null, h("pre", {
-					...getStyles("pre"),
-					"data-with-offset": props.__withOffset || void 0
-				}, h("code", {
-					...highlightedCode.codeElementProps,
-					...getStyles("code", {
-						className: highlightedCode.codeElementProps?.class,
-						style: highlightedCode.codeElementProps?.style
-					}),
-					...codeContent
-				}))])),
-				h(UnstyledButton, {
-					...getStyles("showCodeButton"),
-					mod: { hidden: expanded.value },
-					onClick: () => setExpanded(true),
-					"data-code-color-scheme": props.codeColorScheme
-				}, () => props.expandCodeLabel)
-			]);
+				"data-code-color-scheme": unref(props).codeColorScheme,
+				"data-with-border": unref(props).withBorder || void 0
+			}), {
+				default: withCtx(() => [
+					shouldDisplayControls.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, unref(getStyles)("controls"), { "data-with-offset": unref(props).__withOffset || void 0 }), [
+						(openBlock(), createBlock(resolveDynamicComponent(renderControls))),
+						unref(props).withExpandButton ? (openBlock(), createBlock(ExpandCodeButton_default, {
+							key: 0,
+							expanded: unref(expanded),
+							"expand-code-label": unref(props).expandCodeLabel,
+							"collapse-code-label": unref(props).collapseCodeLabel,
+							onExpand: unref(setExpanded)
+						}, null, 8, [
+							"expanded",
+							"expand-code-label",
+							"collapse-code-label",
+							"onExpand"
+						])) : createCommentVNode("", true),
+						unref(props).withCopyButton ? (openBlock(), createBlock(CopyCodeButton_default, {
+							key: 1,
+							code: unref(props).code,
+							"copied-label": unref(props).copiedLabel,
+							"copy-label": unref(props).copyLabel
+						}, null, 8, [
+							"code",
+							"copied-label",
+							"copy-label"
+						])) : createCommentVNode("", true)
+					], 16, _hoisted_3)) : createCommentVNode("", true),
+					createVNode(unref(ScrollArea), mergeProps({
+						type: "hover",
+						"scrollbar-size": 4,
+						dir: "ltr",
+						"offset-scrollbars": false,
+						"data-collapsed": !unref(expanded) || void 0,
+						styles: { viewport: { overscrollBehaviorInline: "none" } }
+					}, unref(getStyles)("scrollarea")), {
+						default: withCtx(() => [createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("codeWrapper"))), [unref(props).withLineNumbers ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, unref(getStyles)("lineNumbers"), { "data-with-offset": unref(props).__withOffset || void 0 }), [(openBlock(true), createElementBlock(Fragment, null, renderList(lineNumbers.value, (line) => {
+							return openBlock(), createElementBlock("div", { key: line }, toDisplayString(line), 1);
+						}), 128))], 16, _hoisted_4)) : createCommentVNode("", true), createElementVNode("pre", mergeProps(unref(getStyles)("pre"), { "data-with-offset": unref(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? (openBlock(), createElementBlock("code", mergeProps({ key: 0 }, {
+							...highlighted.value.codeElementProps,
+							...unref(getStyles)("code", {
+								className: highlighted.value.codeElementProps?.class,
+								style: highlighted.value.codeElementProps?.style
+							})
+						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6)) : (openBlock(), createElementBlock("code", normalizeProps(mergeProps({ key: 1 }, {
+							...highlighted.value.codeElementProps,
+							...unref(getStyles)("code", {
+								className: highlighted.value.codeElementProps?.class,
+								style: highlighted.value.codeElementProps?.style
+							})
+						})), toDisplayString(unref(props).code.trim()), 17))], 16, _hoisted_5)], 16)]),
+						_: 1
+					}, 16, ["data-collapsed"]),
+					createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("showCodeButton"), {
+						mod: { hidden: unref(expanded) },
+						"data-code-color-scheme": unref(props).codeColorScheme,
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(setExpanded)(true))
+					}), {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(props).expandCodeLabel), 1)]),
+						_: 1
+					}, 16, ["mod", "data-code-color-scheme"])
+				]),
+				_: 1
+			}, 16, ["data-code-color-scheme", "data-with-border"]));
 		};
 	}
 });
-var CodeHighlight = Object.assign(CodeHighlightBase, {
+//#endregion
+//#region src/CodeHighlight/CodeHighlight.ts
+var CodeHighlight = Object.assign(CodeHighlight_default, {
 	classes: CodeHighlight_module_default,
 	varsResolver: varsResolver$1,
-	Control: CodeHighlightControl
+	Control: CodeHighlightControl_default
 });
 //#endregion
-//#region src/CodeHighlight/InlineCodeHighlight.ts
+//#region src/CodeHighlight/InlineCodeHighlight.vue?vue&type=script&setup=true&lang.ts
 var varsResolver = createVarsResolver((theme, { background, radius }) => ({ inlineCodeHighlight: {
 	"--ch-background": background ? getThemeColor(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
 } }));
-var InlineCodeHighlight = defineComponent({
+//#endregion
+//#region src/CodeHighlight/InlineCodeHighlight.ts
+var InlineCodeHighlight = Object.assign(/* @__PURE__ */ defineComponent({
 	name: "InlineCodeHighlight",
 	inheritAttrs: false,
+	__name: "InlineCodeHighlight",
 	props: {
-		code: {
-			type: String,
-			required: true
-		},
-		language: {
-			type: String,
-			default: void 0
-		},
-		background: {
-			type: String,
-			default: void 0
-		},
-		radius: {
-			type: [String, Number],
-			default: void 0
-		},
+		code: {},
+		language: {},
+		background: {},
+		radius: {},
 		withBorder: {
 			type: Boolean,
 			default: false
 		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("InlineCodeHighlight", null, rawProps);
+	setup(__props) {
+		const props = useProps("InlineCodeHighlight", null, __props);
+		const attrs = useAttrs();
 		const getStyles = useStyles({
 			name: "InlineCodeHighlight",
 			classes: CodeHighlight_module_default,
@@ -554,81 +503,68 @@ var InlineCodeHighlight = defineComponent({
 			varsResolver,
 			rootSelector: "inlineCodeHighlight"
 		});
-		return () => h(CodeHighlight, {
-			...attrs,
-			...props,
-			...getStyles("inlineCodeHighlight"),
-			__inline: true
-		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CodeHighlight_default, mergeProps({
+				...unref(attrs),
+				...unref(props),
+				...unref(getStyles)("inlineCodeHighlight")
+			}, { __inline: "" }), null, 16);
+		};
 	}
-});
-Object.assign(InlineCodeHighlight, {
+}), {
 	classes: CodeHighlight_module_default,
 	varsResolver
 });
 //#endregion
-//#region src/CodeHighlightTabs/FileIcon.ts
-var FileIcon = defineComponent({
+//#region src/CodeHighlightTabs/FileIcon.vue
+var FileIcon_default = /* @__PURE__ */ defineComponent({
 	name: "FileIcon",
 	inheritAttrs: false,
-	slots: Object,
+	__name: "FileIcon",
 	props: {
-		fileName: {
-			type: String,
-			default: void 0
-		},
-		getFileIcon: {
-			type: Function,
-			default: void 0
-		},
-		fileIcon: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function,
-				Array
-			],
-			default: void 0
-		}
+		fileName: {},
+		getFileIcon: { type: Function },
+		fileIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
 	},
-	setup(props, { attrs, slots }) {
-		return () => {
-			if (props.fileIcon) return h("span", attrs, props.fileIcon);
-			if (props.getFileIcon && props.fileName) return h("span", attrs, props.getFileIcon(props.fileName));
-			if (slots.fileIcon) return h("span", attrs, slots.fileIcon());
-			if (slots.getFileIcon && props.fileName) return h("span", attrs, slots.getFileIcon({ fileName: props.fileName }));
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const renderIcon = () => {
+			if (props.fileIcon) return props.fileIcon;
+			if (props.getFileIcon && props.fileName) return props.getFileIcon(props.fileName);
+			if (slots.fileIcon) return slots.fileIcon();
+			if (slots.getFileIcon && props.fileName) return slots.getFileIcon({ fileName: props.fileName });
 			return null;
 		};
+		return (_ctx, _cache) => {
+			return renderIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), [(openBlock(), createBlock(resolveDynamicComponent(renderIcon)))], 16)) : createCommentVNode("", true);
+		};
 	}
 });
 //#endregion
 //#region src/CodeHighlightTabs/CodeHighlightTabs.ts
-var CodeHighlightTabs = defineComponent({
+var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 	name: "CodeHighlightTabs",
 	inheritAttrs: false,
-	slots: Object,
+	__name: "CodeHighlightTabs",
 	props: {
-		code: {
-			type: Array,
-			required: true
-		},
-		getFileIcon: {
-			type: Function,
-			default: void 0
-		},
-		defaultActiveTab: {
-			type: Number,
-			default: void 0
-		},
-		activeTab: {
-			type: Number,
-			default: void 0
-		},
-		onTabChange: {
-			type: Function,
-			default: void 0
-		},
+		code: {},
+		getFileIcon: {},
+		defaultActiveTab: {},
+		activeTab: {},
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean },
+		copyLabel: {},
+		copiedLabel: {},
 		defaultExpanded: {
 			type: Boolean,
 			default: void 0
@@ -637,81 +573,39 @@ var CodeHighlightTabs = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
-		onExpandedChange: {
-			type: Function,
-			default: void 0
-		},
-		withCopyButton: {
-			type: Boolean,
-			default: void 0
-		},
+		maxCollapsedHeight: {},
+		withCopyButton: { type: Boolean },
 		withExpandButton: {
 			type: Boolean,
 			default: false
 		},
+		expandCodeLabel: {},
+		collapseCodeLabel: {},
+		background: {},
+		radius: {},
 		withBorder: {
 			type: Boolean,
 			default: false
 		},
-		radius: {
-			type: [String, Number],
-			default: void 0
-		},
-		maxCollapsedHeight: {
-			type: [String, Number],
-			default: void 0
-		},
-		copyLabel: {
-			type: String,
-			default: void 0
-		},
-		copiedLabel: {
-			type: String,
-			default: void 0
-		},
-		expandCodeLabel: {
-			type: String,
-			default: void 0
-		},
-		collapseCodeLabel: {
-			type: String,
-			default: void 0
-		},
-		background: {
-			type: String,
-			default: void 0
-		},
-		controls: {
-			type: [Array, Function],
-			default: void 0
-		},
-		codeColorScheme: {
-			type: String,
-			default: void 0
-		},
 		withLineNumbers: {
 			type: Boolean,
 			default: false
 		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		controls: {},
+		codeColorScheme: {}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: [
+		"update:activeTab",
+		"tab-change",
+		"update:expanded",
+		"expanded-change"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
 		const props = useProps("CodeHighlightTabs", null, rawProps);
+		const attrs = useAttrs();
+		const slots = useSlots();
 		const getStyles = useStyles({
 			name: "CodeHighlightTabs",
 			classes: CodeHighlight_module_default,
@@ -727,73 +621,114 @@ var CodeHighlightTabs = defineComponent({
 			defaultValue: props.defaultActiveTab,
 			value: () => props.activeTab,
 			finalValue: 0,
-			onChange: (tab) => props.onTabChange?.(tab)
+			onChange: (tab) => {
+				emit("update:activeTab", tab);
+				emit("tab-change", tab);
+			}
 		});
 		const [expanded, setExpanded] = useUncontrolled({
 			defaultValue: props.defaultExpanded,
 			value: () => props.expanded,
 			finalValue: true,
-			onChange: (next) => props.onExpandedChange?.(next)
+			onChange: (next) => {
+				emit("update:expanded", next);
+				emit("expanded-change", next);
+			}
 		});
-		watch(() => [value.value, props.code.length], ([currentValue, length]) => {
-			if (currentValue >= length) setValue(length - 1);
+		watch(() => [value.value, props.code.length], ([current, length]) => {
+			if (current >= length) setValue(length - 1);
 		}, { immediate: true });
-		return () => {
-			if (props.code.length <= 0) return null;
-			const currentCode = props.code[value.value] || {
-				code: "",
-				language: "tsx",
-				fileName: ""
-			};
-			const getFileIcon = props.getFileIcon ?? (slots.getFileIcon ? (fileName) => slots.getFileIcon?.({ fileName }) : void 0);
-			const files = props.code.map((node, index) => h(UnstyledButton, {
-				...getStyles("file"),
-				key: node.fileName ?? index,
-				mod: { active: index === value.value },
-				onClick: () => setValue(index),
-				"data-color-scheme": props.codeColorScheme
-			}, () => [h(FileIcon, {
-				fileIcon: node.icon,
-				getFileIcon,
-				fileName: node.fileName,
-				key: "file-icon",
-				...getStyles("fileIcon")
-			}), h("span", { key: "file-name" }, node.fileName)]));
-			return h(Box, {
-				...attrs,
-				...getStyles("root")
-			}, () => [h(ScrollArea, {
-				type: "never",
-				dir: "ltr",
-				offsetScrollbars: false,
-				...getStyles("filesScrollarea")
-			}, () => h("div", getStyles("files"), files)), h(CodeHighlight, {
-				code: currentCode.code,
-				language: currentCode.language,
-				expanded: expanded.value,
-				onExpandedChange: setExpanded,
-				withCopyButton: props.withCopyButton,
-				withExpandButton: props.withExpandButton,
-				withBorder: props.withBorder,
-				radius: props.radius,
-				maxCollapsedHeight: props.maxCollapsedHeight,
-				copiedLabel: props.copiedLabel,
-				copyLabel: props.copyLabel,
-				expandCodeLabel: props.expandCodeLabel,
-				collapseCodeLabel: props.collapseCodeLabel,
-				background: props.background,
-				controls: props.controls,
-				codeColorScheme: props.codeColorScheme,
-				withLineNumbers: props.withLineNumbers,
-				__withOffset: true,
-				__staticSelector: "CodeHighlightTabs",
-				classNames: props.classNames,
-				styles: props.styles
-			}, { controls: slots.controls })]);
+		const currentCode = computed(() => props.code[value.value] || {
+			code: "",
+			language: "tsx",
+			fileName: ""
+		});
+		const fileIconResolver = computed(() => props.getFileIcon ?? (slots.getFileIcon ? (fileName) => slots.getFileIcon?.({ fileName }) : void 0));
+		return (_ctx, _cache) => {
+			return unref(props).code.length ? (openBlock(), createBlock(unref(Box), normalizeProps(mergeProps({ key: 0 }, {
+				...unref(attrs),
+				...unref(getStyles)("root")
+			})), {
+				default: withCtx(() => [createVNode(unref(ScrollArea), mergeProps({
+					type: "never",
+					dir: "ltr",
+					"offset-scrollbars": false
+				}, unref(getStyles)("filesScrollarea")), {
+					default: withCtx(() => [createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("files"))), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(props).code, (node, index) => {
+						return openBlock(), createBlock(unref(UnstyledButton), mergeProps({ key: node.fileName ?? index }, { ref_for: true }, unref(getStyles)("file"), {
+							mod: { active: index === unref(value) },
+							"data-color-scheme": unref(props).codeColorScheme,
+							onClick: ($event) => unref(setValue)(index)
+						}), {
+							default: withCtx(() => [createVNode(FileIcon_default, mergeProps({
+								"file-icon": node.icon,
+								"get-file-icon": fileIconResolver.value,
+								"file-name": node.fileName
+							}, { ref_for: true }, unref(getStyles)("fileIcon")), null, 16, [
+								"file-icon",
+								"get-file-icon",
+								"file-name"
+							]), createElementVNode("span", null, toDisplayString(node.fileName), 1)]),
+							_: 2
+						}, 1040, [
+							"mod",
+							"data-color-scheme",
+							"onClick"
+						]);
+					}), 128))], 16)]),
+					_: 1
+				}, 16), createVNode(CodeHighlight_default, {
+					code: currentCode.value.code,
+					language: currentCode.value.language,
+					expanded: unref(expanded),
+					"with-copy-button": unref(props).withCopyButton,
+					"with-expand-button": unref(props).withExpandButton,
+					"with-border": unref(props).withBorder,
+					radius: unref(props).radius,
+					"max-collapsed-height": unref(props).maxCollapsedHeight,
+					"copied-label": unref(props).copiedLabel,
+					"copy-label": unref(props).copyLabel,
+					"expand-code-label": unref(props).expandCodeLabel,
+					"collapse-code-label": unref(props).collapseCodeLabel,
+					background: unref(props).background,
+					controls: unref(props).controls,
+					"code-color-scheme": unref(props).codeColorScheme,
+					"with-line-numbers": unref(props).withLineNumbers,
+					"__with-offset": "",
+					"__static-selector": "CodeHighlightTabs",
+					onExpandedChange: unref(setExpanded),
+					"class-names": unref(props).classNames,
+					styles: unref(props).styles
+				}, createSlots({ _: 2 }, [_ctx.$slots.controls ? {
+					name: "controls",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "controls")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"code",
+					"language",
+					"expanded",
+					"with-copy-button",
+					"with-expand-button",
+					"with-border",
+					"radius",
+					"max-collapsed-height",
+					"copied-label",
+					"copy-label",
+					"expand-code-label",
+					"collapse-code-label",
+					"background",
+					"controls",
+					"code-color-scheme",
+					"with-line-numbers",
+					"onExpandedChange",
+					"class-names",
+					"styles"
+				])]),
+				_: 3
+			}, 16)) : createCommentVNode("", true);
 		};
 	}
-});
-Object.assign(CodeHighlightTabs, { classes: CodeHighlight_module_default });
+}), { classes: CodeHighlight_module_default });
 //#endregion
 //#region src/CodeHighlightProvider/adapters/highlight-js-adapter.ts
 function createHighlightJsAdapter(hljs) {
@@ -1975,6 +1910,6 @@ var createShikiAdapter = (loadShiki, { forceColorScheme } = {}) => ({
 	}
 });
 //#endregion
-export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, createHighlightJsAdapter, createShikiAdapter, plainTextAdapter, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight };
+export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl_default as CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, createHighlightJsAdapter, createShikiAdapter, plainTextAdapter, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight };
 
 //# sourceMappingURL=index.mjs.map