@mantine-vue/code-highlight 3.0.0 → 3.2.0

package/cjs/index.cjs

@@ -1,301 +1,284 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
 let _mantine_vue_core = require("@mantine-vue/core");
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
-let vue = require("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) {
-	(0, vue.provide)(CodeHighlightContext, value);
-}
-function useHighlight() {
-	return (0, vue.inject)(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
-}
-var CodeHighlightAdapterProvider = (0, vue.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__ */ (0, vue.defineComponent)({
 	name: "CodeHighlightAdapterProvider",
-	props: { adapter: {
-		type: Object,
-		required: true
-	} },
-	setup(props, { slots }) {
+	__name: "CodeHighlightAdapterProvider",
+	props: { adapter: {} },
+	setup(__props) {
+		const props = __props;
 		const context = (0, vue.ref)(null);
 		const highlight = (0, vue.computed)(() => props.adapter.getHighlighter(context.value));
-		(0, vue.onMounted)(() => {
-			props.adapter.loadContext?.().then((value) => {
-				context.value = value;
-			});
-		});
+		(0, vue.onMounted)(() => props.adapter.loadContext?.().then((value) => {
+			context.value = value;
+		}));
 		provideCodeHighlightAdapterContext({
 			adapter: props.adapter,
 			get highlight() {
 				return highlight.value;
 			}
 		});
-		return () => (0, vue.h)("div", { style: { display: "contents" } }, slots.default?.());
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.renderSlot)(_ctx.$slots, "default")]);
+		};
 	}
 });
 //#endregion
+//#region src/CodeHighlightProvider/CodeHighlightProvider.ts
+var CodeHighlightContext = Symbol("CodeHighlightContext");
+function provideCodeHighlightAdapterContext(value) {
+	(0, vue.provide)(CodeHighlightContext, value);
+}
+function useHighlight() {
+	return (0, vue.inject)(CodeHighlightContext, null)?.highlight || plainTextAdapter.getHighlighter(null);
+}
+var CodeHighlightAdapterProvider = CodeHighlightAdapterProvider_default;
+//#endregion
 //#region src/CodeHighlight/CodeHighlight.context.ts
 var [provideCodeHighlightContext, useCodeHighlightContext] = (0, _mantine_vue_core.createSafeContext)("CodeHighlightProvider was not found in the component tree");
 //#endregion
-//#region src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.ts
-var CodeHighlightControl = (0, vue.defineComponent)({
+//#region src/CodeHighlight/CodeHighlightControl/CodeHighlightControl.vue
+var CodeHighlightControl_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.useProps)("CodeHighlightControl", null, rawProps);
+		const attrs = (0, vue.useAttrs)();
 		const ctx = useCodeHighlightContext();
-		return () => {
-			const tooltipStyles = ctx.getStyles("controlTooltip");
-			const control = (0, vue.h)(_mantine_vue_core.ActionIcon, {
-				...ctx.getStyles("control"),
-				...attrs,
-				component: props.component,
-				variant: "none",
-				"data-code-color-scheme": ctx.codeColorScheme,
-				onClick: props.onClick
-			}, slots);
-			return props.tooltipLabel ? (0, vue.h)(_mantine_vue_core.Tooltip, {
-				label: props.tooltipLabel,
+		const tooltipStyles = (0, vue.computed)(() => ctx.getStyles("controlTooltip"));
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(props).tooltipLabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Tooltip), {
+				key: 0,
+				label: (0, vue.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": (0, vue.unref)(ctx).codeColorScheme,
+				"transition-props": { duration: 0 }
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ActionIcon), (0, vue.mergeProps)({
+					...(0, vue.unref)(ctx).getStyles("control"),
+					...(0, vue.unref)(attrs)
+				}, {
+					component: (0, vue.unref)(props).component,
+					variant: "none",
+					"data-code-color-scheme": (0, vue.unref)(ctx).codeColorScheme,
+					onClick: _cache[0] || (_cache[0] = (event) => emit("click", event))
+				}), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["component", "data-code-color-scheme"])]),
+				_: 3
+			}, 8, [
+				"label",
+				"class-names",
+				"styles",
+				"data-code-color-scheme"
+			])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.ActionIcon), (0, vue.mergeProps)({ key: 1 }, {
+				...(0, vue.unref)(ctx).getStyles("control"),
+				...(0, vue.unref)(attrs)
+			}, {
+				component: (0, vue.unref)(props).component,
+				variant: "none",
+				"data-code-color-scheme": (0, vue.unref)(ctx).codeColorScheme,
+				onClick: _cache[1] || (_cache[1] = (event) => emit("click", event))
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["component", "data-code-color-scheme"]));
 		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/CopyCodeButton/CopyIcon.ts
