@pdf-viewer/react 1.9.0-beta.4 → 1.9.0-beta.6

package/dist/components/RPController.js

@@ -1,17 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as o, useId as V, useMemo as T } from "react";
-import { P as w, f as D, T as E, g as k } from "../RPLayout-5892502c.js";
-import { DarkModeProvider as x } from "../contexts/DarkModeContext.js";
-import { ViewMode as F, ScrollMode as G, SelectionMode as b } from "../utils/types.js";
-import { RotateProvider as y } from "../contexts/RotationContext.js";
-import { LayerProvider as _ } from "../contexts/LayerContext.js";
-import { ZoomProvider as z } from "../contexts/ZoomContext.js";
-import { ViewModeProvider as A } from "../contexts/ViewModeContext.js";
-import { ScrollModeProvider as N } from "../contexts/ScrollModeContext.js";
-import { VirtualScrollProvider as Z } from "../contexts/VirtualScrollContext.js";
-import { VirtualGridProvider as j } from "../contexts/VirtualGridContext.js";
-import { SelectionModeProvider as H } from "../contexts/SelectionModeContext.js";
-import { InitialStateProvider as O } from "../contexts/InitialStateContext.js";
+import { useState as e, useId as V, useMemo as T } from "react";
+import { P as w, S as D, e as E, T as k, f as x } from "../ToolbarLayout.module-88476995.js";
+import { DarkModeProvider as F } from "../contexts/DarkModeContext.js";
+import { ViewMode as G, ScrollMode as b, SelectionMode as y } from "../utils/types.js";
+import { RotateProvider as _ } from "../contexts/RotationContext.js";
+import { LayerProvider as z } from "../contexts/LayerContext.js";
+import { ZoomProvider as A } from "../contexts/ZoomContext.js";
+import { ViewModeProvider as N } from "../contexts/ViewModeContext.js";
+import { ScrollModeProvider as Z } from "../contexts/ScrollModeContext.js";
+import { VirtualScrollProvider as j } from "../contexts/VirtualScrollContext.js";
+import { VirtualGridProvider as H } from "../contexts/VirtualGridContext.js";
+import { SelectionModeProvider as O } from "../contexts/SelectionModeContext.js";
+import { InitialStateProvider as Q } from "../contexts/InitialStateContext.js";
 import { FullScreenProvider as U } from "../contexts/FullScreenContext.js";
 import { FileInputProvider as W } from "../contexts/FileInputContext.js";
 import { DropFileZoneProvider as X } from "../contexts/DropFileZoneContext.js";
@@ -20,11 +20,11 @@ import { DimensionPagesProvider as q } from "../contexts/DimensionPagesContext.j
 import { LocalizationProvider as B } from "../contexts/LocalizationContext.js";
 import { HighlightProvider as J } from "../contexts/HighlightContext.js";
 import { useWatermark as K } from "../utils/hooks/useWatermark.js";
