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

package/dist/index.js

@@ -2,7 +2,7 @@
 import { getLabel, getLocalizedValue, formatPrice, localeForLanguage, getClusterSku, getClusterImageUrl, isContentHidden, getProductSku, getProductImageUrl, createServices, isCheckoutAllowed, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, buildInventoryFilter, findPurchaserPac, isOverAuthorizationLimit, MIN_STOCK_THRESHOLD, getNettedBonusItems, getLanguageString, collectAttributeValues, getCountryName, resolveLanguageEntry, getLanguageUri } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React6 from 'react';
-import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext, useSyncExternalStore } from 'react';
+import { createContext, useState, useContext, useRef, useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ProductStatus, ProductSortField, SortOrder, CrossupsellType, PriceDisplay, CartStatus, CartAddressType, Gender, YesNo, AddressType, MagicTokenService, PaymentStatuses, OrderSearchFields, OrderItemClass, ProductSearchableField, machineService, PurchaseRole, AttributeType, OrderSortField, OrderType, BundleCondition, OrderDiscountType } from '@propeller-commerce/propeller-sdk-v2';
 import { clsx } from 'clsx';
@@ -21,6 +21,9 @@ function PropellerProvider({ value, children }) {
 function usePropellerDeps() {
   return useContext(PropellerDepsContext);
 }
+function useImgComponent() {
+  return useContext(PropellerDepsContext)?.imgComponent;
+}
 function useRequiredPropellerDeps() {
   const deps = useContext(PropellerDepsContext);
   if (!deps) {
@@ -4676,8 +4679,25 @@ function ActionCode(rawProps) {
   ] });
 }
 var ActionCode_default = ActionCode;
+function PropellerImg({ as: Injected, ...props }) {
+  if (Injected) return /* @__PURE__ */ jsx(Injected, { ...props });
+  const { src, alt, className, width, height, loading, onClick } = props;
+  return /* @__PURE__ */ 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";
@@ -4695,20 +4715,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__ */ 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__ */ jsx("img", { className: "propeller-cart-bonus-item__image w-full h-full object-contain p-1", src: img, alt: name }) : /* @__PURE__ */ jsx(
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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"
                   }
                 )
               }
@@ -4753,6 +4774,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,
@@ -5109,27 +5131,30 @@ function AddToCart(rawProps) {
             /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__modal-body px-6 py-5", children: [
               /* @__PURE__ */ jsxs("div", { className: "propeller-add-to-cart__modal-product flex items-start gap-4", children: [
                 !!getModalImageUrl() ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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"
                       }
                     )
                   }
@@ -7189,29 +7214,33 @@ function CartItem(rawProps) {
 }
 function CartItemImage(props = {}) {
   const { derived } = useCartItemContext();
+  const Img = useImgComponent();
   return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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"
           }
         )
       }
