@propeller-commerce/propeller-v2-react-ui 0.27.0 → 0.29.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) {
@@ -617,6 +620,14 @@ function useAuth(options) {
   }, [graphqlClient]);
   return { loading, error, login, magicLogin, createMagicToken, registerContact, registerCustomer, forgotPassword };
 }
+var CART_NOT_FOUND = "CART_NOT_FOUND_ERROR";
+function isCartNotFound(error) {
+  const entries = error?.errors;
+  if (!Array.isArray(entries)) return false;
+  return entries.some(
+    (e) => e?.extensions?.code === CART_NOT_FOUND || /cart:?\s*\S+\s+not found/i.test(e?.message ?? "")
+  );
+}
 async function initCart(config) {
   const {
     services,
@@ -756,6 +767,11 @@ function useCart(options) {
     setCreatedCartId(c.cartId);
     cartIdRef.current = c.cartId;
   }, []);
+  const forgetCart = React6.useCallback(() => {
+    setCart(null);
+    setCreatedCartId("");
+    cartIdRef.current = "";
+  }, []);
   const imageSearchFilters = React6.useCallback(
     () => configuration?.imageSearchFiltersGrid ?? DEFAULT_IMAGE_SEARCH_FILTERS,
     [configuration]
@@ -839,13 +855,28 @@ function useCart(options) {
         } else return propellerV2CoreUi.err("No cart ID provided");
       }
       const service = propellerV2CoreUi.createServices(graphqlClient).cart;
-      const resultCart = await service.addItemToCart({
-        id: resolvedCartId,
-        input: { productId: opts.product.productId, quantity: opts.quantity, ...opts.cluster?.clusterId !== void 0 && { clusterId: opts.cluster.clusterId }, ...childItemInputs && { childItems: childItemInputs }, ...opts.notes && { notes: opts.notes }, ...opts.price !== void 0 && { price: opts.price } },
-        language,
-        imageSearchFilters: imageSearchFilters(),
-        imageVariantFilters: imageVariantFilters()
-      });
+      const input = { productId: opts.product.productId, quantity: opts.quantity, ...opts.cluster?.clusterId !== void 0 && { clusterId: opts.cluster.clusterId }, ...childItemInputs && { childItems: childItemInputs }, ...opts.notes && { notes: opts.notes }, ...opts.price !== void 0 && { price: opts.price } };
+      let resultCart;
+      try {
+        resultCart = await service.addItemToCart({
+          id: resolvedCartId,
+          input,
+          language,
+          imageSearchFilters: imageSearchFilters(),
+          imageVariantFilters: imageVariantFilters()
+        });
+      } catch (e) {
+        if (!isCartNotFound(e) || !opts.createCart) throw e;
+        forgetCart();
+        const fresh = await resolveCart();
+        resultCart = await service.addItemToCart({
+          id: fresh.cartId,
+          input,
+          language,
+          imageSearchFilters: imageSearchFilters(),
+          imageVariantFilters: imageVariantFilters()
+        });
+      }
       rememberCart(resultCart);
       const addedItem = resultCart.items?.find((i) => i.productId === opts.product.productId) ?? null;
       opts.afterAddToCart?.(resultCart, addedItem);
@@ -857,7 +888,7 @@ function useCart(options) {
     } finally {
       setLoading(false);
     }
-  }, [graphqlClient, cartId, language, configuration, resolveCart, rememberCart, imageSearchFilters, imageVariantFilters]);
+  }, [graphqlClient, cartId, language, configuration, resolveCart, rememberCart, forgetCart, imageSearchFilters, imageVariantFilters]);
   const addItems = React6.useCallback(async (items) => {
     const added = [];
     let lastCart = null;
@@ -2143,19 +2174,8 @@ function useProductInfo(options) {
     setLoading(true);
     setError(null);
     try {
-      let orderlistIds = [];
-      let applyOrderlists = true;
-      if (options.orderlistIds && options.orderlistIds.length > 0) {
-        orderlistIds = options.orderlistIds;
-        applyOrderlists = options.applyOrderlists !== false;
-      } else if (options.applyOrderlists === false) {
-        applyOrderlists = false;
-      } else if (options.user && options.companyId) {
-        const orderlistService = propellerV2CoreUi.createServices(graphqlClient).orderlist;
-        const searchInput = { companyIds: [options.companyId] };
-        const orderlists = await orderlistService.getOrderlists(searchInput);
-        orderlistIds = (orderlists?.items ?? []).map((ol) => ol.id);
-      }
+      const orderlistIds = options.orderlistIds ?? [];
+      const applyOrderlists = options.applyOrderlists !== false;
       const service = propellerV2CoreUi.createServices(graphqlClient).product;
       const attributeInput = buildAttributeInput2();
       const variables = {
@@ -2366,7 +2386,7 @@ function useProductSearch(options) {
       const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
         applyOrderlists: options.applyOrderlists !== false,
         orderlistIds: options.orderlistIds
-      } : { applyOrderlists: false };
+      } : options.applyOrderlists === false ? { applyOrderlists: false } : {};
       const categoryProductSearchInput = {
         language: lang,
         page: pagination.currentPage,
@@ -2496,7 +2516,7 @@ function useProductSearch(options) {
           const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
             applyOrderlists: options.applyOrderlists !== false,
             orderlistIds: options.orderlistIds
-          } : { applyOrderlists: false };
+          } : options.applyOrderlists === false ? { applyOrderlists: false } : {};
           const userId = resolveListingUserId(options.user, configuration);
           const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
           const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
@@ -2672,7 +2692,7 @@ function useQuickOrder(options) {
       if (!catId) return [];
       try {
         const service = propellerV2CoreUi.createServices(graphqlClient).category;
-        const orderlistScope = orderlistIds && orderlistIds.length > 0 ? { applyOrderlists: applyOrderlists !== false, orderlistIds } : { applyOrderlists: false };
+        const orderlistScope = orderlistIds && orderlistIds.length > 0 ? { applyOrderlists: applyOrderlists !== false, orderlistIds } : applyOrderlists === false ? { applyOrderlists: false } : {};
         const userId = resolveListingUserId(user, configuration);
         const contactId = user && "contactId" in user ? user.contactId : void 0;
         const customerId = user && "customerId" in user ? user.customerId : void 0;
@@ -3281,28 +3301,33 @@ function useProductSlider(options) {
       }
     }
     if (!productIds.length && !clusterIds.length) return items;
+    const catId = configuration.baseCategoryId;
+    if (!catId) return items;
     const userId = resolveUserId();
     const companyId = resolveCompanyId();
-    const searchInput = {
+    const categoryProductSearchInput = {
       ...productIds.length && { productIds },
       ...clusterIds.length && { clusterIds },
       language,
       page: 1,
       offset: 50,
       statuses: [propellerSdkV2.ProductStatus.A, propellerSdkV2.ProductStatus.P, propellerSdkV2.ProductStatus.T, propellerSdkV2.ProductStatus.S],
+      hidden: false,
       ...userId !== void 0 && { userId },
       ...companyId !== void 0 && { companyId }
     };
     const filterAvailableAttributeInput = { isSearchable: true };
     const variables = {
-      input: searchInput,
+      categoryId: catId,
+      language,
+      categoryProductSearchInput,
+      filterAvailableAttributeInput,
       imageSearchFilters: configuration.imageSearchFiltersGrid,
-      imageVariantFilters: configuration.imageVariantFiltersMedium,
-      filterAvailableAttributeInput
+      imageVariantFilters: configuration.imageVariantFiltersMedium
     };
     try {
-      const response = await propellerV2CoreUi.createServices(graphqlClient).product.getProducts(variables);
-      const resolved = response?.items ?? [];
+      const response = await propellerV2CoreUi.createServices(graphqlClient).category.getCategory(variables);
+      const resolved = response?.products?.items ?? [];
       const allowed = /* @__PURE__ */ new Set();
       for (const r of resolved) {
         const id = r.productId ?? r.clusterId;
@@ -3358,10 +3383,17 @@ function useProductSlider(options) {
     setLoading(true);
     setError(null);
     try {
-      const service = propellerV2CoreUi.createServices(graphqlClient).product;
-      const searchInput = {
-        productIds,
-        clusterIds,
+      const catId = configuration.baseCategoryId;
+      if (!catId) {
+        setProducts([]);
+        return;
+      }
+      const service = propellerV2CoreUi.createServices(graphqlClient).category;
+      const userId = resolveUserId();
+      const companyId = resolveCompanyId();
+      const categoryProductSearchInput = {
+        ...productIds.length && { productIds },
+        ...clusterIds.length && { clusterIds },
         language,
         page: 1,
         offset: 50,
@@ -3370,17 +3402,24 @@ function useProductSlider(options) {
           propellerSdkV2.ProductStatus.P,
           propellerSdkV2.ProductStatus.T,
           propellerSdkV2.ProductStatus.S
-        ]
+        ],
+        hidden: false,
+        ...userId !== void 0 && { userId },
+        ...companyId !== void 0 && { companyId }
       };
       const filterAvailableAttributeInput = { isSearchable: true };
       const variables = {
-        input: searchInput,
+        categoryId: catId,
+        language,
+        categoryProductSearchInput,
+        priceCalculateProductInput: buildPriceInput(),
+        filterAvailableAttributeInput,
         imageSearchFilters: configuration.imageSearchFiltersGrid,
-        imageVariantFilters: configuration.imageVariantFiltersMedium,
-        filterAvailableAttributeInput
+        imageVariantFilters: configuration.imageVariantFiltersMedium
       };
-      const response = await service.getProducts(variables);
-      setProducts(response?.items ?? []);
+      const response = await service.getCategory(variables);
+      const productsResponse = response?.products;
+      setProducts(productsResponse?.items ?? []);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to fetch products");
       setProducts([]);
@@ -4696,8 +4735,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";
@@ -4715,20 +4771,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"
                   }
                 )
               }
@@ -4773,6 +4830,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,
@@ -4805,10 +4863,7 @@ function AddToCart(rawProps) {
     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;
+    return propellerV2CoreUi.resolveOrderableQuantity(value, getMinQuantity(props.product), getStep(props.product));
   }
   function increment() {
     setQuantityDraft(null);
@@ -5129,27 +5184,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"
                       }
                     )
                   }
@@ -6914,6 +6972,7 @@ function CartItem(rawProps) {
     companyId: props.companyId
   });
   const [quantity, setQuantity] = React6.useState(() => props.cartItem.quantity || 1);
+  const [quantityDraft, setQuantityDraft] = React6.useState(() => null);
   const [notes, setNotes] = React6.useState(() => props.cartItem.notes || "");
   const [loading, setLoading] = React6.useState(() => false);
   const [deleting, setDeleting] = React6.useState(() => false);
@@ -7037,6 +7096,34 @@ function CartItem(rawProps) {
       setLoading(false);
     }
   }
+  function handleQuantityDecrement() {
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(quantity, minQuantity, step);
+    if (orderable !== quantity) {
+      handleQuantityChange(orderable);
+      return;
+    }
+    if (quantity - step >= minQuantity) handleQuantityChange(quantity - step);
+  }
+  function handleQuantityIncrement() {
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(quantity, minQuantity, step);
+    handleQuantityChange(orderable === quantity ? quantity + step : orderable);
+  }
+  function handleQuantityInput(raw) {
+    setQuantityDraft(raw);
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= minQuantity) {
+      handleQuantityChange(propellerV2CoreUi.resolveOrderableQuantity(val, minQuantity, step));
+    }
+  }
+  function handleQuantityBlur() {
+    if (quantityDraft === null) return;
+    const val = parseInt(quantityDraft, 10);
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(val, minQuantity, step);
+    if (orderable !== quantity) handleQuantityChange(orderable);
+  }
   function handleNoteChange(note) {
     setNotes(note);
     if (props.onNoteChange) {
@@ -7139,7 +7226,8 @@ function CartItem(rawProps) {
       deleting,
       crossupsells,
       visibleCrossupsells: getVisibleCrossupsells(),
-      addingCrossupsellId
+      addingCrossupsellId,
+      quantityDraft
     },
     helpers: {
       getBundleItemName,
@@ -7152,6 +7240,10 @@ function CartItem(rawProps) {
     },
     handlers: {
       onQuantityChange: handleQuantityChange,
+      onQuantityDecrement: handleQuantityDecrement,
+      onQuantityIncrement: handleQuantityIncrement,
+      onQuantityInput: handleQuantityInput,
+      onQuantityBlur: handleQuantityBlur,
       onNoteChange: handleNoteChange,
       onDelete: handleDelete,
       onTitleClick: (e) => props.onTitleClick?.(e, props.cartItem),
@@ -7209,29 +7301,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"
           }
         )
       }
@@ -7352,6 +7448,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") }),
@@ -7368,11 +7465,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: [
@@ -7459,7 +7558,7 @@ function CartItemQuantity(props = {}) {
         {
           type: "button",
           className: "propeller-cart-item__decrement px-2.5 h-full text-muted-foreground hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors rounded-l-control select-none",
-          onClick: () => handlers.onQuantityChange(derived.quantity - derived.step),
+          onClick: handlers.onQuantityDecrement,
           disabled: derived.quantity <= derived.minQuantity || state.loading,
           children: "-"
         }
@@ -7471,13 +7570,9 @@ function CartItemQuantity(props = {}) {
           className: "propeller-cart-item__quantity w-10 text-center text-sm bg-transparent border-x border-input h-full focus:ring-0 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
           min: derived.minQuantity,
           step: derived.step,
-          value: derived.quantity,
-          onChange: (e) => {
-            const val = parseInt(e.target.value, 10);
-            if (!isNaN(val) && val >= derived.minQuantity) {
-              handlers.onQuantityChange(Math.round((val - derived.minQuantity) / derived.step) * derived.step + derived.minQuantity);
-            }
-          }
+          value: state.quantityDraft ?? derived.quantity,
+          onChange: (e) => handlers.onQuantityInput(e.target.value),
+          onBlur: handlers.onQuantityBlur
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -7485,7 +7580,7 @@ function CartItemQuantity(props = {}) {
         {
           type: "button",
           className: "propeller-cart-item__increment px-2.5 h-full text-muted-foreground hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors rounded-r-control select-none",
-          onClick: () => handlers.onQuantityChange(derived.quantity + derived.step),
+          onClick: handlers.onQuantityIncrement,
           disabled: state.loading,
           children: "+"
         }
@@ -7499,13 +7594,9 @@ function CartItemQuantity(props = {}) {
       className: props.className ?? "propeller-cart-item__quantity w-14 h-9 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-primary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
       min: derived.minQuantity,
       step: derived.step,
-      value: derived.quantity,
-      onChange: (e) => {
-        const val = parseInt(e.target.value, 10);
-        if (!isNaN(val) && val >= derived.minQuantity) {
-          handlers.onQuantityChange(Math.round((val - derived.minQuantity) / derived.step) * derived.step + derived.minQuantity);
-        }
-      }
+      value: state.quantityDraft ?? derived.quantity,
+      onChange: (e) => handlers.onQuantityInput(e.target.value),
+      onBlur: handlers.onQuantityBlur
     }
   );
 }
@@ -7801,7 +7892,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" }),
@@ -8568,6 +8659,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,
@@ -8586,13 +8678,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",
@@ -8810,6 +8904,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;
@@ -8828,8 +8923,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",
@@ -8846,6 +8942,7 @@ function MachineCard(props) {
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
+                      "aria-hidden": "true",
                       className: "h-12 w-12",
                       fill: "none",
                       stroke: "currentColor",
@@ -9150,6 +9247,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,
@@ -9168,13 +9266,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",
@@ -11029,6 +11129,7 @@ function MachinePartsSearch(props) {
   ] });
 }
 function ClusterConfigurator(props) {
+  const Img = useImgComponent();
   const { settingsWithValues, handleAttributeSelect, initFromProduct } = useClusterConfigurator({
     products: props.products,
     config: props.config,
@@ -11119,7 +11220,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",
                 {
@@ -11219,6 +11320,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;
@@ -11305,20 +11407,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",
                 {
@@ -11802,19 +11907,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",
@@ -12012,6 +12120,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({
@@ -12593,11 +12702,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",
@@ -13305,6 +13416,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";
@@ -13363,26 +13475,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"
                   }
                 )
               }
@@ -14006,11 +14121,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: [
@@ -14737,10 +14854,6 @@ 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 {
@@ -14777,6 +14890,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) });
@@ -14859,7 +14973,7 @@ function QuickOrderInner(props) {
       const n = parseInt(raw, 10);
       setRows(
         (prev) => prev.map(
-          (r) => r.key === key ? { ...r, quantity: snapToStep(n, r.minQuantity, r.step) } : r
+          (r) => r.key === key ? { ...r, quantity: propellerV2CoreUi.resolveOrderableQuantity(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -15008,7 +15122,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 }),
@@ -15673,6 +15787,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) });
@@ -15808,11 +15923,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 }),
@@ -15977,26 +16094,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"
                   }
                 )
               }
@@ -16161,6 +16281,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 || [];
@@ -16198,11 +16319,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
@@ -16214,11 +16337,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"
           }
         )
       },
@@ -16273,12 +16398,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(
@@ -16332,6 +16458,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;
@@ -16366,8 +16493,9 @@ function DefaultProductImage(props) {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+    PropellerImg,
     {
+      as: Img,
       src: url,
       alt: altText,
       className: className ?? "h-full w-full object-contain",
@@ -19276,6 +19404,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);
@@ -19441,11 +19570,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: [
@@ -19682,6 +19813,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;
@@ -19707,6 +19839,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;