@propeller-commerce/propeller-v2-react-ui 0.27.0 → 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) {
@@ -4696,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";
@@ -4715,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"
                   }
                 )
               }
@@ -4773,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,
@@ -5129,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"
                       }
                     )
                   }
@@ -7209,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"
           }
         )
       }
@@ -7352,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") }),
@@ -7368,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: [
@@ -7801,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" }),
@@ -8568,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,
@@ -8586,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",
@@ -8810,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;
@@ -8828,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",
@@ -8846,6 +8883,7 @@ function MachineCard(props) {
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
+                      "aria-hidden": "true",
                       className: "h-12 w-12",
                       fill: "none",
                       stroke: "currentColor",
@@ -9150,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,
@@ -9168,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",
@@ -11029,6 +11070,7 @@ function MachinePartsSearch(props) {
   ] });
 }
 function ClusterConfigurator(props) {
+  const Img = useImgComponent();
   const { settingsWithValues, handleAttributeSelect, initFromProduct } = useClusterConfigurator({
     products: props.products,
     config: props.config,
@@ -11119,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",
                 {
@@ -11219,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;
@@ -11305,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",
                 {
@@ -11802,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",
@@ -12012,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({
@@ -12593,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",
@@ -13305,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";
@@ -13363,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"
                   }
                 )
               }
@@ -14006,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: [
@@ -14777,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) });
@@ -15008,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 }),
@@ -15673,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) });
@@ -15808,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 }),
@@ -15977,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"
                   }
                 )
               }
@@ -16161,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 || [];
@@ -16198,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
@@ -16214,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"
           }
         )
       },
@@ -16273,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(
@@ -16332,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;
@@ -16366,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",
@@ -19276,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);
@@ -19441,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: [
@@ -19682,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;
@@ -19707,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;