@dmsi/wedgekit-react 0.0.203 → 0.0.205

package/dist/components/PDFViewer.cjs

@@ -56,6 +56,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/components/PDFViewer.tsx
 var PDFViewer_exports = {};
@@ -1049,130 +1069,11 @@ var Stack = (_a) => {
   );
 };
 
-// src/components/Caption.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Caption = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    style = "default",
-    color,
-    align,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "style",
-    "color",
-    "align",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      WhichIcon,
-      {
-        id,
-        testid,
-        style,
-        size: 16,
-        className: "mt-[3px] desktop:mt-0"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Element,
-      __spreadProps(__spreadValues({
-        id: id ? `${id}-text` : void 0,
-        "data-testid": testid ? `${testid}-text` : void 0,
-        className: (0, import_clsx11.default)(
-          typography.caption.replace("text-text-primary-normal", ""),
-          (style === "default" || style === "info") && "text-text-secondary-normal",
-          style === "success" && "text-text-success-normal",
-          style === "warning" && "text-text-warning-normal",
-          style === "error" && "text-text-critical-normal",
-          align === "left" && "text-left",
-          align === "center" && "text-center",
-          align === "right" && "text-right",
-          className
-        )
-      }, props), {
-        style: {
-          color: color ? `var(--color-${color})` : void 0
-        },
-        children
-      })
-    )
-  ] });
-};
-var WhichIcon = ({
-  style,
-  size,
-  className,
-  id,
-  testid
-}) => {
-  if (style === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "check_circle",
-        size
-      }
-    ) });
-  }
-  if (style === "warning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "warning",
-        size
-      }
-    ) });
-  }
-  if (style === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  if (style === "info") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  return null;
-};
-Caption.displayName = "Caption";
-
 // src/components/Spinner.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
       "data-testid": testid,
