@dmsi/wedgekit-react 0.0.159 → 0.0.160

package/dist/{chunk-WJ447JB5.js → chunk-4NCDT5ZY.js}

@@ -1,18 +1,18 @@
 import {
   Menu
-} from "./chunk-LPARJM6S.js";
+} from "./chunk-YR7JUKYO.js";
 import {
   useSubMenuSystem
 } from "./chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "./chunk-AEDEFN7A.js";
+} from "./chunk-FFU6FB3K.js";
+import {
+  Search
+} from "./chunk-PMBEIP24.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
-import {
-  Search
-} from "./chunk-IDSFWKOR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-QFSGM4MP.js → chunk-NT2ZKA4W.js}

@@ -6,16 +6,13 @@ import {
 } from "./chunk-BATIOCXB.js";
 import {
   Spinner
-} from "./chunk-GG5JOFS6.js";
+} from "./chunk-PLMGI5K5.js";
 import {
   HorizontalDivider
 } from "./chunk-EPQLWHCL.js";
 import {
   Checkbox
 } from "./chunk-WFQEE2OO.js";
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue
@@ -32,6 +29,9 @@ import {
 import {
   Card
 } from "./chunk-4LXG6QNT.js";
+import {
+  Button
+} from "./chunk-FKMKHLQH.js";
 
 // src/components/SelectPaymentMethod.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-GG5JOFS6.js → chunk-PLMGI5K5.js}

@@ -11,7 +11,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ jsx(

package/dist/{chunk-IDSFWKOR.js → chunk-PMBEIP24.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-MVGOAMTP.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-N7EKJEYO.js → chunk-RUTYNLKS.js}

@@ -1,12 +1,12 @@
 import {
   SelectPaymentMethod
-} from "./chunk-QFSGM4MP.js";
+} from "./chunk-NT2ZKA4W.js";
 import {
   Modal
-} from "./chunk-NRCUFAOZ.js";
+} from "./chunk-5GOJRLQO.js";
 import {
   Input
-} from "./chunk-MVGOAMTP.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   formatCurrencyDisplay
 } from "./chunk-5UH6QUFB.js";

package/dist/{chunk-KADNOKNW.js → chunk-XH65MD2C.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-MVGOAMTP.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/components/DataGridCell.js

@@ -4,17 +4,17 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-WJ447JB5.js";
-import "../chunk-LPARJM6S.js";
+} from "../chunk-4NCDT5ZY.js";
+import "../chunk-YR7JUKYO.js";
 import "../chunk-5GUW4DUY.js";
-import "../chunk-AEDEFN7A.js";
-import "../chunk-WVUIIBRR.js";
-import "../chunk-4T7F5BZZ.js";
-import "../chunk-IDSFWKOR.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+import "../chunk-FFU6FB3K.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-4T7F5BZZ.js";
+import "../chunk-PMBEIP24.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-HVI3CL7Y.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";

package/dist/components/DateInput.js

@@ -1,21 +1,21 @@
+import {
+  calculateCursorPosition,
+  formatDate,
+  formatInputValue,
+  isValidDate,
+  parseInputDate
+} from "../chunk-IDN3IN2A.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
+} from "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-JWCT72WR.js";
 import {
   CalendarRange
 } from "../chunk-NMVSRA5Y.js";
-import {
-  calculateCursorPosition,
-  formatDate,
-  formatInputValue,
-  isValidDate,
-  parseInputDate
-} from "../chunk-IDN3IN2A.js";
-import "../chunk-5UH6QUFB.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/DateRangeInput.js

@@ -1,13 +1,3 @@
-import {
-  findDocumentRoot
-} from "../chunk-4T7F5BZZ.js";
-import {
-  InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
-import {
-  CalendarRange
-} from "../chunk-NMVSRA5Y.js";
 import {
   calculateCursorPosition,
   formatDate,
@@ -16,7 +6,17 @@ import {
   isValidDateRangeOrder,
   parseInputDate
 } from "../chunk-IDN3IN2A.js";
+import {
+  findDocumentRoot
+} from "../chunk-4T7F5BZZ.js";
+import {
+  InputBase
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
+import {
+  CalendarRange
+} from "../chunk-NMVSRA5Y.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/FilterGroup.js

@@ -2,22 +2,22 @@
 import {
   OptionPill
 } from "../chunk-LM5MKBPM.js";
+import {
+  Checkbox
+} from "../chunk-WFQEE2OO.js";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
-import "../chunk-MVGOAMTP.js";
+} from "../chunk-PMBEIP24.js";
+import "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-JWCT72WR.js";
-import {
-  Checkbox
-} from "../chunk-WFQEE2OO.js";
-import "../chunk-FKMKHLQH.js";
-import "../chunk-5UH6QUFB.js";
 import "../chunk-HVI3CL7Y.js";
 import {
   Link
 } from "../chunk-I6GEUF6Y.js";
+import "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Input.js

@@ -6,9 +6,9 @@ import {
   InputBase,
   Percentage,
   UOM
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/LoadingScrim.cjs

@@ -48,7 +48,7 @@ var Spinner = ({ size = "small", testid }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "#1D1E1E",
-      className: size === "large" ? "animate-spin" : "",
+      className: "animate-spin",
       "aria-label": "Loading",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/LoadingScrim.js

@@ -1,6 +1,6 @@
 import {
   Spinner
-} from "../chunk-GG5JOFS6.js";
+} from "../chunk-PLMGI5K5.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/LoadingScrim.tsx

package/dist/components/Menu.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Menu
-} from "../chunk-LPARJM6S.js";
+} from "../chunk-YR7JUKYO.js";
 import "../chunk-5GUW4DUY.js";
-import "../chunk-4T7F5BZZ.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-4T7F5BZZ.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Menu

package/dist/components/MenuOption.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-AEDEFN7A.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-FFU6FB3K.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-HVI3CL7Y.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";

package/dist/components/MobileDataGrid.js

@@ -4,15 +4,15 @@ import {
 import {
   Heading3
 } from "../chunk-AZ7LVLOK.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Modal.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Modal
-} from "../chunk-NRCUFAOZ.js";
+} from "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
 import "../chunk-R7ELP5C5.js";
 import "../chunk-ZFOANBWG.js";
 import "../chunk-AZ7LVLOK.js";
