@pdf-viewer/react 1.9.1-rc.0 → 1.9.1-rc.10

package/dist/components/layout/toolbar/ToolbarDefault.js

@@ -1,6 +1,6 @@
 import { jsxs as o, Fragment as p, jsx as r } from "react/jsx-runtime";
 import { useRef as d } from "react";
-import { i as h, c as u, o as t, p as b, q as f } from "../../../ToolbarLayout.module-cd89d275.js";
+import { i as h, c as u, n as t, o as b, p as f } from "../../../ToolbarLayout.module-cbc8e216.js";
 import { useLayoutContainer as v } from "../../../contexts/LayoutContainerContext.js";
 import { useToolbarComponentContext as g } from "../../../contexts/ToolbarComponentContext.js";
 import "../../../contexts/RPDocumentContext.js";
@@ -26,6 +26,7 @@ import "../../../contexts/DownloadContext.js";
 import "../../../contexts/SmoothScrollContext.js";
 import "../../../contexts/ElementPageContext.js";
 import "../../../contexts/PagesRotateContext.js";
+import "../../../contexts/GlobalCurrentPage.js";
 import "../../../contexts/LoaderContext.js";
 import "../../../contexts/ToolComponentContext.js";
 import "../../../contexts/IconToolContext.js";
@@ -44,12 +45,13 @@ import "../../icons/LoaderIcon.js";
 import "../../../contexts/IconContext.js";
 import "../../ui/RPTooltip.js";
 import "../../ui/DropDown.js";
+import "../../../ZoomTool.module-6c5eabbb.js";
 import "./MenuItem.js";
 import "./MenuSeparator.js";
 import { RPHorizontalBar as x } from "./tools/defaults/RPHorizontalBar.js";
 import { RPVerticalBar as C } from "./tools/defaults/RPVerticalBar.js";
-const vr = (a) => {
-  const { children: e } = a, s = d(null), { setContentRef: n } = v(), { active: i } = h(), { showPrintProgress: c } = g(), { progress: l } = u(), { percentage: m } = l || {};
+const xr = (a) => {
+  const { children: e } = a, n = d(null), { setContentRef: s } = v(), { active: i } = h(), { showPrintProgress: c } = g(), { progress: l } = u(), { percentage: m } = l || {};
   return /* @__PURE__ */ o(p, { children: [
     /* @__PURE__ */ o("div", { className: t["rp-toolbar-layout"], children: [
       /* @__PURE__ */ r("div", { "data-rp": "topbar", className: t["rp-topbar-content"], children: /* @__PURE__ */ r(x, {}) }),
@@ -62,16 +64,16 @@ const vr = (a) => {
               "data-rp": "thumbnailSidebar",
               hidden: !i,
               className: t["rp-thumbnails-wrapper"],
-              children: /* @__PURE__ */ r(b, { show: i, ref: s })
+              children: /* @__PURE__ */ r(b, { show: i, ref: n })
             }
           )
         ] }),
-        /* @__PURE__ */ r("div", { ref: n, className: t["rp-pages"], children: e })
+        /* @__PURE__ */ r("div", { ref: s, className: t["rp-pages"], children: e })
       ] })
     ] }),
     c && m ? /* @__PURE__ */ r(f, { percentage: m }) : null
   ] });
 };
 export {
-  vr as ToolbarDefault
+  xr as ToolbarDefault
 };

package/dist/components/layout/toolbar/ZoomTool.js

