@propeller-commerce/propeller-v2-react-ui 0.26.1 → 0.28.0

package/dist/index.cjs

@@ -41,6 +41,9 @@ function PropellerProvider({ value, children }) {
 function usePropellerDeps() {
   return React6.useContext(PropellerDepsContext);
 }
+function useImgComponent() {
+  return React6.useContext(PropellerDepsContext)?.imgComponent;
+}
 function useRequiredPropellerDeps() {
   const deps = React6.useContext(PropellerDepsContext);
   if (!deps) {
@@ -2634,6 +2637,7 @@ function toMatch(item, language) {
   const netPrice = displayItem?.price?.net ?? 0;
   const grossPrice = displayItem?.price?.gross ?? 0;
   const minQuantity = Math.max(1, displayItem?.minimumQuantity ?? 1);
+  const step = Math.max(1, displayItem?.unit ?? 1);
   const imageUrl = isCluster ? propellerV2CoreUi.getClusterImageUrl(item) : propellerV2CoreUi.getProductImageUrl(item);
   return {
     productId,
@@ -2643,6 +2647,7 @@ function toMatch(item, language) {
     netPrice,
     grossPrice,
     minQuantity,
+    step,
     imageUrl,
     priceOnRequest: isPriceOnRequest(item)
   };
@@ -4694,8 +4699,25 @@ function ActionCode(rawProps) {
   ] });
 }
 var ActionCode_default = ActionCode;
+function PropellerImg({ as: Injected, ...props }) {
+  if (Injected) return /* @__PURE__ */ jsxRuntime.jsx(Injected, { ...props });
+  const { src, alt, className, width, height, loading, onClick } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      className,
+      width,
+      height,
+      loading,
+      onClick
+    }
+  );
+}
 function CartBonusItems(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const items = props.bonusItems ?? props.cart?.bonusItems ?? [];
   if (items.length === 0) return null;
   const currency = props.currency ?? "\u20AC";
@@ -4713,20 +4735,21 @@ function CartBonusItems(rawProps) {
         {
           className: "propeller-cart-bonus-item flex items-center gap-4 bg-card p-4 rounded-container shadow-sm border border-border",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-bonus-item__media w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden flex items-center justify-center", children: img ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "propeller-cart-bonus-item__image w-full h-full object-contain p-1", src: img, alt: name }) : /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-bonus-item__media w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden flex items-center justify-center", children: img ? /* @__PURE__ */ jsxRuntime.jsx(PropellerImg, { as: Img, className: "propeller-cart-bonus-item__image w-full h-full object-contain p-1", src: img, alt: name, loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {
+                "aria-hidden": "true",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                className: "propeller-cart-bonus-item__image-placeholder w-8 h-8 text-foreground-subtle",
-                strokeWidth: 1.5,
+                className: "propeller-cart-bonus-item__image-placeholder w-10 h-10 text-foreground-subtle",
+                strokeWidth: 1,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+                    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                   }
                 )
               }
@@ -4771,6 +4794,7 @@ function mergeGrouped(p) {
 }
 function AddToCart(rawProps) {
   const props = mergeGrouped(useInfraProps(rawProps));
+  const Img = useImgComponent();
   const { cart, loading, checkoutAllowed, addItem: addItem2, getMinQuantity, getStep } = useCart({
     graphqlClient: props.graphqlClient,
     user: props.user ?? null,
@@ -4779,6 +4803,7 @@ function AddToCart(rawProps) {
     onCartCreated: props.onCartCreated
   });
   const [quantity, setQuantity] = React6.useState(() => getMinQuantity(props.product));
+  const [quantityDraft, setQuantityDraft] = React6.useState(null);
   const [toastMessage, setToastMessage] = React6.useState(() => "");
   const [toastType, setToastType] = React6.useState(() => "");
   const [toastVisible, setToastVisible] = React6.useState(() => false);
@@ -4801,16 +4826,42 @@ function AddToCart(rawProps) {
   function dismissToast() {
     setToastVisible(false);
   }
+  function snapQuantity(value) {
+    const min = getMinQuantity(props.product);
+    const step = getStep(props.product);
+    if (value <= min) return min;
+    return Math.round((value - min) / step) * step + min;
+  }
   function increment() {
-    setQuantity(quantity + getStep(props.product));
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    setQuantity(snapped === quantity ? quantity + getStep(props.product) : snapped);
   }
   function decrement() {
     const min = getMinQuantity(props.product);
     const step = getStep(props.product);
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    if (snapped !== quantity) {
+      setQuantity(snapped);
+      return;
+    }
     if (quantity - step >= min) {
       setQuantity(quantity - step);
     }
   }
+  function handleQuantityInput(raw) {
+    setQuantityDraft(raw);
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= getMinQuantity(props.product)) {
+      setQuantity(snapQuantity(val));
+    }
+  }
+  function handleQuantityBlur() {
+    const val = parseInt(quantityDraft ?? "", 10);
+    setQuantity(isNaN(val) ? getMinQuantity(props.product) : snapQuantity(val));
+    setQuantityDraft(null);
+  }
   function getModalImageUrl() {
     if (addedCartItem) {
       const img = addedCartItem.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url;
@@ -4940,15 +4991,9 @@ function AddToCart(rawProps) {
                 className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
-                value: quantity,
-                onChange: (e) => {
-                  const val = parseInt(e.target.value, 10);
-                  const min = getMinQuantity(props.product);
-                  const step = getStep(props.product);
-                  if (!isNaN(val) && val >= min) {
-                    setQuantity(Math.round((val - min) / step) * step + min);
-                  }
-                }
+                value: quantityDraft ?? quantity,
+                onChange: (e) => handleQuantityInput(e.target.value),
+                onBlur: handleQuantityBlur
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4973,15 +5018,9 @@ function AddToCart(rawProps) {
               className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
-              value: quantity,
-              onChange: (e) => {
-                const val = parseInt(e.target.value, 10);
-                const min = getMinQuantity(props.product);
-                const step = getStep(props.product);
-                if (!isNaN(val) && val >= min) {
-                  setQuantity(Math.round((val - min) / step) * step + min);
-                }
-              }
+              value: quantityDraft ?? quantity,
+              onChange: (e) => handleQuantityInput(e.target.value),
+              onBlur: handleQuantityBlur
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5112,27 +5151,30 @@ function AddToCart(rawProps) {
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__modal-body px-6 py-5", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__modal-product flex items-start gap-4", children: [
                 !!getModalImageUrl() ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                  PropellerImg,
                   {
+                    as: Img,
                     className: "propeller-add-to-cart__modal-image w-16 h-16 object-contain rounded border border-border-subtle flex-shrink-0",
                     src: getModalImageUrl(),
-                    alt: getModalName()
+                    alt: getModalName(),
+                    loading: "lazy"
                   }
                 ) : null,
                 !getModalImageUrl() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-add-to-cart__modal-image-placeholder w-16 h-16 flex items-center justify-center rounded border border-border-subtle flex-shrink-0 bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
+                    "aria-hidden": "true",
                     fill: "none",
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     className: "w-8 h-8 text-foreground-subtle",
-                    strokeWidth: 1.5,
+                    strokeWidth: 1,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "path",
                       {
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
-                        d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+                        d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                       }
                     )
                   }
@@ -7192,29 +7234,33 @@ function CartItem(rawProps) {
 }
 function CartItemImage(props = {}) {
   const { derived } = useCartItemContext();
+  const Img = useImgComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.className ?? "propeller-cart-item__media w-20 h-20 md:w-24 md:h-24 flex-shrink-0 bg-surface-hover flex items-center justify-center overflow-hidden relative rounded-control", children: [
     !!derived.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
+      PropellerImg,
       {
+        as: Img,
         className: "propeller-cart-item__image w-full h-full object-contain p-1",
         src: derived.imageUrl,
-        alt: derived.name
+        alt: derived.name,
+        loading: "lazy"
       }
     ) : null,
     !derived.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
+        "aria-hidden": "true",
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
-        className: "propeller-cart-item__image-placeholder w-8 h-8 text-foreground-subtle",
-        strokeWidth: 1.5,
+        className: "propeller-cart-item__image-placeholder w-10 h-10 md:w-12 md:h-12 text-foreground-subtle",
+        strokeWidth: 1,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
           }
         )
       }
@@ -7335,6 +7381,7 @@ function CartItemNotes(props = {}) {
 }
 function CartItemCrossupsells(props = {}) {
   const { resolved, state, helpers, handlers } = useCartItemContext();
+  const Img = useImgComponent();
   if (state.visibleCrossupsells.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.className ?? "propeller-cart-item__crossupsells mt-3 pt-3 border-t border-border", children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-cart-item__crossupsells-label text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: propellerV2CoreUi.getLabel(resolved.labels, "crossupsellTitle", "You might also like") }),
@@ -7351,11 +7398,13 @@ function CartItemCrossupsells(props = {}) {
               onClick: (e) => handlers.onCrossupsellClick(item, e),
               children: [
                 !!helpers.getCrossupsellImageUrl(item) ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                  PropellerImg,
                   {
+                    as: Img,
                     className: "propeller-cart-item__crossupsell-image w-10 h-10 object-contain rounded flex-shrink-0",
                     src: helpers.getCrossupsellImageUrl(item),
-                    alt: helpers.getCrossupsellName(item)
+                    alt: helpers.getCrossupsellName(item),
+                    loading: "lazy"
                   }
                 ) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -7784,7 +7833,7 @@ function CartIconAndSidebar(rawProps) {
                 includeTax: useTax,
                 className: "propeller-cart-icon__item",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(CartItem_default.Image, { className: "w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden border border-border-subtle" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CartItem_default.Image, { className: "w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden border border-border-subtle flex items-center justify-center relative" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-between py-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(CartItem_default.Title, { className: "propeller-cart-icon__item-name text-sm font-medium hover:text-primary line-clamp-2" }),
@@ -8551,6 +8600,7 @@ function ClusterCardImage(props) {
   const showFavorite = props.showFavorite ?? !!resolved.enableAddFavorite;
   const isRow = derived.isRow;
   const InjectedImage = resolved.imageComponent;
+  const Img = useImgComponent();
   if (InjectedImage) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       InjectedImage,
@@ -8569,13 +8619,15 @@ function ClusterCardImage(props) {
       className: props.className ?? `propeller-cluster-card__media relative overflow-hidden bg-surface-hover ${isRow ? "w-20 h-20 flex-shrink-0 p-2" : "aspect-[4/3] sm:aspect-square p-2 sm:p-4"}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("a", { className: "block h-full w-full", href: derived.clusterUrl, onClick: handleClusterClick, children: derived.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          PropellerImg,
           {
+            as: Img,
             className: "propeller-cluster-card__image h-full w-full object-contain transition-transform duration-300 group-hover:scale-105",
             src: derived.imageUrl,
-            alt: derived.name
+            alt: derived.name,
+            loading: "lazy"
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
             strokeLinecap: "round",
@@ -8793,6 +8845,7 @@ function getMachineImageUrl(machine) {
 }
 function MachineCard(props) {
   const { machine, href, language } = props;
+  const Img = useImgComponent();
   const Wrapper = href ? "a" : "div";
   const showImage = props.showImage ?? true;
   const showDescription = props.showDescription ?? false;
@@ -8811,8 +8864,9 @@ function MachineCard(props) {
           className: "flex h-full flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
           children: [
             showImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-machine-card__image aspect-square w-full overflow-hidden bg-background-subtle", children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              PropellerImg,
               {
+                as: Img,
                 src: imageUrl,
                 alt: name,
                 loading: "lazy",
@@ -8829,6 +8883,7 @@ function MachineCard(props) {
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
+                      "aria-hidden": "true",
                       className: "h-12 w-12",
                       fill: "none",
                       stroke: "currentColor",
@@ -9133,6 +9188,7 @@ function ProductCardImage(props) {
   const showFavorite = props.showFavorite ?? !!resolved.enableAddFavorite;
   const isRow = derived.isRow;
   const InjectedImage = resolved.imageComponent;
+  const Img = useImgComponent();
   if (InjectedImage) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       InjectedImage,
@@ -9151,13 +9207,15 @@ function ProductCardImage(props) {
       className: props.className ?? `propeller-product-card__media relative overflow-hidden bg-surface-hover ${isRow ? "w-20 h-20 flex-shrink-0 p-2" : "aspect-[4/3] sm:aspect-square p-2 sm:p-4"}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("a", { className: "block h-full w-full", href: derived.productUrl, onClick: handleProductClick, children: derived.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          PropellerImg,
           {
+            as: Img,
             className: "propeller-product-card__image h-full w-full object-contain transition-transform duration-300 group-hover:scale-105",
             src: derived.imageUrl,
-            alt: derived.name
+            alt: derived.name,
+            loading: "lazy"
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
             strokeLinecap: "round",
@@ -11012,6 +11070,7 @@ function MachinePartsSearch(props) {
   ] });
 }
 function ClusterConfigurator(props) {
+  const Img = useImgComponent();
   const { settingsWithValues, handleAttributeSelect, initFromProduct } = useClusterConfigurator({
     products: props.products,
     config: props.config,
@@ -11102,7 +11161,7 @@ function ClusterConfigurator(props) {
             "data-selected": setting.selectedValue === val ? "true" : "false",
             className: `propeller-cluster-configurator__image-swatch relative w-16 h-16 rounded-control border-2 overflow-hidden transition-all ${setting.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${setting.selectedValue === val ? "border-secondary ring-2 ring-secondary/30 ring-offset-1" : "border-border hover:border-secondary/30"}`,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("img", { className: "propeller-cluster-configurator__image w-full h-full object-cover", src: val, alt: val }),
+              /* @__PURE__ */ jsxRuntime.jsx(PropellerImg, { as: Img, className: "propeller-cluster-configurator__image w-full h-full object-cover", src: val, alt: val, loading: "lazy" }),
               setting.selectedValue === val ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-configurator__image-check absolute inset-0 bg-secondary bg-opacity-20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
@@ -11202,6 +11261,7 @@ function getProductImageUrl4(product) {
 }
 function ClusterOptions(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const [selectedProductIds, setSelectedProductIds] = React6.useState({});
   function getOptionsForRender() {
     const language = props.language;
@@ -11288,20 +11348,23 @@ function ClusterOptions(rawProps) {
         option.hasError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-cluster-options__error mt-1 text-xs text-destructive", children: propellerV2CoreUi.getLabel(props.labels, "requiredError", "This option is required") }) : null,
         option.hasSelection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-options__preview mt-3 flex items-center gap-3 rounded-container border border-border-subtle bg-surface-hover p-3", children: [
           !!option.previewImageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            PropellerImg,
             {
+              as: Img,
               className: "propeller-cluster-options__preview-image h-12 w-12 flex-shrink-0 rounded border border-border-subtle bg-card object-contain",
               src: option.previewImageUrl,
-              alt: option.previewName
+              alt: option.previewName,
+              loading: "lazy"
             }
           ) : null,
           !option.previewImageUrl ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-options__preview-image-placeholder flex h-12 w-12 flex-shrink-0 items-center justify-center rounded border border-border bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
+              "aria-hidden": "true",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
-              className: "h-5 w-5 text-foreground-subtle",
+              className: "h-6 w-6 text-foreground-subtle",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
@@ -11785,19 +11848,22 @@ function FavoriteListItem(rawProps) {
 }
 function FavoriteListItemImage(props) {
   const { derived, handleItemClick, resolved } = useFavoriteListItemContext();
+  const Img = useImgComponent();
   const { imageUrl, name, productUrl } = derived;
   const linkable = resolved.titleLinkable !== false;
   const wrapperClass = props.className ?? "propeller-favorite-list-item__media relative w-16 h-16 flex-shrink-0 overflow-hidden rounded-control bg-surface-hover p-1";
   const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !!imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
+      PropellerImg,
       {
+        as: Img,
         className: "propeller-favorite-list-item__image h-full w-full object-contain",
         src: imageUrl,
-        alt: name
+        alt: name,
+        loading: "lazy"
       }
     ) : null,
-    !imageUrl ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-list-item__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+    !imageUrl ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-list-item__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-10 w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         strokeLinecap: "round",
@@ -11995,6 +12061,7 @@ FavoriteListItemExport.Actions = FavoriteListItemActions;
 var FavoriteListItem_default = FavoriteListItemExport;
 function FavoriteListDetails(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const FavoriteListItemImpl = props.favoriteListItemComponent ?? FavoriteListItem_default;
   const GridPaginationImpl = props.gridPaginationComponent ?? GridPagination_default;
   const { addToList } = useFavorites({
@@ -12576,11 +12643,13 @@ function FavoriteListDetails(rawProps) {
                         "data-adding": isAdding ? "true" : "false",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-list-details__search-item-media h-14 w-14 flex-shrink-0 rounded-control bg-surface-hover overflow-hidden flex items-center justify-center", children: getSearchItemImage(item) ? /* @__PURE__ */ jsxRuntime.jsx(
-                            "img",
+                            PropellerImg,
                             {
+                              as: Img,
                               src: getSearchItemImage(item),
                               alt: getSearchItemName(item),
-                              className: "h-full w-full object-contain"
+                              className: "h-full w-full object-contain",
+                              loading: "lazy"
                             }
                           ) : /* @__PURE__ */ jsxRuntime.jsxs(
                             "svg",
@@ -13288,6 +13357,7 @@ function getBundleNonLeaders(item) {
 }
 function ItemsOverview(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const language = props.language;
   const useTax = !!props.includeTax;
   const containerClass = props.itemsOverviewContainerClass || "cart-items-overview";
@@ -13346,26 +13416,29 @@ function ItemsOverview(rawProps) {
           "data-bundle": isBundle ? "true" : "false",
           children: [
             showImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-items-overview__item-media w-16 h-16 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden border border-border-subtle flex items-center justify-center", children: getItemImageUrl(item) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              PropellerImg,
               {
+                as: Img,
                 className: "propeller-items-overview__item-image w-full h-full object-contain p-1.5",
                 src: getItemImageUrl(item),
-                alt: getItemName(item, language)
+                alt: getItemName(item, language),
+                loading: "lazy"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {
+                "aria-hidden": "true",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                strokeWidth: "1.5",
-                className: "propeller-items-overview__item-image-placeholder w-6 h-6 text-foreground-subtle",
+                strokeWidth: "1",
+                className: "propeller-items-overview__item-image-placeholder w-8 h-8 text-foreground-subtle",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+                    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                   }
                 )
               }
@@ -13903,6 +13976,28 @@ function OrderActions(rawProps) {
   );
 }
 var OrderActions_default = OrderActions;
+var warnedOnce = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warnedOnce.has(key)) return;
+  warnedOnce.add(key);
+  console.warn(message);
+}
+function warnMissingProps(props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!props.language) {
+    warnOnce(
+      "language",
+      "[OrderItemCard] No `language` prop: product names resolve in the default catalogue language, whatever page they are on. This component reads no context (it ships from the RSC-safe /pure entry), so the host must pass it."
+    );
+  }
+  const linkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
+  if (linkable && !props.configuration?.urls) {
+    warnOnce(
+      "urls",
+      "[OrderItemCard] Title is linkable but no `configuration.urls` was passed: links fall back to a literal /product/:id/:slug and lose the locale prefix. Pass the url builders from the host, or set titleLinkable={false}."
+    );
+  }
+}
 function getProductName3(orderItem, language) {
   return propellerV2CoreUi.getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
@@ -13926,6 +14021,7 @@ function getProductUrl(orderItem, language, urls) {
 function OrderItemCard(props) {
   const item = props.orderItem;
   const isChildItem = props.isChildItem || false;
+  warnMissingProps(props);
   const titleLinkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
   const showImage = isChildItem ? false : props.showImage !== void 0 ? props.showImage : true;
   const showSku = isChildItem ? false : props.showSku !== void 0 ? props.showSku : true;
@@ -13966,11 +14062,13 @@ function OrderItemCard(props) {
               className: `propeller-order-item-card__cell propeller-order-item-card__cell--product ${isChildItem ? "px-6 py-2 pl-28" : "px-6 py-4"}`,
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
                 showImage ? productImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-item-card__media relative w-16 h-16 flex-shrink-0 rounded overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                  PropellerImg,
                   {
+                    as: props.imgComponent,
                     className: "propeller-order-item-card__image object-cover w-full h-full",
                     src: productImage,
-                    alt: productName
+                    alt: productName,
+                    loading: "lazy"
                   }
                 ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-item-card__image-placeholder w-16 h-16 bg-surface-hover rounded flex items-center justify-center text-foreground-subtle text-xs", children: propellerV2CoreUi.getLabel(props.labels, "noImage", "No Img") }) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -14697,6 +14795,10 @@ function RequestPriceButton(props) {
 }
 var RequestPriceButton_default = RequestPriceButton;
 var ROW_SEQ = 0;
+function snapToStep(value, min, step) {
+  if (!Number.isFinite(value) || value <= min) return min;
+  return Math.round((value - min) / (step || 1)) * (step || 1) + min;
+}
 function blankRow() {
   ROW_SEQ += 1;
   return {
@@ -14708,6 +14810,7 @@ function blankRow() {
     grossPrice: 0,
     quantity: 1,
     minQuantity: 1,
+    step: 1,
     matches: [],
     searching: false,
     searched: false
@@ -14732,6 +14835,7 @@ function QuickOrderInner(props) {
     className,
     labels
   } = props;
+  const Img = useImgComponent();
   const user = props.user ?? null;
   const graphqlClient = props.graphqlClient;
   const displayPrice = (n) => props.formatPrice ? props.formatPrice(n) : propellerV2CoreUi.formatPrice(n, { symbol: currency, locale: propellerV2CoreUi.localeForLanguage(props.language) });
@@ -14801,6 +14905,7 @@ function QuickOrderInner(props) {
         grossPrice: match.grossPrice,
         quantity: match.minQuantity,
         minQuantity: match.minQuantity,
+        step: match.step,
         matches: [],
         searching: false,
         searched: false
@@ -14813,7 +14918,7 @@ function QuickOrderInner(props) {
       const n = parseInt(raw, 10);
       setRows(
         (prev) => prev.map(
-          (r) => r.key === key ? { ...r, quantity: Number.isFinite(n) && n > 0 ? Math.max(r.minQuantity, n) : r.minQuantity } : r
+          (r) => r.key === key ? { ...r, quantity: snapToStep(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -14866,7 +14971,8 @@ function QuickOrderInner(props) {
             netPrice: exact.netPrice,
             grossPrice: exact.grossPrice,
             quantity: Math.max(exact.minQuantity, line.quantity),
-            minQuantity: exact.minQuantity
+            minQuantity: exact.minQuantity,
+            step: exact.step
           });
         }
         if (resolved.length) {
@@ -14961,7 +15067,7 @@ function QuickOrderInner(props) {
               children: [
                 m.imageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
-                  /* @__PURE__ */ jsxRuntime.jsx("img", { src: m.imageUrl, alt: "", width: 32, height: 32, className: "rounded object-cover" })
+                  /* @__PURE__ */ jsxRuntime.jsx(PropellerImg, { as: Img, src: m.imageUrl, alt: "", width: 32, height: 32, className: "rounded object-cover", loading: "lazy" })
                 ) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-foreground", children: m.name }),
@@ -14997,7 +15103,7 @@ function QuickOrderInner(props) {
           {
             type: "number",
             min: r.minQuantity,
-            step: 1,
+            step: r.step || 1,
             value: r.productId ? r.quantity : "",
             disabled: !r.productId,
             onChange: (e) => setQuantity(r.key, e.target.value),
@@ -15626,6 +15732,7 @@ function getProductName4(product, language) {
 }
 function ProductBundles(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const language = props.language;
   const currencySymbol = props.currency ?? "\u20AC";
   const money = (value) => propellerV2CoreUi.formatPrice(value, { symbol: currencySymbol, locale: propellerV2CoreUi.localeForLanguage(props.language) });
@@ -15761,11 +15868,13 @@ function ProductBundles(rawProps) {
                   ) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center w-40", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-bundles__item-media w-32 h-32 bg-surface-hover rounded-container overflow-hidden flex-shrink-0 mb-2", children: getProductImage(item.product) ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
+                      PropellerImg,
                       {
+                        as: Img,
                         className: "propeller-product-bundles__item-image w-full h-full object-contain p-2",
                         src: getProductImage(item.product),
-                        alt: getProductName4(item.product, language)
+                        alt: getProductName4(item.product, language),
+                        loading: "lazy"
                       }
                     ) : null }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-bundles__item-name text-sm font-medium text-muted-foreground leading-tight mb-1", children: getProductName4(item.product, language) || "Product " + item.productId }),
@@ -15930,26 +16039,29 @@ function ProductBundles(rawProps) {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-bundles__modal-body px-6 py-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-bundles__modal-product flex items-start gap-4", children: [
             lastAddedBundle && lastAddedBundle.items && lastAddedBundle.items.length > 0 && getProductImage(lastAddedBundle.items[0].product) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+              PropellerImg,
               {
+                as: Img,
                 className: "propeller-product-bundles__modal-image w-16 h-16 object-contain rounded border border-border-subtle flex-shrink-0",
                 src: lastAddedBundle?.items?.[0] ? getProductImage(lastAddedBundle.items[0].product) : "",
-                alt: lastAddedBundle?.name || "Bundle"
+                alt: lastAddedBundle?.name || "Bundle",
+                loading: "lazy"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-bundles__modal-image-placeholder w-16 h-16 flex items-center justify-center rounded border border-border-subtle flex-shrink-0 bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {
+                "aria-hidden": "true",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 className: "w-8 h-8 text-foreground-subtle",
-                strokeWidth: 1.5,
+                strokeWidth: 1,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+                    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                   }
                 )
               }
@@ -16114,6 +16226,7 @@ function ProductDownloads(props) {
 }
 var ProductDownloads_default = ProductDownloads;
 function ProductGallery(props) {
+  const Img = useImgComponent();
   const [selectedIndex, setSelectedIndex] = React6.useState(0);
   const [lightboxOpen, setLightboxOpen] = React6.useState(false);
   const images = props.images || [];
@@ -16151,11 +16264,13 @@ function ProductGallery(props) {
         }
       ) }) : null,
       images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
+        PropellerImg,
         {
+          as: Img,
           alt: propellerV2CoreUi.getLabel(props.labels, "productImageAlt", "Product image"),
           src: mainImage,
           onClick: openLightbox,
+          loading: "eager",
           className: `h-full w-full object-contain p-8 transition-transform duration-200 ${props.enableZoom !== false ? "cursor-zoom-in hover:scale-105" : ""}`
         }
       ) : null
@@ -16167,11 +16282,13 @@ function ProductGallery(props) {
         onClick: () => setSelectedIndex(index),
         className: `propeller-product-gallery__thumbnail relative flex-shrink-0 w-20 h-20 rounded-container border-2 overflow-hidden transition-all bg-card ${selectedIndex === index ? "border-primary ring-2 ring-primary/20" : "border-transparent hover:border-border"}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+          PropellerImg,
           {
+            as: Img,
             className: "w-full h-full object-contain p-1",
             src: img,
-            alt: `${propellerV2CoreUi.getLabel(props.labels, "productImageAlt", "Product image")} ${index + 1}`
+            alt: `${propellerV2CoreUi.getLabel(props.labels, "productImageAlt", "Product image")} ${index + 1}`,
+            loading: "lazy"
           }
         )
       },
@@ -16226,12 +16343,13 @@ function ProductGallery(props) {
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            PropellerImg,
             {
+              as: Img,
               alt: propellerV2CoreUi.getLabel(props.labels, "productImageFullscreenAlt", "Product image fullscreen"),
               className: "max-h-full max-w-full object-contain rounded-lg",
               src: mainImage,
-              onClick: (e) => e.stopPropagation()
+              onClick: (e) => e.stopPropagation?.()
             }
           ),
           hasThumbnails ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -16285,6 +16403,7 @@ function pickImageUrl(mediaItems, target) {
 }
 function DefaultProductImage(props) {
   const { product, cluster, className } = props;
+  const Img = useImgComponent();
   const targetLanguage = props.language ?? "NL";
   const mediaItems = (() => {
     const target = product ?? cluster?.defaultProduct ?? cluster;
@@ -16319,8 +16438,9 @@ function DefaultProductImage(props) {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+    PropellerImg,
     {
+      as: Img,
       src: url,
       alt: altText,
       className: className ?? "h-full w-full object-contain",
@@ -19229,6 +19349,7 @@ function mapToSearchBarResult(item, language, urls) {
 }
 function SearchBar(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const [showDropdown, setShowDropdown] = React6.useState(false);
   const [localTerm, setLocalTerm] = React6.useState("");
   const containerRef = React6.useRef(null);
@@ -19394,11 +19515,13 @@ function SearchBar(rawProps) {
                   ...resultProps,
                   children: [
                     result.imageUrl || noImageUrl() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
+                      PropellerImg,
                       {
+                        as: Img,
                         className: "propeller-search-bar__result-image w-full h-full object-contain",
                         src: result.imageUrl || noImageUrl(),
-                        alt: result.name
+                        alt: result.name,
+                        loading: "lazy"
                       }
                     ) }) : null,
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -19635,6 +19758,7 @@ exports.ProductSpecifications = ProductSpecifications_default;
 exports.ProductTabs = ProductTabs_default;
 exports.ProductVideos = ProductVideos_default;
 exports.PropellerDepsProvider = PropellerDepsProvider;
+exports.PropellerImg = PropellerImg;
 exports.PropellerProvider = PropellerProvider;
 exports.PurchaseAuthorizationConfigurator = PurchaseAuthorizationConfigurator_default;
 exports.PurchaseAuthorizationRequests = PurchaseAuthorizationRequests_default;
@@ -19660,6 +19784,7 @@ exports.useCheckout = useCheckout;
 exports.useClusterConfigurator = useClusterConfigurator;
 exports.useCompany = useCompany;
 exports.useFavorites = useFavorites;
+exports.useImgComponent = useImgComponent;
 exports.useInfraProps = useInfraProps;
 exports.useMachines = useMachines;
 exports.useMenu = useMenu;