@dmsi/wedgekit-react 0.0.170 → 0.0.172

package/dist/{chunk-4VTOTNKJ.js → chunk-3WNXMCZV.js}

@@ -19,7 +19,8 @@ var Tooltip = ({
   position = "top",
   children,
   showOnTruncation = false,
-  offset = 8
+  offset = 8,
+  keepHidden = false
 }) => {
   const ref = useRef(null);
   const tooltipRef = useRef(null);
@@ -88,7 +89,7 @@ var Tooltip = ({
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        isVisible && typeof document !== "undefined" && createPortal(
+        !keepHidden && isVisible && typeof document !== "undefined" && createPortal(
           /* @__PURE__ */ jsx(
             "div",
             {

package/dist/{chunk-FCREADUH.js → chunk-F6YFWBVV.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-SYEJVSE4.js";
 import {
   ModalHeader
-} from "./chunk-R7ELP5C5.js";
+} from "./chunk-MJKBQSNI.js";
 import {
   ModalScrim
 } from "./chunk-ZFOANBWG.js";
@@ -97,6 +97,7 @@ var Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions
 }) => {
@@ -126,7 +127,7 @@ var Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "Escape") {
@@ -136,7 +137,7 @@ var Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef]
+    [onClose]
   );
   const handleClose = useCallback(() => {
     if (onClose) {
@@ -221,7 +222,8 @@ var Modal = ({
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
-                  headerIcon
+                  headerIcon,
+                  headerIconAlign
                 }
               ),
               children && /* @__PURE__ */ jsx(

package/dist/{chunk-R7ELP5C5.js → chunk-MJKBQSNI.js}

@@ -19,6 +19,7 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid
@@ -30,13 +31,24 @@ var ModalHeader = ({
       "data-testid": testid,
       className: clsx(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ jsx(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ jsx(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
         ] }),
         !hideCloseIcon && /* @__PURE__ */ jsx(
           Button,

package/dist/components/Modal.cjs

@@ -428,6 +428,7 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid
@@ -439,13 +440,24 @@ var ModalHeader = ({
       "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
@@ -705,6 +717,7 @@ var Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions
 }) => {
@@ -734,7 +747,7 @@ var Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
   const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       if (e.key === "Escape") {
@@ -744,7 +757,7 @@ var Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef]
+    [onClose]
   );
   const handleClose = (0, import_react5.useCallback)(() => {
     if (onClose) {
@@ -829,7 +842,8 @@ var Modal = ({
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
-                  headerIcon
+                  headerIcon,
+                  headerIconAlign
                 }
               ),
               children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(

package/dist/components/Modal.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Modal
-} from "../chunk-FCREADUH.js";
+} from "../chunk-F6YFWBVV.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
-import "../chunk-R7ELP5C5.js";
+import "../chunk-MJKBQSNI.js";
 import "../chunk-ZFOANBWG.js";
 import "../chunk-AZ7LVLOK.js";
 import "../chunk-WNQ53SVY.js";

package/dist/components/ModalHeader.cjs

@@ -425,6 +425,7 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid
@@ -436,13 +437,24 @@ var ModalHeader = ({
       "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,

package/dist/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-R7ELP5C5.js";
+} from "../chunk-MJKBQSNI.js";
 import "../chunk-AZ7LVLOK.js";
 import "../chunk-FKMKHLQH.js";
 import "../chunk-NKUETCDA.js";

package/dist/components/PDFViewer.cjs

@@ -432,6 +432,7 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid
@@ -443,13 +444,24 @@ var ModalHeader = ({
       "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
@@ -709,6 +721,7 @@ var Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions
 }) => {
@@ -738,7 +751,7 @@ var Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
   const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       if (e.key === "Escape") {
@@ -748,7 +761,7 @@ var Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef]
+    [onClose]
   );
   const handleClose = (0, import_react5.useCallback)(() => {
     if (onClose) {
@@ -833,7 +846,8 @@ var Modal = ({
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
-                  headerIcon
+                  headerIcon,
+                  headerIconAlign
                 }
               ),
               children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1264,8 +1278,61 @@ var Spinner = ({ size = "small", testid }) => {
 };
 Spinner.displayName = "Spinner";
 
-// src/components/PDFViewer.tsx
+// src/components/Paragraph.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id",
+    "testid"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      className: (0, import_clsx12.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/PDFViewer.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function PDFViewer(props) {
   const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
@@ -1286,15 +1353,33 @@ function PDFViewer(props) {
     setIsDownloading(false);
   }, [currentIndex, encodedPdfs]);
   if (!encodedPdfs.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Modal,
     {
       testid,
       open: isOpen,
-      onClose,
+      onClose: handleClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      size: "large",
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DownloadIcon,
         {
           testid: testid ? `${testid}-download-icon` : void 0,
@@ -1302,33 +1387,49 @@ function PDFViewer(props) {
           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,
+      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` }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Stack,
           {
-            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(() => {
-                const button = e.target;
-                button.scrollIntoView({
-                  behavior: "smooth",
-                  block: "nearest",
-                  inline: "center"
-                });
-              });
-            },
-            disabled: isDownloading || currentIndex === index || !pdf.base64,
+            horizontal: true,
+            overflowX: "auto",
+            justify: "center",
+            items: "center",
+            sizing: "layout-group",
             children: [
-              !pdf.base64 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, {}),
-              pdf.fileName
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handlePreviousFile,
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_backward" }),
+                  disabled: currentIndex === 0,
+                  testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading3, { className: "text-text-primary-normal", children: [
+                currentIndex + 1,
+                " / ",
+                encodedPdfs.length
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handleNextFile,
+                  rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron_forward" }),
+                  disabled: currentIndex === encodedPdfs.length - 1,
+                  testid: testid ? `${testid}-pdf-file-next-button` : void 0
+                }
+              )
             ]
-          },
-          `${pdf.fileName}-${index}`
-        )) })
+          }
+        )
       ] })
     }
   );
@@ -1338,13 +1439,13 @@ function DownloadIcon({
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   );
@@ -1357,74 +1458,93 @@ function PDFElement({ b64, testid }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1
+    scale: 1.1
   });
-  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" })
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: "flex flex-col space-y-4 ",
+      style: {
+        minHeight: 871,
+        minWidth: 654
+      },
+      children: [
+        !!pdfDocument && !!b64 ? /* @__PURE__ */ (0, import_jsx_runtime13.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",
+          {
+            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" })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/PDFViewer.js

@@ -1,16 +1,18 @@
 "use client";
 import {
   Modal
-} from "../chunk-FCREADUH.js";
+} from "../chunk-F6YFWBVV.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-C4JGTH6G.js";
 import "../chunk-SYEJVSE4.js";
-import "../chunk-R7ELP5C5.js";
+import "../chunk-MJKBQSNI.js";
 import "../chunk-ZFOANBWG.js";
 import {
   Spinner
 } from "../chunk-PLMGI5K5.js";
-import "../chunk-AZ7LVLOK.js";
+import {
+  Heading3
+} from "../chunk-AZ7LVLOK.js";
 import {
   Caption
 } from "../chunk-E7D24OHM.js";
@@ -19,6 +21,9 @@ import "../chunk-6LN6QT6M.js";
 import {
   Stack
 } from "../chunk-N6JVLYEE.js";
+import {
+  Paragraph
+} from "../chunk-HVI3CL7Y.js";
 import {
   Button
 } from "../chunk-FKMKHLQH.js";
@@ -52,14 +57,32 @@ function PDFViewer(props) {
     setIsDownloading(false);
   }, [currentIndex, encodedPdfs]);
   if (!encodedPdfs.length) return null;
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
   return /* @__PURE__ */ jsx(
     Modal,
     {
       testid,
       open: isOpen,
-      onClose,
+      onClose: handleClose,
       showButtons: !!customActions,
       customActions,
+      size: "large",
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
       headerIcon: /* @__PURE__ */ jsx(
         DownloadIcon,
         {
@@ -68,33 +91,49 @@ function PDFViewer(props) {
           isDownloading
         }
       ),
-      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
+      className: "!max-w-fit",
+      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", items: "center", children: [
         /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
-        /* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsxs(
-          Button,
+        !!encodedPdfs[currentIndex].fileName && /* @__PURE__ */ jsx(Paragraph, { children: encodedPdfs[currentIndex].fileName.endsWith(".pdf") ? encodedPdfs[currentIndex].fileName : `${encodedPdfs[currentIndex].fileName}.pdf` }),
+        /* @__PURE__ */ jsxs(
+          Stack,
           {
-            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(() => {
-                const button = e.target;
-                button.scrollIntoView({
-                  behavior: "smooth",
-                  block: "nearest",
-                  inline: "center"
-                });
-              });
-            },
-            disabled: isDownloading || currentIndex === index || !pdf.base64,
+            horizontal: true,
+            overflowX: "auto",
+            justify: "center",
+            items: "center",
+            sizing: "layout-group",
             children: [
-              !pdf.base64 && /* @__PURE__ */ jsx(Spinner, {}),
-              pdf.fileName
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handlePreviousFile,
+                  leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_backward" }),
+                  disabled: currentIndex === 0,
+                  testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxs(Heading3, { className: "text-text-primary-normal", children: [
+                currentIndex + 1,
+                " / ",
+                encodedPdfs.length
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "tertiary",
+                  onClick: handleNextFile,
+                  rightIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_forward" }),
+                  disabled: currentIndex === encodedPdfs.length - 1,
+                  testid: testid ? `${testid}-pdf-file-next-button` : void 0
+                }
+              )
             ]
-          },
-          `${pdf.fileName}-${index}`
-        )) })
+          }
+        )
       ] })
     }
   );
@@ -123,74 +162,93 @@ function PDFElement({ b64, testid }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1
+    scale: 1.1
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ jsx(
-      "canvas",
-      {
-        "data-testid": testid ? `${testid}-pdf-content` : void 0,
-        ref: canvasRef
-      }
-    ) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
-    (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, { children: "Previous" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            "li",
-            {
-              "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
-              className: "text-label-desktop text-text-on-action-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),
-              className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
-              children: /* @__PURE__ */ jsx(Caption, { children: "Next" })
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col space-y-4 ",
+      style: {
+        minHeight: 871,
+        minWidth: 654
+      },
+      children: [
+        !!pdfDocument && !!b64 ? /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            "data-testid": testid ? `${testid}-pdf-content` : void 0,
+            ref: canvasRef
+          }
+        ) : /* @__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" })
+          }
+        ),
+        (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" })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   PDFViewer

package/dist/components/Tooltip.cjs

@@ -173,7 +173,8 @@ var Tooltip = ({
   position = "top",
   children,
   showOnTruncation = false,
-  offset = 8
+  offset = 8,
+  keepHidden = false
 }) => {
   const ref = (0, import_react.useRef)(null);
   const tooltipRef = (0, import_react.useRef)(null);
@@ -242,7 +243,7 @@ var Tooltip = ({
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        isVisible && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+        !keepHidden && isVisible && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-4VTOTNKJ.js";
+} from "../chunk-3WNXMCZV.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/index.cjs

@@ -3606,7 +3606,8 @@ var Tooltip = ({
   position = "top",
   children,
   showOnTruncation = false,
-  offset = 8
+  offset = 8,
+  keepHidden = false
 }) => {
   const ref = (0, import_react17.useRef)(null);
   const tooltipRef = (0, import_react17.useRef)(null);
@@ -3675,7 +3676,7 @@ var Tooltip = ({
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
+        !keepHidden && isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import {
   Tooltip
-} from "../chunk-4VTOTNKJ.js";
+} from "../chunk-3WNXMCZV.js";
 import {
   Select
 } from "../chunk-XH65MD2C.js";

package/dist/index.css

@@ -843,6 +843,9 @@
   .w-screen {
     width: 100vw;
   }
+  .\!max-w-fit {
+    max-width: fit-content !important;
+  }
   .max-w-25 {
     max-width: calc(var(--spacing) * 25);
   }
@@ -2421,6 +2424,11 @@
       cursor: pointer;
     }
   }
+  .not-disabled\:text-text-primary-normal {
+    &:not(*:disabled) {
+      color: var(--color-text-primary-normal);
+    }
+  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.170",
+  "version": "0.0.172",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Modal.tsx

@@ -25,6 +25,7 @@ type ModalProps = PropsWithChildren<{
   showButtons?: boolean;
   hideCloseIcon?: boolean;
   headerIcon?: React.ReactNode;
+  headerIconAlign?: "left" | "center" | "right";
   fixedHeightScrolling?: boolean;
   customActions?: React.ReactNode;
 }>;
@@ -117,6 +118,7 @@ export const Modal = ({
   showButtons = false,
   hideCloseIcon = false,
   headerIcon,
+  headerIconAlign,
   fixedHeightScrolling = false,
   customActions,
 }: ModalProps) => {
@@ -150,7 +152,7 @@ export const Modal = ({
       fadeInScale(modalRef.current);
       bgFadeIn(bgRef.current);
     }
-  }, [mounted, open]);
+  }, [mounted, onClose, open, wasOpen]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -161,7 +163,7 @@ export const Modal = ({
         }
       }
     },
-    [onClose, bgRef, modalRef],
+    [onClose],
   );
 
   const handleClose = useCallback(() => {
@@ -259,6 +261,7 @@ export const Modal = ({
           onClose={handleClose}
           hideCloseIcon={hideCloseIcon}
           headerIcon={headerIcon}
+          headerIconAlign={headerIconAlign}
         />
         {children && (
           <ModalContent

package/src/components/ModalHeader.tsx

@@ -9,6 +9,7 @@ type ModalHeaderProps = {
   title?: string;
   hideCloseIcon?: boolean;
   headerIcon?: React.ReactNode;
+  headerIconAlign?: "left" | "center" | "right";
   onClose?: () => void;
   id?: string;
   testid?: string;
@@ -18,6 +19,7 @@ export const ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
+  headerIconAlign,
   onClose,
   id,
   testid,
@@ -28,6 +30,9 @@ export const ModalHeader = ({
       data-testid={testid}
       className={clsx(
         "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap,
       )}
@@ -35,7 +40,11 @@ export const ModalHeader = ({
       <div className={clsx("flex items-center", layoutGroupGap)}>
         {headerIcon}
         {title && (
-          <Heading2 id={id ? `${id}-title` : undefined} testid={testid ? `${testid}-title` : undefined} as="p">
+          <Heading2
+            id={id ? `${id}-title` : undefined}
+            testid={testid ? `${testid}-title` : undefined}
+            as="p"
+          >
             {title}
           </Heading2>
         )}

package/src/components/PDFViewer.tsx

@@ -8,6 +8,8 @@ import { Icon } from "./Icon";
 import { Stack } from "./Stack";
 import { Caption } from "./Caption";
 import { Spinner } from "./Spinner";
+import { Paragraph } from "./Paragraph";
+import { Heading3 } from "./Heading";
 
 type PDFViewerProps = {
   isOpen: boolean;
@@ -42,13 +44,34 @@ export function PDFViewer(props: PDFViewerProps) {
 
   if (!encodedPdfs.length) return null;
 
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+
   return (
     <Modal
       testid={testid}
       open={isOpen}
-      onClose={onClose}
+      onClose={handleClose}
       showButtons={!!customActions}
       customActions={customActions}
+      size="large"
+      fixedHeightScrolling
+      headerIconAlign="right"
       headerIcon={
         <DownloadIcon
           testid={testid ? `${testid}-download-icon` : undefined}
@@ -56,11 +79,44 @@ export function PDFViewer(props: PDFViewerProps) {
           isDownloading={isDownloading}
         />
       }
+      className="!max-w-fit"
     >
-      <Stack sizing="layout">
+      <Stack sizing="layout" items="center">
         <PDFElement testid={testid} b64={encodedPdfs[currentIndex].base64} />
-        <Stack horizontal overflowX="auto" sizing="layout-group">
-          {encodedPdfs.map((pdf, index) => (
+        {!!encodedPdfs[currentIndex].fileName && (
+          <Paragraph>
+            {encodedPdfs[currentIndex].fileName.endsWith(".pdf")
+              ? encodedPdfs[currentIndex].fileName
+              : `${encodedPdfs[currentIndex].fileName}.pdf`}
+          </Paragraph>
+        )}
+        <Stack
+          horizontal
+          overflowX="auto"
+          justify="center"
+          items="center"
+          sizing="layout-group"
+        >
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={handlePreviousFile}
+            leftIcon={<Icon name="chevron_backward" />}
+            disabled={currentIndex === 0}
+            testid={testid ? `${testid}-pdf-file-previous-button` : undefined}
+          />
+          <Heading3 className="text-text-primary-normal">
+            {currentIndex + 1} / {encodedPdfs.length}
+          </Heading3>
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={handleNextFile}
+            rightIcon={<Icon name="chevron_forward" />}
+            disabled={currentIndex === encodedPdfs.length - 1}
+            testid={testid ? `${testid}-pdf-file-next-button` : undefined}
+          />
+          {/* {encodedPdfs.map((pdf, index) => (
             <Button
               testid={testid ? `${testid}-${pdf.fileName}-button` : undefined}
               variant={index === currentIndex ? "primary" : "secondary"}
@@ -84,7 +140,7 @@ export function PDFViewer(props: PDFViewerProps) {
               {!pdf.base64 && <Spinner />}
               {pdf.fileName}
             </Button>
-          ))}
+          ))} */}
         </Stack>
       </Stack>
     </Modal>
@@ -120,20 +176,32 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
-    scale: 1,
+    scale: 1.1,
   });
 
   return (
-    <div className="flex flex-col space-y-4">
-      {pdfDocument ? (
+    <div
+      className="flex flex-col space-y-4 "
+      style={{
+        minHeight: 871,
+        minWidth: 654,
+      }}
+    >
+      {!!pdfDocument && !!b64 ? (
         <canvas
           data-testid={testid ? `${testid}-pdf-content` : undefined}
           ref={canvasRef}
         />
       ) : (
-        <div data-testid={testid ? `${testid}-pdf-loading` : undefined}>
-          Loading PDF...
-        </div>
+        <Stack
+          justify="center"
+          items="center"
+          height="full"
+          flexGrow={1}
+          data-testid={testid ? `${testid}-pdf-loading` : undefined}
+        >
+          <Spinner size="large" />
+        </Stack>
       )}
       {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
         <ul
@@ -149,12 +217,14 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
               onClick={() => setPage(page - 1)}
               className="not-disabled:cursor-pointer not-disabled:hover:underline "
             >
-              <Caption>Previous</Caption>
+              <Caption className="not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal">
+                Previous
+              </Caption>
             </button>
           </li>
           <li
             data-testid={testid ? `${testid}-pdf-pagination-text` : undefined}
-            className="text-label-desktop text-text-on-action-primary-normal"
+            className="text-label-desktop text-text-primary-normal"
           >
             Page{" "}
             <span
@@ -182,9 +252,10 @@ function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
               }
               disabled={page === pdfDocument!.numPages}
               onClick={() => setPage(page + 1)}
-              className="not-disabled:cursor-pointer not-disabled:hover:underline "
             >
-              <Caption>Next</Caption>
+              <Caption className="not-disabled:cursor-pointer not-disabled:hover:underline not-disabled:text-text-primary-normal">
+                Next
+              </Caption>
             </button>
           </li>
         </ul>

package/src/components/Tooltip.tsx

@@ -19,6 +19,7 @@ export type TooltipProps = PropsWithChildren<{
   children?: ReactNode;
   showOnTruncation?: boolean;
   offset?: number;
+  keepHidden?: boolean; // for scenario where we want to keep the tooltip hidden based on a condition
 }>;
 
 export const Tooltip = ({
@@ -29,6 +30,7 @@ export const Tooltip = ({
   children,
   showOnTruncation = false,
   offset = 8,
+  keepHidden = false
 }: TooltipProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -109,7 +111,7 @@ export const Tooltip = ({
     >
       {children}
 
-      {isVisible &&
+      {!keepHidden && isVisible &&
         typeof document !== "undefined" &&
         createPortal(
           <div