@@ -7332,6 +7361,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__ */ jsxs("div", { className: props.className ?? "propeller-cart-item__crossupsells mt-3 pt-3 border-t border-border", children: [
     /* @__PURE__ */ jsx("p", { className: "propeller-cart-item__crossupsells-label text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: getLabel(resolved.labels, "crossupsellTitle", "You might also like") }),
@@ -7348,11 +7378,13 @@ function CartItemCrossupsells(props = {}) {
               onClick: (e) => handlers.onCrossupsellClick(item, e),
               children: [
                 !!helpers.getCrossupsellImageUrl(item) ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "min-w-0", children: [
@@ -7781,7 +7813,7 @@ function CartIconAndSidebar(rawProps) {
                 includeTax: useTax,
                 className: "propeller-cart-icon__item",
                 children: [
-                  /* @__PURE__ */ jsx(CartItem_default.Image, { className: "w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden border border-border-subtle" }),
+                  /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-between py-1", children: [
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx(CartItem_default.Title, { className: "propeller-cart-icon__item-name text-sm font-medium hover:text-primary line-clamp-2" }),
@@ -8548,6 +8580,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__ */ jsx(
       InjectedImage,
@@ -8566,13 +8599,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__ */ jsx("a", { className: "block h-full w-full", href: derived.clusterUrl, onClick: handleClusterClick, children: derived.imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "propeller-cluster-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx("div", { className: "propeller-cluster-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsx(
           "path",
           {
             strokeLinecap: "round",
@@ -8790,6 +8825,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;
@@ -8808,8 +8844,9 @@ function MachineCard(props) {
           className: "flex h-full flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
           children: [
             showImage && /* @__PURE__ */ jsx("div", { className: "propeller-machine-card__image aspect-square w-full overflow-hidden bg-background-subtle", children: imageUrl ? /* @__PURE__ */ jsx(
-              "img",
+              PropellerImg,
               {
+                as: Img,
                 src: imageUrl,
                 alt: name,
                 loading: "lazy",
@@ -8826,6 +8863,7 @@ function MachineCard(props) {
                   children: /* @__PURE__ */ jsx(
                     "svg",
                     {
+                      "aria-hidden": "true",
                       className: "h-12 w-12",
                       fill: "none",
                       stroke: "currentColor",
@@ -9130,6 +9168,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__ */ jsx(
       InjectedImage,
@@ -9148,13 +9187,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__ */ jsx("a", { className: "block h-full w-full", href: derived.productUrl, onClick: handleProductClick, children: derived.imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "propeller-product-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx("div", { className: "propeller-product-card__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-16 w-16", children: /* @__PURE__ */ jsx(
           "path",
           {
             strokeLinecap: "round",
@@ -11009,6 +11050,7 @@ function MachinePartsSearch(props) {
   ] });
 }
 function ClusterConfigurator(props) {
+  const Img = useImgComponent();
   const { settingsWithValues, handleAttributeSelect, initFromProduct } = useClusterConfigurator({
     products: props.products,
     config: props.config,
@@ -11099,7 +11141,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__ */ jsx("img", { className: "propeller-cluster-configurator__image w-full h-full object-cover", src: val, alt: val }),
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "propeller-cluster-configurator__image-check absolute inset-0 bg-secondary bg-opacity-20 flex items-center justify-center", children: /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -11199,6 +11241,7 @@ function getProductImageUrl4(product) {
 }
 function ClusterOptions(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const [selectedProductIds, setSelectedProductIds] = useState({});
   function getOptionsForRender() {
     const language = props.language;
@@ -11285,20 +11328,23 @@ function ClusterOptions(rawProps) {
         option.hasError ? /* @__PURE__ */ jsx("p", { className: "propeller-cluster-options__error mt-1 text-xs text-destructive", children: getLabel(props.labels, "requiredError", "This option is required") }) : null,
         option.hasSelection ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
                 "path",
                 {
@@ -11782,19 +11828,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__ */ jsxs(Fragment, { children: [
     !!imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "propeller-favorite-list-item__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-8 w-8", children: /* @__PURE__ */ jsx(
+    !imageUrl ? /* @__PURE__ */ jsx("div", { className: "propeller-favorite-list-item__image-placeholder flex h-full w-full items-center justify-center text-foreground-subtle", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: "h-10 w-10", children: /* @__PURE__ */ jsx(
       "path",
       {
         strokeLinecap: "round",
@@ -11992,6 +12041,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({
@@ -12573,11 +12623,13 @@ function FavoriteListDetails(rawProps) {
                         "data-adding": isAdding ? "true" : "false",
                         children: [
                           /* @__PURE__ */ 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__ */ 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__ */ jsxs(
                             "svg",
@@ -13285,6 +13337,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";
@@ -13343,26 +13396,29 @@ function ItemsOverview(rawProps) {
           "data-bundle": isBundle ? "true" : "false",
           children: [
             showImage ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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"
                   }
                 )
               }
@@ -13986,11 +14042,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__ */ jsxs("div", { className: "flex items-center gap-4", children: [
                 showImage ? productImage ? /* @__PURE__ */ jsx("div", { className: "propeller-order-item-card__media relative w-16 h-16 flex-shrink-0 rounded overflow-hidden", children: /* @__PURE__ */ 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__ */ 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: getLabel(props.labels, "noImage", "No Img") }) : null,
                 /* @__PURE__ */ jsxs("div", { children: [
@@ -14757,6 +14815,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) : formatPrice(n, { symbol: currency, locale: localeForLanguage(props.language) });
@@ -14988,7 +15047,7 @@ function QuickOrderInner(props) {
               children: [
                 m.imageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
-                  /* @__PURE__ */ jsx("img", { src: m.imageUrl, alt: "", width: 32, height: 32, className: "rounded object-cover" })
+                  /* @__PURE__ */ jsx(PropellerImg, { as: Img, src: m.imageUrl, alt: "", width: 32, height: 32, className: "rounded object-cover", loading: "lazy" })
                 ) : null,
                 /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
                   /* @__PURE__ */ jsx("span", { className: "block text-foreground", children: m.name }),
@@ -15653,6 +15712,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) => formatPrice(value, { symbol: currencySymbol, locale: localeForLanguage(props.language) });
@@ -15788,11 +15848,13 @@ function ProductBundles(rawProps) {
                   ) }) : null,
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center w-40", children: [
                     /* @__PURE__ */ 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__ */ 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__ */ 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 }),
@@ -15957,26 +16019,29 @@ function ProductBundles(rawProps) {
         /* @__PURE__ */ jsxs("div", { className: "propeller-product-bundles__modal-body px-6 py-5", children: [
           /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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"
                   }
                 )
               }
@@ -16141,6 +16206,7 @@ function ProductDownloads(props) {
 }
 var ProductDownloads_default = ProductDownloads;
 function ProductGallery(props) {
+  const Img = useImgComponent();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const images = props.images || [];
@@ -16178,11 +16244,13 @@ function ProductGallery(props) {
         }
       ) }) : null,
       images.length > 0 ? /* @__PURE__ */ jsx(
-        "img",
+        PropellerImg,
         {
+          as: Img,
           alt: 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
@@ -16194,11 +16262,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__ */ jsx(
-          "img",
+          PropellerImg,
           {
+            as: Img,
             className: "w-full h-full object-contain p-1",
             src: img,
-            alt: `${getLabel(props.labels, "productImageAlt", "Product image")} ${index + 1}`
+            alt: `${getLabel(props.labels, "productImageAlt", "Product image")} ${index + 1}`,
+            loading: "lazy"
           }
         )
       },
@@ -16253,12 +16323,13 @@ function ProductGallery(props) {
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            "img",
+            PropellerImg,
             {
+              as: Img,
               alt: 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__ */ jsx(
@@ -16312,6 +16383,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;
@@ -16346,8 +16418,9 @@ function DefaultProductImage(props) {
     );
   }
   return /* @__PURE__ */ jsx(
-    "img",
+    PropellerImg,
     {
+      as: Img,
       src: url,
       alt: altText,
       className: className ?? "h-full w-full object-contain",
@@ -19256,6 +19329,7 @@ function mapToSearchBarResult(item, language, urls) {
 }
 function SearchBar(rawProps) {
   const props = useInfraProps(rawProps);
+  const Img = useImgComponent();
   const [showDropdown, setShowDropdown] = useState(false);
   const [localTerm, setLocalTerm] = useState("");
   const containerRef = useRef(null);
@@ -19421,11 +19495,13 @@ function SearchBar(rawProps) {
                   ...resultProps,
                   children: [
                     result.imageUrl || noImageUrl() ? /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -19589,6 +19665,6 @@ function UserDetails(rawProps) {
 }
 var UserDetails_default = UserDetails;
 
-export { AccountIconAndMenu_default as AccountIconAndMenu, ActionCode_default as ActionCode, AddToCart_default as AddToCart, AddToFavorite_default as AddToFavorite, AddressCard_default as AddressCard, AddressSelector_default as AddressSelector, BreadcrumbsWithProvider_default as Breadcrumbs, CartBonusItems_default as CartBonusItems, CartCarriers_default as CartCarriers, CartIconAndSidebar_default as CartIconAndSidebar, CartItem_default as CartItem, CartOverview_default as CartOverview, CartPaymethods_default as CartPaymethods, CartSummary_default as CartSummary, CategoryDescription_default as CategoryDescription, CategoryShortDescriptionWithProvider_default as CategoryShortDescription, ClusterCard_default as ClusterCard, ClusterConfigurator_default as ClusterConfigurator, ClusterInfo_default as ClusterInfo, ClusterOptions_default as ClusterOptions, CompanySwitcher_default as CompanySwitcher, AddToCart_default as DefaultAddToCart, AddToFavorite_default as DefaultAddToFavorite, ItemStock_default as DefaultItemStock, DefaultProductBadges, ProductBulkPrices_default as DefaultProductBulkPrices, ProductBundles_default as DefaultProductBundles, DefaultProductImage, ProductPrice_default as DefaultProductPrice, DefaultProductSurcharges, DeliveryDate_default as DeliveryDate, FavoriteListDetails_default as FavoriteListDetails, FavoriteListItem_default as FavoriteListItem, FavoriteLists_default as FavoriteLists, ForgotPassword_default as ForgotPassword, GridFilters_default as GridFilters, GridFiltersPanel, GridPagination_default as GridPagination, GridTitleWithProvider_default as GridTitle, GridToolbar_default as GridToolbar, ItemStock_default as ItemStock, ItemsOverview_default as ItemsOverview, LoginForm_default as LoginForm, LoginToOrderButton_default as LoginToOrderButton, MachineCard, MachineGrid, Menu_default as Menu, OrderActions_default as OrderActions, OrderBonusItems_default as OrderBonusItems, OrderItemCard_default as OrderItemCard, OrderList_default as OrderList, OrderShipments_default as OrderShipments, OrderSummaryWithProvider_default as OrderSummary, OrderTotalsWithProvider_default as OrderTotals, PRICE_REQUEST_STORAGE_KEY, PriceRequestList_default as PriceRequestList, PriceToggle_default as PriceToggle, ProductBulkPricesWithProvider_default as ProductBulkPrices, ProductBundles_default as ProductBundles, ProductCard_default as ProductCard, ProductDescription_default as ProductDescription, ProductDownloads_default as ProductDownloads, ProductGallery_default as ProductGallery, ProductGrid_default as ProductGrid, ProductGridConfigProvider, ProductInfo_default as ProductInfo, ProductPriceWithProvider_default as ProductPrice, ProductShortDescriptionWithProvider_default as ProductShortDescription, ProductSlider_default as ProductSlider, ProductSpecifications_default as ProductSpecifications, ProductTabs_default as ProductTabs, ProductVideos_default as ProductVideos, PropellerDepsProvider, PropellerProvider, PurchaseAuthorizationConfigurator_default as PurchaseAuthorizationConfigurator, PurchaseAuthorizationRequests_default as PurchaseAuthorizationRequests, QuickOrder, QuoteActions_default as QuoteActions, RegisterForm_default as RegisterForm, RequestPriceButton_default as RequestPriceButton, SearchBar_default as SearchBar, UserDetails_default as UserDetails, addItem as addPriceRequestItem, buildRootMachinesQuery, fetchActiveCart, initCart, isPriceOnRequest, mergeAnonymousCart, containsItem as priceRequestContains, removeItem as removePriceRequestItem, setItemQuantity as setPriceRequestItemQuantity, useAddress, useAuth, useCart, useCheckout, useClusterConfigurator, useCompany, useFavorites, useInfraProps, useMachines, useMenu, useOrders, usePriceRequest, useProductBundles, useProductGridConfig, useProductInfo, useProductSearch, useProductSlider, useProductSpecs, usePropellerContext, usePropellerDeps, usePropellerScope, usePurchaseAuthorizationConfigurator, usePurchaseAuthorizationRequests, useQuickOrder, useRequiredPropellerDeps, useResolvedProps, useServices, useSpareParts, useUserMode };
+export { AccountIconAndMenu_default as AccountIconAndMenu, ActionCode_default as ActionCode, AddToCart_default as AddToCart, AddToFavorite_default as AddToFavorite, AddressCard_default as AddressCard, AddressSelector_default as AddressSelector, BreadcrumbsWithProvider_default as Breadcrumbs, CartBonusItems_default as CartBonusItems, CartCarriers_default as CartCarriers, CartIconAndSidebar_default as CartIconAndSidebar, CartItem_default as CartItem, CartOverview_default as CartOverview, CartPaymethods_default as CartPaymethods, CartSummary_default as CartSummary, CategoryDescription_default as CategoryDescription, CategoryShortDescriptionWithProvider_default as CategoryShortDescription, ClusterCard_default as ClusterCard, ClusterConfigurator_default as ClusterConfigurator, ClusterInfo_default as ClusterInfo, ClusterOptions_default as ClusterOptions, CompanySwitcher_default as CompanySwitcher, AddToCart_default as DefaultAddToCart, AddToFavorite_default as DefaultAddToFavorite, ItemStock_default as DefaultItemStock, DefaultProductBadges, ProductBulkPrices_default as DefaultProductBulkPrices, ProductBundles_default as DefaultProductBundles, DefaultProductImage, ProductPrice_default as DefaultProductPrice, DefaultProductSurcharges, DeliveryDate_default as DeliveryDate, FavoriteListDetails_default as FavoriteListDetails, FavoriteListItem_default as FavoriteListItem, FavoriteLists_default as FavoriteLists, ForgotPassword_default as ForgotPassword, GridFilters_default as GridFilters, GridFiltersPanel, GridPagination_default as GridPagination, GridTitleWithProvider_default as GridTitle, GridToolbar_default as GridToolbar, ItemStock_default as ItemStock, ItemsOverview_default as ItemsOverview, LoginForm_default as LoginForm, LoginToOrderButton_default as LoginToOrderButton, MachineCard, MachineGrid, Menu_default as Menu, OrderActions_default as OrderActions, OrderBonusItems_default as OrderBonusItems, OrderItemCard_default as OrderItemCard, OrderList_default as OrderList, OrderShipments_default as OrderShipments, OrderSummaryWithProvider_default as OrderSummary, OrderTotalsWithProvider_default as OrderTotals, PRICE_REQUEST_STORAGE_KEY, PriceRequestList_default as PriceRequestList, PriceToggle_default as PriceToggle, ProductBulkPricesWithProvider_default as ProductBulkPrices, ProductBundles_default as ProductBundles, ProductCard_default as ProductCard, ProductDescription_default as ProductDescription, ProductDownloads_default as ProductDownloads, ProductGallery_default as ProductGallery, ProductGrid_default as ProductGrid, ProductGridConfigProvider, ProductInfo_default as ProductInfo, ProductPriceWithProvider_default as ProductPrice, ProductShortDescriptionWithProvider_default as ProductShortDescription, ProductSlider_default as ProductSlider, ProductSpecifications_default as ProductSpecifications, ProductTabs_default as ProductTabs, ProductVideos_default as ProductVideos, PropellerDepsProvider, PropellerImg, PropellerProvider, PurchaseAuthorizationConfigurator_default as PurchaseAuthorizationConfigurator, PurchaseAuthorizationRequests_default as PurchaseAuthorizationRequests, QuickOrder, QuoteActions_default as QuoteActions, RegisterForm_default as RegisterForm, RequestPriceButton_default as RequestPriceButton, SearchBar_default as SearchBar, UserDetails_default as UserDetails, addItem as addPriceRequestItem, buildRootMachinesQuery, fetchActiveCart, initCart, isPriceOnRequest, mergeAnonymousCart, containsItem as priceRequestContains, removeItem as removePriceRequestItem, setItemQuantity as setPriceRequestItemQuantity, useAddress, useAuth, useCart, useCheckout, useClusterConfigurator, useCompany, useFavorites, useImgComponent, useInfraProps, useMachines, useMenu, useOrders, usePriceRequest, useProductBundles, useProductGridConfig, useProductInfo, useProductSearch, useProductSlider, useProductSpecs, usePropellerContext, usePropellerDeps, usePropellerScope, usePurchaseAuthorizationConfigurator, usePurchaseAuthorizationRequests, useQuickOrder, useRequiredPropellerDeps, useResolvedProps, useServices, useSpareParts, useUserMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map