@pdf-viewer/react 1.9.0-beta.3 → 1.9.0-beta.5

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

@@ -1,29 +1,142 @@
-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 z } from "../../../RPLayout-897cb09d.js";
-import "../../ui/DropDown.js";
-import "../../../contexts/LayoutContainerContext.js";
-import "../../../index-7279fb4e.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 "../../../contexts/IconToolContext.js";
-import "../../../contexts/ToolComponentContext.js";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { useState as L, useRef as B, useCallback as s, useMemo as z, useEffect as X } from "react";
+import { useZoomContext as $ } from "../../../contexts/ZoomContext.js";
+import { ChevronUpIcon as q } from "../../icons/ChevronUpIcon.js";
+import { ZoomInIcon as J } from "../../icons/ZoomInIcon.js";
+import { ZoomOutIcon as K } from "../../icons/ZoomOutIcon.js";
+import { UIButton as C } from "../../ui/Button.js";
+import { u as Q, h as c } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { UIDropDown as Y } from "../../ui/DropDown.js";
+import { useLayoutContainer as M } from "../../../contexts/LayoutContainerContext.js";
+import { G as A } from "../../../index-473557b1.js";
+import { MenuItem as d } from "./MenuItem.js";
+import { MenuSeparator as oo } from "./MenuSeparator.js";
+import { useToolbarComponentContext as to } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as S } from "../../../contexts/IconContext.js";
+import { PAGE_PADDING as P } from "../../../utils/constants.js";
+import { useViewportContext as no } from "../../../contexts/ViewportContext.js";
+import I from "../../ui/RPTooltip.js";
+import { ZoomLevel as x } from "../../../utils/types.js";
+import { getZoomLevel as ro } from "../../../utils/getZoomLevel.js";
+import { useLocalizationContext as eo } from "../../../contexts/LocalizationContext.js";
+import { useDocumentContext as io } from "../../../contexts/RPDocumentContext.js";
+import { useViewModeContext as mo } from "../../../contexts/ViewModeContext.js";
+import { usePagesRotateContext as co } from "../../../contexts/PagesRotateContext.js";
+import { c as po } from "../../../clsx-0c6e471a.js";
+import { useIconToolContext as D } from "../../../contexts/IconToolContext.js";
+import { useToolComponentContext as uo } from "../../../contexts/ToolComponentContext.js";
+const lo = 25, T = 1e3, so = [50, 75, 100, 125, 150, 200, 300, 400], ho = () => {
+  const { zoomInIcon: e } = S(), { zoomInIcon: r } = D();
+  return e || r || /* @__PURE__ */ t(J, {});
+}, fo = () => {
+  const { zoomOutIcon: e } = S(), { zoomOutIcon: r } = D();
+  return e || r || /* @__PURE__ */ t(K, {});
+}, Ro = () => {
+  const { zoomLevel: e, setZoomLevel: r } = $(), { container: N, pagesRef: i } = M(), { zoomTool: h = !0 } = to(), { zoomTool: f = !0 } = uo(), { focusedPage: a } = Q(), { pageRotate: Z } = co(), { pages: b } = io(), { isSmallScreen: W } = no(), { localeMessages: o } = eo(), { viewMode: g } = mo(), [k, E] = L(0), [O, H] = L(!1), v = B(
+    new ResizeObserver((n) => {
+      E(n[0].contentRect.height);
+    })
+  ), y = s(() => {
+    r((n) => {
+      const p = Math.floor(n / 25) * 25;
+      return Math.min(p + 25, T);
+    });
+  }, [r]), G = s(() => {
+    r((n) => {
+      const p = Math.ceil(n / 25) * 25;
+      return Math.min(p - 25, T);
+    });
+  }, [r]), _ = z(() => e <= lo, [e]), U = z(() => e >= T, [e]), m = z(() => {
+    const n = b.get(a);
+    return n ? n.page.getViewport({ scale: 1, rotation: Z[a] }) : null;
+  }, [b, a, Z]), w = s(
+    (n) => {
+      const p = ((m == null ? void 0 : m.width) || 0) + 2 * P, F = ((m == null ? void 0 : m.height) || 0) + 2 * P, R = (i == null ? void 0 : i.clientWidth) || 0, V = (i == null ? void 0 : i.clientHeight) || 0, j = ro(
+        n,
+        R,
+        V,
+        p,
+        F,
+        g
+      );
+      r(j);
+    },
+    [r, m, i]
+  ), l = s(
+    (n) => {
+      typeof n == "number" ? r(n) : w(n);
+    },
+    [r, w]
+  );
+  return X(() => (i && v.current.observe(i), () => {
+    v.current.disconnect();
+  }), [i]), !h || !f ? null : typeof h == "function" ? /* @__PURE__ */ t(h, { zoomLevel: e, setZoomLevel: r }) : typeof f == "function" ? /* @__PURE__ */ t(f, { zoomLevel: e, setZoomLevel: r }) : /* @__PURE__ */ u("div", { className: c["rp-zoom-wrapper"], children: [
+    /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomOutTooltip, children: /* @__PURE__ */ t(
+      C,
+      {
+        disabled: _,
+        onClick: G,
+        "aria-label": o == null ? void 0 : o.zoomOutTooltip,
+        children: /* @__PURE__ */ t(fo, {})
+      }
+    ) }),
+    !W && /* @__PURE__ */ t(
+      Y,
+      {
+        container: N,
+        open: O,
+        onOpenChange: H,
+        triggerComponent: /* @__PURE__ */ t("div", { role: "button", children: /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ u(
+          C,
+          {
+            className: po(
+              c["rp-current-zoom-wrapper"],
+              O && c.active
+            ),
+            "aria-label": o == null ? void 0 : o.zoomSelectTooltip,
+            children: [
+              /* @__PURE__ */ t("span", { className: c["rp-current-zoom-text"], children: e }),
+              /* @__PURE__ */ t("span", { className: c["rp-current-zoom-text"], children: "%" }),
+              /* @__PURE__ */ t(q, { className: c["rp-current-zoom-icon"] })
+            ]
+          }
+        ) }) }),
+        style: { minWidth: "200px" },
+        align: "center",
+        side: "bottom",
+        avoidCollisions: !1,
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            style: { maxHeight: `${k}px`, overflow: "auto" },
+            className: c["rp-zoom-dropdown-content"],
+            children: [
+              /* @__PURE__ */ u(A, { children: [
+                /* @__PURE__ */ t(d, { onClick: () => l(x.ACTUAL), children: o == null ? void 0 : o.zoomActualSize }),
+                /* @__PURE__ */ t(d, { onClick: () => l(x.PAGE_FIT), children: o == null ? void 0 : o.zoomPageFit }),
+                /* @__PURE__ */ t(d, { onClick: () => l(x.PAGE_WIDTH), children: o == null ? void 0 : o.zoomPageWidth })
+              ] }),
+              /* @__PURE__ */ t(oo, {}),
+              /* @__PURE__ */ t(A, { children: so.map((n) => /* @__PURE__ */ u(d, { onClick: () => l(n), children: [
+                n,
+                " %"
+              ] }, n)) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(I, { content: o == null ? void 0 : o.zoomInTooltip, children: /* @__PURE__ */ t(
+      C,
+      {
+        disabled: U,
+        onClick: y,
+        "aria-label": o == null ? void 0 : o.zoomInTooltip,
+        children: /* @__PURE__ */ t(ho, {})
+      }
+    ) })
+  ] });
+};
 export {
-  z as ZoomTool
+  Ro as ZoomTool
 };

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

@@ -1,13 +1,13 @@
 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 { c as d } from "../../../../RPLayout-897cb09d.js";
+import { a as d } from "../../../../ToolbarLayout.module-60c3d6e8.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 }), a = ({ icon: t }) => {
+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 }) => {
   const { download: n } = d(), { localeMessages: o } = p();
   return /* @__PURE__ */ i(f, { localeMessages: o, children: /* @__PURE__ */ i(l, { onClick: n, "aria-label": o == null ? void 0 : o.downloadFileTooltip, children: t || /* @__PURE__ */ i(r, {}) }) });
 };
 export {
-  a as FileDownloadTool
+  c as FileDownloadTool
 };

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

