fumadocs-ui 16.7.13 → 16.7.15

package/css/generated/shared.css

@@ -20,6 +20,8 @@
 @source inline("--color-fd-muted");
 @source inline("--fd-animated-height");
 @source inline("--fd-banner-height");
+@source inline("--offset-distance");
+@source inline("--opacity");
 @source inline("--padding-right");
 @source inline("--radix-navigation-menu-viewport-height");
 @source inline("--radix-popover-content-available-height");
@@ -29,6 +31,8 @@
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
 @source inline("--t");
+@source inline("--track-bottom");
+@source inline("--track-top");
 @source inline("-circle");
 @source inline("-mb-px");
 @source inline("-me-0.5");
@@ -69,6 +73,7 @@
 @source inline("[&_svg]:size-5");
 @source inline("[&_svg]:size-full");
 @source inline("[&_svg]:text-fd-muted-foreground");
+@source inline("[offset-distance:var(--offset-distance,0)]");
 @source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("about");
@@ -160,6 +165,8 @@
 @source inline("bottom-0");
 @source inline("bottom-1.5");
 @source inline("boundary");
+@source inline("box");
+@source inline("boxRef");
 @source inline("breaking");
 @source inline("button");
 @source inline("buttonVariants");
@@ -682,7 +689,6 @@
 @source inline("of");
 @source inline("official");
 @source inline("offset");
-@source inline("offsetDistance");
 @source inline("offsetPath");
 @source inline("offsetTop");
 @source inline("on");
@@ -705,8 +711,10 @@
 @source inline("onSelectCallback");
 @source inline("onTagChange");
 @source inline("onTagChangeCallback");
+@source inline("onUpdate");
 @source inline("onValueChange");
 @source inline("only");
+@source inline("opacity-(--opacity,0)");
 @source inline("opacity-0");
 @source inline("open");
 @source inline("opening");
@@ -821,6 +829,7 @@
 @source inline("rainbowColors");
 @source inline("raw");
 @source inline("rawTree");
+@source inline("re-exported");
 @source inline("react");
 @source inline("react-hooks/exhaustive-deps");
 @source inline("react-hooks/rules-of-hooks");
@@ -874,7 +883,6 @@
 @source inline("rtl:rotate-180");
 @source inline("rtl:rotate-90");
 @source inline("s");
-@source inline("scale");
 @source inline("scope");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
@@ -978,6 +986,7 @@
 @source inline("supposed");
 @source inline("sure");
 @source inline("svg");
+@source inline("svgRef");
 @source inline("switch");
 @source inline("system");
 @source inline("t");
@@ -1033,6 +1042,7 @@
 @source inline("title");
 @source inline("to");
 @source inline("toc");
+@source inline("tocInfo");
 @source inline("tocNoHeadings");
 @source inline("toolbar");
 @source inline("top");
@@ -1048,7 +1058,7 @@
 @source inline("transform");
 @source inline("transition-[clip-path]");
 @source inline("transition-[height]");
-@source inline("transition-[offset-distance]");
+@source inline("transition-[opacity,offset-distance]");
 @source inline("transition-[width,height]");
 @source inline("transition-all");
 @source inline("transition-colors");

package/dist/components/toc/clerk.js

@@ -105,13 +105,9 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			observer.unobserve(container);
 		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-0 inset-s-0",
-		style: {
-			width: svg.width,
-			height: svg.height
-		},
-		children: [/* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+		computed: svg,
+		thumbBox
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -125,48 +121,61 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
-function ThumbTrack({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: `0 0 ${computed.width} ${computed.height}`,
-		className: "absolute transition-[clip-path]",
+function ThumbTrack({ computed, thumbBox }) {
+	const svgRef = useRef(null);
+	const boxRef = useRef(null);
+	const previousRef = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	const onUpdate = useCallback((items) => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return;
+		const endIdx = items.findLastIndex((item) => item.active);
+		svg.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
+		svg.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
+		const box = boxRef.current;
+		if (box) {
+			let isUp = false;
+			if (previousRef.current) {
+				const prev = previousRef.current;
+				isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+			}
+			previousRef.current = {
+				startIdx,
+				endIdx,
+				isUp
+			};
+			box.style.setProperty("--offset-distance", isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`);
+			box.style.setProperty("--opacity", items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1");
+		}
+	}, [computed]);
+	Primitive.useTOCListener(onUpdate);
+	useEffect(() => {
+		onUpdate(tocInfo.get());
+	}, [onUpdate, tocInfo]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-0 inset-s-0",
 		style: {
 			width: computed.width,
-			height: computed.height,
-			clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})`
+			height: computed.height
 		},
-		children: computed.content
-	});
-}
-function ThumbBox({ computed }) {
-	const items = Primitive.useItems();
-	const previousRef = useRef(null);
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	let isUp = false;
-	if (previousRef.current) {
-		const prev = previousRef.current;
-		isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
-	}
-	previousRef.current = {
-		startIdx,
-		endIdx,
-		isUp
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "absolute size-1 bg-fd-primary rounded-full transition-[offset-distance]",
-		style: {
-			offsetPath: `path("${computed.d}")`,
-			offsetDistance: isUp ? computed.itemLineLengths[startIdx][0] : computed.itemLineLengths[endIdx][1],
-			scale: items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1"
-		}
+		children: [/* @__PURE__ */ jsx("svg", {
+			ref: svgRef,
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		}), thumbBox && /* @__PURE__ */ jsx("div", {
+			ref: boxRef,
+			className: "absolute size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
+			style: { offsetPath: `path("${computed.d}")` }
+		})]
 	});
 }
 const a = 8;

package/dist/components/toc/default.js

