@dmsi/wedgekit-react 0.0.89 → 0.0.91

package/dist/chunk-3ZUSYRI7.js

@@ -0,0 +1,11 @@
+// src/components/HorizontalDivider.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function HorizontalDivider({ id, hideOnMobile }) {
+  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block");
+  return /* @__PURE__ */ jsx("hr", { id, className: clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
+}
+
+export {
+  HorizontalDivider
+};

package/dist/chunk-6HIALT5L.js

@@ -0,0 +1,125 @@
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  typography
+} from "./chunk-RDLEIAQU.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Caption.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Caption = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    style = "default",
+    color,
+    align,
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "style",
+    "color",
+    "align",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ jsxs("div", { id, className: "flex gap-1", children: [
+    /* @__PURE__ */ jsx(
+      WhichIcon,
+      {
+        id,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Element,
+      __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
+        className: clsx(
+          typography.caption.replace("text-text-primary-normal", ""),
+          (style === "default" || style === "info") && "text-text-secondary-normal",
+          style === "success" && "text-text-success-normal",
+          style === "warning" && "text-text-warning-normal",
+          style === "error" && "text-text-critical-normal",
+          align === "left" && "text-left",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className
+        )
+      }, props), {
+        style: {
+          color: color ? `var(--color-${color})` : void 0
+        },
+        children
+      })
+    )
+  ] });
+};
+var WhichIcon = ({
+  style,
+  size,
+  className,
+  id
+}) => {
+  if (style === "success") {
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
+  }
+  if (style === "warning") {
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
+  }
+  if (style === "error") {
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  if (style === "info") {
+    return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  return null;
+};
+Caption.displayName = "Caption";
+
+export {
+  Caption
+};

package/dist/{chunk-RHADESKO.js → chunk-A4XOUWM5.js}

@@ -1,6 +1,6 @@
 import {
   SelectPaymentMethod
-} from "./chunk-SASEP5UE.js";
+} from "./chunk-Z7OYI7ZH.js";
 import {
   Modal
 } from "./chunk-QIHDPSOM.js";

package/dist/{chunk-SASEP5UE.js → chunk-Z7OYI7ZH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TTO4PL7Y.js";
 import {
   HorizontalDivider
-} from "./chunk-5OHGKW4U.js";
+} from "./chunk-3ZUSYRI7.js";
 import {
   Checkbox
 } from "./chunk-WT5XXW6G.js";

package/dist/components/Caption.js

@@ -1,124 +1,9 @@
 import {
-  Icon
-} from "../chunk-IGQVA7SC.js";
-import {
-  typography
-} from "../chunk-RDLEIAQU.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-
-// src/components/Caption.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Caption = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    style = "default",
-    color,
-    align,
-    id
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "style",
-    "color",
-    "align",
-    "id"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ jsxs("div", { id, className: "flex gap-1", children: [
-    /* @__PURE__ */ jsx(
-      WhichIcon,
-      {
-        id,
-        style,
-        size: 16,
-        className: "mt-[3px] desktop:mt-0"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Element,
-      __spreadProps(__spreadValues({
-        id: id ? `${id}-text` : void 0,
-        className: clsx(
-          typography.caption.replace("text-text-primary-normal", ""),
-          (style === "default" || style === "info") && "text-text-secondary-normal",
-          style === "success" && "text-text-success-normal",
-          style === "warning" && "text-text-warning-normal",
-          style === "error" && "text-text-critical-normal",
-          align === "left" && "text-left",
-          align === "center" && "text-center",
-          align === "right" && "text-right",
-          className
-        )
-      }, props), {
-        style: {
-          color: color ? `var(--color-${color})` : void 0
-        },
-        children
-      })
-    )
-  ] });
-};
-var WhichIcon = ({
-  style,
-  size,
-  className,
-  id
-}) => {
-  if (style === "success") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        className,
-        name: "check_circle",
-        size
-      }
-    ) });
-  }
-  if (style === "warning") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        className,
-        name: "warning",
-        size
-      }
-    ) });
-  }
-  if (style === "error") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  if (style === "info") {
-    return /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  return null;
-};
-Caption.displayName = "Caption";
+  Caption
+} from "../chunk-6HIALT5L.js";
+import "../chunk-IGQVA7SC.js";
+import "../chunk-RDLEIAQU.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Caption
 };