+import "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
 import "../chunk-FKMKHLQH.js";
-import "../chunk-WNQ53SVY.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/NestedMenu.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-AEDEFN7A.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-FFU6FB3K.js";
 import {
   useKeydown
 } from "../chunk-WNQ53SVY.js";
+import "../chunk-JWCT72WR.js";
 import "../chunk-HVI3CL7Y.js";
 import {
   Icon

package/dist/components/Notification.js

@@ -2,15 +2,15 @@
 import {
   Heading3
 } from "../chunk-AZ7LVLOK.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/PDFViewer.cjs

@@ -1154,8 +1154,118 @@ var WhichIcon = ({
 };
 Caption.displayName = "Caption";
 
-// src/components/PDFViewer.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            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)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/PDFViewer.tsx
+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);
@@ -1163,15 +1273,20 @@ function PDFViewer(props) {
   const handleDownload = (0, import_react6.useCallback)(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
-    link.href = `data:application/pdf;base64,${encodedPdfs[currentIndex].base64}`;
-    link.download = encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf`;
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
     setIsDownloading(false);
   }, [currentIndex, encodedPdfs]);
   if (!encodedPdfs.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Modal,
     {
       testid,
@@ -1179,14 +1294,22 @@ function PDFViewer(props) {
       onClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadIcon, { testid: testid ? `${testid}-download-icon` : void 0, onClick: handleDownload, isDownloading }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { sizing: "layout", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           Button,
           {
             testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
             variant: index === currentIndex ? "primary" : "secondary",
+            classNameLabel: "items-center flex flex-row gap-2",
             onClick: (e) => {
               setCurrentIndex(index);
               requestAnimationFrame(() => {
@@ -1198,8 +1321,11 @@ function PDFViewer(props) {
                 });
               });
             },
-            disabled: isDownloading || currentIndex === index,
-            children: pdf.fileName
+            disabled: isDownloading || currentIndex === index || !pdf.base64,
+            children: [
+              !pdf.base64 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, {}),
+              pdf.fileName
+            ]
           },
           `${pdf.fileName}-${index}`
         )) })
@@ -1212,13 +1338,13 @@ function DownloadIcon({
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   );
@@ -1233,36 +1359,71 @@ function PDFElement({ b64, testid }) {
     canvasRef,
     scale: 1
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("canvas", { "data-testid": testid ? `${testid}-pdf-content` : void 0, ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "flex flex-row justify-between items-center", "data-testid": testid ? `${testid}-pdf-pagination` : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(Caption, { children: "Previous" })
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0, className: "text-label-desktop text-text-on-action-primary-normal", children: [
-        "Page ",
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0, children: page }),
-        " of ",
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0, children: pdfDocument.numPages })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
-          disabled: page === pdfDocument.numPages,
-          onClick: () => setPage(page + 1),
-          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Caption, { children: "Next" })
-        }
-      ) })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col space-y-4", children: [
+    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "canvas",
+      {
+        "data-testid": testid ? `${testid}-pdf-content` : void 0,
+        ref: canvasRef
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
+    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "ul",
+      {
+        className: "flex flex-row justify-between items-center",
+        "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(Caption, { children: "Previous" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "li",
+            {
+              "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
+              className: "text-label-desktop text-text-on-action-primary-normal",
+              children: [
+                "Page",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
+                    children: page
+                  }
+                ),
+                " ",
+                "of",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
+                    children: pdfDocument.numPages
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
+              disabled: page === pdfDocument.numPages,
+              onClick: () => setPage(page + 1),
+              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Caption, { children: "Next" })
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: