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

package/dist/components/RPController.js

@@ -1,6 +1,6 @@
 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 { useState as e, useId as V, useMemo as T } from "react";
+import { P as w, S as D, T as E, e as k } from "../ToolbarLayout.module-60c3d6e8.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";
@@ -23,7 +23,7 @@ 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";
+import { PagesRotateProvider as er } from "../contexts/PagesRotateContext.js";
 const Dr = (n) => {
   const {
     children: l,
@@ -37,10 +37,10 @@ const Dr = (n) => {
     initialSearch: p,
     initialScale: s,
     initialScrollMode: v = G.VERTICAL_SCROLLING,
-    locale: u = "en_US",
-    localization: S,
+    locale: S = "en_US",
+    localization: u,
     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, [g, R] = e(null), [o, C] = e(null), [L, I] = e(null), i = V(), t = T(() => `rp-instance-${i.replace(/:/g, "-")}`, [i]);
   return K(t), /* @__PURE__ */ r(
     O,
     {
@@ -50,12 +50,12 @@ 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(Y, { children: /* @__PURE__ */ r(B, { locale: S, localization: u, 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(er, { children: /* @__PURE__ */ r(_, { textLayer: c, children: /* @__PURE__ */ r(
         $.Provider,
         {
           value: {
             container: g,
-            contentRef: e,
+            contentRef: o,
             pagesRef: L,
             setContainer: R,
             setContentRef: C,
@@ -70,7 +70,7 @@ const Dr = (n) => {
                 E,
                 {
                   initialThumbnailsVisible: h,
-                  children: /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(U, { elementRef: e, children: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
+                  children: /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(U, { elementRef: o, children: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
                     Q,
                     {
                       downloadFilename: M,

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-60c3d6e8.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-60c3d6e8.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-60c3d6e8.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-60c3d6e8.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-60c3d6e8.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
 };

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

@@ -1,14 +1,53 @@
-import "react/jsx-runtime";
-import "react";
-import "../../icons/Thumbnail.js";
-import "../../ui/Button.js";
-import { V as x } from "../../../RPLayout-5892502c.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 { jsx as t, Fragment as b, jsxs as m } from "react/jsx-runtime";
+import { useState as d, useRef as f, useCallback as T, useMemo as C } from "react";
+import { ThumbnailIcon as x } from "../../icons/Thumbnail.js";
+import { UIButton as I } from "../../ui/Button.js";
+import { f as k, j as a, k as v } from "../../../ToolbarLayout.module-60c3d6e8.js";
+import { RPSplitter as w } from "./RPSplitter.js";
+import { useToolbarComponentContext as R } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as S } from "../../../contexts/IconContext.js";
+import j from "../../ui/RPTooltip.js";
+import { useLocalizationContext as y } from "../../../contexts/LocalizationContext.js";
+import { useIconToolContext as N } from "../../../contexts/IconToolContext.js";
+const P = () => {
+  const { thumbnailIcon: o } = S(), { thumbnailIcon: r } = N();
+  return o || r || /* @__PURE__ */ t(x, {});
+}, G = () => {
+  const { active: o, setActive: r } = k(), [s, c] = d(200), l = f(null), { thumbnailTool: i, sidebarEnable: u } = R(), { localeMessages: n } = y(), e = T(() => {
+    r((p) => !p);
+  }, []), h = C(() => typeof i != "boolean" && i ? /* @__PURE__ */ t(i, { onClick: e, active: o }) : i ? /* @__PURE__ */ t(j, { content: n == null ? void 0 : n.thumbnailTooltip, children: /* @__PURE__ */ t(
+    I,
+    {
+      onClick: e,
+      active: o,
+      "aria-label": n == null ? void 0 : n.thumbnailTooltip,
+      children: /* @__PURE__ */ t(P, {})
+    }
+  ) }) : null, [i, o, e, n]);
+  return /* @__PURE__ */ t(b, { children: u && /* @__PURE__ */ m(
+    "div",
+    {
+      style: { "--rp-thumbnail-width": `${s}px` },
+      className: a["rp-sidebar-content-wrapper"],
+      "data-rp": "sidebar",
+      children: [
+        /* @__PURE__ */ t("div", { className: a["rp-sidebar-content"], children: h }),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            "data-rp": "thumbnailSidebar",
+            hidden: !o,
+            className: a["rp-thumbnails-wrapper"],
+            children: [
+              /* @__PURE__ */ t(v, { show: o, ref: l }),
+              /* @__PURE__ */ t(w, { onWidthChange: c, thumbnailRef: l })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  x as RPSidebar
+  G as RPSidebar
 };

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

@@ -1,12 +1,10 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useRef as a } from "react";
-import '../../../assets/RPSplitter.css';const e = {
-  "rp-thumbnail-dragger": "_rp-thumbnail-dragger_1sd13_1",
-  "rp-thumbnail-dragger-dragging": "_rp-thumbnail-dragger-dragging_1sd13_11"
-}, s = () => {
-  const r = a(null);
-  return /* @__PURE__ */ g("div", { ref: r, className: e["rp-thumbnail-dragger"] });
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as s } from "react";
+import { c as t } from "../../../RPSplitter.module-13d612c4.js";
+const f = () => {
+  const r = s(null);
+  return /* @__PURE__ */ e("div", { ref: r, className: t["rp-thumbnail-dragger"] });
 };
 export {
-  s as RPSplitter
+  f as RPSplitter
 };

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { Q as b } from "../../../RPLayout-5892502c.js";
+import { J as b } from "../../../ToolbarLayout.module-60c3d6e8.js";
 import "../../../clsx-0c6e471a.js";
 import "../../icons/LoaderIcon.js";
 import "../../../contexts/PagesRotateContext.js";