@dmsi/wedgekit-react 0.0.1229 → 0.0.1230

package/dist/{chunk-YCDDBSVU.js → chunk-65HTZ3R2.js}

@@ -16,6 +16,7 @@ function ProductPrimaryImage({
   scrollToZoomEnabled = false,
   className = "",
   isPlaceholder = false,
+  onImageError,
   onZoomPositionChange,
   onScrollZoom
 }) {
@@ -105,12 +106,13 @@ function ProductPrimaryImage({
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
   const handleImgError = useCallback(
     (e) => {
+      onImageError == null ? void 0 : onImageError(imageSrc);
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
       if (img.src === placeholderImageUri) return;
       img.src = placeholderImageUri;
     },
-    []
+    [imageSrc, onImageError]
   );
   const pt = lastPointRef.current;
   let lensStyle;

package/dist/{chunk-6R5GQV6W.js → chunk-ICJARSLG.js}

@@ -6,9 +6,13 @@ import {
 } from "./chunk-MVDGHWKO.js";
 
 // src/components/CompactImagesPreview.tsx
-import { useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+function hasValidSourceUri(uri, placeholderImageUri) {
+  const normalizedUri = uri == null ? void 0 : uri.trim();
+  return !!normalizedUri && normalizedUri !== placeholderImageUri && !normalizedUri.endsWith("/placeholder.svg") && !normalizedUri.includes("/placeholder.svg?");
+}
 function CompactImagesPreview(props) {
   const {
     sources,
@@ -25,16 +29,36 @@ function CompactImagesPreview(props) {
     testid
   } = props;
   const isMobile = useMatchesMobile();
-  const imagesCount = sources.length;
+  const [failedSourceUris, setFailedSourceUris] = useState([]);
+  const sourceKey = useMemo(
+    () => sources.map((source) => source.uri).join("|"),
+    [sources]
+  );
+  const validSources = useMemo(
+    () => sources.filter(
+      (source) => hasValidSourceUri(source.uri, placeholderImageUri) && failedSourceUris.indexOf(source.uri) === -1
+    ),
+    [failedSourceUris, placeholderImageUri, sources]
+  );
+  const imagesCount = validSources.length;
+  const safeCurrentSourceIndex = currentSourceIndex >= 0 && currentSourceIndex < imagesCount ? currentSourceIndex : 0;
+  useEffect(() => {
+    setFailedSourceUris([]);
+  }, [sourceKey]);
   const handleImgError = useCallback(
-    (e) => {
+    (e, failedUri) => {
+      if (failedUri) {
+        setFailedSourceUris(
+          (previousUris) => previousUris.indexOf(failedUri) >= 0 ? previousUris : [...previousUris, failedUri]
+        );
+      }
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
       if (img.src === placeholderImageUri) return;
       img.src = placeholderImageUri;
       if (!img.alt) img.alt = placeholderAlt;
     },
-    [placeholderImageUri, placeholderAlt]
+    [placeholderAlt, placeholderImageUri]
   );
   const handleThumbnailClick = useCallback(
     (newIndex) => {
@@ -44,7 +68,7 @@ function CompactImagesPreview(props) {
     },
     [currentSourceIndex, onChangeSource, imagesCount]
   );
-  if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
+  if (!validSources.length || typeof isMobile === "undefined")
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -58,11 +82,11 @@ function CompactImagesPreview(props) {
         },
         src: placeholderImageUri,
         alt: placeholderAlt,
-        onError: handleImgError,
+        onError: (event) => handleImgError(event),
         onClick: onMainImageClick
       }
     );
-  const currentSource = sources[currentSourceIndex];
+  const currentSource = validSources[safeCurrentSourceIndex];
   return /* @__PURE__ */ jsxs(Stack, { "data-testid": testid, sizing: "layout", children: [
     /* @__PURE__ */ jsx(
       "img",
@@ -77,11 +101,11 @@ function CompactImagesPreview(props) {
         },
         src: currentSource.uri,
         alt: currentSource.name,
-        onError: handleImgError,
+        onError: (event) => handleImgError(event, currentSource.uri),
         onClick: onMainImageClick
       }
     ),
-    imagesCount > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ jsx(
+    imagesCount > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-3", children: validSources.slice(0, 4).map((source, index) => /* @__PURE__ */ jsx(
       "button",
       {
         "data-testid": testid ? `${testid}-thumbnail-${index}` : void 0,
@@ -91,7 +115,7 @@ function CompactImagesPreview(props) {
         },
         className: clsx(
           "cursor-pointer",
-          currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
+          safeCurrentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
         ),
         children: /* @__PURE__ */ jsx(
           "img",
@@ -104,7 +128,7 @@ function CompactImagesPreview(props) {
               objectPosition: "center",
               objectFit: "cover"
             },
-            onError: handleImgError
+            onError: (event) => handleImgError(event, source.uri)
           }
         )
       },

package/dist/{chunk-3X3Y4TMS.js → chunk-JRNU5BZ4.js}

@@ -12,7 +12,8 @@ function Thumbnail({
   alt,
   isActive,
   onClick,
-  isPlaceholder = false
+  isPlaceholder = false,
+  onImageError
 }) {
   const [imageError, setImageError] = useState(false);
   return /* @__PURE__ */ jsx(
@@ -37,6 +38,7 @@ function Thumbnail({
           draggable: false,
           loading: "lazy",
           onError: () => {
+            onImageError == null ? void 0 : onImageError(src);
             setImageError(true);
           }
         }

package/dist/{chunk-2IKT6IHB.js → chunk-S4XW2XZW.js}

@@ -7,6 +7,7 @@ function MobileImageCarousel({
   width = 483,
   height = 483,
   onChangeIndex,
+  onImageError,
   className = ""
 }) {
   const containerRef = useRef(null);
@@ -161,6 +162,7 @@ function MobileImageCarousel({
                     className: "w-full h-full object-cover",
                     draggable: false,
                     loading: distance <= 1 ? "eager" : "lazy",
+                    onError: () => onImageError == null ? void 0 : onImageError(image.src),
                     style: {
                       aspectRatio: "1 / 1"
                     }

package/dist/{chunk-AJGTMNW5.js → chunk-XW4B4CUY.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-MBZ55T2D.js";
 import {
   MobileImageCarousel
-} from "./chunk-2IKT6IHB.js";
+} from "./chunk-S4XW2XZW.js";
 import {
   ProductPrimaryImage
-} from "./chunk-YCDDBSVU.js";
+} from "./chunk-65HTZ3R2.js";
 import {
   Thumbnail
-} from "./chunk-3X3Y4TMS.js";
+} from "./chunk-JRNU5BZ4.js";
 import {
   ZoomWindow
 } from "./chunk-BQNPOGD5.js";
@@ -139,12 +139,13 @@ function useProductImagePreview(props) {
 }
 
 // src/components/ProductImagePreview/index.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var placeholderImageUri = "/placeholder.svg";
-var PLACEHOLDER_IMAGES = [
-  { src: "", alt: "placeholder" },
-  { src: "", alt: "placeholder" }
-];
+function hasValidImageSource(src) {
+  const normalizedSrc = src == null ? void 0 : src.trim();
+  return !!normalizedSrc && normalizedSrc !== placeholderImageUri && !normalizedSrc.endsWith("/placeholder.svg") && !normalizedSrc.includes("/placeholder.svg?");
+}
 function ProductImagePreview(props) {
   const {
     width = 483,
@@ -161,6 +162,26 @@ function ProductImagePreview(props) {
     zoomWindowOffset = 10,
     testid
   } = props;
+  const [failedImageSources, setFailedImageSources] = useState2([]);
+  const imageSourceKey = useMemo2(
+    () => images.map((image) => image.src).join("|"),
+    [images]
+  );
+  const validImages = useMemo2(
+    () => images.filter(
+      (image) => hasValidImageSource(image.src) && failedImageSources.indexOf(image.src) === -1
+    ),
+    [failedImageSources, images]
+  );
+  const handleImageError = useCallback2((src) => {
+    if (!src) return;
+    setFailedImageSources(
+      (previousSources) => previousSources.indexOf(src) >= 0 ? previousSources : [...previousSources, src]
+    );
+  }, []);
+  useEffect2(() => {
+    setFailedImageSources([]);
+  }, [imageSourceKey]);
   const isMobile = useMatchesMobile();
   const {
     zoomPoint,
@@ -174,7 +195,7 @@ function ProductImagePreview(props) {
     handleZoomPositionChange,
     handleScrollZoom
   } = useProductImagePreview({
-    images,
+    images: validImages,
     currentIndex,
     zoomEnabled,
     zoomFactor,
@@ -183,7 +204,7 @@ function ProductImagePreview(props) {
     isMobile
   });
   if (typeof isMobile === "undefined") return null;
-  if (isMobile && !images.length)
+  if (isMobile && !validImages.length)
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -200,7 +221,7 @@ function ProductImagePreview(props) {
       }
     );
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const showDesktopThumbnails = images.length !== 1;
+  const showDesktopThumbnails = validImages.length > 1;
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -220,7 +241,8 @@ function ProductImagePreview(props) {
               scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
               onZoomPositionChange: handleZoomPositionChange,
               onScrollZoom: handleScrollZoom,
-              isPlaceholder: images.length === 0
+              isPlaceholder: validImages.length === 0,
+              onImageError: handleImageError
             }
           ) }),
           effectiveZoomEnabled && /* @__PURE__ */ jsx(
@@ -241,31 +263,30 @@ function ProductImagePreview(props) {
         isMobile && /* @__PURE__ */ jsx(
           MobileImageCarousel,
           {
-            images,
+            images: validImages,
             currentIndex: safeIndex,
             width,
             height,
-            onChangeIndex: handleSelect
+            onChangeIndex: handleSelect,
+            onImageError: handleImageError
           }
         ),
-        showDesktopThumbnails && /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ jsx(
+        showDesktopThumbnails && /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: validImages.length <= 3 ? /* @__PURE__ */ jsx(
           "div",
           {
             className: "flex justify-center gap-4",
             style: { width: "100%", maxWidth: width },
             "aria-label": "Product image thumbnails",
-            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ jsx(
-                Thumbnail,
-                {
-                  src: img.src,
-                  alt: img.alt || `Thumbnail ${i + 1}`,
-                  isActive: i === safeIndex,
-                  onClick: () => handleSelect(i),
-                  isPlaceholder: images.length === 0
-                }
-              ) }, img.src + i)
-            )
+            children: validImages.map((img, i) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ jsx(
+              Thumbnail,
+              {
+                src: img.src,
+                alt: img.alt || `Thumbnail ${i + 1}`,
+                isActive: i === safeIndex,
+                onClick: () => handleSelect(i),
+                onImageError: handleImageError
+              }
+            ) }, img.src + i))
           }
         ) : /* @__PURE__ */ jsx(
           Grid,
@@ -277,25 +298,23 @@ function ProductImagePreview(props) {
               maxWidth: width
             },
             columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => /* @__PURE__ */ jsx(
-                Thumbnail,
-                {
-                  src: img.src,
-                  alt: img.alt || `Thumbnail ${i + 1}`,
-                  isActive: i === safeIndex,
-                  onClick: () => handleSelect(i),
-                  isPlaceholder: images.length === 0
-                },
-                img.src + i
-              )
-            )
+            children: validImages.map((img, i) => /* @__PURE__ */ jsx(
+              Thumbnail,
+              {
+                src: img.src,
+                alt: img.alt || `Thumbnail ${i + 1}`,
+                isActive: i === safeIndex,
+                onClick: () => handleSelect(i),
+                onImageError: handleImageError
+              },
+              img.src + i
+            ))
           }
         ) }),
         /* @__PURE__ */ jsx(
           CarouselPagination,
           {
-            images,
+            images: validImages,
             currentIndex: safeIndex,
             onSelect: handleSelect
           }

package/dist/components/CalendarRange.cjs

@@ -242,7 +242,7 @@ function Icon(_a) {
 }
 
 // src/components/CalendarRange.tsx
-var import_react43 = __toESM(require("react"), 1);
+var import_react44 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
 
 // src/components/DataGridCell.tsx
@@ -5751,10 +5751,11 @@ var import_jsx_runtime51 = require("react/jsx-runtime");
 var import_react32 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
+var import_react33 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_clsx35 = __toESM(require("clsx"), 1);
 var import_jsx_runtime53 = require("react/jsx-runtime");
 
@@ -5763,12 +5764,12 @@ var import_clsx36 = __toESM(require("clsx"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/components/ListGroup.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_clsx37 = __toESM(require("clsx"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/components/Pagination.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_clsx38 = __toESM(require("clsx"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var Pagination = ({
@@ -5780,7 +5781,7 @@ var Pagination = ({
   className,
   disabled
 }) => {
-  const goTo = (0, import_react35.useCallback)(
+  const goTo = (0, import_react36.useCallback)(
     (page) => {
       if (disabled) return;
       onPageChange(page);
@@ -5797,7 +5798,7 @@ var Pagination = ({
       goTo(currentPage + 1);
     }
   };
-  const pageTokens = (0, import_react35.useMemo)(() => {
+  const pageTokens = (0, import_react36.useMemo)(() => {
     if (totalPages <= 5) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -5920,21 +5921,21 @@ var import_jsx_runtime57 = require("react/jsx-runtime");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/components/SearchResultImage/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/components/Alert.tsx
 var import_clsx39 = __toESM(require("clsx"), 1);
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 
 // src/components/OrderCheckIcon.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
 
 // src/components/EditingContext.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var EditingContext = (0, import_react38.createContext)(null);
+var EditingContext = (0, import_react39.createContext)(null);
 
 // src/components/AccessCard.tsx
 var import_clsx41 = __toESM(require("clsx"), 1);
@@ -6068,11 +6069,11 @@ var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/AccessCardGroup.tsx
 var import_clsx42 = __toESM(require("clsx"), 1);
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/components/EmblaCarousel/index.tsx
-var import_react42 = __toESM(require("react"), 1);
+var import_react43 = __toESM(require("react"), 1);
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
 
@@ -6080,7 +6081,7 @@ var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"),
 var import_jsx_runtime66 = require("react/jsx-runtime");
 
 // src/components/EmblaCarousel/useSelectedSnapDisplay.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/EmblaCarousel/ArrowButtons.tsx
 var import_clsx43 = __toESM(require("clsx"), 1);
@@ -6090,7 +6091,7 @@ var arrowButtonStyles = (0, import_clsx43.default)(
 );
 
 // src/components/EmblaCarousel/usePrevNextButtons.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/EmblaCarousel/index.tsx
 var import_clsx44 = __toESM(require("clsx"), 1);
@@ -6211,20 +6212,20 @@ function CalendarRange({
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
   const today = import_polyfill.Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = (0, import_react43.useState)(
+  const [baseMonth, setBaseMonth] = (0, import_react44.useState)(
     fromDate != null ? fromDate : today.with({ day: 1 })
   );
-  const [selecting, setSelecting] = (0, import_react43.useState)("from");
-  const [pendingFrom, setPendingFrom] = (0, import_react43.useState)(void 0);
-  const [hoveredDate, setHoveredDate] = (0, import_react43.useState)(void 0);
-  (0, import_react43.useEffect)(() => {
+  const [selecting, setSelecting] = (0, import_react44.useState)("from");
+  const [pendingFrom, setPendingFrom] = (0, import_react44.useState)(void 0);
+  const [hoveredDate, setHoveredDate] = (0, import_react44.useState)(void 0);
+  (0, import_react44.useEffect)(() => {
     if (fromDate) {
       setBaseMonth(fromDate.with({ day: 1 }));
     } else if (toDate) {
       setBaseMonth(toDate.with({ day: 1 }));
     }
   }, [from, to]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (fromDate && toDate) {
       setSelecting("from");
       setPendingFrom(void 0);
@@ -6370,14 +6371,14 @@ function CalendarPane({
   const years = Array.from({ length: 100 }).map(
     (_, i) => baseMonth.year - 50 + i
   );
-  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react43.useState)(false);
-  const [yearMenuOpen, setYearMenuOpen] = (0, import_react43.useState)(false);
-  const monthMenuRef = (0, import_react43.useRef)(null);
-  const yearMenuRef = (0, import_react43.useRef)(null);
+  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react44.useState)(false);
+  const [yearMenuOpen, setYearMenuOpen] = (0, import_react44.useState)(false);
+  const monthMenuRef = (0, import_react44.useRef)(null);
+  const yearMenuRef = (0, import_react44.useRef)(null);
   const month = getMonthData(offset);
   const totalCells = 42;
   const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react43.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react44.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "div",
       {

package/dist/components/CalendarRange.js

@@ -7,11 +7,11 @@ import "../chunk-3UPUZBP5.js";
 import "../chunk-7ZJIGTFN.js";
 import "../chunk-E3FOCECQ.js";
 import "../chunk-Y5GD2FJA.js";
-import "../chunk-AJGTMNW5.js";
+import "../chunk-XW4B4CUY.js";
 import "../chunk-MBZ55T2D.js";
-import "../chunk-2IKT6IHB.js";
-import "../chunk-YCDDBSVU.js";
-import "../chunk-3X3Y4TMS.js";
+import "../chunk-S4XW2XZW.js";
+import "../chunk-65HTZ3R2.js";
+import "../chunk-JRNU5BZ4.js";
 import "../chunk-BQNPOGD5.js";
 import "../chunk-YULGJORA.js";
 import "../chunk-Z2HPSFEQ.js";
@@ -49,7 +49,7 @@ import "../chunk-PABII472.js";
 import "../chunk-4UGMSWWA.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-I3W5K76C.js";
-import "../chunk-6R5GQV6W.js";
+import "../chunk-ICJARSLG.js";
 import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";

package/dist/components/CompactImagesPreview.cjs

@@ -471,6 +471,10 @@ var import_react5 = require("react");
 
 // src/components/CompactImagesPreview.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function hasValidSourceUri(uri, placeholderImageUri) {
+  const normalizedUri = uri == null ? void 0 : uri.trim();
+  return !!normalizedUri && normalizedUri !== placeholderImageUri && !normalizedUri.endsWith("/placeholder.svg") && !normalizedUri.includes("/placeholder.svg?");
+}
 function CompactImagesPreview(props) {
   const {
     sources,
@@ -487,16 +491,36 @@ function CompactImagesPreview(props) {
     testid
   } = props;
   const isMobile = useMatchesMobile();
-  const imagesCount = sources.length;
+  const [failedSourceUris, setFailedSourceUris] = (0, import_react6.useState)([]);
+  const sourceKey = (0, import_react6.useMemo)(
+    () => sources.map((source) => source.uri).join("|"),
+    [sources]
+  );
+  const validSources = (0, import_react6.useMemo)(
+    () => sources.filter(
+      (source) => hasValidSourceUri(source.uri, placeholderImageUri) && failedSourceUris.indexOf(source.uri) === -1
+    ),
+    [failedSourceUris, placeholderImageUri, sources]
+  );
+  const imagesCount = validSources.length;
+  const safeCurrentSourceIndex = currentSourceIndex >= 0 && currentSourceIndex < imagesCount ? currentSourceIndex : 0;
+  (0, import_react6.useEffect)(() => {
+    setFailedSourceUris([]);
+  }, [sourceKey]);
   const handleImgError = (0, import_react6.useCallback)(
-    (e) => {
+    (e, failedUri) => {
+      if (failedUri) {
+        setFailedSourceUris(
+          (previousUris) => previousUris.indexOf(failedUri) >= 0 ? previousUris : [...previousUris, failedUri]
+        );
+      }
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
       if (img.src === placeholderImageUri) return;
       img.src = placeholderImageUri;
       if (!img.alt) img.alt = placeholderAlt;
     },
-    [placeholderImageUri, placeholderAlt]
+    [placeholderAlt, placeholderImageUri]
   );
   const handleThumbnailClick = (0, import_react6.useCallback)(
     (newIndex) => {
@@ -506,7 +530,7 @@ function CompactImagesPreview(props) {
     },
     [currentSourceIndex, onChangeSource, imagesCount]
   );
-  if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
+  if (!validSources.length || typeof isMobile === "undefined")
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "img",
       {
@@ -520,11 +544,11 @@ function CompactImagesPreview(props) {
         },
         src: placeholderImageUri,
         alt: placeholderAlt,
-        onError: handleImgError,
+        onError: (event) => handleImgError(event),
         onClick: onMainImageClick
       }
     );
-  const currentSource = sources[currentSourceIndex];
+  const currentSource = validSources[safeCurrentSourceIndex];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Stack, { "data-testid": testid, sizing: "layout", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "img",
@@ -539,11 +563,11 @@ function CompactImagesPreview(props) {
         },
         src: currentSource.uri,
         alt: currentSource.name,
-        onError: handleImgError,
+        onError: (event) => handleImgError(event, currentSource.uri),
         onClick: onMainImageClick
       }
     ),
-    imagesCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    imagesCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: validSources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         "data-testid": testid ? `${testid}-thumbnail-${index}` : void 0,
@@ -553,7 +577,7 @@ function CompactImagesPreview(props) {
         },
         className: (0, import_clsx3.default)(
           "cursor-pointer",
-          currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
+          safeCurrentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "img",
@@ -566,7 +590,7 @@ function CompactImagesPreview(props) {
               objectPosition: "center",
               objectFit: "cover"
             },
-            onError: handleImgError
+            onError: (event) => handleImgError(event, source.uri)
           }
         )
       },

package/dist/components/CompactImagesPreview.js

@@ -1,6 +1,6 @@
 import {
   CompactImagesPreview
-} from "../chunk-6R5GQV6W.js";
+} from "../chunk-ICJARSLG.js";
 import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";