@@ -53,15 +53,25 @@ function TOCItems({ ref, className, ...props }) {
 	});
 }
 function TocThumb({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
+	const ref = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	const onUpdate = useCallback((items) => {
+		const element = ref.current;
+		if (!element) return;
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return;
+		const endIdx = items.findLastIndex((item) => item.active);
+		element.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
+		element.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
+	}, [computed]);
+	Primitive.useTOCListener(onUpdate);
+	useEffect(() => {
+		onUpdate(tocInfo.get());
+	}, [onUpdate, tocInfo]);
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
-		style: { clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})` }
+		style: { clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))` }
 	});
 }
 function TOCEmpty() {

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.d.ts
+declare const enum ModalState {
+  LOADED = "LOADED",
+  LOADING = "LOADING",
+  UNLOADED = "UNLOADED",
+  UNLOADING = "UNLOADING"
+}
+interface ControlledProps {
+  a11yNameButtonUnzoom?: string;
+  a11yNameButtonZoom?: string;
+  canSwipeToUnzoom?: boolean;
+  children: React.ReactNode;
+  classDialog?: string;
+  IconUnzoom?: React.ElementType;
+  IconZoom?: React.ElementType;
+  isDisabled?: boolean;
+  isZoomed: boolean;
+  onZoomChange?: (value: boolean, data: {
+    event: React.SyntheticEvent | Event;
+  }) => void;
+  swipeToUnzoomThreshold?: number;
+  wrapElement?: 'div' | 'span';
+  ZoomContent?: (data: {
+    buttonUnzoom: React.ReactElement<HTMLButtonElement>;
+    img: React.ReactElement | null;
+    isZoomImgLoaded: boolean;
+    modalState: ModalState;
+    onUnzoom: (e: Event) => void;
+  }) => React.ReactElement;
+  zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>;
+  zoomMargin?: number;
+}
+//#endregion
+export { ControlledProps };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.js

@@ -0,0 +1,435 @@
+import { ICompress, IEnlarge } from "./icons.js";
+import { adjustSvgIDs, getImgAlt, getImgSrc, getStyleGhost, getStyleModalImg, testDiv, testImg, testImgLoaded, testSvg } from "./utils.js";
+import React from "react";
+import ReactDOM from "react-dom";
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.js
+const IMAGE_QUERY = [
+	"img",
+	"svg",
+	"[role=\"img\"]",
+	"[data-zoom]"
+].map((x) => `${x}:not([aria-hidden="true"])`).join(",");
+const defaultBodyAttrs = {
+	overflow: "",
+	width: ""
+};
+function getDialogContainer() {
+	const existing = document.querySelector("[data-rmiz-portal]");
+	if (existing != null) return existing;
+	const el = document.createElement("div");
+	el.setAttribute("data-rmiz-portal", "");
+	document.body.appendChild(el);
+	return el;
+}
+function handleDialogCancelStatic(e) {
+	e.preventDefault();
+}
+function Controlled(props) {
+	return React.createElement(ControlledBase, { ...props });
+}
+var ControlledBase = class extends React.Component {
+	constructor() {
+		super(...arguments);
+		this.state = {
+			id: "",
+			isZoomImgLoaded: false,
+			loadedImgEl: void 0,
+			modalState: "UNLOADED",
+			shouldRefresh: false,
+			styleGhost: {}
+		};
+		this.refContent = React.createRef();
+		this.refDialog = React.createRef();
+		this.refModalContent = React.createRef();
+		this.refModalImg = React.createRef();
+		this.refWrap = React.createRef();
+		this.imgEl = null;
+		this.isScaling = false;
+		this.prevBodyAttrs = defaultBodyAttrs;
+		this.styleModalImg = {};
+		this.handleModalStateChange = (prevModalState) => {
+			const { state: { modalState } } = this;
+			if (prevModalState !== "LOADING" && modalState === "LOADING") {
+				this.loadZoomImg();
+				window.addEventListener("resize", this.handleResize, { passive: true });
+				window.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+				window.addEventListener("touchmove", this.handleTouchMove, { passive: true });
+				window.addEventListener("touchend", this.handleTouchEnd, { passive: true });
+				window.addEventListener("touchcancel", this.handleTouchCancel, { passive: true });
+				document.addEventListener("keydown", this.handleKeyDown, true);
+			} else if (prevModalState !== "LOADED" && modalState === "LOADED") window.addEventListener("wheel", this.handleWheel, { passive: true });
+			else if (prevModalState !== "UNLOADING" && modalState === "UNLOADING") {
+				this.ensureImgTransitionEnd();
+				window.removeEventListener("wheel", this.handleWheel);
+				window.removeEventListener("touchstart", this.handleTouchStart);
+				window.removeEventListener("touchmove", this.handleTouchMove);
+				window.removeEventListener("touchend", this.handleTouchEnd);
+				window.removeEventListener("touchcancel", this.handleTouchCancel);
+				document.removeEventListener("keydown", this.handleKeyDown, true);
+			} else if (prevModalState !== "UNLOADED" && modalState === "UNLOADED") {
+				this.bodyScrollEnable();
+				window.removeEventListener("resize", this.handleResize);
+				this.refModalImg.current?.removeEventListener("transitionend", this.handleImgTransitionEnd);
+				this.refDialog.current?.close();
+			}
+		};
+		this.setId = () => {
+			const gen4 = () => Math.random().toString(16).slice(-4);
+			this.setState({ id: gen4() + gen4() + gen4() });
+		};
+		this.setAndTrackImg = () => {
+			const { refContent: { current: contentEl } } = this;
+			if (contentEl == null) return;
+			this.imgEl = contentEl.querySelector(IMAGE_QUERY);
+			if (this.imgEl !== null) {
+				this.contentNotFoundChangeObserver?.disconnect();
+				this.imgEl.addEventListener("load", this.handleImgLoad);
+				this.imgEl.addEventListener("click", this.handleZoom);
+				if (this.state.loadedImgEl == null) this.handleImgLoad();
+				this.imgElResizeObserver = new ResizeObserver((entries) => {
+					const [entry] = entries;
+					if (entry?.target !== void 0) {
+						this.imgEl = entry.target;
+						this.setState({ styleGhost: getStyleGhost(this.imgEl) });
+					}
+				});
+				this.imgElResizeObserver.observe(this.imgEl);
+				if (this.contentChangeObserver == null) {
+					this.contentChangeObserver = new MutationObserver(() => {
+						this.setState({ styleGhost: getStyleGhost(this.imgEl) });
+					});
+					this.contentChangeObserver.observe(contentEl, {
+						attributes: true,
+						childList: true,
+						subtree: true
+					});
+				}
+			} else if (this.contentNotFoundChangeObserver == null) {
+				this.contentNotFoundChangeObserver = new MutationObserver(this.setAndTrackImg);
+				this.contentNotFoundChangeObserver.observe(contentEl, {
+					childList: true,
+					subtree: true
+				});
+			}
+		};
+		this.handleIfZoomChanged = (prevIsZoomed) => {
+			const { props: { isZoomed } } = this;
+			if (!prevIsZoomed && isZoomed) this.zoom();
+			else if (prevIsZoomed && !isZoomed) this.unzoom();
+		};
+		this.handleImgLoad = () => {
+			const imgSrc = getImgSrc(this.imgEl);
+			if (imgSrc == null || imgSrc === "") return;
+			const img = new Image();
+			const { imgEl } = this;
+			if (testImg(imgEl)) {
+				const { sizes, srcset, crossOrigin } = imgEl;
+				img.sizes = sizes;
+				img.srcset = srcset;
+				img.crossOrigin = crossOrigin;
+			}
+			img.src = imgSrc;
+			const setLoaded = () => {
+				this.setState({
+					loadedImgEl: img,
+					styleGhost: getStyleGhost(this.imgEl)
+				});
+			};
+			img.decode().then(setLoaded).catch(() => {
+				if (testImgLoaded(img)) {
+					setLoaded();
+					return;
+				}
+				img.onload = setLoaded;
+			});
+		};
+		this.handleZoom = (e) => {
+			if (this.props.isDisabled !== true && this.hasImage()) this.props.onZoomChange?.(true, { event: e });
+		};
+		this.handleUnzoom = (e) => {
+			if (this.props.isDisabled !== true) this.props.onZoomChange?.(false, { event: e });
+		};
+		this.handleBtnUnzoomClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.handleUnzoom(e);
+		};
+		this.handleDialogClick = (e) => {
+			if (e.target === this.refModalContent.current || e.target === this.refModalImg.current) {
+				e.stopPropagation();
+				this.handleUnzoom(e);
+			}
+		};
+		this.handleDialogClose = (e) => {
+			e.stopPropagation();
+			this.handleUnzoom(e);
+		};
+		this.handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				this.handleUnzoom(e);
+			}
+		};
+		this.handleWheel = (e) => {
+			if (e.ctrlKey) return;
+			e.stopPropagation();
+			queueMicrotask(() => {
+				this.handleUnzoom(e);
+			});
+		};
+		this.handleTouchStart = (e) => {
+			if (e.touches.length > 1) {
+				this.isScaling = true;
+				return;
+			}
+			const { changedTouches } = e;
+			const [changedTouch] = changedTouches;
+			if (changedTouches.length === 1 && changedTouch !== void 0) {
+				const { screenY } = changedTouch;
+				this.touchYStart = screenY;
+			}
+		};
+		this.handleTouchMove = (e) => {
+			const browserScale = window.visualViewport?.scale ?? 1;
+			const { changedTouches: changedTouchesMove } = e;
+			const [changedTouchMove] = changedTouchesMove;
+			if (this.props.canSwipeToUnzoom && !this.isScaling && browserScale <= 1 && this.touchYStart != null && changedTouchMove !== void 0) {
+				const { screenY } = changedTouchMove;
+				this.touchYEnd = screenY;
+				const max = Math.max(this.touchYStart, this.touchYEnd);
+				const min = Math.min(this.touchYStart, this.touchYEnd);
+				if (Math.abs(max - min) > this.props.swipeToUnzoomThreshold) {
+					this.touchYStart = void 0;
+					this.touchYEnd = void 0;
+					this.handleUnzoom(e);
+				}
+			}
+		};
+		this.handleTouchEnd = () => {
+			this.isScaling = false;
+			this.touchYStart = void 0;
+			this.touchYEnd = void 0;
+		};
+		this.handleTouchCancel = () => {
+			this.isScaling = false;
+			this.touchYStart = void 0;
+			this.touchYEnd = void 0;
+		};
+		this.handleResize = () => {
+			this.setState({ shouldRefresh: true });
+		};
+		this.hasImage = () => this.imgEl !== null && (this.state.loadedImgEl !== void 0 || testSvg(this.imgEl)) && window.getComputedStyle(this.imgEl).display !== "none";
+		this.zoom = () => {
+			this.bodyScrollDisable();
+			this.refDialog.current?.showModal();
+			this.refModalImg.current?.addEventListener("transitionend", this.handleImgTransitionEnd);
+			this.setState({ modalState: "LOADING" });
+		};
+		this.unzoom = () => {
+			this.setState({ modalState: "UNLOADING" });
+		};
+		this.handleImgTransitionEnd = () => {
+			clearTimeout(this.timeoutTransitionEnd);
+			if (this.state.modalState === "LOADING") this.setState({ modalState: "LOADED" });
+			else if (this.state.modalState === "UNLOADING") this.setState({
+				shouldRefresh: false,
+				modalState: "UNLOADED"
+			});
+		};
+		this.ensureImgTransitionEnd = () => {
+			if (this.refModalImg.current !== null) {
+				const { transitionDuration: td } = window.getComputedStyle(this.refModalImg.current);
+				const tdFloat = parseFloat(td);
+				if (tdFloat !== 0 && !Number.isNaN(tdFloat)) {
+					const tdMs = tdFloat * (td.endsWith("ms") ? 1 : 1e3) + 50;
+					this.timeoutTransitionEnd = setTimeout(this.handleImgTransitionEnd, tdMs);
+				}
+			}
+		};
+		this.bodyScrollDisable = () => {
+			this.prevBodyAttrs = {
+				overflow: document.body.style.overflow,
+				width: document.body.style.width
+			};
+			const { body: { clientWidth } } = document;
+			document.body.style.overflow = "hidden";
+			document.body.style.width = `${clientWidth}px`;
+		};
+		this.bodyScrollEnable = () => {
+			const { prevBodyAttrs: { overflow, width } } = this;
+			document.body.style.width = width;
+			document.body.style.overflow = overflow;
+			this.prevBodyAttrs = defaultBodyAttrs;
+		};
+		this.loadZoomImg = () => {
+			const { props: { zoomImg } } = this;
+			if (zoomImg == null) return;
+			const { src: zoomImgSrc } = zoomImg;
+			if (zoomImgSrc !== void 0 && zoomImgSrc !== "") {
+				const img = new Image();
+				img.sizes = zoomImg.sizes ?? "";
+				img.srcset = zoomImg.srcSet ?? "";
+				img.crossOrigin = zoomImg.crossOrigin ?? void 0;
+				img.src = zoomImgSrc;
+				const setLoaded = () => {
+					this.setState({ isZoomImgLoaded: true });
+				};
+				img.decode().then(setLoaded).catch(() => {
+					if (testImgLoaded(img)) {
+						setLoaded();
+						return;
+					}
+					img.onload = setLoaded;
+				});
+			}
+		};
+		this.UNSAFE_handleSvg = () => {
+			const { imgEl, refModalImg, styleModalImg } = this;
+			if (testSvg(imgEl)) {
+				const svgEl = imgEl.cloneNode(true);
+				adjustSvgIDs(svgEl);
+				svgEl.style.width = `${styleModalImg.width ?? 0}px`;
+				svgEl.style.height = `${styleModalImg.height ?? 0}px`;
+				svgEl.addEventListener("click", this.handleUnzoom);
+				refModalImg.current?.firstChild?.remove();
+				refModalImg.current?.appendChild(svgEl);
+			}
+		};
+	}
+	render() {
+		const { handleBtnUnzoomClick, handleDialogClick, handleDialogClose, handleUnzoom, handleZoom, imgEl, props: { a11yNameButtonUnzoom, a11yNameButtonZoom, children, classDialog, IconUnzoom, IconZoom, isZoomed, wrapElement: WrapElement, ZoomContent, zoomImg, zoomMargin }, refContent, refDialog, refModalContent, refModalImg, refWrap, state: { id, isZoomImgLoaded, loadedImgEl, modalState, shouldRefresh, styleGhost } } = this;
+		const idModal = `rmiz-modal-${id}`;
+		const idModalImg = `rmiz-modal-img-${id}`;
+		const isDiv = testDiv(imgEl);
+		const isImg = testImg(imgEl);
+		const isSvg = testSvg(imgEl);
+		const imgAlt = getImgAlt(imgEl);
+		const imgSrc = getImgSrc(imgEl);
+		const imgSizes = isImg ? imgEl.sizes : void 0;
+		const imgSrcSet = isImg ? imgEl.srcset : void 0;
+		const imgCrossOrigin = isImg ? imgEl.crossOrigin : void 0;
+		const hasZoomImg = zoomImg?.src !== void 0 && zoomImg.src !== "";
+		const hasImage = this.hasImage();
+		const labelBtnZoom = imgAlt !== void 0 && imgAlt !== "" ? `${a11yNameButtonZoom}: ${imgAlt}` : a11yNameButtonZoom;
+		const isModalActive = modalState === "LOADING" || modalState === "LOADED";
+		const dataContentState = hasImage ? "found" : "not-found";
+		const dataOverlayState = modalState === "UNLOADED" || modalState === "UNLOADING" ? "hidden" : "visible";
+		const styleContent = { visibility: modalState === "UNLOADED" ? "visible" : "hidden" };
+		this.styleModalImg = hasImage && imgEl !== null ? getStyleModalImg({
+			hasZoomImg,
+			imgSrc,
+			isSvg,
+			isZoomed: isZoomed && isModalActive,
+			loadedImgEl,
+			offset: zoomMargin,
+			shouldRefresh,
+			targetEl: imgEl
+		}) : {};
+		let modalContent = null;
+		if (hasImage) {
+			const modalImg = isImg || isDiv ? React.createElement("img", {
+				alt: imgAlt,
+				crossOrigin: imgCrossOrigin,
+				sizes: imgSizes,
+				src: imgSrc,
+				srcSet: imgSrcSet,
+				...isZoomImgLoaded && modalState === "LOADED" ? zoomImg : {},
+				"data-rmiz-modal-img": "",
+				height: this.styleModalImg.height ?? void 0,
+				id: idModalImg,
+				ref: refModalImg,
+				style: this.styleModalImg,
+				width: this.styleModalImg.width ?? void 0
+			}) : isSvg ? React.createElement("div", {
+				"data-rmiz-modal-img": true,
+				ref: refModalImg,
+				style: this.styleModalImg
+			}) : null;
+			const modalBtnUnzoom = React.createElement("button", {
+				"aria-label": a11yNameButtonUnzoom,
+				"data-rmiz-btn-unzoom": "",
+				onClick: handleBtnUnzoomClick,
+				type: "button"
+			}, React.createElement(IconUnzoom, null));
+			modalContent = ZoomContent == null ? React.createElement(React.Fragment, null, modalImg, modalBtnUnzoom) : React.createElement(ZoomContent, {
+				buttonUnzoom: modalBtnUnzoom,
+				modalState,
+				img: modalImg,
+				isZoomImgLoaded,
+				onUnzoom: handleUnzoom
+			});
+		}
+		return React.createElement(WrapElement, {
+			"aria-owns": idModal,
+			"data-rmiz": "",
+			ref: refWrap
+		}, React.createElement(WrapElement, {
+			"data-rmiz-content": dataContentState,
+			ref: refContent,
+			style: styleContent
+		}, children), hasImage && React.createElement(WrapElement, {
+			"data-rmiz-ghost": "",
+			style: styleGhost
+		}, React.createElement("button", {
+			"aria-label": labelBtnZoom,
+			"data-rmiz-btn-zoom": "",
+			onClick: handleZoom,
+			type: "button"
+		}, React.createElement(IconZoom, null))), hasImage && ReactDOM.createPortal(React.createElement("dialog", {
+			"aria-labelledby": idModalImg,
+			"aria-modal": "true",
+			className: classDialog,
+			"data-rmiz-modal": "",
+			id: idModal,
+			onClick: handleDialogClick,
+			onClose: handleDialogClose,
+			onCancel: handleDialogCancelStatic,
+			ref: refDialog,
+			role: "dialog"
+		}, React.createElement("div", { "data-rmiz-modal-overlay": dataOverlayState }), React.createElement("div", {
+			"data-rmiz-modal-content": "",
+			ref: refModalContent
+		}, modalContent)), getDialogContainer()));
+	}
+	componentDidMount() {
+		this.setId();
+		this.setAndTrackImg();
+		this.handleImgLoad();
+		this.UNSAFE_handleSvg();
+	}
+	componentWillUnmount() {
+		if (this.state.modalState !== "UNLOADED") this.bodyScrollEnable();
+		this.contentChangeObserver?.disconnect();
+		this.contentNotFoundChangeObserver?.disconnect();
+		this.imgElResizeObserver?.disconnect();
+		this.imgEl?.removeEventListener("load", this.handleImgLoad);
+		this.imgEl?.removeEventListener("click", this.handleZoom);
+		this.refModalImg.current?.removeEventListener("transitionend", this.handleImgTransitionEnd);
+		window.removeEventListener("wheel", this.handleWheel);
+		window.removeEventListener("touchstart", this.handleTouchStart);
+		window.removeEventListener("touchmove", this.handleTouchMove);
+		window.removeEventListener("touchend", this.handleTouchEnd);
+		window.removeEventListener("touchcancel", this.handleTouchCancel);
+		window.removeEventListener("resize", this.handleResize);
+		document.removeEventListener("keydown", this.handleKeyDown, true);
+	}
+	componentDidUpdate(prevProps, prevState) {
+		this.handleModalStateChange(prevState.modalState);
+		this.UNSAFE_handleSvg();
+		this.handleIfZoomChanged(prevProps.isZoomed);
+	}
+};
+ControlledBase.defaultProps = {
+	a11yNameButtonUnzoom: "Minimize image",
+	a11yNameButtonZoom: "Expand image",
+	canSwipeToUnzoom: true,
+	IconUnzoom: ICompress,
+	IconZoom: IEnlarge,
+	isDisabled: false,
+	swipeToUnzoomThreshold: 10,
+	wrapElement: "div",
+	zoomMargin: 0
+};
+//#endregion
+export { Controlled };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.d.ts