package/dist/components/HorizontalDivider.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/HorizontalDivider.tsx
@@ -23,9 +33,11 @@ __export(HorizontalDivider_exports, {
   HorizontalDivider: () => HorizontalDivider
 });
 module.exports = __toCommonJS(HorizontalDivider_exports);
+var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-function HorizontalDivider({ id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id, hideOnMobile }) {
+  const hideOnMobileStyle = (0, import_clsx.default)(hideOnMobile && "hidden desktop:block");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { id, className: (0, import_clsx.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/HorizontalDivider.js

@@ -1,6 +1,6 @@
 import {
   HorizontalDivider
-} from "../chunk-5OHGKW4U.js";
+} from "../chunk-3ZUSYRI7.js";
 import "../chunk-ORMEWXMH.js";
 export {
   HorizontalDivider

package/dist/components/PDFViewer.cjs

@@ -841,49 +841,377 @@ var Modal = ({
 };
 Modal.displayName = "Modal";
 
-// src/components/PDFViewer.tsx
+// src/components/Stack.tsx
+var import_clsx10 = __toESM(require("clsx"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx10.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx10.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom"
+  ]);
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id
+    }, 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,
+        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,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        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
+      },
+      className: (0, import_clsx10.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    })
+  );
+};
+
+// src/components/Caption.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Caption = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    style = "default",
+    color,
+    align,
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "style",
+    "color",
+    "align",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id, className: "flex gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      WhichIcon,
+      {
+        id,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Element,
+      __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
+        className: (0, import_clsx11.default)(
+          typography.caption.replace("text-text-primary-normal", ""),
+          (style === "default" || style === "info") && "text-text-secondary-normal",
+          style === "success" && "text-text-success-normal",
+          style === "warning" && "text-text-warning-normal",
+          style === "error" && "text-text-critical-normal",
+          align === "left" && "text-left",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className
+        )
+      }, props), {
+        style: {
+          color: color ? `var(--color-${color})` : void 0
+        },
+        children
+      })
+    )
+  ] });
+};
+var WhichIcon = ({
+  style,
+  size,
+  className,
+  id
+}) => {
+  if (style === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
+  }
+  if (style === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
+  }
+  if (style === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  if (style === "info") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  return null;
+};
+Caption.displayName = "Caption";
+
+// src/components/PDFViewer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function PDFViewer(props) {
-  const { base64, isOpen, onClose, datab64 } = props;
+  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
+  const [isDownloading, setIsDownloading] = (0, import_react6.useState)(false);
+  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`;
+    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)(
+    Modal,
+    {
+      open: isOpen,
+      onClose,
+      showButtons: !!customActions,
+      customActions,
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadIcon, { onClick: handleDownload, isDownloading }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFElement, { b64: encodedPdfs[currentIndex].base64 }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Stack, { horizontal: true, sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Button,
+          {
+            variant: index === currentIndex ? "primary" : "secondary",
+            onClick: () => setCurrentIndex(index),
+            disabled: isDownloading || currentIndex === index,
+            children: pdf.fileName
+          },
+          `${pdf.fileName}-${index}`
+        )) })
+      ] })
+    }
+  );
+}
+function DownloadIcon({
+  onClick,
+  isDownloading
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Button,
+    {
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+function PDFElement({ b64 }) {
   const [page, setPage] = (0, import_react6.useState)(1);
   const canvasRef = (0, import_react6.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf.usePdf)({
-    file: datab64 ? datab64 : `data:application/pdf;base64,${base64}`,
+    file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
     scale: 1
   });
-  if (!base64 && !datab64) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Modal, { open: isOpen, onClose, hideCloseIcon: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("canvas", { ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: "Loading PDF..." }),
-    Boolean(pdfDocument && pdfDocument.numPages) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("ul", { className: "flex flex-row justify-between items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col space-y-4", children: [
+    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("canvas", { ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { 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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
         {
           disabled: page === 1,
           onClick: () => setPage(page - 1),
-          variant: "navigation",
-          children: "Previous"
+          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Caption, { children: "Previous" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
         "Page ",
         page,
         " of ",
         pdfDocument.numPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Button,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
         {
           disabled: page === pdfDocument.numPages,
           onClick: () => setPage(page + 1),
-          variant: "navigation",
-          children: "Next"
+          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Caption, { children: "Next" })
         }
       ) })
     ] })
-  ] }) });
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/PDFViewer.js

@@ -8,41 +8,100 @@ import "../chunk-FWPJ73IK.js";
 import "../chunk-3JRVV6QY.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
+import {
+  Caption
+} from "../chunk-6HIALT5L.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
+import {
+  Stack
+} from "../chunk-EO3JJWFW.js";
 import {
   Button
 } from "../chunk-L364HTYC.js";
-import "../chunk-IGQVA7SC.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/PDFViewer.tsx
 import { usePdf } from "@mikecousins/react-pdf";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PDFViewer(props) {
-  const { base64, isOpen, onClose, datab64 } = props;
+  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const handleDownload = 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`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+  if (!encodedPdfs.length) return null;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open: isOpen,
+      onClose,
+      showButtons: !!customActions,
+      customActions,
+      headerIcon: /* @__PURE__ */ jsx(DownloadIcon, { onClick: handleDownload, isDownloading }),
+      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
+        /* @__PURE__ */ jsx(PDFElement, { b64: encodedPdfs[currentIndex].base64 }),
+        /* @__PURE__ */ jsx(Stack, { horizontal: true, sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: index === currentIndex ? "primary" : "secondary",
+            onClick: () => setCurrentIndex(index),
+            disabled: isDownloading || currentIndex === index,
+            children: pdf.fileName
+          },
+          `${pdf.fileName}-${index}`
+        )) })
+      ] })
+    }
+  );
+}
+function DownloadIcon({
+  onClick,
+  isDownloading
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+function PDFElement({ b64 }) {
   const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
   const { pdfDocument } = usePdf({
-    file: datab64 ? datab64 : `data:application/pdf;base64,${base64}`,
+    file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
     scale: 1
   });
-  if (!base64 && !datab64) return null;
-  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onClose, hideCloseIcon: true, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
     pdfDocument ? /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) : /* @__PURE__ */ jsx("div", { children: "Loading PDF..." }),
-    Boolean(pdfDocument && pdfDocument.numPages) && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", children: [
+    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", children: [
       /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
-        Button,
+        "button",
         {
           disabled: page === 1,
           onClick: () => setPage(page - 1),
-          variant: "navigation",
-          children: "Previous"
+          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+          children: /* @__PURE__ */ jsx(Caption, { children: "Previous" })
         }
       ) }),
       /* @__PURE__ */ jsxs("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
@@ -52,16 +111,16 @@ function PDFViewer(props) {
         pdfDocument.numPages
       ] }),
       /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