-import { DownloadProvider as Q } from "../contexts/DownloadContext.js";
-import { SmoothScrollProvider as Y } from "../contexts/SmoothScrollContext.js";
-import { ElementPageProvider as rr } from "../contexts/ElementPageContext.js";
-import { PagesRotateProvider as or } from "../contexts/PagesRotateContext.js";
-const Dr = (n) => {
+import { DownloadProvider as Y } from "../contexts/DownloadContext.js";
+import { SmoothScrollProvider as rr } from "../contexts/SmoothScrollContext.js";
+import { ElementPageProvider as er } from "../contexts/ElementPageContext.js";
+import { PagesRotateProvider as ir } from "../contexts/PagesRotateContext.js";
+const Er = (n) => {
   const {
     children: l,
     darkMode: d = !1,
@@ -32,17 +32,17 @@ const Dr = (n) => {
     initialRotation: a = 0,
     textLayer: c = !0,
     initialPage: P = 1,
-    initialViewMode: f = F.SINGLE_PAGE,
+    initialViewMode: f = G.SINGLE_PAGE,
     initialThumbnailsVisible: h = !1,
     initialSearch: p,
     initialScale: s,
-    initialScrollMode: v = G.VERTICAL_SCROLLING,
+    initialScrollMode: v = b.VERTICAL_SCROLLING,
     locale: u = "en_US",
     localization: S,
     downloadFilename: M
-  } = n, [g, R] = o(null), [e, C] = o(null), [L, I] = o(null), i = V(), t = T(() => `rp-instance-${i.replace(/:/g, "-")}`, [i]);
+  } = n, [R, g] = e(null), [i, C] = e(null), [L, I] = e(null), o = V(), t = T(() => `rp-instance-${o.replace(/:/g, "-")}`, [o]);
   return K(t), /* @__PURE__ */ r(
-    O,
+    Q,
     {
       instanceId: t,
       initialScale: s,
@@ -50,35 +50,35 @@ const Dr = (n) => {
       initialScrollMode: v,
       initialRotation: a,
       initialViewMode: f,
-      children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(B, { locale: u, localization: S, children: /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(Z, { children: /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(H, { initialSelectionMode: b.TEXT, children: /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(or, { children: /* @__PURE__ */ r(_, { textLayer: c, children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ r(rr, { children: /* @__PURE__ */ r(B, { locale: u, localization: S, children: /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(Z, { children: /* @__PURE__ */ r(O, { initialSelectionMode: y.TEXT, children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(ir, { children: /* @__PURE__ */ r(z, { textLayer: c, children: /* @__PURE__ */ r(
         $.Provider,
         {
           value: {
-            container: g,
-            contentRef: e,
+            container: R,
+            contentRef: i,
             pagesRef: L,
-            setContainer: R,
+            setContainer: g,
             setContentRef: C,
             setPagesRef: I
           },
-          children: /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(q, { children: /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(
-            x,
+          children: /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(q, { children: /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(
+            F,
             {
               darkMode: d,
               onDarkModeChange: m,
-              children: /* @__PURE__ */ r(D, { initialSearch: p, children: /* @__PURE__ */ r(J, { children: /* @__PURE__ */ r(rr, { children: /* @__PURE__ */ r(
-                E,
+              children: /* @__PURE__ */ r(D, { initialSearch: p, children: /* @__PURE__ */ r(J, { children: /* @__PURE__ */ r(er, { children: /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
+                k,
                 {
                   initialThumbnailsVisible: h,
-                  children: /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(U, { elementRef: e, children: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
-                    Q,
+                  children: /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(U, { elementRef: i, children: /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
+                    Y,
                     {
                       downloadFilename: M,
                       children: /* @__PURE__ */ r(W, { children: l })
                     }
                   ) }) }) })
                 }
-              ) }) }) })
+              ) }) }) }) })
             }
           ) }) }) })
         }
@@ -87,5 +87,5 @@ const Dr = (n) => {
   );
 };
 export {
-  Dr as RPController
+  Er as RPController
 };

package/dist/components/RPDropFileZone.js

@@ -1,39 +1,37 @@
-import { jsxs as p, Fragment as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, Fragment as p, jsx as o } from "react/jsx-runtime";
 import { useCallback as u } from "react";
-import { c as D } from "../clsx-0c6e471a.js";
-import { useDropFileZoneContext as g } from "../contexts/DropFileZoneContext.js";
-import { LightPdfIcon as h } from "./icons/LightPdfIcon.js";
-import { DarkPdfIcon as C } from "./icons/DarkPdfIcon.js";
-import { useDarkModeContext as x } from "../contexts/DarkModeContext.js";
-import { useToolbarComponentContext as F } from "../contexts/ToolbarComponentContext.js";
-import { useLocalizationContext as v } from "../contexts/LocalizationContext.js";
-import { useToolComponentContext as z } from "../contexts/ToolComponentContext.js";
-import '../assets/RPDropFileZone.css';const s = {
-  "rp-drop-zone": "_rp-drop-zone_1sc50_1",
-  "rp-drop-zone-transparent": "_rp-drop-zone-transparent_1sc50_15"
-}, Z = {}, N = () => {
-  const { dragging: a, handleDragLeave: l, handleDrop: d } = g(), { darkMode: t } = x(), { dropFileZone: r = !0 } = F(), { dropFileZone: e = !0 } = z(), { localeMessages: n } = v(), m = u((f) => {
+import { t as D, c as a } from "../RPTheme.module-bd9038da.js";
+import { c as g } from "../clsx-0c6e471a.js";
+import { useDropFileZoneContext as h } from "../contexts/DropFileZoneContext.js";
+import { LightPdfIcon as C } from "./icons/LightPdfIcon.js";
+import { DarkPdfIcon as x } from "./icons/DarkPdfIcon.js";
+import { useDarkModeContext as F } from "../contexts/DarkModeContext.js";
+import { useToolbarComponentContext as v } from "../contexts/ToolbarComponentContext.js";
+import { useLocalizationContext as Z } from "../contexts/LocalizationContext.js";
+import { useToolComponentContext as k } from "../contexts/ToolComponentContext.js";
+const R = () => {
+  const { dragging: s, handleDragLeave: l, handleDrop: m } = h(), { darkMode: t } = F(), { dropFileZone: r = !0 } = v(), { dropFileZone: e = !0 } = k(), { localeMessages: n } = Z(), d = u((f) => {
     f.preventDefault();
   }, []);
-  if (!r || !e || !a)
+  if (!r || !e || !s)
     return null;
-  const c = () => typeof r == "function" ? /* @__PURE__ */ o(r, {}) : typeof e == "function" ? /* @__PURE__ */ o(e, {}) : /* @__PURE__ */ p(i, { children: [
-    /* @__PURE__ */ o("div", { children: t ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(h, {}) }),
+  const c = () => typeof r == "function" ? /* @__PURE__ */ o(r, {}) : typeof e == "function" ? /* @__PURE__ */ o(e, {}) : /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ o("div", { children: t ? /* @__PURE__ */ o(x, {}) : /* @__PURE__ */ o(C, {}) }),
     /* @__PURE__ */ o("p", { children: n == null ? void 0 : n.dragDropFileMessage })
   ] });
-  return /* @__PURE__ */ p(i, { children: [
-    /* @__PURE__ */ o("div", { className: D(s["rp-drop-zone"], t ? Z["rp-dark-mode"] : ""), children: /* @__PURE__ */ o(c, {}) }),
+  return /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ o("div", { className: g(a["rp-drop-zone"], t ? D["rp-dark-mode"] : ""), children: /* @__PURE__ */ o(c, {}) }),
     /* @__PURE__ */ o(
       "div",
       {
-        className: s["rp-drop-zone-transparent"],
-        onDragOver: m,
+        className: a["rp-drop-zone-transparent"],
+        onDragOver: d,
         onDragLeave: l,
-        onDrop: d
+        onDrop: m
       }
     )
   ] });
 };
 export {
-  N as RPDropFileZone
+  R as RPDropFileZone
 };

package/dist/components/RPPages.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { R as to } from "../RPLayout-5892502c.js";
+import { R as eo } from "../ToolbarLayout.module-88476995.js";
 import "../contexts/VirtualScrollContext.js";
 import "../contexts/RPDocumentContext.js";
 import "../contexts/DocumentPasswordContext.js";
@@ -27,28 +27,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 "../clsx-0c6e471a.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-cbf182aa.js";
 import "./ui/Input.js";
-import "./ui/Checkbox.js";
-import "./icons/LoaderIcon.js";
 import "../contexts/IconContext.js";
-import "./ui/RPTooltip.js";
+import "../contexts/ToolbarComponentContext.js";
 import "../contexts/ViewportContext.js";
-import "./ui/DropDown.js";
-import "../contexts/IconToolContext.js";
-import "./layout/toolbar/MenuItem.js";
-import "./layout/toolbar/MenuSeparator.js";
+import "./ui/RPTooltip.js";
+import "../MenuItem.module-bc11d0d3.js";
+import "../clsx-0c6e471a.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/hooks/useMousePressed.js";
 import "../utils/hooks/useGrabScroll.js";
 import "../utils/hooks/usePinch.js";
@@ -56,5 +59,5 @@ import "../utils/hooks/useDebounce.js";
 import "./ui/PasswordModal.js";
 import "../utils/calculatePage.js";
 export {
-  to as RPPages
+  eo as RPPages
 };

package/dist/components/RPProvider.js

@@ -1,23 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { useMemo as p } from "react";
-import { DocumentProvider as s } from "../contexts/RPDocumentContext.js";
-import { DocumentPasswordProvider as l } from "../contexts/DocumentPasswordContext.js";
-import { RPController as P } from "./RPController.js";
-import { LoaderProvider as f } from "../contexts/LoaderContext.js";
-const w = (t) => {
-  const { children: n, src: r, characterMap: m, onLoaded: d, onLoadError: i, loaderImage: c, ...a } = t, e = p(() => typeof r == "string" ? r : `${Date.now()}`, [r]);
-  return /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
-    s,
+import { DocumentProvider as a } from "../contexts/RPDocumentContext.js";
+import { DocumentPasswordProvider as f } from "../contexts/DocumentPasswordContext.js";
+import { RPController as s } from "./RPController.js";
+import { LoaderProvider as P } from "../contexts/LoaderContext.js";
+import { ToolComponentProvider as h } from "../contexts/ToolComponentContext.js";
+import { IconToolProvider as u } from "../contexts/IconToolContext.js";
+import { OtherToolProvider as v } from "../contexts/OtherToolContext.js";
+import { L } from "../ToolbarLayout.module-88476995.js";
+const j = (t) => {
+  const { children: i, src: o, characterMap: n, onLoaded: m, onLoadError: d, loaderImage: c, ...l } = t, e = p(() => typeof o == "string" ? o : `${Date.now()}`, [o]);
+  return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
+    a,
     {
-      src: r,
-      characterMap: m,
-      onLoaded: d,
-      onLoadError: i,
-      children: /* @__PURE__ */ o(P, { ...a, children: /* @__PURE__ */ o(f, { loaderImage: c, children: n }, e) }, e)
+      src: o,
+      characterMap: n,
+      onLoaded: m,
+      onLoadError: d,
+      children: /* @__PURE__ */ r(s, { ...l, children: /* @__PURE__ */ r(P, { loaderImage: c, children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(v, { children: i }) }) }) }) }, e) }, e)
     },
     e
   ) });
 };
 export {
-  w as RPProvider
+  j as RPProvider
 };

package/dist/components/layout/Container.js

@@ -1,21 +1,20 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { c as o } from "../../clsx-0c6e471a.js";
-import '../../assets/Container.css';const s = {
-  "rp-container": "_rp-container_f63gc_1"
-}, l = (r) => {
-  const { children: n, getContainerRef: e, style: t, className: a } = r;
-  return /* @__PURE__ */ c(
+import { c } from "../../Container.module-f8b5c306.js";
+const p = (r) => {
+  const { children: e, getContainerRef: t, style: a, className: s } = r;
+  return /* @__PURE__ */ n(
     "div",
     {
       tabIndex: 0,
-      ref: e,
+      ref: t,
       "data-rp": "container",
-      className: o(s["rp-container"], a),
-      style: t,
-      children: n
+      className: o(c["rp-container"], s),
+      style: a,
+      children: e
     }
   );
 };
 export {
-  l as Container
+  p as Container
 };

package/dist/components/layout/LayoutContainer.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../clsx-0c6e471a.js";
-import { L as _ } from "../../RPLayout-5892502c.js";
+import { L as ro } from "../../ToolbarLayout.module-88476995.js";
 import "../../contexts/ThemeContext.js";
 import "react";
 import "../../contexts/RPDocumentContext.js";
@@ -28,27 +28,30 @@ import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
 import "../../contexts/LoaderContext.js";
-import "../RPConfig.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-cbf182aa.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
+import "../../contexts/ToolbarComponentContext.js";
 import "../../contexts/ViewportContext.js";
-import "../ui/DropDown.js";
-import "../../contexts/IconToolContext.js";
-import "./toolbar/MenuItem.js";
-import "./toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "./toolbar/PropertyItem.js";
-import "../../contexts/OtherToolContext.js";
-import "./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 "../../utils/withRef.js";
 export {
-  _ as LayoutContainer
+  ro as LayoutContainer
 };

package/dist/components/layout/RPDefaultLayout.js

@@ -1,16 +1,78 @@
-import "react/jsx-runtime";
-import "react";
-import { a as D } from "../../RPLayout-5892502c.js";
-import "../../contexts/ToolbarComponentContext.js";
-import "../../contexts/LayoutContainerContext.js";
-import "./Container.js";
-import "../../contexts/IconContext.js";
-import "./WrapperLayout.js";
-import "../RPDropFileZone.js";
-import "../../contexts/ViewportContext.js";
-import "../../contexts/RPDocumentContext.js";
-import "../../contexts/LoaderContext.js";
-import "../../contexts/OtherToolContext.js";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { useEffect as v } from "react";
+import { RPToolbar as y } from "./toolbar/RPToolbar.js";
+import { RPSidebar as g } from "./sidebar/RPSidebar.js";
+import { d as e } from "../../ToolbarLayout.module-88476995.js";
+import { ToolbarComponentProvider as L } from "../../contexts/ToolbarComponentContext.js";
+import { useLayoutContainer as P } from "../../contexts/LayoutContainerContext.js";
+import { Container as b } from "./Container.js";
+import { IconProvider as x } from "../../contexts/IconContext.js";
+import { WrapperLayout as N } from "./WrapperLayout.js";
+import { RPDropFileZone as R } from "../RPDropFileZone.js";
+import { ViewportProvider as j } from "../../contexts/ViewportContext.js";
+import { useDocumentContext as w } from "../../contexts/RPDocumentContext.js";
+import { useLoaderContext as D } from "../../contexts/LoaderContext.js";
+import { OtherToolProvider as I } from "../../contexts/OtherToolContext.js";
+const J = (m) => {
+  const {
+    children: s,
+    slots: a,
+    icons: l,
+    style: d,
+    className: c,
+    mobileWidth: p,
+    onLoaded: t,
+    cleanupOnLoaded: i,
+    onLayoutWidthChange: f
+  } = m, { setContainer: h, setContentRef: u } = P(), { loading: C } = w(), { LoaderImageComponent: n } = D();
+  return v(() => (t && t(), () => {
+    i && i();
+  }), [t, i]), // TODO: deprecated in v2.0.0, remove later ~
+  // <LayoutContainer toolbarRef={toolbarRef} ref={ref}>
+  /* @__PURE__ */ o(j, { mobileWidth: p, onLayoutWidthChange: f, children: /* @__PURE__ */ o(L, { slots: a, children: /* @__PURE__ */ o(x, { icons: l, children: /* @__PURE__ */ o(I, { children: /* @__PURE__ */ r(b, { getContainerRef: h, style: d, className: c, children: [
+    /* @__PURE__ */ r(N, { children: [
+      /* @__PURE__ */ r("div", { className: e["rp-layout"], children: [
+        /* @__PURE__ */ o(
+          y,
+          {}
+        ),
+        /* @__PURE__ */ r("div", { className: e["rp-content"], children: [
+          /* @__PURE__ */ o("div", { className: e["rp-sidebar"], children: /* @__PURE__ */ o(g, {}) }),
+          /* @__PURE__ */ o("div", { ref: u, className: e["rp-pages"], children: s })
+        ] })
+      ] }),
+      /* @__PURE__ */ o(R, {})
+    ] }),
+    C ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: e["rp-loader"],
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: "100%",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              width: "100%"
+            },
+            children: n && /* @__PURE__ */ o(n, {})
+          }
+        )
+      }
+    ) : null
+  ] }) }) }) }) });
+};
 export {
-  D as RPDefaultLayout
+  J as RPDefaultLayout
 };

package/dist/components/layout/RPLayout.js

@@ -1,13 +1,13 @@
-import "react/jsx-runtime";
-import "react";
-import "../../contexts/LayoutContainerContext.js";
-import "./Container.js";
-import "../../contexts/ViewportContext.js";
-import { b as _ } from "../../RPLayout-5892502c.js";
-import "../../contexts/OtherToolContext.js";
-import "./WrapperLayout.js";
-import "../../contexts/RPDocumentContext.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useEffect as h } from "react";
+import { useLayoutContainer as u } from "../../contexts/LayoutContainerContext.js";
+import { Container as y } from "./Container.js";
+import { ViewportProvider as C } from "../../contexts/ViewportContext.js";
+import { ToolbarLayout as L } from "./toolbar/ToolbarLayout.js";
+import { WrapperLayout as g } from "./WrapperLayout.js";
+import { useDocumentContext as x } from "../../contexts/RPDocumentContext.js";
 import "../../contexts/DocumentPasswordContext.js";
+import { d as b } from "../../ToolbarLayout.module-88476995.js";
 import "../../contexts/DarkModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/LayerContext.js";
@@ -29,26 +29,76 @@ import "../../contexts/DownloadContext.js";
 import "../../contexts/SmoothScrollContext.js";
 import "../../contexts/ElementPageContext.js";
 import "../../contexts/PagesRotateContext.js";
-import "../../contexts/LoaderContext.js";
+import { useLoaderContext as j } from "../../contexts/LoaderContext.js";
+import "../../contexts/ToolComponentContext.js";
+import "../../contexts/IconToolContext.js";
+import "../../contexts/OtherToolContext.js";
 import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-cbf182aa.js";
 import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
 import "../../contexts/ToolbarComponentContext.js";
-import "../ui/DropDown.js";
-import "../../contexts/IconToolContext.js";
-import "../../contexts/ToolComponentContext.js";
-import "./toolbar/MenuItem.js";
-import "./toolbar/MenuSeparator.js";
+import "../ui/RPTooltip.js";
+import "../../MenuItem.module-bc11d0d3.js";
+import "../../DropDown.module-a78567cb.js";
 import "../../utils/dateFormatter.js";
-import "./toolbar/PropertyItem.js";
-import "./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 { RPDropFileZone as v } from "../RPDropFileZone.js";
+import "../../contexts/ThemeContext.js";
+const wo = (p) => {
+  const {
+    children: e,
+    style: n,
+    className: a,
+    mobileWidth: s,
+    onLoaded: t,
+    cleanupOnLoaded: r,
+    onLayoutWidthChange: l,
+    toolbar: d
+  } = p, { setContainer: c } = u(), { loading: f } = x(), { LoaderImageComponent: i } = j();
+  return h(() => (t && t(), () => {
+    r && r();
+  }), [t, r]), /* @__PURE__ */ o(C, { mobileWidth: s, onLayoutWidthChange: l, children: /* @__PURE__ */ m(y, { getContainerRef: c, style: n, className: a, children: [
+    /* @__PURE__ */ m(g, { children: [
+      /* @__PURE__ */ o(L, { toolbar: d, children: e }),
+      /* @__PURE__ */ o(v, {})
+    ] }),
+    f ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: b["rp-loader"],
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: "100%",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              width: "100%"
+            },
+            children: i && /* @__PURE__ */ o(i, {})
+          }
+        )
+      }
+    ) : null
+  ] }) });
+};
 export {
-  _ as RPLayout
+  wo as RPLayout
 };

package/dist/components/layout/WrapperLayout.js

@@ -1,13 +1,12 @@
-import { jsx as r, Fragment as n } from "react/jsx-runtime";
-import { useDropFileZoneContext as a } from "../../contexts/DropFileZoneContext.js";
+import { jsx as e, Fragment as n } from "react/jsx-runtime";
+import { c as a } from "../../WrapperLayout.module-147bc943.js";
+import { useDropFileZoneContext as m } from "../../contexts/DropFileZoneContext.js";
 import { useToolbarComponentContext as s } from "../../contexts/ToolbarComponentContext.js";
 import { useToolComponentContext as l } from "../../contexts/ToolComponentContext.js";
-import '../../assets/WrapperLayout.css';const m = {
-  "rp-wrapper-layout": "_rp-wrapper-layout_2cghq_1"
-}, y = ({ children: o }) => {
-  const { handleDragEnter: p } = a(), { dropFileZone: e } = s(), { dropFileZone: t } = l();
-  return typeof e == "boolean" && !e ? /* @__PURE__ */ r(n, { children: o }) : typeof t == "boolean" && !t ? /* @__PURE__ */ r(n, { children: o }) : /* @__PURE__ */ r("div", { className: m["rp-wrapper-layout"], onDragEnter: p, children: o });
+const C = ({ children: o }) => {
+  const { handleDragEnter: p } = m(), { dropFileZone: r } = s(), { dropFileZone: t } = l();
+  return typeof r == "boolean" && !r ? /* @__PURE__ */ e(n, { children: o }) : typeof t == "boolean" && !t ? /* @__PURE__ */ e(n, { children: o }) : /* @__PURE__ */ e("div", { className: a["rp-wrapper-layout"], onDragEnter: p, children: o });
 };
 export {
-  y as WrapperLayout
+  C as WrapperLayout
 };