@react-pdf-kit/viewer 2.1.0-beta.1 → 2.1.0-beta.2

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <a href="https://www.react-pdf.dev/" target="_blank">
+  <a href="https://www.react-pdf-kit.dev/" target="_blank">
     <picture>
       <source srcset="https://raw.githubusercontent.com/pdf-viewer-react/react-pdf/2308e7d88cde64bf343f1509150ebf6c91a15664/assets/img/react-pdf_cover.webp" width="100%">
       <img alt="React PDF" src="https://raw.githubusercontent.com/pdf-viewer-react/react-pdf/2308e7d88cde64bf343f1509150ebf6c91a15664/assets/img/react-pdf_cover.webp" width="100%">
@@ -9,28 +9,28 @@
 
 <br/>
 <div align="center">
-  Works seamlessly on your React.js websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time.
+  Works seamlessly on your React or Next.js websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time.
 </div>  
 <br/>
 
 <div align="center">
   
-  [React PDF Home][reactpdf] - [License](#page_facing_up-license) - [Documentation][reactpdf-docs]
+  [React PDF Kit Home][reactpdf] - [License](#page_facing_up-license) - [Documentation][reactpdf-docs]
 
-[![NPM Version](https://img.shields.io/npm/v/%40pdf-viewer%2Freact)][npm]
+[![NPM Version](https://img.shields.io/npm/v/%40react-pdf-kit%2Fviewer)][npm]
 [![Twitter](https://img.shields.io/twitter/follow/ReactPDF?label=ReactPDF&style=social)][twitter]
 
 </div>
 
-# :star: Why React PDF
+# :star: Why React PDF Kit
 
-- **Save Weeks of Development Time**: React PDF simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time.
+- **Save Weeks of Development Time**: React PDF Kit simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time.
 - **Tailored for React.js**: React PDF is native to React.js, ensuring smooth integration into your projects.
 - **Customizability at Its Core**: Built with flexibility in mind, allowing you to match your application’s unique style and functionality.
 - **High-Performance & Rapid Rendering**: Optimized for rendering large PDFs efficiently, React PDF delivers lightning-fast load times with features like virtual scrolling.
-- **Accessibility**: Designed with inclusivity in mind, React PDF supports ARIA attributes, catering to diverse user bases.
-- **Modern Browser Compatibility**: Works seamlessly across modern browsers, eliminating compatibility headaches.
-- **Active Development & Support**: With regular updates and a responsive support team, React PDF evolves to meet developer needs.
+- **Accessibility**: Designed with inclusivity in mind, React PDF Kit supports ARIA attributes, catering to diverse user bases.
+- **Modern Browser Compatibility**: The React PDF Viewer components seamlessly across modern browsers, eliminating compatibility headaches.
+- **Active Development & Support**: With regular updates and a responsive support team, React PDF Kit evolves to meet developer needs.
 
 # 📜 Background
 
@@ -47,35 +47,58 @@ As developers ourselves, we faced many issues such as browser incompatibility an
 - 📂 **Document Management Tools**, including features like downloading and printing.
 - 👁️ **Accessibility Support** to built-in support for ARIA attributes and tooltips, catering to diverse user bases.
 
-For the full feature set, visit [React PDF Features](https://www.react-pdf.dev/features?utm_source=github).
+For the full feature set, visit [React PDF Kit Features](https://www.react-pdf-kit.dev/features?utm_source=github&utm_medium=referral).
 
 # :zap: Quick Start Guide
 
-Here’s how to get started with React PDF in your React.js project:
+Here’s how to get started with React PDF Kit in your React.js project:
 
-## 1. Check Prerequisites
+## 1. Check Prerequsities
 
-Here are the basic system requirements to run the React PDF component:
+Here are the basic system requirements to run the React PDF Viewer component:
 
 - React version: >= 18.0
+- React version: >= 19.0
 
-If you are working with a React framework such as Next and Gatsby, React PDF can run smoothly as long as you are using React 18 and above.
+If you are working with a React framework such as Next.js (App Router and Pages Router) or Gatsby, React PDF can run smoothly as long as you are using React 18 and above.
 
-React PDF viewer also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI.
+React PDF also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI.
 
-Although React PDF can run on most JavaScript module bundlers, it is more vigorously tested on Vite and Webpack.
+Although React PDF Kit can run on most JavaScript module bundlers, it is more vigorously tested on Vite and Webpack.
 
 _Remark: <br/>- If using TypeScript, it requires >= TypeScript 4.6._
 
 ### Browser support
 
+Starting from [`@react-pdf-kit/viewer@^2.0.0`](https://www.npmjs.com/package/@react-pdf-kit/viewer), we officially support PDF.js 5 and default to PDF.js `5.4.530`.
+
+As newer PDF.js versions rely on more modern browser APIs, minimum supported browser versions have changed. Please review the compatibility details below before choosing a PDF.js version.
+
+#### Default (PDF.js 5.4.530)
+
+React PDF Kit v2.0.0 defaults to PDF.js `5.4.530`.
+
 | Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
 | ------ | ------- | ---- | ------ | ---------- | -------------- |
-| 115+   | 115+    | 115+ | 16.5+  | 16.5+      | 126+           |
+| 126+   | 126+    | 126+ | 18.4+  | 18.4+      | 126+           |
+
+<Aside>
+It's currently not recommended to use a PDF.js worker version beyond `5.4.530` because it will support fewer browser versions.
+</Aside>
+
+#### Using PDF.js 4.10.38
+
+If you need broader browser compatibility, you can continue using PDF.js `4.10.38`, which supports:
+
+| Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
+| ------ | ------- | ---- | ------ | ---------- | -------------- |
+| 119+   | 115+    | 115+ | 17.4+  | 17.4+      | 126+           |
+
+To change the version of PDF.js used, refer to [Dependency Override](https://docs.react-pdf-kit.dev/usage-guide/overriding-dependency?utm_source=github&utm_medium=referral) guide.
 
 ## 2. Install the Package
 
-There are a few ways you can install React PDF, namely `bun`, `npm`, `pnpm` or `yarn`.
+There are a few ways you can install React PDF Kit, namely `bun`, `npm`, `pnpm` or `yarn`.
 
 ### Using bun:
 
@@ -110,50 +133,42 @@ yarn add @react-pdf-kit/viewer
 pnpm add @react-pdf-kit/viewer
 ```
 
-For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf.dev/introduction/getting-started.html#installation?utm_source=github).
+For more information on how to use different package managers, please visit our [installation guide](https://docs.react-pdf-kit.dev/introduction/getting-started/#installation?utm_source=github&utm_medium=referral).
 
 ## 3. Import and Use the Component
 
 The following structure demonstrates how to build a React PDF viewer by importing and assembling components. This modular approach gives you the flexibility to customize the viewer as needed.
 
 ```tsx
-<RPConfig>
-  {' '}
-  {/* Configuration license and pdfjs-dist worker */}
-  <RPProvider>
-    {' '}
-    {/* Viewer context provider */}
-    <RPTheme>
-      {' '}
-      {/* Theme customization (optional) */}
-      <RPDefaultLayout>
-        {' '}
-        {/* Default layout container */}
-        <RPPages /> {/* PDF pages renderer */}
-      </RPDefaultLayout>
-    </RPTheme>
-  </RPProvider>
+<RPConfig>                {/* Configuration license and pdfjs-dist worker */}
+  <RPTheme>               {/* Theme customization (optional) */}
+    <RPProvider>          {/* Viewer context provider */}
+      <RPLayout toolbar>  {/* Provide the default toolbar structure */}
+        <RPPages />       {/* Render the actual PDF content */}
+      </RPLayout>
+    </RPProvider>
+  </RPTheme>
 </RPConfig>
 ```
 
-_Remark: For more information on each component, please refer to [Component](https://docs.react-pdf.dev/components/overview?utm_source=github)._
+_Remark: For more information on each component, please refer to [Component](https://docs.react-pdf-kit.dev/components/overview?utm_source=github&utm_medium=referral)._
 
 ### Basic Usage
 
-The most basic usage of React PDF viewer needs four components, namely: `RPConfig`, `RPProvider`, `RPDefaultLayout`, and `RPPages`.
+The most basic usage of React PDF viewer needs four components, namely: `RPConfig`, `RPProvider`, `RPLayout`, and `RPPages`.
 
 Here's how to implement a basic PDF viewer in a React application:
 
 ```jsx
-import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from '@react-pdf-kit/viewer'
+import { RPProvider, RPLayout, RPPages, RPConfig } from '@react-pdf-kit/viewer'
 
 const App = () => {
   return (
     <RPConfig>
       <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
-        <RPDefaultLayout style={{ height: '660px' }}>
+        <RPLayout toolbar style={{ height: '660px' }}>
           <RPPages />
-        </RPDefaultLayout>
+        </RPLayout>
       </RPProvider>
     </RPConfig>
   )
@@ -161,13 +176,13 @@ const App = () => {
 export default App
 ```
 
-The PDF viewer will automatically adjust to fit its container's dimensions. You can control the size by setting the `style` prop on `RPDefaultLayout`. For more information on using React PDF, visit our [basic usage guide](https://docs.react-pdf.dev/introduction/basic-usage?utm_source=github)
+The PDF viewer will automatically adjust to fit its container's dimensions. You can control the size by setting the `style` prop on `RPLayout`. For more information on using React PDF, visit our [basic usage guide](https://docs.react-pdf-kit.dev/introduction/basic-usage?utm_source=github&utm_medium=referral)
 
 You may also check out our [Starter Toolkit](#pushpin-starter-toolkit) for examples to get you started.
 
 ### 4. Customize with Hooks and Props
 
-To enhance React PDF further, we offer built-in hooks and props that let you fine-tune functionality, adjust appearance, and integrate custom behaviors into your application.
+To enhance React PDF Kit further, we offer built-in hooks and props that let you fine-tune functionality, adjust appearance, and integrate custom behaviors into your application.
 
 For detailed usage, refer to our [Documentation][reactpdf-docs].
 
@@ -176,11 +191,31 @@ For detailed usage, refer to our [Documentation][reactpdf-docs].
 Here are some sample projects to get started on React PDF quickly:
 
 1. [React (webpack) - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-js-webpack)
-2. [React (webpack) - TypeScript](https://github.com/reactpdf/pdf-viewer-react/starter-rp-react-ts-webpack)
+2. [React (webpack) - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-ts-webpack)
 3. [React (vite) - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-js-vite)
 4. [React (vite) - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-ts-vite)
-5. [Next - JavaScript](https://github.com/react-pdf-kit/starter-rp-next-js)
-6. [Next - TypeScript](https://github.com/react-pdf-kit/starter-rp-next-ts)
+5. [React (vite) - TypeScript - Turborepo](https://github.com/react-pdf-kit/starter-rp-react-vite-ts-turborepo)
+6. [Next.js - JavaScript (App Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-app-router-js)
+7. [Next.js - TypeScript (App Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-app-router-ts)
+8. [Next.js - JavaScript (Pages Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-pages-router-js)
+9. [Next.js - TypeScript (Pages Router)](https://github.com/react-pdf-kit/starter-rp-nextjs-pages-router-ts)
+10. [Next.js - TypeScript - Turborepo](https://github.com/react-pdf-kit/starter-rp-next-ts-turborepo)
+11. [Remix - JavaScript](https://github.com/react-pdf-kit/starter-rp-remix-js)
+12. [Remix - TypeScript](https://github.com/react-pdf-kit/starter-rp-remix-ts)
+13. [Gatsby - JavaScript](https://github.com/react-pdf-kit/starter-rp-gatsby-js)
+14. [Gatsby - TypeScript](https://github.com/react-pdf-kit/starter-rp-gatsby-ts)
+15. [Docusaurus - JavaScript](https://github.com/react-pdf-kit/starter-rp-docusaurus-js)
+16. [Docusaurus - TypeScript](https://github.com/react-pdf-kit/starter-rp-docusaurus-ts)
+17. [Electron - JavaScript](https://github.com/react-pdf-kit/starter-rp-electron-js-vite)
+18. [Electron - TypeScript](https://github.com/react-pdf-kit/starter-rp-electron-ts-vite)
+19. [React Router - JavaScript](https://github.com/react-pdf-kit/starter-rp-react-router-js)
+20. [React Router - TypeScript](https://github.com/react-pdf-kit/starter-rp-react-router-ts)
+21. [TanStack - JavaScript](https://github.com/react-pdf-kit/starter-rp-tanstack-router-js)
+22. [TanStack - TypeScript](https://github.com/react-pdf-kit/starter-rp-tanstack-router-ts)
+
+# 📝 Changelog
+
+Check out our latest release [v2.0.0 (20 February 2026)](https://docs.react-pdf-kit.dev/introduction/changelog/#v200-20-february-2026?utm_source=github&utm_medium=referral)
 
 # :raising_hand: Need Help?
 
@@ -188,9 +223,9 @@ We are more than happy to help you. If you have any questions, run into any erro
 
 # :page_facing_up: License
 
-React PDF is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf.dev/license-agreement?utm_source=github) file for more details.
+React PDF Kit is distributed under our proprietary license. Please refer to our [License page](https://www.react-pdf-kit.dev/license-agreement?utm_source=github&utm_medium=referral) file for more details.
 
-If you would like to use React PDF commercially, please purchase a license from [our website][reactpdf] or reach out to us directly at [david@react-pdf.dev](mailto:david@react-pdf.dev).
+If you would like to use React PDF commercially, please purchase a license from [our website][reactpdf] or reach out to us directly at [https://www.react-pdf-kit.dev/contact-us](https://www.react-pdf-kit.dev/contact-us?utm_source=github&utm_medium=referral).
 
 # Acknowledgement
 
@@ -198,7 +233,7 @@ If you would like to use React PDF commercially, please purchase a license from
 - [Img Shields](https://shields.io)
 - [React.js](https://reactjs.org/)
 
-[reactpdf]: https://www.react-pdf.dev
-[reactpdf-docs]: https://docs.react-pdf.dev
+[reactpdf]: https://www.react-pdf-kit.dev/?utm_source=github&utm_medium=referral
+[reactpdf-docs]: https://docs.react-pdf-kit.dev/?utm_source=github&utm_medium=referral
 [npm]: https://www.npmjs.com/package/@react-pdf-kit/viewer
 [twitter]: https://www.x.com/ReactPDF

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

@@ -1,16 +1,16 @@
 import { jsx as a, jsxs as C, Fragment as x } from "react/jsx-runtime";
 import * as c from "react";
 import { useMemo as J } from "react";
-import { c as Q, a as P, P as D, b as v, d as y, e as X, f as M, g as ee } from "../../../index-c0faa594.js";
-import { D as te, u as R } from "../../../index-e3ee9457.js";
+import { c as Q, a as R, P as D, b as v, d as y, e as X, f as M, g as ee } from "../../../index-c0faa594.js";
+import { D as te, u as P } from "../../../index-e3ee9457.js";
 import { R as oe, h as re, u as ne, F as ie, P as ae } from "../../../Combination-136ff99c.js";
 import { useLayoutContainer as le } from "../../../contexts/LayoutContainerContext.js";
 import { CloseIcon as ce } from "../../icons/CloseIcon.js";
 import { dateFormatter as A } from "../../../utils/dateFormatter.js";
 import { useDocumentContext as se } from "../../../contexts/RPDocumentContext.js";
 import { PropertyItem as ue } from "./PropertyItem.js";
-import { useOtherToolContext as de } from "../../../contexts/OtherToolContext.js";
-import { useLocalizationContext as pe } from "../../../contexts/LocalizationContext.js";
+import { useOtherToolContext as pe } from "../../../contexts/OtherToolContext.js";
+import { useLocalizationContext as de } from "../../../contexts/LocalizationContext.js";
 import "react-dom";
 import "../../../utils/hooks/useLoadPdf.js";
 import "pdfjs-dist";
@@ -32,7 +32,7 @@ var h = "Dialog", [T, tt] = Q(h), [fe, u] = T(h), L = (t) => {
     defaultOpen: e,
     onOpenChange: o,
     modal: l = !0
-  } = t, s = c.useRef(null), d = c.useRef(null), [p, g] = M({
+  } = t, s = c.useRef(null), p = c.useRef(null), [d, g] = M({
     prop: i,
     defaultProp: e ?? !1,
     onChange: o,
@@ -43,11 +43,11 @@ var h = "Dialog", [T, tt] = Q(h), [fe, u] = T(h), L = (t) => {
     {
       scope: r,
       triggerRef: s,
-      contentRef: d,
-      contentId: R(),
-      titleId: R(),
-      descriptionId: R(),
-      open: p,
+      contentRef: p,
+      contentId: P(),
+      titleId: P(),
+      descriptionId: P(),
+      open: d,
       onOpenChange: g,
       onOpenToggle: c.useCallback(() => g((_) => !_), [g]),
       modal: l,
@@ -58,7 +58,7 @@ var h = "Dialog", [T, tt] = Q(h), [fe, u] = T(h), L = (t) => {
 L.displayName = h;
 var w = "DialogTrigger", me = c.forwardRef(
   (t, r) => {
-    const { __scopeDialog: n, ...i } = t, e = u(w, n), o = P(r, e.triggerRef);
+    const { __scopeDialog: n, ...i } = t, e = u(w, n), o = R(r, e.triggerRef);
     return /* @__PURE__ */ a(
       D.button,
       {
@@ -115,7 +115,7 @@ var ve = ee("DialogOverlay.RemoveScroll"), De = c.forwardRef(
 k.displayName = m;
 var _e = c.forwardRef(
   (t, r) => {
-    const n = u(m, t.__scopeDialog), i = c.useRef(null), e = P(r, n.contentRef, i);
+    const n = u(m, t.__scopeDialog), i = c.useRef(null), e = R(r, n.contentRef, i);
     return c.useEffect(() => {
       const o = i.current;
       if (o)
@@ -157,17 +157,17 @@ var _e = c.forwardRef(
           (l = t.onCloseAutoFocus) == null || l.call(t, o), o.defaultPrevented || (i.current || (s = n.triggerRef.current) == null || s.focus(), o.preventDefault()), i.current = !1, e.current = !1;
         },
         onInteractOutside: (o) => {
-          var d, p;
-          (d = t.onInteractOutside) == null || d.call(t, o), o.defaultPrevented || (i.current = !0, o.detail.originalEvent.type === "pointerdown" && (e.current = !0));
+          var p, d;
+          (p = t.onInteractOutside) == null || p.call(t, o), o.defaultPrevented || (i.current = !0, o.detail.originalEvent.type === "pointerdown" && (e.current = !0));
           const l = o.target;
-          ((p = n.triggerRef.current) == null ? void 0 : p.contains(l)) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && e.current && o.preventDefault();
+          ((d = n.triggerRef.current) == null ? void 0 : d.contains(l)) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && e.current && o.preventDefault();
         }
       }
     );
   }
 ), q = c.forwardRef(
   (t, r) => {
-    const { __scopeDialog: n, trapFocus: i, onOpenAutoFocus: e, onCloseAutoFocus: o, ...l } = t, s = u(m, n), d = c.useRef(null), p = P(r, d);
+    const { __scopeDialog: n, trapFocus: i, onOpenAutoFocus: e, onCloseAutoFocus: o, ...l } = t, s = u(m, n), p = c.useRef(null), d = R(r, p);
     return ne(), /* @__PURE__ */ C(x, { children: [
       /* @__PURE__ */ a(
         ie,
@@ -186,7 +186,7 @@ var _e = c.forwardRef(
               "aria-labelledby": s.titleId,
               "data-state": E(s.open),
               ...l,
-              ref: p,
+              ref: d,
               onDismiss: () => s.onOpenChange(!1)
             }
           )
@@ -194,7 +194,7 @@ var _e = c.forwardRef(
       ),
       /* @__PURE__ */ C(x, { children: [
         /* @__PURE__ */ a(he, { titleId: s.titleId }),
-        /* @__PURE__ */ a(Pe, { contentRef: d, descriptionId: s.descriptionId })
+        /* @__PURE__ */ a(Re, { contentRef: p, descriptionId: s.descriptionId })
       ] })
     ] });
   }
@@ -243,8 +243,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${r.do
   return c.useEffect(() => {
     t && (document.getElementById(t) || console.error(n));
   }, [n, t]), null;
-}, Re = "DialogDescriptionWarning", Pe = ({ contentRef: t, descriptionId: r }) => {
-  const i = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${V(Re).contentName}}.`;
+}, Pe = "DialogDescriptionWarning", Re = ({ contentRef: t, descriptionId: r }) => {
+  const i = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${V(Pe).contentName}}.`;
   return c.useEffect(() => {
     var o;
     const e = (o = t.current) == null ? void 0 : o.getAttribute("aria-describedby");
@@ -260,14 +260,14 @@ const f = {
   "rp-dialog-close": "_rp-dialog-close_slqo7_47",
   "rp-properties-divider": "_rp-properties-divider_slqo7_55"
 }, rt = () => {
-  const { pdfProperties: t } = se(), { container: r } = le(), { activeDocumentProperties: n, setActiveDocumentProperties: i } = de(), { localeMessages: e } = pe(), o = J(() => {
+  const { pdfProperties: t } = se(), { container: r } = le(), { activeDocumentProperties: n, setActiveDocumentProperties: i } = pe(), { localeMessages: e } = de(), o = J(() => {
     if (!t)
       return [];
     const {
       fileSize: l,
       filename: s,
-      title: d,
-      author: p,
+      title: p,
+      author: d,
       subject: g,
       createdOn: _,
       creator: H,
@@ -281,8 +281,8 @@ const f = {
       { label: e == null ? void 0 : e.propertiesFilenameLabel, value: s },
       { label: e == null ? void 0 : e.propertiesFileSizeLabel, value: l },
       { separate: !0 },
-      { label: e == null ? void 0 : e.propertiesTitleLabel, value: d },
-      { label: e == null ? void 0 : e.propertiesAuthorLabel, value: p },
+      { label: e == null ? void 0 : e.propertiesTitleLabel, value: p },
+      { label: e == null ? void 0 : e.propertiesAuthorLabel, value: d },
       { label: e == null ? void 0 : e.propertiesSubjectLabel, value: g },
       { label: e == null ? void 0 : e.propertiesKeywordLabel, value: K },
       { label: e == null ? void 0 : e.propertiesCreatorLabel, value: H },
@@ -302,9 +302,17 @@ const f = {
   }, [t, e]);
   return /* @__PURE__ */ a(ye, { open: n, onOpenChange: i, children: /* @__PURE__ */ a(Ne, { container: r, children: /* @__PURE__ */ C("div", { className: f["rp-dialog-wrapper"], children: [
     /* @__PURE__ */ a(Oe, { className: f["rp-dialog-overlay"] }),
-    /* @__PURE__ */ C(Ee, { className: f["rp-document-dialog"], "aria-labelledby": "document-properties-title", children: [
-      /* @__PURE__ */ a(Ie, { id: "document-properties-title", className: f["rp-dialog-title"], children: e == null ? void 0 : e.documentPropertiesLabel }),
-      /* @__PURE__ */ a("div", { className: f["rp-document-properties"], role: "region", "aria-labelledby": "document-properties-title", children: o.map((l, s) => /* @__PURE__ */ a("div", { children: l.separate ? /* @__PURE__ */ a("div", { className: f["rp-properties-divider"], role: "separator", "aria-orientation": "horizontal" }) : /* @__PURE__ */ a(ue, { label: l.label, value: l.value }) }, s)) }),
+    /* @__PURE__ */ C(Ee, { className: f["rp-document-dialog"], children: [
+      /* @__PURE__ */ a(Ie, { className: f["rp-dialog-title"], children: (e == null ? void 0 : e.documentPropertiesLabel) ?? "Document properties" }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: f["rp-document-properties"],
+          role: "region",
+          "aria-label": (e == null ? void 0 : e.documentPropertiesLabel) ?? "Document properties",
+          children: o.map((l, s) => /* @__PURE__ */ a("div", { children: l.separate ? /* @__PURE__ */ a("div", { className: f["rp-properties-divider"], role: "separator", "aria-orientation": "horizontal" }) : /* @__PURE__ */ a(ue, { label: l.label, value: l.value }) }, s))
+        }
+      ),
       /* @__PURE__ */ a(xe, { asChild: !0, className: f["rp-dialog-close"], "aria-label": (e == null ? void 0 : e.searchCloseButtonTooltip) || "Close dialog", children: /* @__PURE__ */ a(ce, { "aria-hidden": "true" }) })
     ] })
   ] }) }) });

package/dist/utils/highlight.js

@@ -1,21 +1,21 @@
 import { getCharacterType as D } from "./charators.js";
-function _(r, c, m, i) {
+function _(l, c, m, i) {
   const s = [];
-  for (const n of r) {
+  for (const n of l) {
     const o = y(c, n, i);
     s.push(...R(o, c, m));
   }
   return s;
 }
-const L = (r, c) => {
+const L = (l, c) => {
   const m = ["g"];
   c.matchCase || m.push("i");
-  let s = r.replace(/[.^$*+?()[{|\\]/g, (n) => `\\${n}`).trim();
+  let s = l.replace(/[.^$*+?()[{|\\]/g, (n) => `\\${n}`).trim();
   return new RegExp(s, m.join(""));
 };
-function y(r, c, m) {
+function y(l, c, m) {
   const i = [];
-  for (const t of r.items)
+  for (const t of l.items)
     if (t.hasEOL)
       if (t.str.endsWith("-")) {
         const d = t.str.lastIndexOf("-");
@@ -34,14 +34,14 @@ function y(r, c, m) {
     m.wholeWords && !W(s, e.index, e[0].length) || o.push([e.index, e[0].length, e[0]]);
   return o;
 }
-function R(r, c, m) {
+function R(l, c, m) {
   function i(d) {
     return d.hasEOL ? d.str.endsWith("-") ? -1 : 1 : 0;
   }
   let s = 0, n = 0;
   const o = c.items, e = o.length - 1, t = [];
-  for (let d = 0; d < r.length; d++) {
-    let h = r[d][0];
+  for (let d = 0; d < l.length; d++) {
+    let h = l[d][0];
     for (; s !== e && h >= n + o[s].str.length; ) {
       const x = o[s];
       n += x.str.length + i(x), s++;
@@ -50,19 +50,19 @@ function R(r, c, m) {
       idx: s,
       offset: h - n
     };
-    for (h += r[d][1]; s !== e && h > n + o[s].str.length; ) {
+    for (h += l[d][1]; s !== e && h > n + o[s].str.length; ) {
       const x = o[s];
       n += x.str.length + i(x), s++;
     }
-    const l = {
+    const r = {
       idx: s,
       offset: h - n
     };
     t.push({
       start: g,
-      end: l,
-      str: r[d][2],
-      oIndex: r[d][0],
+      end: r,
+      str: l[d][2],
+      oIndex: l[d][0],
       pageIndex: m,
       rect: { left: 0, bottom: 0, width: 0, height: 0 },
       rects: []
@@ -71,45 +71,45 @@ function R(r, c, m) {
   for (const d of t) {
     const h = [];
     for (let g = d.start.idx; g <= d.end.idx; g++) {
-      const l = o[g], x = l.transform[4], C = l.transform[5], a = l.str.length > 0 ? l.width / l.str.length : 0, M = g === d.start.idx ? d.start.offset : 0, N = g === d.end.idx ? d.end.offset : l.str.length, f = x + M * a, E = (N - M) * a, u = (c.styles ?? {})[l.fontName], T = (u == null ? void 0 : u.ascent) ?? 1, v = (u == null ? void 0 : u.descent) != null ? Math.abs(u.descent) : 1 - T, b = C - v * l.height;
-      (E > 0 || l.height > 0) && h.push({
+      const r = o[g], x = r.transform[4], C = r.transform[5], a = r.str.length > 0 ? r.width / r.str.length : 0, M = g === d.start.idx ? d.start.offset : 0, N = g === d.end.idx ? d.end.offset : r.str.length, f = x + M * a, E = (N - M) * a, u = (c.styles ?? {})[r.fontName], T = (u == null ? void 0 : u.ascent) ?? 1, v = (u == null ? void 0 : u.descent) != null ? Math.abs(u.descent) : 1 - T, b = C - v * r.height;
+      r.height > 0 && r.width > 0 && h.push({
         left: f,
         bottom: b,
         width: E,
-        height: l.height
+        height: r.height
       });
     }
     d.rect = h[0], d.rects = h;
   }
   return t;
 }
-function W(r, c, m) {
-  let i = r.slice(0, c).match(/([^\p{M}])\p{M}*$/u);
+function W(l, c, m) {
+  let i = l.slice(0, c).match(/([^\p{M}])\p{M}*$/u);
   if (i) {
-    const s = r.charCodeAt(c), n = i[1].charCodeAt(0);
+    const s = l.charCodeAt(c), n = i[1].charCodeAt(0);
     if (D(s) === D(n))
       return !1;
   }
-  if (i = r.slice(c + m).match(/^\p{M}*([^\p{M}])/u), i) {
-    const s = r.charCodeAt(c + m - 1), n = i[1].charCodeAt(0);
+  if (i = l.slice(c + m).match(/^\p{M}*([^\p{M}])/u), i) {
+    const s = l.charCodeAt(c + m - 1), n = i[1].charCodeAt(0);
     if (D(s) === D(n))
       return !1;
   }
   return !0;
 }
-function I(r, c, m) {
+function I(l, c, m) {
   const i = [];
   function s(n, o, e = -1, t = -1, d = "") {
     const h = c.items[n], g = [];
-    let l = "", x = "", C = "", a = m[n];
+    let r = "", x = "", C = "", a = m[n];
     if (!a)
       return;
     if (a.nodeType === Node.TEXT_NODE) {
       const f = document.createElement("span");
       a.before(f), f.append(a), m[n] = f, a = f;
     }
-    e >= 0 && t >= 0 ? l = h.str.substring(e, t) : e < 0 && t < 0 ? l = h.str : e >= 0 ? l = h.str.substring(e) : t >= 0 && (l = h.str.substring(0, t));
-    const M = document.createTextNode(l), N = document.createElement("span");
+    e >= 0 && t >= 0 ? r = h.str.substring(e, t) : e < 0 && t < 0 ? r = h.str : e >= 0 ? r = h.str.substring(e) : t >= 0 && (r = h.str.substring(0, t));
+    const M = document.createTextNode(r), N = document.createElement("span");
     if (N.className = "highlight appended " + d, N.setAttribute("data-match-index", `${o}`), N.append(M), g.push(N), i.push({ element: N, index: o }), e > 0)
       if (a.childNodes.length === 1 && a.childNodes[0].nodeType === Node.TEXT_NODE) {
         x = h.str.substring(0, e);
@@ -135,7 +135,7 @@ function I(r, c, m) {
     }
     a.replaceChildren(...g);
   }
-  for (const [n, o] of r.entries())
+  for (const [n, o] of l.entries())
     if (o.start.idx === o.end.idx)
       s(o.start.idx, n, o.start.offset, o.end.offset);
     else
@@ -143,8 +143,8 @@ function I(r, c, m) {
         e === o.start.idx ? s(e, n, o.start.offset, -1, "begin") : e === o.end.idx ? s(e, n, -1, o.end.offset, "end") : s(e, n, -1, -1, "middle");
   return i;
 }
-function V(r, c) {
-  const m = r.items.map((i) => i.str);
+function V(l, c) {
+  const m = l.items.map((i) => i.str);
   for (let i = 0; i < c.length; i++) {
     const s = c[i];
     if (s && s.nodeType !== Node.TEXT_NODE) {
@@ -153,19 +153,19 @@ function V(r, c) {
     }
   }
 }
-function H(r = {}) {
-  return { matchCase: !1, wholeWords: !1, ...r };
+function H(l = {}) {
+  return { matchCase: !1, wholeWords: !1, ...l };
 }
-function S(r, c, m) {
+function S(l, c, m) {
   const i = [];
   function s(n, o, e = -1, t = -1, d) {
     var f, E;
     const h = c.items[n], g = [];
-    let l = "", x = "", C = "", a = m[n];
+    let r = "", x = "", C = "", a = m[n];
     if (!a)
       return;
-    e >= 0 && t >= 0 ? l = h.str.substring(e, t) : e < 0 && t < 0 ? l = h.str : e >= 0 ? l = h.str.substring(e) : t >= 0 && (l = h.str.substring(0, t));
-    const M = document.createTextNode(l), N = document.createElement("span");
+    e >= 0 && t >= 0 ? r = h.str.substring(e, t) : e < 0 && t < 0 ? r = h.str : e >= 0 ? r = h.str.substring(e) : t >= 0 && (r = h.str.substring(0, t));
+    const M = document.createTextNode(r), N = document.createElement("span");
     if (N.style.background = d, N.append(M), g.push(N), e > 0)
       if (a.childNodes.length === 1 && a.childNodes[0].nodeType === Node.TEXT_NODE) {
         x = h.str.substring(0, e);
@@ -205,7 +205,7 @@ function S(r, c, m) {
       }
     a.replaceChildren(...g), i.push({ element: N, index: o });
   }
-  for (const [n, o] of r.entries()) {
+  for (const [n, o] of l.entries()) {
     const { start: e, end: t, color: d } = o;
     e.idx === t.idx && s(e.idx, n, e.offset, t.offset, d);
   }

package/dist/utils/hooks/useHighlight.js

@@ -1,55 +1,93 @@
-import { useState as m, useCallback as r, useEffect as C } from "react";
-import { getHighlightOptionsWithDefaults as H, findMatches as M } from "../highlight.js";
+import { useState as f, useCallback as p, useEffect as w } from "react";
+import { getHighlightOptionsWithDefaults as k, findMatches as P } from "../highlight.js";
 import "../charators.js";
-const k = (s) => {
-  const [n, c] = m(void 0), [f, l] = m([]), u = r(async (t) => {
-    if (!t)
+const x = (n) => {
+  const e = Math.min(...n.map((s) => s.left)), c = Math.max(...n.map((s) => s.left + s.width)), o = Math.min(...n.map((s) => s.bottom)), t = Math.max(...n.map((s) => s.height));
+  return { left: e, bottom: o, width: c - e, height: t };
+}, N = (n) => n.flatMap((e) => e.rects ?? (e.rect ? [e.rect] : [])), O = (n) => {
+  const e = n.reduce((o, t) => {
+    const s = Math.round(t.bottom);
+    return o[s] || (o[s] = []), o[s].push(t), o;
+  }, {});
+  return Object.entries(e).sort((o, t) => Number(t[0]) - Number(o[0])).map(([o, t]) => x(t));
+}, L = (n) => {
+  const e = {};
+  for (const c of n) {
+    const o = c.keyword, t = e[o] ?? [];
+    t.push(c), e[o] = t;
+  }
+  return e;
+}, j = (n, e) => {
+  const c = n[0], o = N(n), t = o.length > 0 ? O(o) : c.rect ? [c.rect] : [];
+  return {
+    ...c,
+    pageMatchIdx: e,
+    rect: t[0] ?? c.rect,
+    rects: t
+  };
+}, v = (n) => {
+  const e = {};
+  for (const t of n) {
+    const s = e[t.page] ?? [];
+    s.push(t), e[t.page] = s;
+  }
+  let c = 0;
+  const o = [];
+  for (const t of Object.values(e)) {
+    const s = L(t);
+    for (const g of Object.values(s))
+      o.push(j(g, c++));
+  }
+  return o;
+}, K = (n) => {
+  const [e, c] = f(void 0), [o, t] = f([]), s = p(async (r) => {
+    if (!r)
       return {};
-    const i = t.numPages, e = {};
-    for (let o = 1; o <= i; o++) {
-      const h = await t.getPage(o);
-      e[o.toString()] = await h.getTextContent();
+    const i = r.numPages, h = {};
+    for (let a = 1; a <= i; a++) {
+      const u = await r.getPage(a);
+      h[a.toString()] = await u.getTextContent();
     }
-    return e;
-  }, []), p = r(async (t) => {
-    c(t);
-  }, []), g = r(() => {
-    l([]), c(void 0);
+    return h;
+  }, []), g = p(async (r) => {
+    c(r);
+  }, []), l = p(() => {
+    t([]), c(void 0);
   }, []);
-  return C(() => {
-    s && u(s).then((t) => {
+  return w(() => {
+    n && s(n).then((r) => {
       let i = [];
-      for (const { keyword: e, highlightColor: o, options: h } of n) {
-        if (!e)
+      for (const { keyword: h, highlightColor: a, options: u } of e) {
+        if (!h)
           continue;
-        const y = H(h);
-        for (const a of Object.keys(t)) {
-          const b = M(
-            [e],
-            t[a],
-            Number(a) - 1,
-            y
-          ).map((w, x) => ({
-            ...w,
-            page: Number(a),
-            pageMatchIdx: x,
-            color: o,
-            keyword: e
+        const b = k(u);
+        for (const m of Object.keys(r)) {
+          const d = P(
+            [h],
+            r[m],
+            Number(m) - 1,
+            b
+          ).map((M, y) => ({
+            ...M,
+            page: Number(m),
+            pageMatchIdx: y,
+            color: a,
+            keyword: h
           }));
-          i = [...i, ...b];
+          i = [...i, ...d];
         }
       }
-      l(i);
+      t(v(i));
     }).catch(() => {
-      g();
+      l();
     });
-  }, [n, s, g, u]), {
-    highlight: p,
-    clear: g,
-    highlightMatches: f,
-    highlightKeywords: n
+  }, [e, n, l, s]), {
+    highlight: g,
+    clear: l,
+    highlightMatches: o,
+    highlightKeywords: e
   };
 };
 export {
-  k as useHighlight
+  K as useHighlight
 };

package/dist/utils/hooks/useLicense.js

@@ -1,6 +1,6 @@
 import { useState as E, useCallback as h, useEffect as A } from "react";
 import { appConsole as l } from "../appConsole.js";
-const b = /* @__PURE__ */ new Date("2026-02-27T08:34:10.839Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
+const b = /* @__PURE__ */ new Date("2026-03-04T09:04:06.326Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
   invalidLicense: `You are currently using without a valid license. ${d}`,
   mismatchedDomain: `Your license key is not valid for the current domain / IP. ${d}`,
   expired: `Your license key has expired. ${d}`,

package/dist/utils/hooks/usePrint.js

@@ -1,6 +1,6 @@
-import { useState as g, useRef as N, useEffect as R, useCallback as P } from "react";
-import { useDocumentContext as O } from "../../contexts/RPDocumentContext.js";
-import { PixelsPerInch as X, AnnotationMode as q, RenderingCancelledException as B } from "pdfjs-dist";
+import { useState as g, useRef as k, useEffect as D, useCallback as P } from "react";
+import { useDocumentContext as q } from "../../contexts/RPDocumentContext.js";
+import { PixelsPerInch as V, AnnotationMode as O, RenderingCancelledException as U } from "pdfjs-dist";
 import "react/jsx-runtime";
 import "./useLoadPdf.js";
 import "../types.js";
@@ -13,118 +13,111 @@ import "./usePdfProperties.js";
 import "../convertPdfDate.js";
 import "../formatFileSize.js";
 const re = () => {
-  const { pdf: l, pages: f } = O(), [D, E] = g({
+  const { pdf: l, pages: f } = q(), [R, E] = g({
     loadedPages: 0,
     totalPages: 0,
     percentage: 0
-  }), [T, b] = g(!1), [A, y] = g(!1), [Z, L] = g(null), [F, w] = g(void 0), s = N(!1);
-  R(() => {
-    s.current;
-  }, [s]);
-  const C = P(() => {
+  }), [T, y] = g(!1), [A, b] = g(!1), [Z, C] = g(null), [M, w] = g(void 0), i = k(!1);
+  D(() => {
+    i.current;
+  }, [i]);
+  const S = P(() => {
     document.documentElement.classList.remove("rp-print-html-printing"), document.body.classList.remove("rp-print-body-printing");
     const e = document.querySelector(".rp-print-zone");
     e && e.remove();
-  }, []), a = P(() => {
-    s.current = !1, b(!1), y(!1), L(null), w(void 0), E({
+  }, []), s = P(() => {
+    i.current = !1, y(!1), b(!1), C(null), w(void 0), E({
       loadedPages: 0,
       totalPages: 0,
       percentage: 0
     });
-  }, []), M = () => {
-    s.current = !0;
+  }, []), F = () => {
+    i.current = !0;
   }, I = async ({
     scratchCanvas: e,
     pdfDocument: n,
     pageNumber: t,
-    viewerPdfPage: o,
-    printResolution: r,
-    optionalContentConfigPromise: i,
+    viewerPdfPage: r,
+    printResolution: o,
+    optionalContentConfigPromise: c,
     printAnnotationStoragePromise: u
   }) => {
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
-    const c = r / X.PDF;
-    e.width = Math.floor(o.width * c), e.height = Math.floor(o.height * c);
+    const a = o / V.PDF;
+    e.width = Math.floor(r.width * a), e.height = Math.floor(r.height * a);
     const p = e.getContext("2d");
     p.save(), p.fillStyle = "rgb(255, 255, 255)", p.fillRect(0, 0, e.width, e.height), p.restore();
     const [m, h] = await Promise.all([
       n.getPage(t),
       u
     ]);
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
     const v = {
       canvas: e,
       canvasContext: p,
-      transform: [c, 0, 0, c, 0, 0],
-      viewport: m.getViewport({ scale: 1, rotation: o.rotation }),
+      transform: [a, 0, 0, a, 0, 0],
+      viewport: m.getViewport({ scale: 1, rotation: r.rotation }),
       intent: "print",
-      annotationMode: q.ENABLE_STORAGE,
-      optionalContentConfigPromise: i,
+      annotationMode: O.ENABLE_STORAGE,
+      optionalContentConfigPromise: c,
       printAnnotationStorage: h
     };
     try {
       return m.render(v).promise;
     } catch (d) {
-      throw d instanceof B || console.error(d), d;
+      throw d instanceof U || console.error(d), d;
     }
-  }, S = P(() => {
+  }, L = P(() => {
     const e = window.print;
     return new Promise((n) => {
-      const t = (i) => {
+      const t = (c) => {
         setTimeout(() => {
-          e.call(window), setTimeout(() => i(), 20);
+          e.call(window), setTimeout(() => c(), 20);
         }, 0);
       };
       if (document.querySelector(".rp-print-zone")) {
         t(n);
         return;
       }
-      const r = new MutationObserver(() => {
-        document.querySelector(".rp-print-zone") && (t(n), r.disconnect());
+      const o = new MutationObserver(() => {
+        document.querySelector(".rp-print-zone") && (t(n), o.disconnect());
       });
-      r.observe(document.body, { childList: !0, subtree: !0 });
+      o.observe(document.body, { childList: !0, subtree: !0 });
     });
-  }, []), U = async (e) => {
+  }, []), z = (e) => {
     const n = document.createElement("img"), t = document.createElement("div");
-    return t.classList.add("rp-print-page"), await new Promise((o, r) => {
-      e.toBlob((i) => {
-        i ? (n.src = URL.createObjectURL(i), n.onload = () => {
-          URL.revokeObjectURL(n.src), o();
-        }, n.onerror = r) : r(new Error("Failed to create blob"));
-      });
-    }).catch(() => {
-    }), t.appendChild(n), t;
+    return t.classList.add("rp-print-page"), n.src = e.toDataURL(), t.appendChild(n), t;
   }, x = (e, n) => {
     const t = document.createElement("div");
     t.classList.add("rp-print-zone");
-    const o = document.createElement("style"), r = n.get(1);
-    if (r) {
-      const { width: i, height: u } = r == null ? void 0 : r.page.getViewport({ scale: 1 });
-      o.innerHTML = `@page { size: ${i}px ${u}px }`;
+    const r = document.createElement("style"), o = n.get(1);
+    if (o) {
+      const c = o.page.getViewport({ scale: 1 }), { width: u, height: a } = c;
+      r.innerHTML = `@page { size: ${u}pt ${a}pt; margin: 0; }`;
     }
-    return t.appendChild(o), t.append(...e), t;
-  }, k = P(
+    return t.appendChild(r), t.append(...e), t;
+  }, N = P(
     async (e) => {
       if (!l)
         return;
-      a();
+      s();
       const n = e && "visibleDefaultProgress" in e ? e : void 0;
       (n == null ? void 0 : n.visibleDefaultProgress) !== void 0 ? w(n.visibleDefaultProgress) : w(!0);
-      const t = document.createElement("canvas"), o = [];
+      const t = document.createElement("canvas"), r = [];
       try {
         l.isPureXfa && console.warn("[rp] XFA Form is not supported at the moment.");
-        const i = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
+        const c = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
           l.annotationStorage.print ?? void 0
-        ), c = f.size;
+        ), a = f.size;
         for (const [m, h] of f) {
-          if (s.current) {
-            a();
+          if (i.current) {
+            s();
             return;
           }
           const v = h.page.getViewport({ scale: 1 });
@@ -134,50 +127,50 @@ const re = () => {
             pageNumber: m,
             viewerPdfPage: v,
             printResolution: 150,
-            optionalContentConfigPromise: i,
+            optionalContentConfigPromise: c,
             printAnnotationStoragePromise: u
-          }), s.current) {
-            a();
+          }), i.current) {
+            s();
             return;
           }
-          const d = await U(t);
-          o.push(d);
-          const z = parseFloat((o.length / c * 100).toFixed(2));
+          const d = z(t);
+          r.push(d);
+          const X = parseFloat((r.length / a * 100).toFixed(2));
           E({
             loadedPages: m,
-            totalPages: c,
-            percentage: z
+            totalPages: a,
+            percentage: X
           });
         }
-        if (s.current) {
-          a();
+        if (i.current) {
+          s();
           return;
         }
-        const p = x(o, f);
-        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), b(!0), await S();
-      } catch (r) {
-        y(!0), r instanceof Error && L(r);
+        const p = x(r, f);
+        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), y(!0), await L();
+      } catch (o) {
+        b(!0), o instanceof Error && C(o);
       } finally {
         t.height = 0, t.width = 0;
       }
     },
-    [l, f, s, a, x, S]
+    [l, f, i, s, x, L]
   );
-  return R(() => {
+  return D(() => {
     const e = () => {
-      a(), C();
+      s(), S();
     };
     return window.addEventListener("afterprint", e, !0), () => {
       window.removeEventListener("afterprint", e, !0);
     };
-  }, [C, a]), {
-    print: k,
-    cancel: M,
-    progress: D,
+  }, [S, s]), {
+    print: N,
+    cancel: F,
+    progress: R,
     isComplete: T,
     isError: A,
     error: Z,
-    showDefaultProgress: F
+    showDefaultProgress: M
   };
 };
 export {

package/dist/utils/injectPrintCSS.js

@@ -3,17 +3,18 @@ function e() {
     return;
   const t = document.createElement("style");
   t.id = "rp-print-style", t.textContent = `
+  @page { margin: 0; }
+
   .rp-print-zone { display: none; }
 
   @media print {
-    @page { margin: 0; }
     .rp-print-html-printing { height: 100%; }
-    .rp-print-body-printing { background: transparent; height: 100%; margin: 0; display: block; }
+    .rp-print-body-printing { background: rgb(0 0 0 / 0) none; height: 100% !important; margin: 0 !important; display: block !important; }
     .rp-print-body-printing * { display: none; }
     .rp-print-zone { display: block; height: 100%; }
     .rp-print-page { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100%; width: 100%; page-break-after: always; page-break-inside: avoid; }
     .rp-print-page:last-child { page-break-after: auto; }
-    .rp-print-page img, .rp-print-page canvas { display: block; max-height: 100%; max-width: 100%; direction: ltr; }
+    .rp-print-page img, .rp-print-page canvas { display: block; max-width: 100%; max-height: 100%; direction: ltr; }
   }
   `, document.head.appendChild(t);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf-kit/viewer",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.2",
   "private": false,
   "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
   "keywords": [