@react-pdf-kit/viewer 2.0.0-beta.9 → 2.0.0-rc.1

package/dist/components/layout/WrapperLayout.js

@@ -7,7 +7,7 @@ import "../../contexts/RPDocumentContext.js";
 import "../../utils/hooks/useLoadPdf.js";
 import "pdfjs-dist";
 import "../../utils/types.js";
-import "../../th_TH-d627cd51.js";
+import "../../de_DE-a553b162.js";
 import "../../utils/getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";

package/dist/components/layout/sidebar/RPSidebar.js

@@ -1,21 +1,24 @@
-import "react/jsx-runtime";
-import "react";
-import "../../icons/Thumbnail.js";
-import "../../ui/Button.js";
-import { a0 as Co } from "../../../ToolbarLayout.module-8d56d12b.js";
-import "./RPSplitter.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../utils/constants.js";
+import { jsx as t, Fragment as f, jsxs as l } from "react/jsx-runtime";
+import { useState as T, useRef as s, useCallback as C, useMemo as I } from "react";
+import { ThumbnailIcon as x } from "../../icons/Thumbnail.js";
+import { UIButton as R } from "../../ui/Button.js";
+import { c as m, R as w } from "../../../RPSplitter-f6acf13b.js";
+import { Thumbnails as v } from "./Thumbnails.js";
+import { useThumbnailContext as N } from "../../../contexts/ThumbnailsContext.js";
+import { useToolbarComponentContext as S } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as k } from "../../../contexts/IconContext.js";
+import y from "../../ui/RPTooltip.js";
+import { useLocalizationContext as B } from "../../../contexts/LocalizationContext.js";
+import { useIconToolContext as P } from "../../../contexts/IconToolContext.js";
+import { THUMBNAIL_MIN_WIDTH as W } from "../../../utils/constants.js";
 import "../../../clsx-0c6e471a.js";
 import "../../../utils/withRef.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../ui/Input.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "./Thumbnail.js";
+import "../../icons/LoaderIcon.js";
+import "../../../PaginationContext-9217cab4.js";
 import "../../../utils/types.js";
-import "../../../th_TH-d627cd51.js";
+import "../../../de_DE-a553b162.js";
 import "../../../contexts/ScrollModeContext.js";
 import "../../../utils/appConsole.js";
 import "../../../contexts/InitialStateContext.js";
@@ -28,113 +31,77 @@ import "../../../contexts/DocumentPasswordContext.js";
 import "../../../utils/hooks/usePdfProperties.js";
 import "../../../utils/convertPdfDate.js";
 import "../../../utils/formatFileSize.js";
-import "../../../contexts/DarkModeContext.js";
-import "../../../utils/hooks/useDarkMode.js";
-import "../../../contexts/RotationContext.js";
-import "../../../contexts/LayerContext.js";
-import "../../../contexts/ZoomContext.js";
-import "../../../utils/getZoomLevel.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../contexts/ViewModeContext.js";
 import "../../../contexts/GlobalCurrentPage.js";
 import "../../../contexts/EventCallbackContext.js";
-import "../../../utils/hooks/useDebounce.js";
+import "../../../contexts/ViewModeContext.js";
 import "../../../contexts/VirtualScrollContext.js";
 import "../../../contexts/VirtualGridContext.js";
-import "../../../contexts/SelectionModeContext.js";
-import "../../../contexts/FullScreenContext.js";
-import "../../../utils/hooks/useFullScreen.js";
-import "../../../contexts/FileInputContext.js";
-import "../../../contexts/DropFileZoneContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../../utils/highlight.js";
-import "../../../utils/charators.js";
+import "../../../utils/smoothScrollTo.js";
 import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/ZoomContext.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/RotationContext.js";
+import "../../../utils/hooks/useDebounce.js";
 import "../../../contexts/PagesRotateContext.js";
-import "../../../contexts/HighlightContext.js";
-import "../../../utils/hooks/useHighlight.js";
-import "../../../contexts/LicenseContext.js";
-import "../../../utils/hooks/useLicense.js";
-import "../../../contexts/DownloadContext.js";
 import "../../../contexts/SmoothScrollContext.js";
-import "../../../contexts/ElementPageContext.js";
-import "../../../utils/const.js";
 import "../../../utils/getScrollDistance.js";
-import "../../../utils/getElementPositionInPage.js";
+import "../../../utils/calculatePage.js";
+import "../../../contexts/RenderQueueProvider.js";
 import "../../../utils/Queue.js";
 import "../../../utils/renderPage.js";
-import "../../../contexts/LoaderContext.js";
-import "../../icons/LoaderIcon.js";
-import "../../../contexts/OtherToolContext.js";
-import "../../../contexts/ThemeContext.js";
-import "../Container.js";
-import "../../../contexts/ViewportContext.js";
-import "../WrapperLayout.js";
-import "../../RPDropFileZone.js";
-import "../../icons/LightPdfIcon.js";
-import "../../icons/DarkPdfIcon.js";
-import "../../../utils/hooks/useLocalization.js";
-import "../../../LayoutWrapper-6224491f.js";
-import "../../../SearchCloseButton-08d57275.js";
-import "../../icons/CloseIcon.js";
-import "../../ui/Checkbox.js";
-import "../../../index-c9a2990a.js";
-import "react-dom";
-import "../../icons/CheckIcon.js";
-import "../../ui/DropDown.js";
-import "../../../index-3bf64864.js";
-import "../../../floating-ui.react-dom-d22a10b4.js";
-import "../toolbar/MenuItem.js";
-import "../toolbar/MenuSeparator.js";
-import "../../../utils/dateFormatter.js";
-import "../toolbar/PropertyItem.js";
-import "../../../RotateTool.module-67946714.js";
 import "../../../utils/hooks/useInfiniteScroll.js";