@@ -1,30 +1,130 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../contexts/ZoomContext.js";
-import "../../icons/ChevronUpIcon.js";
-import "../../icons/ZoomInIcon.js";
-import "../../icons/ZoomOutIcon.js";
-import "../../ui/Button.js";
-import { Z as A } from "../../../ToolbarLayout.module-cd89d275.js";
-import "../../ui/DropDown.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../index-f4a9ae4d.js";
-import "./MenuItem.js";
-import "./MenuSeparator.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/IconContext.js";
-import "../../../utils/constants.js";
-import "../../../contexts/ViewportContext.js";
-import "../../ui/RPTooltip.js";
-import "../../../utils/types.js";
-import "../../../utils/getZoomLevel.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/RPDocumentContext.js";
-import "../../../contexts/ViewModeContext.js";
-import "../../../contexts/PagesRotateContext.js";
-import "../../../clsx-0c6e471a.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../contexts/ToolComponentContext.js";
+import { jsx as t, jsxs as c, Fragment as y } from "react/jsx-runtime";
+import { useState as T, useRef as D, useCallback as x, useMemo as h, useEffect as G } from "react";
+import { useZoomContext as _ } from "../../../contexts/ZoomContext.js";
+import { ChevronUpIcon as F } from "../../icons/ChevronUpIcon.js";
+import { ZoomInIcon as H } from "../../icons/ZoomInIcon.js";
+import { ZoomOutIcon as R } from "../../icons/ZoomOutIcon.js";
+import { UIButton as z } from "../../ui/Button.js";
+import { c as e } from "../../../ZoomTool.module-6c5eabbb.js";
+import { UIDropDown as U } from "../../ui/DropDown.js";
+import { useLayoutContainer as j } from "../../../contexts/LayoutContainerContext.js";
+import { G as b } from "../../../index-f4a9ae4d.js";
+import { MenuItem as u } from "./MenuItem.js";
+import { MenuSeparator as B } from "./MenuSeparator.js";
+import { useToolbarComponentContext as V } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as O } from "../../../contexts/IconContext.js";
+import { useViewportContext as X } from "../../../contexts/ViewportContext.js";
+import a from "../../ui/RPTooltip.js";
+import { ZoomLevel as p } from "../../../utils/types.js";
+import { useLocalizationContext as $ } from "../../../contexts/LocalizationContext.js";
+import { c as q } from "../../../clsx-0c6e471a.js";
+import { useIconToolContext as Z } from "../../../contexts/IconToolContext.js";
+import { useToolComponentContext as J } from "../../../contexts/ToolComponentContext.js";
+const K = 25, I = 1e3, Q = [50, 75, 100, 125, 150, 200, 300, 400], Y = () => {
+  const { zoomInIcon: r } = O(), { zoomInIcon: n } = Z();
+  return r || n || /* @__PURE__ */ t(H, {});
+}, g = () => {
+  const { zoomOutIcon: r } = O(), { zoomOutIcon: n } = Z();
+  return r || n || /* @__PURE__ */ t(R, {});
+}, Oo = () => {
+  const { zoomLevel: r, setZoomLevel: n, currentZoom: i } = _(), { container: v, pagesRef: d } = j(), { zoomTool: l = !0 } = V(), { zoomTool: f = !0 } = J(), { isSmallScreen: A } = X(), { localeMessages: o } = $(), [w, L] = T(0), [s, S] = T(!1), C = D(
+    new ResizeObserver((m) => {
+      L(m[0].contentRect.height);
+    })
+  ), P = x(() => {
+    n(() => {
+      const m = Math.floor(i * 100 / 25) * 25;
+      return Math.min(m + 25, I);
+    });
+  }, [n, i]), N = x(() => {
+    n(() => {
+      const m = Math.ceil(i * 100 / 25) * 25;
+      return Math.min(m - 25, I);
+    });
+  }, [n, i]), k = h(() => i * 100 <= K, [i]), E = h(() => i * 100 >= I, [i]);
+  G(() => (d && C.current.observe(d), () => {
+    C.current.disconnect();
+  }), [d]);
+  const W = h(() => {
+    switch (r) {
+      case p.ACTUAL:
+        return o == null ? void 0 : o.zoomActualSize;
+      case p.PAGE_FIT:
+        return o == null ? void 0 : o.zoomPageFit;
+      case p.PAGE_WIDTH:
+        return o == null ? void 0 : o.zoomPageWidth;
+    }
+    return r;
+  }, [r, o]);
+  return !l || !f ? null : typeof l == "function" ? /* @__PURE__ */ t(l, { zoomLevel: r, setZoomLevel: n }) : typeof f == "function" ? /* @__PURE__ */ t(f, { zoomLevel: r, setZoomLevel: n }) : /* @__PURE__ */ c("div", { className: e["rp-zoom-wrapper"], children: [
+    /* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ t(
+      z,
+      {
+        disabled: k,
+        onClick: N,
+        "aria-label": o == null ? void 0 : o.zoomOutTooltip,
+        children: /* @__PURE__ */ t(g, {})
+      }
+    ) }),
+    !A && /* @__PURE__ */ t(
+      U,
+      {
+        container: v,
+        open: s,
+        onOpenChange: S,
+        triggerComponent: /* @__PURE__ */ t("div", { role: "button", children: /* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ c(
+          z,
+          {
+            className: q(
+              e["rp-current-zoom-wrapper"],
+              s && e.active
+            ),
+            "aria-label": o == null ? void 0 : o.zoomSelectTooltip,
+            children: [
+              typeof r == "number" ? /* @__PURE__ */ c(y, { children: [
+                /* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: r }),
+                /* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: "%" })
+              ] }) : /* @__PURE__ */ t("span", { className: e["rp-current-zoom-text"], children: W }),
+              /* @__PURE__ */ t(F, { className: e["rp-current-zoom-icon"] })
+            ]
+          }
+        ) }) }),
+        style: { minWidth: "200px" },
+        align: "center",
+        side: "bottom",
+        avoidCollisions: !1,
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            style: { maxHeight: `${w}px`, overflow: "auto" },
+            className: e["rp-zoom-dropdown-content"],
+            children: [
+              /* @__PURE__ */ c(b, { children: [
+                /* @__PURE__ */ t(u, { onClick: () => n(p.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
+                /* @__PURE__ */ t(u, { onClick: () => n(p.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
+                /* @__PURE__ */ t(u, { onClick: () => n(p.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
+              ] }),
+              /* @__PURE__ */ t(B, {}),
+              /* @__PURE__ */ t(b, { children: Q.map((m) => /* @__PURE__ */ c(u, { onClick: () => n(m), children: [
+                m,
+                " %"
+              ] }, m)) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(a, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ t(
+      z,
+      {
+        disabled: E,
+        onClick: P,
+        "aria-label": o == null ? void 0 : o.zoomInTooltip,
+        children: /* @__PURE__ */ t(Y, {})
+      }
+    ) })
+  ] });
+};
 export {
-  A as ZoomTool
+  Oo as ZoomTool
 };

package/dist/components/layout/toolbar/tools/FileDownloadTool.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { FileDownloadDefaultIcon as r } from "../../../icons/FileDownloadDefaultIcon.js";
 import { UIButton as l } from "../../../ui/Button.js";
-import { b as d } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { b as d } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import m from "../../../ui/RPTooltip.js";
 import { useLocalizationContext as p } from "../../../../contexts/LocalizationContext.js";
 const f = ({ children: t, className: n, localeMessages: o }) => /* @__PURE__ */ i(m, { className: n, content: o == null ? void 0 : o.downloadFileTooltip, children: t }), c = ({ icon: t }) => {

package/dist/components/layout/toolbar/tools/InputPageTool.js

@@ -1,6 +1,6 @@
 import { jsxs as u, Fragment as h, jsx as g } from "react/jsx-runtime";
 import { useState as d, useEffect as S, useCallback as o } from "react";
-import { u as x, j as p } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { u as x, j as p } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import { useLocalizationContext as C } from "../../../../contexts/LocalizationContext.js";
 import y from "../../../ui/RPTooltip.js";
 import { UIInput as E } from "../../../ui/Input.js";

package/dist/components/layout/toolbar/tools/NextPageTool.js

@@ -2,7 +2,7 @@ import { jsx as i, Fragment as l } from "react/jsx-runtime";
 import { useMemo as d } from "react";
 import { ChevronUpIcon as c } from "../../../icons/ChevronUpIcon.js";
 import { UIButton as f } from "../../../ui/Button.js";
-import { u as s } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { u as s } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import { useLocalizationContext as u } from "../../../../contexts/LocalizationContext.js";
 import { ViewMode as x, ScrollMode as P } from "../../../../utils/types.js";
 import "../../../../contexts/RPDocumentContext.js";
@@ -28,6 +28,7 @@ import "../../../../contexts/DownloadContext.js";
 import "../../../../contexts/SmoothScrollContext.js";
 import "../../../../contexts/ElementPageContext.js";
 import "../../../../contexts/PagesRotateContext.js";
+import "../../../../contexts/GlobalCurrentPage.js";
 import "../../../../contexts/LoaderContext.js";
 import "../../../../contexts/ToolComponentContext.js";
 import "../../../../contexts/IconToolContext.js";
@@ -46,12 +47,13 @@ import "../../../icons/LoaderIcon.js";
 import "../../../../contexts/IconContext.js";
 import h from "../../../ui/RPTooltip.js";
 import "../../../ui/DropDown.js";
+import "../../../../ZoomTool.module-6c5eabbb.js";
 import "../MenuItem.js";
 import "../MenuSeparator.js";
 import "../../../../utils/dateFormatter.js";
 import "../PropertyItem.js";
 import "../RotateTool.js";
-const Lo = ({ icon: m }) => {
+const To = ({ icon: m }) => {
   const { focusedPage: t, nextPage: n, totalPages: r } = s(), { localeMessages: o } = u(), { viewMode: p } = g(), { scrollMode: e } = C(), a = d(() => p === x.DUAL_PAGE && e === P.PAGE_SCROLLING && t === r - 1 || t === r, [t, r, p, e]);
   return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(h, { content: o == null ? void 0 : o.nextPageTooltip, children: /* @__PURE__ */ i(
     f,
@@ -64,5 +66,5 @@ const Lo = ({ icon: m }) => {
   ) }) });
 };
 export {
-  Lo as NextPageTool
+  To as NextPageTool
 };

package/dist/components/layout/toolbar/tools/PreviousPageTool.js

@@ -1,7 +1,7 @@
 import { jsx as r, Fragment as e } from "react/jsx-runtime";
 import { ChevronUpIcon as p } from "../../../icons/ChevronUpIcon.js";
 import { UIButton as m } from "../../../ui/Button.js";
-import { u as a } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { u as a } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import { useLocalizationContext as u } from "../../../../contexts/LocalizationContext.js";
 import P from "../../../ui/RPTooltip.js";
 const h = ({ icon: t }) => {

package/dist/components/layout/toolbar/tools/PrintTool.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { PrintDefaultTool as n } from "../../../icons/PrintDefaultIcon.js";
 import { UIButton as p } from "../../../ui/Button.js";
-import { c as m } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { c as m } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import { useLocalizationContext as f } from "../../../../contexts/LocalizationContext.js";
 import T from "../../../ui/RPTooltip.js";
 const u = ({ children: o, className: i, localeMessages: t }) => /* @__PURE__ */ r(T, { className: i, content: t == null ? void 0 : t.printTooltip, children: o }), h = ({ icon: o }) => {

package/dist/components/layout/toolbar/tools/ThumbnailTool.js

@@ -1,5 +1,5 @@
 import { jsx as o, Fragment as l } from "react/jsx-runtime";
-import { i as h } from "../../../../ToolbarLayout.module-cd89d275.js";
+import { i as h } from "../../../../ToolbarLayout.module-cbc8e216.js";
 import { ThumbnailIcon as p } from "../../../icons/Thumbnail.js";
 import { UIButton as u } from "../../../ui/Button.js";
 import a from "../../../ui/RPTooltip.js";

package/dist/components/layout/toolbar/tools/ZoomInTool.js

@@ -1,25 +1,25 @@
-import { jsx as t, Fragment as f } from "react/jsx-runtime";
-import { useCallback as d, useMemo as u } from "react";
-import { useZoomContext as I } from "../../../../contexts/ZoomContext.js";
-import { ZoomInIcon as a } from "../../../icons/ZoomInIcon.js";
+import { jsx as r, Fragment as c } from "react/jsx-runtime";
+import { useCallback as f, useMemo as d } from "react";
+import { useZoomContext as u } from "../../../../contexts/ZoomContext.js";
+import { ZoomInIcon as I } from "../../../icons/ZoomInIcon.js";
 import { UIButton as Z } from "../../../ui/Button.js";
-import h from "../../../ui/RPTooltip.js";
-import { useLocalizationContext as s } from "../../../../contexts/LocalizationContext.js";
+import a from "../../../ui/RPTooltip.js";
+import { useLocalizationContext as h } from "../../../../contexts/LocalizationContext.js";
 import { MAX_ZOOM_SCALE as i } from "../../../../utils/constants.js";
 const A = ({ icon: n }) => {
-  const { zoomLevel: r, setZoomLevel: m } = I(), { localeMessages: o } = s(), e = d(() => {
-    m((p) => {
-      const c = Math.floor(p / 25) * 25;
-      return Math.min(c + 25, i);
+  const { currentZoom: t, setZoomLevel: m } = u(), { localeMessages: o } = h(), e = f(() => {
+    m(() => {
+      const p = Math.floor(t * 100 / 25) * 25;
+      return Math.min(p + 25, i);
     });
-  }, [m]), l = u(() => r >= i, [r]);
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(h, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ t(
+  }, [m, t]), l = d(() => t >= i, [t]);
+  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(a, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ r(
     Z,
     {
       disabled: l,
       onClick: e,
       "aria-label": o == null ? void 0 : o.zoomInTooltip,
-      children: n || /* @__PURE__ */ t(a, {})
+      children: n || /* @__PURE__ */ r(I, {})
     }
   ) }) });
 };

package/dist/components/layout/toolbar/tools/ZoomLevelTool.js

@@ -1,82 +1,56 @@
-import { jsx as e, Fragment as Z, jsxs as p } from "react/jsx-runtime";
-import { useState as k, useRef as G, useMemo as N, useCallback as z, useEffect as S } from "react";
-import { useZoomContext as W } from "../../../../contexts/ZoomContext.js";
-import { UIButton as E } from "../../../ui/Button.js";
-import { u as y, k as i } from "../../../../ToolbarLayout.module-cd89d275.js";
-import { UIDropDown as F } from "../../../ui/DropDown.js";
-import { useLayoutContainer as R } from "../../../../contexts/LayoutContainerContext.js";
-import { G as C } from "../../../../index-f4a9ae4d.js";
-import { MenuItem as l } from "../MenuItem.js";
-import { MenuSeparator as U } from "../MenuSeparator.js";
-import { PAGE_PADDING as g } from "../../../../utils/constants.js";
-import _ from "../../../ui/RPTooltip.js";
-import { ZoomLevel as s } from "../../../../utils/types.js";
-import { getZoomLevel as j } from "../../../../utils/getZoomLevel.js";
-import { useLocalizationContext as O } from "../../../../contexts/LocalizationContext.js";
-import { useDocumentContext as V } from "../../../../contexts/RPDocumentContext.js";
-import { useViewModeContext as B } from "../../../../contexts/ViewModeContext.js";
-import { useRotationContext as $ } from "../../../../contexts/RotationContext.js";
-import { ChevronDownIcon as q } from "../../../icons/ChevronDownIcon.js";
-const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: u }) => {
-  const { zoomLevel: v, setZoomLevel: m } = W(), { container: L, pagesRef: r } = R(), { focusedPage: h } = y(), { rotate: a } = $(), { pages: d } = V(), { localeMessages: o } = O(), { viewMode: P } = B(), [b, w] = k(0), f = G(
+import { jsx as r, Fragment as z, jsxs as i } from "react/jsx-runtime";
+import { useState as v, useRef as x, useEffect as C } from "react";
+import { useZoomContext as L } from "../../../../contexts/ZoomContext.js";
+import { UIButton as T } from "../../../ui/Button.js";
+import { c as e } from "../../../../ZoomTool.module-6c5eabbb.js";
+import { UIDropDown as w } from "../../../ui/DropDown.js";
+import { useLayoutContainer as I } from "../../../../contexts/LayoutContainerContext.js";
+import { G as h } from "../../../../index-f4a9ae4d.js";
+import { MenuItem as m } from "../MenuItem.js";
+import { MenuSeparator as b } from "../MenuSeparator.js";
+import A from "../../../ui/RPTooltip.js";
+import { ZoomLevel as p } from "../../../../utils/types.js";
+import { useLocalizationContext as N } from "../../../../contexts/LocalizationContext.js";
+import { ChevronDownIcon as P } from "../../../icons/ChevronDownIcon.js";
+const R = [50, 75, 100, 125, 150, 200, 300, 400], _ = ({ icon: l }) => {
+  const { zoomLevel: u, setZoomLevel: n } = L(), { container: a, pagesRef: c } = I(), { localeMessages: o } = N(), [f, s] = v(0), d = x(
     new ResizeObserver((t) => {
-      w(t[0].contentRect.height);
+      s(t[0].contentRect.height);
     })
-  ), n = N(() => {
-    const t = d.get(h);
-    return t ? t.page.getViewport({ scale: 1, rotation: a + t.defaultRotation }) : null;
-  }, [d, h, a]), x = z(
-    (t) => {
-      const A = ((n == null ? void 0 : n.width) || 0) + 2 * g, D = ((n == null ? void 0 : n.height) || 0) + 2 * g, H = (r == null ? void 0 : r.clientWidth) || 0, I = (r == null ? void 0 : r.clientHeight) || 0, T = j(
-        t,
-        H,
-        I,
-        A,
-        D,
-        P
-      );
-      m(T);
-    },
-    [m, n, r]
-  ), c = z(
-    (t) => {
-      typeof t == "number" ? m(t) : x(t);
-    },
-    [m, x]
   );
-  return S(() => (r && f.current.observe(r), () => {
-    f.current.disconnect();
-  }), [r]), /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(
-    F,
+  return C(() => (c && d.current.observe(c), () => {
+    d.current.disconnect();
+  }), [c]), /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
+    w,
     {
-      container: L,
-      triggerComponent: /* @__PURE__ */ e("div", { role: "button", children: /* @__PURE__ */ e(_, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ p(
-        E,
+      container: a,
+      triggerComponent: /* @__PURE__ */ r("div", { role: "button", children: /* @__PURE__ */ r(A, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ i(
+        T,
         {
-          className: i["rp-current-zoom-wrapper"],
+          className: e["rp-current-zoom-wrapper"],
           "aria-label": o == null ? void 0 : o.zoomSelectTooltip,
           children: [
-            /* @__PURE__ */ e("span", { className: i["rp-current-zoom-text"], children: v }),
-            /* @__PURE__ */ e("span", { className: i["rp-current-zoom-text"], children: "%" }),
-            /* @__PURE__ */ e("div", { className: i["rp-zoom-level-icon"], children: u || /* @__PURE__ */ e(q, {}) })
+            /* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: u }),
+            /* @__PURE__ */ r("span", { className: e["rp-current-zoom-text"], children: "%" }),
+            /* @__PURE__ */ r("div", { className: e["rp-zoom-level-icon"], children: l || /* @__PURE__ */ r(P, {}) })
           ]
         }
       ) }) }),
       style: { minWidth: "200px" },
       align: "center",
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          style: { maxHeight: `${b}px`, overflow: "auto" },
-          className: i["rp-zoom-dropdown-content"],
+          style: { maxHeight: `${f}px`, overflow: "auto" },
+          className: e["rp-zoom-dropdown-content"],
           children: [
-            /* @__PURE__ */ p(C, { children: [
-              /* @__PURE__ */ e(l, { onClick: () => c(s.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
-              /* @__PURE__ */ e(l, { onClick: () => c(s.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
-              /* @__PURE__ */ e(l, { onClick: () => c(s.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
+            /* @__PURE__ */ i(h, { children: [
+              /* @__PURE__ */ r(m, { onClick: () => n(p.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
+              /* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
+              /* @__PURE__ */ r(m, { onClick: () => n(p.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
             ] }),
-            /* @__PURE__ */ e(U, {}),
-            /* @__PURE__ */ e(C, { children: J.map((t) => /* @__PURE__ */ p(l, { onClick: () => c(t), children: [
+            /* @__PURE__ */ r(b, {}),
+            /* @__PURE__ */ r(h, { children: R.map((t) => /* @__PURE__ */ i(m, { onClick: () => n(t), children: [
               t,
               " %"
             ] }, t)) })
@@ -87,5 +61,5 @@ const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: u }) => {
   ) });
 };
 export {
-  fo as ZoomLevelTool
+  _ as ZoomLevelTool
 };

package/dist/components/layout/toolbar/tools/ZoomOutTool.js

@@ -1,28 +1,28 @@
-import { jsx as t, Fragment as p } from "react/jsx-runtime";
-import { useMemo as c, useCallback as O } from "react";
-import { useZoomContext as d } from "../../../../contexts/ZoomContext.js";
-import { UIButton as f } from "../../../ui/Button.js";
+import { jsx as r, Fragment as c } from "react/jsx-runtime";
+import { useMemo as l, useCallback as p } from "react";
+import { useZoomContext as O } from "../../../../contexts/ZoomContext.js";
+import { UIButton as d } from "../../../ui/Button.js";
 import Z from "../../../ui/RPTooltip.js";
-import { useLocalizationContext as a } from "../../../../contexts/LocalizationContext.js";
-import { ZoomOutIcon as h } from "../../../icons/ZoomOutIcon.js";
-import { MIN_ZOOM_SCALE as C, MAX_ZOOM_SCALE as s } from "../../../../utils/constants.js";
-const I = ({ icon: r }) => {
-  const { zoomLevel: m, setZoomLevel: i } = d(), { localeMessages: o } = a(), n = c(() => m <= C, [m]), e = O(() => {
-    i((u) => {
-      const l = Math.ceil(u / 25) * 25;
-      return Math.min(l - 25, s);
+import { useLocalizationContext as f } from "../../../../contexts/LocalizationContext.js";
+import { ZoomOutIcon as a } from "../../../icons/ZoomOutIcon.js";
+import { MIN_ZOOM_SCALE as h, MAX_ZOOM_SCALE as C } from "../../../../utils/constants.js";
+const A = ({ icon: m }) => {
+  const { currentZoom: t, setZoomLevel: n } = O(), { localeMessages: o } = f(), i = l(() => t <= h, [t]), e = p(() => {
+    n(() => {
+      const u = Math.ceil(t * 100 / 25) * 25;
+      return Math.min(u - 25, C);
     });
-  }, [i]);
-  return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(Z, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ t(
-    f,
+  }, [n, t]);
+  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(Z, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ r(
+    d,
     {
-      disabled: n,
+      disabled: i,
       onClick: e,
       "aria-label": o == null ? void 0 : o.zoomOutTooltip,
-      children: r || /* @__PURE__ */ t(h, {})
+      children: m || /* @__PURE__ */ r(a, {})
     }
   ) }) });
 };
 export {
-  I as ZoomOutTool
+  A as ZoomOutTool
 };

package/dist/components/layout/toolbar/tools/defaults/RPHorizontalBar.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { useState as d, useEffect as f } from "react";
 import "../../../../../contexts/RPDocumentContext.js";
 import "../../../../../contexts/DocumentPasswordContext.js";
-import { l as t, S as y, m as C, Z as R, n as v } from "../../../../../ToolbarLayout.module-cd89d275.js";
+import { k as t, S as y, l as C, m as R } from "../../../../../ToolbarLayout.module-cbc8e216.js";
 import "../../../../../contexts/DarkModeContext.js";
 import "../../../../../contexts/RotationContext.js";
 import "../../../../../contexts/LayerContext.js";
@@ -25,13 +25,14 @@ import "../../../../../contexts/DownloadContext.js";
 import "../../../../../contexts/SmoothScrollContext.js";
 import "../../../../../contexts/ElementPageContext.js";
 import "../../../../../contexts/PagesRotateContext.js";
+import "../../../../../contexts/GlobalCurrentPage.js";
 import "../../../../../contexts/LoaderContext.js";
-import { useToolComponentContext as x } from "../../../../../contexts/ToolComponentContext.js";
-import { useIconToolContext as I } from "../../../../../contexts/IconToolContext.js";
+import { useToolComponentContext as v } from "../../../../../contexts/ToolComponentContext.js";
+import { useIconToolContext as x } from "../../../../../contexts/IconToolContext.js";
 import "../../../../../contexts/OtherToolContext.js";
 import "../../../../RPConfig.js";
 import "../../../Container.js";
-import { useViewportContext as T } from "../../../../../contexts/ViewportContext.js";
+import { useViewportContext as I } from "../../../../../contexts/ViewportContext.js";
 import "../../../../../contexts/ToolbarComponentContext.js";
 import "../../../WrapperLayout.js";
 import "../../../../../contexts/ThemeContext.js";
@@ -39,11 +40,13 @@ import "../../../../RPDropFileZone.js";
 import "../../../../ui/Button.js";
 import "../../../../ui/RPTooltip.js";
 import "../../../../ui/Input.js";
+import "../../../../../ZoomTool.module-6c5eabbb.js";
 import "../../../../ui/DropDown.js";
 import "../../MenuItem.js";
 import "../../MenuSeparator.js";
-const So = (u) => {
-  const { icons: i, slots: m } = u, { setIcons: p } = I(), { setSlots: s } = x(), [e, a] = d(!1), [l, n] = d(!1), { isSmallScreen: S } = T(), h = () => S ? { gridTemplateColumns: "25% 60% 15%" } : void 0;
+import { ZoomTool as T } from "../../ZoomTool.js";
+const Co = (u) => {
+  const { icons: i, slots: m } = u, { setIcons: p } = x(), { setSlots: s } = v(), [e, a] = d(!1), [l, n] = d(!1), { isSmallScreen: S } = I(), h = () => S ? { gridTemplateColumns: "25% 60% 15%" } : void 0;
   return f(() => {
     p((r) => ({ ...r, ...i })), a(!0);
   }, [i, p, e, a]), f(() => {
@@ -53,10 +56,10 @@ const So = (u) => {
       /* @__PURE__ */ o(y, {}),
       /* @__PURE__ */ o(C, {})
     ] }),
-    /* @__PURE__ */ o("div", { "data-rp": "topBarCenter", className: t["rp-toolbar-middle"], children: /* @__PURE__ */ o(R, {}) }),
-    /* @__PURE__ */ o("div", { "data-rp": "topBarRight", className: t["rp-toolbar-end"], children: /* @__PURE__ */ o(v, {}) })
+    /* @__PURE__ */ o("div", { "data-rp": "topBarCenter", className: t["rp-toolbar-middle"], children: /* @__PURE__ */ o(T, {}) }),
+    /* @__PURE__ */ o("div", { "data-rp": "topBarRight", className: t["rp-toolbar-end"], children: /* @__PURE__ */ o(R, {}) })
   ] }) });
 };
 export {
-  So as RPHorizontalBar
+  Co as RPHorizontalBar
 };

package/dist/components/page/AnnotationLayer.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
-import { F as to } from "../../ToolbarLayout.module-cd89d275.js";
+import { E as mo } from "../../ToolbarLayout.module-cbc8e216.js";
 import "../../contexts/DarkModeContext.js";
 import "../../utils/types.js";
 import "../../contexts/RotationContext.js";
@@ -26,6 +26,7 @@ import "../../contexts/DownloadContext.js";
 import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
+import "../../contexts/GlobalCurrentPage.js";
 import "../../contexts/LoaderContext.js";
 import "../../contexts/ToolComponentContext.js";
 import "../../contexts/IconToolContext.js";
@@ -45,6 +46,7 @@ import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
 import "../ui/RPTooltip.js";
 import "../ui/DropDown.js";
+import "../../ZoomTool.module-6c5eabbb.js";
 import "../layout/toolbar/MenuItem.js";
 import "../layout/toolbar/MenuSeparator.js";
 import "../../utils/dateFormatter.js";
@@ -54,5 +56,5 @@ import "pdfjs-dist";
 import "../../utils/link_service.js";
 import "../../utils/annotations.js";
 export {
-  to as AnnotationLayer
+  mo as AnnotationLayer
 };