@dmsi/wedgekit-react 0.0.440 → 0.0.442

package/dist/components/index.cjs

@@ -5729,39 +5729,8 @@ var Grid = (_a) => {
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react27 = require("react");
-
-// src/components/Spinner.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var placeholderImageUri = "/placeholder.svg";
 function ProductPrimaryImage({
   image,
   width,
@@ -5779,8 +5748,6 @@ function ProductPrimaryImage({
   const rafRef = (0, import_react27.useRef)(null);
   const [active, setActive] = (0, import_react27.useState)(false);
   const [, forceRerender] = (0, import_react27.useState)(0);
-  const [imageLoading, setImageLoading] = (0, import_react27.useState)(true);
-  const [imageError, setImageError] = (0, import_react27.useState)(false);
   const imageSrc = (0, import_react27.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
@@ -5810,7 +5777,8 @@ function ProductPrimaryImage({
   }, [zoomEnabled, onZoomPositionChange]);
   const handlePointerMove = (0, import_react27.useCallback)(
     (e) => {
-      if (!zoomEnabled || !active || imageError) return;
+      if (isPlaceholder) return;
+      if (!zoomEnabled || !active) return;
       if (e.pointerType === "touch") return;
       const el = containerRef.current;
       if (!el) return;
@@ -5842,7 +5810,7 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
+    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange]
   );
   (0, import_react27.useEffect)(() => {
     const container = containerRef.current;
@@ -5859,11 +5827,15 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  (0, import_react27.useEffect)(() => {
-    setImageLoading(true);
-    setImageError(false);
-  }, [image]);
-  if (!image && !isPlaceholder) return null;
+  const handleImgError = (0, import_react27.useCallback)(
+    (e) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+    },
+    []
+  );
   const pt = lastPointRef.current;
   let lensStyle;
   if (pt && active && zoomEnabled) {
@@ -5877,7 +5849,7 @@ function ProductPrimaryImage({
       top: Math.max(0, Math.min(height - size, topRaw))
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -5897,24 +5869,19 @@ function ProductPrimaryImage({
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
       children: [
-        imageLoading && !imageError && !isPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Spinner, { size: "small" }) }),
-        isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "img",
           {
-            src: imageError ? "/placeholder.svg" : imageSrc,
+            src: imageSrc != null ? imageSrc : placeholderImageUri,
             alt: (image == null ? void 0 : image.alt) || "Product image",
             className: "object-cover min-w-full min-h-full select-none",
             draggable: false,
             loading: "lazy",
-            onLoad: () => setImageLoading(false),
-            onError: () => {
-              setImageLoading(false);
-              setImageError(true);
-            }
+            onError: handleImgError
           },
           imageSrc
         ),
-        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -5932,7 +5899,7 @@ var import_react28 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -5945,7 +5912,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -5966,7 +5933,7 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ZoomWindow({
   image,
   width,
@@ -6024,7 +5991,7 @@ function ZoomWindow({
       top
     };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Surface,
     {
       elevation: 16,
@@ -6039,7 +6006,7 @@ function ZoomWindow({
         userSelect: "none"
       }, calculatePosition()),
       "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "img",
         {
           src: imageSrc,
@@ -6061,7 +6028,7 @@ function ZoomWindow({
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx32 = require("clsx");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function CarouselPagination({
   images,
   currentIndex,
@@ -6069,7 +6036,7 @@ function CarouselPagination({
   className
 }) {
   if (!(images == null ? void 0 : images.length)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       className: (0, import_clsx32.clsx)(
@@ -6077,7 +6044,7 @@ function CarouselPagination({
         className
       ),
       "aria-label": "Image navigation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "div",
         {
           className: "grid gap-2 place-items-center",
@@ -6085,7 +6052,7 @@ function CarouselPagination({
             gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
           },
           role: "tablist",
-          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "button",
             {
               type: "button",
@@ -6109,7 +6076,7 @@ function CarouselPagination({
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react29 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
   currentIndex,
@@ -6224,7 +6191,7 @@ function MobileImageCarousel({
     [isDragging, currentIndex, onChangeIndex]
   );
   if (!images.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       ref: containerRef,
@@ -6239,7 +6206,7 @@ function MobileImageCarousel({
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "div",
         {
           className: "flex items-center",
@@ -6252,7 +6219,7 @@ function MobileImageCarousel({
             const isActive = index === currentIndex;
             const distance = Math.abs(index - currentIndex);
             const shouldRender = distance <= 2;
-            return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "div",
               {
                 className: "flex-shrink-0 transition-opacity duration-300",
@@ -6262,7 +6229,7 @@ function MobileImageCarousel({
                   opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
                 },
                 onClick: () => handleImageClick(index),
-                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   "img",
                   {
                     src: image.src,
@@ -6274,7 +6241,7 @@ function MobileImageCarousel({
                       aspectRatio: "1 / 1"
                     }
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   "div",
                   {
                     className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
@@ -6410,7 +6377,7 @@ function useProductImagePreview(props) {
 }
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGES = [
   { src: "", alt: "placeholder" },
   { src: "", alt: "placeholder" }
@@ -6453,9 +6420,9 @@ function ProductImagePreview(props) {
   });
   if (typeof isMobile === "undefined") return null;
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex gap-4 items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         ProductPrimaryImage,
         {
           image: active,
@@ -6469,7 +6436,7 @@ function ProductImagePreview(props) {
           isPlaceholder: images.length === 0
         }
       ) }),
-      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         ZoomWindow,
         {
           image: active,
@@ -6484,7 +6451,7 @@ function ProductImagePreview(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MobileImageCarousel,
       {
         images,
@@ -6494,14 +6461,14 @@ function ProductImagePreview(props) {
         onChangeIndex: handleSelect
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime49.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__ */ (0, import_jsx_runtime50.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -6513,7 +6480,7 @@ function ProductImagePreview(props) {
           ) }, img.src + i)
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Grid,
       {
         sizing: "layout-group",
@@ -6524,7 +6491,7 @@ function ProductImagePreview(props) {
         },
         columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
         children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -6538,7 +6505,7 @@ function ProductImagePreview(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       CarouselPagination,
       {
         images,
@@ -6552,7 +6519,7 @@ function ProductImagePreview(props) {
 // src/components/CompactImagesPreview.tsx
 var import_react31 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
   const {
     sources,
@@ -6562,7 +6529,7 @@ function CompactImagesPreview(props) {
     thumbnailWidth = 30.5,
     thumbnailHeight = 30,
     enableThumbnailBorder = false,
-    placeholderImageUri,
+    placeholderImageUri: placeholderImageUri2,
     placeholderAlt = "placeholder image",
     onChangeSource,
     onMainImageClick
@@ -6571,13 +6538,13 @@ function CompactImagesPreview(props) {
   const imagesCount = sources.length;
   const handleImgError = (0, import_react31.useCallback)(
     (e) => {
-      if (!placeholderImageUri) return;
+      if (!placeholderImageUri2) return;
       const img = e.currentTarget;
-      if (img.src === placeholderImageUri) return;
-      img.src = placeholderImageUri;
+      if (img.src === placeholderImageUri2) return;
+      img.src = placeholderImageUri2;
       if (!img.alt) img.alt = placeholderAlt;
     },
-    [placeholderImageUri, placeholderAlt]
+    [placeholderImageUri2, placeholderAlt]
   );
   const handleThumbnailClick = (0, import_react31.useCallback)(
     (newIndex) => {
@@ -6588,7 +6555,7 @@ function CompactImagesPreview(props) {
     [currentSourceIndex, onChangeSource, imagesCount]
   );
   if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "img",
       {
         className: "object-center",
@@ -6598,15 +6565,15 @@ function CompactImagesPreview(props) {
           objectPosition: "center",
           objectFit: "cover"
         },
-        src: placeholderImageUri,
+        src: placeholderImageUri2,
         alt: placeholderAlt,
         onError: handleImgError,
         onClick: onMainImageClick
       }
     );
   const currentSource = sources[currentSourceIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Stack, { sizing: "layout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Stack, { sizing: "layout", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "img",
       {
         className: (0, import_clsx33.default)("object-center", onMainImageClick && "cursor-pointer"),
@@ -6622,7 +6589,7 @@ function CompactImagesPreview(props) {
         onClick: onMainImageClick
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "button",
       {
         onClick: (e) => {
@@ -6633,7 +6600,7 @@ function CompactImagesPreview(props) {
           "cursor-pointer",
           currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "img",
           {
             src: source.uri,
@@ -6655,17 +6622,17 @@ function CompactImagesPreview(props) {
 
 // src/components/SimpleTable.tsx
 var import_clsx34 = __toESM(require("clsx"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function SimpleTable({
   columns,
   data,
   additionalRows
 }) {
   const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
       var _a, _b;
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "th",
         {
           scope: "col",
@@ -6673,12 +6640,12 @@ function SimpleTable({
             "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
             ((_a = column.meta) == null ? void 0 : _a.headerWidth) ? column.meta.headerWidth : "w-2/3"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
         },
         index
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "tr",
       {
         className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
@@ -6686,7 +6653,7 @@ function SimpleTable({
           var _a;
           const rawValue = column.id ? row[column.id] : null;
           const cellValue = rawValue != null ? rawValue : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "td",
             {
               className: (0, import_clsx34.default)(
@@ -6711,6 +6678,36 @@ var import_react34 = require("react");
 var import_react_pdf2 = require("@mikecousins/react-pdf");
 var import_react33 = require("react");
 
+// src/components/Spinner.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
 var import_react32 = require("react");
@@ -7189,8 +7186,18 @@ Pagination.displayName = "Pagination";
 
 // src/components/SkeletonParagraph.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function SkeletonParagraph() {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
+function SkeletonParagraph({
+  className = "",
+  heightClassName = "h-6"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "div",
+    {
+      "aria-label": "Loading content",
+      role: "status",
+      className: `skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/index.css

@@ -778,9 +778,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1870,10 +1867,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1885,10 +1878,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4674,6 +4663,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);

package/dist/components/index.js

@@ -10,10 +10,10 @@ import {
 } from "../chunk-3HBYDOYE.js";
 import {
   ProductImagePreview
-} from "../chunk-IMOIZFJZ.js";
+} from "../chunk-DNYGKNQM.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
-import "../chunk-G5DEC7H3.js";
+import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
 import "../chunk-LUPHOXAQ.js";
@@ -34,7 +34,7 @@ import {
 } from "../chunk-PQWWVBSR.js";
 import {
   SkeletonParagraph
-} from "../chunk-ESCNCQGI.js";
+} from "../chunk-ETAEB3TA.js";
 import "../chunk-AT4AWD6B.js";
 import {
   Select

package/dist/index.css

@@ -756,9 +756,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1848,10 +1845,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1863,10 +1856,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4652,6 +4641,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);