-import "../../../utils/link_service.js";
-import "../../../utils/annotations.js";
-import "../../../utils/sanitizeExternalUrl.js";
-import "../../page/searchHighlight.js";
-import "../../page/CustomElement.js";
-import "../../../utils/calculatePage.js";
-import "../../../utils/hooks/useMousePressed.js";
-import "../../../utils/hooks/useGrabScroll.js";
-import "../../../utils/hooks/usePinch.js";
-import "../../ui/PasswordModal.js";
-import "../../../utils/approximateFragtion.js";
-import "../../../utils/hooks/useCopyText.js";
-import "../../../utils/getWordPositionInPage.js";
-import "../../../utils/smoothScrollTo.js";
-import "../toolbar/FileUploadTool.js";
-import "../../icons/FileUploadDefaultIcon.js";
-import "../toolbar/DarkModeTool.js";
-import "../../icons/MoonIcon.js";
-import "../../icons/SunIcon.js";
-import "../../icons/ThreeDotIcon.js";
-import "../toolbar/DocumentProperties.js";
-import "../../icons/InfoIcon.js";
-import "../toolbar/RotateTool.js";
-import "../../icons/ClockwiseIcon.js";
-import "../../../utils/hooks/useRotate.js";
-import "../toolbar/ViewModeTool.js";
-import "../../icons/DualPageIcon.js";
-import "../../icons/SinglePageIcon.js";
-import "../toolbar/ScrollModeTool.js";
-import "../../icons/PageScrollingIcon.js";
-import "../../icons/VerticalScrollingIcon.js";
-import "../../icons/HorizontalScrollingIcon.js";
-import "../../icons/FileDownloadDefaultIcon.js";
-import "../../icons/PrintDefaultIcon.js";
-import "../toolbar/FullScreenTool.js";
-import "../../icons/FullScreenIcon.js";
-import "../../icons/GoToDownIcon.js";
-import "../toolbar/SelectionModeTool.js";
-import "../../icons/TextSelectionDefaultIcon.js";
-import "../../icons/HandModeDefaultIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../../utils/zoom.js";
-import "../../icons/SearchIcon.js";
-import "../../icons/ClearIcon.js";
+import "../../../utils/hooks/useThumbnail.js";
+import "../../../index-c0faa594.js";
+import "react-dom";
+import "../../../index-e3ee9457.js";
+import "../../../floating-ui.react-dom-5ec29bd6.js";
+import "../../../index-655864a7.js";
+import "../../../utils/hooks/useLocalization.js";
+const $ = () => {
+  const { thumbnailIcon: o } = k(), { thumbnailIcon: p } = P();
+  return o || p || /* @__PURE__ */ t(x, {});
+}, Ut = () => {
+  const { active: o, setActive: p } = N(), [c, u] = T(W), e = s(null), a = s(null), { thumbnailTool: i, sidebarEnable: h } = S(), { localeMessages: r } = B(), n = C(() => {
+    p((d) => !d);
+  }, []), b = I(() => typeof i != "boolean" && i ? /* @__PURE__ */ t(i, { onClick: n, active: o }) : i ? /* @__PURE__ */ t(y, { content: r == null ? void 0 : r.thumbnailTooltip, children: /* @__PURE__ */ t(
+    R,
+    {
+      onClick: n,
+      active: o,
+      "aria-label": r == null ? void 0 : r.thumbnailTooltip,
+      children: /* @__PURE__ */ t($, {})
+    }
+  ) }) : null, [i, o, n, r]);
+  return /* @__PURE__ */ t(f, { children: h && /* @__PURE__ */ l(
+    "div",
+    {
+      style: { "--rp-thumbnail-width": `${c}px` },
+      className: m["rp-sidebar-content-wrapper"],
+      "data-rp": "sidebar",
+      children: [
+        /* @__PURE__ */ t("div", { ref: a, className: m["rp-sidebar-content"], children: b }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "data-rp": "thumbnailSidebar",
+            className: `${m["rp-thumbnails-wrapper"]} ${o ? "" : m["rp-thumbnails-wrapper-hidden"]}`,
+            children: [
+              /* @__PURE__ */ t(v, { show: o, ref: e }),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  onWidthChange: u,
+                  thumbnailRef: e,
+                  leftSidebarRef: a
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  Co as RPSidebar
+  Ut as RPSidebar
 };

package/dist/components/layout/sidebar/RPSplitter.js

@@ -1,61 +1,8 @@
-import { jsx as y } from "react/jsx-runtime";
-import { useRef as f, useState as B, useCallback as v, useEffect as w } from "react";
-import { THUMBNAIL_MIN_WIDTH as _ } from "../../../utils/constants.js";
-import { useLayoutContainer as I } from "../../../contexts/LayoutContainerContext.js";
-const L = {
-  "rp-thumbnail-dragger": "_rp-thumbnail-dragger_wfl8g_2",
-  "rp-thumbnail-dragger-dragging": "_rp-thumbnail-dragger-dragging_wfl8g_19"
-}, R = {
-  "rp-thumbnail-dragger": "_rp-thumbnail-dragger_1iiu0_1",
-  "rp-thumbnail-dragger-dragging": "_rp-thumbnail-dragger-dragging_1iiu0_18"
-}, W = (s) => {
-  s.preventDefault(), s.stopPropagation();
-}, H = (s) => {
-  const { onWidthChange: e, thumbnailRef: x, leftSidebarRef: E, isRPLayout: S } = s, i = f(null), M = f(0), c = f(null), [a, D] = B(_), { container: p } = I(), P = v((r) => {
-    var u, l, m, o, g, d;
-    W(r);
-    const t = ((l = (u = i.current) == null ? void 0 : u.getBoundingClientRect()) == null ? void 0 : l.left) ?? 0, n = ((o = (m = x.current) == null ? void 0 : m.getBoundingClientRect()) == null ? void 0 : o.width) ?? 0;
-    c.current = { x: t, y: 0 }, M.current = n, (g = i.current) == null || g.classList.add(L["rp-thumbnail-dragger-dragging"]), (d = i.current) == null || d.classList.add(R["rp-thumbnail-dragger-dragging"]);
-  }, []), h = v((r) => {
-    var t, n;
-    W(r), c.current = null, (t = i.current) == null || t.classList.remove(L["rp-thumbnail-dragger-dragging"]), (n = i.current) == null || n.classList.remove(R["rp-thumbnail-dragger-dragging"]);
-  }, []), b = v(
-    (r) => {
-      if (!c.current)
-        return;
-      const t = r.clientX - c.current.x, n = Math.max(
-        _,
-        Math.min(M.current + t, a)
-      );
-      e == null || e(n), W(r);
-    },
-    [e, a]
-  );
-  return w(() => {
-    if (!p)
-      return;
-    const r = new ResizeObserver(([t]) => {
-      var o, g, d;
-      const n = ((o = i.current) == null ? void 0 : o.offsetWidth) ?? 0, u = ((d = (g = E.current) == null ? void 0 : g.getBoundingClientRect()) == null ? void 0 : d.width) ?? 0, l = t.contentRect.width / 2, m = n + u;
-      D(l - m);
-    });
-    return r.observe(p), () => {
-      r.disconnect();
-    };
-  }, [p, E]), w(() => {
-    var t;
-    (((t = x.current) == null ? void 0 : t.clientWidth) ?? _) > a && (e == null || e(a));
-  }, [a, e]), w(() => (window.addEventListener("pointermove", b), window.addEventListener("pointerup", h), () => {
-    window.removeEventListener("pointermove", b), window.removeEventListener("pointerup", h);
-  }), [b, h]), /* @__PURE__ */ y(
-    "div",
-    {
-      ref: i,
-      className: S ? R["rp-thumbnail-dragger"] : L["rp-thumbnail-dragger"],
-      onPointerDown: P
-    }
-  );
-};
+import "react/jsx-runtime";
+import "react";
+import { R as e } from "../../../RPSplitter-f6acf13b.js";
+import "../../../utils/constants.js";
+import "../../../contexts/LayoutContainerContext.js";
 export {
-  H as RPSplitter
+  e as RPSplitter
 };

package/dist/components/layout/sidebar/Thumbnail.js

@@ -1,140 +1,145 @@
-import "react/jsx-runtime";
-import "react";
-import { $ as Do } from "../../../ToolbarLayout.module-8d56d12b.js";
-import "../../../clsx-0c6e471a.js";
-import "../../icons/LoaderIcon.js";
-import "../../../contexts/PagesRotateContext.js";
-import "../../../contexts/RPDocumentContext.js";
-import "../../../contexts/DocumentPasswordContext.js";
-import "../../../contexts/DarkModeContext.js";
-import "../../../contexts/RotationContext.js";
-import "../../../contexts/LayerContext.js";
-import "../../../contexts/ZoomContext.js";
-import "../../../contexts/ViewModeContext.js";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { useRef as h, useState as N, useMemo as _, useCallback as S, useEffect as w } from "react";
+import { c as I } from "../../../clsx-0c6e471a.js";
+import { LoaderIcon as L } from "../../icons/LoaderIcon.js";
+import { u as j } from "../../../PaginationContext-9217cab4.js";
+import { usePagesRotateContext as q } from "../../../contexts/PagesRotateContext.js";
+import { useRenderQueue as D } from "../../../contexts/RenderQueueProvider.js";
+import { useDocumentContext as M } from "../../../contexts/RPDocumentContext.js";
+import "../../../utils/types.js";
+import "../../../de_DE-a553b162.js";
 import "../../../contexts/ScrollModeContext.js";
-import "../../../contexts/VirtualScrollContext.js";
-import "../../../contexts/VirtualGridContext.js";
-import "../../../contexts/SelectionModeContext.js";
+import "../../../utils/appConsole.js";
 import "../../../contexts/InitialStateContext.js";
-import "../../../contexts/FullScreenContext.js";
-import "../../../contexts/FileInputContext.js";
-import "../../../contexts/DropFileZoneContext.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../contexts/DimensionPagesContext.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/HighlightContext.js";
-import "../../../contexts/LicenseContext.js";
-import "../../../contexts/DownloadContext.js";
-import "../../../contexts/SmoothScrollContext.js";
-import "../../../contexts/ElementPageContext.js";
 import "../../../contexts/GlobalCurrentPage.js";
-import "../../../contexts/LoaderContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../contexts/OtherToolContext.js";
 import "../../../contexts/EventCallbackContext.js";
-import "../../../contexts/ThemeContext.js";
-import "../../../contexts/ConfigContext.js";
-import "pdfjs-dist";
-import "../Container.js";
-import "../../../contexts/ViewportContext.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "./RPSplitter.js";
-import "../WrapperLayout.js";
-import "../../RPDropFileZone.js";
-import "../../../LayoutWrapper-6224491f.js";
-import "../../ui/Button.js";
-import "../../../SearchCloseButton-08d57275.js";
-import "../../ui/Input.js";
-import "../../ui/Checkbox.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../ui/DropDown.js";
-import "../toolbar/MenuItem.js";
-import "../toolbar/MenuSeparator.js";
-import "../../../utils/dateFormatter.js";
-import "../toolbar/PropertyItem.js";
-import "../../../RotateTool.module-67946714.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../../utils/types.js";
-import "../../../th_TH-d627cd51.js";
-import "../../../utils/highlight.js";
-import "../../../utils/charators.js";
-import "../../../utils/Queue.js";
-import "../../../utils/renderPage.js";
-import "../../icons/Thumbnail.js";
-import "../../../utils/withRef.js";
-import "../../../utils/hooks/useInfiniteScroll.js";
+import "../../../contexts/ViewModeContext.js";
+import "../../../contexts/VirtualScrollContext.js";
+import "../../../contexts/VirtualGridContext.js";
+import "../../../utils/smoothScrollTo.js";
+import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/ZoomContext.js";
 import "../../../utils/constants.js";
-import "../../../utils/link_service.js";
-import "../../../utils/annotations.js";
-import "../../../utils/sanitizeExternalUrl.js";
-import "../../page/searchHighlight.js";
-import "../../../utils/const.js";
-import "../../page/CustomElement.js";
-import "../../../utils/appConsole.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "../../../contexts/RotationContext.js";
 import "../../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
 import "../../../utils/getThumbnailViewport.js";
+import "../../../contexts/ConfigContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
 import "../../../utils/hooks/usePdfProperties.js";
 import "../../../utils/convertPdfDate.js";
 import "../../../utils/formatFileSize.js";
-import "../../../utils/getZoomLevel.js";
 import "../../../utils/hooks/useDebounce.js";
-import "../../../utils/hooks/useLicense.js";
+import "../../../contexts/SmoothScrollContext.js";
 import "../../../utils/getScrollDistance.js";
-import "../../../utils/getElementPositionInPage.js";
 import "../../../utils/calculatePage.js";
-import "../../../utils/hooks/useMousePressed.js";
-import "../../../utils/hooks/useGrabScroll.js";
-import "../../../utils/hooks/usePinch.js";
-import "../../ui/PasswordModal.js";
-import "../../../utils/hooks/useLocalization.js";
-import "../../../utils/approximateFragtion.js";
-import "../../../utils/hooks/useCopyText.js";
-import "../../../utils/getWordPositionInPage.js";
-import "../../../utils/smoothScrollTo.js";
-import "../toolbar/FileUploadTool.js";
-import "../../icons/FileUploadDefaultIcon.js";
-import "../../../index-3bf64864.js";
-import "../../../index-c9a2990a.js";
-import "react-dom";
-import "../../../floating-ui.react-dom-d22a10b4.js";
-import "../toolbar/DarkModeTool.js";
-import "../../icons/MoonIcon.js";
-import "../../icons/SunIcon.js";
-import "../../../utils/hooks/useDarkMode.js";
-import "../../icons/ThreeDotIcon.js";
-import "../../icons/CloseIcon.js";
-import "../toolbar/DocumentProperties.js";
-import "../../icons/InfoIcon.js";
-import "../toolbar/RotateTool.js";
-import "../../icons/ClockwiseIcon.js";
-import "../../../utils/hooks/useRotate.js";
-import "../toolbar/ViewModeTool.js";
-import "../../icons/DualPageIcon.js";
-import "../../icons/SinglePageIcon.js";
-import "../../icons/CheckIcon.js";
-import "../toolbar/ScrollModeTool.js";
-import "../../icons/PageScrollingIcon.js";
-import "../../icons/VerticalScrollingIcon.js";
-import "../../icons/HorizontalScrollingIcon.js";
-import "../../icons/FileDownloadDefaultIcon.js";
-import "../../icons/PrintDefaultIcon.js";
-import "../toolbar/FullScreenTool.js";
-import "../../icons/FullScreenIcon.js";
-import "../../../utils/hooks/useFullScreen.js";
-import "../../icons/GoToDownIcon.js";
-import "../toolbar/SelectionModeTool.js";
-import "../../icons/TextSelectionDefaultIcon.js";
-import "../../icons/HandModeDefaultIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../../utils/zoom.js";
-import "../../icons/SearchIcon.js";
-import "../../icons/ClearIcon.js";
-import "../../../utils/hooks/useHighlight.js";
-import "../../icons/LightPdfIcon.js";
-import "../../icons/DarkPdfIcon.js";
+import "../../../utils/Queue.js";
+import "../../../utils/renderPage.js";
+const i = {
+  "rp-thumbnail-wrapper": "_rp-thumbnail-wrapper_3fenb_1",
+  "rp-thumbnail-text": "_rp-thumbnail-text_3fenb_10",
+  "rp-thumbnail": "_rp-thumbnail_3fenb_1",
+  "rp-thumbnail-active": "_rp-thumbnail-active_3fenb_22",
+  "rp-thumbnail-loader": "_rp-thumbnail-loader_3fenb_31"
+}, $t = ($) => {
+  const { pageNumber: t, isFocused: p, viewport: s } = $, { goToPage: d } = j(), { pageRotate: P } = q(), o = h(null), n = D(), { pages: a } = M(), [m, b] = N(null), c = h(!1), f = h(), R = _(() => p ? i["rp-thumbnail-active"] : "", [p]), u = _(() => ({
+    width: Math.round(s.width),
+    height: Math.round(s.height)
+  }), [s]), g = S(() => {
+    t && d(t);
+  }, [d, t]);
+  return w(() => {
+    const e = a.get(t);
+    f.current === e || (b(null), f.current = e);
+  }, [a, t]), w(() => {
+    const e = a.get(t);
+    if (!o.current || !t || !e || m)
+      return;
+    const l = new IntersectionObserver((y) => {
+      y.forEach((C) => {
+        if (c.current) {
+          c.current = !1, n.removeQueue(`thumbnail-${t}`);
+          return;
+        }
+        if (C.isIntersecting) {
+          const v = document.createElement("canvas");
+          c.current = !0, n.enqueue(
+            `thumbnail-${t}`,
+            {
+              page: e.page,
+              canvasElem: v,
+              options: {
+                scale: 1
+              },
+              onLoaded: () => {
+                v.toBlob((x) => {
+                  if (!x)
+                    return;
+                  const E = URL.createObjectURL(x);
+                  b(E);
+                });
+              }
+            },
+            2
+          );
+        }
+      });
+    });
+    return o.current && l.observe(o.current), () => {
+      l.disconnect(), n.removeQueue(`thumbnail-${t}`);
+    };
+  }, [n, t, a, m]), /* @__PURE__ */ k(
+    "div",
+    {
+      onClick: g,
+      onKeyDown: (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), g());
+      },
+      id: `page-${t}`,
+      className: i["rp-thumbnail-wrapper"],
+      ref: o,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Go to page ${t}`,
+      "aria-current": p ? "page" : void 0,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              transform: `rotate(${P[t || 0]}deg)`
+            },
+            className: I(R, i["rp-thumbnail"]),
+            "aria-hidden": "true",
+            children: m ? /* @__PURE__ */ r(
+              "img",
+              {
+                src: m,
+                width: u.width,
+                height: u.height,
+                alt: `Page ${t} thumbnail`,
+                "aria-hidden": "true"
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                className: i["rp-thumbnail-loader"],
+                style: {
+                  width: `${u.width}px`,
+                  height: `${u.height}px`
+                },
+                children: /* @__PURE__ */ r(L, { "aria-hidden": "true" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: i["rp-thumbnail-text"], "aria-hidden": "true", children: t })
+      ]
+    }
+  );
+};
 export {
-  Do as Thumbnail
+  $t as Thumbnail
 };