-var CopyIcon = (0, vue.defineComponent)({
+//#region src/CodeHighlight/CopyCodeButton/CopyIcon.vue
+var CopyIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "CopyIcon",
 	inheritAttrs: false,
-	props: { copied: {
-		type: Boolean,
-		required: true
-	} },
-	setup(props, { attrs }) {
-		return () => (0, vue.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 ? [(0, vue.h)("path", {
-			stroke: "none",
-			d: "M0 0h24v24H0z",
-			fill: "none"
-		}), (0, vue.h)("path", { d: "M5 12l5 5l10 -10" })] : [
-			(0, vue.h)("path", {
+	__name: "CopyIcon",
+	props: { copied: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}),
-			(0, vue.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" }),
-			(0, vue.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] = (0, vue.createElementVNode)("path", { d: "M5 12l5 5l10 -10" }, null, -1))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+				_cache[2] || (_cache[2] = (0, vue.createElementVNode)("path", {
+					stroke: "none",
+					d: "M0 0h24v24H0z",
+					fill: "none"
+				}, null, -1)),
+				_cache[3] || (_cache[3] = (0, vue.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] = (0, vue.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 = (0, vue.defineComponent)({
+//#region src/CodeHighlight/CopyCodeButton/CopyCodeButton.vue
+var CopyCodeButton_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_hooks.useClipboard)();
-		return () => (0, vue.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`
-		}, () => (0, vue.h)(CopyIcon, { copied: clipboard.copied.value }));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(CodeHighlightControl_default, {
+				variant: "none",
+				"tooltip-label": (0, vue.unref)(clipboard).copied.value ? props.copiedLabel : props.copyLabel,
+				"aria-label": (0, vue.unref)(clipboard).copied.value ? props.copiedLabel : `${props.copyLabel} code`,
+				onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(clipboard).copy(props.code.trim()))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(CopyIcon_default, { copied: (0, vue.unref)(clipboard).copied.value }, null, 8, ["copied"])]),
+				_: 1
+			}, 8, ["tooltip-label", "aria-label"]);
+		};
 	}
 });
 //#endregion
-//#region src/CodeHighlight/ExpandCodeButton/ExpandIcon.ts
-var ExpandIcon = (0, vue.defineComponent)({
+//#region src/CodeHighlight/ExpandCodeButton/ExpandIcon.vue
+var ExpandIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ExpandIcon",
 	inheritAttrs: false,
-	props: { expanded: {
-		type: Boolean,
-		required: true
-	} },
-	setup(props, { attrs }) {
-		return () => (0, vue.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 ? [
-			(0, vue.h)("path", {
-				stroke: "none",
-				d: "M0 0h24v24H0z",
-				fill: "none"
-			}),
-			(0, vue.h)("path", { d: "M12 13v-8l-3 3m6 0l-3 -3" }),
-			(0, vue.h)("path", { d: "M9 17l1 0" }),
-			(0, vue.h)("path", { d: "M14 17l1 0" }),
-			(0, vue.h)("path", { d: "M19 17l1 0" }),
-			(0, vue.h)("path", { d: "M4 17l1 0" })
-		] : [
-			(0, vue.h)("path", {
+	__name: "ExpandIcon",
+	props: { expanded: { type: Boolean } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", (0, vue.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] = (0, vue.createElementVNode)("path", {
 				stroke: "none",
 				d: "M0 0h24v24H0z",
 				fill: "none"
-			}),
-			(0, vue.h)("path", { d: "M12 11v8l3 -3m-6 0l3 3" }),
-			(0, vue.h)("path", { d: "M9 7l1 0" }),
-			(0, vue.h)("path", { d: "M14 7l1 0" }),
-			(0, vue.h)("path", { d: "M19 7l1 0" }),
-			(0, vue.h)("path", { d: "M4 7l1 0" })
-		]);
+			}, null, -1)), __props.expanded ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[0] || (_cache[0] = (0, vue.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)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [_cache[1] || (_cache[1] = (0, vue.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 = (0, vue.defineComponent)({
+//#region src/CodeHighlight/ExpandCodeButton/ExpandCodeButton.vue
+var ExpandCodeButton_default = /* @__PURE__ */ (0, vue.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 () => (0, vue.h)(CodeHighlightControl, {
-			onClick: () => props.onExpand(!props.expanded),
-			tooltipLabel: props.expanded ? props.collapseCodeLabel : props.expandCodeLabel,
-			"aria-label": props.expanded ? props.collapseCodeLabel : props.expandCodeLabel
-		}, () => (0, vue.h)(ExpandIcon, { expanded: props.expanded }));
+	emits: ["expand"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.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: (0, vue.withCtx)(() => [(0, vue.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 = (0, _mantine_vue_core.createVarsResolver)((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
 	"--ch-max-height": (0, _mantine_vue_core.rem)(maxCollapsedHeight),
 	"--ch-background": background ? (0, _mantine_vue_core.getThemeColor)(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? (0, _mantine_vue_core.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 = (0, vue.defineComponent)({
+//#endregion
+//#region src/CodeHighlight/CodeHighlight.vue
+var CodeHighlight_default = /* @__PURE__ */ (0, vue.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
@@ -304,38 +287,19 @@ var CodeHighlightBase = (0, vue.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
@@ -344,45 +308,16 @@ var CodeHighlightBase = (0, vue.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 = (0, _mantine_vue_core.useProps)("CodeHighlight", defaultProps, rawProps);
+	emits: ["update:expanded", "expanded-change"],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const props = (0, _mantine_vue_core.useProps)("CodeHighlight", null, rawProps);
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
 		const mantine = (0, _mantine_vue_core.useMantineContext)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: props.__staticSelector || "CodeHighlight",
@@ -401,147 +336,161 @@ var CodeHighlightBase = (0, vue.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 = (0, vue.computed)(() => highlight({
+			code: props.code.trim(),
+			language: props.language,
+			colorScheme: props.codeColorScheme ?? resolveColorScheme(mantine.colorScheme.value)
+		}));
+		const renderedControls = (0, vue.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 = (0, vue.computed)(() => renderedControls.value.length > 0 || props.withExpandButton || props.withCopyButton);
+		const lineNumbers = (0, vue.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 (0, vue.h)(_mantine_vue_core.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 (0, vue.h)(_mantine_vue_core.Box, {
-				...attrs,
-				...getStyles("codeHighlight"),
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(props).__inline && highlighted.value.isHighlighted ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 0 }, {
+				...(0, vue.unref)(attrs),
+				...highlighted.value.codeElementProps,
+				...(0, vue.unref)(getStyles)("codeHighlight", {
+					className: [highlighted.value.codeElementProps?.class, (0, vue.unref)(attrs).class],
+					style: [highlighted.value.codeElementProps?.style, (0, vue.unref)(attrs).style]
+				})
+			}, {
+				"data-with-border": (0, vue.unref)(props).withBorder || void 0,
+				innerHTML: highlighted.value.highlightedCode
+			}), null, 16, _hoisted_1)) : (0, vue.unref)(props).__inline ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 1 }, {
+				...(0, vue.unref)(attrs),
+				...highlighted.value.codeElementProps,
+				...(0, vue.unref)(getStyles)("codeHighlight", {
+					className: [highlighted.value.codeElementProps?.class, (0, vue.unref)(attrs).class],
+					style: [highlighted.value.codeElementProps?.style, (0, vue.unref)(attrs).style]
+				})
+			}, { "data-with-border": (0, vue.unref)(props).withBorder || void 0 }), (0, vue.toDisplayString)((0, vue.unref)(props).code.trim()), 17, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: 2 }, {
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(getStyles)("codeHighlight")
+			}, {
 				dir: "ltr",
-				"data-code-color-scheme": props.codeColorScheme,
-				"data-with-border": props.withBorder || void 0
-			}, () => [
-				shouldDisplayControls ? (0, vue.h)("div", {
-					...getStyles("controls"),
-					"data-with-offset": props.__withOffset || void 0
-				}, [
-					...controlsArray,
-					props.withExpandButton ? (0, vue.h)(ExpandCodeButton, {
-						expanded: expanded.value,
-						onExpand: setExpanded,
-						expandCodeLabel: props.expandCodeLabel,
-						collapseCodeLabel: props.collapseCodeLabel
-					}) : null,
-					props.withCopyButton ? (0, vue.h)(CopyCodeButton, {
-						code: props.code,
-						copiedLabel: props.copiedLabel,
-						copyLabel: props.copyLabel
-					}) : null
-				]) : null,
-				(0, vue.h)(_mantine_vue_core.ScrollArea, {
-					type: "hover",
-					scrollbarSize: 4,
-					dir: "ltr",
-					offsetScrollbars: false,
-					"data-collapsed": !expanded.value || void 0,
-					styles: { viewport: { overscrollBehaviorInline: "none" } },
-					...getStyles("scrollarea")
-				}, () => (0, vue.h)("div", getStyles("codeWrapper"), [props.withLineNumbers ? (0, vue.h)("div", {
-					...getStyles("lineNumbers"),
-					"data-with-offset": props.__withOffset || void 0
-				}, props.code.trim().split("\n").map((_, index) => (0, vue.h)("div", { key: index }, index + 1))) : null, (0, vue.h)("pre", {
-					...getStyles("pre"),
-					"data-with-offset": props.__withOffset || void 0
-				}, (0, vue.h)("code", {
-					...highlightedCode.codeElementProps,
-					...getStyles("code", {
-						className: highlightedCode.codeElementProps?.class,
-						style: highlightedCode.codeElementProps?.style
-					}),
-					...codeContent
-				}))])),
-				(0, vue.h)(_mantine_vue_core.UnstyledButton, {
-					...getStyles("showCodeButton"),
-					mod: { hidden: expanded.value },
-					onClick: () => setExpanded(true),
-					"data-code-color-scheme": props.codeColorScheme
-				}, () => props.expandCodeLabel)
-			]);
+				"data-code-color-scheme": (0, vue.unref)(props).codeColorScheme,
+				"data-with-border": (0, vue.unref)(props).withBorder || void 0
+			}), {
+				default: (0, vue.withCtx)(() => [
+					shouldDisplayControls.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("controls"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [
+						((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderControls))),
+						(0, vue.unref)(props).withExpandButton ? ((0, vue.openBlock)(), (0, vue.createBlock)(ExpandCodeButton_default, {
+							key: 0,
+							expanded: (0, vue.unref)(expanded),
+							"expand-code-label": (0, vue.unref)(props).expandCodeLabel,
+							"collapse-code-label": (0, vue.unref)(props).collapseCodeLabel,
+							onExpand: (0, vue.unref)(setExpanded)
+						}, null, 8, [
+							"expanded",
+							"expand-code-label",
+							"collapse-code-label",
+							"onExpand"
+						])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.unref)(props).withCopyButton ? ((0, vue.openBlock)(), (0, vue.createBlock)(CopyCodeButton_default, {
+							key: 1,
+							code: (0, vue.unref)(props).code,
+							"copied-label": (0, vue.unref)(props).copiedLabel,
+							"copy-label": (0, vue.unref)(props).copyLabel
+						}, null, 8, [
+							"code",
+							"copied-label",
+							"copy-label"
+						])) : (0, vue.createCommentVNode)("", true)
+					], 16, _hoisted_3)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ScrollArea), (0, vue.mergeProps)({
+						type: "hover",
+						"scrollbar-size": 4,
+						dir: "ltr",
+						"offset-scrollbars": false,
+						"data-collapsed": !(0, vue.unref)(expanded) || void 0,
+						styles: { viewport: { overscrollBehaviorInline: "none" } }
+					}, (0, vue.unref)(getStyles)("scrollarea")), {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("codeWrapper"))), [(0, vue.unref)(props).withLineNumbers ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("lineNumbers"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(lineNumbers.value, (line) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: line }, (0, vue.toDisplayString)(line), 1);
+						}), 128))], 16, _hoisted_4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("pre", (0, vue.mergeProps)((0, vue.unref)(getStyles)("pre"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 0 }, {
+							...highlighted.value.codeElementProps,
+							...(0, vue.unref)(getStyles)("code", {
+								className: highlighted.value.codeElementProps?.class,
+								style: highlighted.value.codeElementProps?.style
+							})
+						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, {
+							...highlighted.value.codeElementProps,
+							...(0, vue.unref)(getStyles)("code", {
+								className: highlighted.value.codeElementProps?.class,
+								style: highlighted.value.codeElementProps?.style
+							})
+						})), (0, vue.toDisplayString)((0, vue.unref)(props).code.trim()), 17))], 16, _hoisted_5)], 16)]),
+						_: 1
+					}, 16, ["data-collapsed"]),
+					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("showCodeButton"), {
+						mod: { hidden: (0, vue.unref)(expanded) },
+						"data-code-color-scheme": (0, vue.unref)(props).codeColorScheme,
+						onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(setExpanded)(true))
+					}), {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.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 = (0, _mantine_vue_core.createVarsResolver)((theme, { background, radius }) => ({ inlineCodeHighlight: {
 	"--ch-background": background ? (0, _mantine_vue_core.getThemeColor)(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? (0, _mantine_vue_core.getRadius)(radius) : void 0
 } }));
-var InlineCodeHighlight = (0, vue.defineComponent)({
+//#endregion
+//#region src/CodeHighlight/InlineCodeHighlight.ts
+var InlineCodeHighlight = Object.assign(/* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.useProps)("InlineCodeHighlight", null, rawProps);
+	setup(__props) {
+		const props = (0, _mantine_vue_core.useProps)("InlineCodeHighlight", null, __props);
+		const attrs = (0, vue.useAttrs)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "InlineCodeHighlight",
 			classes: CodeHighlight_module_default,
@@ -555,81 +504,68 @@ var InlineCodeHighlight = (0, vue.defineComponent)({
 			varsResolver,
 			rootSelector: "inlineCodeHighlight"
 		});
-		return () => (0, vue.h)(CodeHighlight, {
-			...attrs,
-			...props,
-			...getStyles("inlineCodeHighlight"),
-			__inline: true
-		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(CodeHighlight_default, (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(props),
+				...(0, vue.unref)(getStyles)("inlineCodeHighlight")
+			}, { __inline: "" }), null, 16);
+		};
 	}
-});
-Object.assign(InlineCodeHighlight, {
+}), {
 	classes: CodeHighlight_module_default,
 	varsResolver
 });
 //#endregion
-//#region src/CodeHighlightTabs/FileIcon.ts
-var FileIcon = (0, vue.defineComponent)({
+//#region src/CodeHighlightTabs/FileIcon.vue
+var FileIcon_default = /* @__PURE__ */ (0, vue.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 (0, vue.h)("span", attrs, props.fileIcon);
-			if (props.getFileIcon && props.fileName) return (0, vue.h)("span", attrs, props.getFileIcon(props.fileName));
-			if (slots.fileIcon) return (0, vue.h)("span", attrs, slots.fileIcon());
-			if (slots.getFileIcon && props.fileName) return (0, vue.h)("span", attrs, slots.getFileIcon({ fileName: props.fileName }));
+	setup(__props) {
+		const props = __props;
+		const slots = (0, vue.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() ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, _ctx.$attrs)), [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderIcon)))], 16)) : (0, vue.createCommentVNode)("", true);
+		};
 	}
 });
 //#endregion
 //#region src/CodeHighlightTabs/CodeHighlightTabs.ts
-var CodeHighlightTabs = (0, vue.defineComponent)({
+var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.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
@@ -638,81 +574,39 @@ var CodeHighlightTabs = (0, vue.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 = (0, _mantine_vue_core.useProps)("CodeHighlightTabs", null, rawProps);
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "CodeHighlightTabs",
 			classes: CodeHighlight_module_default,
@@ -728,73 +622,114 @@ var CodeHighlightTabs = (0, vue.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] = (0, _mantine_vue_hooks.useUncontrolled)({
 			defaultValue: props.defaultExpanded,
 			value: () => props.expanded,
 			finalValue: true,
-			onChange: (next) => props.onExpandedChange?.(next)
+			onChange: (next) => {
+				emit("update:expanded", next);
+				emit("expanded-change", next);
+			}
 		});
-		(0, vue.watch)(() => [value.value, props.code.length], ([currentValue, length]) => {
-			if (currentValue >= length) setValue(length - 1);
+		(0, vue.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) => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
-				...getStyles("file"),
-				key: node.fileName ?? index,
-				mod: { active: index === value.value },
-				onClick: () => setValue(index),
-				"data-color-scheme": props.codeColorScheme
-			}, () => [(0, vue.h)(FileIcon, {
-				fileIcon: node.icon,
-				getFileIcon,
-				fileName: node.fileName,
-				key: "file-icon",
-				...getStyles("fileIcon")
-			}), (0, vue.h)("span", { key: "file-name" }, node.fileName)]));
-			return (0, vue.h)(_mantine_vue_core.Box, {
-				...attrs,
-				...getStyles("root")
-			}, () => [(0, vue.h)(_mantine_vue_core.ScrollArea, {
-				type: "never",
-				dir: "ltr",
-				offsetScrollbars: false,
-				...getStyles("filesScrollarea")
-			}, () => (0, vue.h)("div", getStyles("files"), files)), (0, vue.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 = (0, vue.computed)(() => props.code[value.value] || {
+			code: "",
+			language: "tsx",
+			fileName: ""
+		});
+		const fileIconResolver = (0, vue.computed)(() => props.getFileIcon ?? (slots.getFileIcon ? (fileName) => slots.getFileIcon?.({ fileName }) : void 0));
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(props).code.length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, {
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(getStyles)("root")
+			})), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ScrollArea), (0, vue.mergeProps)({
+					type: "never",
+					dir: "ltr",
+					"offset-scrollbars": false
+				}, (0, vue.unref)(getStyles)("filesScrollarea")), {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("files"))), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(props).code, (node, index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: node.fileName ?? index }, { ref_for: true }, (0, vue.unref)(getStyles)("file"), {
+							mod: { active: index === (0, vue.unref)(value) },
+							"data-color-scheme": (0, vue.unref)(props).codeColorScheme,
+							onClick: ($event) => (0, vue.unref)(setValue)(index)
+						}), {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(FileIcon_default, (0, vue.mergeProps)({
+								"file-icon": node.icon,
+								"get-file-icon": fileIconResolver.value,
+								"file-name": node.fileName
+							}, { ref_for: true }, (0, vue.unref)(getStyles)("fileIcon")), null, 16, [
+								"file-icon",
+								"get-file-icon",
+								"file-name"
+							]), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(node.fileName), 1)]),
+							_: 2
+						}, 1040, [
+							"mod",
+							"data-color-scheme",
+							"onClick"
+						]);
+					}), 128))], 16)]),
+					_: 1
+				}, 16), (0, vue.createVNode)(CodeHighlight_default, {
+					code: currentCode.value.code,
+					language: currentCode.value.language,
+					expanded: (0, vue.unref)(expanded),
+					"with-copy-button": (0, vue.unref)(props).withCopyButton,
+					"with-expand-button": (0, vue.unref)(props).withExpandButton,
+					"with-border": (0, vue.unref)(props).withBorder,
+					radius: (0, vue.unref)(props).radius,
+					"max-collapsed-height": (0, vue.unref)(props).maxCollapsedHeight,
+					"copied-label": (0, vue.unref)(props).copiedLabel,
+					"copy-label": (0, vue.unref)(props).copyLabel,
+					"expand-code-label": (0, vue.unref)(props).expandCodeLabel,
+					"collapse-code-label": (0, vue.unref)(props).collapseCodeLabel,
+					background: (0, vue.unref)(props).background,
+					controls: (0, vue.unref)(props).controls,
+					"code-color-scheme": (0, vue.unref)(props).codeColorScheme,
+					"with-line-numbers": (0, vue.unref)(props).withLineNumbers,
+					"__with-offset": "",
+					"__static-selector": "CodeHighlightTabs",
+					onExpandedChange: (0, vue.unref)(setExpanded),
+					"class-names": (0, vue.unref)(props).classNames,
+					styles: (0, vue.unref)(props).styles
+				}, (0, vue.createSlots)({ _: 2 }, [_ctx.$slots.controls ? {
+					name: "controls",
+					fn: (0, vue.withCtx)(() => [(0, vue.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)) : (0, vue.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) {
@@ -1978,7 +1913,7 @@ var createShikiAdapter = (loadShiki, { forceColorScheme } = {}) => ({
 //#endregion
 exports.CodeHighlight = CodeHighlight;
 exports.CodeHighlightAdapterProvider = CodeHighlightAdapterProvider;
-exports.CodeHighlightControl = CodeHighlightControl;
+exports.CodeHighlightControl = CodeHighlightControl_default;
 exports.CodeHighlightTabs = CodeHighlightTabs;
 exports.InlineCodeHighlight = InlineCodeHighlight;
 exports.createHighlightJsAdapter = createHighlightJsAdapter;