@@ -1,27 +1,27 @@
 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, i as p } from "../../../../RPLayout-897cb09d.js";
+import { u as x, g as p } from "../../../../ToolbarLayout.module-60c3d6e8.js";
 import { useLocalizationContext as C } from "../../../../contexts/LocalizationContext.js";
 import y from "../../../ui/RPTooltip.js";
 import { UIInput as E } from "../../../ui/Input.js";
 const k = () => {
-  const { focusedPage: n, totalPages: s, goToPage: i } = x(), { localeMessages: a } = C(), [r, e] = d(n.toString());
+  const { focusedPage: n, totalPages: s, goToPage: c } = x(), { localeMessages: a } = C(), [r, e] = d(n.toString());
   S(() => {
     e(n.toString());
   }, [n]);
   const m = o((t) => {
     const l = t.target.value;
     e(l);
-  }, []), c = o(async () => {
-    const t = i(r);
+  }, []), i = o(async () => {
+    const t = c(r);
     t.success || e(t.currentPage.toString());
-  }, [i, r, s]), f = o(() => {
+  }, [c, r, s]), f = o(() => {
     e(n.toString());
   }, [n]), P = o(
     (t) => {
-      t.key === "Enter" && c();
+      t.key === "Enter" && i();
     },
-    [c]
+    [i]
   );
   return /* @__PURE__ */ u(h, { children: [
     /* @__PURE__ */ g(y, { content: a == null ? void 0 : a.currentPageTooltip, children: /* @__PURE__ */ g(

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 "../../../../RPLayout-897cb09d.js";
+import { u as s } from "../../../../ToolbarLayout.module-60c3d6e8.js";
 import { useLocalizationContext as u } from "../../../../contexts/LocalizationContext.js";
 import { ViewMode as x, ScrollMode as P } from "../../../../utils/types.js";
 import "../../../../contexts/RPDocumentContext.js";
@@ -29,28 +29,30 @@ import "../../../../contexts/SmoothScrollContext.js";
 import "../../../../contexts/ElementPageContext.js";
 import "../../../../contexts/PagesRotateContext.js";
 import "../../../../contexts/LoaderContext.js";
-import "../../../RPConfig.js";
-import "../../../../contexts/ThemeContext.js";
-import "../../../RPDropFileZone.js";
-import "../../../../contexts/ToolbarComponentContext.js";
 import "../../../../contexts/ToolComponentContext.js";
-import "../../../../SearchCloseButton-ddb9877e.js";
+import "../../../../contexts/IconToolContext.js";
+import "../../../../contexts/OtherToolContext.js";
+import "../../../RPConfig.js";
 import "../../../ui/Input.js";
-import "../../../ui/Checkbox.js";
-import "../../../icons/LoaderIcon.js";
 import "../../../../contexts/IconContext.js";
-import h from "../../../ui/RPTooltip.js";
-import "../../../../Popover-1faa77f6.js";
+import "../../../../contexts/ToolbarComponentContext.js";
 import "../../../../contexts/ViewportContext.js";
-import "../../../../contexts/IconToolContext.js";
-import "../../../ui/DropDown.js";
-import "../MenuItem.js";
-import "../MenuSeparator.js";
+import h from "../../../ui/RPTooltip.js";
+import "../../../../MenuItem.module-bc11d0d3.js";
+import "../../../../DropDown.module-a78567cb.js";
 import "../../../../utils/dateFormatter.js";
-import "../PropertyItem.js";
-import "../../../../contexts/OtherToolContext.js";
-import "../RotateTool.js";
-const ho = ({ icon: m }) => {
+import "../../../../PropertyItem.module-db0150cc.js";
+import "../../../../MenuSeparator.module-89b2ff7f.js";
+import "../../../../RotateTool.module-03987eba.js";
+import "../../../../SearchTool.module-016f3a8d.js";
+import "../../../../Checkbox.module-3edaacbb.js";
+import "../../../icons/LoaderIcon.js";
+import "../../../../RPSplitter.module-13d612c4.js";
+import "../../../../Container.module-f8b5c306.js";
+import "../../../../WrapperLayout.module-147bc943.js";
+import "../../../../RPTheme.module-bd9038da.js";
+import "../../../../contexts/ThemeContext.js";
+const Mo = ({ 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,
@@ -63,5 +65,5 @@ const ho = ({ icon: m }) => {
   ) }) });
 };
 export {
-  ho as NextPageTool
+  Mo 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 "../../../../RPLayout-897cb09d.js";
+import { u as a } from "../../../../ToolbarLayout.module-60c3d6e8.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,13 +1,13 @@
 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 { d as m } from "../../../../RPLayout-897cb09d.js";
+import { b as m } from "../../../../ToolbarLayout.module-60c3d6e8.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 }) => {
+const u = ({ children: o, className: i, localeMessages: t }) => /* @__PURE__ */ r(T, { className: i, content: t == null ? void 0 : t.printTooltip, children: o }), d = ({ icon: o }) => {
   const { print: i } = m(), { localeMessages: t } = f();
   return /* @__PURE__ */ r(u, { localeMessages: t, children: /* @__PURE__ */ r(p, { onClick: i, "aria-label": t == null ? void 0 : t.printTooltip, children: o || /* @__PURE__ */ r(n, {}) }) });
 };
 export {
-  h as PrintTool
+  d as PrintTool
 };

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

@@ -1,5 +1,5 @@
 import { jsx as o, Fragment as l } from "react/jsx-runtime";
-import { h } from "../../../../RPLayout-897cb09d.js";
+import { f as h } from "../../../../ToolbarLayout.module-60c3d6e8.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/ZoomLevelTool.js

@@ -2,32 +2,32 @@ import { jsx as e, Fragment as Z, jsxs as p } from "react/jsx-runtime";
 import { useState as G, useRef as N, useMemo as S, useCallback as z, useEffect as W } from "react";
 import { useZoomContext as k } from "../../../../contexts/ZoomContext.js";
 import { UIButton as E } from "../../../ui/Button.js";
-import { u as y, j as i } from "../../../../RPLayout-897cb09d.js";
+import { u as y, h as i } from "../../../../ToolbarLayout.module-60c3d6e8.js";
 import { UIDropDown as F } from "../../../ui/DropDown.js";
-import { useLayoutContainer as j } from "../../../../contexts/LayoutContainerContext.js";
-import { G as C } from "../../../../index-7279fb4e.js";
+import { useLayoutContainer as R } from "../../../../contexts/LayoutContainerContext.js";
+import { G as C } from "../../../../index-473557b1.js";
 import { MenuItem as l } from "../MenuItem.js";
-import { MenuSeparator as R } from "../MenuSeparator.js";
+import { MenuSeparator as U } from "../MenuSeparator.js";
 import { PAGE_PADDING as g } from "../../../../utils/constants.js";
-import U from "../../../ui/RPTooltip.js";
+import _ from "../../../ui/RPTooltip.js";
 import { ZoomLevel as s } from "../../../../utils/types.js";
-import { getZoomLevel as _ } from "../../../../utils/getZoomLevel.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 } = k(), { container: L, pagesRef: r } = j(), { focusedPage: h } = y(), { rotate: a } = $(), { pages: d } = V(), { localeMessages: o } = O(), { viewMode: P } = B(), [b, w] = G(0), f = N(
+const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: h }) => {
+  const { zoomLevel: v, setZoomLevel: m } = k(), { container: L, pagesRef: r } = R(), { focusedPage: u } = y(), { rotate: a } = $(), { pages: d } = V(), { localeMessages: o } = O(), { viewMode: P } = B(), [b, w] = G(0), f = N(
     new ResizeObserver((t) => {
       w(t[0].contentRect.height);
     })
   ), n = S(() => {
-    const t = d.get(h);
+    const t = d.get(u);
     return t ? t.page.getViewport({ scale: 1, rotation: a + t.defaultRotation }) : null;
-  }, [d, h, a]), x = z(
+  }, [d, u, 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 = _(
+      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,
@@ -50,7 +50,7 @@ const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: u }) => {
     F,
     {
       container: L,
-      triggerComponent: /* @__PURE__ */ e("div", { role: "button", children: /* @__PURE__ */ e(U, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ p(
+      triggerComponent: /* @__PURE__ */ e("div", { role: "button", children: /* @__PURE__ */ e(_, { content: o == null ? void 0 : o.zoomSelectTooltip, children: /* @__PURE__ */ p(
         E,
         {
           className: i["rp-current-zoom-wrapper"],
@@ -58,7 +58,7 @@ const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: u }) => {
           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__ */ e("div", { className: i["rp-zoom-level-icon"], children: h || /* @__PURE__ */ e(q, {}) })
           ]
         }
       ) }) }),
@@ -75,7 +75,7 @@ const J = [50, 75, 100, 125, 150, 200, 300, 400], fo = ({ icon: u }) => {
               /* @__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__ */ e(R, {}),
+            /* @__PURE__ */ e(U, {}),
             /* @__PURE__ */ e(C, { children: J.map((t) => /* @__PURE__ */ p(l, { onClick: () => c(t), children: [
               t,
               " %"

package/dist/components/layout/toolbar/tools/defaults/{TopbarDefaultTools.js → 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 { k as t, S as T, l as y, Z as C, m as b } from "../../../../../RPLayout-897cb09d.js";
+import { i as t } from "../../../../../ToolbarLayout.module-60c3d6e8.js";
 import "../../../../../contexts/DarkModeContext.js";
 import "../../../../../contexts/RotationContext.js";
 import "../../../../../contexts/LayerContext.js";
@@ -26,34 +26,43 @@ import "../../../../../contexts/SmoothScrollContext.js";
 import "../../../../../contexts/ElementPageContext.js";
 import "../../../../../contexts/PagesRotateContext.js";
 import "../../../../../contexts/LoaderContext.js";
+import { useToolComponentContext as y } from "../../../../../contexts/ToolComponentContext.js";
+import { useIconToolContext as C } from "../../../../../contexts/IconToolContext.js";
+import "../../../../../contexts/OtherToolContext.js";
 import "../../../../RPConfig.js";
-import "../../../../../contexts/ThemeContext.js";
-import "../../../../RPDropFileZone.js";
+import { Paginate as R } from "../../Paginate.js";
+import { RPToolbarEnd as v } from "../../RPToolbarEnd.js";
+import { ZoomTool as x } from "../../ZoomTool.js";
+import { SearchTool as I } from "../../SearchTool.js";
 import "../../../../../contexts/ToolbarComponentContext.js";
-import { useToolComponentContext as v } from "../../../../../contexts/ToolComponentContext.js";
+import { useViewportContext as T } from "../../../../../contexts/ViewportContext.js";
 import "../../../../ui/Button.js";
+import "../../../../../RPSplitter.module-13d612c4.js";
+import "../../../../../contexts/IconContext.js";
 import "../../../../ui/RPTooltip.js";
+import "../../../../../Container.module-f8b5c306.js";
+import "../../../../../WrapperLayout.module-147bc943.js";
+import "../../../../../RPTheme.module-bd9038da.js";
+import "../../../../../contexts/ThemeContext.js";
 import "../../../../ui/Input.js";
-import "../../../../ui/DropDown.js";
-import "../../MenuItem.js";
-import "../../MenuSeparator.js";
-import { useIconToolContext as x } from "../../../../../contexts/IconToolContext.js";
-import { useViewportContext as I } from "../../../../../contexts/ViewportContext.js";
-const co = (u) => {
-  const { icons: i, slots: p } = u, { setIcons: m } = x(), { setSlots: s } = v(), [e, a] = d(!1), [l, n] = d(!1), { isSmallScreen: S } = I(), h = () => S ? { gridTemplateColumns: "25% 60% 15%" } : void 0;
+import "../../../../../DropDown.module-a78567cb.js";
+import "../../../../../MenuItem.module-bc11d0d3.js";
+import "../../../../../MenuSeparator.module-89b2ff7f.js";
+const xo = (u) => {
+  const { icons: i, slots: m } = u, { setIcons: p } = C(), { setSlots: e } = y(), [s, a] = d(!1), [l, n] = d(!1), { isSmallScreen: h } = T(), S = () => h ? { gridTemplateColumns: "25% 60% 15%" } : void 0;
   return f(() => {
-    m((r) => ({ ...r, ...i })), a(!0);
-  }, [i, m, e, a]), f(() => {
-    s((r) => ({ ...r, ...p })), n(!0);
-  }, [p, s, l, n]), !e || !l ? null : /* @__PURE__ */ o("div", { "data-rp": "topBar", style: { width: "100%" }, children: /* @__PURE__ */ c("div", { className: t["rp-toolbar-wrapper"], style: h(), children: [
+    p((r) => ({ ...r, ...i })), a(!0);
+  }, [i, p, s, a]), f(() => {
+    e((r) => ({ ...r, ...m })), n(!0);
+  }, [m, e, l, n]), !s || !l ? null : /* @__PURE__ */ o("div", { "data-rp": "topBar", style: { width: "100%" }, children: /* @__PURE__ */ c("div", { className: t["rp-toolbar-wrapper"], style: S(), children: [
     /* @__PURE__ */ c("div", { "data-rp": "topBarLeft", className: t["rp-toolbar-start"], children: [
-      /* @__PURE__ */ o(T, {}),
-      /* @__PURE__ */ o(y, {})
+      /* @__PURE__ */ o(I, {}),
+      /* @__PURE__ */ o(R, {})
     ] }),
-    /* @__PURE__ */ o("div", { "data-rp": "topBarCenter", className: t["rp-toolbar-middle"], children: /* @__PURE__ */ o(C, {}) }),
-    /* @__PURE__ */ o("div", { "data-rp": "topBarRight", className: t["rp-toolbar-end"], children: /* @__PURE__ */ o(b, {}) })
+    /* @__PURE__ */ o("div", { "data-rp": "topBarCenter", className: t["rp-toolbar-middle"], children: /* @__PURE__ */ o(x, {}) }),
+    /* @__PURE__ */ o("div", { "data-rp": "topBarRight", className: t["rp-toolbar-end"], children: /* @__PURE__ */ o(v, {}) })
   ] }) });
 };
 export {
-  co as TopbarDefaultTools
+  xo as RPHorizontalBar
 };

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

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as a, useEffect as f } from "react";
+import { useIconToolContext as p } from "../../../../../contexts/IconToolContext.js";
+import { useToolComponentContext as d } from "../../../../../contexts/ToolComponentContext.js";
+import { ThumbnailTool as I } from "../../ThumbnailTool.js";
+const C = (u) => {
+  const { icons: t, slots: s } = u, { setIcons: e } = p(), { setSlots: n } = d(), [r, c] = a(!1), [l, i] = a(!1);
+  return f(() => {
+    e((o) => ({ ...o, ...t })), c(!0);
+  }, [t, e, r, c]), f(() => {
+    n((o) => ({ ...o, ...s })), i(!0);
+  }, [s, n, l, i]), !r || !l ? null : /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(I, {}) });
+};
+export {
+  C as RPVerticalBar
+};

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 { A as ro } from "../../RPLayout-897cb09d.js";
+import { B as io } from "../../ToolbarLayout.module-60c3d6e8.js";
 import "../../contexts/DarkModeContext.js";
 import "../../utils/types.js";
 import "../../contexts/RotationContext.js";
@@ -27,31 +27,33 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
+import "../RPConfig.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-ddb9877e.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
-import "../../Popover-1faa77f6.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../../contexts/IconToolContext.js";
-import "../ui/DropDown.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "../layout/toolbar/RotateTool.js";
+import "../../PropertyItem.module-db0150cc.js";
+import "../../MenuSeparator.module-89b2ff7f.js";
+import "../../RotateTool.module-03987eba.js";
+import "../../SearchTool.module-016f3a8d.js";
+import "../../Checkbox.module-3edaacbb.js";
+import "../icons/LoaderIcon.js";
+import "../../RPSplitter.module-13d612c4.js";
+import "../../Container.module-f8b5c306.js";
+import "../../WrapperLayout.module-147bc943.js";
+import "../../RPTheme.module-bd9038da.js";
+import "../../contexts/ThemeContext.js";
 import "pdfjs-dist";
 import "../../utils/link_service.js";
 import "../../utils/annotations.js";
 export {
-  ro as AnnotationLayer
+  io as AnnotationLayer
 };

package/dist/components/page/CanvasLayer.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
-import { C as _ } from "../../RPLayout-897cb09d.js";
+import { C as rr } from "../../ToolbarLayout.module-60c3d6e8.js";
 import "../../contexts/DarkModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/LayerContext.js";
@@ -26,29 +26,31 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
+import "../RPConfig.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-ddb9877e.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
-import "../../Popover-1faa77f6.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../../contexts/IconToolContext.js";
-import "../ui/DropDown.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "../layout/toolbar/RotateTool.js";
+import "../../PropertyItem.module-db0150cc.js";
+import "../../MenuSeparator.module-89b2ff7f.js";
+import "../../RotateTool.module-03987eba.js";
+import "../../SearchTool.module-016f3a8d.js";
+import "../../Checkbox.module-3edaacbb.js";
+import "../icons/LoaderIcon.js";
+import "../../RPSplitter.module-13d612c4.js";
+import "../../Container.module-f8b5c306.js";
+import "../../WrapperLayout.module-147bc943.js";
+import "../../RPTheme.module-bd9038da.js";
+import "../../contexts/ThemeContext.js";
 import "../../utils/renderPage.js";
 export {
-  _ as CanvasLayer
+  rr as CanvasLayer
 };

package/dist/components/page/DualPage.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { D as p } from "../../RPLayout-897cb09d.js";
+import { G as p } from "../../ToolbarLayout.module-60c3d6e8.js";
 export {
   p as DualPage
 };