@@ -1184,7 +1085,7 @@ var Spinner = ({ size = "small", testid }) => {
       className: "animate-spin",
       "aria-label": "Loading",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1195,7 +1096,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1206,7 +1107,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1217,7 +1118,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1228,7 +1129,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1239,7 +1140,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1250,7 +1151,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1261,7 +1162,7 @@ var Spinner = ({ size = "small", testid }) => {
             repeatCount: "indefinite"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "animate",
           {
             attributeName: "opacity",
@@ -1279,8 +1180,8 @@ var Spinner = ({ size = "small", testid }) => {
 Spinner.displayName = "Spinner";
 
 // src/components/Paragraph.tsx
-var import_clsx12 = __toESM(require("clsx"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Paragraph = (_a) => {
   var _b = _a, {
     className,
@@ -1306,13 +1207,13 @@ var Paragraph = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid
     }, props), {
-      className: (0, import_clsx12.default)(
+      className: (0, import_clsx11.default)(
         typography.paragraph,
         className,
         padded && componentPaddingXUsingComponentGap,
@@ -1332,7 +1233,7 @@ var Paragraph = (_a) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/PDFViewer.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function PDFViewer(props) {
   const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
@@ -1368,14 +1269,14 @@ function PDFViewer(props) {
     setIsDownloading(false);
     onClose();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Modal,
     {
       testid,
       open: isOpen,
       onClose: handleClose,
       showButtons: !!encodedPdfs.length,
-      customActions: !!encodedPdfs.length && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      customActions: !!encodedPdfs.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         PdfNavigation,
         {
           testid,
@@ -1392,7 +1293,7 @@ function PDFViewer(props) {
       size: "large",
       fixedHeightScrolling: true,
       headerIconAlign: "right",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         DownloadIcon,
         {
           testid: testid ? `${testid}-download-icon` : void 0,
@@ -1401,10 +1302,7 @@ function PDFViewer(props) {
         }
       ),
       className: "!max-w-fit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { sizing: "layout", items: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { sizing: "layout", items: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }) })
     }
   );
 }
@@ -1413,28 +1311,36 @@ function DownloadIcon({
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   );
 }
 function PDFElement({ b64, testid }) {
-  const [page, setPage] = (0, import_react6.useState)(1);
   const canvasRef = (0, import_react6.useRef)(null);
+  const [pages, setPages] = (0, import_react6.useState)([]);
+  (0, import_react6.useEffect)(() => {
+    setPages([]);
+  }, [b64]);
   const { pdfDocument } = (0, import_react_pdf.usePdf)({
     file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
-    page,
+    page: 1,
     canvasRef,
-    scale: 1.1
+    scale: 1.1,
+    onDocumentLoadSuccess: (pdf) => __async(null, null, function* () {
+      if (pdf.numPages === 1) return;
+      const pages2 = yield renderPages(pdf, testid || "pdf-viewer");
+      setPages(pages2);
+    })
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       className: "flex flex-col space-y-4 ",
@@ -1442,81 +1348,33 @@ function PDFElement({ b64, testid }) {
         minHeight: 871,
         minWidth: 654
       },
-      children: [
-        !!pdfDocument && !!b64 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: !!pdfDocument && !!b64 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { sizing: "layout-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex justify-center border border-border-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "canvas",
           {
             "data-testid": testid ? `${testid}-pdf-content` : void 0,
             ref: canvasRef
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Stack,
-          {
-            justify: "center",
-            items: "center",
-            height: "full",
-            flexGrow: 1,
-            "data-testid": testid ? `${testid}-pdf-loading` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { size: "large" })
-          }
-        ),
-        (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-          "ul",
+        ) }),
+        pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
           {
-            className: "flex flex-row justify-between items-center",
-            "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "button",
-                {
-                  "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
-                  disabled: page === 1,
-                  onClick: () => setPage(page - 1),
-                  className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Previous" })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                "li",
-                {
-                  "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
-                  className: "text-label-desktop text-text-primary-normal",
-                  children: [
-                    "Page",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "span",
-                      {
-                        "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
-                        children: page
-                      }
-                    ),
-                    " ",
-                    "of",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "span",
-                      {
-                        "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
-                        children: pdfDocument.numPages
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "button",
-                {
-                  "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
-                  disabled: page === pdfDocument.numPages,
-                  onClick: () => setPage(page + 1),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Next" })
-                }
-              ) })
-            ]
-          }
-        )
-      ]
+            className: "flex justify-center border border-border-primary-normal",
+            children: page
+          },
+          `${testid}-pdf-page-${index}`
+        ))
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-loading` : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { size: "large" })
+        }
+      )
     }
   );
 }
@@ -1531,7 +1389,7 @@ function PdfNavigation({
   testid,
   fileName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Stack,
     {
       horizontal: true,
@@ -1540,41 +1398,70 @@ function PdfNavigation({
       sizing: "layout-group",
       testid: testid ? `${testid}-pdf-navigation` : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { horizontal: true, items: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Button,
             {
               iconOnly: true,
               variant: "tertiary",
               onClick: onPrev,
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_backward" }),
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "chevron_backward" }),
               disabled: disablePrev,
               testid: testid ? `${testid}-pdf-file-previous-button` : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
             currentIndex + 1,
             " / ",
             total
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Button,
             {
               iconOnly: true,
               variant: "tertiary",
               onClick: onNext,
-              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_forward" }),
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "chevron_forward" }),
               disabled: disableNext,
               testid: testid ? `${testid}-pdf-file-next-button` : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
         ] }),
-        extraActions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
       ]
     }
   ) });
 }
+function renderPages(pdf, testid) {
+  const pagesPromises = Array.from(
+    // Skip the first page as it is already rendered
+    { length: pdf.numPages - 1 },
+    (_, i) => __async(null, null, function* () {
+      const page = yield pdf.getPage(i + 2);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "canvas",
+        {
+          ref: (el) => {
+            if (el) {
+              const ctx = el.getContext("2d");
+              el.width = page.getViewport({ scale: 1.1 }).width;
+              el.height = page.getViewport({ scale: 1.1 }).height;
+              if (ctx) {
+                page.render({
+                  canvasContext: ctx,
+                  viewport: page.getViewport({ scale: 1.1 })
+                });
+              }
+            }
+          }
+        },
+        `${testid}-pdf_page_${page.pageNumber}`
+      );
+    })
+  );
+  return Promise.all(pagesPromises);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PDFViewer