@dmsi/wedgekit-react 0.0.415 → 0.0.417

package/dist/chunk-3HBYDOYE.js

@@ -0,0 +1,114 @@
+import {
+  DownloadIcon
+} from "./chunk-EJSPFQCY.js";
+import {
+  PDFElement
+} from "./chunk-RQLWSLVE.js";
+import {
+  PdfNavigation
+} from "./chunk-6LHBY2IH.js";
+import {
+  Modal
+} from "./chunk-SBCFBHNG.js";
+
+// src/components/PDFViewer/index.tsx
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function PDFViewer(props) {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    withPagination = true,
+    error
+  } = props;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const handleDownload = useCallback(() => {
+    setIsDownloading(true);
+    const link = document.createElement("a");
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+  if (!encodedPdfs.length) return null;
+  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,
+      customFooter,
+      onClose: handleClose,
+      noWrapper: true,
+      showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ jsx(
+        PdfNavigation,
+        {
+          testid,
+          currentIndex,
+          total: encodedPdfs.length,
+          onPrev: handlePreviousFile,
+          onNext: handleNextFile,
+          disablePrev: currentIndex === 0,
+          disableNext: currentIndex === encodedPdfs.length - 1,
+          extraActions: customActions,
+          fileName: encodedPdfs[currentIndex].fileName
+        }
+      ) : customActions,
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: !isMobile ? /* @__PURE__ */ jsx(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ) : 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__ */ jsx(
+        PDFElement,
+        {
+          testid,
+          b64: encodedPdfs[currentIndex].base64,
+          isMobile,
+          error
+        }
+      )
+    }
+  );
+}
+
+export {
+  PDFViewer
+};

package/dist/{chunk-JIMJIJOF.js → chunk-5TGP5EFM.js}

@@ -1,9 +1,9 @@
 import {
   Card
-} from "./chunk-EZCH4PQS.js";
+} from "./chunk-KBJZUVLM.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";

package/dist/{chunk-2HMCS25C.js → chunk-6LHBY2IH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EU73QPW7.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";

package/dist/{chunk-6I5LZ2ZC.js → chunk-7AXHAWJX.js}

@@ -1,18 +1,18 @@
 import {
   ModalContent
-} from "./chunk-44TDIHUP.js";
+} from "./chunk-P3MIP2FD.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";
 import {
   Modal
-} from "./chunk-D6YCMQPO.js";
+} from "./chunk-SBCFBHNG.js";
 import {
   Heading2
 } from "./chunk-EU73QPW7.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-MQX7GFLX.js → chunk-CAQWLY5V.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MYKYZHEO.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 
 // src/components/CompactImagesPreview.tsx
 import { useCallback } from "react";
@@ -19,10 +19,22 @@ function CompactImagesPreview(props) {
     thumbnailHeight = 30,
     enableThumbnailBorder = false,
     placeholderImageUri,
-    onChangeSource
+    placeholderAlt = "placeholder image",
+    onChangeSource,
+    onMainImageClick
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
+  const handleImgError = useCallback(
+    (e) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+      if (!img.alt) img.alt = placeholderAlt;
+    },
+    [placeholderImageUri, placeholderAlt]
+  );
   const handleThumbnailClick = useCallback(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
@@ -43,7 +55,9 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: placeholderImageUri,
-        alt: "placeholder image"
+        alt: placeholderAlt,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     );
   const currentSource = sources[currentSourceIndex];
