@dmsi/wedgekit-react 0.0.202 → 0.0.204

package/dist/components/PDFViewer.js

@@ -1,41 +1,40 @@
 "use client";
 import {
   Modal
-} from "../chunk-RYBHJC4G.js";
+} from "../chunk-2B5T4NCT.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-C4JGTH6G.js";
+import "../chunk-47KTDBGA.js";
 import "../chunk-SYEJVSE4.js";
-import "../chunk-MJKBQSNI.js";
+import "../chunk-A5ROZWIH.js";
 import "../chunk-ZFOANBWG.js";
 import {
   Spinner
 } from "../chunk-PLMGI5K5.js";
 import {
   Heading3
-} from "../chunk-AZ7LVLOK.js";
-import "../chunk-6LN6QT6M.js";
-import {
-  Caption
-} from "../chunk-E7D24OHM.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
+} from "../chunk-REOLWEZG.js";
 import "../chunk-WNQ53SVY.js";
+import "../chunk-6LN6QT6M.js";
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import {
+  __async
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/PDFViewer.tsx
 import { usePdf } from "@mikecousins/react-pdf";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PDFViewer(props) {
   const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
@@ -105,10 +104,7 @@ function PDFViewer(props) {
         }
       ),
       className: "!max-w-fit",
-      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", items: "center", children: [
-        /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ jsx(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` })
-      ] })
+      children: /* @__PURE__ */ jsx(Stack, { sizing: "layout", items: "center", children: /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }) })
     }
   );
 }
@@ -129,16 +125,24 @@ function DownloadIcon({
   );
 }
 function PDFElement({ b64, testid }) {
-  const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
+  const [pages, setPages] = useState([]);
+  useEffect(() => {
+    setPages([]);
+  }, [b64]);
   const { pdfDocument } = 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__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "flex flex-col space-y-4 ",
@@ -146,81 +150,33 @@ function PDFElement({ b64, testid }) {
         minHeight: 871,
         minWidth: 654
       },
-      children: [
-        !!pdfDocument && !!b64 ? /* @__PURE__ */ jsx(
+      children: !!pdfDocument && !!b64 ? /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center border border-border-primary-normal", children: /* @__PURE__ */ jsx(
           "canvas",
           {
             "data-testid": testid ? `${testid}-pdf-content` : void 0,
             ref: canvasRef
           }
-        ) : /* @__PURE__ */ jsx(
-          Stack,
+        ) }),
+        pages.map((page, index) => /* @__PURE__ */ jsx(
+          "div",
           {
-            justify: "center",
-            items: "center",
-            height: "full",
-            flexGrow: 1,
-            "data-testid": testid ? `${testid}-pdf-loading` : void 0,
-            children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
-          }
-        ),
-        (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs(
-          "ul",
-          {
-            className: "flex flex-row justify-between items-center",
-            "data-testid": testid ? `${testid}-pdf-pagination` : void 0,
-            children: [
-              /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ 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__ */ jsx(Caption, { className: "not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal", children: "Previous" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
-                  className: "text-label-desktop text-text-primary-normal",
-                  children: [
-                    "Page",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
-                        children: page
-                      }
-                    ),
-                    " ",
-                    "of",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
-                        children: pdfDocument.numPages
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
-                  disabled: page === pdfDocument.numPages,
-                  onClick: () => setPage(page + 1),
-                  children: /* @__PURE__ */ 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__ */ jsx(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-loading` : void 0,
+          children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+        }
+      )
     }
   );
 }
@@ -279,6 +235,35 @@ function PdfNavigation({
     }
   ) });
 }
+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__ */ 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);
+}
 export {
   PDFViewer
 };

package/dist/components/Paragraph.js

@@ -1,8 +1,8 @@
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Paragraph
 };

package/dist/components/Password.js

@@ -1,18 +1,18 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Password.tsx
 import { useState } from "react";

package/dist/components/ProjectBar.js

@@ -9,7 +9,7 @@ import {
 } from "../chunk-RDLEIAQU.js";
 import {
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/ProjectBar.tsx
 import clsx from "clsx";

package/dist/components/Radio.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
 import {
   baseTransition,
   componentGap
@@ -9,7 +9,7 @@ import {
 import {
   __objRest,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Radio.tsx
 import clsx from "clsx";

package/dist/components/Search.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-2WRRRPEB.js";
+import "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-NKUETCDA.js";
+import "../chunk-CJVTFYI4.js";
+import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Search
 };

package/dist/components/Select.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
-import "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-33W2KSCB.js";
+import "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-NKUETCDA.js";
+import "../chunk-CJVTFYI4.js";
+import "../chunk-UAPWR2KE.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Select
 };

package/dist/components/SideMenu.js

@@ -1,4 +1,4 @@
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 
 // src/components/SideMenu.tsx
 import clsx from "clsx";

package/dist/components/SideMenuGroup.js

@@ -1,20 +1,20 @@
 "use client";
 import {
   Label
-} from "../chunk-JWCT72WR.js";
+} from "../chunk-CJVTFYI4.js";
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   baseTransition
 } from "../chunk-RDLEIAQU.js";
 import {
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/SideMenuGroup.tsx
 import clsx from "clsx";

package/dist/components/SideMenuItem.js

@@ -1,14 +1,14 @@
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
 import {
   baseTransition,
   componentPaddingMinus2pxBorder
 } from "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 
 // src/components/SideMenuItem.tsx
 import clsx from "clsx";

package/dist/components/Spinner.js

@@ -1,7 +1,7 @@
 import {
   Spinner
 } from "../chunk-PLMGI5K5.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Spinner
 };

