@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/{PDFViewer.cjs → PDFViewer/index.cjs}

@@ -57,14 +57,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/PDFViewer.tsx
+// src/components/PDFViewer/index.tsx
 var PDFViewer_exports = {};
 __export(PDFViewer_exports, {
   PDFViewer: () => PDFViewer
 });
 module.exports = __toCommonJS(PDFViewer_exports);
-var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/Modal.tsx
 var import_clsx9 = __toESM(require("clsx"), 1);
@@ -440,7 +439,8 @@ var ModalHeader = ({
   headerIconAlign,
   onClose,
   id,
-  testid
+  testid,
+  headerClassname
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
@@ -453,10 +453,11 @@ var ModalHeader = ({
         headerIconAlign === "right" && "justify-end",
         headerIconAlign === "left" && "justify-start",
         layoutPaddding,
-        layoutGroupGap
+        layoutGroupGap,
+        headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Heading2,
@@ -476,7 +477,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -579,9 +580,10 @@ var ModalScrim = ({
       id,
       "data-testid": testid,
       className: (0, import_clsx8.default)(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
         size === "small" && "p-4",
+        size === "screen" ? "desktop:p-0" : "desktop:p-4",
         "inset-0 z-50"
       ),
       onMouseDown: onClick,
@@ -713,6 +715,9 @@ var sizes = {
   },
   "x-large": {
     sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  screen: {
+    sizeClass: "w-screen h-screen max-w-screen !rounded-none"
   }
 };
 var Modal = ({
@@ -731,7 +736,10 @@ var Modal = ({
   headerIcon,
   headerIconAlign,
   fixedHeightScrolling = false,
-  customActions
+  customActions,
+  headerClassname,
+  customFooter,
+  noWrapper
 }) => {
   var _a;
   const mounted = useMounted();
@@ -839,9 +847,10 @@ var Modal = ({
             "data-testid": testid,
             ref: modalRef,
             className: (0, import_clsx9.default)(
-              "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
-              computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+              computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
               className,
+              !(className == null ? void 0 : className.includes("bg-")) && "bg-white",
               sizeClass
             ),
             onClick: (e) => e.stopPropagation(),
@@ -855,10 +864,11 @@ var Modal = ({
                   onClose: handleClose,
                   hideCloseIcon,
                   headerIcon,
-                  headerIconAlign
+                  headerIconAlign,
+                  headerClassname
                 }
               ),
-              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -866,8 +876,8 @@ var Modal = ({
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
-              ),
-              showButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : children,
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -876,7 +886,7 @@ var Modal = ({
                   onContinue,
                   customActions
                 }
-              )
+              ) : null
             ]
           }
         )
@@ -887,9 +897,43 @@ var Modal = ({
 };
 Modal.displayName = "Modal";
 
+// src/components/PDFViewer/PDFElement.tsx
+var import_react_pdf2 = require("@mikecousins/react-pdf");
+var import_react8 = require("react");
+
+// src/components/Spinner.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
 // src/components/Stack.tsx
 var import_clsx10 = __toESM(require("clsx"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx10.default)(
   "flex",
   items === "start" && "items-start",
@@ -950,7 +994,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -987,11 +1033,14 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -999,9 +1048,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -1010,7 +1059,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx10.default)(
         "scrollbar-thin",
@@ -1057,39 +1110,131 @@ var Stack = (_a) => {
   );
 };
 
-// src/components/Spinner.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "svg",
+// src/components/PDFViewer/PDFPage.tsx
+var import_react_pdf = require("@mikecousins/react-pdf");
+var import_react7 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function PdfPage({
+  file,
+  pageNumber,
+  testid,
+  isMobile
+}) {
+  const canvasRef = (0, import_react7.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf.usePdf)({
+    file,
+    page: pageNumber,
+    canvasRef,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3
+  });
+  if (!pdfDocument) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "canvas",
     {
+      ref: canvasRef,
       "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
+      style: { width: "100%", height: "auto" }
     }
   );
-};
-Spinner.displayName = "Spinner";
+}
 
-// src/components/Paragraph.tsx
+// src/components/PDFViewer/PDFElement.tsx
 var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function PDFElement({
+  b64,
+  testid,
+  isMobile,
+  error
+}) {
+  var _a;
+  const canvasRef = (0, import_react8.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf2.usePdf)({
+    file: `data:application/pdf;base64,${b64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+    canvasRef
+  });
+  const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      className: "flex flex-col space-y-4",
+      style: !isMobile ? {
+        minHeight: 871,
+        minWidth: 654
+      } : void 0,
+      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: (0, import_clsx11.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            PdfPage,
+            {
+              testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
+              file: `data:application/pdf;base64,${b64}`,
+              pageNumber: i + 1
+            }
+          )
+        },
+        `${testid}-pdf-page-${i + 1}`
+      )) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: (0, import_clsx11.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "canvas",
+            {
+              "data-testid": testid ? `${testid}-pdf-content` : void 0,
+              ref: canvasRef,
+              style: { width: "100%", height: "auto" }
+            }
+          )
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-${error ? "error" : "loading"}` : void 0,
+          children: error ? error : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { size: "large" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/PDFViewer/DownloadIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DownloadIcon({
+  onClick,
+  isDownloading,
+  testid
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Button,
+    {
+      testid,
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+
+// src/components/Paragraph.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Paragraph = (_a) => {
   var _b = _a, {
     className,
@@ -1115,13 +1260,13 @@ var Paragraph = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid
     }, props), {
-      className: (0, import_clsx11.default)(
+      className: (0, import_clsx12.default)(
         typography.paragraph,
         className,
         padded && componentPaddingXUsingComponentGap,
@@ -1140,13 +1285,82 @@ var Paragraph = (_a) => {
 };
 Paragraph.displayName = "Paragraph";
 
-// src/components/PDFViewer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// src/components/PDFViewer/PDFNavigation.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
+
+// src/components/PDFViewer/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function PDFViewer(props) {
-  const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
-  const [currentIndex, setCurrentIndex] = (0, import_react7.useState)(0);
-  const [isDownloading, setIsDownloading] = (0, import_react7.useState)(false);
-  const handleDownload = (0, import_react7.useCallback)(() => {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    withPagination = true,
+    error
+  } = props;
+  const [currentIndex, setCurrentIndex] = (0, import_react9.useState)(0);
+  const [isDownloading, setIsDownloading] = (0, import_react9.useState)(false);
+  const handleDownload = (0, import_react9.useCallback)(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
     const currentPdf = encodedPdfs[currentIndex];
@@ -1177,14 +1391,16 @@ function PDFViewer(props) {
     setIsDownloading(false);
     onClose();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Modal,
     {
       testid,
       open: isOpen,
+      customFooter,
       onClose: handleClose,
-      showButtons: !!encodedPdfs.length,
-      customActions: !!encodedPdfs.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      noWrapper: true,
+      showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PdfNavigation,
         {
           testid,
@@ -1197,160 +1413,32 @@ function PDFViewer(props) {
           extraActions: customActions,
           fileName: encodedPdfs[currentIndex].fileName
         }
-      ),
-      size: "large",
+      ) : customActions,
       fixedHeightScrolling: true,
       headerIconAlign: "right",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      headerIcon: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         DownloadIcon,
         {
           testid: testid ? `${testid}-download-icon` : void 0,
           onClick: handleDownload,
           isDownloading
         }
-      ),
-      className: "!max-w-fit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 })
-    }
-  );
-}
-function DownloadIcon({
-  onClick,
-  isDownloading,
-  testid
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Button,
-    {
-      testid,
-      iconOnly: true,
-      variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
-      onClick
-    }
-  );
-}
-function PDFElement({ b64, testid }) {
-  var _a;
-  const canvasRef = (0, import_react7.useRef)(null);
-  const { pdfDocument } = (0, import_react_pdf.usePdf)({
-    file: `data:application/pdf;base64,${b64}`,
-    workerSrc: "/scripts/pdf.worker.min.mjs",
-    canvasRef,
-    scale: 1.1
-  });
-  const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
-    {
-      className: "flex flex-col space-y-4",
-      style: {
-        minHeight: 871,
-        minWidth: 654
-      },
-      children: !!pdfDocument && !!b64 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "div",
+      ) : void 0,
+      title: isMobile ? title != null ? title : encodedPdfs[currentIndex].fileName : void 0,
+      size: isMobile ? "screen" : "large",
+      headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        PDFElement,
         {
-          className: "flex justify-center border border-border-primary-normal",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            PdfPage,
-            {
-              testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
-              file: `data:application/pdf;base64,${b64}`,
-              pageNumber: i + 1
-            }
-          )
-        },
-        `${testid}-pdf-page-${i + 1}`
-      )) : /* @__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_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" })
+          testid,
+          b64: encodedPdfs[currentIndex].base64,
+          isMobile,
+          error
         }
       )
     }
   );
 }
-function PdfNavigation({
-  currentIndex,
-  total,
-  onPrev,
-  onNext,
-  disablePrev,
-  disableNext,
-  extraActions,
-  testid,
-  fileName
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    Stack,
-    {
-      horizontal: true,
-      items: "center",
-      justify: "between",
-      sizing: "layout-group",
-      testid: testid ? `${testid}-pdf-navigation` : void 0,
-      children: [
-        /* @__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_runtime12.jsx)(Icon, { name: "chevron_backward" }),
-              disabled: disablePrev,
-              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
-            currentIndex + 1,
-            " / ",
-            total
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Button,
-            {
-              iconOnly: true,
-              variant: "tertiary",
-              onClick: onNext,
-              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_runtime12.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
-        ] }),
-        extraActions && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
-      ]
-    }
-  ) });
-}
-function PdfPage({
-  file,
-  pageNumber,
-  testid
-}) {
-  const canvasRef = (0, import_react7.useRef)(null);
-  const { pdfDocument } = (0, import_react_pdf.usePdf)({
-    file,
-    page: pageNumber,
-    canvasRef
-  });
-  if (!pdfDocument) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("canvas", { ref: canvasRef, "data-testid": testid });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PDFViewer