@@ -51,6 +65,7 @@ function CompactImagesPreview(props) {
     /* @__PURE__ */ jsx(
       "img",
       {
+        className: clsx("object-center", onMainImageClick && "cursor-pointer"),
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -58,10 +73,12 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: currentSource.uri,
-        alt: currentSource.name
+        alt: currentSource.name,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     ),
-    sources.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ jsx(
       "button",
       {
         onClick: (e) => {
@@ -82,7 +99,8 @@ function CompactImagesPreview(props) {
               height: thumbnailHeight,
               objectPosition: "center",
               objectFit: "cover"
-            }
+            },
+            onError: handleImgError
           }
         )
       },

package/dist/{chunk-QQ5G773N.js → chunk-DCLNAUC4.js}

@@ -84,7 +84,7 @@ var Tooltip = ({
       id,
       "data-testid": testid,
       ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [

package/dist/{chunk-GB4ZTUQV.js → chunk-DTW7JCBR.js}

@@ -42,6 +42,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -57,6 +61,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -82,6 +90,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -97,6 +109,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -132,6 +148,10 @@ var Stack = (_a) => {
         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,
+        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
+        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
+        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
+        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : void 0,
         backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
         flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
@@ -171,6 +191,22 @@ var Stack = (_a) => {
         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",
+        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-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",

package/dist/{chunk-BK7SPR6Y.js → chunk-HYJIDHAK.js}

@@ -1,12 +1,12 @@
-import {
-  RowDetailModalProvider
-} from "./chunk-6I5LZ2ZC.js";
 import {
   GridContextProvider
 } from "./chunk-M7INAUAJ.js";
+import {
+  RowDetailModalProvider
+} from "./chunk-7AXHAWJX.js";
 import {
   ColumnList
-} from "./chunk-AA6GE3TH.js";
+} from "./chunk-LUPHOXAQ.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk-EWGHVZL5.js";
 import {
   Tooltip
-} from "./chunk-QQ5G773N.js";
+} from "./chunk-DCLNAUC4.js";
 import {
   Select
 } from "./chunk-J5V2JRIK.js";
@@ -61,7 +61,7 @@ import {
 } from "./chunk-FA7IFW66.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";

package/dist/{chunk-ZHZIIVJN.js → chunk-IMOIZFJZ.js}

@@ -1,3 +1,6 @@
+import {
+  CarouselPagination
+} from "./chunk-MBZ55T2D.js";
 import {
   MobileImageCarousel
 } from "./chunk-2IKT6IHB.js";
@@ -10,18 +13,15 @@ import {
 import {
   ZoomWindow
 } from "./chunk-BQNPOGD5.js";
-import {
-  CarouselPagination
-} from "./chunk-MBZ55T2D.js";
 import {
   Grid
-} from "./chunk-ER6RCOH3.js";
+} from "./chunk-Y2GK27RX.js";
 import {
   useMatchesMobile
 } from "./chunk-MYKYZHEO.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";

package/dist/chunk-KBJZUVLM.js

@@ -0,0 +1,65 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Card.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function Card(props) {
+  const _a = props, {
+    children,
+    selected,
+    testid,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "selected",
+    "testid",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight"
+  ]);
+  const CardComponent = props.as || "div";
+  const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
+  const paddingClasses = clsx(
+    // Backward compatibility: if no new padding props provided keep existing class.
+    !anyPaddingPropSpecified && "p-desktop-layout-padding",
+    // New responsive spacing tokens (mirrors Stack for layout sizing)
+    padding && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+    paddingX && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+    paddingY && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+    paddingBottom && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+    paddingTop && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+    paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+    paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
+  );
+  return /* @__PURE__ */ jsx(
+    CardComponent,
+    __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
+      className: clsx(
+        "rounded-sm",
+        paddingClasses,
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
+        rest.className
+      ),
+      children
+    })
+  );
+}
+
+export {
+  Card
+};

package/dist/{chunk-AA6GE3TH.js → chunk-LUPHOXAQ.js}

@@ -1,6 +1,6 @@
 import {
   MobileDataGridCard
-} from "./chunk-KZZKQLKF.js";
+} from "./chunk-W55J2KJZ.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";

package/dist/chunk-NRNWEQD7.js

@@ -0,0 +1,66 @@
+import {
+  Label
+} from "./chunk-7CS736EF.js";
+import {
+  Stack
+} from "./chunk-DTW7JCBR.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
+
+// src/components/ListGroup.tsx
+import { useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ListGroup({
+  title,
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  testid,
+  disabled,
+  className,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    if (!isControlled) setUncontrolledOpen(next);
+    onToggle == null ? void 0 : onToggle(next);
+  };
+  return /* @__PURE__ */ jsx("div", { "data-testid": testid, className: clsx("rounded-sm", className), children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", noGap: true, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: clsx(
+          "w-full flex items-center justify-between text-left",
+          disabled && "opacity-50 cursor-not-allowed"
+        ),
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx(Label, { children: title }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "expand_more",
+              className: clsx(
+                "transition-transform duration-200",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(Stack, { sizing: "layout", paddingY: true, children })
+  ] }) });
+}
+
+export {
+  ListGroup
+};

package/dist/{chunk-44TDIHUP.js → chunk-P3MIP2FD.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-M6TSTDNZ.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";

package/dist/{chunk-7ULLUUVJ.js → chunk-PQWWVBSR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-FA7IFW66.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 
 // src/components/SimpleTable.tsx
 import clsx from "clsx";

package/dist/{chunk-ERW5DEIO.js → chunk-RQLWSLVE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-SBRRNFOP.js";
 import {
   Stack
-} from "./chunk-GB4ZTUQV.js";
+} from "./chunk-DTW7JCBR.js";
 
 // src/components/PDFViewer/PDFElement.tsx
 import { usePdf } from "@mikecousins/react-pdf";