-        Button,
+        "button",
         {
           disabled: page === pdfDocument.numPages,
           onClick: () => setPage(page + 1),
-          variant: "navigation",
-          children: "Next"
+          className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
+          children: /* @__PURE__ */ jsx(Caption, { children: "Next" })
         }
       ) })
     ] })
-  ] }) });
+  ] });
 }
 export {
   PDFViewer

package/dist/components/PaymentOnAccountModal.cjs

@@ -1729,7 +1729,7 @@ var RadioIcon = ({ className }) => {
 RadioIcon.displayName = "RadioIcon";
 
 // src/components/SelectPaymentMethod.tsx
-var import_clsx19 = __toESM(require("clsx"), 1);
+var import_clsx20 = __toESM(require("clsx"), 1);
 
 // src/components/Checkbox.tsx
 var import_clsx17 = __toESM(require("clsx"), 1);
@@ -1895,9 +1895,11 @@ var Subheader = (_a) => {
 Subheader.displayName = "Subheader";
 
 // src/components/HorizontalDivider.tsx
+var import_clsx19 = __toESM(require("clsx"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function HorizontalDivider({ id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id, hideOnMobile }) {
+  const hideOnMobileStyle = (0, import_clsx19.default)(hideOnMobile && "hidden desktop:block");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, className: (0, import_clsx19.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/SelectPaymentMethod.tsx
@@ -2006,7 +2008,7 @@ function ACHSelector(props) {
             children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               Card,
               {
-                className: (0, import_clsx19.default)(
+                className: (0, import_clsx20.default)(
                   "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
                   selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
                 ),

package/dist/components/PaymentOnAccountModal.js

@@ -1,7 +1,7 @@
 import {
   PaymentOnAccountModal
-} from "../chunk-RHADESKO.js";
-import "../chunk-SASEP5UE.js";
+} from "../chunk-A4XOUWM5.js";
+import "../chunk-Z7OYI7ZH.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
@@ -10,7 +10,7 @@ import "../chunk-FWPJ73IK.js";
 import "../chunk-3JRVV6QY.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
-import "../chunk-5OHGKW4U.js";
+import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -786,7 +786,7 @@ var RadioIcon = ({ className }) => {
 RadioIcon.displayName = "RadioIcon";
 
 // src/components/SelectPaymentMethod.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
+var import_clsx12 = __toESM(require("clsx"), 1);
 
 // src/components/Checkbox.tsx
 var import_clsx9 = __toESM(require("clsx"), 1);
@@ -964,9 +964,11 @@ function formatCurrencyDisplay(value) {
 }
 
 // src/components/HorizontalDivider.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function HorizontalDivider({ id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id, hideOnMobile }) {
+  const hideOnMobileStyle = (0, import_clsx11.default)(hideOnMobile && "hidden desktop:block");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, className: (0, import_clsx11.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/SelectPaymentMethod.tsx
@@ -1075,7 +1077,7 @@ function ACHSelector(props) {
             children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               Card,
               {
-                className: (0, import_clsx11.default)(
+                className: (0, import_clsx12.default)(
                   "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
                   selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
                 ),

package/dist/components/SelectPaymentMethod.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-SASEP5UE.js";
+} from "../chunk-Z7OYI7ZH.js";
 import "../chunk-TTO4PL7Y.js";
-import "../chunk-5OHGKW4U.js";
+import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-O4M2GISS.js";

package/dist/components/index.cjs

@@ -4411,12 +4411,14 @@ var RadioIcon = ({ className }) => {
 RadioIcon.displayName = "RadioIcon";
 
 // src/components/SelectPaymentMethod.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
+var import_clsx30 = __toESM(require("clsx"), 1);
 
 // src/components/HorizontalDivider.tsx
+var import_clsx29 = __toESM(require("clsx"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function HorizontalDivider({ id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id, hideOnMobile }) {
+  const hideOnMobileStyle = (0, import_clsx29.default)(hideOnMobile && "hidden desktop:block");
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, className: (0, import_clsx29.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/SelectPaymentMethod.tsx
@@ -4525,7 +4527,7 @@ function ACHSelector(props) {
             children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Card,
               {
-                className: (0, import_clsx29.default)(
+                className: (0, import_clsx30.default)(
                   "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
                   selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
                 ),

package/dist/components/index.js

@@ -6,8 +6,8 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-RHADESKO.js";
-import "../chunk-SASEP5UE.js";
+} from "../chunk-A4XOUWM5.js";
+import "../chunk-Z7OYI7ZH.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
@@ -16,7 +16,7 @@ import "../chunk-FWPJ73IK.js";
 import "../chunk-3JRVV6QY.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
-import "../chunk-5OHGKW4U.js";
+import "../chunk-3ZUSYRI7.js";
 import {
   Checkbox
 } from "../chunk-WT5XXW6G.js";

package/dist/index.css

@@ -2419,6 +2419,11 @@
       padding-block: var(--spacing-mobile-component-padding);
     }
   }
+  .not-disabled\:cursor-pointer {
+    &:not(*:disabled) {
+      cursor: pointer;
+    }
+  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2976,6 +2981,15 @@
       }
     }
   }
+  .not-disabled\:hover\:underline {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: underline;
+        }
+      }
+    }
+  }
   .focus\:border-background-action-critical-primary-hover {
     &:focus {
       border-color: var(--color-background-action-critical-primary-hover);

package/package.json

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

package/src/components/HorizontalDivider.tsx

@@ -1,5 +1,9 @@
-export function HorizontalDivider({ id }: { id?: string }) {
+import clsx from "clsx";
+
+export function HorizontalDivider({ id, hideOnMobile }: { id?: string, hideOnMobile?: boolean }) {
+  const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block")
+
   return (
-    <hr id={id} className="w-full border-t border-border-primary-normal" />
+    <hr id={id} className={clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle)} />
   );
 }

package/src/components/PDFViewer.tsx

@@ -1,63 +1,128 @@
 "use client";
 
 import { usePdf } from "@mikecousins/react-pdf";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Modal } from "./Modal";
 import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { Stack } from "./Stack";
+import { Caption } from "./Caption";
 
 type PDFViewerProps = {
   isOpen: boolean;
   onClose: () => void;
-  base64: string;
-  datab64?: string;
+  encodedPdfs: { fileName: string; base64: string }[];
+  customActions?: React.ReactNode;
 };
 
 export function PDFViewer(props: PDFViewerProps) {
-  const { base64, isOpen, onClose, datab64 } = props;
-  const [page, setPage] = useState(1);
+  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = 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`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+
+  if (!encodedPdfs.length) return null;
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      showButtons={!!customActions}
+      customActions={customActions}
+      headerIcon={
+        <DownloadIcon onClick={handleDownload} isDownloading={isDownloading} />
+      }
+    >
+      <Stack sizing="layout">
+        <PDFElement b64={encodedPdfs[currentIndex].base64} />
+        <Stack horizontal sizing="layout-group">
+          {encodedPdfs.map((pdf, index) => (
+            <Button
+              variant={index === currentIndex ? "primary" : "secondary"}
+              key={`${pdf.fileName}-${index}`}
+              onClick={() => setCurrentIndex(index)}
+              disabled={isDownloading || currentIndex === index}
+            >
+              {pdf.fileName}
+            </Button>
+          ))}
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+}
 
+function DownloadIcon({
+  onClick,
+  isDownloading,
+}: {
+  onClick: () => void;
+  isDownloading?: boolean;
+}) {
+  return (
+    <Button
+      iconOnly
+      variant="tertiary"
+      leftIcon={<Icon name={isDownloading ? "cached" : "download"} />}
+      onClick={onClick}
+    />
+  );
+}
+
+function PDFElement({ b64 }: { b64: string }) {
+  const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
 
   const { pdfDocument } = usePdf({
-    file: datab64 ? datab64 : `data:application/pdf;base64,${base64}`,
+    file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
     page,
     canvasRef,
     scale: 1,
   });
 
-  if (!base64 && !datab64) return null;
-
   return (
-    <Modal open={isOpen} onClose={onClose} hideCloseIcon>
-      <div className="flex flex-col space-y-4">
-        {pdfDocument ? <canvas ref={canvasRef} /> : <div>Loading PDF...</div>}
-        {Boolean(pdfDocument && pdfDocument.numPages) && (
-          <ul className="flex flex-row justify-between items-center">
-            <li className="previous">
-              <Button
-                disabled={page === 1}
-                onClick={() => setPage(page - 1)}
-                variant="navigation"
-              >
-                Previous
-              </Button>
-            </li>
-            <li className="text-label-desktop text-text-on-action-primary-normal">
-              Page {page} of {pdfDocument!.numPages}
-            </li>
-            <li className="next">
-              <Button
-                disabled={page === pdfDocument!.numPages}
-                onClick={() => setPage(page + 1)}
-                variant="navigation"
-              >
-                Next
-              </Button>
-            </li>
-          </ul>
-        )}
-      </div>
-    </Modal>
+    <div className="flex flex-col space-y-4">
+      {pdfDocument ? <canvas ref={canvasRef} /> : <div>Loading PDF...</div>}
+      {pdfDocument?.numPages && pdfDocument.numPages > 1 && (
+        <ul className="flex flex-row justify-between items-center">
+          <li className="previous">
+            <button
+              disabled={page === 1}
+              onClick={() => setPage(page - 1)}
+              className="not-disabled:cursor-pointer not-disabled:hover:underline "
+            >
+              <Caption>Previous</Caption>
+            </button>
+          </li>
+          <li className="text-label-desktop text-text-on-action-primary-normal">
+            Page {page} of {pdfDocument!.numPages}
+          </li>
+          <li className="next">
+            <button
+              disabled={page === pdfDocument!.numPages}
+              onClick={() => setPage(page + 1)}
+              className="not-disabled:cursor-pointer not-disabled:hover:underline "
+            >
+              <Caption>Next</Caption>
+            </button>
+          </li>
+        </ul>
+      )}
+    </div>
   );
 }

package/dist/chunk-5OHGKW4U.js

@@ -1,9 +0,0 @@
-// src/components/HorizontalDivider.tsx
-import { jsx } from "react/jsx-runtime";
-function HorizontalDivider({ id }) {
-  return /* @__PURE__ */ jsx("hr", { id, className: "w-full border-t border-border-primary-normal" });
-}
-
-export {
-  HorizontalDivider
-};