package/dist/components/Stack.js

@@ -1,8 +1,8 @@
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Stack
 };

package/dist/components/StatusPill.js

@@ -1,6 +1,6 @@
 import {
   Label
-} from "../chunk-JWCT72WR.js";
+} from "../chunk-CJVTFYI4.js";
 import {
   componentPaddingYUsingComponentGap,
   paddingXUsingLayoutGroupGap
@@ -9,7 +9,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/StatusPill.tsx
 import clsx from "clsx";

package/dist/components/Stepper.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-7W4I2NK3.js";
+import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import {
   Button
-} from "../chunk-FKMKHLQH.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-SK742QNF.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";
@@ -17,7 +17,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Stepper.tsx
 import clsx from "clsx";

package/dist/components/Subheader.js

@@ -1,8 +1,8 @@
 import {
   Subheader
-} from "../chunk-CYZL57LH.js";
+} from "../chunk-KGVKHWUK.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Subheader
 };

package/dist/components/Surface.js

@@ -2,7 +2,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Surface.tsx
 import clsx from "clsx";

package/dist/components/Swatch.js

@@ -1,20 +1,20 @@
 import {
   Heading2,
   Heading3
-} from "../chunk-AZ7LVLOK.js";
+} from "../chunk-REOLWEZG.js";
 import {
   Display1
-} from "../chunk-EUXB3XKL.js";
+} from "../chunk-LPQ4QMAV.js";
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
 import {
   typography
 } from "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 
 // src/components/Swatch.tsx
 import clsx from "clsx";

package/dist/components/Textarea.js

@@ -9,7 +9,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Textarea.tsx
 import clsx from "clsx";

package/dist/components/Theme.js

@@ -1,7 +1,7 @@
 import {
   Theme
 } from "../chunk-EWGHVZL5.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Theme
 };

package/dist/components/Time.js

@@ -3,15 +3,15 @@ import {
 } from "../chunk-6LN6QT6M.js";
 import {
   InputBase
-} from "../chunk-MVGOAMTP.js";
-import "../chunk-JWCT72WR.js";
+} from "../chunk-7W4I2NK3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-CJVTFYI4.js";
 import {
   Stack
-} from "../chunk-N6JVLYEE.js";
+} from "../chunk-BOWQUDUU.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   typography
 } from "../chunk-RDLEIAQU.js";
@@ -19,7 +19,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Time.tsx
 import { useEffect, useRef, useState } from "react";

package/dist/components/Toast.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Heading3
-} from "../chunk-AZ7LVLOK.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
+} from "../chunk-REOLWEZG.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   componentGap,
   componentPadding,
@@ -20,7 +20,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Toast.tsx
 import clsx from "clsx";

package/dist/components/Tooltip.js

@@ -3,7 +3,7 @@ import {
   Tooltip
 } from "../chunk-3WNXMCZV.js";
 import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 export {
   Tooltip
 };

package/dist/components/TopBar.js

@@ -1,6 +1,6 @@
 import {
   LogoDMSiTopBar
-} from "../chunk-QBIEU25R.js";
+} from "../chunk-WKWNBR53.js";
 import {
   containerPaddingX,
   gapUsingContainerPadding,
@@ -12,7 +12,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/TopBar.tsx
 import clsx from "clsx";

package/dist/components/Upload.js

@@ -1,12 +1,12 @@
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Paragraph
-} from "../chunk-HVI3CL7Y.js";
+} from "../chunk-CJELWEO2.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   Icon
-} from "../chunk-NKUETCDA.js";
+} from "../chunk-UAPWR2KE.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";
@@ -14,7 +14,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "../chunk-ORMEWXMH.js";
+} from "../chunk-BBZEL7EG.js";
 
 // src/components/Upload.tsx
 import clsx from "clsx";

package/dist/components/WorldpayIframe.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import "../chunk-BBZEL7EG.js";
 
 // src/components/WorldpayIframe.tsx
 import { jsx } from "react/jsx-runtime";