@dmsi/wedgekit-react 0.0.441 → 0.0.443

package/dist/components/MobileDataGrid/index.cjs

@@ -4344,46 +4344,14 @@ var import_jsx_runtime29 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react21 = require("react");
-
-// src/components/Spinner.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
 var import_react22 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx24 = __toESM(require("clsx"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -4396,7 +4364,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4417,30 +4385,30 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx25 = require("clsx");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react23 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 var import_react24 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
 var import_react25 = require("react");
 var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 
 // src/components/SimpleTable.tsx
 var import_clsx27 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
 var import_react30 = require("react");
@@ -4451,7 +4419,7 @@ var import_react27 = require("react");
 
 // src/components/ModalHeader.tsx
 var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -4462,7 +4430,7 @@ var ModalHeader = ({
   testid,
   headerClassname
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       id,
@@ -4477,9 +4445,9 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx28.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: (0, import_clsx28.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Heading2,
             {
               id: id ? `${id}-title` : void 0,
@@ -4489,7 +4457,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -4497,7 +4465,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -4508,14 +4476,14 @@ ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       id,
@@ -4533,7 +4501,7 @@ ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -4541,7 +4509,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       id,
@@ -4551,26 +4519,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -4584,7 +4552,7 @@ ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -4594,7 +4562,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       id,
@@ -4630,7 +4598,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -4802,7 +4770,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -4811,7 +4779,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
             id,
@@ -4826,7 +4794,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -4839,7 +4807,7 @@ var Modal = ({
                   headerClassname
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -4848,7 +4816,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -4872,6 +4840,36 @@ Modal.displayName = "Modal";
 var import_react_pdf2 = require("@mikecousins/react-pdf");
 var import_react29 = require("react");
 
+// src/components/Spinner.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.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_react28 = require("react");
@@ -5363,7 +5361,7 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-3 flex-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_a = column.header) == null ? void 0 : _a.toString(),
       ":"
@@ -5388,7 +5386,7 @@ function ModalContent2() {
       return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
-          className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
@@ -5550,7 +5548,7 @@ function MobileDataGridCard({
               return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                 "div",
                 {
-                  className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+                  className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                       Paragraph,

package/dist/components/MobileDataGrid/index.css

@@ -669,9 +669,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -778,9 +775,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1870,10 +1864,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 +1875,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 +4660,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/MobileDataGrid/index.js

@@ -1,21 +1,21 @@
 import {
   MobileDataGrid
-} from "../../chunk-MDH7XDJS.js";
-import "../../chunk-7AXHAWJX.js";
-import "../../chunk-P3MIP2FD.js";
+} from "../../chunk-EYESSAXQ.js";
+import "../../chunk-FFGIFICI.js";
+import "../../chunk-NAY4I3FL.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-3HBYDOYE.js";
-import "../../chunk-IMOIZFJZ.js";
+import "../../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";
-import "../../chunk-W55J2KJZ.js";
+import "../../chunk-TJV3S52X.js";
+import "../../chunk-RDJT63IS.js";
 import "../../chunk-5IFPG6TS.js";
 import "../../chunk-AJ5M6MVX.js";
-import "../../chunk-M6TSTDNZ.js";
+import "../../chunk-7HCS6TZN.js";
 import "../../chunk-EJSPFQCY.js";
 import "../../chunk-RQLWSLVE.js";
 import "../../chunk-6LHBY2IH.js";
@@ -23,7 +23,7 @@ import "../../chunk-VJVY6NPF.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-DCLNAUC4.js";
 import "../../chunk-PQWWVBSR.js";
-import "../../chunk-ESCNCQGI.js";
+import "../../chunk-ETAEB3TA.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-J5V2JRIK.js";
 import "../../chunk-TYAQWVIM.js";

package/dist/components/ProductImagePreview/ProductPrimaryImage.cjs

@@ -40,61 +40,9 @@ __export(ProductPrimaryImage_exports, {
   ProductPrimaryImage: () => ProductPrimaryImage
 });
 module.exports = __toCommonJS(ProductPrimaryImage_exports);
-var import_react2 = require("react");
-
-// src/components/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ImagePlaceholder.tsx
 var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ImagePlaceholder(props) {
-  const clipId = (0, import_react.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 242,
-      height: 243,
-      fill: "none"
-    }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
-      ]
-    })
-  );
-}
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
+var placeholderImageUri = "/placeholder.svg";
 function ProductPrimaryImage({
   image,
   width,
@@ -107,14 +55,12 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react2.useRef)(null);
-  const lastPointRef = (0, import_react2.useRef)(null);
-  const rafRef = (0, import_react2.useRef)(null);
-  const [active, setActive] = (0, import_react2.useState)(false);
-  const [, forceRerender] = (0, import_react2.useState)(0);
-  const [imageLoading, setImageLoading] = (0, import_react2.useState)(true);
-  const [imageError, setImageError] = (0, import_react2.useState)(false);
-  const imageSrc = (0, import_react2.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const containerRef = (0, import_react.useRef)(null);
+  const lastPointRef = (0, import_react.useRef)(null);
+  const rafRef = (0, import_react.useRef)(null);
+  const [active, setActive] = (0, import_react.useState)(false);
+  const [, forceRerender] = (0, import_react.useState)(0);
+  const imageSrc = (0, import_react.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -122,7 +68,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react2.useCallback)(() => {
+  const handlePointerEnter = (0, import_react.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -135,15 +81,16 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react2.useCallback)(() => {
+  const handlePointerLeave = (0, import_react.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react2.useCallback)(
+  const handlePointerMove = (0, import_react.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;
@@ -175,9 +122,9 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
+    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -192,11 +139,15 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  (0, import_react2.useEffect)(() => {
-    setImageLoading(true);
-    setImageError(false);
-  }, [image]);
-  if (!image && !isPlaceholder) return null;
+  const handleImgError = (0, import_react.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) {
@@ -210,7 +161,7 @@ function ProductPrimaryImage({
       top: Math.max(0, Math.min(height - size, topRaw))
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -230,24 +181,19 @@ function ProductPrimaryImage({
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
       children: [
-        imageLoading && !imageError && !isPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "small" }) }),
-        isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.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_runtime3.jsx)(
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             "aria-hidden": true,

package/dist/components/ProductImagePreview/ProductPrimaryImage.js

@@ -1,8 +1,6 @@
 import {
   ProductPrimaryImage
-} from "../../chunk-G5DEC7H3.js";
-import "../../chunk-SBRRNFOP.js";
-import "../../chunk-QVWYTQKL.js";
+} from "../../chunk-YCDDBSVU.js";
 import "../../chunk-ORMEWXMH.js";
 export {
   ProductPrimaryImage