@@ -0,0 +1,7 @@
+import { ControlledProps } from "./Controlled.js";
+import React from "react";
+
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.d.ts
+type UncontrolledProps = Omit<ControlledProps, 'isZoomed'>;
+//#endregion
+export { UncontrolledProps };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js

@@ -0,0 +1,17 @@
+import { Controlled } from "./Controlled.js";
+import React from "react";
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js
+function Uncontrolled({ onZoomChange, ...props }) {
+	const [isZoomed, setIsZoomed] = React.useState(false);
+	const handleZoomChange = React.useCallback((value, { event }) => {
+		setIsZoomed(value);
+		onZoomChange?.(value, { event });
+	}, [onZoomChange]);
+	return React.createElement(Controlled, {
+		...props,
+		isZoomed,
+		onZoomChange: handleZoomChange
+	});
+}
+//#endregion
+export { Uncontrolled };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/icons.js

@@ -0,0 +1,24 @@
+import React from "react";
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/icons.js
+function ICompress() {
+	return React.createElement("svg", {
+		"aria-hidden": "true",
+		"data-rmiz-btn-unzoom-icon": true,
+		fill: "currentColor",
+		focusable: "false",
+		viewBox: "0 0 16 16",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" }));
+}
+function IEnlarge() {
+	return React.createElement("svg", {
+		"aria-hidden": "true",
+		"data-rmiz-btn-zoom-icon": true,
+		fill: "currentColor",
+		focusable: "false",
+		viewBox: "0 0 16 16",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" }));
+}
+//#endregion
+export { ICompress, IEnlarge };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { ControlledProps } from "./Controlled.js";
+import { UncontrolledProps } from "./Uncontrolled.js";

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils.js

@@ -0,0 +1,372 @@
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/utils.js
+function isElement(el) {
+	if (typeof Element === "undefined") return false;
+	return el instanceof Element;
+}
+const testElType = (type, el) => isElement(el) && el.tagName.toUpperCase() === type;
+const testDiv = (el) => testElType("DIV", el) || testElType("SPAN", el);
+const testImg = (el) => testElType("IMG", el);
+const testImgLoaded = (el) => el.complete && el.naturalHeight !== 0;
+const testSvg = (el) => testElType("SVG", el);
+const getScaleToWindow = ({ height, offset, width }) => Math.min((window.innerWidth - offset * 2) / width, (window.innerHeight - offset * 2) / height);
+const getScaleToWindowMax = ({ containerHeight, containerWidth, offset, targetHeight, targetWidth }) => {
+	const scale = getScaleToWindow({
+		height: targetHeight,
+		offset,
+		width: targetWidth
+	});
+	const ratio = targetWidth > targetHeight ? targetWidth / containerWidth : targetHeight / containerHeight;
+	return scale > 1 ? ratio : scale * ratio;
+};
+const getScale = ({ containerHeight, containerWidth, hasScalableSrc, offset, targetHeight, targetWidth }) => {
+	if (containerHeight === 0 || containerWidth === 0) return 1;
+	return !hasScalableSrc && targetHeight !== 0 && targetWidth !== 0 ? getScaleToWindowMax({
+		containerHeight,
+		containerWidth,
+		offset,
+		targetHeight,
+		targetWidth
+	}) : getScaleToWindow({
+		height: containerHeight,
+		offset,
+		width: containerWidth
+	});
+};
+const URL_REGEX = /url(?:\(['"]?)(?<url>.*?)(?:['"]?\))/;
+const getImgSrc = (imgEl) => {
+	if (imgEl !== null) {
+		if (testImg(imgEl)) return imgEl.currentSrc === "" ? void 0 : imgEl.currentSrc;
+		else if (testDiv(imgEl)) {
+			const { backgroundImage: bgImg } = window.getComputedStyle(imgEl);
+			if (bgImg !== "") return URL_REGEX.exec(bgImg)?.[1];
+		}
+	}
+};
+const getImgAlt = (imgEl) => {
+	if (imgEl !== null) if (testImg(imgEl)) return imgEl.alt;
+	else return imgEl.getAttribute("aria-label") ?? void 0;
+};
+const getImgRegularStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, targetHeight, targetWidth }) => {
+	const scale = getScale({
+		containerHeight,
+		containerWidth,
+		hasScalableSrc,
+		offset,
+		targetHeight,
+		targetWidth
+	});
+	return {
+		top: containerTop,
+		left: containerLeft,
+		width: containerWidth * scale,
+		height: containerHeight * scale,
+		transform: `translate(0,0) scale(${1 / scale})`
+	};
+};
+const parsePosition = ({ position, relativeNum }) => {
+	const positionNum = parseFloat(position);
+	return position.endsWith("%") ? relativeNum * positionNum / 100 : positionNum;
+};
+const getImgObjectFitStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, objectFit: objectFitParam, objectPosition, offset, targetHeight, targetWidth }) => {
+	let resolvedObjectFit = objectFitParam;
+	if (resolvedObjectFit === "scale-down") if (targetWidth <= containerWidth && targetHeight <= containerHeight) resolvedObjectFit = "none";
+	else resolvedObjectFit = "contain";
+	if (resolvedObjectFit === "cover" || resolvedObjectFit === "contain") {
+		const widthRatio = containerWidth / targetWidth;
+		const heightRatio = containerHeight / targetHeight;
+		const ratio = resolvedObjectFit === "cover" ? Math.max(widthRatio, heightRatio) : Math.min(widthRatio, heightRatio);
+		const [posLeft = "50%", posTop = "50%"] = objectPosition.split(" ");
+		const posX = parsePosition({
+			position: posLeft,
+			relativeNum: containerWidth - targetWidth * ratio
+		});
+		const posY = parsePosition({
+			position: posTop,
+			relativeNum: containerHeight - targetHeight * ratio
+		});
+		const scale = getScale({
+			containerHeight: targetHeight * ratio,
+			containerWidth: targetWidth * ratio,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			top: containerTop + posY,
+			left: containerLeft + posX,
+			width: targetWidth * ratio * scale,
+			height: targetHeight * ratio * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	} else if (resolvedObjectFit === "none") {
+		const [posLeft = "50%", posTop = "50%"] = objectPosition.split(" ");
+		const posX = parsePosition({
+			position: posLeft,
+			relativeNum: containerWidth - targetWidth
+		});
+		const posY = parsePosition({
+			position: posTop,
+			relativeNum: containerHeight - targetHeight
+		});
+		const scale = getScale({
+			containerHeight: targetHeight,
+			containerWidth: targetWidth,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			top: containerTop + posY,
+			left: containerLeft + posX,
+			width: targetWidth * scale,
+			height: targetHeight * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	} else if (resolvedObjectFit === "fill") {
+		const widthRatio = containerWidth / targetWidth;
+		const heightRatio = containerHeight / targetHeight;
+		const ratio = Math.max(widthRatio, heightRatio);
+		const scale = getScale({
+			containerHeight: targetHeight * ratio,
+			containerWidth: targetWidth * ratio,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			width: containerWidth * scale,
+			height: containerHeight * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	} else return {};
+};
+const getDivImgStyle = ({ backgroundPosition, backgroundSize, containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, targetHeight, targetWidth }) => {
+	if (backgroundSize === "cover" || backgroundSize === "contain") {
+		const widthRatio = containerWidth / targetWidth;
+		const heightRatio = containerHeight / targetHeight;
+		const ratio = backgroundSize === "cover" ? Math.max(widthRatio, heightRatio) : Math.min(widthRatio, heightRatio);
+		const [posLeft = "50%", posTop = "50%"] = backgroundPosition.split(" ");
+		const posX = parsePosition({
+			position: posLeft,
+			relativeNum: containerWidth - targetWidth * ratio
+		});
+		const posY = parsePosition({
+			position: posTop,
+			relativeNum: containerHeight - targetHeight * ratio
+		});
+		const scale = getScale({
+			containerHeight: targetHeight * ratio,
+			containerWidth: targetWidth * ratio,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			top: containerTop + posY,
+			left: containerLeft + posX,
+			width: targetWidth * ratio * scale,
+			height: targetHeight * ratio * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	} else if (backgroundSize === "auto") {
+		const [posLeft = "50%", posTop = "50%"] = backgroundPosition.split(" ");
+		const posX = parsePosition({
+			position: posLeft,
+			relativeNum: containerWidth - targetWidth
+		});
+		const posY = parsePosition({
+			position: posTop,
+			relativeNum: containerHeight - targetHeight
+		});
+		const scale = getScale({
+			containerHeight: targetHeight,
+			containerWidth: targetWidth,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			top: containerTop + posY,
+			left: containerLeft + posX,
+			width: targetWidth * scale,
+			height: targetHeight * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	} else {
+		const [sizeW = "50%", sizeH = "50%"] = backgroundSize.split(" ");
+		const sizeWidth = parsePosition({
+			position: sizeW,
+			relativeNum: containerWidth
+		});
+		const sizeHeight = parsePosition({
+			position: sizeH,
+			relativeNum: containerHeight
+		});
+		const widthRatio = sizeWidth / targetWidth;
+		const heightRatio = sizeHeight / targetHeight;
+		const ratio = Math.min(widthRatio, heightRatio);
+		const [posLeft = "50%", posTop = "50%"] = backgroundPosition.split(" ");
+		const posX = parsePosition({
+			position: posLeft,
+			relativeNum: containerWidth - targetWidth * ratio
+		});
+		const posY = parsePosition({
+			position: posTop,
+			relativeNum: containerHeight - targetHeight * ratio
+		});
+		const scale = getScale({
+			containerHeight: targetHeight * ratio,
+			containerWidth: targetWidth * ratio,
+			hasScalableSrc,
+			offset,
+			targetHeight,
+			targetWidth
+		});
+		return {
+			top: containerTop + posY,
+			left: containerLeft + posX,
+			width: targetWidth * ratio * scale,
+			height: targetHeight * ratio * scale,
+			transform: `translate(0,0) scale(${1 / scale})`
+		};
+	}
+};
+const SRC_SVG_REGEX = /\.svg$/i;
+const getStyleModalImg = ({ hasZoomImg, imgSrc, isSvg, isZoomed, loadedImgEl, offset, shouldRefresh, targetEl }) => {
+	const hasScalableSrc = isSvg || imgSrc?.slice(0, 18) === "data:image/svg+xml" || hasZoomImg || imgSrc !== void 0 && SRC_SVG_REGEX.test(imgSrc);
+	const imgRect = targetEl.getBoundingClientRect();
+	const targetElComputedStyle = window.getComputedStyle(targetEl);
+	const isDivImg = loadedImgEl != null && testDiv(targetEl);
+	const isImgObjectFit = loadedImgEl != null && !isDivImg;
+	const targetHeight = loadedImgEl != null && loadedImgEl.naturalHeight !== 0 ? loadedImgEl.naturalHeight : imgRect.height;
+	const targetWidth = loadedImgEl != null && loadedImgEl.naturalWidth !== 0 ? loadedImgEl.naturalWidth : imgRect.width;
+	const styleImgRegular = getImgRegularStyle({
+		containerHeight: imgRect.height,
+		containerLeft: imgRect.left,
+		containerTop: imgRect.top,
+		containerWidth: imgRect.width,
+		hasScalableSrc,
+		offset,
+		targetHeight,
+		targetWidth
+	});
+	const styleImgObjectFit = isImgObjectFit ? getImgObjectFitStyle({
+		containerHeight: imgRect.height,
+		containerLeft: imgRect.left,
+		containerTop: imgRect.top,
+		containerWidth: imgRect.width,
+		hasScalableSrc,
+		objectFit: targetElComputedStyle.objectFit,
+		objectPosition: targetElComputedStyle.objectPosition,
+		offset,
+		targetHeight,
+		targetWidth
+	}) : void 0;
+	const styleDivImg = isDivImg ? getDivImgStyle({
+		backgroundPosition: targetElComputedStyle.backgroundPosition,
+		backgroundSize: targetElComputedStyle.backgroundSize,
+		containerHeight: imgRect.height,
+		containerLeft: imgRect.left,
+		containerTop: imgRect.top,
+		containerWidth: imgRect.width,
+		hasScalableSrc,
+		offset,
+		targetHeight,
+		targetWidth
+	}) : void 0;
+	const style = {
+		...styleImgRegular,
+		...styleImgObjectFit,
+		...styleDivImg
+	};
+	if (isZoomed) {
+		const viewportX = window.innerWidth / 2;
+		const viewportY = window.innerHeight / 2;
+		const childCenterX = parseFloat(String(style.left ?? 0)) + parseFloat(String(style.width ?? 0)) / 2;
+		const childCenterY = parseFloat(String(style.top ?? 0)) + parseFloat(String(style.height ?? 0)) / 2;
+		const translateX = viewportX - childCenterX;
+		const translateY = viewportY - childCenterY;
+		if (shouldRefresh) style.transitionDuration = "0.01ms";
+		style.transform = `translate(${translateX}px,${translateY}px) scale(1)`;
+	}
+	return style;
+};
+const getStyleGhost = (imgEl) => {
+	if (imgEl == null) return {};
+	if (testSvg(imgEl)) {
+		const { parentElement: parentEl } = imgEl;
+		const rect = imgEl.getBoundingClientRect();
+		if (parentEl == null) return {
+			height: rect.height,
+			left: rect.left,
+			width: rect.width,
+			top: rect.top
+		};
+		else {
+			const parentRect = parentEl.getBoundingClientRect();
+			return {
+				height: rect.height,
+				left: parentRect.left - rect.left,
+				top: parentRect.top - rect.top,
+				width: rect.width
+			};
+		}
+	} else return {
+		height: imgEl.offsetHeight,
+		left: imgEl.offsetLeft,
+		width: imgEl.offsetWidth,
+		top: imgEl.offsetTop
+	};
+};
+const adjustSvgIDs = (svgEl) => {
+	const newIdSuffix = "-zoom";
+	const attrs = [
+		"clip-path",
+		"fill",
+		"mask",
+		"marker-start",
+		"marker-mid",
+		"marker-end"
+	];
+	const idMap = /* @__PURE__ */ new Map();
+	if (svgEl.hasAttribute("id")) {
+		const { id: oldId } = svgEl;
+		const newId = oldId + newIdSuffix;
+		idMap.set(oldId, newId);
+		const svgNode = svgEl;
+		svgNode.id = newId;
+	}
+	svgEl.querySelectorAll("[id]").forEach((el) => {
+		const { id: oldId } = el;
+		const newId = oldId + newIdSuffix;
+		idMap.set(oldId, newId);
+		const node = el;
+		node.id = newId;
+	});
+	idMap.forEach((newId, oldId) => {
+		const urlOldID = `url(#${oldId})`;
+		const urlNewID = `url(#${newId})`;
+		const attrsQuery = attrs.map((attr) => `[${attr}="${urlOldID}"]`).join(", ");
+		svgEl.querySelectorAll(attrsQuery).forEach((usedEl) => {
+			attrs.forEach((attr) => {
+				if (usedEl.getAttribute(attr) === urlOldID) usedEl.setAttribute(attr, urlNewID);
+			});
+		});
+	});
+	svgEl.querySelectorAll("style").forEach((styleEl) => {
+		idMap.forEach((newId, oldId) => {
+			const { textContent } = styleEl;
+			if (textContent !== "") {
+				const styleNode = styleEl;
+				styleNode.textContent = textContent.replaceAll(`#${oldId}`, `#${newId}`);
+			}
+		});
+	});
+};
+//#endregion
+export { adjustSvgIDs, getImgAlt, getImgSrc, getStyleGhost, getStyleModalImg, testDiv, testImg, testImgLoaded, testSvg };

package/dist/provider/base.d.ts

@@ -1,9 +1,9 @@
 import { SearchProviderProps } from "../contexts/search.js";
 import { DefaultSearchDialogProps } from "../components/dialog/search-default.js";
 import { I18nProviderProps } from "../contexts/i18n.js";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProviderProps, UseThemeProps, useTheme } from "next-themes";
 
 //#region src/provider/base.d.ts
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
@@ -15,6 +15,14 @@ interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'
    */
   enabled?: boolean;
 }
+interface ThemeOptions extends ThemeProviderProps {
+  /**
+   * Enable `next-themes`
+   *
+   * @defaultValue true
+   */
+  enabled?: boolean;
+}
 interface RootProviderProps {
   /**
    * `dir` option for Radix UI
@@ -25,16 +33,9 @@ interface RootProviderProps {
    */
   search?: Partial<SearchOptions>;
   /**
-   * Customise options of `next-themes`
+   * Customise options for `next-themes`
    */
-  theme?: Partial<ComponentPropsWithoutRef<typeof ThemeProvider>> & {
-    /**
-     * Enable `next-themes`
-     *
-     * @defaultValue true
-     */
-    enabled?: boolean;
-  };
+  theme?: ThemeOptions;
   i18n?: Omit<I18nProviderProps, 'children'>;
   children?: ReactNode;
 }
@@ -46,4 +47,4 @@ declare function RootProvider({
   i18n
 }: RootProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
+export { RootProvider, RootProviderProps, type UseThemeProps, useTheme };

package/dist/provider/base.js

@@ -3,7 +3,7 @@ import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
 import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider, useTheme } from "next-themes";
 import { DirectionProvider } from "@radix-ui/react-direction";
 //#region src/provider/base.tsx
 const DefaultSearchDialog = lazy(() => import("../components/dialog/search-default.js"));
@@ -32,4 +32,4 @@ function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
 	});
 }
 //#endregion
-export { RootProvider };
+export { RootProvider, useTheme };

package/dist/style.css

@@ -1827,6 +1827,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\(--opacity\,0\) {
+    opacity: var(--opacity,0);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1894,8 +1897,8 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[offset-distance\] {
-    transition-property: offset-distance;
+  .transition-\[opacity\,offset-distance\] {
+    transition-property: opacity,offset-distance;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2000,6 +2003,9 @@
   .\[grid-area\:toc\] {
     grid-area: toc;
   }
+  .\[offset-distance\:var\(--offset-distance\,0\)\] {
+    offset-distance: var(--offset-distance,0);
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.7.13",
+  "version": "16.7.15",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -11,8 +11,8 @@
   "author": "Fuma Nama",
   "repository": "github:fuma-nama/fumadocs",
   "files": [
-    "css/*",
-    "dist/*"
+    "css",
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -141,9 +141,10 @@
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
+    "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "unist-util-visit": "^5.1.0",
-    "@fumadocs/tailwind": "0.0.4"
+    "@fumadocs/tailwind": "0.0.5"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.2",
@@ -155,12 +156,11 @@
     "@types/react-dom": "^19.2.3",
     "fuma-cli": "^0.0.5",
     "react-medium-image-zoom": "^5.4.3",
-    "shiki": "^4.0.2",
     "tailwindcss": "^4.2.2",
     "tsdown": "0.21.7",
     "unified": "^11.0.5",
-    "@fumadocs/cli": "1.3.6",
-    "fumadocs-core": "16.7.13",
+    "@fumadocs/cli": "1.3.7",
+    "fumadocs-core": "16.7.15",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -170,16 +170,12 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "shiki": "*",
-    "fumadocs-core": "16.7.13"
+    "fumadocs-core": "16.7.15"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
     },
-    "shiki": {
-      "optional": true
-    },
     "@takumi-rs/image-response": {
       "optional": true
     },